We Keep Coding

reactivating :active on stylesheet

So I've got some convoluted code I'm working with and I need a help on a couple of finishing touches.
I have :active set in CSS so that it changes the color of a div element to a brighter color when you click on it. Later on in the code, it changes the div via JavaScript .style.backgroundColor.
I noticed that after this, it no longer honors the :active color. I was wondering if there was a way to restore or revert this, so that it always has the :active brighter color activated when you click it, even though I manually change its bg color through JavaScript.
General example:
CSS:
#div1{ background-color:black; };
#div1:active{ background-color:blue; };
JS:
document.getElementById("div1").style.backgroundColor="red";
The :active in the CSS (when clicked basically)no longer turns blue after the JS turns it red. How would I go about fixing this?

Two ideas come to mind.
Easy but a bit hacky, add !important so you have:
#div1:active{ background-color:blue!important; };
Instead of setting CSS directly via JS, instead add a class, like "bg-blue", then you can add a CSS line like:
.bg-blue:active { background-color:blue; }

Background color sticking in Internet Explorer 11

At first, I was trying to make it so :hover over a div element would change the background color. I did this with just simple CSS. It worked in Chrome and some earlier IE versions I've checked. With IE 11 though, when my mouse leaves the div, the hover background color stayed there.
So then I used jQuery to, on hover, add a class on hover and remove the class on mouseleave (and in the CSS file I associated the hover background color with this class). I used console.log to check that it was in these parts properly, and they were there, but removeClass('class-name') just is not actually removing the class in IE 11 for some reason.
I tried to use setClass and classList.remove/add too and could not remove the added class. Even though console.log showed that I was right there in the code that would do this.
So then I tried to, instead of adding/removing a class, just change the background color directly with hover events in jQuery, like $('div.target').css('background-color', 'color'). This worked the first two times. On hover, it changed to the hover background color, then leaving, it changed to the other color. But then I couldn't hover over the div again to get the hover color to come back.
Any tips or knowledge about quirks that could cause these issues?

The following snippet use JQuery mouseleave and mouseenter to perform a background-color changing. Works with IE 9+.
JSFiddle
HTML
<div class="myDiv myDiv-red">
</div>
CSS
.myDiv
{
height : 30px;
width : 30px;
}
.myDiv-red
{
background-color : red;
}
.myDiv-green
{
background-color : green;
}
JQuery
$(function() {
$(".myDiv").mouseenter(function() {
$(this).removeClass("myDiv-red").addClass("myDiv-green");
});
$(".myDiv").mouseleave(function() {
$(this).removeClass("myDiv-green").addClass("myDiv-red");
});
});

jquery ui resizable weird white patch in the middle of the div

i'm playing around with jquery ui resizable with the default example from jquery ui's site and i noticed a white patch in the middle of my div:
the white patch is only visible if i put a background color to my div such as:
background-color: cyan;
jsfiddle:
http://jsfiddle.net/9aQUz/
anyone knows what's going on?
thanks in advance

In your sample, you've given the div the "ui-widget-content" class.
In jqueryui, this class has the following background defination.
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
In the base theme, this is just a white image.
You shouldn't need to assign jquery classes to elements. Whenever you call the function, it'll happen automatically.

This comes from jQuery's theme. It inserts a 40x100 image (http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png) as the background for the class .ui-widget-content. It's done automatically when you use the resizable widget.
If it really bugs you you can override it by adding background-image: none; to your rule.
jsFiddle example

It works perfectly if you have the css there instead of pulling it in:
Fiddle

Hover Effect using CSS and Javascript/Prototype

I have a 4x4 matrix of tiles. Each tile is basically a div. Now, I want to do the following:
When the mouse pointer is on a particular tile, I have to check perform a check on that tile(using position and stuff, which i have already done). If the tile meets the requirements, then it should have a hover effect.
Note: that the tiles keep changing positions, so at one moment the given tile must have the hover effect, but after rearrangement, it may not have it. And the rearrangement is not complete, ie i dont not reset the whole matrix. It involves only shifting a couple of tiles.
I need to implement this using css class and javascript(prototype, not jquery). I set a hover style for class hoverTile. I added a mouseover to each tile, such that whenever the user's mouse is over a tile, my function is called, which sets the class for the html div element using setAttribute.
Here is a summary:
Before:
<div> ... </div>
After:
<div class="hoverTile"> ... </div>
Style:
.hoverTile: hover{
text-color: red;
}
This does not seem to work, even though the class name appears when i inspect the html page. What is the mistake here?

Look at the demo I set up for you HERE
2 issues:
1) your seudo-selector (:hover) shouldn't have a space after the colon (:).
2) text-color should just be color

Micron and Igo probably answered your question although i'd like to add that you could achieve the same effect by adding
div:hover { color: red;
}
(you might not need the hoverTile class).
As for the border color
border-color:red; should work. [W3schools] So
.hoverTile { border: 5px solid #ff0000; } in your scheme.

Your CSS should be
.hoverTile:hover {
color: red;
}
not text-color (which is not a CSS property). Hope that fixes it.
EDIT: Also, if I understand correctly, you are adding hoverTile class on mouseover? In that case, you wouldn't need the :hover pseudo-class in your CSS at all. Make sure to remove the hoverTile class on mouseout though.

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image

For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.

you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/