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;
});
Related
I have a series of elements with class xyz. The requirement is a user needs to input one number in them only. I then need to concat them. For example, their meter would read 1 2 0 0.
I have below.
$('.xyz').change(function () {
console.log($(this));
arrayNums.length = 0;
var thisRead = parseInt(CombinedNumber(arrayNums), 10);
var lastRead = parseInt($('.abcd').html(), 10);
if ((thisRead - lastRead) <= 1) {
$('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?");
$('#idthing').attr('style' , 'color: red !important');
}
else { $('#idthing').text(thisRead - lastRead + ' KWH');}
});
function CombinedNumber(arrayNums) {
combined = "";
$('.xyz').each(function (index) {
arrayNums.push($(this).val());
});
$.each(arrayNums, function (index, value) {
combined += value;
});
console.log(combined);
return combined
This works the first time, if the user clicks off of the area, before hitting the submit button, but they might hit the submit button first.
Additionally, it ceases to do the calculation after the first time it happens!
I am trying to get a responsive calculation each time someone enters a number. Here is the DOM portion.
<div>
<ul>
<li>
<input class="xyz">
</li>
<li>
<input class="xyz">
</li>
</ul>
</div>
Use input event instead of change as change handler will be invoked only when focus of the element is lost.
var arrayNums = [];
$('.xyz').on('input', function() {
console.log($(this));
arrayNums.length = 0;
var thisRead = parseInt(CombinedNumber(arrayNums), 10);
var lastRead = parseInt($('.abcd').html(), 10);
if ((thisRead - lastRead) <= 1) {
$('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?");
$('#idthing').attr('style', 'color: red !important');
} else {
$('#idthing').text(thisRead - lastRead + ' KWH');
}
});
function CombinedNumber(arrayNums) {
combined = "";
$('.xyz').each(function(index) {
arrayNums.push($(this).val());
});
$.each(arrayNums, function(index, value) {
combined += value;
});
console.log(combined);
return combined;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<ul>
<li>
<input class="xyz">
</li>
<li>
<input class="xyz">
</li>
</ul>
</div>
If you are creating inputs having class .xyz dynamically (May be on click event of button) then below code would be work here. try to replace $('.xyz').change(function () with $(document).on('change','.xyz',function ()
$(document).on('change','.xyz',function () {
console.log($(this));
arrayNums.length = 0;
var thisRead = parseInt(CombinedNumber(arrayNums), 10);
var lastRead = parseInt($('.abcd').html(), 10);
if ((thisRead - lastRead) <= 1) {
$('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?");
$('#idthing').attr('style' , 'color: red !important');
}
else { $('#idthing').text(thisRead - lastRead + ' KWH');}
});
Try to use jQuery Instead of $
jQuery('.xyz').change(function () {
console.log($(this));
arrayNums.length = 0;
var thisRead = parseInt(CombinedNumber(arrayNums), 10);
var lastRead = parseInt($('.abcd').html(), 10);
if ((thisRead - lastRead) <= 1) {
$('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?");
$('#idthing').attr('style' , 'color: red !important');
}
else { $('#idthing').text(thisRead - lastRead + ' KWH'); }
});
function CombinedNumber(arrayNums) {
combined = "";
$('.xyz').each(function (index) {
arrayNums.push($(this).val());
});
$.each(arrayNums, function (index, value) {
combined += value;
});
console.log(combined);
return combined;
}
I want to select or deselect a div with a click.
I want this :
click 1 = add color and select div
click 2 = if is the same id go pink, if different go white.
My problem is when I click on the first div (go red), then the second div (first go white and second too), then the third div, the third div go pink, or I want re run the script (for make the third div red like the first div).
My code:
$(document).ready(function () {
$i = 1;
$firstcase = "";
$(".blackcase").click(function firstclick(event) {
if ($i == 1)
{
$("#" + event.target.id).css("background-color", "red");
$firstvalue = $("\#" + event.target.id).html();
$firstcase = "\#" + event.target.id + "";
$i++;
}
else
{
return false;
}
$(".blackcase").one("click", function (event) {
$firstcase2 = "\#" + event.target.id + "";
if ($("#" + event.target.id).is($firstcase))
{
$("#" + event.target.id).css("background-color", "pink");
$i = 0;
$firstcase = "";
return;
}
else
{
$(".blackcase").css("background-color", "white");
$i = 1;
$firstcase = "";
return false;
}
});
return false;
});
});
JSFIDDLE: https://jsfiddle.net/12gwq95u/3/
You can massively simplify your logic if you have a single event handler and store the last clicked id in a variable outside of the click handler. Try this:
var lastClicked = '';
$(".blackcase").click(function(e) {
e.preventDefault();
$('.blackcase').removeClass('red pink');
$(this).addClass(lastClicked != this.id ? 'red' : 'pink');
lastClicked = this.id;
});
Example fiddle
I have this script that appends a list item if it's not allready there.
What i want it to do also is that if the list item does allready exist that it's font color(css)is set to another color.
var itemName = userName,
userFound = false;
$('#msgUserlist li').each(function () {
if ($(this).text() === itemName) {
userFound = true;
}
});
if (userFound === true) {
////// at this point i want the fontcolor of the allready existing item be set.///
return;
} else
var newNode = document.createElement('li');
newNode.innerHTML = '<a id="switchtoUser" name="' + userName + '" ' + 'onclick="ajaxChat.getHistory' + '(\'' + userName + '\')"' + ' href="javascript:ajaxChat.sendPrivateMessageWrapper(\'/query ' + userName + '\');">' + userName + '</a>';
document.getElementById('msgUserlist').appendChild(newNode);
},
You can do it while looping through the list when you're searching for the user:
// ...snip
$('#msgUserlist li').each(function () {
if ($(this).text() === itemName) {
userFound = true;
$(this).css({
color: "blue" // or whatever
});
return;
}
});
// ...snip
Why don't you do the moment you find it?
if ($(this).text() === itemName) {
userFound = true;
$(this).css('color', 'red'); // Example: change the color to red
}
I think this would be nicely solved by the Jquery function css()
HTML
<ul id=msgUserlist>
<li>Foo</li>
<li>userName</li>
<li>tball rulez</li>
</ul>
Javascript
var itemName = 'userName';
$( document ).ready(function() {
$("#msgUserlist li").each(function() {
if($(this).text() == itemName )
$(this).css("color", "red");
})
})
See working example (simple, but can be expanded with the logic you outlined in your question!): http://jsfiddle.net/PGfgv/601/
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 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?