Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Calling CSS

    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>

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Quite simply,
    Code:
    <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
    Code:
    .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
    Code:
    ... 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>
    Last edited by blaze4218; 09-22-2011 at 04:10 PM. Reason: Forgot something in the css...

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help will try it out today.

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!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>
    Last edited by DaveyErwin; 09-22-2011 at 03:49 PM.

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    @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
    Code:
      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)
    Last edited by blaze4218; 09-22-2011 at 04:47 PM.

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •