So I have this 100% witdh container with lots of images in it. I would like to pan it horizontally when I mouseover the parent container.
I've come quite far but I have a few problems.
Here is the fiddle
First I have to set the margin left to be percentage based, else it wont show all the images. To do this, I have to get the full width of the inner container, but I'm unable to do this.
$('.merken').mousemove(function (event) {
var left = event.pageX;
$('.slider').css({
'margin-left': '-' + left + 'px'
});
});
The thumb-container now has a fixed width, but i need to make this an auto width. Right now this makes sure that the images in the container dont show one-by-one. How do I fix this?
.thumb-container { width:2000px;}
Thanks
You can do something like this:
Fiddle
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/$('.thumb-container').width();
$('.slider').css({
'margin-left': '-'+left+'%'
});
});
and
.thumb-container{
width:200%;
}
I'm not sure about what you want to do. But I think that you should use the .width() jquery method:
$('.merken').mousemove(function(event){
var left = event.pageX;
var percentleft = left/$('.merken').width();
var sliderleft = $('.slider').width()*percentleft;
$('.slider').css({
'margin-left': '-'+sliderleft+'px'
});
});
For those intrested, fixed it like this:
var conb = $('.slider').width();
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/conb;
$('.slider').css({
'margin-left': '-'+left+'%'
});
});
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
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);
Hello I am having some difficulties animating right and bottom. I got the animate left code, but I am not able to animate right using javascript. Here is the code:
var right = $('#coolDiv').offset().right;
$("#coolDiv").css({right:right}).animate({"right":"0px"}, "slow");
Here is a link to jsfiddle:
http://jsfiddle.net/XqqtN/
http://jsfiddle.net/XqqtN/4006/
How can I animate right = 0 and bottom = 0?
The problem is that offset method return an object only with left and top properties.
So $('#coolDiv').offset().right is undefined.
Get the width of #cooldiv and it's parent, subtract the width of #cooldiv from its' parent width can do work for you. Something like this.
var parentTag = $('#coolDiv').parent().outerWidth();
var coolDiv = $('#coolDiv').outerWidth();
var res = (parentTag - coolDiv) + "px" ;
$("#coolDiv").animate({"left":res}, "slow");
Demo
Try This My Working code right to left div using click event
$(function(){
var c=0;
$("#coolDiv").click(function()
{
$(this).stop().animate({left: ++c%2*100 }, 'fast');
});
});
I know this question has been asked before, but I'm pretty sure after checking them out, that none of the navigation bars where built like this one.
I'm basically having trouble making the navigation bar "seamlessly" switch to a fixed position at the top of the screen after scrolling past its original position, then back again.
I have included the code, and an example here: http://jsfiddle.net/r2a6U/
Here is the actual function which makes the div switch to fixed position mode:
var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
var fixIT = $(this).scrollTop() >= navPos;
var setPos = fixIT ? 'fixed' : 'relative' ;
var setTop = fixIT ? '0' : '600' ;
$('#navContainer').css({position: setPos});
$('#navContainer').css({'top': setTop});
});
Any help would be much appreciated.
Cheers
You can fix your issue to remove the styles instead of setting them to relative and 600px. I suggest you add/remove a class in JavaScript which will then apply the fixed CSS though. You will end up with much nicer and cleaner JavaScript.
Also make sure you center #navContainer properly when it's fixed.
jsFiddle
CSS
#navContainer.fixIT {
position:fixed;
top:0;
/* these will ensure it is centered so it doesn't jump to the side*/
left:0;
right:0;
text-align:center;
}
JS
var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
var fixIT = $(this).scrollTop() >= navPos;
if (fixIT)
$('#navContainer').addClass('fixIT');
else
$('#navContainer').removeClass('fixIT');
});
Fix it in here: jsFiddle
Only a small script update:
var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
var navContainer = $('#navContainer');
if( $(this).scrollTop() >= navPos ) {
// make it fixed to the top
$('#navContainer').css({ 'position': 'fixed', 'top': 0 });
} else {
// restore to orignal position
$('#navContainer').css({ 'position': 'relative', 'top': 600 });
}
});