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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    SHow/hiding with multiple divs. Jquery or javascript issue

    he my_click script shows some text in the display div. The visibiity of each spot div is originally set to hidden. I want to change the visibility of the div I click to visible and set everything else to hidden. Jquery seems to handle hiding differently than css.

    How would I set that up?

    Thank you


    Here is the test code. I want to be able to show the hidden div when I hover. Pass the info to a function when I click and show the hidden div when it is clicked until another div is clicked.


    [CODE]
    <html>
    <head>
    <script>
    function my_click(clicked_id)
    {
    //alert("hg");
    var idName = ""+clicked_id;
    //alert(idName);
    //var index = idName.indexOf("-");
    //var roomNumber = idName.substring(index+1);
    //getInfoByRoom(roomNumber);
    }
    </script>

    <style type="text/css">
    body {color:#ccccff;}
    #wrap{
    position:relative;
    z-index:0;
    width:100px;
    height:100px;
    top:0px;
    left:0px;
    background: url(http://vtour.dev4.webenabled.net/images/test/black.jpg)

    }

    #spot1:hover{
    background: url(http://vtour.dev4.webenabled.net/images/test/red.jpg) no-repeat;
    }
    #spot1{
    position:absolute;
    width:50px;
    height:50px;
    top:0px;
    left:0px;
    background: url(http://vtour.dev4.webenabled.net/images/test/red.jpg)
    visibility:hidden;
    }
    #spot2:hover{
    background: url(http://vtour.dev4.webenabled.net/images/test/purple.jpg) no-repeat;
    }
    #spot2{
    position:absolute;
    width:50px;
    height:50px;
    top:0px;
    left:50px;
    background: url(http://vtour.dev4.webenabled.net/images/test/purple.jpg)
    visibility:hidden;
    }
    #spot3:hover{
    background: url(http://vtour.dev4.webenabled.net/images/test/green.jpg) no-repeat;
    }
    #spot3{
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:50px;
    background: url(http://vtour.dev4.webenabled.net/images/test/green.jpg)
    visibility:hidden;
    }
    #spot4:hover{
    background: url(http://vtour.dev4.webenabled.net/images/test/blue.jpg) no-repeat;
    }
    #spot4{
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:0px;
    background: url(http://vtour.dev4.webenabled.net/images/test/blue.jpg)
    visibility:hidden;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div id="spot1" class="sections" onclick="my_click(this.id)"></div>
    <div id="spot2" class="sections" onclick="my_click(this.id)"></div>
    <div id="spot3" class="sections" onclick="my_click(this.id)"></div>
    <div id="spot4" class="sections" onclick="my_click(this.id)"></div>
    <div id="display"></div>
    </div>
    </body> [CODE]

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,313
    Thanks
    23
    Thanked 612 Times in 611 Posts
    The # in the tool bar above the text input box will give you the [code] tags.

    You can not hover over something that is not there. So I got rid of the big black box and made it with the four divs. Of course I had to set their initial color to black and change it on hover (CSS).

    To do a click you do need javascript. I broke that into two sections. One to get rid of any box color that was showing already and two to set the color of the section clicked on.

    Hope this is what you wanted. jquery might be a little simpler with a toggle, but I did it so you could see whats going on.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="">
    function my_click(clicked_id)
    {
    document.getElementById('spot1').style.backgroundColor='';
    document.getElementById('spot2').style.backgroundColor='';
    document.getElementById('spot3').style.backgroundColor='';
    document.getElementById('spot4').style.backgroundColor='';
    
    if(clicked_id == 1) document.getElementById('spot1').style.backgroundColor='red';
    if(clicked_id == 2) document.getElementById('spot2').style.backgroundColor='purple';
    if(clicked_id == 3) document.getElementById('spot3').style.backgroundColor='green';
    if(clicked_id == 4) document.getElementById('spot4').style.backgroundColor='blue';
    }
    </script>
    
    <style type="text/css">
    body {color:#ccccff;}
    #spot1:hover{
    background-color: red;
    }
    #spot1{
    position:absolute;
    width:50px;
    height:50px;
    top:0px;
    left:0px;
    background-color: black;
    }
    #spot2:hover{
    background-color: purple;
    }
    #spot2{
    position:absolute;
    width:50px;
    height:50px;
    top:0px;
    left:50px;
    background-color: black;
    }
    #spot3:hover{
    background-color: green;
    }
    #spot3{
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:50px;
    background-color: black;
    }
    #spot4:hover{
    background-color: blue;
    }
    #spot4{
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:0px;
    background-color: black;
    }
    </style>
    </head>
    <body>
    <div id="spot1" class="sections" onclick="my_click('1')"></div>
    <div id="spot2" class="sections" onclick="my_click('2')"></div>
    <div id="spot3" class="sections" onclick="my_click('3')"></div>
    <div id="spot4" class="sections" onclick="my_click('4')"></div>
    <div id="display">Some Text</div>
    
    </body>
    </html>
    We start with a box colored black and change it's color upon hover or when we click it. The hover is temporary and the click is permanent.
    Last edited by sunfighter; 05-04-2012 at 04:35 PM.

  • Users who have thanked sunfighter for this post:

    baybook (05-07-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you. I will try to make this a function and test for my use.

    I appreciate iy since it seems I was heading in the wrong direction.


    Quote Originally Posted by sunfighter View Post
    The # in the tool bar above the text input box will give you the [code] tags.

    You can not hover over something that is not there. So I got rid of the big black box and made it with the four divs. Of course I had to set their initial color to black and change it on hover (CSS).

    To do a click you do need javascript. I broke that into two sections. One to get rid of any box color that was showing already and two to set the color of the section clicked on.

    Hope this is what you wanted. jquery might be a little simpler with a toggle, but I did it so you could see whats going on.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="">
    function my_click(clicked_id)
    {
    document.getElementById('spot1').style.backgroundColor='';
    document.getElementById('spot2').style.backgroundColor='';
    document.getElementById('spot3').style.backgroundColor='';
    document.getElementById('spot4').style.backgroundColor='';
    
    if(clicked_id == 1) document.getElementById('spot1').style.backgroundColor='red';
    if(clicked_id == 2) document.getElementById('spot2').style.backgroundColor='purple';
    if(clicked_id == 3) document.getElementById('spot3').style.backgroundColor='green';
    if(clicked_id == 4) document.getElementById('spot4').style.backgroundColor='blue';
    }
    </script>
    
    <style type="text/css">
    body {color:#ccccff;}
    #spot1:hover{
    background-color: red;
    }
    #spot1{
    position:absolute;
    width:50px;
    height:50px;
    top:0px;
    left:0px;
    background-color: black;
    }
    #spot2:hover{
    background-color: purple;
    }
    #spot2{
    position:absolute;
    width:50px;
    height:50px;
    top:0px;
    left:50px;
    background-color: black;
    }
    #spot3:hover{
    background-color: green;
    }
    #spot3{
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:50px;
    background-color: black;
    }
    #spot4:hover{
    background-color: blue;
    }
    #spot4{
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:0px;
    background-color: black;
    }
    </style>
    </head>
    <body>
    <div id="spot1" class="sections" onclick="my_click('1')"></div>
    <div id="spot2" class="sections" onclick="my_click('2')"></div>
    <div id="spot3" class="sections" onclick="my_click('3')"></div>
    <div id="spot4" class="sections" onclick="my_click('4')"></div>
    <div id="display">Some Text</div>
    
    </body>
    </html>
    We start with a box colored black and change it's color upon hover or when we click it. The hover is temporary and the click is permanent.

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    One last. I'm wondering if it is possible to use a variable in

    document.getElementById(idName).style.background="url(somevariablename) no-repeat";
    Last edited by baybook; 05-07-2012 at 04:03 AM.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,313
    Thanks
    23
    Thanked 612 Times in 611 Posts
    All you have to do is play with things to see if they work, but this one is complicated.
    Code:
    <script type="text/javascript">
    function new_bkgrnd(){
    	var stuff = 'images/right_border.png';
    	document.getElementById('idName').style.backgroundImage = "url("+stuff+")";
    	document.getElementById('idName').style.backgroundRepeat = "no-repeat";
    }
    </script>
    May I suggest you spend some time here: http://www.w3schools.com/js/default.asp

  • Users who have thanked sunfighter for this post:

    baybook (05-07-2012)


  •  

    Posting Permissions

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