How to fix this toggle div using jQuery? - javascript

If you will run the web snippet, and will click the minimize button ( - ), all of the panels are going to hide.
I want that if I am going to click the Minimize button from Handle 1, the handle 1 content will only disappear.
$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#fff;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
.minimize{
float:right;
font-weight: bolder;
cursor: pointer;
padding: 0 5px;
}
.ui-sortable-handle{
min-height: 20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Collapsible Drag & Drop Panels</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Copied from http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/ -->
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1 <button class="minimize">-</button></h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item2" >
<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item3" >
<h2>Handle 3</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
</div>
<div class="column" id="column2" >
<div class="dragbox" id="item4" >
<h2>Handle 4</h2>
<div class="dragbox-content" >
<!-- Panel Content Here-->
</div>
</div>
<div class="dragbox" id="item5" >
<h2>Handle 5</h2>
<div class="dragbox-content" >
<!--Panel Content Here-->
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
<script type="text/javascript">
$(".minimize").click(function(){
$(".minimize").text('+');
$('.dragbox-content').toggle();
});
</script>
</body>
</html>


$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#fff;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
.minimize{
float:right;
font-weight: bolder;
cursor: pointer;
padding: 0 5px;
}
.ui-sortable-handle{
min-height: 20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Collapsible Drag & Drop Panels</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Copied from http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/ -->
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1 <button class="minimize">-</button></h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item2" >
<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item3" >
<h2>Handle 3</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
</div>
<div class="column" id="column2" >
<div class="dragbox" id="item4" >
<h2>Handle 4</h2>
<div class="dragbox-content" >
<!-- Panel Content Here-->
</div>
</div>
<div class="dragbox" id="item5" >
<h2>Handle 5</h2>
<div class="dragbox-content" >
<!--Panel Content Here-->
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
<script type="text/javascript">
$(".minimize").click(function(){
$(".minimize").text('+');
$(this).parent().closest('.dragbox').find('.dragbox-content').toggle();
});
</script>
</body>
</html>


You can get the closest parent (dragbox) of the link clicked (minimize) and then find dragbox-content inside that parent only.
$(".minimize").click(function() {
$(this).text('+');
$(this).closest('.dragbox').find('.dragbox-content').toggle();
});


.next() will help you to toggle the next div on the element you clicked
$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
$('.dragbox h2').click(function(){
$(this).next('.dragbox-content').toggle();
});
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#fff;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
.minimize{
float:right;
font-weight: bolder;
cursor: pointer;
padding: 0 5px;
}
.ui-sortable-handle{
min-height: 20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Collapsible Drag & Drop Panels</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Copied from http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/ -->
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1 <button class="minimize">-</button></h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item2" >
<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item3" >
<h2>Handle 3</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
</div>
<div class="column" id="column2" >
<div class="dragbox" id="item4" >
<h2>Handle 4</h2>
<div class="dragbox-content" >
<!-- Panel Content Here-->
</div>
</div>
<div class="dragbox" id="item5" >
<h2>Handle 5</h2>
<div class="dragbox-content" >
<!--Panel Content Here-->
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
<script type="text/javascript">
$(".minimize").click(function(){
$(".minimize").text('+');
$('.dragbox-content').toggle();
});
</script>
</body>
</html>


Try targeting the item that was clicked with this:
$(".minimize").click(function(){
$(this).text('+');
$(this).parents('.dragbox-content').first().toggle();
});

Related

Carousel with Jquery

I am struggling to understand how to implement a simple carousel. I've tried the append()/prepend() functions but can't seem to get it to operate how I would like.
The setup I am using:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>First Step Connections - Online Media Marketing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="testimonial-carousel-container">
<div id="btn-prev"> < </div>
<div id="testimonial-carousel">
<div id="testimonial-container">
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
How was lunch today?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Football is the best sport!
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Meeting at 12pm.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
The weather outside is gorgeous.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Susan can you call Jim?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris</br>
Houston, TX
</span>
</div>
</div>
</div>
<div id="btn-next"> > </div>
</div>
</body>
</html>
Basically I have a carousel container, and within the carousel container I have a testimonial container with x amount of testimonial divs.
The css seems okay in that I hid the overflow of carousel container, and removed white-space wrapping on the testimonial container. So everything appears fine.. I just need help with the logic of how I would endlessly be able to scroll through the x amount of divs.
So when I get to the last testimonial it continues fluidly to the first.
Here is my css incase you need it:
:root {
--main-red-color: #e11a2c;
--main-blue-color: #013e7b;
--main-green-color: #8dc63f;
}
* {
color:var(--main-blue-color);
box-sizing:border-box;
font-family:"Lato", sans-serif;
}
#testimonial-carousel-container {
width:70%;
margin: auto;
position:relative;
}
#testimonial-carousel {
margin: auto;
background-color:var(--main-blue-color);
position:relative;
overflow:hidden;
}
#testimonial-container {
white-space:nowrap;
width:100%;
position:relative;
}
.speech-bubble {
border-radius:5px;
background-color:var(--main-green-color);
width:auto;
display:inline-block;
padding:20px;
text-align:center;
position:relative;
}
.speech-bubble .arrow {
border-style: solid;
position:absolute;
}
.bottom {
border-color: var(--main-green-color) transparent transparent transparent;
border-width:8px 8px 0 8px;
bottom:-8px;
}
#testimonial {
padding:10px 5px 5px 5px;
height:200px;
background-color:var(--main-red-color);
position:relative;
display:inline-grid;
opacity:.4;
}
#testimonial img {
width:40px;
height:40px;
border-radius:50%;
margin-top:13px;
}
#testimonial span {
color:#fff;
font-weight:900;
}
#btn-prev, #btn-next {
position:absolute;
background-color:var(--main-red-color);
color:#fff;
height:40px;
width:40px;
z-index:5;
border:3px solid #fff;
text-align:center;
line-height:40px;
font-weight:900;
margin-top:-20px;
}
#btn-prev:hover, #btn-next:hover {
background-color:var(--main-blue-color);
}
#btn-prev {
top:50%;
left:-40px;
}
#btn-next {
top:50%;
right:-40px;
}
As for the Jquery scripting I am drawing blanks. If you could provide some help as to the logic for completing this I would greatly appreciate it. Is append() prepend() the only way to go?
You can view the demo at:
http://firststepconnections.com/carousel/

How do I create a modal with dynamic information using Javascript?

I know this is pretty simple but I'm so tired already and I can't seem to find the right keywords to find the solution on a search engine... I'm building a simple front-end only ecommerce website, I've already got the modal up but I need for it to show the right information depending on which product I click... How do I do this?
EDIT: my bad for not putting in the code...
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="modal.css">
<title>Merlin's Potions</title>
</head>
<h3>Potions</h3>
<div class="items">
<div class="item" id="item1">
<img src="../img/aging-potion.png" alt="Potion">
<h6>Aging Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item2">
<img src="../img/bulgeye-potion.png" alt="Potion">
<h6>Bulgeye Potion -</h6> <span>$19.99</span>
</div>
<div class="item" id="item3">
<img src="../img/dragon-tonic.png" alt="Potion">
<h6>Dragon Tonic -</h6> <span>$64.99</span>
</div>
<div class="item" id="item4">
<img src="../img/love-potion.png" alt="Potion">
<h6>Love Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item5">
<img src="../img/polyjuice-potion.png" alt="Potion">
<h6>Polyjuice Potion -</h6> <span>$99.99</span>
</div>
<div class="item" id="item6">
<img src="../img/sleeping-draught.png" alt="Potion">
<h6>Sleeping Draught -</h6> <span>$14.99</span>
</div>
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="../img/bulgeye-potion.png" alt="" id="modalImg1">
<div class="modalTxt" id="modalTxt1">
<h4>Aging Potion</h4>
<h5>Use/Effect:</h5>
<p>It affects one's eyes, causing them to swell</p>
<h5>Ingredients:</h5>
<ul>
<li>Beetle eyes</li>
<li>Eel eyes</li>
</ul>
<h5>Price:</h5>
<span class="modalPrice">$29.99</span>
<br>
<span class="buyBtn">ADD TO CART</span>
</div>
</div>
</div>
</html>
<script type="text/javascript">
document.querySelector('.item').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = 'flex';
document.querySelector('#modalTxt1').style.display = 'inline-block';
document.querySelector('#modalImg1').style.display = 'inline-block';
});
document.querySelector('.close').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = "none";
modaltext.style.display = "none";
});
</script>
.item img{
width:50px;
}
.bg-modal{
display: none;
-ms-align-items: center;
align-items: center;
justify-content: center;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.7);
position: fixed;
top:0;
}
.modal-content {
text-align:left;
position: relative;
border-radius:4px;
width:80%;
height:80%;
background-color:white;
}
.close {
position: absolute;
right:14px;
top:0px;
font-size:42px;
transform:rotate(45deg);
cursor: pointer;
}
.modal-content img {
width:200px;
display:none;
}
.buyBtn {
background-color:red;
padding: 9px 18px;
border-radius:4px;
color:white;
}
.modalPrice{
color:red;
}
.modalTxt{
position: absolute;
}
.modal-content{
width:60%;
}
.modal-content img{
width:56%;
position:absolute;
left:0;
top:0;
bottom:0;
margin:auto;
}
.modalTxt{
right:10%;
top:50px;
}
.modalTxt h4{
font-size:18pt;
}
.modalTxt h5{
font-size:18pt;
margin-top:24px;
}
.modalTxt p {
margin-top:24px;
}
.modalTxt ul {
margin-top:24px;
}
.modalPrice{
font-size:18pt;
line-height:1.5em;
}
.buyBtn{
position: absolute;
bottom:-50px;
}

For example this is your product
<div onCLick="showModal(this)">
<h3>Product Name</h3>
<p>product description</p>
</div>
Now you need the javascript function
function showModal(product) {
// get the product information
var productName = $(product).find("h3").text();
var productDescription = $(product).find("p").text();
var modal = $("#myModal");
// fill the modal with the information
$(modal).find(".modal-title").text(productName);
$(modal).find(".modal-body").text(productDescription);
// show the modal
$("#myModal").modal("show");
}

How to add external source link for jquery?

I added a exernal link for jquery source. But the jquery event doesn't get fired. Is the format that I specified the jquery source and the jquery method call are correct ?
<html>
<head>
<title>test</title>
<style>/* root element for accordion. decorated with rounded borders and gradient background image */
.accordion {
background:#333;
width: 90%;
border:1px solid #333;
-background:#666;
}
/* accordion header */
.accordion h2 {
background:#ccc url('http://static.flowplayer.org/img/global/gradient/h30.png');
margin:0;
padding:5px 15px;
font-size:14px;
font-weight:normal;
border:1px solid #fff;
border-bottom:1px solid #ddd;
cursor:pointer;
color: #000;
}
/* currently active header */
.accordion h2.current {
cursor:default;
background-color:#0f0;
}
/* accordion pane */
.accordion .pane {
display:none;
padding:15px;
color:#fff;
font-size:12px;
}
/* a title inside pane */
.accordion .pane h3 {
font-weight:normal;
margin:0 0 -5px 0;
font-size:16px;
color:#999;
}</style>
<script src="//code.jquery.com/jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Initialising Accordion
$(".accordion").tabs(".pane", {
tabs: '> h2',
effect: 'slide',
initialIndex: null
});
//The click to hide function
$(".accordion > h2").click(function () {
if ($(this).hasClass("current") && $(this).next().queue().length === 0) {
$(this).next().slideUp();
$(this).removeClass("current");
} else if (!$(this).hasClass("current") && $(this).next().queue().length === 0) {
$(this).next().slideDown();
$(this).addClass("current");
}
});
});
</script>
</head>
<body>
<div class="accordion">
<h2>Level 1:1</h2>
<div class="pane">
<div class="accordion">
<h2>Level 2 : 1</h2>
<div class="pane">
<div class="accordion">
<h2>Set 1</h2>
<div class="pane">
<div class="accordion">
<h2>Test3</h2>
<div class="pane">
[Pane Content]
</div>
</div>
</div>
</div>
</div>
<h2>Level 2 : 1</h2>
<div class="pane">
<div class="accordion">
<h2>Set 1</h2>
<div class="pane">
<div class="accordion">
<h2>Test3</h2>
<div class="pane">
[Pane Content]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Level 1:2</h2>
<div class="pane">
content
</div>
</div>
</body>
</html>

Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

Right now my navigation tabs are only clickable. I did it by using "anchor() tag". But as soon as I click it, it doesn't show the corresponding paragraph (which I already stored in my HTML file). Basically I haven't added any functionality to happen something after clicking the tab. And I don't know how to do that and which one is better (comparing with jquery and javascript).
This is my code:
.PHP file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="design.css">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.1.8.14.custom.css">
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<header id="top_header" >
<h1>Welcome to my world!</h1>
</header>
<!--This div wrapps all the tabs and corresponding section/paragraphs-->
<div id="giant_wrapper">
<div id="top_menu">
<ul>
<li>HOME</li>
<li>WHO I'M</li>
<li>GALLERY</li>
<li>MY DIARY</li>
<li>FATAH'S BLOG</li>
<li>CONTACT ME</li>
</ul>
</div>
<div id="new_div">
<section id="main_section">
<!--This div section is for main contaents for my website. All the correcponding
text and paragraph will be added here-->
<div id="all_contents">
<div id="home_contents">
<p> It's home.</p>
</div>
<div id="who_im_contents">
<p> It's who I'm.</p>
</div>
<div id="gallery_contents">
<p> It's Gallery.</p>
</div>
<div id="diary_contents">
<p> It's diary.</p>
</div>
<div id="blog_contents">
<p> It's my blog.</p>
</div>
<div id="contact_contents">
<p> contact info.</p>
</div>
</div>
</section>
</div>
</div>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
</body>
</html>
.CSS file:
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
-webkit-box-pack:center;
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
#top_header{
background:green;
border:3px solid orange;
padding:20px;
text-align:center;
}
#top_menu{
background:white;
color:black;
border:3px solid red;
padding:4px;
text-align:center;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#the_footer{
text-align:center;
padding:20px;
border-top: 2px solid red;
}

your values in href and id of divs are different ,that is the problem ,please match div id to navigations
ex:
Home
<div id="home_contents">
<p> It's home.</p>
</div>

What you are actually setting up is an in-page nav bar. If you change the links to match the actual ids then when you click the link the browser will scroll to the associated div.
In other words you need to either remove _contents from all your anchors or add _contents to all the links in top_menu, in order to have anything happen.

You can check below code it will work for you
$('ul > li > a').click(function () {
$('#all_contents >div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
Please see Demo

css js menu help

I'm designing a menu for a photography site. What I would like is a menu that on hover does two things: pops up an individual image in line with the menu <li>, and also displays just below the menu some text that stays centered in the page, i.e. has position:fixed;. I've taken care of the first requirement, but I'm stuck as to how to achieve the text display. Here's what I've got so far...
<body>
<div id="wrapper">
<div id="menuholder"></div><!--end menuholder-->
<div id="header">
</div><!--end header-->
<div id="content">
<div id="primary">
</div><!--end primary-->
<div id="secondary">
</div><!--end secondary-->
</div><!--end content-->
<div id="spacer"></div><!--end spacer-->
<div id="footer">
<div id="nav">
<script type="text/javascript"><!--js for the menu-->
$(document).ready(function()
{
$('#menuBar li').click(function()
{
var url = $(this).find('a').attr('href');
document.location.href = url;
});
$('#menuBar li').hover(function()
{
$(this).find('.menuInfo').slideDown();
$(this).find('.menuText').slideDown();
},
function()
{
$(this).find('.menuInfo').slideUp();
$(this).find('.menuText').slideUp();
});
});
</script>
<ul id="menuBar">
<li class="firstchild">Home
<div class="menuInfo"><img src="images/link1.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO1
<div class="menuInfo"><img src="images/link2.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO2
<div class="menuInfo"><img src="images/link3.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO3
<div class="menuInfo"><img src="images/link4.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO4
<div class="menuInfo"><img src="images/link5.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO5
<div class="menuInfo"><img src="images/link6.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO6
<div class="menuInfo"><img src="images/link7.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO7
<div class="menuInfo"><img src="images/link8.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
</ul>
</div><!--end nav-->
</div><!--end footer-->
</div><!--end wrapper-->
</body>
Yes, the menu is in the footer. That's not a mistake ;)
#footer {
position:relative;
width:100%;
background-image:url();/*remove if not using background image*/
text-align:center;
margin:0 auto;
margin-top:-100px;
clear:both;
}
#footer h1 {
font-size:1.2em;
margin:0;
padding:10px;
}
#footer p {
padding:4px;
}
#footer a:hover {
color:#999;
}
#nav {
width:650px;
height:45px;
background-color:#000;
color:#fff;
font-size:14px;
margin:20px auto 0;
}
#nav ul {
list-style-type:none;
display:block;
}
#menuBar li {
float:left;
padding:15px;
height:16px;
width:50px;
border-right:1px solid #ccc;
}
#menuBar li a {
color:#fff;
text-decoration:none;
letter-spacing:-1px;
font-weight:bold;
}
.menuHover {
background-color:#999;
}
.firstchild {
border-left:1px solid #ccc;
}
#menuholder {
position:fixed;
width:100%;
top:656px;
}
.menuInfo {
background-color:#000;
width:74px;
height:100px;
padding:3px;
display:none;
position:absolute;
margin:-100px 0 0 -15px;
}
.menuText {
background-color:#000;
color:#fff;
padding:0;
display:none;
font-size:14px;
}
And here's how it looks, so far...
http://www.erisdesigns.net/STAGE/ScottHevener/

Try left: 0; on #menuholder it should do the trick.

Categories

Resources