I need my javascript to only do the callback when I OPEN a section on the accordion, as of right now it does a callback when I open OR close a section because I'm only using a click function. Is there a way I can modify my existing click function to only run when the given section is activated?
My current click function:
$("a#mimetypes").click(function() {
$("span#mimetypesthrobber").loading(true, { max: 1500 })
$.getJSON("../mimetypes", function(data) {
//callback
});
});
Thanks!
EDIT:
I already tried this with another part of the accordion and it wasn't working properly:
$('.ui-accordion').bind('accordionchange', function(event, ui) {
if (ui.newHeader == "Encoders") {
EncodersGet();
}
});
you can use the the "change event"
$('.ui-accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery object, activated header
ui.oldHeader // jQuery object, previous header
ui.newContent // jQuery object, activated content
ui.oldContent // jQuery object, previous content
});
and access the "newHeadert" for example and do your processing
EDIT
according to the new info {collapsible: true, active: false}
$(document).ready(function() {
var $acc = $('#accordion').accordion({ collapsible: true,
active : false ,
change : function (event, ui)
{
var index = $acc.accordion( "option", "active");
if( index === false){
// all are close
}
else{
// 0-based index of the open section
}
}
});
});
the "option, active" would return you the index of the open section or "false" if all sections are closed
One improvement on undertakerors answer: use triple equals when comparing index to false to avoid the first accordion element to match.
if (index === false) {
// All are closed
} else {
// 0-based index of the open section
}
Please remember that double equals will perform type conversion when evaluating conditions.
If all the accordion sections are closed by dfault you could replace the click event with toggle and have the second function simple do nothing.
$("a#mimetypes").toggle(function() {
$("span#mimetypesthrobber").loading(true, { max: 1500 });
$.getJSON("../mimetypes", function(data) {
//callback
});
},
function() {
//do nothing
});
The better solution would be to add a class to the active section and check for that class before calling the load.
$("a#mimetypes").click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
}
else {
$(".active").removeClass("active"); //Edit - remove all active classes to account for this section being closed by the opening of another
$(this).addclass("active");
$("span#mimetypesthrobber").loading(true, { max: 1500 });
$.getJSON("../mimetypes", function(data) {
//callback
});
}
});
Related
for some reason I can't input text in my newsletter input field now that I display it in a fancybox popup window. Any idea what the issue is and how to fix this? See http://jsfiddle.net/6G8YR/
Many thanks,
function openFancybox() {
setTimeout( function() {$('#newspopup').trigger('click'); },1000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 0.0001 });
$('#newspopup').fancybox({
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.3)'
}
}
}
});
});
$(document).on('click', function(e) {
if(e.target === $('.visitwebsitebtn')[0]) {
$.fancybox.close();
}
});
Ok I figured out the problem, but only ran into other kinds of issues. The problem is that, there is an event that exists that causes your fancybox to refresh everytime someone happens to click on it.
This is why you are unable to write anything in the input. I have a temporary solution that is really ugly but it works.
$('#email').on('click', function(e){
e.stopPropagation();
});
Upon clicking the email input, your fancybox won't refersh. I tried applying this to your #newspopup but it blocs $('#newspopup').trigger('click'); so your fancybox never opens at the start.
Here is a Demo
Additional information:
I've worked with fancybox plugin before and I've never encountered this problem. You might want to think of adding options to your fancybox.. for example add this line :
'type':'iframe',
I would have tried on jsfiddle, but unfortunately they don't allow it, it seems.
You can optimize your code and get rid of unnecessary click events and triggers (so you won't need unnecessary e.stopPropagation() methods either) like :
function openFancybox() {
setTimeout(function () {
$.fancybox('#newspopup', {
modal: true, // this prevents fancybox to close unless close unless ".visitwebsitebtn" is clicked
helpers: {
overlay: {
css: {
'background': 'rgba(58, 42, 45, 0.3)'
}
}
},
afterShow: function () {
// enables a way to close fancybox
$(".visitwebsitebtn").on("click", function () {
$.fancybox.close()
});
}
});
}, 1000);
};
$(document).ready(function () {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', {
expires: 7
});
});
See JSFIDDLE
How can I hide the left control if the carousel is on the first item, and how can I hide the right control when the carousel is on the last item.
My code below hides the control successfully but on page load it is as if the carousel first item is in the middle and the user can either go all the way through via the left or right controls.
http://bootply.com/99354
thanks
Bootply link
$('#myCarousel').on('slid', '', checkitem); // on caroussel move
$('#myCarousel').on('slid.bs.carousel', '', checkitem); // on carousel move
$(document).ready(function(){ // on document ready
checkitem();
});
function checkitem() // check function
{
var $this = $('#myCarousel');
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
$this.children('.right.carousel-control').show();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.left.carousel-control').show();
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
The below code is an updated version of TheLittlePig's code for Bootstrap 3 that works both for multiple carousels on the same page and for indicator actions. The explained code is here
checkitem = function() {
var $this;
$this = $("#slideshow");
if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#slideshow").on("slid.bs.carousel", "", checkitem);
Augmenting #TheLittlePig, it needs to be slightly different if you're using Bootstrap 3 because the event to attach the callback to is different: slid.bs.carousel. Also, if you have multiple carousels on one page you'll need to pass a unique css id for the carousel into the event handler. Here is a modified version that I use on my Rails site:
<script>
//<![CDATA]
id = '#carousel-<%=id%>';
$(id).on('slid.bs.carousel', { id: id }, bs_carousel_slid);
$(document).ready(function(){ $(id).trigger('slid.bs.carousel'); });
//]]>
</script>
That is repeated for each carousel. The <%=id%> is a ruby expression that is replaced by a unique id for the given carousel. Tweak that bit for your needs according to the language of your choice.
The difference is that the carousel's id is passed into the event handler function as event data so that the event handler can operate on the correct carousel. I also changed the ready event so that it triggers the slid.bs.carousel event (instead of calling the function directly) so it passes the correct event data to the event handler for each carousel.
The event handler is a function called bs_carousel_slid that I define elsewhere (those on Rails - it's in a file in app/assets/javascripts). The function is shown below:
function bs_carousel_slid(event)
{
var id = event.data.id;
var $this = $(id);
if($(id + ' .carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($(id + ' .carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
IF YOU'RE USING BOOTSTRAP 3:
The event is 'slid.bs.carousel' not 'slid'
$('.carousel').carousel({
interval: false,
})
$(document).ready(function () { // on document ready
checkitem();
});
$('#myCarousel').on('slid.bs.carousel', checkitem);
function checkitem() // check function
{
var $this = $('#myCarousel');
if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
I have zozo tabs script and i want make ajax request at change tabs.
Here is my preview
Animation doesn't work here- i don't now why, but you can see javascript code:
$(document).ready(function () {
checkOrientation("vertical");
var onSelect = function(event, item) {
console.log("Selected tab text: " + item.tab.text()); alert('dsadsa');
};
var tabbedNav = $("#tabbed-nav").zozoTabs({
orientation: "vertical",
animation: { duration: 200 },
defaultTab: "tab1",
effects: "slideD",
easing: "easeOutQuad",
select: onSelect
});
$("#ddl-orientation").bind("change", function (e) {
var orientation = $(this).val();
checkOrientation(orientation);
tabbedNav.data('zozoTabs').setOptions({ "orientation": orientation });
});
$("#ddl-position").bind("change", function (e) {
tabbedNav.data('zozoTabs').setOptions({ "position": $(this).val() });
});
function checkOrientation(orientation) {
jQuery('#ddl-position').children('option[data-orientation="h"]').attr('disabled', !(orientation === "horizontal"));
}
});
Apparently this animation is easy to use in ajax.
here is documentation
I don't know well javascript and i don't have idea what i must do.
Could you show me where i must put code to active ajax ? simple alert message will by ok : ) I will be grateful too, if you tell me how return ajax request to content tab.
function onSelect(event,item)
{
if(item.tab.text() == 'some tab name')
{
alert("i can rollerblade");
}
}
I have used 'select' attribute of zozo tabs but it never worked for me.
But I have found an alternative for it
Put a class or id in li.
$("li#123").live("click", function(e){
if($(this).text() == 'some tab name')
{
alert("i can rollerblade");
$.ajax({
..........
});
}
}
I have multiple jquery ui sortable lists that are connected and get balanced manually to N number of items whenever items are received by one list - just like in this answer: https://stackoverflow.com/a/13754827/27497
However, it appears that when you manually move items between lists (using jquery's .appendTo() or .prependTo()), these changes aren't detected by the jquery ui sortable library, and thus when you use the "cancel" command to revert the state, the manually moved items aren't placed back into their original list.
Is there a proper way to manually move an item from one list to another so that the sortable library is able to move the item back when you call $(".my-lists-selector").sortable("cancel");
Here is an example of how the items don't revert when you call .sortable("cancel") - just click the red cancel button after moving items from one list to another: http://jsfiddle.net/SUffL/3/
$(function() {
$( ".connectedSortable" ).sortable({
connectWith: ".connectedSortable",
update: function(event, ui) {
var ul1 = $("#ul1 li");
var ul2 = $("#ul2 li");
var ul3 = $("#ul3 li");
checkul1(ul1, ul2, ul3);
checkul2(ul1, ul2, ul3);
checkul3(ul1, ul2, ul3);
}
}).disableSelection();
$("#cancel-btn").click(function(){
$(".connectedSortable").sortable("cancel");
});
});
function checkul1(ul1, ul2, ul3) {
if (ul1.length > 5) {
ul1.last().prependTo(ul2.parent());
}
}
function checkul2(ul1, ul2, ul3) {
if (ul2.length > 5) {
if (ul1.length < 5) {
ul2.first().appendTo(ul1.parent());
} else {
ul2.last().prependTo(ul3.parent());
}
}
}
function checkul3(ul1, ul2, ul3) {
if (ul3.length > 5) {
ul3.first().appendTo(ul2.parent());
checkul2(ul1, ul2, ul3);
}
}
Here is a solution that stores the manually moved item along with list it started in and list it is moved to. Within the receive event handler the 2 lists are available as ui.sender and this. I created a simple balanceLists function to handle the manual move and the cancel of same
$(function () {
var listChange = {
startList: null,
item: null,
endList: null
}
$(".connectedSortable").sortable({
connectWith: ".connectedSortable",
receive: function (event, ui) {
listChange = {
startList: ui.sender,
item: ui.item,
endList: $(this)
}
balanceLists($(this), ui.sender)
}
}).disableSelection();
$("#cancel-btn").click(function () {
if (listChange.item) {
balanceLists(listChange.startList, listChange.endList)
$(".connectedSortable").sortable("cancel").sortable("refresh");
listChange.item=null;
}
});
});
function balanceLists($from, $to) {
$to.append($from.find('li').last())
}
DEMO: http://jsfiddle.net/SUffL/8/
This allows to undo one move with cancel button.
I've been working to find a solution for a jQuery problem.
I have a parent container with 2 divs and a link in each. If a link is clicked in one of the divs, a class is added to the parent container (to change the background). If the other link is clicked, I wanted to check if a class has already been added from the other link's click and be removed.
What's going on: When I click the first link, the class inside-office is added. Then I click the second link and it will add that without removing the first link.
Here's the code I have so far with no success:
$("a.in-office").click(function() {
if($('#fullwrap').hasClass('outside-office')) {
$(this).removeClass('outside-office');
}
$('#top_barwrap').parent().addClass('inside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
$("a.out-office").click(function() {
if($('#fullwrap').hasClass('inside-office')) {
$(this).removeClass('inside-office');
}
$('#top_barwrap').parent().addClass('outside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
Change the $(this) to $('#fullwrap') as you are checking the class on element with id "fullwrap".
This is what you need.
Explanation: Your $(this) is never referring to $('#fullwrap') which it should. Your $(this) is actually referring to either $('a.in-office') or $('a.out-office').
CORRECT CODE:
$("a.in-office").click(function() {
var $this = $('#fullwrap');
if($this.hasClass('outside-office')) {
$this.removeClass('outside-office');
}
$('#top_barwrap').parent().addClass('inside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
$("a.out-office").click(function() {
var $this = $('#fullwrap');
if($this.hasClass('inside-office')) {
$this.removeClass('inside-office');
}
$('#top_barwrap').parent().addClass('outside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
Use toggleClass. It will remove the class if it exists, else add it.
$(this).toggleClass('outside-office');
If one of the class is already present, you can switch between the two classes using
$(this).toggleClass('outside-office inside-office');