Different behavior when refreshing webpage - javascript

I have a widget that I want to modify when I load the webpage.
For example:
jQuery(document).ready(function($) {
var sum = someRandomNumberFromCalculation;
$('#myWidget1').css({"position":"absolute", "margin-top": sum + "px"});
}
It works perfectly fine when I stay on the page while refreshing. What I mean by that is that I just reload the page, and just watch my screen as the webpage is loaded, and the widget changes just like I wanted.
But if I refresh the page, and for example I decide to change tabs to then come back to the webpage again when it's fully loaded, it will simply ignore the line about the CSS (or maybe it doesn't ignore it but revert to another one in the CSS afterwards).
I'm pretty sure that in both cases, the function is called, because when I put a console.log("test"), I can see the word in the console correctly.
I also tried using the $(window).load function, but I had the exact same behavior.
What should I do to have the exact same behavior even if I'm not looking at the webpage while it's loading?

Related

How can I have the page reload to the top of the screen? Right now it reloads to wherever they were before the reload

I am creating a website where I have to large content boxes that are absolutely positioned -- one at the top of the screen and one below off screen. I have the <body> element set to overflow-x and overflow-y none.
body {
overflow-x: hidden;
overflow-y: hidden;
}
When a button is clicked on the screen, the overflow-y changes to visible. This works just fine. However, if the user is near the bottom of the screen (as in farther down compared to when the page first loaded) and they reload the page, the user stays where they are but the overflow-y gets set to none and the user is stuck halfway down the page. Is there a way to have the user always start at the top of the page?
Also, this is completely vanilla js, html, and css -- no libraries or anything like that. If I need to add any other parts of my code let me know. Thanks
I have tried to use various methods of running code on load or before load (stuff like scrollTo(0,0) and the like). Having the page scroll before the reload works but does not look very good. It would be nice if it could just load at the top without the user actually seeing it move if that makes sense.
You would need some javascript to get that done. I recommend the following:
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
I found this solution on StackOverflow itself. Here is the solution
location.replace(location.href);
The above function replaces the URL with itself and then reloads the page, making the page start from the beginning. One disadvantage of this is, the previous History session for this page will also be replaced with a new one and the user won't be able to go back to the earlier pages using the back button on the browser. Check it here at MDN
Here is the link to the answer as well. (https://stackoverflow.com/a/65422431/10521908)
It's a default behavior of browser's that they don't scroll to top on refresh.
We have too manually do it.
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
For more refer this has the whole answer.
Note: Before posting a question, look if its already answered.

Force an infinite scroll page to load several pages

There's a page that has infinite scroll and it loads the next page when you scroll to the bottom of the current page, like twitter and facebook.
I want to force the page to load several pages instead of just one every time I reach the bottom.
I see in chrome's console that something new pops up into the elements and then disappear almost immediately. I managed to capture some of that element before it disappeared: <iframe class="hidden_elem" name="transport_frame_9" src="/ajax/pagelet/...
, The number in transport_frame_9 increases on every load.
Also I tried to look in the <script> tags of the page for clues but couldn't find anything useful.
Is it even possible to invoke this script to load several pages? Or maybe there's a way to fool the page to think I reached the bottom several times? Like setting a some scrolledToBottom property to true?

jQuery position()/offset() value error on reload (chrome)

I've made a menu with a backlayered moving div on hover/current menu item in wordpress.
JsFiddle: https://jsfiddle.net/wwv9c0v7/
Problem: Everything works fine, except when I'm reloading the page (F5). A click on a link with new page works well too. I don't know why, but the position().left returns a bad value. It's moved too far left.
$magicLine.css("left", $(".current-menu-item").position().left)
Thanks for your help.
EDIT: Live preview
~ Neme
I've managed to see your problem, but as the documentation below refers, browsers do not expose theirs API to detect zoom situations, when you make a refresh to the page this have a different size, you can observe that behaviour when the page is loading, it begins with a different size (i assume the page comes with bigger size, because scroll bar is loaded after the page, so this makes the page to change it's size).
Docs: https://api.jquery.com/position/
Try to make this in jquery method: $(document).ready(...)by doing this you ensure that function will allways execute after the page is loaded.

jquery AJAX backbutton problems

This is a bit weird to explain so ill do my best.
Im working on a mobile site that im trying to shape into an ios app (eventually).
On this page i have a menu button that on click, shows/hides menu.
Everything for the most part is working but, the problem is that when you click on the "back" button and the browser runs out of previous locations to go back to, the menu button breaks. When you click it, nothing happens. it behaves as though nothing is there.
The errors go like this, if on index(or first page), you click ONE link to go forward, and then on the browser hit the back button, it breaks instantly.
If your on the index, and hit for example, 5 links in any order(essentially you went forward 5xs) and thereafter, you hit back up to 4xs, the menu still works....you can essentially keep pressing links forward and be fine, hit back as far as you want and stop short one less than the total times you went forward and still be fine.
As soon as you hit the maximum backs, and theres nothing left in the history of page locations to go back to, the menu then breaks.
here is the link of this dummy site im working on (on my server)
NOTE: to test, when it loads, manually shrink the browser to about 400 width so you can see the page take effect.
EDIT** woops forgot the link
http://somdowprod.net/4testing/mobile/less1.html
and here is my code
javascript:(i left comments in there, so you can see where my logic is at...maybe im going about it wrong?)
// JavaScript Document
$(document).ready(function(){
var newHash = "";
var menuBtn = $('.leftButton');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide
menuBtn.click( menuShowHide);
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~MENU SHOW / HIDE
function menuShowHide(){
$('#menu').toggleClass();
// if($('#menu').css("display") == "none"){
// $('#menu').css("display","block");
// } else {
// $('#menu').css("display","none");
// }
scroll(0,0);
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE is-loaded trick.
function isLoaded(){
$('#progress').remove();
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE HOME PAGE
if(newHash == ""){
$('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
$('#contentHere').load('index.html #content', isLoaded);//load the content div from the index.html file
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~Load the clicked content into my container via jQuery AJAX
$('#menu a').click(function(){
menuShowHide();
window.location.hash = $(this).attr('href');
return false; //doesnt let the link jump to a new page
});
$(window).bind('hashchange',function(){
newHash = window.location.hash.substring(1);
$('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
$('#contentHere').load(newHash, isLoaded);
//console.log(newHash);
});
//===========================//
});
Anyone have any ideas as to whats making the menu break? Thanks in advanced.
The hashchange event is known to be unpredictable with the browsers back button.
Here's what's happening. When you back all the way to the beginning, the whole less.html page is being loaded into its own 'contentHere' container, and since document.ready won't be called on this subpage, no menuButton.click handler will be assigned to the links, so clicking them will not do anything.
Although being able to use your browsers back and forward buttons on asynchronous changes would be a neat feature, I don't think people would miss it enough for you to try to hack a workaround. People are used to not being able to use the back and forward button on asynchronously loaded content. They would try it once, see that it takes them to your site's referrer, hit forward, and subconciously make a mental note to use your menu instead of the back and forward buttons.
Probably a better suggestion, however, is to get rid of the AJAX feature altogether and let the links act the way that people expect them to. Okay, so you lose the cool 'Loading' modal and you save the user a tiny bit of time, but then you aren't confusing people's expectations about your interface.
Edit: to answer your question below, instead of using load() to get static content (which is overkill), put all of the content as sections in your less.html file and hide/unhide it using the menu selections. Here are two ways to accomplish this, each with their own advantages and disadvantages:
Fix your header with CSS (including the menu) (example: lifeinthegrid.com/simple-css-fixed-header/) and then make your menu links normal anchor links with no JavaScript event handler. When you click a link in the menu, the content jumps to that section and because your header is fixed, it has the feel of being a very fast httpRequest. Advantages: minimal JavaScript, the browser's back and forward buttons will work. Disadvantages: fixed elements are a nuisance on older smartphones, the next section might sneak into the bottom of the viewport and ruin the illusion. Solution: put more space between them.
The other method is to use show()/hide() on the different content sections. So let's say you click 'about us'. All of the sections are hidden and the 'about us' content is shown. Advantages: It's not as annoying as a fixed element, you can spice it up with FadeIn()/FadeOut() or other JQuery animation effects. Disadvantages: your browsers history will not track these changes unless you do some window.location hackery.

Stop JavaScript remembering variables between page refreshes? (it should not be doing it)

I have a simple if-else statment like so:
var x = width of child div.
if(x > 165)
{
set div width to 165px.
{
else
{
set div width to width of child div.
}
Which works the first time, any time after that only the first part of the statement will work. No matter if you go to another page and back or refresh several times.
Using Mootools 1.4.1
http://jsfiddle.net/ksR58/2/. This is really annoying me.
It doesn't show the fault in jsFiddle. But that's the code I'm using, on refresh in Firefox 7 the div that contains the text "Name of title." would be at the right length, after a second refresh the width would be 165px. I do not understand how that can happen.
Works fine in Google Chrome.
Update: I've tested a revised version of the jsFiddle code on a separate project on my localhost and it works 100% like it should. Grrr...
A crazy total left field cause, I was loading a google font with the tags in the header after I loaded my CSS, the javascript was run on the page once all javascript had been loaded NOT when the DOM was ready.
Added a window.addEvent(domready) to the loading of my javascript and it works fine. :D

Categories