Develop Reference

Close jQuery UI dialog on overlay click

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');
})

Nested horizontal sliders with click controls

How do I get a nested horizontal slider to work with click controls by show/hiding them.
I'm using Swiper which I have almost working except if you click / transition into the nested slider, you can't go back from that first slide without first transition one slide. If you click all the way to the end and back, it works perfectly. There are many callbacks in the Swiper api available.
My progress so far: Nested slider Fiddle
$(document).ready(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
nextButton: '.h-next',
prevButton: '.h-prev',
onSlideChangeStart: function() {
if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
console.log('nested');
$('.h-prev, .h-next').hide();
} else {
console.log('notnested');
$('.h-prev, .h-next').show();
}
},
onReachBeginning: function() {},
onReachEnd: function() {}
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'horizontal',
spaceBetween: 0,
nextButton: '.v-next',
prevButton: '.v-prev',
nested: true,
onReachBeginning: function() {
$('.h-prev').show();
},
onReachEnd: function() {
$('.h-next').show();
},
onSlideChangeStart: function(slides) {
if (slides.activeIndex === 1) {
console.log('slide 2');
}
}
});
});
EDIT:
Cleaned up fiddle using #TheOnlyError 's answer here and here:
$(document).ready(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
nextButton: '.h-next',
prevButton: '.h-prev',
onSlideChangeStart: function() {
if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
$('.h-prev, .h-next').hide();
} else {
$('.h-prev, .h-next').show();
}
},
onSlideNextStart: function() {
$('.h-prev').show();
}
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'horizontal',
spaceBetween: 0,
nextButton: '.v-next',
prevButton: '.v-prev',
nested: true,
onReachBeginning: function() {
$('.h-prev').show();
},
onReachEnd: function() {
$('.h-next').show();
},
});
});
Edit2:
Just encountered that if the first slide is nested, this doesn't work. To solve this prob you will also need to add:
onInit: function(){
if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-h-inner')) {
$('.prev, .next').hide();
}
},
to the first slider: Fiddle

The problem is that Swiper won't detect the transition between seperate Swiper objects. The solution would be checking when one has swiped to the next slide from the first horizontal one, to show the previous button.
So add this function to your first Swiper object:
onSlideNextStart: function(swiper) {
$('.h-prev').show();
}
Check the fiddle.

Combine two tab scripts to make one

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

fire different execution on window resize event

I have the following carousel code [fiddle] that returns a different number of items to display based on screen size.
$(function() {
var mini = 1000;
var big = 1280;
if (window.screen.availWidth < mini) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
}
else {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });
}
});
I want to add a .resize function to it so the number of items will also change on window resize. I followed this example but couldn't get it to work. Would anyone please tell me how to add the resize function to my example?
My failed attempt (demo):
function screen_resize() {
var h = parseInt(window.innerHeight);
var w = parseInt(window.innerWidth);
if (w <= 800) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
}
else {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });
}
}
// if window resize call responsive function
$(window).resize(function(e) {
screen_resize();
});
// call responsive function on default :)
$(document).ready(function(e) {
screen_resize();
});

You can write it like this:
window.onresize = screen_resize;
Edit: Your carousel looks good if you call screen_resize once, but breaks if you call it more than once. screen_resize is called in your code though and works as programmed.

how can I hide a part of javascript from IE

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 )