2 Replies - 319 Views - Last Post: 29 October 2013 - 12:06 AM Rate Topic: -----

#1 Desertt  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 88
  • Joined: 27-October 13

Button opacity ?

Posted 27 October 2013 - 09:35 AM

I am trying to change the opacity for a button on click and when click on another button the first button opacity get back to the initial one and the second opacity change i am using this
 
<!DOCTYPE>
<html>
<head>
<script type="text/javascript">
$(document).ready(function () {    
    $('[id*=txt]').hide();
    $('[id*=hd]').hide();                    
    $('[id*=home]').show();
    $('#btnhome').css({'opacity':"0.4"});    
    
    $('.button').click(function (){
        $('[id*=txt]').hide();
        $('[id*=hd]').hide();
        $('.button').css({'opacity':'1'});
        $(this).css({'opacity':'0.4'});
   });            
    
    $('#btnhome').click(function () {     
        $('[id*=home]').show();                
    });     
    
    $('#btnabout').click(function () {               
        $('[id*=about]').show();          
    });       
      
    $('#btncontact').click(function () {        
        $('[id*=contact]').show();     
    });       
}); 
</script> 
<style>
@charset "utf-8";
/* CSS Document */

/* MAIN STYLES */
html {
    background: url(images/background.png) repeat;
}

#header {
    background-image: url(images/navbar588new.png);
    height: 48px;
    width: 588px;
    margin: 2em auto;    
    }
    
.button:hover { 
    font-size:17px !important;
}

.button:active {
    position:relative;
    top: 2px;
    left:2px;
}
    
#btnhome {    
    margin-left: 121px;    
    width: 84px;
    height: 46px;       
    background-color:#000;
    border: none;
    color: white;    
    font-size:14px;
    font-weight:700;
}

#btnabout {
    margin-left: -2px;    
    width: 84px;
    height: 46px;
    background-color:#000;
    border: none;
    color: white;    
    font-size:14px;
    font-weight:700;
}

#btncontact {
    margin-left: -2px;    
    width: 84px;
    height: 46px;
    background-color:#000;
    border: none;
    color: white;    
    font-size:14px;
    font-weight:700;
}

#container {
    width: 588px;
    height: 617px;
    background-image:url(images/maintext60.png);
    margin: auto;    
}

#hdhome {
    text-decoration:underline;
    position:relative;
    left:12px;
    top:2px;
    font-size:21px;
}

#hdabout {
    text-decoration:underline;
    position:relative;
    left:18px;
    top:2px;
    font-size:21px;
}

#hdcontact {
    text-decoration:underline;
    position:relative;
    left:10px;
    top:2px;
    font-size:21px;
}
    
#txthome {
    font-size:24px;
    margin: 4em;
    margin-top:50px;
}

#txtabout {
    font-size:20px;
    margin: 2em;
    margin-top:27px;
}

#txtcontact {
    margin: 4em;
    font-size: 25px;
}
</style>
<title></title>
</head>
<body>
    <div id="header">           
            <button class="button" id="btnhome">Home</button>          
            <button class="button" id="btnabout">About</button>
            <button class="button" id="btncontact">Contact</button>                       
            </div>
            
    <div id="container">            
            <h1 id="hdhome">Hi there</h3>
            <h1 id="hdabout">About</h3>
            <h1 id="hdcontact">Contact</h3>            
                        
     <div id="maintext">       
        <p id="txthome">HOME</p>
        <p id="txtabout">ABOUT</p>
        <p id="txtcontact">CONTACT</p>        
    </div>           
</body>
</html>


Where is the error ?

Is This A Good Question/Topic? 0
  • +

Replies To: Button opacity ?

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3360
  • View blog
  • Posts: 11,397
  • Joined: 12-December 12

Re: Button opacity ?

Posted 27 October 2013 - 10:48 AM

The first thing that jumps out is that you haven't attached the jQuery library. The second is that this is in the wrong forum - there is a jQuery forum ;)

For example:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

This post has been edited by andrewsw: 27 October 2013 - 10:51 AM

Was This Post Helpful? 0
  • +
  • -

#3 Desertt  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 88
  • Joined: 27-October 13

Re: Button opacity ?

Posted 29 October 2013 - 12:06 AM

Thank you
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1