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..

Show a Fixed DIV when Form is changed and hide it when Form is Saved

I have a page with an HTML FORM to add/edit/delete Project Task rows. They are saved to a Database.
As this page can be very long/tall, right now there is a SAVE button at the top and bottom of page that uses AJAX to save all changes.
To make things easier, for the user to make a SAVE I am wanting to show a FIXED DIV across the top of the screen with a SAVE button.
This FIXED DIV should only show up when there are Un-Saved changes. So when the page load you do not see this right away until you make a change on the page. At that point it comes into view.
Clicking the AJAX Save button saves the Task records to Database and then the Fixed DIV/SAVE Button will go hidden again until another Change is detected.
Right now I have this like 90% working.
I have JavaScript which has EVENTS which call my showTaskUnSavedChangesHeaderBar() Function which is shown below when:
Text Input is changed
Textarea changed
Selection dropdown changed
Button Clicked to Add a New Task Row
Button Clicked to Delete Task Row/record
So as you see I have the code in place to Detect a CHANGE on the page. This then Triggers my Function which makes my Fixed DIV with Save button come into view.
Now once you click the Save button I saved the Data using AJAX and then call my hideTaskUnSavedChangesHeaderBar() Function which is also shown below.
This makes the Fixed DIV with Save button go back to being Hidden with it's CSS display: none property set.
Up until this point everything described above works as expected, except in my showTaskUnSavedChangesHeaderBar() Function I added some code to make the Fixed DIV only show when you are scrolled down the screen at least 100px so that it is not shown at the very top of screen right now.
This scroll trigger part also works fine.
The problem is, once you make a save and hideTaskUnSavedChangesHeaderBar() is called, it Hides the Fixed DIV but as soon as you scroll at all again, it keeps showing back up, even though no new CHANGES have been made to the Data on screen.
Just looking at the code below, can someone tell me what I am missing? When my hideTaskUnSavedChangesHeaderBar() Function is called and the DIV is hidden, it should Re-set the process until another Change on page is made but I must be missing something because as soon as it goes hidden a single px scroll up or down triggers it back into view again
UPDATE
It seems like when my hideTaskUnSavedChangesHeaderBar() Function is Called, I need to somehow kill this Event $(window).scroll(function() until the showTaskUnSavedChangesHeaderBar() Function is called again, is that even possible though?
I realize a JSFiddle page might be helpful, I will work on setting one up if there isn't a simple solution posted soon. I held off as my page is really complex and i'll have to dumb it down a lot to get a Fiddle working for the demo
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function showTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
var fixmeTop = 100;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
unSavedChangesHeaderBar.css({
display: 'block',
position: 'fixed',
top: '0',
left: '10'
});
}
});
}
}
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function hideTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
unSavedChangesHeaderBar.css({
display: 'none'
});
}
}

You bound an event in your function
$(window).scroll(function() {
So after that this code will always fire on scroll. If you call showTaskUnSavedChangesHeaderBar it will even bind the handler multiple times, making it fire multiple times.
Solution
You have to unbind this event handler when not needed anymore. Even better would be to put it somewhere outside and just switch a flag variable in your functions so that your scroll handler knows what to do.

.hide-me { display: none !important; }
For hideTaskUnSavedChangesHeaderBar method call addClass('hide-me') and in showTaskUnSavedChangesHeaderBar call removeClass('hide-me')
Now the scroll event won't override display to 'block'.

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

Make browser's back button work when using hide and show (jquery)

I've seen the new website of megaupload (mega) and we've got this:
Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.
In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.
My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:
$("#btn_contact").click(function () {
$("#content_contact").show();
$("#content_home").hide();
$("#content_products").hide();
$("#body_aux").hide() ;
$(this).addClass('visited');
$('#btn_products').removeClass('visited');
$('#btn_home').removeClass('visited');
});
Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.

Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.

You can use jquery load function to load white part
For example;
$('#result').load('ajax/test.html');
And in back button event you can load the white part
jquery hide and show
window.onbeforeunload = function() { $('#result').hide(); }; or
window.onbeforeunload = function() { $('#result').show(); };
jquery load function
window.onbeforeunload = function() { $('#result').load('ajax/test.html'); };

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.