JavaScript

121K

Solutions

41K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

Share tech news, updates, or what's on your mind.

Sign up to Post

In Angular, I need to create a Modal Window which contains a TextBox and a Button. But when i put some value in the text box of the modal window it's value is not updating?

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>  
    <script type="text/javascript">  
    var app = angular.module('myApp', []);  
    app.controller('myCtrl', function ($scope) {  
    $scope.firstName = "";  
    $scope.valSubmit = function () {  
    firstName = $scope.firstname;  
    alert(firstName);  
    $("#myModal").modal('hide');  
    };  
    });  
    </script>  
    </head>  
    <body ng-app="myApp" ng-controller="myCtrl">  
    <form id="form1" runat="server">  
    <div class="row">  
    <div id="myModal" class="modal fade" role="dialog">  
    <div class="modal-dialog">  
    <div class="modal-content">  
    <div class="modal-header">  
    <button type="button" class="close" data-dismiss="modal">×</button>  
    <h4 class="modal-title">Modal Header</h4>  
    </div>  
    <div class="modal-body">  
    <input type="text" placeholder="enter first name" id="name" ng-model="firstname" class="form-control" />  
    </div>  
    <div class="modal-footer">  
    <button type="button" class="btn btn-success" ng-click="valSubmit();">Ok</button>  
    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
    </div>  
    </div>  
    </div>  
    </div>  
 …
0
Cloud Class® Course: CompTIA Cloud+
LVL 12
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Hello guys good evening, is there anyone willing to help me. This is about ajax function and sweet alert using php pdo connection... I just want to replace javascript alert which is this
if(confirm("Are you sure you want to delete this?"))

Open in new window

with sweetalert ...my code is in below...

I want to add sweetalert to my ajax function...anyone knows how to add that?
AJAX
$(document).on('click', '.delete', function(){
		var id = $(this).attr("id");
		if(confirm("Are you sure you want to delete this?"))
		{
			$.ajax({
				url:"delete.php",
				method:"POST",
				data:{id:id},
				success:function(data)
				{
					$('#alert').html(data);
					$('#alert').show().delay(2000).fadeOut();
					dataTable.ajax.reload();
				}
			});
		}
		else
		{
			return false;	
		}

Open in new window

SWEETALERT
swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        )},

Open in new window

0
Looking for a Best IDE for developing web application using MEAN.JS or MEAN.io

Pls suggest a few
0
Hi, Experts, I wish to know how to start making a phone app that could link to my existing server. I have a web server that works on line and i want to browse  it using phone app, that i could do log-in thru it instead off dialing my web page like (www.sample.com). Any guide and advice please...
0
Hi Experts,

        I have a html5, css3, javascript, jquery, bootstrap4 application running on bright sign media player. Windows server serves these web pages.   on click event I do location.href to home page.   It takes long time nearly 5 seconds to go to home page.  This happens only with the home page.   Since it takes long to go to home page, user is clicking the button several times, to go home page.  Now the screen becomes blank. and loads home page after 5 seconds.  If the button click is done once, then after 4-5 seconds it goes to home page without blank screen.   I had even tried creating a separate java script function for click event and also tried disabling the button once clicked.  Situation remains the same.  Why it is taking long to go to home page and why the blank screen appears if clicked more than once.   Please help me in resolving this issue.

With many thanks,

Bharath AK
0
I know there has to be a way to do this. I figured out how to get the innerText of one row.

1.  I click on a button and dynamically create some controls with a div. Each div has a number
j1.png
2.  I click on X delete next to each row and remove a row. Now, the row numbers are out of order
j2.png
3. When I click on X, I call this and I get the innerText of the row I'm deleting
$("#schedgroup").on("click", ".remDelSched", function (e) { //change13 change body to schedgroup

		console.log($(this).closest('.row').children('.toggle')[0].innerText); //*** gets me the innerText of the row I'm deleting

		var numItems = $('div.schedule').length;

		if (numItems > 1) {
			$(this).closest('.row').remove();
			
		}
		else

			$(this).closest('.row').addClass('hidden'); //orig code has one "schedule" as hidden. Don't remove all of them if user clicks on X. Leave one as hidden

		

	
	});

Open in new window


4. Now, I want to renumber the divs

I think I need to do this when I click on an X but how in jQuery?
1. This gives me the "row" I'm deleting $(this).closest('.row')
2. I need to get its parent div which is schedgroup
3. Then get all the "row --> toggle" children of schedgroup
4. Loop thru and rename/increment. I started with zero but can start with 1

j3.png
0
I'm on a roll with my jQuery questions :) I'm close to telling my manager to just forget about this section but can't give up.

It's related to this question https://www.experts-exchange.com/questions/29107740/jQuery-code-partly-works-hide-div.html

1. I click on the X to remove a row. The row is removed. But now, I want to remove the "toggle" div as well.
j1.png
2. This is the code that removes the "schedule" div. I tried some lines (commented them out below) but still can't get it right.

$("#schedgroup").on("click", ".remDelSched", function (event) { //change13 change body to schedgroup

		console.log($(this));
		console.log($(this).parents());
		//console.log($(this).closest(".toggle"));

		//$(this).parents().children('div.rows').children('.toggle').addClass('hidden'); //try this to remove the toggle div

		var numItems = $('div.schedule').length;

		if (numItems > 1)
			$(this).closest(".schedule").remove();
		else

			$(this).closest(".schedule").addClass('hidden'); //orig code has one "schedule" as hidden. Don't remove all of them if user clicks on X. Leave one as hidden
		
		//$(this).parents().children('.schedgroup').toggleClass("hidden");  //try this to see if div toggle is removed

		//$(this).closest(".schedule").next(".toggle").addClass('hidden');//try this to see if div toggle removed
	});

Open in new window


3.  To debug/step thru it,
 This gets me the element I'm clicking on

console.log($(this));

Open in new window


Then I looked at the parents
console.log($(this).parents());

Open in new window


j2.png
I tried "next", "closet", "prev". How can I traverse this and find the "toggle" for that specific row?

EDIT - just tried this as well
$(this).closest(".schedule").closest('.toggle').addClass('hidden');

Open in new window

0
I am trying to figure out how to get a simple "Login with Google" using Javascript working.

The docs are very confusing. The example on Google does not work for me. All I need is for the user to click LOGIN WITH GOOGLE, then have their email address available to me in a javascript variable.

This code does not appear to work, but it should. Maybe I am not setting up my API stuff correctly on the Google API manager? Who knows.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Signin Template for Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 

Open in new window

0
This is related to this question https://www.experts-exchange.com/questions/29108573/jQuery-click-event-doesn't-get-called.html

I'll go step by step.

1. The solution in that thread worked. I tested it by hardcoding some rows and it worked. Then, I plugged it in my actual code and that worked except that I needed to fix the position of the rows.

I had this code to add the row dynamically

 
var schedule = $('.schedule:last', '#scheduleArea'); 
            var newSchedule = $(schedule).clone(true, false).html();

            // Change the 'Id' of all the elements
          //... some code here

            // Append the new schedule and hide it
	$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>'); 
 

Open in new window


The divs looked like this
d1.png
2. I made a change to the HTML to get the rows correctly. Instead of ".after", I used ".append"

	var schedule = $('.schedule:last', '#scheduleArea'); 
            var newSchedule = $(schedule).clone(true, false).html();

            // Change the 'Id' of all the elements
      //... some code here

			//console.log($(schedule));

            // Append the new schedule and hide it
			//$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>'); //camilla added collapse in per stackoverflow
		    
			
$("#schedgroup").append('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>')

Open in new window


Now it looked correctly
d2.png
3. I had the code in the accepted solution above but the divs weren't hiding/displaying
$('.row').on("click", ".toggle", function() {
console.log($(this).parents().children('.schedule'));
    $(this).parents().children('.frequency').toggleClass("hide");
	});

Open in new window


I saw this in console when I was clicking on the div. "click" event looked like being called twice

d3.png
4. I went to Julian's solution and that worked. Why is that? Julian has an explanation here but maybe that's what I don't understand
Julian's explanation

I think this is the key
To get around this we need to bind to a parent element that will be static -


If use #schedgroup instead of 'body'...code below works because #schedgroup is static
$('body').on("click", ".toggle", function() {

Open in new window


You can see it here

Works http://jsfiddle.net/jv2oudhg/

Doesn't work with my HTML change http://jsfiddle.net/gm5uxh7q/
0
Hi Experts,

I have a standalone web application (Html5, jquery and css3 application) which is running only on ipad pro in a safari browser.  I want to make this application full screen without address bar and title.  How to make this possible.  Please help me in resolving this issue.  

With Many thanks,

Bharath AK
0
Cloud Class® Course: CompTIA Healthcare IT Tech
LVL 12
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

I am following an example http://jsfiddle.net/glebkema/73gtkvjt/  to have have divs collapse and expand.

But I create controls dynamically so the JS code in that JSFiddle wasn't working... the divs weren't being collapsed.

I found this link that explained why dynamic controls work differently Explanation

I created this JSfiddle (forked the one above)

http://jsfiddle.net/3zw18rxe/7/

What I tried:
      
$('.toggle').on("click", ".schedule", function() {

Open in new window


Tried this but the divs won't collapse correctly...all of them will collapse

$(document).on("click",".toggle",function(){
    // code goes here
});

Open in new window


As a test, I hardcoded the id, but this didn't work either

$('.toggle').on("click", "#Schedules[0].Type", function() {

Open in new window


How can I do this when the controls are created dynamically?
0
1. I'm following this example http://jsfiddle.net/glebkema/73gtkvjt/
that I got from here. I'm doing the jquery version Example

2. You can download my sample code here. Unzip and just click on "page.html" to see it. The js file is Reporting.js
https://drive.google.com/open?id=17IuFhPlYPX5B7EATvE9sDES-EoB3i7gA

This is what's happening

1. I click on "Add Report Delivery" button and I see the control displayed. I click on the purple div and I can hide and display the control. This works.
j1.png
2. Click on "Add Report Delivery" again and you'll see the second control. Now, click on the puruple div and that div (control) doesn't collapse. I put debug steps in the JS code and for the second puruple div...the js code is not even called. Only the first div collapses and expands. I see I have unique Ids . Not sure what I'm missing.

j2.png

EDIT I ran a test. When I click on "add delivery schedule", the control is built dynamically. Something with this dynamic control that the "click" control on "toggle" doesn't work. Don't know why.
0
I was looking at this code and don't understand why there are so many "JSON.stringify" uses? I'm assuming it is completely wrong. Won't it change the string every time you use it? Also wouldn't it just be OK to only use this line var json = JSON.stringify(xhttp.responseText); since that stringifies everything and remove all the others?
                var idAtSource = Math.random().toString(36).slice(-5);
                var now = new Date().toJSON().slice(0, 10) + " " + new Date(new Date()).toString().split(' ')[4];
                var referralUrl = encodeURIComponent(_satellite.getVar("Full URL"));
                var jsonAction = JSON.stringify(action);
                var postBody = JSON.stringify(
                    {
                        "idAtSource": idAtSource,
                        "campaignType": "action",
                        "rawValueEncoded": jsonAction,
                        "referringUrl": referralUrl
                    }
                );

                var xhttp = new XMLHttpRequest();
                xhttp.open("POST", postUrl, true);
                xhttp.setRequestHeader("Content-type", "application/json");

                xhttp.onreadystatechange = function () {//Call a function when the state changes.
                    //readyState 4 is completed, status 200 or 201 is fulfilled
                    if (xhttp.readyState == 4 && (xhttp.status == 200 || xhttp.status == 201)) {
                        var json = 

Open in new window

0
Hi Experts,

     window.location.href is not working simlarly, document.location.href is also not working in javascript.  I want to redirect to a different url on a button click.  I had tried in javascript, it is not working.  Please help me in resolving this issue.

With Many thanks,
Bharath AK
0
Anyone knew...i had an issue .... if i have to save the timer to the server, i'll need the JavaScript to animate and increment the timer.
Have the JavaScript periodically send the value of the timer back to the server for saving so that the user can logout and login back in from anywhere and continue their timers..how????.please explain??
0
I recently asked a similar question but left out some important stuff. Here goes again...

Source Array
I have an array of items that looks like the following code. There can and will be many items in here.
[
    {
        "ItemId": "12345",
	"rmaId": "777",
        "UPC": "73343324400098",
        "Name": "Time Machine",
        "Description": "A new product you will love",
        "SerialNumberRequired": true,
        "Notes": "This is a note someone just entered",
        "Condition": 2,
        "Qty": 2,
        "SerialNumber": [
            "33",
            "34"
        ]
    },

   {
// more items will be here
}

]

Open in new window

Edit Array
I have a second array that looks like this. There will only be one object in this array.
[
    {
        "ItemId": "12345",
	"rmaId": "777",
        "UPC": "73343324400098",
        "Name": "Time Machine",
        "Description": "A new product you will love",
        "SerialNumberRequired": true,
        "Notes": "This is a note someone just entered",
        "Condition": 2,
        "Qty": 2,
        "SerialNumber": [
            "11112222",
            "3333344444"
        ]
    }
]

Open in new window

Based on the itemId in Edit array, I need any changes that don't match the source array returned to me in an array in this format.
For instance, if I am editing itemID 12345...
So if an item in the source array has two serial numbers, and both were changed, the result would be:

Desired Return Array
[
{
   rmaId: "777",
   itemId: "12345",
   serialNumber: "11112222",
   notes: "Some Notes",
   condition: "Good"	
},
{
   rmaId: "777",
   itemId: "12345",
   serialNumber: "3333344444",
   notes: "Some Notes",
   condition: "Good"
}

]

Open in new window


Some things to note:

1. rmaId, itemId, upc, name, qty cannot/will not be change.
2. some items may NOT have any serial numbers, so we need to still track notes and description
3. The return array only has those 5 properties, that is deliberate.

THANKS. I way above my paygrade on this one, lol
0
I have two arrays of similar data. I need to know what information has changed and a new array returned with old value, and new value. For instance,

Thank you for looking.

Array #1
[
    {
        "ItemId": "556784",
        "UPC": "73343324400098",
        "Name": "Time Machine",
        "Description": "A new product you will love",
        "SerialNumberRequired": true,
        "Notes": "This is a note someone just entered",
        "Condition": 2,
        "Qty": 2,
        "SerialNumber": [
            "33",
            "34"
        ]
    }
]

Open in new window


Array 2:
[
    {
        "ItemId": "556784",
        "UPC": "73343324400098",
        "Name": "Time Machine",
        "Description": "A new product you will love",
        "SerialNumberRequired": true,
        "Notes": "This is a note someone just entered",
        "Condition": 2,
        "Qty": 2,
        "SerialNumber": [
            "9999",
            "34"
        ]
    }
]

Open in new window


So in the above example, one SerialNumber was changed, so I would get back this:

[
{
    SerialNumber:  {
          old: "33",
         new: "9999"
    }
]

Open in new window

0
This code partly works but I think I need to do something with the "click" event. I'm building this dynamically.

You can download and unzip it from here. Just click on page.html to see it.
https://drive.google.com/file/d/1dU8yOCmzQJUeruaeKu1qxJLPs1-HlHF_/view

1. I click on "Add Report Delivery"
2. It calls $('#showSchedule').click(function () { in Reporting.js and adds a "schedule"
r1.png
3. Now, I click on "Add Report Delivery" again and another "schedule" is added. The first one I added is now hidden. You can add more.

r2.png
This is NOT the functiolity I'm looking for. I don't want the first one or additional ones to be hidden. I want to wrap each in a div... to be minimized...like collapse... with header.."schedule1", "schedule2", "schedule3", etc.

So, with each click...have the previous "schedule" div collapsed with a header title. I don't want them hidden. The toggle and "click" event are not working together correctly looks like it.

How can I do this? When I click on the button, each section gets an ID. Maybe I need to find the parent "div" which is "schedule" and attach the ID to the parent DIV for what I clicked on and collapse it? Here is a screenshot
r3.png
0
I am looking for an elegant and easy management solution to test my API's. For instance, we have a DEV environment, a QA environment, and a PROD environment.

Sometimes, for whatever reason, the endpoints do not match in each environment. For example...
DEV:  http://myDevEnvironment.com/Users

QA: http://myQa.com/QAGetUsers

PROD: http://mySite.com/GetAllUsers

Open in new window


So what I would like is a simple script to define the endpoints. I would like it easy to change enviromnents, and assign an alias to the method ( in the above example maybe call the alias "GetUsers"

This would be in a config file. So if I wanted to change environments, I could simply change a variable in the config file. Here is an example of how it would be used:


$.post( GetUsers, function( data ) {
  $( ".result" ).html( data );
});

Open in new window


Of course there can be many endpoints.

Can someone help me define a simple Javascript object or script to get this working?

Thank you!

John
0
Cloud Class® Course: Ruby Fundamentals
LVL 12
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

I'm confusing myself by going back and forth and reading about DataTable and jqGrid.

This is my dilemma:
1. Working on a project that has lots of grids. Grid.MVC is used for the grids
2. There's one section that uses jqGrid. Probably it's because "grouping (group by)" is needed (our  ex-developer coded this).
3. I bought this template  https://keenthemes.com/preview/metronic/theme/admin_1/table_datatables_managed.html and it uses DataTable (not that I can't replace it)

This is what I need
1. "Group by" for at least one section of our site
2.  Inline edit - one of our existing grids has that
3. Performance - some grids have large amount of data to display.
4. Export to Excel and CSV but I can use EPPlus to export the data
5. Sorting
6. Nice to haves : user be able to hide/display columns
7.  jqGrid needs a license but DataTable is free. Ex-developer has coded the jqGrid but looks like he didn't ask our manager to get the license.

From what I read, jqGrid has better performance. I don't know if DataTable has "group by".

What to do? Anyone has used either? My preference is to use DataTable because it doesn't require a license but again...I don't know if it supports "group by". I looked at their site and not clear if they have it or not.

I've found these links with pros and cons:

https://www.slant.co/versus/4837/4840/~jqgrid_vs_datatables

http://debapk.blogspot.com/2012/01/jqgrid-and-datatable-comparision.html
0
I have this partly working but not completely

1. I create dynamic controls by clicking on a button. This is an example of having 2 rows
f1.png
2. I have an X next to each row and when user clicks on it, I want to hide the div

f2.png
3.  I have this jQuery code. It works only if I have one row and hides the div. But when I have more than one, it doesn't do anything.


How can I have.... hide the div that corresponds to this X being clicked?

$(".remDelSched").on("click", function (event) {
		console.log($(this))
		$(this).closest(".schedule").addClass('hidden');
		//event.preventDefault();
	});

Open in new window


This is the code for X delete. I wonder if I need to have a unique id for each X (delete)
	<div class="col-md-2">
									<a href="javascript:void(0);" class="remDelSched"><span style="color: red" class="glyphicon glyphicon-remove"></span></a>
								</div>

Open in new window

0
Java usage vs Javascript usage.

If I undestand:

--- knowing Java  you can develop Applications that interacts with Databases. I am not sure knowing Java by itself if you can develop Dynamic Web Applications that interacts with Databases and fetch the results.( I mean probably you will have to learn other languages too, such as HTML, JSS,etc..)

---knowing Javascript what kind of advantage you get over know just Java ? I believe JavaScripts also interacts with Databases on the server and fetch the result and render the result to end user via the browser.

so it sounds to me, Java can be used for Non Web Application. JavaScript for Web Application.

If that's the case it sounds to me that knowing Java Scripts is more useful that knowing Java, Web Apps are much more in demand.


Any Expert to shade some lights on that?

Thank you
0
Hi Experts,

      I have standalone web application which is running only an Ipad.  It is supposed to only run on this ipad.  I want to enable autoplay audio for this ipad pro.  Please help me in resolving this issue.  In ipad I had tried chrome://flags/#autoplay-policy it is not found.  I had tried to enable autoplay through javascript but it didn't help.  I dont want auto play on all browser just on only one ipad.  I came to know from the previous questions it is not possible to make it on all browsers.  But I just want autoplay to be on one ipad

 $(function() {		  
		  $("a.active").find("h1").hide();
		  var adio;
		  adio = document.createElement('audio');
		  adio.src = "audio/Stolen - Audio - Marjorie Foster.mp3";
		  /*adio.pause;
		  adio.currentTime = 0;*/
		  adio.play();
		  adio.autoplay;
		  $("a.active div div").addClass("blinker");
		  
		  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {			    
			$("a.active").find("h1").hide();
			$("a:not(.active)").find("h1").show();
			switchAudio();
			$("a.active div div").addClass("blinker");
		  })
    
		  function switchAudio()
		  {
			var num = $("a.active").find("h1").text();
			stopAudio();      
			switch(num) {
			  case "1":				
				adio.src = "audio/Stolen - Audio - Marjorie Foster.mp3";				
				break;
			  case "2":				
				adio.src = "audio/Stolen - Audio - Barbara Raymond.mp3";				
				break;
			  case "3":				
				adio.src = "audio/Stolen - Audio - Charlie King.mp3";				
				

Open in new window

0
I found this JSFiddle and applied it to my code http://jsfiddle.net/hQnWG/614/

1. You can download my code from here. Unzip and click on "page_copy.html"
https://drive.google.com/file/d/1qYWpX712PZL-flacmspsVog5VzDxsm2p/view

2. It doesn't happen all the time. You might have to clear your cache to see it. I did this in Chrome

3. Click on "Billing Attention to" to select it. Now, drag it to under "Asset tax" in the right hand box. It won't get placed there. It moves back to the left hand side box.

j1.png

4. Clear cache. Now, you can drag "Billing Attention to" to the first place in the right-hand-side box. This works It's like it can be dropped anywhere but not at the last place. Again, looks like sometimes it works and sometimes it doesn't.

Very odd. I looked here https://api.jqueryui.com/sortable/ to find maybe an event or something to "sort anywhere in any position" type of event but nothing jumped out.
0
Why is image bouncing in mobile view?

I have two sites, not completely the same as I've made some changes to CSS in one.

magickitchen dot com is the one that's live.

dev2 dot magickitchen dot com is the one I'm having trouble with on mobile. You can log in using the attached credentials.

It's the photo and caption atthe top of the page that's causing me grief on dev2.

It starts out short, then gets taller. See attached screenshots.
mk-dev-for-outside.txt
start.jpg
nest-slide.jpg
0

JavaScript

121K

Solutions

41K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.