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

How can I hide a scrollbar smoothly?

I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance

Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.

I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/

You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}

This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});

Dropdown Hover CSS

Can someonehelp me to fix that dropdown menu that this site has neowin.net?
So far I have this; itbataljonen.com/test/ (Hover over "News")
What I can't figure out, is when i hover over for instance "News" -> "Apple", there should come some news with pictures, and they change if I hover over "Microsoft" and so on.
Could this be done via CSS or HTML?
To download the source files, just go to www.ITbataljonen.com/test and click Download Source in the navigation bar.
Can someone help me? :) (Sorry for my bad english..)

Working Fiddle
As you asked using css. Yes by using css it is possible to hide and show another div. You need to simply write hover event. This applies to "apple" and "microsoft" also.
Here is the css:
#a:hover + #b {
background: #ccc;
visibility: visible;
}
#b{
visibility: hidden;
}

This can be done using hover property in CSS.
Read this question to understand more.
And in your case, the images can be in a <ul id="news_images1"></ul> and you can set css hover property to animate this list of images. Remember, there are multiple ways to solve this issue. You can also checkout Jquery hover.

Javascript/Jquery on event trigger <div class=>

I've got a text/html slideshow with Javascript however upon cycling of new text I also need the script to trigger the :hover class on the menu item corresponding to the content present in the slideshow.
For a visual example please see: http://i.stack.imgur.com/mkyMJ.png
I've uploaded the JS code to http://pastebin.com/Kp4a7VXP for viewing.
Would really appreciate your help on this guys! :)
Thanks so much!
Kind Regards,
Jake

It may not make sense to try to mimic the hover state, so it may be better to have a css class such as .active added to the element you want the hover state for, and then include the css from the hover state in that class.

I'm assuming you have a CSS like
.item{
/* normal appearance */
}
and
.item:hover{
/* appearance when mouse over */
}
but as far as I know, there's no way to trigger the pseudo class :hover via javascript. But you can use a standard class for this like (but for semantics I would name it like .currentSlide or .activeSlide)
.item:hover,
.item.hover{
/* appearance when mouse over
or selected */
}
and then you can add and remove that class using javascript for the current slide element, like:
currentSlideDiv.classList.add("hover");
EDIT:
You can use a function like this, and call highlightCurrentSlideName(currentContentItem); inside NextClick() and PreviousClick()
function highlightCurrentSlideName(slideIndex){
var slideNameList = jQuery('.contentmenu a');
jQuery(slideNameList).removeClass('current'); //unhighlight all slide names
var currentSlide = slideNameList[slideIndex]; //select a slide name by a numeric index
jQuery(currentSlide).addClass('current'); //highlight that element
}
and add a class on your CSS file, and style it whatever you want.
.contentmenu a.current{
color: lightblue;
background-color: gray;
}
PS: I'm not a jQuery programmer I always write pure javascript, just noticed you have it there already.

How to change background color of jQuery UI Dialog?

I am having tough time figure out how to change background color of jQuery UI Dialog.
I've seen many reference how to change/remove title bar but not entire background including those curvy corner.
Here is my try:
http://jsfiddle.net/dEvKb/11/
The problem is .ui-widget-content only applies to square area within the dialog but not including curvy corner.
I found a class .ui-corner-all class hoping it will color the entire background but only half of the dialog is colored. (you can see this in the jsfiddle)
Has anyone done this before?

you can use this way
http://jsfiddle.net/dEvKb/15/
You should set to all class background with use !important.
.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}​

Use the css classes:
ui-dialog
Main container of whole thing
ui-dialog-title
This is where the title actually appears
ui-dialog-titlebar
Area where title of dialog would be if exist
ui-dialog-content
Area where your div is actually loaded
ui-resizable-handle
These divs are used to resize the dialog but are usually invisble according to your setup
ui-dialog-buttonpane
Here is where buttons would go if exist
ui-dialog-buttonset
This is where the buttons actually appear
Also, unlike answer given selected, take note, YOU DON'T HAVE TO USE !important.
If you want a direct call, set everything up and create your dialog. Load the page in Chrome or FF (chrome easier to read). Then simply open the dialog and select the element you want to change. Look at its CSS in your Browser's Developer Tools. You'll be able to see the exact line jqueryui uses to make it's css call. Simply copy that line into your own CSS and ensure it's loaded later and your dialog will get the new overwrite.

If you want to target a specific dialog you can do it this way:
$('#yourDialog').dialog(
{
autoOpen: false,
open: function(e) {
$(e.target).parent().css('background-color','orangered');
}
});

Use this class in css
.ui-dialog .ui-dialog-content {
border: 0;
padding: .5em 1em;
background: #ff0000;
overflow: auto;
zoom: 1;
}

Please be aware that you could also go and make your own custom CSS using this link in jQuery
http://jqueryui.com/themeroller/
jQuery allows us to make a custom-css. Please select the theme you would want from the gallery and hit the edit button, you will be able to change almost everything about the dialog box, as well as the rounded corners.
You then need to download the entire jQuery pack within it you will find css/custom-css folder just put in your css tag and it will be all sorted basically.
The above ways are also true as you will be able to change it but you will have to look for the classes and stuff like that in the CSS well jQuery does that for us in an easy way and it worked for me as well so you can try it too.
What I basically do is create two to three custom style sheets and then load them up and play with them and finally choose one for the website and discard the rest.
I hope this helps...

Short answer
your_stylesheet.css
.ui-widget-content { background: yellow; }
Make sure your stylesheet is included after the JQuery UI stylesheet, e.g.
your_webpage.html
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>
Long answer
To determine which class and style to override, you will need to inspect a tooltip. Show the tooltip:
$("#selector_for_item_with_tooltip").tooltip('open')
Right-click on the tooltip and choose "inspect". Scroll down in the "Styles" tab until you find the attribute you care about (background-color).
You can click on the value and type in a new value to verify that it will have the effect you desire.
To see the format you will need to use to override the format, click on the filename:line # on the upper-right to go to the .css file that defines the attribute (jquery-ui.css:802)
The format will be
.ui-widget-content
{
background: yellow;
}
Your .css file needs to use the same style and be included after this one (see "short answer", above).
People sometimes incorrectly add !important css suffix to bypass this requirement but that causes all kinds of other headaches.