...

View Full Version : Javascript Calling CSS



Dragonb022
09-21-2011, 12:22 PM
Hello, I am new to using Javascript and have some experience with HTML and CSS. I am trying to use Javascript to display an image based on a value. I have the image positions in my .css. Just to make it easy if my var x=0 i want to call the "position 1" div, or else i want to call the "position 2" div. How can i make this possible. I have positions because i have a background image and i want the different pictures to be in a different location on the background based on the value. Below is my code that I have right now. Thanks for the help.

layout.css

#layout {
position: relative;
top:0%;
z-inderx:-1;
}

#date {
position: absolute;
top:5%;
left: 50%;
margin-left: -190px;
z-index: 1;
font-family: calibri;
font-size: 44px;
font-weight: bold;
color:#000000;
}

#location1 {
position: absolute;
top:22%;
left: 50%;
margin-left: -590px;
z-index: 1;
}
#location2 {
position: absolute;
top:28%;
left: 50%;
margin-left: -590px;
z-index: 1;
}

Layout.HTML

<html>
<head>
<Title>Layout</title>
<link rel"stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div id="layout">
<center>
<img border="0" src="background.png" width="1200" height="880" />
</center>
</div>
<div id="date">
24 OCTOBER
</div>

<script type="text/javascript">
var x=0;

if (x==0)
{
<div id="location1">
<img border="0" src="picture1.png" width="70" height="60" />
</div>
}

else
{
<div id="location2">
<img border="0" src="picture2.png" width="70" height="60" />
</div>
}
</script>
</body>
</html>

blaze4218
09-21-2011, 06:26 PM
Quite simply,


<script type="text/javascript">
var x=0;

if (x==0)
{
document.body.innerHTML += '<div id="location1"><img border="0" src="picture1.png" width="70" height="60" /></div>'
}

else
{
document.body.innerHTML += '<div id="location2"><img border="0" src="picture2.png" width="70" height="60" /></div>'
}
</script>

But that's not the most elegant solution. If, for example, you needed to swap out that information several times you would have to modify it like so:
change your css to


.location1 {
display:inline
position: absolute;
top:22%;
left: 50%;
margin-left: -590px;
z-index: 1;
}
.location2 {
display:inline
position: absolute;
top:28%;
left: 50%;
margin-left: -590px;
z-index: 1;
}

so that you can change one element between 2 classes, then


... Begining of document
<div id="date">
24 OCTOBER
</div>

<div id="theLocation" class="" style="display:none"><img border="0" width="70" height="60" src="" /></div>

<script type="text/javascript">
var x=0;
if (x){
document.getElementById('theLocation').className = 'location2';
document.getElementById('theLocation').childNodes[0].src = 'picture2.png';
}
else{
document.getElementById('theLocation').className = 'location1';
document.getElementById('theLocation').childNodes[0].src = 'picture1.png';
}
</script>
</body>
</html>

Dragonb022
09-22-2011, 07:03 AM
Thanks for the help will try it out today.

blaze4218
09-22-2011, 03:31 PM
I just realize that I based my second example on my first example, not on your code. The difference being that in your code there is white-space between the div and img tags and in my first example there isn't. That's important when treating the DOM like an array cross-browser ( i.e. childNodes[0] ) because if you have white-space some browsers will think the white-space is located at [0] and some will think the first object is located at [0]. That is why I make sure to remove white-spaces when I do that.

DaveyErwin
09-22-2011, 03:38 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<style type="text/css">
body{
margin:0;
}

#layout {
position: relative;
top:0%;
}

#date {
position: absolute;
top:5%;
left: 50%;
margin-left: -190px;
z-index: 1;
font-family: calibri;
font-size: 44px;
font-weight: bold;
color:#000000;
}

#location1 {
position: absolute;
top:22%;
left: 50%;
}
#location2 {
position: absolute;
top:28%;
left: 50%;
}

</style>

<script type="text/javascript">

function init(){
var location1 = document.getElementById("location1");
var location1Style = location1.style;
var location2 = document.getElementById("location2");
var location2Style = location2.style;
var x=1;

if (x==0){alert(location1Style.top)
location1Style.top="0px";
}else{
location1Style.top="400px";
}

}


</script>

</head>
<body onload="init()">
<div id="layout">
<img src="Bluehills.jpg" alt="Blue hills" width="1200" height="880">
</div>
<div id="location1">
<img src="Sunset.jpg" alt="Sunset" width="70" height="60">
</div>
<div id="location2">
<img src="Fish.jpg" alt="Fish" width="70" height="60">
</div>


<div id="date">
24 OCTOBER
</div>
</body></html>

blaze4218
09-22-2011, 04:24 PM
@DaveyErwin, I'm not sure I follow. Are we to assume that the images show on page load?

I am trying to use Javascript to display an image based on a value.
and why are you re-modifying the placement? That's what the css is for...

location1Style.top="400px";
Your script treats the two elements as separate entities, and not as dependencies of one another based on the value of x.
I.E.

if (x==0){alert(location1Style.top)
location1Style.top="0px";
}else{
location1Style.top="400px";
}
instead of

if (x==0){alert(location1Style.top)
location1Style.top= parseInt(location1Style.offsetTop,10)+"px"; // Stay the course ;)
}else{
location1Style.top= parseInt(location2Style.offsetTop,10)+"px"; // Change it up a bit...
}//not that this is what I recommend


Also @Dragonb022 I made a correction to my CSS in my earlier post. :(

EDIT:
I'm not correcting you by the way, I'm trying to learn from the wisdom of your process (if I may)

DaveyErwin
09-22-2011, 05:06 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<style type="text/css">
body{
margin:0;
}

#layout {
position: relative;
top:0%;
}

#date {
position: absolute;
top:5%;
left: 50%;
margin-left: -190px;
z-index: 1;
font-family: calibri;
font-size: 44px;
font-weight: bold;
color:#000000;
}

#location1 {
position: absolute;
top:22%;
left: 50%;
margin-left: -590px;
}
#location2 {
position: absolute;
top:28%;
left: 50%;
margin-left: -590px;
}
#btn1{
position: absolute;
}
</style>

<script type="text/javascript">

function init(){
var location1 = document.getElementById("location1");
location1Style = location1.style;
var location2 = document.getElementById("location2");
location2Style = location2.style;
x=0;
}

function toggle(){
if(x){
location1Style.marginLeft="10px";
location2Style.marginLeft="-590px";
x=0;
}else{
location2Style.marginLeft="10px";
location1Style.marginLeft="-590px";
x=1;
}
}

</script>

</head>
<body onload="init()">
<div id="layout">
<input type="button" ID="btn1" value="Toggle" onclick="toggle()">
<img src="Bluehills.jpg" alt="Blue hills" width="1200" height="880">
</div>
<div id="location1">
<img src="Sunset.jpg" alt="Sunset" width="70" height="60">
</div>
<div id="location2">
<img src="Fish.jpg" alt="Fish" width="70" height="60">
</div>


<div id="date">
24 OCTOBER
</div>
</body></html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum