How to change scrollbar css at runtime with javascript? - 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');
}

Related

jQuery/CSS - Whole Div Clickable, on hover activate a tag hover state

I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output
In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}
As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}
For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.

Change the width of a div when clicked

I have no idea what goes wrong with my code but it gives me errors every time I click the blue Chat Here button. The button's supposed to be shorter when the iframe is hidden then when the iframe slides up, the blue button should take up the whole space the same as the iframe as well.
View Demo
Here's the JS I have so far
function showChat() {
jQuery("#blk-collaboration .chatbox").slideToggle("slow",function(){
jQuery("#blk-collaboration #toggle").css("background","#45A1F1");
});
jQuery('#btn-chat').click(function() {
$(this)//this is a button DOM element. wrapping in jQuery object.
.toggleClass('wide'); // removing wide class so button became smaller.
});
}
$(document).ready(function(){
$('.chatbox').hide();
});
I'd greatly appreciate if you could provide me a demo as well. Been working on this code for two days now and I haven't found the right solution yet.
First of all, you forget to put ; on your height property. Another important thing is that you need to change your class position like this:
.button {
background: #45A1F1;
height: 40px;
width: 620px; /*Width of regular button */
}
.wide {
background: #45A1F1;
height: 40px;
width: 300px; !important; /* Width of wide button */
}
You can simplify your code by using this jQuery:
$(document).ready(function(){
$('.chatbox').hide();
$('#btn-chat').click(function() {
$("#blk-collaboration .chatbox").slideToggle("slow",function(){
$("#blk-collaboration #toggle").css("background","#45A1F1");
});
$(this)//this is a button DOM element. wrapping in jQuery object.
.toggleClass('wide'); // removing wide class so button became smaller.
});
});
Check out this Fiddle..

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 keep button active after press with jQuery

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');
});

Creating new definition for my CSS with JavaScript (and mootools if needed). Selectors problem

I'm making some divs clickable with JavaScript. I'd like to use CSS to make the user understand that they are clickable, for example changing the color of links inside a div when mouse enters the div.
In CSS it is:
#menu > div:hover > a {
color: #f00;
}
and it works like a charm.
I'd like the color of the link to change when you mouseover only if JavaScrpt is Enabled, because if it is disabled the div is not clickable, just the link is. I'd like to add this declaration with javascript, something that in mootools should be as simple as:
$$('#menu > div:hover > a').setStyle('color', '#f00');
But that selector doesn't work on mootools. I should go for each div children of #menu and addEvents to it. That seems too much work for me compared to the simple css definition. How can I do that?
Alternative solution (that I don't know how to implement) could be write a with_js_enabled.css to load trough javascript. Is it possible?
Much simpler: set a class on the body element on page load:
document.body.className = "js";
Then modify your CSS;
.js #menu > div:hover > a {
color: #f00;
}
Job done :-)
(Although I assume you're aware that IE 6 doesn't support :hover on anything but links?)
well, since you asked about mootools here...
to change the colours of all A's within the divs of #menu when mouseover is triggered on the div, you could define a class a.red { color: red; }
$("menu").getElements("div").each(function(el) {
el.addEvents({
mouseenter: function() {
this.getElements("a").addClass("red");
},
mouseleave: function() {
this.getElements("a").removeClass("red");
}
});
});
you could also go $("menu").getElements("div").getElements("a") or even $("menu").getElements("a"), then attach the events to the parent (if it happens to be the div) - i guess it really does not matter.

Categories

Resources