Hey I am making a website and have recently seen some problems With css. My header div Works great maybe because I have styled it With Width 100%. But my main and side div seems to have some problems with the size. I have a Width of 1288px on my main id and when I checked it it is way less. I want my side div to be 30% of the Width of the page and the main div to be 70% of the page. How can I do this?
Here is my php code:
<?php
$tjener = "localhost";
$brukernavn = "root";
$passord = "";
$database = "searchengine";
$connection = mysqli_connect($tjener,$brukernavn,$passord,$database) or die("could not connect");
$connection->set_charset("utf8");
$output = "";
//collect
if(isset($_POST["q"])) {
$searchq = $_POST["q"];
$searchq = mysqli_real_escape_string($connection,$searchq);
$searchq = htmlspecialchars($searchq);
$query = mysqli_query($connection,"SELECT * FROM products WHERE vareNavn LIKE '%$searchq%' OR desci LIKE '%$searchq%'");
$count = mysqli_num_rows($query);
if($count == 0) {
$output = "There was no search results.";
} else {
while ($row = mysqli_fetch_array($query)) {
$id = $row['vareNr'];
$vareNavn = $row['vareNavn'];
$desci = $row['desci'];
$output .= "<h1>" . $vareNavn . "</h1><p> " . $desci . "</p><br/>";
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script>
function active(){
var Search = document.getElementById("search");
if(search.value == "Search..."){
search.value = "";
search.placeholder = "Search...";
}
}
function inactive(){
var Search = document.getElementById("search");
if(search.value == ""){
search.value = "Search...";
search.placeholder = "";
}
}
</script>
</head>
<body>
<div id="header">
<div id ="searchBar">
<form action="main.php" method= "post">
<input type="text" id="search" name="q" placeholder="" value="Search..." autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="searchButton" value="Search"/>
</form>
</div>
</div>
<div id="main">
<div id="oppstart">
<h1>Newly commenced webstore</h1>
</div>
<div id="klokkeMer">
<h2>Watches</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<?php
print($output);
?>
</div>
<div id="side">
</div>
</body>
</html>
and here is my css code:
body {
font-family: arial;
}
h1 {
margin: 20px 0px 0px 0px;
padding:0;
}
p {
margin: 0;
padding:0;
}
#header {
width:100%; /* Full lengde*/
background-color:#1F2A40;
height:100px; /* 150px */
position:absolute;
top:0px;
left:0px;
}
#search {
border: 1px solid #1F2A40;
border-right:none;
font-size:16px;
padding:10px;
outline:none;
width:700px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
#searchButton {
border: 1px solid #1F2A40;
padding:10px;
font-size:16px;
background-color:#ff9933;
font-weight:bold;
color:#1F2A40;
cursor:pointer;
outline:none;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
#searchButton:hover {
background-color:#F5870A;
}
#main {
position:absolute;
top:100px;
background-color:red; // change to white when website is done
width:1288px;
height:800px;
left:300px;
}
#side {
position:absolute;
top:100px;
background-color:orange; // change to white when website is done
width:300px;
left:0px;
height:800px;
}
#searchBar {
position:absolute;
width:800px;
top:8px;
left:250px;
/* border:1px solid red; */
}
#div1 {
position:absolute;
width:100px;
top:200px;
left:300px;
border:1px solid black;
height:100px;
background-color:purple;
}
#div2 {
}
#div3 {
}
Try using percentages for your main and side widths instead of pixels
#side{
width: 30%;
}
#main{
width: 70%;
}
So what I would do is to scrap most of this css, and use Bootstrap
This way you get a clean and easy set of tools to use troughout your webpage.
You include the following in your header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
After this, then you use this code:
<div id="side" class="col-md-3">
Sidebar
</div>
<div id="main" class="col-md-9 col-md-offset-3">
<div id="oppstart">
<h1>Newly commenced webstore</h1>
</div>
<div id="klokkeMer">
<h2>Watches</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<?php
print($output);
?>
</div>
See it in action here on jsfiddle
It might not have your exact dimentions, however this gives you a structered set of rules for your CSS you can use troughout your website
Related
I want to autoplay the video when it comes in the viewport and should stop playing the video when it goes out of the viewport with ionic 3, can anyone please suggest how to do that?
Yes you can do it.
$(window).scroll(function(){
var trackerOffset = $('.tracker').offset().top; // offset in document
var trackerPosition = trackerOffset - $(window).scrollTop(); // offset in viewport
$('.debug-status').html('video status: ' + checkTrackerPos(trackerPosition));
}).trigger('scroll');
function checkTrackerPos(trackerPosition){
var triggerTop = $('.trigger-top').position();
var triggerBottom = $('.trigger-bottom').position();
if (trackerPosition >= triggerTop.top && trackerPosition <= triggerBottom.top ) {
return 'playing!';
}
return 'paused';
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
text-align:center;
font-family:Arial,sans-serif;
}
.debug {
font-size:20px;
position:fixed;
left:50%;
top:50%;
width:30vw;
margin-left:-15vw;
margin-top:-35px;
padding:15px;
background:rgba(0,0,0,0.05);
}
.viewport {
position:relative;
width:100vw;
height:200vh;
border:2px dashed red;
display:flex;
justify-content:center;
flex-direction:column
}
/* Position these two as you please */
.trigger-top,
.trigger-bottom {
width:100%;
text-indent:-50%;
position:fixed;
top:25%;
border-top:1px dotted #000;
}
.trigger-bottom {
top:auto;
bottom:25%;
}
.video-wrapper {
position:relative;
color:blue;
border:1px solid blue;
width:400px;
height:300px;
margin:0 auto;
}
.video-wrapper .tracker {
position:absolute;
top:50%;
left:50%;
width:1px;
height:1px;
padding:1px; /* these 3 attributes are here just for the show */
border:1px solid red;
color:red;
line-height:1px;
text-indent:5px; /* again, just for the show */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="viewport">
<div class="debug">
<div class="debug-trigger"></div>
<div class="debug-pos"></div>
<div class="debug-status"></div>
</div>
<div class="trigger-top">top trigger</div>
<div class="trigger-bottom">bottom trigger</div>
<div class="video-wrapper">
video
<div class="tracker">tracker</div>
</div>
</div>
Refer this answer: https://stackoverflow.com/a/50479802/10971575
Could just call a JS -function when you scroll.
<div onscroll="myFunction()">
And the JS-function would roughly look like this:
if (end of viewport > document.body.scrollTop > start of viewpoint || end of viewport > document.documentElement.scrollTop > start of viewpoint) {
vid.play();
}else{vid.pause();}
this is my code , i put the link below :
LINK
this output for this source below :
i have link but it's not function when on click , i put that in div notification you can check full of source below , maybe the problem is in the css configure , but i cant figure out of my problem , can you fix it ?
<html>
<head>
<title>Create a Facebook like Notifications Window using jQuery and CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
ul {
display:block;
/*background:#45619D;*/
list-style:none;
margin:0;
margin-left:500px;
padding:12px 10px;
height:21px;
width : 45px;
}
ul li {
float:left;
font:13px helvetica;
font-weight:bold;
margin:3px 0;
}
#noti_Container {
position:relative;
}
/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#noti_Button { /*pengaturan lingkaran*/
width:22px;
height:22px;
line-height:22px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
background:red;
margin:-3px 10px 0 10px;
cursor:pointer;
}
#noti_buttons{
cursor:pointer;
}
/* THE POPULAR RED NOTIFICATIONS COUNTER. */
#noti_Counter { /*pengaturan hitung jumlah notif yang ada*/
display:block;
position:absolute;
background:#E1141E;
color:#FFF;
font-size:12px;
font-weight:normal;
padding:1px 3px;
margin:-8px 0 0 25px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
z-index:1;
}
/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#notifications { /*pengaturan kotak notification*/
display:none;
width:400px;
position:absolute;
top:42px;
left:-350px;
background:#FFF;
border:solid 1px rgba(100, 100, 100, .20);
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
z-index: 1;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before { /*pengaturan warna arrow*/
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #e8e8e8;
margin-top:-20px;
margin-left:355px;
}
h3 {
display:block;
color:#333;
background:#FFF;
font-weight:bold;
font-size:13px;
padding:8px;
margin:0;
border-bottom:solid 1px rgba(100, 100, 100, .30);
}
.seeAll {
background:#F6F7F8;
padding:8px;
font-size:12px;
font-weight:bold;
border-top:solid 1px rgba(100, 100, 100, .30);
text-align:center;
}
.seeAll a {
color:#3b5998;
}
.seeAll a:hover {
background:#F6F7F8;
color:#3b5998;
text-decoration:underline;
}
</style>
</head>
<body style="margin:0;padding:0;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="noti_Container">
<div id="noti_Counter"></div> <!--SHOW NOTIFICATIONS COUNT.-->
<!--A CIRCLE LIKE BUTTON TO DISPLAY NOTIFICATION DROPDOWN.-->
<!--<div id="noti_Button"></div>-->
<img id="noti_Buttons" src="bell.png"></img>
<!--THE NOTIFICAIONS DROPDOWN BOX.-->
<div id="notifications">
LINK
<h3>Notifications</h3>
<?php
$user_name = "root";
$password = "";
$database = "wordpress";
$host_name = "localhost";
$koneksi = mysqli_connect($host_name, $user_name, $password , $database);
$result = mysqli_query($koneksi,"SELECT wp_comments.comment_content,wp_posts.post_name FROM wp_comments INNER JOIN
wp_posts ON wp_comments.comment_post_id = wp_posts.id AND wp_comments.user_id = 3 AND wp_comments.comment_approved = 1");
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){ ?>
<div style="padding:20px 0px 20px 0px;border-bottom:solid 1px #e8e8e8">
<div style="padding-left:10px;">
<?php
echo "your comment has been approved </br>".$row['comment_content'];?><a style="position:absolute;z-index:1" href="www.google.com" target="_top">see more link</a></br>
</div>
</div>
<?php } ?>
<div class="seeAll">See All</div>
</div>
</li>
</ul>
</body>
<script>
$(document).ready(function () {
// ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
$('#noti_Counter')
.css({ opacity: 0 })
.text('7') // ADD DYNAMIC VALUE (YOU CAN EXTRACT DATA FROM DATABASE OR XML).
.css({ top: '-10px' })
.animate({ top: '-2px', opacity: 1 }, 500);
$('#noti_Buttons').click(function () {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#notifications').fadeToggle('fast', 'linear', function () {
if ($('#notifications').is(':hidden')) {
}
// CHANGE BACKGROUND COLOR OF THE BUTTON.
else $('#noti_Buttons').css('filter', 'opacity(70%)');
});
$('#noti_Counter').fadeOut('slow'); // HIDE THE COUNTER.
return false;
});
// HIDE NOTIFICATIONS WHEN CLICKED ANYWHERE ON THE PAGE.
$(document).click(function () {
$('#notifications').hide();
// CHECK IF NOTIFICATION COUNTER IS HIDDEN.
if ($('#noti_Counter').is(':hidden')) {
// CHANGE BACKGROUND COLOR OF THE BUTTON.
$('#noti_Buttons').css('filter', 'opacity(100%)');
}
});
$('#notifications').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
$("img").hover(function(){
$(this).css("filter", "opacity(30%)");
}, function(){
$(this).css("filter", "opacity(100%)");
});
});
</script>
</html>
Try to add HTTPS or HTTP in the href attribute.
LINK
Try this in the div, "notifications".
Thank you
I am new to this forum. I encountered some issues when I was programming a file list display for my education portal.
Here are the codes (part of the whole page):
HTML
<div id = "mcMid">
<div id = "mcMidContainer" class = "tpWhite6">
<div id = "path">
Folder: ROOT
</div>
<div id = "top">
<div id = "name" class = "block1">Name</div>
<div id = "owner" class = "block2">Owner</div>
<div id = "date" class = "block3">Date</div>
<div id = "Delete" class = "block4">X</div>
</div>
<div id = "files">
<div id = "file1" class = "rollOverFBlueFile">
<div id = "name1" class = "block1">Determination of p value</div>
<div id = "owner1" class = "block2">Nguyen Chan</div>
<div id = "date1" class = "block3">2014-05-03</div>
<div id = "Delete1" class = "block4">X</div>
</div>
<div id = "file2" class = "rollOverFBlueFile">
<div id = "name2" class = "block1">Econ Module 1</div>
<div id = "owner2" class = "block2">Joyce</div>
<div id = "date2"class = "block3">2014-05-03</div>
<div id = "Delet2" class = "block4">X</div>
</div>
<?php for ($i=3;$i<$_GET['times'];$i++) { ?>
<div id = "file<?php echo $i; ?>" class = "rollOverFBlueFile">
<div id = "name<?php echo $i; ?>" class = "block1"">Econ Module 2</div>
<div id = "owner<?php echo $i; ?>" class = "block2">Joyce</div>
<div id = "date<?php echo $i; ?>" class = "block3">2014-05-03</div>
<div id = "Delet<?php echo $i; ?>" class = "block4">X</div>
</div>
<?php } ?>
</div>
</div>
</div>
CSS
#mcMid {
float:left;
display:flex;
flex:1;
flex-direction:column;
border-width:1px;
border-left-color:#666;
border-right-color:#666;
border-left-style:solid;
border-right-style:solid;
}
#mcMidContainer {
width:100%;
flex:1;
padding:0px 0px;
}
#path {
width:calc(100% - 20px);
height:auto;
padding:10px 10px;
background-color:#CCC;
}
#top {
width:100%;
height:auto;
padding:5px 0px;
background-color:#EEE;
font-size:12px;
overflow:auto;
}
#files {
width:100%;
flex:1;
overflow:auto;
}
.block1 {
width:calc(50% - 10px);
padding:5px 5px;
height:auto;
float:left;
}
.block2 {
width:calc(20% - 10px);
padding:5px 5px;
height:auto;
float:left;
}
.block3 {
width:calc(20% - 10px);
padding:5px 5px;
height:auto;
float:left;
}
.block4 {
width:5%;
padding:5px 0px;
height:auto;
float:left;
}
.rollOverFBlueFile {
background-color:#FFF;
border-width:1px;
border-bottom-style:solid;
border-color:#999;
width:100%;
height:auto;
padding:5px 0px;
font-size:12px;
overflow:auto;
}
.rollOverFBlueFile:hover {
background-color:#5BADFF;
}
.tpWhite6 {
background-color:rgba(255,255,255,0.5);
}
When this block of code is run with different values of the "times" variable, there were different results. The problem arises when I get the value of "times" to over a certain value when the div's inside start to exceed the allocated height of the "files" div. The "files" div start to stretch and squeezed the "top" and "path" div's.
Is there any other methods, other than fixing the height of "files", to stop this problem? Many thanks!! ^_^
I am generating a table using my Vertical_Table function. When I remove the table from the div I can adjust the dimensions of the rows and columns but when it is inside the div I cannot change them. Any ideas why? Here is some jfiddle so you can see what I am talking about http://jsfiddle.net/6XAHR/
CSS CODE
> #Pallate
{
border: 1px solid black;
position:relative;
top:40px;
margin:0 auto;
width:1200px;
height:360px;
background-color: #C8C8C8;
}
#Scroll_Table_Border
{
Position:relative;
top:40px;
Left:320px;
border: 1px solid black;
height:275px;
max-width: 850px;
background-color: #C8C8C8;
}
#Scroll_Table {
left:25px;
top:25px;
white-space: nowrap;
Position:Absolute;
height:225px;
max-width: 800px;
width: 100% !important;
overflow:auto;
background-color: #C8C8C8;
}
#Button_Group_Title
{
Position:Absolute;
padding-right:5px;
padding-left:5px;
background-color: #C8C8C8;
top:30px;
Left:35px;
z-index:2;
}
#Scroll_Table_Title
{
Position:Absolute;
padding-right:5px;
padding-left:5px;
background-color: #C8C8C8;
z-index:2;
top:30px;
Left:335px;
}
#Button_Group {
text-align:center;
padding-top:30px;
padding-bottom:15px;
padding-right:25px;
padding-left:25px;
border: 1px solid black;
position:Absolute;
top:40px;
left:20px;
height:230px;
width:200px;
vertical-align: middle;
background-color: #C8C8C8;
}
HTML CODE
<div ID = "Pallate" >
<div ID = "Scroll_Table_Title">Trial Information</div>
<div ID = "Button_Group_Title">View Results</div>
<div ID = "Button_Group">
<input type="button" ID = "Paper_Information" onclick="changeContent(this.id)" value="Paper Information" class = "Class_Button">
<input type="button" ID = "Trial_Information" onclick="changeContent(this.id)" value="Trial Setting" class = "Class_Button">
<input type="button" ID = "Results" onclick="changeContent(this.id)" value="Trial Results" class = "Class_Button">
<input type="button" ID = "Control_Law" onclick="changeContent(this.id)" value="Control Algorithm" class = "Class_Button">
<input type="button" ID = "Exercise" onclick="changeContent(this.id)" value="Exercise" class = "Class_Button">
<input type="button" ID = "Actuator" onclick="changeContent(this.id)" value="Pump Properties" class = "Class_Button">
<input type="button" ID = "Sensor" onclick="changeContent(this.id)" value="Glucose Sensor" class = "Class_Button">
<input type="button" ID = "Blood_Glucose_Safety" onclick="changeContent(this.id)" value="Blood Glucose Safety" class = "Class_Button">
<input type="button" ID = "Reference_Glucose" onclick="changeContent(this.id)" value="Reference Measurements" class = "Class_Button">
</div>
PHP CODE
<div ID = "Scroll_Table_Border">
<div ID = "Scroll_Table">
<?php
$Columns = 'SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE Table_NAME = \'Control_Law\'';
$Columns = sqlsrv_query($dbhandle,$Columns);
$Sets = array(sqlsrv_query($dbhandle, 'SELECT * FROM Control_Law WHERE [Paper ID] = ' . $ID));
$i = 0;
while ($Row = sqlsrv_fetch_array($Columns))
{
$Column_Vector[$i] = $Row[0]; $i++;
}
$Table_ID = 'Advanced_Table';
$Columns_Vector = array($Column_Vector);
Vertical_Table($Columns_Vector,$Sets,'40px','',$Table_ID);
?>
</div>
</div>
#Scroll_Table {
left:25px;
top:25px;
white-space: nowrap; //REMOVE THIS
Position:Absolute;
height:225px;
max-width: 800px;
width: 100% !important;
overflow:auto;
background-color: #C8C8C8;
}
This will get it to drop down then you can set the max width. The problem with the text you have in there now is it is all 1 string with no spaces. Remove the spaces and it will drop down normally. Hope this helps!
I tried your script but it isn't working right. I have edited my code below to show exactly what I am working with. Thank you so much for being helpful.
Quazi
Hi,
I am very new to JQuery.
I am trying to get a div to fade in after a click event and then hide after click anywhere. I have three divs set up to do this with css set as display:none. The problem is that the script does not work in IE8 and only works in ff/safari if I double click or triple click the menubar links below.
I am using the following code to show/hide these divs on mouse click:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
body,
html {
margin:0;
padding:0;
color:black;
background:black;
color:black;
}
#logo {
margin-top:1%;
width:12%;
margin-left:5%;
padding:1%;
border:2px solid #FF8c00;
}
#showsbanner {
margin-top:1%;
width:60%;
position:absolute;
right:2px;
}
#wrap {
width:90%;
margin:0 auto;
background:black;
color:black;
}
#header {
padding:5px 10px;
background:black;
color:#ef9c00;
}
h1 {
color:#35002c;
font-family:"verdana";
font-size:25px;
}
h2 {
color:#044476;
font-family:"verdana";
font-size:18px;
}
h3 {
color:#044476;
font-family:"verdana";
font-size:15px;
}
#nav {
padding:5px 10px;
width:89%;
margin-left:5%;
background:#ff8c00;
border:2px solid darkblue;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
color:white;
}
#menubar {
float:left;
width:40%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#bcity {
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#aicbk {
display:none;
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#pdil{
display:none;
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#footer {
clear:both;
padding:1px, 1px;
background:#ff8c00;
width:100%;
border:2px solid darkblue;
}
#footer p {
color:white;
font-size:12px
}
* html #footer {
height:1px;
}
//The last four lines are an IE bug fix
</style>
<script type="text/javascript" src="homepage_files/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggleh').hide();
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
stuff...
text here
text here2
text here3
stuff......
<div class="toggleh" id="toggle2h">
<div id="aicbk">
stuff....
</div>
</div>
<div class="toggleh" id="toggle3h">
<div id="pdil">
stuff..
</div>
</div>
<div id="footer">
stuff..
</div>
Here's a working sample, tested under Chrome 8.0.552.0 dev:
<html>
<head>
<title>S.O. 3920865</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggleh').hide();
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
</head>
<body>
<div id="menubar">
<div class="toggle" id="toggle1">
text here
</div>
<div class="toggleh" id="toggle1h">
some description in here I suppose
</div>
<div class="toggle" id="toggle2">
text here2
</div>
<div class="toggleh" id="toggle2h">
some description in here I suppose 2
</div>
<div class="toggle" id="toggle3">
text here3
</div>
<div class="toggleh" id="toggle3h">
some description in here I suppose 3
</div>
</div>
</body>
</html>
Perhaps you need to check jQuery UI accordion which can be what you really want.
EDIT: following 1st comment.
Use this simple code to hide/show menu (or any div)
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Click here to toggle visibility of element #foo
<div id="foo" style="display:block">This is foo</div>