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.
Related
I have a page called "home" with an element with id="element". I have a link on another page that points to this url: "localhost:3000/home#element".
Using Chrome, when I follow the link, it takes me to the home page, but the view isn't scrolled down at all. When I refresh, however, the view automatically scrolls down to #element. It also works when I manually type the URL in.
Why doesn't this work when I'm using a link?
This bug doesn't show up on Firefox.
Probably unrelated but worth mentioning: Sometimes, rarely, when I navigate to the url "localhost:3000/home", the page opens already scrolled down to an apparently random position. It happens so sporadically that I haven't had a chance to do much testing on it. I doubt the two bugs are related, though.
I have just now sended the following message to google chrome developer:
Chrome version: 54.0.2840.59 m
As you know, when debugging a web page with javascript, the Chrome
debugger allows to pause the execution of the code on breakpoints. In
this moment is possible to move the mouse onto a variable to see what
value has in: when the mouse is on the variable chrome code
inspector/debugger shows a little tip showing the variable value.
The problem is that such little bubble tip sometimes is toooo little
and it is not possible to see the content.
Please correct its size (make it resizable) to make possible to read
its content or it isn't useful.
Thanks
Anyone else has noticed the same issue?
Someone has solved it?
Edits
Before the last update was working perfectly (or at least I didn't see anything wrong in its behavior!), but now the following image shows the issue that sometimes happens:
As shown into the above img, part of the bubble tip content is shown, part is hidden, and it is not possible to scroll the bubble tip neither up|down nor left|right: scrollbars are greyed. Sometimes scrollbars don't appear at all.
You can scroll the tool tip as per the animation below:
A possible workaround could be adding the variable to the watch list:
Procedure:
right click on the variable
Into right click menu click on "Add selected text to watches"
This allows to keep an eye on the watchlisted var contents, even if they hidden into the bubble tip.
It is not completely handy, but works.
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 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.
When I have some breakpoints set up in a script google chrome removes the ability to scroll the webpage, saying at the top of the screen Paused in debugger. Is there a way to disable this so that I can look at elements in various parts of the page, while also looking at the script in the debugger?
Taken from here.
An easy workaround for the scrolling lock-up is to just jump to the console, and:
window.scrollTo(0, 800). (Replace 800 as needed)
You can click on the Elements tab and then hover over the HTML to the element you are interested in and right click to "Scroll into view". Not the most natural and fast, but it works...