I'm having a weird issue with page render while using AngularJS and Chrome.
I'm creating a cart icon that only shows when there's at least one element in my cart. The code is:
<a ng-style="{visibility:myCart.checkCartExistence()?'visible':'hidden'}" href="/cart"><span ng-bind="myCart.getCartQty()"></span></a>
Here's the problem:
Top image shows the page as soon as an article is added to the cart.Bottom image shows the same page when you scroll down a bit.
The cart icon and the quantity aren't displayed immediately and only show up when you scroll down the page. The weirdest thing is that if you scroll all the way up, the cart icon disappear again.
The same happens with the title that is set dynamically, when you're at the top of the page it shows TITLE A, if you scroll down a bit it updates to TITLE B. If you scroll up it shows TITLE A again.
Unfortunately I can't post any link to the page so I'm wondering if anyone knows what this is without actually seeing the page.
NOTE THAT:
This happens with Chrome.
I tried with other browsers and it looks like they don't have this issue.
I managed to make it work somehow, clearing the browser cache but it came up again soon after.
Related
I'm getting some weird behaviour with the Firefox back button after linking to id's in the same page. If I have some basic html like this:
link to header
... chunk of content ...
<h2 id="some_id">header</h2>
The first click on the link takes me to the header and the first click on the browser back button takes me back to the link. All good. But if I click the link again and then click the back button a second time the browser gets confused. The screen doesn't go back to the link. Worse if I scroll back then whenever the mouse hovers over the link (or even the address bar) the screen shoots back to the header without anything being clicked.
Here's the fun part. If I do click anywhere on the page after that second visit to the header then the back button works as normal. Also, if I open the dev tools overlay then the back button works as normal.
I've tried this with a totally stripped down file - just plain html with no scripts (even no css) - to remove any unseen errors.
Has anybody else run into this? Found a fix?
I want to go from homepage of cece.indiana.edu/index.html to cece.indiana.edu/request.html#speaker. Even though I have the id="speaker", my request is not redirected to the specific id "speaker". I can only get this to work when I am on the request page already. Why can't I get this simple thing to work? Also, I've searched and found answers but none have fixed the problem.
Relevant code/snippets:
<h2 id="speaker" name="speaker">Request a Speaker</h2>
URL: cece.indiana.edu/request.html#speaker
If I am on cece.indiana.edu/index.html: I will go to
Scroll onto Navigation bar
Scroll under "get involved"
Click on "request a speaker"
Be redirected to the bottom of the request.html page. - this is not what I want to happen!
What I want it to do, but it is not happening: If I am on cece.indiana.edu/index.html (or any page)
Scroll onto Navigation Bar
Scroll under "get involved"
Click on "request a speaker"
Be redirected to the H2 with the id "speaker".
This not working correctly in Chrome or Firefox, but it has worked in Safari when I've tried it. I want it to work on all browsers.
It's the JavaScript on your page. If all JS is disabled it works fine. There is JavaScript code messing with the page load and specifically with scrolling and animation, so it's not surprising that it's interfering. Your JS even has specific references to URLs that do or do not have #anchors in them.
In this case it seems you are being sent to the bottom of the page because the "smooth scrolling" code in your JS isn't taking into account that the page may already be scrolled part way. Some browsers will "remember" where you had scrolled to last time you loaded a page, so particularly if you use the back button and then click the navigation item again, you'll end up scrolled too far.
If you have the ability to change the JS, you can fix this by making sure the smooth scrolling code ends by checking to make sure it's actually in the right spot, maybe after a small delay.
If I use the history back button of my browser to navigate back to a page with a facebook like button somewhere at the bottom, chrome shows some additional white space at the bottom of the page after the <html>-Tag.
The white area is not there when I navigate on the same page normally (not using browser history)
Using the element inspector I see that the <html>-Tag closes just where the white area starts.
It occurs even with overflow: hidden; on the <html>-Tag
If I remove the fb like button from the page, there is no such white gap.
It seems to be browser specific as I can't reproduce it in Firefox.
Does anybody know where that comes from and how to get rid of it?
Thanks!
I'm having a similar issue. I have a Like button on my product pages and if you click the back button and end up on a page where a like button is the button loads late and is hidden behind other elements.
I found a piece of code that helped but didn't completely solve the issue. I can't remember the code but if you search enough you can find it and maybe solve your issue.
I am making a simple website and I am encountering a problem whenever I reload it.
I placed my menu at the middle of the screen and when you clicked it, it needs to go down to the content. My problem is, whenever I reload it, it would still go up and show the upper picture. What I want is that after one of the menu is pressed, the menu should now stay on the upper corner of the screen without showing the upper picture (Sample website -> http://ec2-54-84-168-45.compute-1.amazonaws.com/Teapop/)
It seems like my url code that directs it on a particular div (e.g menu#teapop_nav)` doesn't work as I expected after I deployed it on the hosting site even though it works well on my local build.
Without using any javascript code, is there a fix for this using html5/css3?
Thank you.
i just tested it on my computer (chrome & firefox) and it seems to work. And also on page refresh. The picture is always on the top.
Okay, so - weird problem. Basically, I've created a PHP slideshow framework for my site which loads a whole new page each time somebody clicks to the next image. For a more "fluid" experience, I made the next/previous picture links load the next page so that the picture is at the top of the window (I put <a name='slide'></a> right above the slideshow image, and I link to that). However, when I do so, the page title disappears behind my banner at the top. They say a picture is worth a thousand words, so observe: This page looks fine, but click to go the next picture (broken page) and the album title (2010-05) disappears. If you remove #slide from the end of the broken page link, it works fine again. Any suggestions on why this is happening, or how to avoid it?
TIA! :)
In the page:
<a name='slide'></a>
...this an in-page bookmark. The #slide on the URL forces the page to scroll to this point.
If you want the page to load with it scrolled to the top every time, drop in this script:
<script type="text/javascript">
window.scrollTo(0,0)
</script>