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
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 want to close my modal when people click the overlay, normally u would use
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#dialog').dialog('close');
})
but i am loading my modal after i create it, so it would seem that the above code interferes with mine somehow.
this is my code so far.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can bind the event inside the open method
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
open: function(event, ui) { //added here
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
});
},
position: {
my: "center top",
at: "center top+30",
of: "body"
},
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
Okay i found the problem.
i was trying to close the dialog before it was initialized.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
open: function () {
jQuery('.ui-widget-overlay').on('click', function () {
dialog.dialog('close');
});
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
this is the code i ended up with, and this works as intended.
so to summarize, put this code inside your dialog init.
open: function() {
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
})
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;
}
});
I'm trying to call javascript function from jquery dialog buton, but it is not working
my code :
============================
$('#dialogAddActe').dialog({
autoOpen: false,
modal: true,
width: 800,
height:400,
show: "slide",
hide: "slide",
buttons: {
"Suivant": function() {
$(this).dialog("close");
if ($(this).checkNombre())
{
document.forms[0].dispatch.value = "ajouterActe";
document.forms[0].submit();
}
},
"Annuler": function() {
$(this).dialog("close");
document.forms[0].patientId.value="";
}
}
});
============================
$(this).checkNombre() is not working.
BR,
Med Baba
Remove $(this), just use if (checkNombre()).
This is my javascript function to open a jquery dialog.
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
How can I hide the part show: 'slide, from IE ?
var options = {
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
};
if ( ! $.browser.msie){
options ['show'] = 'slide';
}
$('#dialog').append(iframe).appendTo("body").dialog(options);
try this
if ( ! $.browser.msie){
$( "#dialog" ).dialog( "option", "show", "slide" )
}
jquery has removed support for jQuery.browser.msie from version >= 1.9
so
var opts = {
autoOpen : false,
modal : true,
resizable : false,
show : 'slide',
width : 800,
height : 700,
close : function() {
}
};
if (!/msie/.test(window.navigator.userAgent)) {
opts.show = 'slide';
}
('#dialog').append(iframe).appendTo("body").dialog(opts);
$('#dialog_click').click("callback", function() {
$('#dialog').dialog('open');
return false;
});
$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
});
if(!$.browser.msie) {
$( "#dialog" ).dialog( "option", "show", "slide" );
}
There are several workarounds for this (conditional comments for the whole script, altering the property later, etc) but noone has posted a solution that does EXACTLY what you asked: excluding a portion of javascript only in IE.
Then take a look at this:
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
/*#cc_on #*/
/*#if (true)
#else #*/
show: 'slide',
/*#end #*/
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
IE won't include show: 'slide',, while non-IE browsers won't read the Conditional Compilation Statements , so the condition will fall in the (not-commented) else part.
Read more on Conditional Compilation Statements
There is several thing you can do.
First there are conditional comments , ie
<!--[if !IE ]>
<script>
$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
</script>
<![endif]-->
Or you can check jquery browser variable , as other guys are pointing.
Also if you are going this way, and you really want to target old version of IE you can use some functions specific to it ( like attachEvent )