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.
Related
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?
I have an issue with my website. My page loads normally in Firefox, but when I use either Chrome or Safari, it goes to the bottom of the page and I don't understand why. I tried putting the following snippet at the beginning of the page, but no luck.
<script>
$(document).ready(function() {
$(document).scrollTop(0);
});
</script>
Why does the page go to the bottom on loading?
When going to your site, I get redirected to http://www.ondinevermenot.fr/#start. That means the page will try to jump to the start element.
However, the start element is absolutely positioned. Therefore, when the page tries to jump down, the start element moves down with it. Therefore the page tries to jump down again. Then the start element moves down more. They keep going down until the bottom of the page, when there is no more room.
To fix it, don't redirect to #start when your page loads.
Because of the strangeness of jumping to something that's absolutely positioned, it's probably handled differently in different browsers.
Try to have your image and other contents put inside div and set the box attribute of the div to margin:auto. works well with HTML5.
i have an alturnative work around for you and incase you ever need to get to the top of the page - you can use this javascript as an alturnative:
((IJavaScriptExecutor)webapplication).ExecuteScript("window.scrollTo(0, document.body.scrollHeight 0)");
however the other option would be to set a start up property: for example document.start("body.height = 0") something along those lines may work.
preferably id use option one as a code to start the broswer at a set height may not work so well for every browser. hope this helps.
I had 2 links to my home page in my footer. When I removed the links from my footer the problem went away.
I have a really weird problem.
I have a site (running wordpress), and I use jquery roundabout plugin.
When I visit the site with the address bar, the site is displayed fine. When I'm already in the site and I hit refresh - everything is messed up. I checked in both chrome and firefox, and I get the same result. In IE there is no problem.
Also, I noticed that the problem occurs only when doing a soft refresh (F5) and it's ok when doing a hard refresh (Ctrl+F5)
You can check for yourself in my test site
http://50.112.34.111
try to press enter in the address bar a few times - should display ok. try to refresh - and you'll see the problem...
First of all I would try to put the JS includes (<script.../>) in the header AFTER all CSS includes! That might already help. Since the CSS might influence your JS, JS has to know all CSS before it gets loaded.
I've been looking at using a script I've found online (here) as a basis for a website I'm looking to create. It has an issue in Chrome in that the page wont scroll once a link is clicked, however if I resize the window just a tiny bit the page "repaints" - I think this is the right term - and all is well again.
Is there anyway to do a repaint like this? I don't mean refresh :)! Sorry if this seems a bit vauge, if you try this link in chrome, press one of the links in the header and you'll see the problem when trying to then scroll.
Initially I'm thinking there might be some javascript I can call at the end of switching pages that repaints the page.
Thanks
You could try doing something like this after the slide has completely transitioned to a new page:
Since you've commented that it didn't work as I originally suggested, here's a way to "encourage" Chrome to do the hide/display trick:
$(".slide.loaded.prev").css("display", "none");
setTimeout(function() {
$(".slide.loaded.prev").css("display","");
});
or you could try this:
var slide=$(".slide.loaded.prev");
slide.css("display", "none").height(); // just get the height to trigger a relayout.
slide.css("display", "");
The above code simply finds the previously visible slide, sets the CSS property display to none (hiding it completely) and then removes it. This trick worked when using the Chrome developer tools.
It appears that the scroll bar is for the previous "slide" in Chrome. By toggling the display of the slide briefly, the scrollbar is hidden under the now current "slide's" content.
I've got the same problem with this post:
How to fix flickering in IFrames?
Unfortunately, there's no solution (and I'm afraid of negative ratings too :) ).
I can't provide a page where you can see the behaviour (as it's intranet) - but I'll try to explain it:
When I open an external page via lightbox, I get a disturbing 'flickering' when clicking on links... i.e. I try to open an image gallery located on an internal server - clicking on the "next" link lets the page flicker before moving on to the next page.
If I open any other web page (google, some newspaper, ...) I do not get this behaviour - it's much faster, so it seems like the content of the first page is replaced by the content of the next one. In my image gallery it's much slower: the first page disappears, then the next page appears. I get this flickering only with lightbox-popup, not, if I load the page in another window.
I tried differend JavaScript frameworks (jQuery, Scriptaculous, Standalone) - so I guess it's my image gallery which causes this behaviour... any ideas?
It would be really (!) appreciated... thanks!
Best regards,
Stefan
As Max mentions, source would be useful.
Also, try using Fiddler or Firebug's Net panel to look at the actual HTTP requests that are being made - perhaps your image gallery is POSTing to itself before redirecting to another page?