I have this javascript to display my divs with jquery isotope
<script type="text/javascript">
$(document).ready(function(){
var $container = $('#box-content');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
</script>
And I need to add this parameter, but I don't know how, because I don't know javascript.
sortBy : 'random'
see http://isotope.metafizzy.co/docs/sorting.html
<script type="text/javascript">
$(document).ready(function(){
var $container = $('#box-content');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
},
sortBy: 'random'
});
</script>
Related
I am using the JQuery slides that you can find here http://www.slidesjs.com/examples/standard/
but the fade effect is not working on play, only on navigation !
<script>
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: {
fade: {
speed: 1000
}
}
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});
</script>
I also tried to remove the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
I've made this work. Per the docs, you can set the effect property for play to a string.
Check out the jsfiddle: https://jsfiddle.net/cale_b/5ac1cebL/
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 500,
// within the play property, effect should be a string, i.e. "fade"
effect: "fade"
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});
Removing the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
I would appreciate it if someone could combine the two scripts found below. I would like to be able to combine the smooth collapsing functionality of the first script with the single-tab-expanding-at-a-time functionality from the second script. I couldn't add the the code completely so please refer to the link if needed.
I would really appreciate this!
Script 1: (complete -http://jsfiddle.net/HcJJZ/3/)
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('.mytabs').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true,
selected: -1
});
Script 2: (complete - http://jsfiddle.net/fb0z3ezd/4/)
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);
Try this:
Here is JSFIDDLE: enter link description here
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true
});
$('#flexslider1').flexslider({
animation: "fade",
pauseOnHover: true,
controlsContainer: ".flex-container1",
directionNav: true,
controlNav: true
});
$('#flexslider2').flexslider({
animation: "fade",
slideshow: false,
pauseOnHover: true,
useCSS: false,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);
});
});
Hope it helps
I'm running some tests with a basic slider (RoyalSlider) whereby I'm prepending/appending some of the slider content on load using the sliders event functions.
I've an issue with IE8 only, the functions simply aren't working! I've read some issues with IE8 and appendTo()/prependTo(), however, the conditions where these occur aren't similar to mine.
jQuery
(function($) {
$(document).ready(function() {
var homeSlider = $('#js-slider');
if (homeSlider.length) {
var slider = homeSlider.royalSlider({
imageScaleMode: 'fill',
controlNavigation: 'tabs',
thumbs: {
fitInViewport: false,
autoCenter: false
},
arrowsNavAutoHide: false,
slidesSpacing: 0,
loop: true,
transitionSpeed: 250,
navigateByClick: true,
sliderTouch: true,
keyboardNavEnabled: true,
addActiveClass: true,
autoPlay: {
enabled: true,
pauseOnHover: false,
delay: 6000
},
block: {
moveOffset: 200,
speed: 600,
moveEffect: 'bottom',
delay: 600
}
}).data("royalSlider");
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
homeSlider.find('.rsNav').prependTo( $('#js-slider') );
});
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
homeSlider.find('.rsABlock').appendTo( $('#js-homeSliderElements') );
});
}
});
})( jQuery );
HTML
<div class="container container--home">
<div class="container slider-slideTitleWrapper" id="js-homeSliderElements"></div>
<div class="royalSlider slider slider--home rsMinW" id="js-slider">
...
</div>
</div>
try to use native JS methods
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
var parent = homeSlider.find('.rsNav');
parent.insertBefore($('#js-slider'), parent.firstChild);
});
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
homeSlider.find('.rsABlock').appendChild($('#js-homeSliderElements'));
});
Changed things around slightly and found a working method:
var ready = false;
var readyHandler = function() {
homeSlider.find('.rsABlock').appendTo( $('#js-homeSliderElements') );
};
slider.ev.on('rsAfterSlideChange', readyHandler);
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
if (!ready) {
readyHandler();
ready = true;
}
});
Using dialog it is possible multiples effects at same time? For example, in show, bounce and highlight.
I tried {effect: 'bounce', duration: 550, effect: 'highlight', duration: 550}, but only the last effect runs.
$('.modal').click(function () {
$(".dialog-modal").dialog({
modal: true,
hide: "fadeOut",
show: {effect: 'bounce', duration: 550, effect: 'highlight', duration: 550},
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
The amount of time I just spent on this makes 0 sense. And I still didn't get the result I wanted.
But this should at least help you on your way. Check da fiddle
jQueryUI:
$(document).ready(function () {
var $dlg = $('.dialog-modal');
var $mdl = $('.modal');
$dlg.dialog({
autoOpen: false,
modal: true,
dialogClass: 'sweetums',
hide: "fadeOut",
show: {
effect: 'bounce',
duration: 550
},
buttons: {
Ok: function () {
$dlg.dialog("close");
}
}
});
var $newDialog = $('.sweetums');
$mdl.click(function () {
$dlg.dialog('open');
$newDialog.effect("highlight", 550);
});
});
HTML:
<button class="modal">Click</button>
<div class="dialog-modal">some stuff</div>
If you're wondering why I made a second object for $newDialog it's because the old one was originally a div and text but when the modal is made, it expands and adds buttons. $dlg would only do the effect on the text itself and not the box as a whole, so wrapping the whole thing was necessary.
I have the code following where I am unable to add Autoplay on the slider. Can anyone help me with this?
Jquery
<script type="text/javascript">
$(function() {
$(".slider").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 5
});
});
$(document).ready(function(){
$('img.captify').captify({
speedOver: 'fast',
speedOut: 'normal',
hideDelay: 500,
animation: 'slide',
prefix: '',
opacity: '0.7',
className: 'caption-bottom',
position: 'bottom',
spanWidth: '100%'
});
});
</script>
How can I Add Autoplay on this slider
$(function() {
$(".slider").jCarouselLite({
auto:500,
speed:800,
btnNext: ".next",
btnPrev: ".prev",
visible: 5
});
});
$(".slider .jCarouselLite").jCarouselLite({
auto: 800,
speed: 1000
});