Hi all
This is what I want to achieve: a fixed positioned div next to my content area where the text changes depending on the section of the content area the user is reading.
Can this be achieved, and how?
Greetings and thanks in advance, Kenny
K?! 0 Junior Poster in Training
scrappedcola 11 Posting Whiz in Training
You want to look at scroll offsets. You either set an onscroll event on the body of the html document or you make a div with a fixed height and overflow-y:auto (if you always want to see the scroll bars make it overflow-y:scroll). Then when the event fires you read the scroll offset to determine your position within the document to determine the content to place in the other div.
<html>
<body onscroll="alert('The user is scrolling the document')">
<!-- your content here -->
</body>
</html>This site has the scroll properties for the various browsers http://javascriptkit.com/javatutors/static2.shtml
K?! 0 Junior Poster in Training
That looks like a possible solution, thanks for the effort, but one problem is that I'm trying to create an elastic layout (em widths)
It would be really handy if the content of that div could be determined on the section the user is viewing, not on a number of pixels.
An idea I had is based upon the fact that you can add an ID to an element and then link to that section of the page with href="#IdOfElement". Is there a way to retrieve the section the user is in with JavaScript?
Grtz
scrappedcola 11 Posting Whiz in Training
You can still do that. If your content is within a div you can determine if the div is within the view port by using its vertical offset position in relation to the pages scroll offset. You would still have the scroll event on the containing element (either body or div) and then go through your list of divs and determine which is within the view port.
K?! 0 Junior Poster in Training
Well, but what kind of bothers me is that I still need to work with pixel values. This will give dificulties.
First of all, if I add content to a section, i will have to change the pixel values of the position of all the sections beneath.
Second, when a user zooms in or zooms out, or just has different default styles for the font (I'm working with 1em standard), sizes of sections will change and the pixel values won't be correct.
Or have I just misunderstood a couple of things?
Greetings, Kenny
K?! 0 Junior Poster in Training
Found this really interesting article: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
scrappedcola 11 Posting Whiz in Training
You don't need to set any pixel positions or any hard coding of positions. All you are doing is checking the div that you are interested in and making certain it is within the viewable screen. What you would want to do is have a list of div's and grab their height and y position. Then you see the scroll offset of the screen and see if the div is within that area. The link you have there is a good one and I think you should be able to apply it to your problem.
K?! 0 Junior Poster in Training
Uhu, indeed.
Well I must say that I'm a starting web developer. Already have a more then decent undestanding of html/css and php, but I'm pretty new to javascript.
I'll be taking some time to implement the solution, but I think I might want to learn JQuery first (just finished javascript courses). Will it be easier to create a solution to this with JQuery, too?(like they say that everything is easier with JQuery than with JS)
K?! 0 Junior Poster in Training
Ok, been playing around with the concept of the script. This is the code I wrote:
function checkSection(){
var section = document.getElementById("sectionWerkwijze");
var bubble = document.getElementById("speechbubble");
var text = "Document Y-offset: " + window.pageYOffset;
text +=" <br />Section Y-offset: " + section.offsetTop;
bubble.innerHTML = text;
if(window.pageYOffset >= section.offsetTop){
bubble.innerHTML = "<p>De man achter de website...</p>";
}
}(code before the "if statement")It displays the y offset of the document and the section (for testing purpose).
(if statement) When the section crosses the middle of the viewport, the text is changed.
This works well in Chrome and FF, but (guess, please, you get three chances...) IE fails... First of all, it asks if the ActiveX content is allowed to execute, I thought IE allowed JS by standard, without scaring off the user? And why does it speak of "ActiveX content" while it's JavaScript?
And second, it just doesn't work, even when I allow the "activeX" content... what's wrong with my code? (or what's wrong with IE?)
EDIT:
One more problem I discovered: The Y-Offset of the section is calculated from the top of it's container div (this is quite some pixels below the top of the viewport, it's unnoticable when the window is fullscreen at 1240*1024, but with smaller window, the section is not even in sight when the value changes...). Is there a way to make JS calculate it from the top of the viewport and not the top of the container DIV?
fxm 23 Posting Pro
IE fails
The pageXOffset and pageYOffset properties are supported in all major browsers, except Internet Explorer.
IE equivalents are "document.body.scrollLeft" and "document.body.scrollTop".
K?! 0 Junior Poster in Training
Oh indeed, should've known this, only read it yesterday in the W3Schools tutorial...
Excuse me, and thanks :)
fxm 23 Posting Pro
Is there a way to make JS calculate it from the top of the viewport and not the top of the container DIV?
This page http://www.quirksmode.org/js/findpos.html gives an elegant method for finding the actual position on the screen of any element (with links to important related information).
K?! 0 Junior Poster in Training
Ok, thx mate.
By the way, I'm using JQuery now for hiding and displaying <p>'s, but the weird thing is, it didn't work with the minified version. It does work with the "development version" (the large file), so my code is correct. Any thoughts on that?
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.