I am trying to change the class of an element using javascript.
So far I'm doing :
var link = document.getElementById("play_link");
link.className = "play_button";
edit: here is the actual code that replace the classname
In the HTML :
In the Javascript
function changeCurrentTo(id){
activatePlayButton(current_track);
current_track = id;
inactivatePlayButton(current_track);
}
function inactivatePlayButton(id){
document.getElementById("recording_"+id).style.backgroundColor="#F7F2D1";
var link = document.getElementById("play_link_"+id);
link.className="stop_button";
link.onclick = function(){stopPlaying();return false;};
}
function activatePlayButton(id){
document.getElementById("recording_"+id).style.backgroundColor="";
var link = document.getElementById("play_link_"+id);
link.className = "play_button";
var temp = id;
link.onclick = function(){changeCurrentTo(temp);return false;};
}
with
.play_button{
background:url(/images/small_play_button.png) no-repeat;
width:25px;
height:24px;
display:block;
}
the old class is
.stop_button{
background:url(/images/small_stop_button.png) no-repeat;
width:25px;
height:24px;
display:block;
}
The context is a music player. When you click the play button (triangle) it turns into a stop button (square) and replace the function that is called.
The problem is that the class get changed, but in IE6 and 7 the new background (here /images/small_play_button.png) does not display right away. Sometime it doesn't even display at all. Sometime it doesn't display but if I shake the mouse a bit then it displays.
It works perfectly in FF, Chrome, Opera and Safari, so it's an IE bug. I know it's hard to tell right away from only these information, but if I could get some pointers and directions that would be helpful.
Thanks-
You should create one image with a width of 50px and a height of 24px where you have both the play part and the stop part. Then you just ajust the background position like this:
.button
{
background-image: url(/images/small_buttons.png);
bacground-repeat: no-repeat;
width: 25px;
height: 24px;
display: block;
}
.play_button
{
background-position: left top;
}
.stop_button
{
background-position: right top;
}
Then you load "both images" at the same time, and no delay will happen when you change which part of the image gets displayed.
Note that I have made a new CSS class so that you dont need to repeat your CSS for different buttons. You now need to apply two classes on your element. Example:
<div class="button play_button"></div>
You need to use setAttribute in your two funcitons. Try this out:
link.setAttribute((document.all ? "className" : "class"), "play_button");
link.setAttribute((document.all ? "className" : "class"), "stop_button");
Without seeing the exact markup, it's difficult to say, but the disappearing background image issue in IE is probably solved by adding a position: relative; declaration to the .button class and/or to its parent div.
Related
I want to animate a translateX with transition on a click event by adding a class to the div in the js. The transform and transition properties are added in the css file.
var widget = document.getElementById('widget');
widget.style.display = 'block';
document.getElementById('widget2').clientWidth; //comment this line out and it wont work
widget.className = 'visible';
It only works if I query the width property of any element in the dom before adding the class.
here is a jsfiddle:
https://jsfiddle.net/5z9fLsr5/2/
Can anyone explain why this is not working?
That's because you begin your transition and modified the display property "at the same time". Altering display will ruin any transition (citation needed, admittedly), so it would be a good idea to isolate the display changing and actual transiting:
https://jsfiddle.net/5z9fLsr5/3/
document.getElementById('showWidget').addEventListener('click', function(e) {
e.preventDefault();
var widget = document.getElementById('widget');
widget.style.display = 'block';
//document.getElementById('widget2').clientWidth;
window.setTimeout(function(){
widget.className = 'visible';
},0);
});
#widget {
width: 200px;
height: 80px;
background: black;
position: absolute;
transition: transform 500ms;
transform: translateX(-200px);
display: none;
}
#widget.visible {
transform: translateX(200px);
}
#widget2 {
position: absolute;
right: 0
}
show
<div id="widget"></div>
<div id="widget2">xxx</div>
Querying clientWidth seems to "pause" the execution for some time, so it works too.
The issue here is the initial setting of display: none. To the browser's layout manager, this indicates that the layout should be done as if the element in question wasn't even in the DOM (it still is, mind you). This means that the CSS style transform: translateX(-200px); will not be applied.
Doing this:
widget.style.display = 'block';
widget.className = 'visible';
triggers both modifications essentially at the same time - the layout is only re-done after both statements have been executed. Inserting document.getElementById('widget2').clientWidth; (clientHeight works as well) triggers the layout manager to repaint, thus registering transform: translateX(-200px).
As others have mentioned before me, the solution is to either use opacity instead of display (this would be my choice), or to use setTimeout with a delay of 0 (see Why is setTimeout(fn, 0) sometimes useful?).
I'm quite new at this, so I'm sorry if there is an obvious answer.
I'm trying to get a photo on my homepage to change depending on the time of day. I have found tons of information on changing the background of the website, but I want to change an image on my homepage, not the background of the body tag.
I tried following the information here: Changing background based on time of day (using javascript) and in one of the comments someone suggested changing the class instead of the image so that you could change other things besides just the background image.
I tried to follow that advice, but it's not working.
This is what my breakfast-lunch.js file says:
var currentTime = new Date().getHours();
if (6 <= currentTime && currentTime < 12) {
if (document.body) {
document.body.className = "breakfast";
}
}
else {
if (document.body) {
document.body.className = "lunch";
}
}
I have the following css:
.breakfast .home-photo {
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}
.lunch .home-photo {
background-image: url('images/Miriam-Joy-Photo-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}
Before I tried doing this with JS and having it change the class name, I had just this CSS and it worked great, put a photo in the div and looked fine:
.home-photo {
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}
In case it's relevant, my site is a WordPress site.
I'm at a loss. Any help would be greatly appreciated. You can find an example of my (not working properly) website at http://www.canvas.kgshultz.com
Thanks in advance!
FIX will be CSS side, javascript is fine(just checked in console.log)
change this:
.breakfast .home-photo {
}
to this:
.breakfast, .home-photo {
}
Comma (,) is missing between classes.
here is a FIDDLE
After checking your website, I noticed that manually setting the classes breakfast or lunch on your body makes everything work as expected (the images appear respectively for each class name). This leads me to think that your CSS is actually just fine, bringing the problem onto the JS
Your JS may be fine too, but i couldn't find it anywhere on this website you mentionned and the body had no trace of either breakfast or lunch classes. When i tried running it manually, it worked fine too. So please check that this script is actually used.
You should however be careful with what you are doing with those lines:
document.body.className = "breakfast";
and
document.body.className = "lunch";
as they will completely overwrite any existing classes on your body. And since you are using a CMS, your body ends up having plenty of classes.
Please consider using this line instead:
document.body.className += " breakfast";
It will concatenate the string breakfast (mind the leading space so two different classes don't end up sticked to each other) at the end of its current value.
I'm trying to get a links background image to toggle or swap on click for an FAQ accordion expand/contractable div using javascript.
I've gotten things working based on this jsfiddle example (http://jsfiddle.net/QwELf/)
You can see my page working here (http://bit.ly/1hfgcGL)
The problem comes in when you click one of the toggle links a 3rd time. It gets the wrong background image and is then out of sync with how it should look.
Right arrow > for contracted state and downward arrow for expanded state are how they should be but the opposite shows up.
It seems to work just fine in the jsfiddle on the 3rd or more clicks any idea what's going wrong with mine?
Script
<script type="text/javascript">
function changeArrow(element){
var arrow = element;
if(arrow.className == 'background_one'){
arrow.className = 'background_two';
} else {
arrow.className = 'background_one';
}
}
</script>
CSS
.background_one { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevright.gif) center left no-repeat;}
.background_two { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevdown.gif) center left no-repeat;}
HTML
<a class="background_one" data-toggle="collapse" data-target="#demo4" onClick="changeArrow(this)">If I transfer my balance to a new Access 3 Equity Line, what will my interest rate be?</a>
You need to check if it has class, not if it is, as you have several on times. As you use jQuery you can use .hasClass(), .addClass() and removeCLass(). You might also want to look at .toggleClass().
function changeArrow(element) {
var $arrow = $(element);
if ($arrow.hasClass('background_one')) {
$arrow.removeClass('background_one');
$arrow.addClass('background_two');
} else {
$arrow.removeClass('background_two');
$arrow.addClass('background_one');
}
}
That is happening because the className also contains the class collapsed the second time it's clicked.
I used IE's debugger and found this:
Perhaps you could use contains instead of equals, like the following (untested, but should work):
function changeArrow(element){
element.className = (arrow.className.contains('background_one') ?
'background_two' :
'background_one');
}
I have a simple create div script but the background image is not being created which is bugging me.
I tried a few ways but none of them work:
var d = document.createElement('div');
d.id = 'content';
d.className = 'inner';
d.background = "url=('images/h.png')";
document.getElementById('menu').appendChild(d);
I also tried these alternative methods:
d.style.background = "url=('images/h.png')";
d.backgroundImage = "url=('images/h.png')";
d.style.backgroundImage = "url=('images/h.png')";
All 3 don't work but the div does load and the height is deffinately not 0px as there is a paragraph of text in there... the CSS for the div is:
.inner{
text-align:center;
background-repeat: no-repeat;
background-position: top center;
width:100%;
padding-top:30px;
min-height:300px;
}
According to my Chrome debugging tools, the image does not load in the resources, its not even requested to load. If i i had the wrong url I would get resource not found, so I'm wondering if there is a specific way to write it in JS to get this work ?
Why do you have an equals sign in there? Take it out and your code should work:
d.style.backgroundImage = "url('images/h.png')";
OKay first off this is really really similiar to the http://dribbble.com homepage.
In the simplest form possible. I have an image, and i'm trying to CSS it so that when i hover over the image, a DIV shows up with some text and a partially transparent background color.
I have no idea how to do this..
Here is a start. IE6 won't do this, unless you make the parent an anchor (a).
HTML
<div class="container">
<img src="something.jpg" alt="" />
<div>some text</div>
</div>
CSS
.container div {
display: none;
opacity: 0.7; /* look into cross browser transparency */
}
.container:hover div {
display: block;
}
#alex, I think he wants the text to appear over the image, not under it. Two ways to fix this:
Add position:absolute to the div containing the text.
Use a background-image instead of an img tag.
I'd go with 1, as it's better semantically and better for accessibility to use img tags for content-bearing images.
If what you want to obtain is an effect like that on Dribbble page, then you do not need to create a div over an img.
It's sufficient to have 2 versions of the image, one normal and one desaturated and with luminosity increased (or something like that, to give the impression of "transparency").
Now you create a div with the image as background and on mouseover you switch background and add the text.
On mouseout you revert the changes.
EDIT: Of course in practice you will dynamically assign the images name (e.g. with PHP), but that's another story. You may even automagically generate the "transparent" image by using GD libraries I guess.
A little example:
CSS:
.squareImg
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100.jpg");
}
.squareImgOver
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100transp.jpg");
}
HTML
<div id="mydiv" class="squareImg" onmouseover="writeText();"
onmouseout="eraseText()"></div>
JS
function writeText()
{
var d = document.getElementById("mydiv");
d.className = "squareImgOver";
d.innerHTML = "something here!";
}
function eraseText()
{
var d = document.getElementById("mydiv");
d.className = "squareImg";
d.innerHTML = "";
}
</script>
I suggest using jQuery as it's easy to say "mouseover" triggers another thing to show up.