I have my main file loading a second php file like this:
$.get('single.php?admin=1&start=1').success(function(data) {
$('.loader').fadeOut(400, function() {
$('#overlay').html(data);
$(".content h2").css({"padding-top": "50px"});
});
});
The overlay is filled with the content from the "single.php" page, when I view the HTML with the Chrome dev tools. And I can see the menu at the top of the page, but the main content doesn't show. When I load the page manually (http://bit.ly/1dCHTEp) the content loads every time perfectly.
Here is the page where the problem exists:
http://bit.ly/11U9OzC
Try clicking on the "expand" icon in the bottom right of any of the house divs, and you'll see the problem. If you click on the next arrow, in the top menu, it will load the 2nd div ok, and you can go back to the first div too.
This problem exists in Chrome (and also on my iPhone), not in Firefox (FF seems to work properly) and there are no errors in the dev console in Chrome. What am I doing wrong?
I checked out your site, and looking at the HTML - all the content IS THERE, it is just hidden (it has CSS set to display:none). I suspect whatever plugin/library/whatever you're using is setting it to display:none when you don't intend it to.
Related
I am building a slider in pure HTML / CSS (no JS). It works very well, see the code.
You will need to download it and execute it locally to understand my problem as it is related to the back and forward buttons of the browser.
When clicking on links to navigate, the URL changes to #a1, #a7, #a5, whatever you are doing. The slider scrolls to the appropriate slide correctly. If you manually change the URL, putting #a3 instead of #a7 for example, slider will also scroll correctly.
However, when you go back (or forward), the URL changes from #a3 to #a7 but the content doesn't scroll.
Any idea why? Any idea what I can do to have the scroll on the back action?
I asked a Firefox developer and he explained to me why this is the expected behavior, and not a bug.
I misunderstood what was going on with the back action. Quick answer: it doesn't go to the previously selected anchor, it goes where the body scroll was.
Still using the code in the codepen in the question:
Remove the overflow-x: scroll from the CSS
Click on #a3, then on #a7. The content scroll to #a7
Click on the back button of your browser
I thought the browser was scrolling back to #a3. But in fact, it is scrolling to where it was before you clicked on the link. To see it in action:
Click on #a5. The URL changes to #a5
Move the scroll to have #a3 on the screen
Click on #a7. The URL changes to #a7
Click on the back button of your browser
The URL changes to #a5 but #a3 is displayed on the screen, as that's where you were before clicking the link.
So, it is the expected behavior according to the whatwg spec.
However, that's not the behavior I want. So, let's go for a dirty hack:
window.onhashchange = function() {
window.location.href = window.location.href;
};
Now, when clicking back, it will force the page to reload locally (no server request) and it will scroll to the element.
Wow, that was an hard one.
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.
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.
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.
Was just trying to cobble a quick site together as a favour for my sister. It's based on a template she bought and I've just quickly bunged her copy/pictures in, so I'm aware the markup is far from perfect. That said, I can't see how it would be causing the following issue...
The template uses a jQuery plugin called jScrollPane to make the content sections scrollable. Sometimes however, in Chrome (v20) this doesn't work - it doesn't let you scroll all the way down.
What's really odd though, is the pattern I've found that seems to effect whether it works or not. Try the following
Go to http://mattandkate2012.co.uk in Google Chrome - click 'Ceremony' - can you scroll down far enough to see the map? I can't.
Press the reload icon, click 'Ceremony' - can you scroll down? I can't.
Select the URL in the browser URL bar, press enter - can you scroll down? I can now!
Does everyone else get the same results as above, and do you have any idea why pressing enter in the URL bar has a different effect to the reload button?
This functionality works fine in Firefox and even IE!
Thanks
Pete
From a very quick look I guess it's because the section contains an image and you aren't re-initialising jScrollPane once the image loads. See:
http://jscrollpane.kelvinluck.com/image.html
The difference between refreshing and pressing enter in the location bar is that the cached image is shown when you press enter in the location bar...
I would suggest moving the call to $('.content').jScrollPane({showArrows: true}); to inside the $(document).ready block - if you call it before the document is ready often images or other elements won't have loaded and so the height of the containers will be wrong.