//First function -> Makes a heading float when scrolled past it
if (window.matchMedia('(min-width: 767px)').matches) {
$(function(){
var topBlockheight=$('.site-header').height();
// Check the initial Position of the fixed_nav_container
var stickyHeaderTop = $('.float-h2').offset().top;
var stopFloat = $('#stop-float').offset().top;
$(window).scroll(function(){
if( ( $(window).scrollTop() > stickyHeaderTop-topBlockheight && $(window).scrollTop() < stopFloat-topBlockheight )) {
$('.float-h2').css({position: 'fixed', top: '200px'});
}
else {
$('.float-h2').css({position: 'relative', top: '0px'});
}
});
});
}
// Adds Hover effect for boxes
if (window.matchMedia('(min-width: 767px)').matches) {
$(document).ready(function(){
$(".thumb-cta").mouseover(function(){
max_value=4;
random_value= Math.floor((Math.random() * max_value) + 1);
$(this).attr("data-random",random_value);
});
})
}
These are my two only functions in jQuery from my site which i decided to try to rewrite in vanilla JS. The reason for this decision is because I dont want a 90kb file (jquery main file) to be loaded for 2 basic functions (basic but still can't do them, yes I know).
I've tryed to re write them using http://youmightnotneedjquery.com and https://www.workversatile.com/jquery-to-javascript-converter and i ended up with this code, which does not have any errors in the console, but still does not work :((
let el = document.getElementById("masthead");
let topBlockheight = parseFloat(getComputedStyle(el, null).height.replace("px", ""))
var rect = document.getElementById("float-h2").getBoundingClientRect();
var offset = {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
var brect = document.getElementById("stop-float").getBoundingClientRect();
var boffset = {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
window.scroll(function(){
if( ( window.scrollTop() > rect-topBlockheight && window.scrollTop() < stopFloat-topBlockheight )) {
document.getElementById("float-h2").css({position: 'fixed', top: '200px'});
}
else {
document.getElementById("float-h2").css({position: 'relative', top: '0px'});
}
});
Any ideas how I can move on, because I'm really stuck
hope this work for you
if (window.matchMedia('(min-width: 767px)').matches) {
//Note: if "site-header" is more than one element remove [0] and create a loop
var topBlockheight=document.getElementsByClassName('site-header')[0].offsetHeight
var stickyHeaderTop = document.getElementsByClassName('float-h2')[0].offsetTop;
var stopFloat = document.getElementById('stop-float').offsetTop;
window.addEventListener("scroll", function(){
if( ( window.scrollY > stickyHeaderTop-topBlockheight && window.scrollY < stopFloat-topBlockheight )) {
document.getElementsByClassName('float-h2')[0].style.position = 'fixed'
document.getElementsByClassName('float-h2')[0].style.top = '200px'
}
else {
document.getElementsByClassName('float-h2')[0].style.position = 'relative'
document.getElementsByClassName('float-h2')[0].style.top = 0
}
});
}
// Adds Hover effect for boxes
if (window.matchMedia('(min-width: 767px)').matches) {
document.onreadystatechange = function(){
if(document.readyState === "interactive") {
document.getElementsByClassName('thumb-cta')[0].addEventListener("mouseover", function(){
max_value=4;
random_value= Math.floor((Math.random() * max_value) + 1);
this.setAttribute("data-random",random_value);
});
}
}
}
Details
jQuery
in jQuery to select elements by className or tagName it's enough to write $('.element') or $('tag') but in Vanillajs to select elements you can use document.getElementsByClassName('elements') or document.getElementsByTagName('elements') which return found elements sharing the same className or tagName in an array if you want to select only one element you can write the element index like document.getElementsByClassName('elements')[0] but if you want to select all elements you will be need to create a loop
var el = document.getElementsByClassName('elements')
for(var i = 0; i < el.length; i++) {
el[i].style.padding = '25px';
el[i].style.background = 'red';
}
and because of id is unque name for the element you don't need to any extra steps you can select it diectly select it like document.getElementById('id')
that was about selecting elements
height() method which uses get the element height - in Vanillajs js to get the element height you can use offsetHeight property or getComputedStyle(element, pseudo|null).cssProp
Example
element.offsetHeight, parseInt(getComputedStyle(element, null).height)
offset() method which uses to return coordinates of the element this method have 2 properties top, left in Vanillajs to get the element offset top you can use offsetTop propery directly like element.offsetTop
jQuery provides a prototype method like css() which provide an easy and readable way to styling elements like in normal object propery: value - in Vanillajs to styling elements you will be need to use style object like element.style.prop = 'value' and you will be need to repeat this line every time you add new css property like
el.style.padding = '25px';
el.style.background = 'red';
//and they will repeated as long as you add new property
if you don't want to include jQuery into your project and need to use this method you can define it as prototype method for HTMLElement, HTMLMediaElement
Example 1: for styling one element
//for html elements
HTMLElement.prototype.css = function(obj) {
for(i in obj) {
this.style[i] = obj[i]
}
}
//for media elements like video, audio
HTMLMediaElement.prototype.css = function(obj) {
for(i in obj) {
this.style[i] = obj[i]
}
}
//Usage
var el = document.getElementsByClassName('elements')[0]
el.css({
'padding': '25px',
'background-color':
})
if you wants to add this style for multiple elements you can define it as prototype method for Array
Example 2: for multiple elements
Array.prototype.css = function(obj) {
for(i = 0; i < this.length; i++) {
if (this[i] instanceof HTMLElement) {
for(r in obj) {
this[i].style[r] = obj[r]
}
}
}
}
//Usage
var el1 = document.getElementsByClassName('elements')[0]
var el2 = document.getElementsByClassName('elements')[1]
[el1, el2].css({
'background-color': 'red',
padding: '25px'
})
jQuery allow you to add events directly when selecting element like $('.element').click(callback) but in Vanillajs you can add events with addEventListener() or onevent proprty like document.getElementById('id').addEventListener('click', callback) , document.getElementById('id').onclick = callback
$(document).ready(callback) this method uses to make your code start working after loading the libraries, other things it's useful to give the lib enough time to loaded to avoid errors - in Vanilla js you can use onreadystatechange event and document.readyState protpety which have 3 values loading, interactive, complete
Example
document.onreadystatechange = function () {
if (document.readyState === 'interactive') {
//your code here
}
}
Your Coverted Code
at this line parseFloat(getComputedStyle(el, null).height.replace("px", "")) you don't need to replace any thing because parseInt(), parseFloat will ignore it
element.css() id don't know how you don't get any errors in the console when this method is undefined you will be need to define it as above to make it work
scroll event is not defined you will be need to use window.onscroll = callback like example above
Related
This question already has answers here:
Check if element is visible in DOM
(27 answers)
Closed 6 years ago.
In JavaScript, how would you check if an element is actually visible?
I don't just mean checking the visibility and display attributes. I mean, checking that the element is not
visibility: hidden or display: none
underneath another element
scrolled off the edge of the screen
For technical reasons I can't include any scripts. I can however use Prototype as it is on the page already.
For the point 2.
I see that no one has suggested to use document.elementFromPoint(x,y), to me it is the fastest way to test if an element is nested or hidden by another. You can pass the offsets of the targetted element to the function.
Here's PPK test page on elementFromPoint.
From MDN's documentation:
The elementFromPoint() method—available on both the Document and ShadowRoot objects—returns the topmost Element at the specified coordinates (relative to the viewport).
I don't know how much of this is supported in older or not-so-modern browsers, but I'm using something like this (without the neeed for any libraries):
function visible(element) {
if (element.offsetWidth === 0 || element.offsetHeight === 0) return false;
var height = document.documentElement.clientHeight,
rects = element.getClientRects(),
on_top = function(r) {
var x = (r.left + r.right)/2, y = (r.top + r.bottom)/2;
return document.elementFromPoint(x, y) === element;
};
for (var i = 0, l = rects.length; i < l; i++) {
var r = rects[i],
in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);
if (in_viewport && on_top(r)) return true;
}
return false;
}
It checks that the element has an area > 0 and then it checks if any part of the element is within the viewport and that it is not hidden "under" another element (actually I only check on a single point in the center of the element, so it's not 100% assured -- but you could just modify the script to itterate over all the points of the element, if you really need to...).
Update
Modified on_top function that check every pixel:
on_top = function(r) {
for (var x = Math.floor(r.left), x_max = Math.ceil(r.right); x <= x_max; x++)
for (var y = Math.floor(r.top), y_max = Math.ceil(r.bottom); y <= y_max; y++) {
if (document.elementFromPoint(x, y) === element) return true;
}
return false;
};
Don't know about the performance :)
As jkl pointed out, checking the element's visibility or display is not enough. You do have to check its ancestors. Selenium does this when it verifies visibility on an element.
Check out the method Selenium.prototype.isVisible in the selenium-api.js file.
http://svn.openqa.org/svn/selenium-on-rails/selenium-on-rails/selenium-core/scripts/selenium-api.js
Interesting question.
This would be my approach.
At first check that element.style.visibility !== 'hidden' && element.style.display !== 'none'
Then test with document.elementFromPoint(element.offsetLeft, element.offsetTop) if the returned element is the element I expect, this is tricky to detect if an element is overlapping another completely.
Finally test if offsetTop and offsetLeft are located in the viewport taking scroll offsets into account.
Hope it helps.
This is what I have so far. It covers both 1 and 3. I'm however still struggling with 2 since I'm not that familiar with Prototype (I'm more a jQuery type of guy).
function isVisible( elem ) {
var $elem = $(elem);
// First check if elem is hidden through css as this is not very costly:
if ($elem.getStyle('display') == 'none' || $elem.getStyle('visibility') == 'hidden' ) {
//elem is set through CSS stylesheet or inline to invisible
return false;
}
//Now check for the elem being outside of the viewport
var $elemOffset = $elem.viewportOffset();
if ($elemOffset.left < 0 || $elemOffset.top < 0) {
//elem is left of or above viewport
return false;
}
var vp = document.viewport.getDimensions();
if ($elemOffset.left > vp.width || $elemOffset.top > vp.height) {
//elem is below or right of vp
return false;
}
//Now check for elements positioned on top:
//TODO: Build check for this using Prototype...
//Neither of these was true, so the elem was visible:
return true;
}
/**
* Checks display and visibility of elements and it's parents
* #param DomElement el
* #param boolean isDeep Watch parents? Default is true
* #return {Boolean}
*
* #author Oleksandr Knyga <oleksandrknyga#gmail.com>
*/
function isVisible(el, isDeep) {
var elIsVisible = true;
if("undefined" === typeof isDeep) {
isDeep = true;
}
elIsVisible = elIsVisible && el.offsetWidth > 0 && el.offsetHeight > 0;
if(isDeep && elIsVisible) {
while('BODY' != el.tagName && elIsVisible) {
elIsVisible = elIsVisible && 'hidden' != window.getComputedStyle(el).visibility;
el = el.parentElement;
}
}
return elIsVisible;
}
You can use the clientHeight or clientWidth properties
function isViewable(element){
return (element.clientHeight > 0);
}
Prototype's Element library is one of the most powerful query libraries in terms of the methods. I recommend you to check out the API.
A few hints:
Checking visibility can be a pain, but you can use the Element.getStyle() method and Element.visible() methods combined into a custom function. With getStyle() you can check the actual computed style.
I don't know exactly what you mean by "underneath" :) If you meant by it has a specific ancestor, for example, a wrapper div, you can use Element.up(cssRule):
var child = $("myparagraph");
if(!child.up("mywrapper")){
// I lost my mom!
}
else {
// I found my mom!
}
If you want to check the siblings of the child element you can do that too:
var child = $("myparagraph");
if(!child.previous("mywrapper")){
// I lost my bro!
}
else {
// I found my bro!
}
Again, Element lib can help you if I understand correctly what you mean :) You can check the actual dimensions of the viewport and the offset of your element so you can calculate if your element is "off screen".
Good luck!
I pasted a test case for prototypejs at http://gist.github.com/117125. It seems in your case we simply cannot trust in getStyle() at all. For maximizing the reliability of the isMyElementReallyVisible function you should combine the following:
Checking the computed style (dojo has a nice implementation that you can borrow)
Checking the viewportoffset (prototype native method)
Checking the z-index for the "beneath" problem (under Internet Explorer it may be buggy)
One way to do it is:
isVisible(elm) {
while(elm.tagName != 'BODY') {
if(!$(elm).visible()) return false;
elm = elm.parentNode;
}
return true;
}
Credits: https://github.com/atetlaw/Really-Easy-Field-Validation/blob/master/validation.js#L178
Try element.getBoundingClientRect().
It will return an object with properties
bottom
top
right
left
width -- browser dependent
height -- browser dependent
Check that the width and height of the element's BoundingClientRect are not zero which is the value of hidden or non-visible elements. If the values are greater than zero the element should be visible in the body. Then check if the bottom property is less than screen.height which would imply that the element is withing the viewport. (Technically you would also have to account for the top of the browser window including the searchbar, buttons, etc.)
Catch mouse-drag and viewport events (onmouseup, onresize, onscroll).
When a drag ends do a comparison of the dragged item boundary with all "elements of interest" (ie, elements with class "dont_hide" or an array of ids). Do the same with window.onscroll and window.onresize. Mark any elements hidden with a special attribute or classname or simply perform whatever action you want then and there.
The hidden tests are pretty easy. For "totally hidden" you want to know if ALL corners are either inside the dragged-item boundary or outside the viewport. For partially hidden you're looking for a single corner matching the same test.
I don't think checking the element's own visibility and display properties is good enough for requirement #1, even if you use currentStyle/getComputedStyle. You also have to check the element's ancestors. If an ancestor is hidden, so is the element.
Check elements' offsetHeight property. If it is more than 0, it is visible. Note: this approach doesn't cover a situation when visibility:hidden style is set. But that style is something weird anyways.
Here is a sample script and test case. Covers positioned elements, visibilty: hidden, display: none. Didn't test z-index, assume it works.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
width: 200px;
border: 1px solid red;
}
p {
border: 2px solid green;
}
.r {
border: 1px solid #BB3333;
background: #EE9999;
position: relative;
top: -50px;
height: 2em;
}
.of {
overflow: hidden;
height: 2em;
word-wrap: none;
}
.of p {
width: 100%;
}
.of pre {
display: inline;
}
.iv {
visibility: hidden;
}
.dn {
display: none;
}
</style>
<script src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script>
<script>
function isVisible(elem){
if (Element.getStyle(elem, 'visibility') == 'hidden' || Element.getStyle(elem, 'display') == 'none') {
return false;
}
var topx, topy, botx, boty;
var offset = Element.positionedOffset(elem);
topx = offset.left;
topy = offset.top;
botx = Element.getWidth(elem) + topx;
boty = Element.getHeight(elem) + topy;
var v = false;
for (var x = topx; x <= botx; x++) {
for(var y = topy; y <= boty; y++) {
if (document.elementFromPoint(x,y) == elem) {
// item is visible
v = true;
break;
}
}
if (v == true) {
break;
}
}
return v;
}
window.onload=function() {
var es = Element.descendants('body');
for (var i = 0; i < es.length; i++ ) {
if (!isVisible(es[i])) {
alert(es[i].tagName);
}
}
}
</script>
</head>
<body id='body'>
<div class="s"><p>This is text</p><p>More text</p></div>
<div class="r">This is relative</div>
<div class="of"><p>This is too wide...</p><pre>hidden</pre>
<div class="iv">This is invisible</div>
<div class="dn">This is display none</div>
</body>
</html>
Here is a part of the response that tells you if an element is in the viewport.
You may need to check if there is nothing on top of it using elementFromPoint, but it's a bit longer.
function isInViewport(element) {
var rect = element.getBoundingClientRect();
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
var windowWidth = window.innerWidth || document.documentElement.clientWidth;
return rect.bottom > 0 && rect.top < windowHeight && rect.right > 0 && rect.left < windowWidth;
}
I want to position some divs on top of all ads on Amazon.com like this:
This is for a project of mine. The above picture was achieved through getting the coordinates of the ads using getBoundingClientRect and creating divs, setting top and left based on these coordinates, and appending the divs to document.body. However, since they have absolute position and are children of document.body, they do not move with the ads. For example, if I resize the window, this happens
Also, in product pages, this happens without doing anything.
I have also tried appending the divs to the parents of the iframes/ads, but I can never seem to make them appear outside of their parent. I have tried suggestions from various links, such as making position:absolute, setting bottom or top, making the parents position:relative but nothing has worked. There has been one instance of the div appearing outside of the parent but it was in some random position above it like this.
I seriously don't know how to accomplish this. Ideally, the div would be a sibling of the iframe or something like that, so I don't have to deal with the divs not moving when the window resizes. I just can't seem to get anything work, though.
// Here is the code for appending to parent of iframes.
// The divs just end up overlaying the ad.
function setStyle(element, styleProperties) {
for (var property in styleProperties) {
element.style[property] = styleProperties[property];
}
}
// Regex for getting all the parents of all the iframes
var placements = document.querySelectorAll('div[id^=\'ape_\'][id$=\'placement\']');
for (var i = 0; i < placements.length; ++i) {
var placement = placements[i];
var iframe = placement.getElementsByTagName('iframe')[0];
var debugDiv = document.createElement('div');
debugDiv.id = iframe.id + '_debug_div';
setStyle(debugDiv, {
'backgroundColor': '#ff0000',
'height': '30px',
'display': 'block',
'position': 'absolute',
'top': '-30px',
'zIndex': '16777270',
});
alert(placement.id)
placement.style.position = 'relative'
placement.appendChild(debugDiv);
}
edit:
Here's the getBoundingClientRect code:
function setStyle(element, styleProperties) {
for (var property in styleProperties) {
element.style[property] = styleProperties[property];
}
}
function createDiv(iframeId, top, left, width) {
var div = document.createElement('div');
div.id = iframeId + '_debug_div';
setStyle(div, {
'backgroundColor': '#ccffff',
'backgroundColor': '#ff0000',
'height': '30px',
'width': width.toString() + 'px',
'display': 'block',
'position': 'absolute',
'top': (top - 30).toString() + 'px',
'left': left.toString() + 'px',
'zIndex': '16777270'
});
return div;
}
var placements = document.querySelectorAll('div[id^=\'ape_\'][id$=\'placement\']');
for (var i = 0; i < placements.length; ++i) {
var placement = placements[i];
var iframe = placement.getElementsByTagName('iframe')[0];
var iframeRect = iframe.getBoundingClientRect();
iframeWidth = iframeRect.right - iframeRect.left;
var debugDiv = createDiv(iframe.id, iframeRect.top, iframeRect.left, iframeWidth);
document.body.appendChild(debugDiv);
};
This doesn't work properly when the window is resized. It also does not work properly on product pages for some ads.
Try using the resize eventlistener, with a DOM MutationObserver:
var observeDOM = (function(){
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
return function( obj, callback ){
if( !obj || !obj.nodeType === 1 ) return; // validation
if( MutationObserver ){
// define a new observer
var obs = new MutationObserver(function(mutations, observer){
callback(mutations);
})
// have the observer observe foo for changes in children
obs.observe( obj, { childList:true, subtree:true });
}
else if( window.addEventListener ){
obj.addEventListener('DOMNodeInserted', callback, false);
obj.addEventListener('DOMNodeRemoved', callback, false);
}
}
})();
window.onchange = function(){
observeDOM(document.body, () => {
window.addEventListener('resize', () => {
var placements = document.querySelectorAll('div[id^=\'ape_\'] [id$=\'placement\']');
for (var i = 0; i < placements.length; ++i) {
var placement = placements[i];
var iframe = placement.getElementsByTagName('iframe')[0];
var iframeRect = iframe.getBoundingClientRect();
iframeWidth = iframeRect.right - iframeRect.left;
var debugDiv = createDiv(iframe.id, iframeRect.top, iframeRect.left, iframeWidth);
document.body.appendChild(debugDiv);
}
});
});
}
It's a start. I think the issue with the misplaced bars on the product pages may be fixed by using the onload listener too, although I can't reproduce those issues for whatever reason. If it's not matching some ads altogether, that's likely due to your query selector, but I can't help fix that unfortunately.
The code for the DOM observer is from here - it should detect changes more accurately than onchange, especially for things like flex, where elements can get reordered in the DOM on mobile view. You may also want to wrap this in document.addEventListener("DOMContentLoaded", ... to wait until everything's loaded (at the sacrifice of IE8), or just use jQuery's $(document).ready() (which is compatible with IE8) - however, if you're not already using jQuery, don't import it just for this one function!
Also, you may want to do something about the padding on the body, which may be the cause of the misalignment in some cases. You should probably get it using window.getComputedStyles, and compensate for it. Once again, however, I can't reproduce these errors.
I think, that you want to select the image of the ad.
const adImages = document.querySelectorAll('your ad images');
for (var i = 0; i < adImages.length; ++i) {
adImages[i].parent.insertAdjacentHTML('afterbegin', 'your html');
}
You basicaly set the first child of that parent element on the top.
Okay so I have the following line of code...
window.addEventListener("scroll", sHeader);
function sHeader(){
var yPosition = window.pageYOffset;
if ( yPosition = > 5 ){
header.className += ' shorter';
}
}
...which enables me to change the styles of my header after scrolling. However, it continues to fire unnecessarily as I scroll further down the page, consequently adding more "shorter" to the class attribute for "header" in HTML; like this:
<header class=" shorter shorter shorter shorter shorter shorter shorter...">
I understand using the following code eliminates this...
window.addEventListener("scroll", sHeader);
function sHeader(){
var yPosition = window.pageYOffset;
if ( yPosition = > 5 ){
header.style.height = "60px";
}
}
...however, I just don't like the look of it in HTML after executing, like this:
<header style="height: 60px;">
Is there any way, without using jQuery, that I can make the provided eventListener fire only once without having to remove it, since it is required again if the yPosition becomes less than 5px (header reverts back to original styles) and a user then decided to scroll back down the page again in the same session.
Thank you in advance!
As you describe the situation, you don't need to fire the event once. There are few ways to solve your problem.
Way 1
Use .classList.add instead of .className += to avoid class="shorter shorter shorter shorter shorter shorter shorter...".
window.addEventListener("scroll", sHeader);
function sHeader() {
var yPosition = window.pageYOffset;
if (yPosition >= 5){
header.classList.add('shorter');
} else {
header.classList.remove('shorter');
}
}
The classList property works in IE ≥ 10, but you can use a polyfill.
Way 2
Add a variable which remembers whether the header is shortened and check it in the event listener.
window.addEventListener("scroll", sHeader);
var isHeaderShorter = false;
function sHeader() {
var yPosition = window.pageYOffset;
var shouldBeShorter = yPosition >= 5;
// Checking whether the header should be changed
if (shouldBeShorter === isHeaderShorter) {
return;
}
if (shouldBeShorter) {
header.className += ' shorter'
} else {
header.className = header.className.split(' shorter').join('');
}
isHeaderShorter = shouldBeShorter;
}
{once: true} triggers event only once
window.addEventListener("scroll", sHeader, {once: true});
I basically have a div with set dimensions and overflow: hidden. That div contains 7 child divs (but only shows one at a time) that I would like to be smoothly scrolled through vertically when their respective links are hovered.
However, the first section (div) doesn't have a link and is the default section when no link is hovered.
Take a look at this jsFiddle to see a basic structure of what I'm talking about: http://jsfiddle.net/YWnzc/
I've attempted to accomplish this with jQuery scrollTo but haven't been able to get it to work.
Any help would be greatly appreciated. Thanks.
Something like this?
http://jsfiddle.net/YWnzc/5/
code:
jQuery("#nav").delegate("a", "mouseenter mouseleave", function (e) {
var i, self = this,
pos;
if (e.type == "mouseleave") {
i = 0;
}
else {
//Find out the index of the a that was hovered
jQuery("#nav a").each(function (index) {
if (self === this) {
i = index + 1; //the scrollTop is just calculated from this by a multiplier, so increment
return false;
}
});
}
//Find out if the index is a valid number, could be left undefined
if (i >= 0) {
//stop the previous animation, otherwise it will be queued
jQuery("#wrapper").stop().animate({
scrollTop: i * 200
}, 500);
//I would retrieve .offsetTop, but it was reporting false values :/
}
e.preventDefault();
});
FYI : That JSFIDDLE you sent me to went to MooTools framework, not jQuery... fyi. (might be why its not working?
Copy and paste this code exactly and it will work in jQuery for animated scrolling.
Try this for smooth scrolling within the DIV, I tested it - it works great. You
$(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('#wrapper');
// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {
// Ensure it's a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {
// Find location of target
var targetOffset = $target.offset().top;
$(this).click(function(event) {
// Prevent jump-down
event.preventDefault();
// Animate to target
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
// Set hash in URL after animation successful
location.hash = target;
});
});
}
}
});
// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
FYI : Credit for this code does not go to me as an individual developer, although I did slightly tweak the code. The owner and creator of this code is Chris Coyier and you can find more about this scrolling code here:
http://css-tricks.com/snippets/jquery/smooth-scrolling/
Here's a working example: http://jsfiddle.net/YWnzc/7/
And the code (pretty similar to rizzle's, with a couple changes that I'll explain):
$('a').hover(function(){
var selector = $(this).data('section');
var scrollAmount = $(selector).offset().top + $('#wrapper')[0].scrollTop - 129;
$('#wrapper').animate({scrollTop: scrollAmount}, 250);
},function(){
$('#wrapper').animate({scrollTop: 0}, 250);
});
First, var selector = $(this).data('section'); because in jsFiddle, the href attribute was returning the full path of the page + the hash. So I changed it to an html5 data attribute (data-section).
The next line is similar to rizzle's, except that we grab the offset of the section and add it to the current scrollTop value of the #wrapper. As he pointed out, there are some weird offset issues going on still, and I found that subtracting 129 did the trick. While this 129 number might seem like something that is likely to break, I did test out changing the sizes of the sections, making them not equal, etc, and it continued to work. I'm using Chrome, and perhaps a non-webkit browser would need a different constant to subtract. But it does seem like that 129 number is at least some kind of constant.
The rest should be pretty self-explanatory.
One thing to note: as you move your cursor over the <a> tags, the content of the #wrapper div will seem to jump around, but that's just because the mouseleave part of the hover event briefly gets triggered as the cursor moves. I'm sure you can solve that one though :)
$("#nav a").hover(function () {
var sectionName = $(this).attr("href");
var sectionPos = $(sectionName).offset().top;
var wrapperPos = $("#wrapper").offset().top;
var wrapperScroll = $("#wrapper").scrollTop();
var scrollPos = sectionPos - wrapperPos + wrapperScroll;
$("#wrapper").stop().animate({scrollTop:scrollPos}, 600);
}, function () { $("#wrapper").stop().animate({scrollTop:0}, 600); });
Just wondering if anyone has an idea as to how I might re-create a nav bar style that I saw a while ago, I just found the site I saw it on, but am not sure how they might have gotten there. Basically want it to scroll with the page then lock to the top...
http://lesscss.org/
Just do a quick "view source" on http://lesscss.org/ and you'll see this:
window.onscroll = function () {
if (!docked && (menu.offsetTop - scrollTop() < 0)) {
menu.style.top = 0;
menu.style.position = 'fixed';
menu.className = 'docked';
docked = true;
} else if (docked && scrollTop() <= init) {
menu.style.position = 'absolute';
menu.style.top = init + 'px';
menu.className = menu.className.replace('docked', '');
docked = false;
}
};
They're binding to the onscroll event for the window, this event is triggered when the window scrolls. The docked flag is set to true when the menu is "locked" to the top of the page, the menu is set to position:fixed at the same time that that flag is set to true. The rest is just some simple "are we about to scroll the menu off the page" and "are we about back where we started" position checking logic.
You have to be careful with onscroll events though, they can fire a lot in rapid succession so your handler needs to be pretty quick and should precompute as much as possible.
In jQuery, it would look pretty much the same:
$(window).scroll(function() {
// Pretty much the same as what's on lesscss.org
});
You see this sort of thing quite often with the "floating almost fixed position vertical toolbar" things such as those on cracked.com.
mu is too short answer is working, I'm just posting this to give you the jquery script!
var docked = false;
var menu = $('#menu');
var init = menu.offset().top;
$(window).scroll(function()
{
if (!docked && (menu.offset().top - $("body").scrollTop() < 0))
{
menu.css({
position : "fixed",
top: 0,
});
docked = true;
}
else if(docked && $("body").scrollTop() <= init)
{
menu.css({
position : "absolute",
top: init + 'px',
});
docked = false;
}
});
Mu's answer got me far. I tried my luck with replicationg lesscss.org's approach but ran into issues on browser resizing and zooming. Took me a while to find out how to react to that properly and how to reset the initial position (init) without jQuery or any other library.
Find a preview on JSFiddle: http://jsfiddle.net/ctietze/zeasg/
So here's the plain JavaScript code in detail, just in case JSFiddle refuses to work.
Reusable scroll-then-snap menu class
Here's a reusable version. I put the scrolling checks into a class because the helper methods involved cluttered my main namespace:
var windowScrollTop = function () {
return window.pageYOffset;
};
var Menu = (function (scrollOffset) {
var Menu = function () {
this.element = document.getElementById('nav');
this.docked = false;
this.initialOffsetTop = 0;
this.resetInitialOffsetTop();
}
Menu.prototype = {
offsetTop: function () {
return this.element.offsetTop;
},
resetInitialOffsetTop: function () {
this.initialOffsetTop = this.offsetTop();
},
dock: function () {
this.element.className = 'docked';
this.docked = true;
},
undock: function () {
this.element.className = this.element.className.replace('docked', '');
this.docked = false;
},
toggleDock: function () {
if (this.docked === false && (this.offsetTop() - scrollOffset() < 0)) {
this.dock();
} else if (this.docked === true && (scrollOffset() <= this.initialOffsetTop)) {
this.undock();
}
}
};
return Menu;
})(windowScrollTop);
var menu = new Menu();
window.onscroll = function () {
menu.toggleDock();
};
Handle zoom/page resize events
var updateMenuTop = function () {
// Shortly dock to reset the initial Y-offset
menu.undock();
menu.resetInitialOffsetTop();
// If appropriate, undock again based on the new value
menu.toggleDock();
};
var zoomListeners = [updateMenuTop];
(function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
var lastWidth = 0;
function pollZoomFireEvent() {
var widthNow = w.innerWidth || e.clientWidth || g.clientWidth;
if (lastWidth == widthNow) {
return;
}
lastWidth = widthNow;
// Length changed, user must have zoomed, invoke listeners.
for (i = zoomListeners.length - 1; i >= 0; --i) {
zoomListeners[i]();
}
}
setInterval(pollZoomFireEvent, 100);
})();
Sounds like an application of Jquery ScrollTop and some manipulation of CSS properties of the navbar element. So for example, under certain scroll conditions the navbar element is changed from absolute positioning with calculated co-ordinates to fixed positioning.
http://api.jquery.com/scrollTop/
The effect you describe would usually start with some type of animation, like in TheDeveloper's answer. Default animations typically slide an element around by changing its position over time or fade an element in/out by changing its opacity, etc.
Getting the "bouce back" or "snap to" effect usually involves easing. All major frameworks have some form of easing available. It's all about personal preference; you can't really go wrong with any of them.
jQuery has easing plugins that you could use with the .animate() function, or you can use jQueryUI.
MooTools has easing built in to the FX class of the core library.
Yahoo's YUI also has easing built in.
If you can remember what site it was, you could always visit it again and take a look at their source to see what framework and effect was used.