Develop Reference

Browser back button event not working jquery

I am facing issue while calling the browser back button. Actually in home page I am displaying the bootstrap modal for signup. But when user clicks on another page like cart page... once user reaches the cart page and presses browser back button modal again shows. I want to hide the bootstrap modal on browser back button. I have tried many snippets but none is working. Below is my code:-
$(function() {
if (window.history && window.history.pushState) {
$(window).on('popstate', function() {
alert('Back button was pressed.');
$('#MyMODAL').modal('hide');
});
}
});
Not even the alert box is showing. Can anyone help me on this issue.

Lightbox evolution preventing the window from scrolling issue

I hope someone might be able to help me with this. I am currently using the lightbox evolution plugin to display some nice lightboxes on my page.
I noticed that it allows the user to continue to scroll up and down the page if the modal / lightbox is shown.
I have added the following code:
$('a.light-box').lightbox({
'onOpen' : function() {$('html, body').css({'overflow': 'hidden','height': '100%'});},
'onClose' : function() {$('html, body').css({'overflow': 'auto','height': 'auto'});}
});
It prevents the scrolling from happening, but if I launch a link half way down the page then it automatically tries to scroll to the top of the page which kinda defeats the purposes of the scrolling.
Is there any other css properties that I could use to prevent it from scrolling to the top of the page ?
thanks in advance

Add this to your script:
$('a.light-box').on('click', function(e){
e.preventDefault();
});

How to make Sidebar Hidden when page loads up in bootstrap?

This is my website .
It has a top menu and a sidebar menu. When the page loads up, the side bar is by default visible. There is no problem in Desktop, but when this is viewed on Mobile device, the side bar comes above the content of the website and it is not possible to remove it, since the toggle button to show/hide it is in the top menu.
Is it possible to make it hidden by default when the page loads up ? (Problem 1)
Also, if it works, then the show/hide sidebar works fine in desktop, but if we minimize the brower window, it becomes opposite, like, when it is hidden, HIDE SIDEBAR is displayed, when it is shown, SHOW SIDEBAR is displayed.
The jquery code I used to Hide/Show side bar is:
var f=1; // to displayd HIDE, since by default its shown.
$(document).ready(function(){
$("#menu-toggle").click(function(){
if (f==0)
{
$("#menu-toggle").html("<b>Show Categories</b>");
f=1;
}
else
{
$("#menu-toggle").html("<b>Hide Categories</b>");
f=0;
}
});
});
Is it possible to know if I am on mobile or desktop, so that I can initialise the value of f accordingly? (Problem 2)

Add one more line in $(document).ready to trigger click event on page load as below:
$(document).ready(function(){
//Event code start here
....
//Event code end here
$("#menu-toggle").trigger('click') //trigger its click
});
For your 2nd problem you will get lot of javascript solutions if you
search, like one here and another here

using toggle will be more convenient than click,if u want to make it hidden when the page loads up ,set display none first in html(simple way)
$(document).ready(function(){
$("#menu-toggle").toggle(function(){
if($(this).css('display') === 'none')
{
$("#menu-toggle").html("<b>Hide Categories</b>"); //this is hide
}
else
{
$("#menu-toggle").html("<b>Show Categories</b>"); //this is show
}
});
});

how do i link an a tag to an onload modal window?

I figured out how to make a modal window pop up as the page loads, but I was wondering how I can make it appear also after clicking on a link, so that if a first time user comes to the website, closes the onload modal window, and then wants to sign up, he can do so.
I got the code from: http://www.aspdotnet-suresh.com/2013/03/open-show-jquery-popup-window-on-page.html
and the website that i'm using it on is http://thewildernesswalk.businesscatalyst.com/
If you have a better solution than the tutorial i found (which would be great), I am all ears, but it seems like some of the other answers i found out there mess with the code that makes the nav stick to the top and the "back to top" button appear.
Thank you in advance

Assuming the code at the link you gave, you may insert the following in your HTML <body> in order to show the modal upon clicking hyperlink:
Click me!
<script>
var elem = document.getElementById('hyper');
elem.onclick = showModal;
function showModal() {
$('.popup').show();
return false;
}
</script>

lightbox not working correctly

I have a problem in lightbox. This is the link when i clicked login form appears.
<a href="index.php?g=login.html" title="Login Form"
rel="gb_page_center[425, 220,login.html]">Login</a>
When I click the link before page loads, page opens in new window. light box isn't working correctly. I need to block this link utill lightbox loads.
How can I do this in javascript?
click the top corner link login
Link: http://www.clubforeducation.com/

Did you try adding some attribute like onclick='return false;' ?

You might want to include your lightbox javascript code at the bottom of the page.
Or hide all your images initially while page is loading; once page is loaded, you can show all links again with something like below:
window.onload = function()
{
// note: using jquery here
$("a.lightboxlinks").css('display':'inline');
};