var fredclicknumber=0;
$(".fredinbed").click(function(){
if(fredclicknumber==0) {
$(".fredtext").addClass("txtbxin")
$(".fredtext").removeClass("txtbxout")
}
else if (fredclicknumber==1){
$(".fredtext").addClass("txtbxout")
$(".fredtext").removeClass("txtbxin")
}
++fredclicknumber;//
})
if(fredclicknumber > 1){
fredclicknumber=0;
}
Im trying to create a text box that will appear if you click the item, and disappear when clicked again, however with the code shown,It only goes through this process once, what I want to do is somehow loop this code so you can make the text box appear and disappear any number of times.
Since you are just toggling between class , you can use toggleclass instead of creating a variable
$(".fredinbed").click(function() {
$(".fredtext").toggleClass("txtbxout")
})
.txtbxin {
color: green
}
.txtbxout {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='fredinbed'>Toggle</button>
<span class='fredtext txtbxin'>Toggle class </span>
You can use toggleClass jQuery funtion instead of checking and changing variable values.
$(".fredinbed").click(function(){
$(".fredtext").toggleClass("txtbxin");
$(".fredtext").toggleClass("txtbxout");
});
So, if class already assign to element than toggleClass will remove it, otherwise it will add class.
Use .toggleClass('is-show')
https://api.jquery.com/toggleclass/
It will look like this
$(".fredinbed").click(function(){
$(".fredtext").addClass("is-show")
})
Related
I’m trying to make a power off button (actually it is a div), that when I click, it will change its appearance.
It looks like an interruptor, so I want to change the background-color of the page, the color of the icon ‘power off’ and the border-style of the button.
I took this function from another site and it is doing well in adding once a CSS property, but I want it to go on and of always.
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
// this.classList.remove('poweroff');
this.classList.add('on');
} else {
this.classList.remove('on');
}
});
I believe the logic will be something like
x = x - 1
where x need to go turning from 0 to 1 and from 1 to 0, every time I click the button.
<body>
<div class="interruptor">
<div id="io" class="poweroff">
<i class="fa fa-power-off"></i>
</div>
</div>
<script src="https://use.fontawesome.com/ddde7c70b6.js"></script>
<script src="/js/logic.js" charset="utf-8"> </script>
</body>
Since you are checking on the basis of powerOff class you need to toggle it also like this
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
this.classList.remove('poweroff');
this.classList.add('on');
} else {
this.classList.add('poweroff');
this.classList.remove('on');
}
});
Instead of checking if condition and adding and removing classes, use toggle like this
Read Here about toggle
document.getElementById('io').addEventListener('click', function () {
this.classList.toggle('on');
});
You should use toggle instead of add and remove, as :
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
this.classList.toggle('poweroff');
this.classList.toggle('on');
} else {
this.classList.toggle('on');
}
});
This way it will automatically add and remove class on button click.
I have white text in 10 divs that should become blue once the user clicks on them and the total number of "selected" divs is 5. I did it like this:
<div id="sen1" class="sentences">Text1</div>
<div id="sen2" class="sentences">Text2</div>
<div id="sen3" class="sentences">Text1</div>
<div id="sen4" class="sentences">Text2</div>
...
$(".sentences").click(function() {
count++
$(this).css("color", "blue")
selected_true.push($(this).text())
if (count == 5){
$(".sentences").off("click")
//go to next page
}
});
Now I want the text to become white again if a blue text is clicked again and want to decrease the count variable by one. So ideally I want to increase the counter each time a sentence is selected and decrease it again once it is un-selected.
I thought about toggle but how would I incorporate the counter in the toggle method?
Doing it this way might make more sense:
css
.sentences {
color: #fff;
}
.sentences.turnedon {
color: blue;
}
javascript
$(".sentences").click(function() {
if( $(this).hasClass('turnedon') ) {
$(this).removeClass('turnedon');
count-1;
} else {
$(this).addClass('turnedon');
count++;
}
You can do it using 2 classes. If you have 2 styles classes you can use.
$('yourSeletor').toggleClass('yourClassBlue');
See this example: http://api.jquery.com/toggleclass
A better approach would be to add a class to each clicked div and remove it when it is clicked again.
Use the JQuery toggleClass to get it done in one simple line:
$(this).toggleClass('selected');
Then you can count the selected divs like so:
$('.selected').length;
I want to select the right item which is clicked with each, i have wrote this javascript code it doesn't work when i click on the item it does nothing :
jQuery('.kspoiler').each(function() {
jQuery('.kspoiler').click(function() {
if ( !jQuery('.kspoiler-content').is(':visible') ) {
jQuery(this).find('.kspoiler-content').show();
jQuery(this).find('.kspoiler-expand').hide();
jQuery(this).find('.kspoiler-hide').show();
} else {
jQuery(this).find('.kspoiler-content').hide();
jQuery(this).find('.kspoiler-expand').show();
jQuery(this).find('.kspoiler-hide').hide();
}
});
});
My HTML code is the following :
<div class="kspoiler">
<div class="kspoiler-header">
<span class="kspoiler-title">
Warning: Spoiler! </span>
<span class="kspoiler-expand">
[ Click to expand ] </span>
<span style="display:none" class="kspoiler-hide">
[ Click to hide ] </span>
</div>
<div class="kspoiler-wrapper"><div style="display:none" class="kspoiler-content">
my content </div>
</div>
</div>
It can be in the page more than on HTML code showed below, my javascript showed below doesn't work. Do-you have any idea how to make it working ?
Thanks by advance
I think you don't have to use each anymore, since the event listener already gets attached to all the elements with class .kspoiler so you don't have to iterate over them anymore. And also, better use the jQuery alias, $ (unless you have other libraries which might be using the $).
$('.kspoiler').click(function() {
// click event handler
// $(this) refers to the clicked element
});
You can't write !jQuery('.kspoiler-content').is(':visible') - it's select nothing. Also don't need to use $(each) function
$('.kspoiler').click(function() {
if ($(this).is(':hidden')) {
$(this).find('.kspoiler-content').show();
$(this).find('.kspoiler-expand').hide();
$(this).find('.kspoiler-hide').show();
} else {
$(this).find('.kspoiler-content').hide();
$(this).find('.kspoiler-expand').show();
$(this).find('.kspoiler-hide').hide();
}
});
You add a trigger for ALL item, each time they are...
// Loop for all '.kspoiler'
jQuery('.kspoiler').each(function() {
// Add a trigger for all '.kspoiler'
jQuery('.kspoiler').click(function() {
/***/
});
});
Try to remove your useless loop :
// Add a trigger for all
jQuery('.kspoiler').click(function() {
/***/
});
(With a loop you need to do :)
// Loop for all '.kspoiler'
jQuery('.kspoiler').each(function() {
// Add a trigger for this one
jQuery(this).click(function() {
/***/
});
});
And it's the same think for you condition, you need to select the '.kspoiler-content' on the current clicked :
if(jQuery(this).find('.kspoiler-content').is(':hidden') ))
I am trying to hide a div when another one is visible.
I have div 1 and div 2.
If div 2 is showing then div 1 should hide and if div 2 is not showing then div 1 should be visible/unhide.
The function would need to be function/document ready upon page load.
I've tried this but I'm not having any luck, can someone please show me how I can do this.
<script>
window.onLoad(function () {
if ($('.div2').is(":visible")) {
$(".div1").fadeOut(fast);
} else if ($('.div2').is(":hidden")) {
$('.div1').fadeIn(fast);
}
});
</script>
Add a class of hidden to each div, then toggle between that class using jQuery. By the way, window.onload is not a function, it expects a string like window.onload = function() {}. Also, put fast in quotations. I don't know if that's required, but that's how jQuery says to do it.
<div class="div1"></div>
<div class="div2 hidden"></div>
.hidden { display: none }
$(document).ready(function() {
if($(".div1").hasClass("hidden")) {
$(".div2").fadeIn("fast");
}
else if($(".div2").hasClass("hidden")) {
$(".div1").fadeIn("fast");
}
});
You should pass a string to the .fadeIn() and .fadeOut() methods.
Instead of .fadeIn(fast) it'll be .fadeIn("fast"). Same for .fadeOut().
And in general since you're already using jQuery it's better to wrap your code like this:
$(function () {
// Code goes here
});
It looks like you're using jquery selectors (a javascript library). If you're going to use jquery make sure the library is loaded properly by including it in the document header (google makes this easy by hosting it for you <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>)
With jQuery loaded you can do it like this
$(document).ready(function(){
if ($('.div1').is(":visible")) {
$('div2').hide();
}
else if ($('.div2').is(":visible")) {
$('div1').hide();
}
});
WORKING EXAMPLE: http://jsfiddle.net/HVDHC/ - just change display:none from div 2 to div 1 and click 'run' to see it alternate.
You can use setTimeout or setInterval to track if these divs exists
$(function() {
var interval = window.setInterval(function() {
if($('#div2').hasClass('showing')) {
$('#div1').fadeOut('fast');
}
if($('#div2').hasClass('hidden')) {
$('#div1').fadeIn('fast');
}
}, 100);
// when some time u don't want to track it
// window.clearInterval(interval)
})
for better performance
var div1 = $('#div1')
, div2 = $('#div2')
var interval ....
// same as pre code
I would like to be able to look in the first span within a div with a class of t_links and buy and detect if the string Account appears. If it does then I want to set some tracking code in jQuery/JavaScript.
There will always be one span within this div. How can I search the contents for an instance of Account using jQuery?
<div class="t_links buy">
<span><a class="" href="https://www.ayrshireminis.com/account/login/">Account</a></span>
</div>
:contains is what you're looking for:
$(".t_links.buy span:first:contains('Account')")
http://api.jquery.com/contains-selector/
Edit: Added first as #adeneo pointed out. This will ensure that it's the first span that you're looking at.
Try (See Demo)
$(document).ready(function () {
if($('.t_links.buy span').text().indexOf('Account')) {
// code
}
});
Or
$(document).ready(function () {
if($(".t_links.buy span:contains('Account')").length) {
// code
}
});
Span has exact match :
if ($("span:first", ".t_links.buy").filter(function() {
return $(this).text() === 'Account';
}).length) {
//set tracking code
}
Span contains :
if ($("span:first", ".t_links.buy").filter(function() {
return $(this).text().toLowerCase().indexOf('account') != -1;
}).length) {
//set tracking code
}
If there is only one span, you can drop the :first.