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
}
}
});
Related
$(".banner-slider").owlCarousel({
navigation : true, // Show next and prev buttons
pagination: true,
slideSpeed : 50000,
singleItem:true,
autoPlay: true,
autoPlay : 6000,
});
You can use an array of times ` var delays = [4000,3000,5000,3000];
function pageLoad() {
$(function () {
$('#slider').nivoSlider({
pauseTime: 50000,
directionNav: true,
afterChange: function () { setDelay() },
afterLoad: function () { setDelay() },
controlNav: true,
pauseOnHover: false
});
});
}
function setDelay() {
var currentSlide = $('#slider').data("nivo:vars").currentSlide;
setTimeout(function () {
$('#slider').find('a.nivo-nextNav').click()
}, delays[currentSlide]);
}`
I've been working on this website header with divs moving up and down on a click, so clicking on the search button brings up a searchbar and clicking on the account button brings up an accountbar. With some great help from Madalin I've achieved this (article "DIV moving up and down using javascript").
However... Is there a way to reset the javascript on clicking of either one of the buttons (so either "search" or "account"). I need this because now when you click once it works but when for example search has been clicked already and you click account you have to click twice again on search to see action... Please refer to the jsfiddle: [https://jsfiddle.net/27jaodcg][1]
So when you click account it closes the searchbar and when you click the search bar it closes the accountbar, this works perfect (once).
But when account has been clicked before the script "thinks" accountbar is still open so when clicking search it closes the accountbar but when clicking on account again nothing happens as the script closes accountbar first (but its closed already by the search button click).
I hope this makes sense :)
Below is the Javascript Jquery code so far:
jQuery(document).ready(function($){
$("#account").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '60px' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
}
});
$("#searchid").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '60px' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
}
});
});
Thanks in advance!
When opening either of the toolbars, just ensure the "open" class of the other toolbar is removed. See code below.
jQuery(document).ready(function($){
$("#account").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '60px' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
$("#searchid").removeClass('open');
}
});
$("#searchid").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '60px' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
$("#account").removeClass('open');
}
});
});
I have a carousel but somehow the last thumb doesn't work, you can double click it and shows wrong large image.. I really can't find the issue :(
Here it works with the last thumb: CAROUSEL
Here it doesn't: FIDDLE
The script:
$(function() {
$('#carousel').carouFredSel({
responsive: false,
circular: false,
auto: false,
items: {
visible: 2,
width: 1000,
height: '475'
},
scroll: {
fx: 'crossfade'
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 4
},
width: 254,
height: 112
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
$('#carousel').carouFredSel({ needed to be
visible: 1 and NOT visible: 2
For the last few hours I've been trying to have an animated dialog that will initiate a puff animation, is draggable and when closed will center again when opened. As of now I have it so the animation initiates, it's draggable but when I close and open it, it's fixed in the same position it was dragged to.
I've tried using the open function, complete function in show/hide, setting the div/dialog in a function, using position: center and yeah...
Anyway, here is the code:
frm_location.jsp:
//this is in an "a" tag, can't seem to get it to display properly
id="NEW_LOCATION_BUTTON" href="javascript:openDialog('#dialog-form','#popupBoxCancel','orange-theme','625');" class="btn_sel">
jQueryDialog.js:
function openDialog(_dialog, _cancel, _theme, _size) {
jQuery(document).ready(function ($) {
$(_dialog).dialog({
autoOpen: true,
width: _size,
modal: true,
position: "center",
resizable: false,
draggable: true,
dialogClass: _theme,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
$(_cancel).click(function() {
$(_dialog).dialog("close");
});
}
Take a look at this. I'm not sure how you're reopening the dialog, but this should do. jsfiddle code
<div id='dialog'>PUFF</div>
<button id='reopen'>OPEN DIALOG</button>
$(function () {
$('#reopen').click(function () {
$( "#dialog" ).dialog({ position: 'center'});
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: true,
width: 200,
modal: true,
position: "center",
resizable: false,
draggable: true,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
});
I need to set an alert nice message box via Jquery-UI
and then after the effects of the animation is done , and only then
to navigate to a different URL
This is the code I am using though no matter what I did try
the navigation occurs... only the UI effects does not get the chance to perform.
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).dialog("close").delay(2000).delay(800, function () {
window.location = "http://rcl.co.il";
});
}
}
});
Try bind redirect function on dialogclose event.
http://jsfiddle.net/tarabyte/tDFq3/
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).on('dialogclose', function () {
window.location = "http://rcl.co.il";
}).dialog('close');
}
}
});