Jquery click function only gets called once - javascript

I am trying to use JavaScript to implement a functionality. I have an icon on my html page (div tag). and I want to implement the functionality that when I click on it once it changes to another icon. But the condition it when i click on that changed icon, it should revert back to the original icon.
Now, here is the problem, the icon changes to another icon on first click but it does not revert back to original icon on second click. Actually, its jquery's click function is not getting called when i click it second time.
any ideas?
Following is the code:
$("#volume-slide-img").hide();
$("#volume-icon").click(function() {
if (document.getElementById('volume-slide-img').style.display == 'none') {
$("#volume-slide-img").show();
}
else {
$("#volume-slide-img").hide();
}
});

You can make your code a lot simpler. Try this:
$('#volume-slide-img').hide();
$('#volume-icon').click(function(){
$('#volume-slide-img').toggle();
});

I think what you want to do is toggle the class on #volume-icon when it is clicked.
I mocked it up on jsFiddle. When the icon is clicked, toggleClass will do what it says, toggle a class (if it is applied, unapply it, if not, apply it). The class can be used to set the icon.
I might be missing something though...you say "I have an icon" and you want to do something "when I click on it" but your code sample seems to change something else when the icon is clicked.

#Don Zacharias nailed it, but I found some pretty volume icons so here's a similar approach to his but with background images.
http://jsfiddle.net/pxfunc/xbUQZ/
HTML:
<div id="volume-icon" title="click to toggle!"></div>
CSS:
#volume-icon {
width:256px;
height:256px;
cursor:pointer;
background-image:url('http://icons.iconarchive.com/icons/icons-land/vista-multimedia/256/Volume-Hot-icon.png')
}
#volume-icon.mute {
background-image:url('http://lh3.ggpht.com/_uU5cLRayUdQ/S48MYDVnjlI/AAAAAAAADik/GWYRNg06mhE/Volume-Normal-Red-icon.png');
}
jQuery:
$('#volume-icon').click(function() {
$(this).toggleClass('mute');
});

Related

Toggling Font Awesome Icons

Right now, the button has an arrow icon. When onclick is triggered, it switches to the "x" icon, but then I click it again, nothing happens. Can anybody tell me what I can do to get it back to the original (arrows) icon when I click on it again? Below is my code.
<button class="button" data-toggle="tooltip" title="Like"><i class="fa fa-arrows-alt"></i></button>
<script>
$("button").click(function(){
$(this).find("i").removeClass("fa fa-arrows-alt").addClass("fa fa-close");
});
</script>
Looks like your click function is only handling one-way toggle. Perhaps check for the current state first and then process the state-change based on that?
<script>
$("button").click(function(){
// First, check for current state
if ($(this).find("i").hasClass("fa-arrows-alt")) {
// Handle "has class fa-arrows-alt"
$(this).find("i").removeClass("fa-arrows-alt").addClass("fa-close");
} else {
// Handle "does not have class fa-arrows-alt"
$(this).find("i").removeClass("fa-close").addClass("fa-arrows-alt");
}
});
</script>
Your action is always "remove arrow class, add close icon class". You should detect the current class of the button, and then apply a specific action according to this. For example, you can modify your code like this:
$("button").click(function() {
if ($(this).find("i").hasClass("fa-arrows-alt")) {
$(this).find("i").removeClass("fa-arrows-alt").addClass("fa-close");
} else if ($(this).find("i").hasClass("fa-close")) {
$(this).find("i").removeClass("fa-close").addClass("fa-arrows-alt");
}
});

How to give a button (class) active hover-status on document ready?

On a website I have 4 clickable buttons (service buttons) on the homepage. They all respond individually to a css hover effect (background-color change) when the user hovers over one of the buttons. So far so god, this is what i want.
CSS:
.service-button:hover {
background: #F7AA06;
color: #1F213F;
}
The FIRST of the four buttons is the most important service. Therefore I want to highlight this button by having it "active" with the hover effect (background-color) when a user first enters the page. If the user hovers over one of the other buttons, the first button should "lose" it's hover-status and return to standard bg-color (white).
My temporary solution so far is to give the first button it's highlighted color with the nth:first-child selector from css. This kind a works as it sets the correct background-color to the first button. The problem is that the button does not change back to standard color if users hovers over on of the other buttons.
Is it possible to accomplish this from just css, or do I need to use jQuery?
https://imgur.com/Jutg3RS
NEW fix! I actually got it working with some jQuery. Guess it's not the cleanest solution, but it does the job! Could/should it be resolved in a better way..?
jQuery(document).ready(function($){
// Add hover class to first button
$('.service-button.totalentreprise').addClass('bg-orange');
$('.service-button').hover(
function() {
// Remove hover class from first button
$('.service-button.totalentreprise').removeClass('bg-orange');
// Add hover class to any button
$( this ).addClass('bg-orange');
}, function() {
$( this ).removeClass('bg-orange');
}
);
});
try these
window.addEventListener('load', function(){
$(".service-button").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"#F7AA06":"transparent")
});
})

How create a transparent layer without restrict 'click', 'hover' and 'select' events?

In current Github website, there is a toggle ability to show/hide the profile menu. on the following screen-shot, there is a transparent layer with full width and height behind the menu and if for example I click on "Explore", my first click will trigger the onclick event on the transparent layer and it only will hide the menu and transparent layer itself. Then I need to click again on "Explore" to make action.
but in current stackoverflow website, there is similar toggle ability without above limitation and when the menu is open, I can act like a normal webpage without any limitation to Select, Hover and click.
In both of websites when you click around, the menu will close, but I could not find any transparent layer in stackoverflow and I am not sure these are using the similar way.
As I know there is several ways to solve these problems:
Simulate a click by using x,y
It is not the correct answer, because in this way, it is not possible to use hover like what stackoverflow is doing now (you can hover over any objects behind the menu).
Make an element “invisible” to clicks
It is not the correct answer, because in this way, it is not possible to use onclick event to hide menu itself.
JavaScript to prevent Default action
It is not the correct answer, because in this way, it is not possible to use hover and onclick events at the same time. then it is not possible to make it like stackoverflow.
Can you please guide me how stackoverflow is passing the Github limitation?
Just don't create a transparent overlay at all.
Instead listen for the click event on document and close the menu if it's fired.
document.querySelector('button').addEventListener('click', e => {
console.log('button clicked')
})
document.addEventListener('click', e => {
console.log('click reached document, close menu')
})
<div>
<button>Click me</button>
</div>
First you need to toggle menu using classes like this:
when it is close:
<div class="menu">...</div>
when it is open:
<div class="menu open">...</div>
and in CSS:
.menu {
display: none;
}
.menu.open {
display: block;
}
then you need to add an onclick event on the document to find all open menus and remove open class of them.
<script type="text/javascript" language="JavaScript">
document.onclick = closeAllOpenMenus;
function closeAllOpenMenus() {
const all_open_menus = document.querySelectorAll(".menu.open");
[].forEach.call(all_open_menus, function(el) {
//remove 'open' class
el.classList.remove("open");
});
}
</script>
you need to work more on the above function to prevent closeAllOpenMenus when the user is clicked over the menu itself.

this in onclick with JQuery

I have 25 buttons like this:
<button class="Bouton_Clavier" onclick="Click_Bouton('Bouton-Name')">
Bouton-Name</button>
I want to change button style when i click on (only fort the clicked button).
So, the function is :
function Click_Bouton(Nom)
{
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
}
But it doesn't work.
If I change the function with :
function Click_Bouton(Nom)
{
$('button').click(function(){ $('button').removeClass('Bouton_Clavier')
.addClass('Bouton_Clavier_Select');
});
}
All buttons style are changed and its work after 2 clicks.
But I need to change only the style of clicked button.
Either manually set a context as Paul Draper did in his answer or (better) don't use inline event handlers:
$(".Bouton_Clavier").click(function () {
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});
It's because this is not set to what you think it should be.
<button class="Bouton_Clavier" onclick="Click_Bouton.call(this, 'Bouton-Name')"> Bouton-Name </button>
Also, I feel obligated to recommend not using onclick=, and instead using $.click.
Oh, and you don't seem to be doing anything with your argument Dom.
Change the button css after click event fired like this,
$(".Bouton_Clavier").click(function(){
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});
And in the last part of your code you mention $('button') that points to all buttons within your document. And that's why all button styles are changed on button click.
Demo

Click to reveal and hide menu

I asked a question yesterday about a click to reveal menu which got answered perfectly. However, I was wondering how I can make the div fade in when the text "project info" is clicked and then fade out again when "project info is clicked again". I know this is probably a very basic thing but i'm extremely new to javascript and jquery and would appreciate some help greatly. The html code is as follows:
<div class="descinner">
Project info
</div>
and the Javascript:
$('.showDesc').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
$('body').click(function() { $('.showDesc').next().hide(); });
Have you tried the fadeToggle() method?
Like this:
$('.showDesc').click(function() {
$('.info').fadeToggle();
});
This will show the .info div on the first click of .showDesc, and hide it on the second (and so on)..
write a custom function and call it onClick...inside that function you can put your fadeIn and fadeOut...and you especially can't do it with .toggle().
Check out the FadeIn() function. Use it on the element you want to fade in.
you have jQuery animation functions: fadeIn and fadeOut. you can also use show and hide functions. just set the desired speed parameter
$('your_div').fadeIn(100);
$('your_div').fadeOut(100);

Categories