How to slide multiple divs in the right direction? - javascript

tab-right is the class for the button to be clicked for shifting the
content from left to right.dedicated,vps,colocation,rackspace are the
ids of the divs.My problem is when I click the tab-right button first
the 'dedicated' div is sliding in the right direction which is fine
but the div "vps is sliding in the left direction.But I want it to
slide in the right direction So, help me..........thnx:)
$count=0;
$(".tab-right").click(function() {
$count1=0;
if($count==4)
{
$count=0;
}
$count++;
if($count==1)
{
$('#dedicated').toggle('slide', { direction: 'right' }, 700,function(){$('#vps').toggle('slide', { direction: 'right' }, 700);});
}
if($count==2)
{
$('#vps').toggle('slide', { direction: 'right' }, 700,function(){$('#colocation').toggle('slide', { direction: 'right' }, 700);});
}
if($count==3)
{
$('#colocation').toggle('slide', { direction: 'right' }, 700,function(){$('#rackspace').toggle('slide', { direction: 'right' }, 700);});
}
if($count==4)
{
$('#rackspace').toggle('slide', { direction: 'right' }, 700,function(){$('#dedicated').toggle('slide', { direction: 'right' }, 700);});
}
});

Related

Remove / add class when based on toggle

I have a column that slides to the left on a click function. I then add the class of w to the container to change its width once the column slides out. What I am trying to do is add the class of e when it slides back in and then remove the class of w by wrapping it in the toggle functions, but the container still contains the class of w and won't add the class of e. Thoughts?
FIDDLE:
http://jsfiddle.net/QDUQk/1926/
.container {
border: 1px solid #000;
width: 200px;
}
.container.e {
width: 80%;
}
.container.w {
width: 100%;
}
<div class="togl">Menu</div>
<div class="col">
SLIDE ME SLIDE ME PLX PLX
</div>
<div class="container">
</div>
$('.togl').click(function() {
if ($('.container').is(':visible')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}
});
The visibility of .container does not change from true. Check for "w" className at .is()
$('.togl').click(function() {
if (!$('.container').is('.w')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}
});
jsfiddle http://jsfiddle.net/QDUQk/1927/
Your container visibility does not change on click. Try following,
$('.togl').click(function() {
if ($('.container').hasClass('e')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}});

revolution slider, bullets strange behaviour

I have a revolution slider carousel with a bullets navigation, that's the js configuration:
var revapi2;
tpj(document).ready(function() {
if(tpj("#rev_slider_2_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_2_1");
}else{
revapi2 = tpj("#rev_slider_2_1").show().revolution({
sliderType:"carousel",
jsFileLocation:"libs/revolutionSlider/js/",
dottedOverlay:"none",
sliderLayout: "auto",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
arrows: {
style:"",
enable:true,
hide_onmobile:false,
hide_under:300,
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
tmp:'',
left: {
h_align:"left",
v_align:"center",
h_offset:30,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:30,
v_offset:0
}
},
touch:{
touchenabled:"off",
swipe_treshold : 75,
swipe_min_touches : 1,
drag_block_vertical:true,
swipe_direction:"horizontal"
}
,
bullets: {
enable: true,
container:"slider",
hide_onmobile: false,
style: "ares",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "bottom",
h_offset: 20,
v_offset: 20,
space: 0,
rtl:false,
tmp: ''
}
},
carousel: {
horizontal_align: "center",
vertical_align: "center",
fadeout: "off",
maxVisibleItems: 3,
infinity: "on",
space: 0,
stretch: "off"
},
viewPort: {
enable:true,
outof:"pause",
visible_area:"80%"
},
responsiveLevels:[1240,1024,778,320],
gridwidth:[1240,1024,778,320],
gridheight:[600,600,500,300],
lazyType:"none",
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
shadow:0,
spinner:"off",
stopLoop:"on",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"on",
hideThumbsOnMobile:"on",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
});
The bullets appears over my carousel but what i can see is a strange behaviour. During navigation beetween slides, the .selected class is applied correctly to the right index only at the beginning of the sliding process. At the end , when the slide is stopped and loaded, the .selected class is automatic cleared from the correct index and applied to the index 0. I'll try to be more clear in my explaination:
slider with 4 element -> i click on the 3° bullet (the index 2)-> my image begin to slide in the view e my 3° bullet is red (red is the color that i have assigned to the .selected class)-> when the image slide animation is complete my 3° bullet return gray and my 1° bullet became red.
I have tried to intercept the event that cause this automatic change, but i have tried to log every events i have found in docs, and nothing is launched at the same time of my strange behaviour. It's a bug? How i can solve it?

Affecting only one element with jQuery toggle

So I have got this code
$('.item').click(function () {
if ($(".secondary", this).is(":hidden")) {
$(".primary", this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
Current behavior is that when I click .item, .primary slides to the right, but .secondary doesn't slide in at all.
Fiddle: http://jsfiddle.net/zm3zp6ax/
$('.item').click(function () {
var $this = $(this);
if ($(".secondary", this).is(":hidden")) {
$(".primary", $this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', $this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
DEMO

CarouFredSel sliding issue

I have set up a caroufredsel, and have items inside of it. But when I click on my next and previous buttons, the first time it appears to shift 1 item, every click after that it shifts the entire width of the content and back to the beginning.
I have set my scroll items to 3. Does it have something to do with the width of the container?
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : 'auto',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});
It also seems that on slide, the height of the carousel changes for some reason. maybe this is related
I would also refactor your selector to be simpler as you are using IDs and there should only be one per page anyway:
Instead of:
jQuery('#tab-1').find('#carousel').carouFredSel();
Use this:
jQuery('#carousel').carouFredSel();
Switching the caroufredsel width to 100% did the trick.
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : '100%',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});

JQuery: Swipe between pages

Trying to mock the "swipe between page" feature of iPads using jQuery UI.
I have these two full-screen divs:
<div id="introLayer" class="layer"></div>
<div id="gameLayer" class="layer" style="display:none;"></div>
At some point, the introLayer must hide sliding to the left, being replaced by the gameLayer, following its slide motion.
I tried the following:
$('#introLayer').hide(
'slide',
{ direction: "left" },
1000);
$('#gameLayer').show(
'slide',
{ direction: "left" },
1000);
It results in the introLayer sliding out nicely, but the gameLayer only appears afterwards and without any effect.
Hide the gameLayer first by calling $('#gameLayer').hide() instead of putting it in inline style: style="display:none;"
$('#gameLayer').hide();
$('#introLayer').hide(
'slide',
{ direction: "left" },
1000);
$('#gameLayer').show(
'slide',
{ direction: "left" },
1000);
$('#gameLayer').hide();
$('#introLayer').hide(
'slide',
{ direction: "left" },
1000 , function(){ $('#gameLayer').show(
'slide',
{ direction: "left" },
1000);});
try like this or try below
$('#gameLayer').hide();
$('#introLayer').hide(
'slide',
{ direction: "left" },
1000);
$('#gameLayer').show(
'slide',
{ direction: "right" },
1000);

Categories