Im trying to build sort of slide where when click on link ".animate" will change it position ( every time 100px more)
This:
$(function(){
$('#m-main').click(function(){
$('slide').animate({top : "100px"}, {duration:500})
})
});
will work only once.
How can I make this working?
Many thanks for your help.
$(function() {
$('#m-main').click(function(){
$(this).data($(this).data('pos') + 100);
$('slide').animate({top : $(this).data('pos') + 'px'}, {duration:500})
})
});
When it runs it sets the top padding to 100px, so after the first time it's just setting it to the same value it already has. You need to increment the value each time.
$(function(){
$('#m-main').click(function(){
var current = $('slide').css('top');
current = current + 100;
$('slide').animate({top : current+"px"}, {duration:500})
})
});
code above untested
Try using a counter instead of just top : "100px". It is just doing it once because essentially your setting top to 100px and then setting top to 100px again which is just keeping it where it is. You want it to move to 200px and then to 300px, etc.
Try this:
var fromTop = 100;
$(function() {
fromTop = fromTop + 100;
$('#m-main').click(function() {
$('slide').animate({top : '"' + fromTop + 'px"'}, {duration:500})
})
});
It looks like you've got some error in the query string in the click handler. $('slide') will select all <slide> elements, which I assume you have none, perhaps $('.slide') or $('#slide') is what you're after?
If you just keep a reference of the position you'd like the element to move to and increase that by 100 each time (see chaos's answer) then you should be right.
$(function(){
var pos=100;
$('#m-main').click(function(){
$('slide').animate({top : pos+'px'}, {duration:500});
pos=pos+100;
});
});
Try this:
$('#m-main').click(function(){
var slide = $('.slide', this),
posY = parseInt(slide.css("background-position").split(" ")[1]);
slide.stop().animate({backgroundPosition: "0 "+(Math.ceil(posY/100)*100 + 100)+"px"}, {duration:500});
});
Related
How do you get this result in css, javascript or jquery, or a combination of all:
I asked and posted a similar question before, but no one answered it.
Someone said:
"Maybe you can use javascript (or bether JQuery) for this.
If you use JQuery, you can use the scroll event. If you are scrolling, do a
check if it hits the other div. https://api.jquery.com/scroll/
Checking the positions of the divs is possible with offset/position.
http://api.jquery.com/offset/ https://api.jquery.com/position/
If you want to change the background, you give the div a background color
that is pink. If it hits then you can add an additional background-image
that has a specific background-position
(http://www.w3schools.com/cssref/pr_background-position.asp xpos ypos).
I don't have tried it yet, but I guess it is possible that way."
So my question is, how would you go about doing it to get this result or regardless of what way?
I came up with this after a couple of hours trying to make it work. It was pretty fun doing it, so I'm sharing it.
$(document).ready(function() {
var initScrollTop = $(window).scrollTop();
$('.div1').css('top', (initScrollTop+100)+"px");
$(window).scroll(function () {
var top = parseInt($('.div1').css('top').split("px")[0]);
// I GIVE A FIXED TOP TO .DIV1
var scrollTop = $(this).scrollTop() + 100;
$('.div1').css('top', scrollTop+"px");
// GETTING SOME VALUES
// DIV1
var div2Top = parseInt($('.div2').css('top').split('px')[0]);
var div2Height = parseInt($('.div2').css('height').split('px')[0]);
var div2Bottom = parseInt($('.div2').css('bottom').split('px')[0]);
// DIV2
var div1Width = parseInt($('.div1').css('width').split('px')[0]);
var div1Height = parseInt($('.div1').css('height').split('px')[0]);
var div1Top = parseInt($('.div1').css('top').split('px')[0]);
var div1Bottom = parseInt($('.div1').css('bottom').split('px')[0]);
var div1Left = parseInt($('.div1').css('left').split('px')[0]);
// WE ARE GOING THROUGH THE GREEN BOX
if(scrollTop + div1Height > div2Top) {
// OUTSIDE OF THE GREEN BOX (.div2)
if(scrollTop + div1Height > div2Height + div2Top) {
var div3Height = div2Top + div2Height - scrollTop;
$('.div3').css('top', scrollTop+ "px")
// .css('bottom', div2Bottom + "px")
.css('width', div1Width + "px")
.css('height', div3Height + "px")
.css('visibility','visible');
console.log("I'm out");
}
// INSIDE OF THE GREEN BOX (.div2)
else {
var div3Height = (div1Top > div2Top) ? div1Height : scrollTop + div1Height - div2Top;
var div3Top = (div1Top > div2Top) ? div1Top : div2Top;
$('.div3').css({
'top' : div3Top + "px",
'left': div1Left + "px",
'width': div1Width + "px",
'height': div3Height + "px",
'visibility':'visible'
});
}
} else {
$('.div3').css('visibility','hidden');
}
// WE ARE ABSOLUTELY OUT OF THE GREEN BOX (FROM THE BOTTOM GOING DOWN)
if(scrollTop > div2Top + div2Height) {
$('.div3').css('visibility','hidden');
}
});
});
Here's there a fiddle so you can test it http://jsfiddle.net/5076h670/2/
So basically what it does is create three divs, two of them will be visible and 'collide' between each other, the other one starts hidden and it shows only when the position of the div1 is in the range of the div2. This div3 (the third div) will be shown over the div1 (see the z-index). When it's absolutely out of the box div3 will be hidden.
I don't know what else to explain about the code, I don't know if (and I don't think, it took me a while to make it work) it's understandable what it does. If you have something to ask I'll be reading ;)
Hope it helps
I have 7 buttons. They are distributed on top of a background image and interacting with it. They are placed absolutely. I have created a jQuery function to animate one of the buttons height. The button expands upwards. Check it out here: http://hdpano.no/bf/newindex.html and click the top left button named Deck 8.
I wish this function to handle all the buttons, but there are some variables. The baseline of each button varies, and i need to subtract from it as i expand the height. I also wish to close any other open button if one clicks another.
Here is the jQuery code:
jQuery(document).ready(function() {
$('#link8').toggle(
function()
{
$('#deck8').animate({height: "25px",top:"202"}, 500);
},
function()
{
$('#deck8').animate({height: "150",top:"76"}, 500);
});
});
The function is quite basic and I have stripped it of all my attempts to make it work with the other buttons.
This does what you're looking for. Replace the code in your page with this...
<script type="text/javascript">
jQuery(document).ready(function() {
$('.link').click(function() {
var $me = $(this);
if ($me.height() == 150) {
$me.animate({height: "25px",top:"+=126"}, 500);
} else {
$(".link").each(function() {
if ($(this) != $me) {
if ($(this).height() == 150) {
$(this).animate({height: "25px",top:"+=126"}, 500);
}
}
});
$me.animate({height: "150px",top:"-=126"}, 500);
}
});
});
</script>
You can toggle the position with += and -= so it uses relative positioning, rather than absolute positioning, so that code affects all the divs on the page with class "link".
this in the toggle functions would be the element that is clicked.
Here is what I would do:
remove the <br/> tags. Use margin/padding to achieve spacing.
basically you want to expand/collapse the element ".link" (the container) for the height of the contained <ul>.
use "+=" or "-=" with the animate function to automatically add/remove the specified value.
as your buttons start collapsed, you should invert the two functions in the toggle
Here a code that is more general:
jQuery(document).ready(function() {
// on click of any link with class ".linkContent"
$('.linkContent').toggle(
function() {
// get the parent ".link" container
var $parent = $(this).parent(),
// get the full height of the <ul> to show/hide + the height of the link
h = $parent.find('ul').outerHeight() + $(this).outerHeight();
// animate using += and -= to avoid setting explicit values
$parent.animate({ height: '+=' + h, top: '-=' + h }, 500);
},
function() {
var $parent = $(this).parent(),
h = $parent.find('ul').outerHeight() + $(this).outerHeight();
$parent.animate({ height: '-=' + h, top: '+=' + h }, 500);
});
});
The following demo shows the code in action. You might have to tweak it a bit to get the exact height to add/remove but you get the idea:
DEMO
What you want to do is add a class eg .deck to each button, then toggle .deck'. Inside the toggle function use$(this)` to refer to the current button.
I have this:
<script type="text/javascript">
window.onresize = fontResize;
function fontResize() {
document.body.style.fontSize = parseInt(document.documentElement.clientWidth/100) + 'px';
}
</script>
Could someone have a crack at converting this to jQuery please, i have DIV's with class "features" and i need the P text to fill them when they are resized, so i need to font-size to grow/shrink along with the DIV. That make sense?
Thanks
Is this what you are looking for?
window.onresize = fontResize;
function fontResize() {
$('body').css('font-size',parseInt($('body').css('width'))/100) + 'px');
}
Here... jQuerified
$(document).ready(function(){
$(window).bind('resize initialSize',function(){
$('body').css('font-size', ($(window).width()/8) + 'px');
}).trigger('initialSize');
});
This one takes in account the initial size
function fontResize(){
$('body').css('font-size', ($(window).width()/8) + 'px');
}
fontResize();
$(window).resize( fontResize );
http://jsfiddle.net/Hpgfp/1
How can I get position of an element based on view? So as viewer scroll I get different values.
jQuery is prefered.
Do you mean relative to the viewable window?
If so, you can use something like this:
$("#element").offset().top - $(window).scrollTop()
That will return a positive number until it is scrolled off the window, at which point it will return a negative number.
$(function() {
$(window).scroll(function() {
var pos = $('#button_id').offset(),
top = pos.top - $(window).scrollTop(),
lft = pos.left - $(window).scrollLeft();
$("#where").html("Top: " + top + "\nLeft: " + lft);
});
});
Try it out with this jsFiddle
HTML something like the following:
<div id="button_id">Button ID</div>
<div id="where"></div>
Maybe something like this?
(jQuery)
var pos = $('#button_id').position();
alert("POSITION: \nLeft: "+pos.left + "\nTop: " + pos.top);
Source:
http://blog.ekini.net/2009/01/30/jquery-find-position-the-exact-position-of-an-element-in-the-browser-window/
Good luck, if you edit your question maybe I´ll be able to helo you better
Okay. So I've got a a little jQuery gallery scroller I wrote to work with WordPress. It works beautifully in Firefox, but it doesn't work in Chrome or Safari.
Here's the link:
http://thehousinggroup.info/our-gallery/bathroom-renovations/gallery-1/
Here's the jQuery:
var imageQuantity = $('.galleryBox img').size() //finds the number of images
var wrapWidth = imageQuantity * 610 + 'px' //sets inner wrapper to image width*no. of images
//Formating
$('.galleryBox img')
.hide()
.unwrap()
.wrapAll('<ul></ul>')
.wrapAll('<div id="innerWrap"></div>')
.wrap('<li></li>');//wraps images in ul and div, strips off the <p> that WordPress adds
$('#innerWrap').css({
'width' : wrapWidth,
'position' : 'relative'
});
$('.galleryBox').css({'overflow' : 'hidden'}); //this css will be relegated to the stylesheet eventually...
$('.galleryBox ul').css({'list-style' : 'none'});
$('.galleryBox li').css({
'float' : 'left',
'margin-right' : '10px'
});
$('.galleryBox img').show(); //shows the images once the formatting is complete
//Scroll Controls
var currentNumber = 1; //this is for the "1 of 4" counter
var fullNumber = imageQuantity;
$('#innerWrap').before('<p id="scroller"><a id="prevButton" href="">previous</a> <span id="currentNumber">' + currentNumber + '</span> of ' + fullNumber +' <a id="nextButton" href="#">next</a></p>'); //this places the next, previous, and 1 of # counter buttons
$('#nextButton').click(function(event){
event.preventDefault();
var wrapPosition = parseInt($('#innerWrap').css('right'));
var stopPoint = (fullNumber-1)*610;
if(wrapPosition < stopPoint) { //sets the scrolling to stop at last image
$('#innerWrap').animate({'right' : "+=610px"});
++currentNumber;
$('#currentNumber').empty().html(currentNumber); //sets the counter to the proper number
}
});
$('#prevButton').click(function(event){ //same as above, reversed out for the previous button
event.preventDefault();
var wrapPosition = parseInt($('#innerWrap').css('right'));
var stopPoint = (fullNumber-1)*610;
if(wrapPosition > 0) {
$('#innerWrap').animate({'right' : "-=610px"});
--currentNumber;
$('#currentNumber').empty().html(currentNumber);
}
});
I'm going to be setting the css to be in the stylesheets, but this is how it's set up for now. If you've got any further critiques, I'm open!
Thanks.
This line catches my attention:
$('#innerWrap').animate({'right' : "-=610px"});
Specially because there is no "right" property initially set up on WebKit.
Try to have the calculation done one step above:
right_pos = doTheMathHere;
$('#innerWrap').animate({'right' : rigt_pos});
This code is breaking in Chrome : var wrapPosition = parseInt($('#innerWrap').css('right'));
So it's skipping over this block:
if(wrapPosition < stopPoint) {
$('#innerWrap').animate({'right' : "+=610px"});
++currentNumber;
$('#currentNumber').empty().html(currentNumber);
}
Sorry to answer my own question
I think I figured it out. It has to do with the wrapAll() order. I intended for the <ul> to be wrapped inside the <div>, but the opposite is happening. This isn't a problem with Webkit. It's more one of those..."wait...why does this work in Firefox" sorts of issues.