removeAttr / addClass issue on IE6 - javascript

This question was asked here but the issue wasn't resolved.
Please see this jsfiddle on IE6 : http://jsfiddle.net/RnsxM/2/
Basically a sprite image (not png fixed) won't update correctly in IE6. The class seems to be applied (and works without javascript) but the combinaison removeAttr + addClass seems broken.
I tried :
!important css statement
use of background-position-x or background-position-y
Does someone know a workaround ?

Not to do with scripting, this is a simple CSS brokenness. Something in IE6's selector engine can't cope with the idea of there being two #id.class rules with the same #id on a single stylesheet. This shorter example demonstrates:
<style type="text/css">
#sprite.pos1 { background: red; }
#sprite.pos2 { background: yellow; }
</style>
<div id="sprite" class="pos2">Hello</div> <!-- White in IE6! -->
You can avoid it by putting the IDs and classes on different elements, or just breaking the stylesheet up into two:
<style type="text/css">
#sprite.pos1 { background: red; }
</style>
<style type="text/css">
#sprite.pos2 { background: yellow; }
</style>
<div id="sprite" class="pos2">Hello</div>

#bobince is right. I'm make a jsfiddle and run it in IEtester and I see that IE6 does not accept the selector:
#sprite.pos1
but accepts:
.pos1
I think basically is that and I recommend you that make an alternative selector for IE6, something like this:
#sprite.pos1 { background-position: -120px 0; }
.pos1 { _background-position: -120px 0; }
#sprite.pos2 { background-position: -240px 0; }
.pos2 { _background-position: -240px 0; }

Related

Style background image with JS not working

Ok, maybe its a stupid question with a little bug, but I'm trying fix this and I can not:
<style>
.pagar a {
width: 200px;
height: 85px;
display: block;
background-image: url('imagens/pagar.jpg');
background-repeat: no-repeat;
}
.pagar a:hover {
background-image: url('imagens/pagar-hover.jpg');
background-repeat: no-repeat; }
</style>
<script>
function clickado() {
document.getElementsByClassName('pagar')[0].style.backgroundImage = 'url("imagens/pagar-clickado.jpg")';
}
</script>
HTML:
<div class="pagar" id="pagar" ></div>
The problem:
The .style.backgroundImage just does not change to "imagens/pagar-clickado.jpg", the the path is correct, I do not get error in console and ('pagar')[0] is also correct too.
I think you wanted to target the a element inside the div.pagar.
You can do something like this:
HTML
<div class="pagar" ></div>
Javascript
function clickado() {
document.getElementById('pagar').style.backgroundImage = 'url("imagens/pagar-clickado.jpg")';
}
You can try add new style class for the event click:
.pagar.click a:hover {
background-image: url('imagens/pagar-clickado.jpg');
background-repeat: no-repeat;
}
And change the function javascript:
function clickado() {
document.getElementById('pagar').classList.add('click');
}
With the new api for working with classes, it is more easier
You could write a much better solution attaching a class with your javascript to the '.pagar' element, for example "clicked". Then you could add a couple of lines to your CSS:
.pagar.clicked a,
.pagar.clicked a:hover {
background-image: url('imagens/pagar-clickado.jpg');
}
This is the javascript of course:
<script>
function clickado() {
document.getElementsByClassName('pagar')[0].className += 'clicked';
}
</script>
I learned that, to keep code simple and mantainable, moving style definition to CSS (removing it from javascript) is usually the best practice to follow.

Change Background when part of it is hovered

i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.
This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});
Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/
Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover
Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up

Using CSS to target a style other than itself

It might only be possible with JavaScript, but I was wondering if it was possible to link one style to another with events like :focus or :hover in CSS alone.
For example, could the class "hitArea" change the "changeArea" background attribute when in focus?
.changeArea { background: yellow; }
.hitArea div:focus { changeArea:changeBG; }
.changeArea changeBG { background: blue; }
I know there is communication between styles when doing CSS animations, like in this working example:
.reveal {
position:absolute;
top:190px;
left:0px;
margin-left:0px;
-webkit-animation-name:reveal;
-webkit-animation-duration:0.1s;
-webkit-animation-fill-mode:backwards;
-webkit-animation-delay:0.2s;
animation-name:reveal;
animation-duration:0.1s;
animation-fill-mode:backwards;
animation-delay:0.2s;
}
#-webkit-keyframes reveal {
0% { left:-900px; -webkit-animation-timing-function:linear; }
99% { left:-900px; -webkit-animation-timing-function:linear; }
100% { left:0px; }
}
So what is the syntax, or is it even possible, for me to communicate between other styles?
If your HTML looks like this:
<div class="hitarea">
<div class="changeArea"></div>
</div>
Then you can target changeArea when hitArea is focused like this:
.hitarea:focus .changeArea {
background-color: red;
}
This will only work when "changeArea" is some child of hitarea.
Read more on CSS Selectors and what you can do with them here: https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors
I don't believe it is possible. You can take a look at http://sass-lang.com/ which allows you to do things like that.
If .changeArea is a child of .hitArea, yes!
.hitArea:focus .changeArea{ /* Styles to apply when .hitarea is hovered */ }
If that's not what you want, I recommend setting it up so that when .hitArea is focused, javascript applies a class to .changeArea that has the style you want to apply.

New <style> element not working in IE

I currently have an HTML page that has a grey BODY background. Now I would like to overwrite this and change this to white using Javascript. I also would like to change some other elements' padding and margin. I try to accomplish this using the innerHTML property.
The thing is everything is working, apart from the newly introduced element, which is not applied in IE7 or IE8. It does work in FireFox however.
<script>
// if using jQuery
$(document).ready(function() {
document.body.innerHTML = '
<style type="text/css">
body {
background-color: #FFFFFF
!important; }
#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums {
padding: 0 !important;
margin: 0 !important;
}
</style>
<div style="text-align: left; background-color: #FFFFFF">' +
document.getElementById('WebPartctl00_SPWebPartManager1_g_7118b319_c5b0_4214_a46d_27131866cde3').innerHTML +
'</div>';`
});
</script>
Can you please advise?
Many thanks!
The <style> tag is only valid inside the <head>, though some browsers may respect it in other places. If you want to change the body background or other properties with a script, use the appropriate .css() method in jQuery.
$(document).ready(function() {
$("body")css("backgroundColor", "#FFFFFF");
$("#todayBirthdays,#weekendBirthdays,#noBirthdays,#todayJubileums,#weekendJubileums").css("margin", "0");
});
Why not just
$('body').css('background-color', '#fff');
$('#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums').css('padding', 0).css('margin', 0);
See the CSS property of jQuery and also the addclass method. This is much easier than what you are doing!
$('body').css( { backgroundColor: 'value1' } );
$('#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums').css( { padding: 'valuex', margin: 'valuey' } );
Although I think you should be using addClass instead.
.myClass { /* Some styling */ }
$('#x, #y, #z').addClass(myClass);
<html>
<head>
<style type="Text/css">
body { background-color: #AAA; }
</stye>
</head>
<body>
<script type="text/javascript">
var style = document.createElement('style');
style.innerHTML = 'body { background-color: #F0F; }';
// add any other styles inside this style element
document.getElementsByTagName('head')[0].appendChild(style);
</script>
</body>
Demo of appending to the <body> and the <head>
If you are stuck on adding in an inline style which is what you asked then use the following:
$("<style type=\"text/css\"> body{background-color: #FFFFFF;} #todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums { padding: 0 !important; margin: 0 !important;} </style>").appendTo("Head");
This will append your styling to the head element of the document. However in reality the better way to go if you are going to use jQuery or javascript is to just change the values of the background.
document.getElementByTagName(body).attribute(background-color)="#FFFFFF";
OR
$("body").css("background-color", "#FFFFF");

How do I set this div's style in the style sheet?

<style type="text/css">
#[':0:adId'] { /* this does not work */
background:red;
}
</style>
<div id=":0:adId">Loading...</div>
Google Maps use this id format. How do i set the style?
You simply need to escape the : with a \:
<style type="text/css">
#\:0\:adId {
background:red;
}
</style>
You could do this with a attribute selector, like so:
div[id=":0:adId"] {
background: red;
}
This will not work in all browsers(you guessed IE), so you might have to include some javascript to do the trick there:
$('div[id=":0:adId"]').css({
background: '#FFF'
});
(Uses jQuery)

Categories