I really can't do a little thing. I want that div1 change it's position ON CLICK of div2 (note that div2 is inside of div1) and when clicking again div2, put div 1 to his original position. (If you could help me moving the div1 with a little animation it would be perfect).
I added my exemple to jsfiddle, where I want to change the "switcher"'s position on first click on "switcher-header", and when click second time "switcher-header" take "switcher" back to it's original position.
http://jsfiddle.net/mdx7dpeL/3/
You could have a variable to toggle the marginLeft, so one click you animate left, and the other click you animate right:
var switched = false;
$(document).ready(function() {
$('.switcher-header').click(function() {
var marginLeft = switched ? '-30px' : '30px';
switched = !switched;
$('#switcher').animate({
'marginLeft' : "+=" + marginLeft //moves right
});
});
});
and of course you need to include jQuery.
Fiddle
Related
linkThis should be simple as I have it 95% done and working. The issue I am having is the popover will pop right next to where you click on the element vs. just next to it. So if I click on the "L" in the example below - the popover covers the "nk 1". I want it to be right next to the 1 and also respect the height location of it too. As clicking on the top, middle, or bottom of the element changes the positioning also.
Here is a Fiddle to show it in action - https://jsfiddle.net/pfcsc93t/2/
<div class="popover-link"><a link that toggles div display>Link 1</a></div>
<div class="popover-link"><a link that toggles div display>Link 2</a></div>
<div class="popover-link"><a link that toggles div display>Link 3</a></div>
etc...
Popover that has dynamic content feed based on clicked link - only one exist at a time:
<div id="popover">popover content</div>
Current jQuery:
$( ".popover-link").click( function(event) {
$("#popover").removeClass('hide').css( {position:"absolute", top:event.pageY, left: event.pageX});
});
Instead of using the mouse x and y position, you'll want to get the offset of the clicked element:
$( ".popover-link a").click( function(event) {
var pos = $(this).offset();
$("#popover").removeClass('hide').offset({ top:pos.top, left:pos.left + $(this).width()});
});
Note that the click is attached to the anchor element ( selector .popover-link a), otherwise this would point to the div and use its width instead of the anchor/text width.
Fiddle
I have a jQuery simple slider it has 15 picture each five show in a slide. I have a previous button and next button.
Each next click generate a left movement by 855px with a slider animation.
Each previous click generate a right movement by 855px with a slider animation.
This is my jQuery code :
$(document).ready(function(){
$(".prev_button").click(function(){
$("ul.slider").animate({
left: "+=855"
}, 3000, function(){
$("ul.slider").css('left', '0');
li_no = 0;
$("ul.slider").find("li").each(function(){
li_no = li_no + 1;
});
slide_after_this = li_no - 6;
$('ul.slider li:gt('+slide_after_this+')').prependTo('ul.slider'); // << line changed
});
});
$(".next_button").click(function(){
//alert($("ul.slider").css("right"));
$("ul.slider").animate({
right: "+=855"
}, 3000, function(){
//alert($("ul.slider").css("right"));
$("ul.slider").css('right', '0');
$('ul.slider li:not(:nth-child(n+6))').appendTo('ul.slider');
});
});
});
Now I have two problems :
First one is with the previous button (left arrow) When I click it the animation shows and the elements changed but they do not wrapped with each other (I mean does not show the last elements immidiatly before the first element). I can not find the reason of this.
Second problem is with both right and left arrows it is like following :
If I click just the right arrow the slider working fine it animates and change the elements but If I click the both button in order (I mean right then left or left then right ) the elements change but the animation does not show. but I check if the routine go inside the animate function by some alerts and it is going inside but does not animate on the screen .
This is a link that may help you:
http://jsfiddle.net/mpx83tpv/18/
you are really close try overflow:hidden for .slider_container
div.slider_container
{
height:380px;
width:855px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
edit js:
also use below code as you are using both right and left in the end the slider has both of them one of them is always zero.
$(document).ready(function(){
$(".prev_button").click(function(){
$("ul.slider").animate({
left: "+=855"
}, 3000);
});
$(".next_button").click(function(){
//alert($("ul.slider").css("right"));
$("ul.slider").animate({
left: "-=855"
}, 3000);
});
});
if you want a infinite scrolling you need to use right and left in this case replace your $("ul.slider").css('right', '0'); line to $("ul.slider").css('right', ''); do same for left as well, as you need the remove them.
for adding the next visible div implement you logic before the animation as you callbacks do it after the animation.
the tricky part would be the prev button for this after calculation of the div count you also need the set new left without animation and then call left move animation.
hope these make sense.
I've been trying to adapt the following code to integrate with my CSS3 slider (animated and timed with keyframes) however as you can't use .animate in js when using css3 animations on the same element I either have to use one or the other.
JS I've adapted for my slider
The current js works in the sense that it navigates through the slides my only issue is that it doesn't 'slide' to each slide it jumps.
I'd really like to keep the slideshow as it is and just want to update my js so that the slide transition works. I'm not great with js so I've been finding it difficult to find a solution.
If anyone could give some advice or a solution to my problem it would be truly appreciated.
DEMO
JS
//grab the width and calculate left value
var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);
//if user clicked on prev button
$('#previous').click(function () {
//get the right position
var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;
//slide the item
$("#carousel .video-list").animate({'left' : left_indent}, function () {
//move the last item and put it as first item
$("#carousel .video-list li:first").before($("#carousel .video-list li:last"));
//set the default item to correct position
$("#carousel .video-list").css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if user clicked on next button
$('#next').click(function () {
//get the right position
var left_indent = parseInt($("#carousel .video-list").css('left')) - item_width;
//slide the item
$("#carousel .video-list").animate({'left' : left_indent}, function () {
//move the first item and put it as last item
$("#carousel .video-list li:last").after($("#carousel .video-list li:first"));
//set the default item to correct position
$("#carousel .video-list").css({'left' : left_value});
});
//cancel the link behavior
return false;
});
I don't see why .animate is needed, because I have used
transition: left 1s ease;
in my CSS to achieve the same things, with a smoother animation than I got with jQuery. I tried deleting the:
//slide the item
$("#carousel .video-list").animate(...
for the left and right. I also added some text to the html divs so that you can see how it's moving better. Sorry that I couldn't get it working, but I really feel that "transition" is what you need to look into. Here's the fiddle :)
...
I think your simplest solution would be to ditch the whole CSS animate, and build your own carousel:
Consider a film strip, which is a bunch of pictures lined up next to each other. Now consider a paper with a box cut-out, the size of one picture. We put the strip behind the paper, and see only one image. If we move the strip, we can change which image we see.
The film strip will be a div with { display: inline-block; } property, containing each of the videos. The box cut-out will be a div with { overflow: hidden } property. To move the strip, we simply use $('#strip').css({'left': positionofstripleft - widthofbox }) in our javascript. And for the animation, a simple setInterval(Nextfunction, 65000) to do what clicking next would do every 65 seconds.
Finally, a CSS transition will make the movements actually animated.
The code is pretty short, here it is:
http://jsfiddle.net/L4Ry3/170/
$(document).ready(function(){
$('#previous_frame').on("click",function(){
var $last = $('.frames li:last-child')
$('.frames').prepend($last)
$last.css({left:'-33%'})
$last.animate({left:'0%'})
});
$('#next_frame').on("click",function(){
var $first = $('.frames li:first-child');
$('.frames').append($first);
$('.frames li:first-child').css({right:'-33%'});
$('li:first-child').animate({right:'0%'})
});
})
If I click the left button, it slowly moves the image. When I click the right side, the image instantaneously switches into position. I can't understand why this would happen.
It is because of the left rule you add. It stays 0. You can notice it works at first, then stops working for images you clicked left on, but keeps working for the rest.
In the next_frame function add
$('.frames li:first-child').css({left:''});
to remove that left.
You can see it working in this fiddle.
Test it out by clicking left all through, then clicking right again.
In Depth
Apparently the left style rule is more dominant than the right. When you have both it regards only the left, so though the right is animating, it stays on 0% left. Removing the left rule allows the css engine to regard the right and show the desired animation.
change the right to left in your next frame click event and - to +..that should do the trick
try this
$(document).ready(function(){
$('#previous_frame').on("click",function(){
var $last = $('.frames li:last-child')
$('.frames').prepend($last)
$last.css({left:'-33%'})
$last.animate({left:'0%'})
});
$('#next_frame').on("click",function(){
var $first = $('.frames li:first-child');
$('.frames').append($first);
$('.frames li:first-child').css({left:'33%'}); //<----here
$('li:first-child').animate({left:'0%'})//<----here
});
})
working fiddle
I have been trying to create a menu panel with jQuery that can be seen here by clicking the Preview button on top:
$(function(){
// hide all panels first
$('div[id*="panel"]').hide();
// make the panels absolute positioned
$('div[id*="panel"]').css('position', 'absolute');
// show the panel based on rel attribute of the current hovered link
$('#menu a').hover(function(){
var link_rel = $(this).attr('rel');
//get the position of the hovered element
var pos = $(this).offset();
// set z-index of previous panels low
$('div[id*="panel"]').css('z-index', '0');
// get the panel near by hovered element now
$('div#' + link_rel).css({
'left': pos.left + 'px',
'top': pos.top + 'px',
'zIndex': '5000'
});
// finaly show the relevant hidden panel
$('div#' + link_rel).fadeIn('slow');
// hide it back when mouse arrow moves away
$('div#' + link_rel).hover(function(){}, function(){
$(this).fadeOut('slow');
});
}, function(){});
});
http://jsbin.com/amexi/edit
If you hover over Link Two or Link Three, the black panel comes perfectly replacing the respective blue link, however if you hover the Link One, the black panel comes little below that link. What's wrong here? How can I fix this?
You need to account for the margin automatically applied to <ul> elements.
If you look at your page with Firebug, you'll notice Firefox applies a top and bottom margin of 16px.
As stated above, you can apply a margin-top value of -16px to the .left class to get your intended behaviour.
http://jsbin.com/amexi/3/edit
Check out http://jsbin.com/amexi/5/edit
I just can't figure out why the TOP is identical on all the popups BUT the actual position of them all is different. Makes no sense. Its almost like a negative margin.
The main problem I found is that you didnt move the popup into the position of the link + offset it to the .top + .height.