Develop Reference

Hide/show scrollbar from chrome extension

I'm trying to hide\show scrollbars on pages via my Chrome Extension.
I hide it by inserting this CSS from background.js file:
::-webkit-scrollbar {
display: none !important;
}
::-webkit-scrollbar-button {
display: none !important;
}
and I try to show it again by inserting this CSS from background.js file:
::-webkit-scrollbar {
display: block !important;
}
::-webkit-scrollbar-button {
display: block !important;
}
Hiding works, but I'm unable to restore it afterwards. When I inspect the page through Chrome DevTools, it shows as if both of the inserted CSS are active at same time.
Is there any other way to do this?
Important thing to note is that this should work on any page, so I'm able to remove and restore scrollbars from any page CSS is inserted to.
I'm open for any other way, JavaScript too.

I accomplished this through content-script.
This code removes scrollbars and still allows you to scroll with mousewheel or keyboard buttons:
var styleElement = document.createElement('style');
styleElement.id = 'remove-scroll-style';
styleElement.textContent =
'html::-webkit-scrollbar{display:none !important}' +
'body::-webkit-scrollbar{display:none !important}';
document.getElementsByTagName('body')[0].appendChild(styleElement);
And this code restores scrollbars:
$('#remove-scroll-style').remove();

This example may give you a hint on how to do it:
https://jsfiddle.net/PVZB8/139/
It's using CSS and JavaScript to achieve the result, but it seems like you can achieve that by using only CSS (example given on jsfiddle):
div.mousescroll {
overflow: hidden;
}
div.mousescroll:hover {
overflow-y: scroll;
}

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

Hide a specific H2 id using javascript or CSS

We're looking into Zendesk for our support site but it's not very customizable. I'm trying to remove specific text from the page using their widgets function (which can be created in javascript or css).
I'm trying to hide the following h2 tag while displaying the page:
<h2 id="search_box">Knowledge Base & Forums</h2>
I've tried the following CSS:
.search_box {
display: none;
}
But it doesn't seem to work. I'm not great with either CSS or javascript and I also don't know exactly when these widgets run, but I assume I'm doing something wrong in terms of accessing the element on the page.
I've been able to hide the text using the following combination of Javascript and CSS codes, but it doesn't do what I need because it will hide any part of the page that has the text in it:
Javascript:
$j('h2:contains(Knowledge Base & Forums)').addClass('forumtitle');
CSS:
.forumtitle {
display: none;
}
Thanks for any help!

#search_box {
display: none;
}
. is for classes, # is for ids

Try using in your CSS:
#search_box {
display: none;
}

Your CSS is off - to hide an id `search_box your CSS would be
#search_box {
display: none;
}
Note the # for id - . is for classes.

If you wish to use jQuery you can try this...
$(document).ready(function(){
$("h2").each(function(){
if(trim($(this).html()) == "Knowledge Base & Forums") {
$(this).hide();
}
});
});

Try document.getElementByID("search_box").style.visibility = 'hidden'; in Javascript

How can I have my links display a little transparent box on a:hover?

I'd like to display a little tooltip similar to this:
That little black box appears when I put my mouse over it. How can I achieve this? Is it using jQuery or MooTools or what?
Thanks from this beginnig web designer!

I think you can do it with CSS, no need for Javascript.
The black box (the tooltip) can be an absolutely positioned child with display: none by default, and on :hover you can show it.
Here is a little demo.
Example CSS:
.tooltipped { position: relative; }
.tooltip { display: none; position: absolute; width: 100%; left: 0; top: 35px; }
.tooltipped:hover .tooltip { display: block; }
for the HTML (which remains readable without CSS!):
<div class="tooltipped">3 <span class="tooltip">acorns remaining</span></div>​
This method will work in every modern browser and IE >= 7. IE6 only supports the :hover selector on links, so you need to use an a element if you want to support it (or find a different workaround).

This is done through JavaScript. I would recommend using the jQuery framework, as there are a load of different jQuery Tool Tip plug-ins ready for you to use.
For example.

Definitely looks like Tipsy, a jQuery plugin I used.

With jQuery, assuming you had a div properly formatted like thus: (notice this is an extremely simple example. I'm not defining the classes to properly format the elements or anything like that)
3
and
<div class="onmouseoverpopup parent">
<div class="onmouesoverpopup arrowontopmiddle"></div>
<div class="onmouesoverpopup text">Acorns remaining</div>
</div>
You might do something like this
$(document).ready( function() {
$(".acornsremaining").hover( function() {
$(".onmouseoverpopup.parent").show();
}, function() {
$(".onmouseoverpopup.parent").hide();
});
});

Applying css with javascript overrides hover link style?

I have some JavaScript which is changing an image correctly but once it has been called, my a:hover CSS code no longer works.
Looking with firebug the following JavaScript creates this css rule:
element.style {
background-image:url(/content/images/side_partnershipsOver.png);
}
document.getElementById('partnerships').style.backgroundImage = "url(/content/images/side_partnershipsOver.png)";
How can I apply the JavaScript and not have the a:hover code overriden by the element.style rule?

As far as I know setting the element.style.backgroundImage is essentially the same as using an inline style.
<style type="text/css">
a { background: blue; }
a:hover { background:green; }
</style>
<a href="#" style="background:red;">link<a>
Unfortunately the inline style always wins. In the above sample the link will always be red. As Daniel White said jQuery would be very useful here. Although you may be able to get around this issue in two ways.
One, Generate the style using javascript to write a style tag
document.write("<style type='text/css'>#partnerships { background-image:url(/content/images/side_partnershipsOver.png);}</style>");
or two, Manually setup mouseenter/mouseleave events to handle your hover style
Update
or three, as pointed out by KevinUK, use the !important css tag to override the inline style set.
<style type="text/css">
a { background: blue; }
a:hover { background:green !important; }
</style>
<a href="#" style="background:red;">link<a>

I was also frustrated about this CSS js style gap so I build
methods to apply style from js with a CSS string
elm.jCSS(cssText);elm.jCSSPseudo(cssText,pseudoElt)