How to keep button active after press with jQuery - javascript

I've seen some very similar questions floating around but haven't been able to find the answer I'm looking for. I've already determined a work-around but would like to know the proper way to perform the task.
What I desire is to click the button and have the active state stay persistent. The next click will toggle the state and that is desired. What I really need to know is how to address the uiButton:active state.
HTML:
<input type='button' class='uiButton' id='testbutton' value='testValue'>
CSS:
.uiButton{
background-color: red;
}
.uiButton:active{
background-color:blue;
}
Javascript/jQuery:
$('.uiButton').click(function() {
$(this).toggleClass(//active state);
});

You should create an active class
CSS
.uiButton:active, .active {
background-color:blue;
}
JS
$('.uiButton').click(function() {
$(this).toggleClass("active");
});

:active is a css pseudo-class. You want .active which is the class that's being added to the element.

You can't trigger a css pseudo selector like :active. The only option I know ist to simulate this
.uiButtonActive {
background-color:blue;
}
Check out the working JSFIDDLE DEMO

You want the button to keep the active class after it's clicked? (not sure if you want to allow to be untoggled (red) again?).. Anyways...
CSS:
.uiButton {
background-color: red;
}
.uiButton-active, .uiButton:hover {
background-color: blue;
}
Then....:
$('.uiButton').unbind('click').click(function() {
$(this).attr('class', 'uiButton-active');
});

Related

How do I remove the class from the navbar button when a new link is selected [Javascript]

I am trying to make an active state on my link when clicked, which remains until another link is clicked. I'd like to have the class removed and transferred to the next link when clicked.
Currently it can be toggled on and off on each link.
// navbar toggle for active state
document.getElementById('navbar__list').addEventListener("click", function(event){
event.target.classList.toggle('funcElemStyle');
});
.funcElemStyle {
background: #333;
}
Instead of using javascript to achive this functionality, you can use CSS to achieve the same effect by using :active.
for example:
/* Selects the link element. */
a:active {
color: #4444AA;
}
you can also use :hover if you want effects when hovered. CSS also allows chaining so if you want an effect to apply when it is hovered over and active, you can use :active:hover
Instead of toggle use .add() and .remove() functions. Run snippet for an example.
document.querySelector("div").addEventListener("click", event=>{
event.target.classList.remove("red")
})
div{
width: 100px;
height: 100px;
background: green;
}
.red{
background: red;
}
<div class="red"></div>

toggleClass does't work, but addClass does

I have imported jQuery and Bootstrap in my HTML page already.
Anyhoo, I wanted to toggle a dropdown menu once I click on the little menu image.
Here's how I hide my menu dropdown:
.menu {
height:150px;
width:155px;
background-color:black;
border-radius:5px;
position:absolute;
top:-10px;
left:100%;
padding-left:0;
}
.menu-active {
position:absolute;
top:35px;
left:60%;
}
To make it responsive, I first tried addClass (menuBtn is the button image and I got):
$('.menuBtn').click(function(){
$('.menu').addClass('menu-active');
})
Which works pretty smooth, though it's always ignored if I added time like addClass('menu-active', 1000), but this is a minor problem! I want to make it toggle, so I tried to change it to toggleClass:
$('.menuBtn').click(function(){
$('.menu').toggleClass('menu-active');
})
Even when I intended to bypass toggle and just use if like:
function menuDropdown(){
$('.menuBtn').on('click', function(){
if($('.menu').hasClass('menu-active')){
$('.menu').removeClass('menu-active');
}else{
$('.menu').addClass('menu-active');
});
}
Both of these don't work, the website just ignored them thoroughly.
I know bootstrap does have a simpler way to do this, I just wanna see what can I write on my own.
Here is one way to solve the problem. Create an ID and use that to refer to your menu instead of trying to use the menu class:
HTML:
<div id="toggler" class="menu">Menu Example</div>
<button type="button" class="menuBtn">Click me</button>
JQuery:
$('.menuBtn').click(function () {
$('#toggler').toggleClass('.menu-active menu');
});
Notice how the above toggles both the .menu-active and the .menu class based off of the #toggler ID.
A working example: http://jsfiddle.net/gratiafide/vubsv2pt/12/

Change CSS properties using Javascript/jquery

I'm trying to adjust my CSS dynamically. Here's my CSS:
.red_button {
background:url(record.png);
padding: 19px 251px;
cursor: pointer;
background-repeat: no-repeat;
}
.red_button:hover {
background:url(record-hover.png);
cursor: pointer;
background-repeat: no-repeat;
}
Which after it is clicked gets changed to something like this:
function recordStarted() {
started = true;
$("#red_button").css("background","url(stop.png)");
$("#red_button").css("background-repeat","no-repeat");
}
But if I try to change the :hover attribute with something like $("#red_button:hover").css("background","url(stop.png)"); it just changes the background (not the hover background). So what is the best way to go about this? I have tried a few different things like with jQuery, but have not been able to get anything to work.
Please don't do this, use a CSS class unless absolutely required. This will separate all your styling into CSS where it belongs and clean up your JS at the same time.
CSS
#red_button.clicked {
/* Applied when the button is clicked and NOT hovered */
}
#red_button.clicked:hover {
/* Applied when the button is clicked and hovered */
background: url(stop.png);
background-repeat: no-repeat;
}
JS
function recordStarted() {
started = true;
$("#red_button").addClass("clicked");
}
I also notice that you are referring to the .red_button class in CSS but the #red_button ID in JS, you probably mean for them both to be IDs?
EDIT: Change the rule to apply when clicked and hovered.
Here is a simple example of the styles in action: http://jsfiddle.net/BMmsD/
try this :
$("#red_button").mouseover(function() {
this.css("background","url(stop.png)");
});
You doing some typo error I guess as you are using "." in css and "#" in jquery.
else use updated code
$(document).ready(function() {
$(".red_button").click(function() {
$(".red_button").css("background","record-hover.png");
});
});
I hope I am clear enough ?
This question/answer ended up answering my question pretty adequately.
I need a little clarification on dynamically setting a hover BG

How to change scrollbar css at runtime with javascript?

Is it possible to change the css (e.g. Color) of a scrollbar at runtime, by clicking in a button?
This just needs to work in Google Chrome, so I'm using:
::-webkit-scrollbar {
width:15px;
}
::-webkit-scrollbar-thumb {
background-color:#999;
border:solid #fff;
}
::-webkit-scrollbar-thumb:hover {
background:#777;
}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;
}
I made this example at jsfiddle: http://jsfiddle.net/wZwJz/
Where I added this button:
<button id="changecss">Change CSS</button>
And a jQuery listener:
$("#changecss").on("click", function(){
// Action goes here
});
I tried this: $("::-webkit-scrollbar").css("backgroundColor", "#F00"); but obviously there's no element called ::-webkit-scrollbar, so it's impossible for jQuery to find it...
You can't select psuedo selectors as mentioned here:
link
Your code will need to do something like this:
$("#changecss").on("click", function(){
var ss = document.styleSheets[0];
ss.insertRule('::-webkit-scrollbar {background-color: red}', 0);
});
Scrollbars seem to be even weirder as seen in this fiddle however:
http://jsfiddle.net/wZwJz/4/
The color doesn't change until you hover over it. I'm kind of interested in learning more about this actually. So I'll try to figure something out. However you should be headed in the right direction now at least.
Edit:
So after a little bit of fiddling and googling, I'm going to say this is impossible as of now. Here's the latest fiddle with some notes: link
After some more hours and many tries I figured out how to solve this.
Here is the jsfiddle: http://jsfiddle.net/promatik/wZwJz/18/
So the trick is to add the class before the specific scrollbar css:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
Then the body, must have one of this classes (In jsfiddle I'm adding the class by javascript because I can't control the html manually):
$("body").addClass("blue");
And the button just need to toggle the .red and .blue classes.
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
There's also a problem with the rendering of the scroll bar in Chrome (at least until v25), that can be overcome by removing scrollbars, and adding it again, here is a function for that:
// Hack to force scroll redraw
function scrollReDraw() {
$('body').css('overflow', 'hidden').height();
$('body').css('overflow', 'auto');
}

Click doesn't always trigger toggle-event

I have sort of an imagemap, which is basically a lot of absolutely positioned divs, which, when clicked, will show or hide a tooltip. Looks pretty great, apart from the fact, that it doesn't always "work". It sounds silly, but some times I will have to click a couple of times to trigger the event. Maybe I'm just not clicking hard enough? ;)
Markup
<div class="container">
<img src="img.png" />
<div class="trigger"
<div class="tooltip">
Awesome tooltip is awesome!
</div>
</div>
</div>
Style
.container {
width:100px;
height:100px;
position:relative; }
img {
position:relative; }
.trigger {
width:50px;
height:50px;
position:absolute;
top:50px;
left:50px; }
.tooltip {
width:100px;
height:20px;
position:absolute;
top:35px;
left:35px;
display:none; }
Javascript
$(".trigger").toggle(function () {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}, function () {
$(this).children(".tooltip").fadeOut(200);
});
The markup and CSS is simplified, but imagine I have several tooltips over the image. When I open one tooltip, all others should be closed. I'm guessing this is where things go wrong, but I can't see the error.
In a similar function on the same site, I've semi-dynamically added some IDs, and hide all that is :not(ID), but I just can't believe that should be necessary.
EDIT:
Behold, a Fiddle: http://jsfiddle.net/CfYRv/
change your javascript to something like
$(".trigger").click(function () {
$(".tooltip").fadeOut();
$(this).children(".tooltip").fadeIn();
});
Gah! Need to finish my homework, but long answer short: toggle doesn't work here because you toggle a submenu but then click another. this hides the first submenu, but it's still considered open (it was only hidden). Thus you need to click it twice to open it... I hacked together an alternative but it's not the best code. It'll at least give you an idea what needs done:
http://jsfiddle.net/uj2A4/
$(".trigger").click(function () {
if($(this).hasClass("active"))
$(".tooltip",this).fadeOut(200);
else {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}
$(this).toggleClass("active");
$(this).siblings(".trigger").removeClass("active");
});
Rather than toggle, let's use click: http://jsfiddle.net/CfYRv/3/
This assigns the "active" tooltip a css class "ttactive". Clicking on "some trigger" will fade out every active tooltip, and activate the one you just clicked. If the one you just clicked was the active one, all it does is fade that one out.
You could probably still use toggle this way:
$(".trigger").click(function () {
$(this).children(".tooltip").stop(true, true).toggle();
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
});

Categories

Resources