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')
});
}});
Related
I know nothing of jquery/js but i applied a News Slider/Ticker script that I found online to my website home page. The script itself works fine. The html and css parts were easy enough but I can't find the proper way to make it PAUSE ON HOVER. The .js file that came with it is lengthy and has much that I suspect isn't even being used, but as I said, I don't know js. Sorry for the long js file but I don't know what parts are even involved. Can somebody help this complete novice?
(function ($) {
$.simpleTicker = function (elem, options) {
var defaults = {
speed: 1000,
delay: 4000,
easing: 'swing',
effectType: 'slide'
};
var param = {
'ul': '',
'li': '',
'initList': '',
'ulWidth': '',
'liHeight': '',
'tickerHook': 'tickerHook',
'effect': {}
};
var plugin = this;
plugin.settings = {};
var $element = $(elem),
element = elem;
plugin.init = function () {
plugin.settings = $.extend({}, defaults, options);
param.ul = element.children('ul');
param.li = element.find('li');
param.initList = element.find('li:first');
param.ulWidth = param.ul.width();
param.liHeight = param.li.height();
element.css({
height: (param.liHeight)
});
param.li.css({
top: '0',
left: '0',
position: 'absolute'
});
//dispatch
switch (plugin.settings.effectType) {
case 'fade':
plugin.effect.fade();
break;
case 'roll':
plugin.effect.roll();
break;
case 'slide':
plugin.effect.slide();
break;
}
plugin.effect.exec();
};
plugin.effect = {};
plugin.effect.exec = function () {
param.initList.css(param.effect.init.css)
.animate(param.effect.init.animate, plugin.settings.speed, plugin.settings.easing)
.addClass(param.tickerHook);
if (element.find(param.li).length > 1) {
setInterval(function () {
element.find('.' + param.tickerHook)
.animate(param.effect.start.animate, plugin.settings.speed, plugin.settings.easing)
.next()
.css(param.effect.next.css)
.animate(param.effect.next.animate, plugin.settings.speed, plugin.settings.easing)
.addClass(param.tickerHook)
.end()
.appendTo(param.ul)
.css(param.effect.end.css)
.removeClass(param.tickerHook);
}, plugin.settings.delay);
}
};
plugin.effect.fade = function () {
param.effect = {
'init': {
'css': {
display: 'block',
opacity: '0'
},
'animate': {
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
opacity: '0'
}
},
'next': {
'css': {
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
opacity: '1'
}
},
'end': {
'css': {
display: 'none',
zIndex: '98'
}
}
};
};
plugin.effect.roll = function () {
param.effect = {
'init': {
'css': {
top: '3em',
display: 'block',
opacity: '0'
},
'animate': {
top: '0',
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
top: '-3em',
opacity: '0'
}
},
'next': {
'css': {
top: '3em',
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
top: '0',
opacity: '1'
}
},
'end': {
'css': {
zIndex: '98'
}
}
};
};
plugin.effect.slide = function () {
param.effect = {
'init': {
'css': {
left: (200),
display: 'block',
opacity: '0'
},
'animate': {
left: '0',
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
left: (-(200)),
opacity: '0'
}
},
'next': {
'css': {
left: (param.ulWidth),
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
left: '0',
opacity: '1'
}
},
'end': {
'css': {
zIndex: '98'
}
}
};
};
plugin.init();
};
$.fn.simpleTicker = function (options) {
return this.each(function () {
if (undefined == $(this).data('simpleTicker')) {
var plugin = new $.simpleTiecker(this, options);
$(this).data('simpleTicker', plugin);
}
});
};
})(jQuery);
In my opinion, that library is old and very very complicated to work with. I would personally recommend you move to something along the lines of Slick Slider.
Slick: https://kenwheeler.github.io/slick/
You can use the CDN version <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
I was able to recreate your use case in about 5min (with hover pause) with Click. Because it's an actual slider, it's better to wrap things in <div> containers, so I've done so in the fiddle I've shown you. You can tweak the CSS opacity animations to taste, but it's basically what you're doing now.
The Fiddle: Slick Slider
JSFIDDLE DEMO
I couldn't figure out how to go about doing these following:
Show the default item on load. Currently, it loads a blank page and shows the data only when I drag the slider.
Show a fading effect when the items are loaded.
Here's the HTML
<div class="sli3"></div>
<div class="div-0">
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
</div>
CSS:
.div-0 {
position: relative;
}
.div-1 {
position:absolute;
top:150px;
left:150px;
}
.div-2 {
position:absolute;
top:100px;
left:60px;
}
.div-3 {
position:absolute;
top:210px;
left:260px;
}
JS:
$(function() {
$(".sli3").slider({
animate: true,
range: "min",
value: 10,
min: 0,
max: 100,
slide: function(event, ui) {
if (ui.value<=20) {
$(".div-1").text("whatever");
$(".div-2").html("hello <strong>world</strong>");
$(".div-3").text("");
}
else if (ui.value>=21 && ui.value<50) {
$(".div-1").text("yay");
$(".div-2").text("whoo");
$(".div-3").text("");
}
else if (ui.value>=50 && ui.value<70) {
$(".div-1").text("star");
$(".div-2").text("wars");
$(".div-3").text("");
}
else if (ui.value>=70 && ui.value<90) {
$(".div-1").text("night");
$(".div-2").text("crawler");
$(".div-3").text("rocks");
}
else {
$(".div-1").text("example text 1");
$(".div-2").text("example text 2");
$(".div-3").text("");
}
}
});
});
How do I go about doing this?
A bit of change to your code:
$(function() {
$(".sli3").slider({
animate: true,
range: "min",
min: 0,
max: 100,
slide: onSlide,
change: onSlide
}).slider('value', 10);
});
(I took the slide function out so I could call it both on change and slide).
Check the update to your demo:
https://jsfiddle.net/m7uhdsy9/1/
I'm using a plugin called Letter js to animate a four paragraphs using html jQuery and CSS.
The plugin works great but I have an issue trying to delay the animation of each paragraph i.e. paragraph 1 should start after 1 second, paragraph 2 should start after 2 seconds with other words making each paragraph appear gradually.
I tried adding the delay function after content but that didn't work, can anybody help?
// The plugin js (l-by-l.min.js) file is the following:
! function(e) {
e.fn.lbyl = function(n) {
{
var t = e.extend({
content: "",
speed: 10,
type: "fade",
fadeSpeed: 500,
finished: function() {}
}, n),
d = e(this),
s = [],
i = t.content;
e(this).length
}
d.empty(), d.attr("data-time", i.length * t.speed);
for (var p = 0; p < i.length; p++) s.push(i[p]);
e.each(s, function(e, n) {
d.append('<span style="display: none;">' + n + "</span>"), setTimeout(function() {
"show" == t.type ? d.find("span:eq(" + e + ")").show() : "fade" == t.type && d.find("span:eq(" + e + ")").fadeIn(t.fadeSpeed)
}, e * t.speed)
}), setTimeout(function() {
t.finished()
}, i.length * t.speed)
}
}(jQuery);
// My Script is the following:
jQuery(document).ready(function($) {
$(".welcome_Text1_dk").lbyl({
content: "this is paragraph one",
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
})
});
jQuery(document).ready(function($) {
$(".welcome_Text2_dk").lbyl({
content: "this is paragraph two",
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
})
});
jQuery(document).ready(function($) {
$(".welcome_Text3_dk").lbyl({
content: "this is paragraph three",
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
})
});
jQuery(document).ready(function($) {
$(".welcome_Text4_dk").lbyl({
content: "this is paragraph four",
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
})
});
#home_dk {
width: 100%;
height: 100vh;
background: #fff;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: center;
}
#welcome_Text_Wrapper_dk {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.welcome_Text1_dk,
.welcome_Text2_dk,
.welcome_Text3_dk {
color: #b6b69c;
font-size: 2.6em;
font-family: "SuperGroteskWebPro-Bold W01 Rg";
text-transform: uppercase;
text-align: left;
line-height: 1em;
}
.welcome_Text4_dk {
color: #b6b69c;
font-size: 2.6em;
font-family: 'FF_Super_Grotesk';
text-transform: uppercase;
text-align: left;
line-height: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home_dk">
<article id="welcome_Text_Wrapper_dk">
<div class="welcome_Text1_dk"></div>
<div class="welcome_Text2_dk"></div>
<div class="welcome_Text3_dk"></div>
<div class="welcome_Text4_dk"></div>
</article>
</div>
// The plugin js (l-by-l.min.js) file is the following:
! function(e) {
e.fn.lbyl = function(n) {
{
var t = e.extend({
content: "",
speed: 10,
type: "fade",
fadeSpeed: 500,
finished: function() {}
}, n),
d = e(this),
s = [],
i = t.content;
e(this).length
}
d.empty(), d.attr("data-time", i.length * t.speed);
for (var p = 0; p < i.length; p++) s.push(i[p]);
e.each(s, function(e, n) {
d.append('<span style="display: none;">' + n + "</span>"), setTimeout(function() {
"show" == t.type ? d.find("span:eq(" + e + ")").show() : "fade" == t.type && d.find("span:eq(" + e + ")").fadeIn(t.fadeSpeed)
}, e * t.speed)
}), setTimeout(function() {
t.finished()
}, i.length * t.speed)
}
}(jQuery);
// My Script is the following:
jQuery(document).ready(function($) {
// create an array of paragraphs
var myParagraphs = [{
selector: ".welcome_Text1_dk",
content: "this is paragraph one"
}, {
selector: ".welcome_Text2_dk",
content: "this is paragraph two"
}, {
selector: ".welcome_Text3_dk",
content: "this is paragraph three"
}, {
selector: ".welcome_Text4_dk",
content: "this is paragraph four"
}];
// loops it
for (let i = 0; i < myParagraphs.length; i++) {
setTimeout(function() {
$(myParagraphs[i].selector).lbyl({
content: myParagraphs[i].content,
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
});
}, 1000 * i);
}
});
#home_dk {
width: 100%;
height: 100vh;
background: #fff;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: center;
}
#welcome_Text_Wrapper_dk {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.welcome_Text1_dk,
.welcome_Text2_dk,
.welcome_Text3_dk {
color: #b6b69c;
font-size: 2.6em;
font-family: "SuperGroteskWebPro-Bold W01 Rg";
text-transform: uppercase;
text-align: left;
line-height: 1em;
}
.welcome_Text4_dk {
color: #b6b69c;
font-size: 2.6em;
font-family: 'FF_Super_Grotesk';
text-transform: uppercase;
text-align: left;
line-height: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home_dk">
<article id="welcome_Text_Wrapper_dk">
<div class="welcome_Text1_dk"></div>
<div class="welcome_Text2_dk"></div>
<div class="welcome_Text3_dk"></div>
<div class="welcome_Text4_dk"></div>
</article>
</div>
You can use the setTimeout() function.
jQuery(document).ready(function($) {
// run first one here
setTimeout(function(){
// do the second one here
}, 1000); // in milliseconds; 1 second
setTimeout(function(){
// do the third one
}, 2000); // in milliseconds; 2 second
setTimeout(function(){
// do the fourth one here
}, 3000); // in milliseconds; 3 second
// etc.
});
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
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);});
}
});