I currently have this code in my jquery :
(function(a) {
a.fn.extend({tabify: function(e) {
function c(b) {
hash = a(b).find("a").attr("href");
return hash = hash.substring(0, hash.length - 4)
}
function f(b) {
a(b).addClass("active");
a(c(b)).show();
a(b).siblings("li").each(function() {
a(this).removeClass("active");
a(c(this)).hide()
})
}
return this.each(function() {
function b() {
location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent())
}
var d = this, g = {ul: a(d)};
a(this).find("li a").each(function() {
a(this).attr("href", a(this).attr("href") + "-tab")
});
location.hash && b();
setInterval(b, 100);
a(this).find("li").each(function() {
a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide()
});
e && e(g)
})
}})
})(jQuery);
and this is HTML and script of the tabs
$("#menu").tabify({
disabled: true
});
<ul id="menu">
<li class="active">jQuery</li>
<li>Prototype</li>
<li>Ext</li>
</ul>
<div id="jquery">
jQuery is a cross-browser…
</div>
<div id="prototype">
The Prototype JavaScript…
</div>
<div id="ext">
Ext (X-t) is a JavaScript…
</div>
and I want to add the tabs have a disable in my plugins.Could someone please show me the correct way to do it?
Related
I would like to limit click event loop in jquery. I have categories list which will have in the following format and also after 5 click in the loop i have to disable click event.
<div class="col-md-2 col-sm-4 col-xs-6 home_s">
<a class="get_category" id="36" href="javascript:void(0)">
<img class="img-responsive img-center" src="">
<span>xxxxx</span>
</a>
<input type="hidden" value="36" id="categories36" name="categories[]">
</div>
$(document).ready(function() {
$(".get_category").on('click', function() {
var cat_id = $(this).attr('id');
var cat_value = $("#categories" + cat_id).val('');
if ($("#categories" + cat_id).val() == '') {
$("#categories" + cat_id).val(cat_id);
} else {
alert("hi");
$("#categories" + cat_id).val('');
}
})
});
You can use off() to unbind event handler
$(document).ready(function() {
// variable for counting clicks
var i = 1;
var fun = function() {
var cat_id = $(this).attr('id');
var cat_value = $("#categories" + cat_id).val('');
if ($("#categories" + cat_id).val() == '') {
$("#categories" + cat_id).val(cat_id);
} else {
alert("hi");
$("#categories" + cat_id).val('');
}
// checking and increment click count
if (i++ == 5)
// unbinding click handler from element
$(".get_category").off('click', fun);
};
$(".get_category").on('click', fun);
});
Example :
$(document).ready(function() {
var i = 1;
var fun = function() {
alert('clicked'+i);
if (i++ == 5)
$(".get_category").off('click', fun);
};
$(".get_category").on('click', fun);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="get_category">click</button>
If you have multiple .get_category in your html the solution from Pranav C Balan won't work.
$(document).ready(function() {
function clickFunc() {
var click_count = $(this).data('click-count') || 0;
var cat_id = $(this).attr('id');
var cat_value = $("#categories" + cat_id).val('');
if ($("#categories" + cat_id).val() == '') {
$("#categories" + cat_id).val(cat_id);
} else {
alert("hi");
$("#categories" + cat_id).val('');
}
if (++click_count >= 5)
$(this).off('click', clickFunc);
$(this).data('click-count', click_count);
});
$(".get_category").on('click', clickFunc);
});
This way you store the click count on the data-click-count attribute of each .get_category
I have been trying to figure out how to change a tab(target another tab) (i think its JQuery Tabs) using a random
from a previous tab.
What i currently have is:
<a class="txt-bblue hover-u" href="#" onclick="$(".wpb_tabs").tabs( "active", "tab-1393763893-1-88" )">becoming a carer</a>
but it doesn't seem to do anything. I have searched online and these forums for answers but the proposed solutions don't seem to work.
The Js function for the tabs is:
/* Tabs + Tours
---------------------------------------------------------- */
if ( typeof window['vc_tabsBehaviour'] !== 'function' ) {
function vc_tabsBehaviour() {
jQuery(function($){$(document.body).off('click.preview', 'a')});
jQuery('.wpb_tabs, .wpb_tour').each(function(index) {
var $tabs,
interval = jQuery(this).attr("data-interval"),
tabs_array = [];
//
$tabs = jQuery(this).find('.wpb_tour_tabs_wrapper').tabs({
show: function(event, ui) {wpb_prepare_tab_content(event, ui);},
activate: function(event, ui) {wpb_prepare_tab_content(event, ui);}
}).tabs('rotate', interval*1000);
jQuery(this).find('.wpb_tab').each(function(){ tabs_array.push(this.id); });
jQuery(this).find('.wpb_tab a[href^="#"]').click(function(e) {
e.preventDefault();
if ( jQuery.inArray( jQuery(this).attr('href'), tabs_array) ) {
$tabs.tabs("select", jQuery(this).attr('href'));
return false;
}
});
jQuery(this).find('.wpb_prev_slide a, .wpb_next_slide a').click(function(e) {
e.preventDefault();
var ver = jQuery.ui.version.split('.');
if(parseInt(ver[0])==1 && parseInt(ver[1]) < 9) {
var index = $tabs.tabs('option', 'selected');
if ( jQuery(this).parent().hasClass('wpb_next_slide') ) { index++; }
else { index--; }
if ( index < 0 ) { index = $tabs.tabs("length") - 1; }
else if ( index >= $tabs.tabs("length") ) { index = 0; }
$tabs.tabs("select", index);
} else {
var index = $tabs.tabs( "option", "active"),
length = $tabs.find('.wpb_tab').length;
if ( jQuery(this).parent().hasClass('wpb_next_slide') ) {
index = (index+1) >=length ? 0 : index+1;
} else {
index = index-1 < 0 ? length -1 : index-1;
}
$tabs.tabs( "option", "active", index );
}
});
});
}
}
it is the Js_composer plugin script for WP
The link to my page is: http://safercareltd.com/careers-training/jobs-vacancies/
any help for where i am going wrong would be great thanks
How about just triggering a click event on the tab you want to open:
onclick="$('#ui-id-2').trigger('click');return false;"
Try:
$(function(){
$('a.txt-bblue.hover-u').on('click',function(){
$('.wpb_tab').trigger('click');
return false;
});
});
or:
$(document).ready(function(){
$('a.txt-bblue.hover-u').on('click',function(){
$('.wpb_tab').trigger('click');
return false;
});
});
This question already has answers here:
jQuery doesn't work after content is loaded via AJAX
(9 answers)
Closed 9 years ago.
here is my js function to load html
function getLeftCategories() {
var id = 3;
$.getJSON("/api/kategori/getKategoriByTedarikci/" + id, function (data) {
var obj = jQuery.parseJSON(data);
$.each(obj, function () {
if (this.UstKategoriId == null) {
var kTop =
'<li>' +
'<a>' + this.KategoriAdi + '<span>+</span></a>' +
'<ul id="ulAltKategori">' +
'</ul>' +
'</li>'
$("#ulKategoriler").append(kTop);
}
});
$.each(obj, function () {
if (this.UstKategoriId != null) {
var sTop =
'<li>' +
'<a>- ' + this.KategoriAdi + '</a>' +
'</li>'
$("#ulAltKategori").append(sTop);
}
});
});
}
this is my html side
<div class="box">
<div class="box-heading">Kategoriler</div>
<div class="box-content">
<div class="box-category">
<ul id="ulKategoriler">
</ul>
</div>
</div>
here is my script function to toggle
$(function () {
$('.box-category a > span').each(function () {
if (!$('+ ul', $(this).parent()).length) {
$(this).hide();
}
});
$('.box-category a > span').click(function (e) {
debugger;
e.preventDefault();
$('+ ul', $(this).parent()).slideToggle();
$(this).parent().toggleClass('active');
$(this).html($(this).parent().hasClass('active') ? "-" : "+");
return false;
});
$('.filter-active span').click();
});
if i add the html from javascript toggle function is not working am i missing something which one is load to page first time ?
If this is dynamically loaded html then you will need event delegation to handle this
$(document).on('click', ".box-category a > span", function () {
...
}
Just change your script:
$('.box-category a > span').click(function (e) {
debugger;
e.preventDefault();
...
}
to
$('.box-category').on('click', 'a > span', function (e) {
debugger;
e.preventDefault();
e.stopPropagation();
...
}
I Have find a javascript code that works perfectly for showing a DIV.
but this code works only for showing one div for each page.
i want to include many DIVS for hiding and showing in the same page.
I was try to replace the div id and show/hide span id with a rundom php number for each include, but still is not working.
so how i have to do it?
the JS code:
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value) {
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}
function function_fade_out(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
function function_fade_in(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'block';
}
if (opacity_value == 100) {
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_in(x)
};
})(i), i * 10);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_out(x)
};
})(100 - i), i * 10);
}
}
};
Check out the Fiddle, you can edit code based on your needs ;)
$(function() {
$('.sub-nav li a').each(function() {
$(this).click(function() {
var category = $(this).data('cat');
$('.'+category).addClass('active').siblings('div').removeClass('active');
});
});
});
finaly i found my self:
<a class="showhide">AAA</a>
<div>show me / hide me</div>
<a class="showhide">BBB</a>
<div>show me / hide me</div>
js
$('.showhide').click(function(e) {
$(this).next().slideToggle();
e.preventDefault(); // Stop navigation
});
$('div').hide();
Am just posting this in case someone was trying to answer.
I have a page with few tabs.
I am looking for a way that if you select tab 5 and cookie = 1 then show tab6 otherwise show tab5.
The code for the tabs is:
jQuery(".tabs a").click(function () {
stringref = jQuery(this).attr("href").split('#')[1];
jQuery('.tab_content:not(#' + stringref + ')').hide();
jQuery('.tab_content#' + stringref).fadeIn();
return false;
});
I want the tab number 5, if clicked and cookie=1 to show tab6.
The code that shows the div5 or Div6 if cookie is 1 or null is:
alreadyClosed = $.cookie(stateCookieName);
if (alreadyClosed != 1) {
$DIV5.show();
$DIV6.hide();
} else {
$DIV5.hide();
$DIV6.show();
}
How do I add them together? I assume their should be a way to say:
If tab1.click and cookie = 1 then show $div1
else tab1.click and cookie = null then show $div2
The body looks like:
<!-- buttons -->
<ul id="boxes" class="tabs">
<li>Div 5</li>
<li>Div 6</li>
</ul>
<!-- content -->
<div class="tab_content" id="Div5">DIV 5</div>
<div class="tab_content" id="Div6">DIV 6</div>
I hope you guys can help me.
Thanks alot & Regards,
rallyboy.
jQuery(".tabs a").click(function () {
alreadyClosed = $.cookie(stateCookieName);
stringref = jQuery(this).attr("href").split('#')[1];
if(alreadyClosed == 1)
{
newstring = stringref;
if(stringref == "5")
{
newstring = "6";
}
elseif(stringref == "6")
{
newstring = "5";
}
stringref = newstring;
}
jQuery('.tab_content:not(#' + stringref + ')').hide();
jQuery('.tab_content#' + stringref).fadeIn();
return false;
});
This extra code does a quick check - if the cookie is set, it toggles 5 to 6 or 6 to 5. Then it proceeds as normal.
Do you need a more general solution than this for tabs 5 and 6? If so, can you please lay out some rules for how exactly it should work?
jQuery(".tabs a").click(function () {
stringref = jQuery(this).attr("href").split('#')[1];
// Normal navigation
if(stringref != 'div5') {
jQuery('.tab_content:not(#' + stringref + ')').hide();
jQuery('.tab_content#' + stringref).fadeIn();
} else {
// 5 is special, do further checking
var alreadyClosed = $.cookie(stateCookieName);
if (alreadyClosed != 1) {
$('div5').show();
$('div6').hide();
} else {
$('div5').hide();
$('div6').show();
}
}
return false;
});
After so long I found it out finally. I replaced this click function with this:
var alreadyClosed = $.cookie(stateCookieName) == '1';
jQuery('ul.tabs a').click(function () {
var ref = jQuery(this).attr('href').split('#')[1];
if (alreadyClosed && ref == 'Div5') {
ref = 'Div6';
}
jQuery('div.tab_content:not(#' + ref + ')').hide();
jQuery('#' + ref).fadeIn();
return false;
});