We Keep Coding

Button needs to be clicked twice (Jquery)

Background: Trying to build a fullscreen menu for mobile devices on a one page site.
Problem: The #handle div needs to be clicked 2 times for action. I have tried to use following in different ways but i seem to implement it wrong in some way:
live / die,
bind / unbind,
on / off,
delegate / undelegate.
I don't understand how i should solve my problem. Sorry for bad id-names on some divs.
HTML
<div id="overlay">
<input type="checkbox" id="op"></input>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<div id="nav">
<ul>
<li class="homescroll" class="overlayli">Home</li>
<li class="servscroll" class="overlayli">Services</li>
<li class="workscroll" class="overlayli">Work</li>
<li class="aboutscroll" class="overlayli">About</li>
<li class="contactscroll" class="overlayli">Contact</li>
</ul>
</div>
</div>
</div>
Jquery
When li is clicked the user gets scrolled down the page and the menu is hidden:
If the user now wants to open the menu again it needs to be clicked 2 times for action.
<script>
$(document).ready(function () {
$('li').hover(
function () {
$('li', this).fadeIn();
},
function () {
$('li', this).fadeOut();
}
);
$(".aboutcroll").off().on('click', function() {
$('html, body').animate({
scrollTop: $("#aboutdummy").offset().top
}, 800);
$("#overlay").hide();
$("#handle").on('click');
});
});
</script>
When #handle is clicked the overlay fullscreen menu will open:
<script>
$(document).ready(function(){
$("#handle").off().on('click', function() {
$("#overlay").show();
});
});
</script>

The problem seems to be with your #handle onClick function
In your code you are using
$("#handle").off().on('click', function() {
$("#overlay").show();
});
Here .off() is removing the event listener on the first click! Try removing .off()
Also for the scrolling, you can use the following code (which is also without .off())
$("SELECTOR").click(function() {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 500);
return false;
});
Hope this works for you! And If it doesn't it would better if you can share your code via jsFiddle or CodePen.

Hide nav content when Magnific-popup is shown

Hi I would like to know if it is possible to hide html content when a popup is shown. (I am using Magnific-popup). I have a button that calls this popup to be shown. And of course, when popup is closed nav content will be displayed again.
Nav code to hide and display
<nav class="top-nav">
<ul>
<li>A link</li>
<li>A link</li>
</ul>
</nav>
button that calls popup
Call popup</span>
Popup code
<div id="register-popup" class="white-popup mfp-hide">
<div class="container">
<p>some content</p>
</div>
</div>
Thank you very very much for your help :)

Solution
You can hide the top-nav via the open callback of the Magnific plugin. You can also use the close callback to show it again.
$('#register-popup').magnificPopup({
callbacks: {
open: function() {
$('.top-nav').hide();
}
close: function() {
$('.top-nav').show();
}
}
});

Magnific-popup accepts callback on open and close events.
$('.selector').magnificPopup({
// you may add other options here, e.g.:
preloader: true,
callbacks: {
open: function() {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
$('.top-nav').hide();
},
close: function() {
// Will fire when popup is closed
$('.top-nav').show();
}
// e.t.c.
}
});
For more information en Magnific-popup, checkout there API documentation:
http://dimsemenov.com/plugins/magnific-popup/documentation.html

you can use those API methodes :
$('#register-popup').magnificPopup({
// you may add other options here, e.g.:
preloader: true,
callbacks: {
open: function() {
// Will fire when this exact popup is opened
},
close: function() {
// Will fire when popup is closed
}
// e.t.c.
}
});

When the Magnific Popup is active, the class .mfp-zoom-out-cur is added to the body. If you want to hide anything use that class to target whatever you want to hide in the layout. No additional JavaScript necessary.
.mfp-zoom-out-cur .top-nav {
display:none;
visibility:hidden;
}

javascript popup window as iframe, div,or window always on top on changing links

in web page, is it possible to open 'popup' frame as:
div or iframe or even window, so :
1. the user can see both , the pop window and the 'main' page ?
on change link in specific domain, the popped frame will remain always on top
( with additional code if needed)
the user can see both the frame and the main a
and get focus with mouse click on the popped and main
possibility to access objects/events from popped and main.
(in iframe even on different origin)
in standard desktop application, we can achieve it, as MDI forms, for example.
code sample or link will help.

Example:
$("#simple").dialog(
{
autoOpen: false,
open: function()
{
$("#withIframe").dialog( "moveToTop" );
},
focus: function( event, ui ) {
$("#withIframe").dialog( "moveToTop" );
}
});
$("#withIframe").dialog(
{
autoOpen: false,
open: function(ev, ui){
$('#if').attr('src','http://www.jQuery.com');
$(this).dialog( "moveToTop" );
}
});
$(".link").click(function() {
$("#simple").dialog('option','modal',$('#isModal').prop('checked')).dialog( "open" );
});
$(".link_iframe").click(function() {
$("#withIframe").dialog( "open" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<label><input type='checkbox' id='isModal' /> Is Modal? </label>
<a href='#' class='link'>link</a>
<a href='#' class='link_iframe'>link (iframe)</a>
<div id='simple'>
<h2>
Simple dialog
</h2>
</div>
<div id='withIframe'>
<iframe id='if' src=''></iframe>
</div>

jquery loading spinner or loading message while JS running

Is there a way to show a loading spinner while my javascript is running?
I want toshow something to the user while the page is waiting.....
This is taking about 5-6 secs..so I want to show a spinner or box while its waiting
$.each(ARRAY, function(key, item){
//IM DOING SOME LOGIC HERE
});

Add a hidden loading image in your page, display it when you start you function and hide it again when the function completes.
<img src="loading image " id="loading">
function(){
$("#loading").show();
your logic
$("#loading").hide();
}

This is just the first thing that came to mind. Probably not the best solution. But it does the job.. You could define a loading div and hide it by default. Then, while the each is doing its thing, show the loading div. So something like:
CSS:
.hidden{display:none;}
HTML:
<div class="loading hidden"></div>
JavaScript:
function(){
$('.loading').removeClass('hidden');
$.each(ARRAY, function(key, item){
});
}

Try this. Works for me with a bootstrap 5.2 spinner, with the following referenced in the html:
bootstrap 5.2 stylesheet
referencing the bootstrap bundle script
jquery script
$function doLogic() {
$("#loadingImg").css('visibility','visible');
setTimeout(function() { // allow spinner to load before work starts
// logic here to load page
$("#loadingImg").hide();
},5000); //5000ms = 5secs
}
#loadingImg {
width: 3rem;
height: 3rem;
align-self: center;
visibility: hidden;
}
<div id="spinnerContainer">
<div id="loadingImg" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

This may be helpful for AJAX logic:
<img id="loadingImg" src="loding.gif"/>
$('#loadingImg')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
The ajaxStart/ajaxStop functions will fire whenever you do any AJAX calls and displays the loading spinner.
Alternatively, this may be helpful too:
function doLogic() {
$('#loadingImg').show();
setTimeout(function() { // allow spinner to load before work starts
// logic here
},500);
$('#loadingImg').hide();
}

Implement a loading indicator for a jQuery AJAX call

I have a Bootstrap modal which is launched from a link. For about 3 seconds it just sits there blank, while the AJAX query fetches the data from the database. How can I implement some sort of a loading indicator? Does twitter bootstrap provide this functionality by default?
EDIT: JS code for modal
<script type="text/javascript">
$('#myModal').modal('hide');
$('div.divBox a').click(function(){
var vendor = $(this).text();
$('#myModal').off('show');
$('#myModal').on('show', function(){
$.ajax({
type: "GET",
url: "ip.php",
data: "id=" + vendor,
success: function(html){
$("#modal-body").html(html);
$(".modal-header h3").html(vendor);
$('.countstable1').dataTable({
"sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aaSorting":[[0, "desc"]],
"iDisplayLength": 10,
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"aButtons": ["csv", "pdf"]
}
});
}
});
});
});
$('#myModal').on('hide', function () {
$("#modal-body").empty();
});
</script>

I solved the same problem following this example:
This example uses the jQuery JavaScript library.
First, create an Ajax icon using the AjaxLoad site.
Then add the following to your HTML :
<img src="/images/loading.gif" id="loading-indicator" style="display:none" />
And the following to your CSS file:
#loading-indicator {
position: absolute;
left: 10px;
top: 10px;
}
Lastly, you need to hook into the Ajax events that jQuery provides; one event handler for when the Ajax request begins, and one for when it ends:
$(document).ajaxSend(function(event, request, settings) {
$('#loading-indicator').show();
});
$(document).ajaxComplete(function(event, request, settings) {
$('#loading-indicator').hide();
});
This solution is from the following link.
How to display an animated icon during Ajax request processing

I'm guessing you're using jQuery.get or some other jQuery ajax function to load the modal. You can show the indicator before the ajax call, and hide it when the ajax completes. Something like
$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });

There is a global configuration using jQuery. This code runs on every global ajax request.
<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
<img src="themes/img/ajax-loader.gif"></img>
</div>
<script type="text/javascript">
jQuery(function ($){
$(document).ajaxStop(function(){
$("#ajax_loader").hide();
});
$(document).ajaxStart(function(){
$("#ajax_loader").show();
});
});
</script>
Here is a demo: http://jsfiddle.net/sd01fdcm/

A loading indicator is simply an animated image (.gif) that is displayed until the completed event is called on the AJAX request. http://ajaxload.info/ offers many options for generating loading images that you can overlay on your modals. To my knowledge, Bootstrap does not provide the functionality built-in.

This is how I got it working with loading remote content that needs to be refreshed:
$(document).ready(function () {
var loadingContent = '<div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>';
// This is need so the content gets replaced correctly.
$("#myModal").on("show.bs.modal", function (e) {
$(this).find(".modal-content").html(loadingContent);
var link = $(e.relatedTarget);
$(this).find(".modal-content").load(link.attr("href"));
});
$("#myModal2").on("hide.bs.modal", function (e) {
$(this).removeData('bs.modal');
});
});
Basically, just replace the modal content while it's loading with a loading message. The content will then be replaced once it's finished loading.

This is how I realised the loading indicator by an Glyphicon:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
.gly-ani {
animation: ani 2s infinite linear;
}
#keyframes ani {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
</style>
</head>
<body>
<div class="container">
<span class="glyphicon glyphicon-refresh gly-ani" style="font-size:40px;"></span>
</div>
</body>
</html>