Execute jQuery function after page refresh - javascript

I did a function where I checked if the window has been resized and an element is visible in order to change some classes and add a little bit of css .The problem is if I refresh the page the changes are reverted . Here is a snippet of my code :
$(document).ready(function() {
$(window).resize(function() {
if(isMenuVisible() == true){
$('#my-nav').removeClass('navbar-fixed-bottom');
$('#my-nav').addClass('navbar-fixed-top');
$('body').css('padding-top', '50px');
} else{
$('#my-nav').removeClass('navbar-fixed-top');
$('#my-nav').addClass('navbar-fixed-bottom');
$('body').css('padding-top', '0');
}
}) ;
});

$(document).ready(function() {
function resizeChanges(){
if(isMenuVisible() == true){
$('#my-nav').removeClass('navbar-fixed-bottom');
$('#my-nav').addClass('navbar-fixed-top');
$('body').css('padding-top', '50px');
}else{
$('#my-nav').removeClass('navbar-fixed-top');
$('#my-nav').addClass('navbar-fixed-bottom');
$('body').css('padding-top', '0');
}
}
$(window).resize(resizeChanges);
resizeChanges();
});
This way you define a separate function to make your changes, you add the event listener to trigger it but also you call that function itself after the load/refresh.

Try trigger the resize event on window after load.
$(window).trigger('resize');

If the user refreshes the page, all changes in the client side will be lost. However, you can detect when the user refreshes the page and save the values in the server side. And then, when the page is loaded again, restore those values.
$(window).on('beforeunload', function(){
// save the values to server side
});
$(window).on('load', function(){
// restore values
});

Related

What command that equivalent with Shift + F5 for JS or jQuery?

I want to clear cache and hard reload browser but how to do that using JS/jQuery command when the document is ready?
My reference:
1st Link
2nd Link
3rd Link
I have tried below but not working except commented with this one but it continuously reload with never stop. Why this happen? How to make it just reload 1 time only.
$(document).ready(function(){
// window.location.reload(false);
// document.location.reload(true);
// window.location.reload(true);
// window.location.href = window.location.href;
// location.reload(true); //this one
});
Updated: Googling and tried this but not working.
sessionStorage.setItem("origin", window.location.href);
$(document).ready(function(){
if(window.location.href == sessionStorage.getItem("origin")){
window.location.reload();
sessionStorage.removeItem('origin');
}
});
You can set a localStorage for that, simply check whether your localStorage has a value or not. If not, reload first and then set a value. Have a look at the example below:
$(document).ready(function () {
var reload = localStorage.getItem('reload');
console.log(reload);
if (reload === null) {
location.reload(true);
localStorage.setItem('reload', "stop");
}
});

jQuery page transition makes previous page blank

I'm using the following script with jQuery to have a fade transition when navigating between pages:
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(200);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
It works fine when only using links to navigate between pages, but when using the back button on the browser, the page returned to is blank.
How can I get pages to be properly displayed when navigating to them via the back button?
Using the back button returns you to the state of the previous page right before you left it (in this case, completely faded out), at least that's how I understand it. Feel free to correct me if I'm wrong though.
In any case, I think repainting the DOM would solve your problem (taken from Coderwall):
$.fn.redraw = function(){
$(document).each(function(){
var redraw = this.offsetHeight;
});
};
And to call the function: $(document).redraw();
How about try using delegate
$("a").on('click', function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});

jQuery Mobile Reload Page Depending on Div Contents

I am using jQuery Mobile and am having trouble reloading a page if the text within a div equals a certain value. The contents of the div are loaded with AJAX. The contents of the div are being updated via AJAX just fine, but I don't know why the page is not reloading when the contents are equal to "Your item has expired."
$(document).on('pagebeforeshow', '#listitem', function(event){
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('ajax_item_time.php', function(){
if($("#tableHolder").text() == "Your item has expired."){
window.location.assign("mobile_list.php")
}
else {
setTimeout(refreshTable, 5000);
}
});
}
});
Any ideas? Thank you!
This might help you:
Use .changePage() instead of window.location.assign.
$.mobile.changePage("#YOUR_PAGE_ID");
Here is the documentation.

Call a function only once

I've 3 divs (#Mask #Intro #Container) so if you click on Mask, Intro gets hidden and Container appears.
The problem is that I just want to load this only one time, not every time I refresh the page or anytime I click on the menu or a link, etc.
How can I do this?
This is the script I'm using for now:
$(document).ready(function(){
$("div#mask").click(function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});
Thank you!
You can try using a simple counter.
// count how many times click event is triggered
var eventsFired = 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
}
});
});
To persist this you will need to set a cookie. (e.g. $.cookie() if you use that plugin).
// example using $.cookie plugin
var eventsFired = ($.cookie('eventsFired') != null)
? $.cookie('eventsFired')
: 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
$.cookie('eventsFired', eventsFired);
}
});
});
To delete the cookie later on:
$.cookie('eventsFired', null);
Just point to an empty function once it has been called.
var myFunc = function(){
myFunc = function(){}; // kill it
console.log('Done once!'); // your stuff here
};
Web pages are stateless in that they don't hold states between page refreshes. When you reload the page it has no clue what has happened in the past.
Cookies to the rescue! You can use Javascript (and jQuery has some nice plugins to make it easier) to store variables on the client's browser. Store a cookie when the mask is clicked, so that when the page is next loaded it never shows.
this code with will work perfect for you and it is the standard way provided by jquery to bind events that you want to execute only once
$(document).ready(function(){
$("div#mask").one('click', function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});

simulating a click on a <a>-element in javascript

for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.
So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:
<script>
$(function() {
$('#tray-button').click();
});
</script>
However, this doesnt seem to work in any browsers i tested.
Any idea?
$('#tray-arrow').click(function() {
// prepare an action here, maybe say goodbye.
//
// if #tray-arrow is button or link <a href=...>
// you can allow or disallow going to the link:
// return true; // accept action
// return false; // disallow
});
$('#tray-arrow').trigger('click'); // this is a simulation of click
Try this
$("#tray-arrow").live("click", function () {
// do something
});
I assume that you want to popup the thumbnail bar #thump-tray on page load.
Here's a way to do it:
locate the file supersized.shutter.js and find this code:
// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
After it, add:
$(vars.tray_button).click();
Dont forget in your page (demo.html in the plugin), to change
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
to
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
instead of using
$(function(){
//jquery magic magic
});
you culd try this witch will work your jquery magic after the full page is loaded (images etc)
$(window).load(function () {
// jquery magic
});
and to simulate a click you culd use // shuld be the same as $('#tray-arrow').click();
$('#tray-arrow').trigger('click',function(){ })
example:
$(window).load(function () {
$('#tray-arrow').trigger('click',function(){
alert('just been clicked!');
})
});
try
<script>
$(function() {
$('#tray-arrow').click();
});
</script>
Make sure that this code is after your carousel is initialized.
This looks like it's a problem of timing the trigger. The plugin also loads on document load, so maybe when you try to bind the event listener the element is not created yet.
Maybe you need to add the listener in something like the theme._init function
http://buildinternet.com/project/supersized/docs.html#theme-init
or somewhere similar.
A problem might be that your plugin detects whether the click has been initiated by a user (real mouse click), or through code (by using $('#id').click() method). If so, it's natural that you can't get any result from clicking the anchor element through code.
Check the source code of your plugin.

Categories

Resources