Click here to Skip to main content
15,867,986 members
Please Sign up or sign in to vote.
1.00/5 (3 votes)
See more:
where do I change these steps at in the coding ?
Change the background color of the dashboard to black with an opacity of 0.6.
Change the opacity of the images in the dashboard to 0.5 before the dashboard slides out.
Change the opacity of the dashboard images to 1.0 when each image is moused over.


XML
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">
<title>A Slide In Dashboard</title>

<link href="../_css/site.css" rel="stylesheet">

<style>

#dashboard {

width: 70px;
opacity:0.6;

background-color: rgb(110,138,195);

padding: 20px 20px 0 20px;

position: absolute;

left: -92px;
    z-index: 100;
}

#dashboard img {

margin-bottom: 20px;

order: 1px solid rgb(0,0,0);
}

</style>

<script src="/_js/jquery-1.7.2.min.js">
</script>

<script src="_js/jquery-1.6.3.min.js"></script>




<script src="_js/jquery.easing.1.3.js"></script>





<script src="_js/jquery.color.js"></script>


<script>

$(document).ready(function()
{


$('#dashboard').hover(
 function(){

 $(this).stop().animate({ opacity:1.0}, 800);
 {
   left: '0' ,
   backgroundColor: 'rgb(255,255,255)'




 }
  500,
  'easeInSine'
  ); // end animate
 },


function() {
   $(this).stop().animate({ opacity:0.3 }, 800;
   {
      left: '-92px'
      backgroundColor: 'rgb(110,138,195)'
},
1500,
 'easeOutBounce'
  ); // end animate
    }
  ); // end hover
 }); // end ready

</script>

</head>

<body>

<div class="wrapper">
<div class="header">

<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
</div>

<div id="dashboard">
<img src="../_images/small/blue_h.jpg" width="70" height="70" alt="blue">
<img src="../_images/small/green_h.jpg" width="70" height="70" alt="green">
<img src="../_images/small/orange_h.jpg" width="70" height="70" alt="orange">

<img src="../_images/small/purple_h.jpg" width="70" height="70" alt="purple">
<img src="../_images/small/red_h.jpg" width="70" height="70" alt="red">
<img src="../_images/small/yellow_h.jpg" width="70" height="70" alt="yellow">
</div>

<div class="content">
<div class="main">
<h1>Slide in Dashboard</h1>
<p>Mouse over the blue stripe on the left edge of this page</p>
</div>
</div>
<div class="footer">
<p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
</div>
</div>

</body>

</html>
Posted
Updated 24-Sep-14 6:54am
v2
Comments
Sergey Alexandrovich Kryukov 23-Sep-14 23:32pm    
What should it do?
—SA
j snooze 24-Sep-14 17:36pm    
Read your textbook on how to change these(probably gives exact examples if you open it and look), or learn to search the internet.
[no name] 29-Sep-14 1:53am    
You can change it anywhere!. eg:- in your HTML,CSS or in your Jquery code. What help you need from us?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900