Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

How can I add a set of CSS rules like F.I. opacity:0.94; outline:none; content:""; display:block; position:absolute; top:20px; left:50%; margin:0 0 0 -5px; width:0; height:0; line-height:0px; font-size:0px; to the JavaScript below? The JavaScript shows tooltips, but I need to make them more fancy, so that I can use them on an image map. 

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>  
<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function () {
    $('.1,.2,.3').css({
        position: 'absolute'
    }).hide()
    $('area').each(function (i) {
        $('area').eq(i).bind('mouseover mousemove', function (e) {
            $('.1,.2,.3').eq(i).css({
                top: e.pageY + 10,
                left: e.pageX + 10
            }).show()
        })
        $('area').eq(i).bind('mouseout', function () {
            $('.1,.2,.3').hide()
        })
    })
});//]]>  
</script>
share|improve this question

2 Answers

up vote 0 down vote accepted

You can create a stylesheet using javascript and insert it into the DOM like this:

var styles = '#elem { opacity:0.94; outline:none; content:""; }' // etc
var style = document.createElement( 'style' );

document.getElementsByTagName('head')[0].appendChild( style );

if ( style.styleSheet ) { // IE
    style.styleSheet.cssText = styles;
} else {
    var cssText = document.createTextNode( styles );
    style.appendChild( cssText );
}

Or, you can use the jQuery API to apply the styles to the element’s style attribute. You probably need to convert the styles to an object if you want to benefit the jQuery normalizations:

$('#elem').css({
    opacity: 0.94,
    outline: 'none',
    content:'' // etc
});

http://api.jquery.com/css/

share|improve this answer
This should be avoided in favour od adding the style to your stylesheet statically. Also #elem is bad. – Raynos Jan 23 '12 at 11:30
Agreed, but I interpreted the question as if the OP wanted to use javascript to apply styles. And what is bad with #elem? It’s just an example... – David Jan 23 '12 at 11:34
ids are evil also .css is even worse in terms of performance hits and generally introducing cancer to your code. – Raynos Jan 23 '12 at 11:38
@Raynos that’s just crazy talk. If you have a problem with using IDs that’s fine, but it’s not as if a blog post will change the W3C recommendations for HTML structures. Neither is that discussion relevant for this question at all. – David Jan 23 '12 at 11:43
OK Guys, for the complete noob that I am, I am working at the project and it seems that I can get it working the way that I want. I chose to use David´s jQuery API solution, because I sort of understood what it was about. I already got the layout in the script similar to the one used in the Pure CSS example. Now I will try to get the tooltip arrow done too. THANK YOU VERY MUCH FOR YOUR HELP, ALL OF YOU, and especially David! – Bart Bus Jan 23 '12 at 18:13
up vote 3 down vote

Mixing CSS, JS or HTML together is a common anti-pattern. CSS goes in a styleSheet.

// in stylesheet .css
.new-class {
  opacity:0.94; 
  outline:none; 
  content:""; 
  display:block; 
  position:absolute; 
  top:20px; 
  left:50%; 
  margin:0 0 0 -5px; 
  width:0; 
  height:0; 
  line-height:0px; 
  font-size:0px;
}

JavaScript manipulates classes on elements.

// in javascript 
elem.classList.add("new-class");

As an aside your script is madness

// get each area
$('area').each(function (i) {
    // get them all again
    $('area').eq(i).bind('mouseover mousemove', function (e) {
        $('.1,.2,.3').eq(i).css({
            top: e.pageY + 10,
            left: e.pageX + 10
        }).show()
    })
    // and again. 
    $('area').eq(i).bind('mouseout', function () {
        $('.1,.2,.3').hide()
    })
})

Please cache your jQuery queries.

share|improve this answer
1  
The OP is using jQuery, so you could do $('.foo').css({ // Rules });, althoguh the OP did ask for pure JS. – Bojangles Jan 23 '12 at 11:22
@JamWaffles: No, he just asked how to achieve what he wants, in which case it seems very appropriate to me to show him how this is done properly. – Niklas B. Jan 23 '12 at 11:25
Beware of browser inconsistencies you get when using f.ex opacity in a stylesheet versus using the jQuery normalized properties in their .css() api. – David Jan 23 '12 at 11:50
Good point, jQuery has legacy browser fixes for some CSS properties. This may be of value – Raynos Jan 23 '12 at 11:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.