Develop Reference

Content hide/show

my goal is to hide the content of my homepage when someone visits. onClick to begin button the content should be shown. Content should stay open when user goes to other page and comes back to homepage. But it will be hidden when user closes the window and opens up the homepage again. To achieve this goal I have put the following code but it keeps the content open even when user closes and opens the window. So please help me out.
if (! localStorage.noFirstVisit) {
// hide the element
$("#content").hide();
// check this flag for escaping this if block next time
localStorage.noFirstVisit = "1";
}
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
$(".roll-button").click(function(){
$("#content").show();
});
I would highly appreciate if you check website, suggest me fix or show me proper way to achieve this goal. url:iamicongroup.com

You can totally use sessionStorage to detect whether it is new tab(window) or not.
When you first visit this page, set sessionStorage.noFirstVisit = "1";.
After you go to another page and back, sessionStorage.noFirstVisit is still "1".
But when you close the tab or browser and open the page newly again, sessionStorage.noFirstVisit will be undefined.
Documentation is here
The documentation also provide the difference between sessionStorage and localStorage.

I would suggest reading this: Detect Close windows event by Jquery
It goes over window unloading (beforeunload), which I believe is what you're after. You can set/unset your localstorage values there based on certain criteria being met; for example:
$(window).on("beforeunload", function() {
if(localStorage.noFirstVisit = "1" {
// do something
localStorage.noFirstVisit = "[someValue]"
}
else {
// do something
localStorage.noFirstVisit = "1"
}
})

Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
how about adding something like 'ng-cloak' in angular, to avoid the undesirable flicker effect caused by show/hide.
when clicking the roll-button, it prevents the divs from showing unfinished..

Bootstrap Modal Background Scrolling Issue

When my Bootstrap Modal Window is open, I have been unable to stop background scrolling from the main page. I followed the directions given in this StackOverflow question, but I have been unsuccessful so far: Prevent BODY from scrolling when a modal is opened
On the left side, near top of this page, after it loads, you will see a button that says "Large Modal". If you click it, it will open a modal window. After its open, if you scroll up and down, you will see the background moving.
http://gettinmobile.com/home.html
I have added the CSS as directed in the stackoverflow question I linked to above:
body.modal-open {
overflow: hidden;
}
I have added the javascript shown on the same stackoverflow question, though I am not sure this is done correctly:
<script type='text/javascript'>
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
</script>
Any help would be appreciated, maybe someone can see what I'm doing wrong... thanks!

You need to wait for jQuery to finish loading before you start binding events. You can do this most simply with an anonymous function:
$(function(){
// YOUR CURRENT JS CODE HERE
});

in your JS code at the bottom of page, try replacing the "$" sign with "jQuery" (no quotes), and see if that helps, it's a common happening in WordPress and quite likely the root of your problem

How can I disable skrollr plugin while modal is open?

So I'm using skrollr.js for a website, and I need to be able to open a modal window, at which point I want to disable the user from scrolling while the modal is open as they wouldn't be able to see the animations that were being activated as they scrolled.
https://github.com/Prinzhorn/skrollr

If you show some of your code I would be able to provide a better solution but have you tried something like...
$('#show-modal').click(function(){
$('#modal').fadeIn(500, function(){
$('body').css({'overflow':'hidden'});
});
});
$('#hide-modal').click(function(){
$('#modal').fadeOut(500, function(){
$('body').css({'overflow':'visible'});
});
});
Hope this helps :-)

Page reload doesn't reset jQuery / CSS styles

I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});

It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.

It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.

Programmatically call anchor tag to Page Top at load time

I have a anchor tag that when you click on the "Up to the Top", it will move the web page to the top of the page. My anchor tag is #PAGETOP.
My question is, I am using the jQuery UI Dialog and basically would like to programmatically activate this #PAGETOP anchor so whenever the page always loads at startup, would like to ensure that the page moves immediately to the top of the page.
I would like to emulate the way stackoverflow moves to the top of all your questions when you paginate to the next page (if possible).
Thanks.

To move to the 'PAGETOP' anchor in Javascript, use this:
location.hash = 'PAGETOP';
If you're wanting to do it on page load, in jQuery it'd be like this:
$(function() {
location.hash = 'PAGETOP';
});

Or take #Kip's idea and go pro with the scrollTo jQuery plugin. This plugin has additional options for different animations etc
<script>
$.scrollTo( "#PAGETOP", 1000 );
</script>