So I am trying to show a tooltip like box as I scroll my webpage and I would like it to follow the scrollbar along the right side of the page.
I looked around and found something to attempt to accomplish that as shown below:
function returnPercentHeight(){
var a = document.getElementById('rightPanel').scrollTop;
var b = document.getElementById('rightPanel').scrollHeight - document.getElementById('rightPanel').clientHeight;
return ((a/b) * 100);
}
I then append a % to the end and set the top margin of the tooltip to that returned value. This works pretty well (sort of) I have to adjust the return((a/b) * x) part (x) to make it follow the scrollbar based on the size of the browser window. Is there a better way to accomplish what I am trying to do? (NOTE: I can only use javascript, no JQuery please.)
EDIT:
Only the div given an ID of 'RightPanel' is scrolling, I am not using the scrollbar on the browser, but a scrollbar on an inner div.
There are three ways to do so:
First:
is to use the fixed position as following;
Position: Fixed;
Second:
With jQuery;
$(function(){
$(window).on('scroll', function() {
var scrollPOS = $(document).scrollTop();
$('.scroll').css({
top: scrollPOS
});
}).scroll();
});
Third:
Same as the previous, only animated;
$(window).on('scroll', function() {
$("#div").stop().animate({
"marginTop": ($(window).scrollTop()) + "px",
"marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
Although IE doesn't support, this is the coolest I've seen:
// get
var x = window.scrollX,
y = window.scrollY;
// set
window.scrollTo(1, 2);
Related
Hey I have this really annoying issue thats probably got a simple solution but for the life of me i cant find away to fix it.
Basically i have two images both 50% with of it's container now the goal is the both images to slide in (left/right) on the basis of the scroll position and once it get to the top of the container both images will sit is place.
Now i got that working to that point the only issue is when i resize the page the position of both images are wrong. I obviously did a resize() function with the same logic as the scroll() function but still i got nowhere. Here's my code
var page_width = $(document).outerWidth(),
page_height = $(document).outerHeight(),
left_image = $('.split-screen.youth'),
right_image = $('.split-screen.elite'),
offset = (page_width) / page_height;
left_image.css({'left':'0px'});
right_image.css({'right':'0px'});
$(window).on('scroll', null, function(){
var scrollTop = $(window).scrollTop(),
calc = -(scrollTop*offset);
left_image.css({
'margin-left': 'calc(100% + '+calc+'px)'
});
right_image.css({
'margin-right': 'calc(100% + '+calc+'px)'
});
});
$(window).resize(function(){
// something ???
});
Here is a jsFiddle of the issue although it doesn't look entirely accurate but you get the picture. When you resize the scroll position changes and i need the margin-left/margin-right values to be correct.
I think your problem is that you're still using the old offset value. Just update your global values first, than it works for me (see: https://jsfiddle.net/a7tfmp37/2/):
$(window).resize(function(){
page_width = $(document).outerWidth(),
page_height = $(document).outerHeight(),
offset = (page_width) / page_height;
var scrollTop = $(window).scrollTop(),
calc = -(scrollTop*offset);
left_image.css({
'margin-left': 'calc(100% + '+calc+'px)'
});
right_image.css({
'margin-right': 'calc(100% + '+calc+'px)'
});
});
I wanted to achieve an effect like this http://www.offset.com/
as you can see when it scrolls it slowly covering the carousel rather than scrolling with it.
I've tried using background fixed but the problem is the elements inside it will not stay in its position
Maybe there is a good technique in achieving this, Thanks
this is called parallax scrolling here is an example of how to do this using Jquery :
Live Demo
// Y axis scroll speed
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.container').each(function() {
var $element = $(this);
// subtract some from the height b/c of the padding
var height = $element.height()-18;
$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).bind('scroll', update);
an other example it might help DEMO
I have this bit of script here that takes some position:absolute elems and scrolls them along the x-axis only. It works but is super slow. Any way to speed up the performance?
(function() {
var $menu = $('.gallery-nav ul'),
$headA = $("header .home"),
leftOffset1 = parseInt($menu.css('left')),
leftOffset2 = parseInt($headA.css('left'));
$(window).scroll(function(){
$menu.css({
'left': $(this).scrollLeft() + leftOffset1
});
$headA.css({
'left': $(this).scrollLeft() + leftOffset2
});
});
})();
UPDATE: http://jsfiddle.net/davidpm/LeTEX/2/
I don't get your approach here since there is a perfect and very very speedy way only using CSS for that task.
You can simply set your element's position to fixed which means that they'll STAY AT THE POSITION regardless of document width/height or scrolling.
myElement{ position: fixed; left: 0; }
See DA new FIDDLE
I'm trying to get a large logo (in the header of my site) to fall down into the header area on load. And so this is the only jquery function that I can find that seems to fit the idea.
http://jsfiddle.net/apHLu/279/
var $dropDiv = $('#dropDiv');
$('#holder a').on('click', function() {
// get position of the element we clicked on
var offset = $(this).offset();
// get width/height of click element
var h = $(this).outerHeight();
var w = $(this).outerWidth();
// get width/height of drop element
var dh = $dropDiv.outerHeight();
var dw = $dropDiv.outerWidth();
// determine middle position
var initLeft = offset.left + ((w/2) - (dw/2));
// animate drop
$dropDiv.css({
left: initLeft,
top: $(window).scrollTop() - dh,
opacity: 0,
display: 'block'
}).animate({
left: initLeft,
top: offset.top - dh,
opacity: 1
}, 300, 'easeOutBounce');
});
I basically want to know, is it possible to switch the click trigger to an onload call? I don't want to be muddling around trying to get it to work if it's not possible.
Thank you.
Here is an updated Fiddle. $(function() { ... }); is short for 'Document is ready'. I also wrapped the function in setTimeout();, because it was firing a little quick to see the full effect. Change the second parameter in setTimeout to adjust the time it waits to fire...
Updated (per #coby suggestion): If you do have a large amount of images you could change $(function() { to window.onload(function() {. Ready doesn't wait for all the images to be completely loaded.
I have picture of an arrow in a div. This div is fixed in the bottom right corner of very wide page.
How can I use jQuery to scroll the window right 600px each time the div is clicked? (And is it possible to detect when the page can no longer scroll right, and hide the arrow?)
Cheers.
Try something like this:
var distance = 600;
$("div").click(function() {
$("html:not(:animated), body:not(:animated)").animate(
{scrollLeft: "+="+distance}, 400
);
});
jsfiddle here: http://jsfiddle.net/juXLu/2/
[edit]
And here's detecting if you're at the end of the document http://jsfiddle.net/lukemartin/juXLu/5/
var distance = 600,
docWidth = $(document).width(),
scrollPos;
// click handler
$("div").click(function() {
// animate
$("html:not(:animated), body:not(:animated)").animate(
// amount to scroll
{scrollLeft: "+=" + distance},
// scroll speed (ms)
400,
// callback function
function(){
// check our scroll position
scrollPos = $(window).width() + $(window).scrollLeft();
// if it equals the doc width, we're at the end
if(docWidth === scrollPos) {
$("div").text("End of the line");
}
}
);
});
Use the jquery method scrollLeft
$(document).ready(function(){
$(window).scrollLeft((Number($(window).scrollLeft())+600)+'px');
});
Something like that :)
You could user the Scrollto plugin,
http://plugins.jquery.com/project/ScrollTo
It is really easy to use, just use the documentation. Then you could create a placeholder to determine whether or not its to the end of the page. Just stick the placeholder at the very end, and calculate the distance.