I am preparing a menu facebook style. I encode is running smoothly. But when I click the drop-down menu remains open in other userposts.
I want to get a diverse menu of each post. not associated with each other. What do I need it to be?
This is demo jsfiddle
HTML CODE:
<div class="container">
<div class="pay_ayar">
<a class="account"></a>
<div class="bubble">
<ul class="root">
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="pay_ayar">
<a class="account"></a>
<div class="bubble">
<ul class="root">
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
CSS code:
.container {
float:left;
width:500px;
height:90px;
border:1px solid #000;
margin-top:30px;
}
.pay_ayar {
float:right;
width:20px;
height:25px;
border:1px solid #000;
display:none;
}
.container:hover .pay_ayar{
display:block;
}
a.account{
position:absolute;
line-height:25px;
width:20px;
height:25px;
cursor:pointer;
display:block;
}
.bubble{
float:left;
position:relative;
width:250px;
height:200px;
padding:0px;
border:1px solid #000;
margin-top:0px;
display:none;
margin-left:-230px;
top:25px;
}
.pay_ayar.open .account {
cursor: pointer;
width: 20px;
height:25px;
display: inline-block;
border: 1px solid #AAA;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
}
.pay_ayar.open .account {
border: 1px solid #3B5998;
color: white;
background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: #6D84B4;
}
and Javascript code:
$(document).ready(function()
{
$(".account").click(function()
{
if($(".bubble").css('display')=='none')
{
$(".pay_ayar").addClass('open');
$(".bubble").css('display','block');
}
else
{
$(".bubble").css('display','none');
$(".pay_ayar").removeClass('open');
}
});
$(document).click(function(e)
{
if($(e.target).attr('class')!='account')
{
if($(".bubble").css('display')=='block')
{
if($('.pay_ayar').hasClass('open'))
{
$('.pay_ayar').removeClass('open');
}
$(".bubble").css('display','none');
}
}
});
});
You have to get the current user target. You can get this with the user click event:
http://jsfiddle.net/pu7NQ/13/
$(".account").click(function(event)
{
var $container = $(event.target).closest(".container");
if($(".bubble", $container).css('display')=='none')
{
$(".pay_ayar", $container).addClass('open');
$(".bubble", $container).css('display','block');
}
else
{
$(".bubble", $container).css('display','none');
$(".pay_ayar", $container).removeClass('open');
}
});
This sure could be more elegant, but you get the idea.
If you want to close one element, on click outside, you will have to add a event listener to the document and listen, if the event was outside of the desired element. There is a plugin for that: http://benalman.com/projects/jquery-outside-events-plugin/
// add close listener
$container.on("clickoutside.outside",function(){
$(".pay_ayar").removeClass("open");
$(".bubble").hide();
$(this).off("clickoutside.outside");
});
Demo: http://jsfiddle.net/pu7NQ/16/
You should really consider, adding a close/open function to get rid of the code duplication.
Related
I have a chat module for my website. I have a div where my messages appear, and I want it to scroll to the bottom of the div when I open the chat page. Most recent messages appear at the bottom.
Here is the HTML and CSS code am using
/CSS/
#pageMiddle_message{
margin-left:280px;
background:#FFF;
width: 700px;
height: 592px;
border-radius: 5px;
padding-bottom:0px;
position:fixed;
border: orange 2px solid;
}
#message{
width:auto;
height:100px;
}
#chat{
background:orange;
color: #fff;
}
#no_chat{
background:orange;
color: #fff;
height:42px;
line-height:0.11857143em;
}
#head_chat{
color:#fff;
line-height: 0.82857143em;
}
.sub_paneln{
text-transform:capitalize;
color: #444;
font-weight:500;
background-size: 1px 1px;
line-height: 0.82857143em;
list-style:none;
}
.my_message{
float:right;
background-color:#DFFFFB;
list-style:none;
border-radius:8px;
border: #39F 1px solid;
}
.their_message{
float:left;
background-color:#0ADEF5;
border-radius:8px;
list-style:none;
border: #06F 1px solid;
position:inherit;
}
.line_message{
color: #444;
font-weight:500;
background-size: 1px 1px;
line-height: 0.82857143em;
list-style:none;
}
.message_list{
background:#fff;
padding:2px;
height:445px;
max-height:600px;
overflow-y:auto;
position:relative;
}
.message_body{
border-radius: 5px;
height:auto;
}
#text_message{
width:670px;
margin-top:2px;
margin-left:23px;
background-color:#D2D2D2;
padding:0px;
}
/*HTML*/
<div class="message_body">
<div id="message_list" class="message_list">messagelist</div>
<div id="message" class="new_message" style="height:auto;"></div>
<div style="background:#D2D2D2; height:97px; border-radius:4px;">
<div id="text_message">
<table width="" height="">
<tr>
<th width="auto" style="float:left;">
<a href=""><img src="" width="60" height="60" style="border-radius:5px;"/>
</a></th><th style="float:left;"><textarea name="sendmessage" style="width:579px; height:55px; border:orange 2px solid; border-radius:3px;" id="sendmessage" placeholder="send message to messager></textarea></th></th></tr></table>
<div style="float:right; padding-right:4px; margin-right:15px; margin-top:-3px;">
<input name="send" type="submit" value="send message" onClick="javascript:ajax_send();">
</div>
</div>
</div>
</div>
You could, using jQuery, calculate the bottom of the div and then scroll to it:
var $div = $("message_list");
var divpos = $div.offset();
var divheight = $div.height();
var divbottom = divpos.top + divheight;
var windowheight = $(window).height();
$(window).scrollTop(divbottom - windowheight);
The variables are used to calculate the bottom of the div, and then $(window).scrollTop() scrolls to the passed position. divbottom - windowheight makes the page scroll such that the bottom of the div matches the bottom of the screen.
I'm attempting to build a page using Themeroller widgets and I've run into some bugs and can't figure out why. The first one: my drag element keeps going behind my drop element instead of over it. Second one: My tabs aren't showing ups as tabs but rather an unordered list (This one isn't necessarily a bug, I'm just very new to jQuery UI and I'm having difficulty linking both custom themes and themes from a CDN, if anyone can explain what I'm doing wrong it'd be much appreciated). And the last one: I'm trying to use datepicker() (which of course doesn't have a theme right now) to have the user input their birthday. I would like them to press and go and receive a notification that just spits their birthday back at them, I can't seem to be able to do this with ($datepicker).value. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>ThemeRoller</title>
<link type="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css ">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
body{
height:680px;
width:auto;
background: -webkit-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -moz-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -ms-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -o-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
color:ghostwhite;
}
#navbar{
height:30px;
width:auto;
border-bottom:2px solid ghostwhite;
top:45px;
left:0;
right:0;
position: absolute;
}
#draggable{
height:50px;
width:150px;
border:1px solid black;
top:40px;
left:550px;
background:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
overflow-y: auto;
overflow-x: hidden;
}
#draggable span{
display:table;
margin:0 auto;
margin-top:15px;
}
#droppable{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#droppable span{
display: table;
margin: 0 auto;
margin-top: 60px;
}
#birthday{
position:absolute;
top:460px;
left:573px;
width:auto;
height:200px;
}
#birthday span{
display: table;
margin:0 auto;
margin-bottom:10px;
}
#tabs{
width:200px;
bottom:0px;
left:0px;
top:75px;
border-top:2px solid ghostwhite;
border-right:2px solid ghostwhite;
border-bottom:2px solid ghostwhite;
position: absolute;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
}
#sortable{
width:200px;
bottom:0px;
right:0px;
top:75px;
border-top:2px solid ghostwhite;
border-bottom: 2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: absolute;
}
ol {
margin:0 0 10px 0
}
li:not(:last-child) {
margin-bottom: 10px;
}
</style>
<script>
$(init);
function init(){
var divdrag=$('#draggable');
var divdrop=$('#droppable');
var divsort=$('#fruitlist');
var divtab=$('#tabs');
divdrag.draggable()
divdrop.droppable({
drop:function(){
divdrag.text("Dropped!");
},
out: function(){
divdrag.text("No! Please drop me!");
},
over: function(){
divdrag.text("Please drop me! Pls...");
}
})
divsort.sortable();
divtab.tabs();
$('#datepicker').datepicker();
}
function birthday(){
var birth=$('#datepicker').value;
alert('You were born on: '+birth);
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='draggable'><span>Drag me!</span></div>
<div id='droppable'><span>Drop here!</span></div>
<div id='birthday'>
<span>Enter your birthday!</span>
<input type='text' id='datepicker'>
<input type='button' id='btn1' value='Go!' onClick=birthday()/>
</div>
<div id='tabs'>
<ul>
<li>Home</li>
<li><a href='#tabs-2'>About</a></li>
<li><a href='#tabs-3'>Products</a></li>
</ul>
<div id='#tabs-1'>Welcome to my best jQuery page yet!</div>
<div id='#tabs-2'>Sometimes I go a little overboard with compsci</div>
<div id='#tabs-3'>I also make and sell word clocks built with Arduino microcontrollers!</div>
</div>
<div id='sortable'><span>Sort me!</span>
<span id="fruits">
<ol id="fruitlist">
<li>Apples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Lemons</li>
<li>Kiwis</li>
<li>Strawberries</li>
<li>Oranges</li>
<li>Mango</li>
<li>Plums</li>
<li>Peaches</li>
<li>Apricots</li>
<li>Squash</li>
<li>Honeydew</li>
<li>Watermelons</li>
</ol>
</div>
</body>
Edit: Oops. Well I got my theme working. was using type="stylesheet" instead of rel="stylesheet"
Edit 2: I made a second page with nearly identical drag and drop code and the drag element goes over the drop element. So something else in my page must be causing it but I don't know what. Here's the drag/drop code in the new document.
$(function(){
var drag = $('#dragdiv');
var drop =$('#dropdiv');
drag.draggable();
drop.droppable({
drop: function(){
drag.text('Dropped!');},
out: function(){
drag.text('No! Please! Take me back!');},
over: function(){
drag.text('Please drop me! Pls...');
}
});
});
It is nearly identical. In fact, I copied and pasted this code into my original document and still get the drag element going behind the drop element in the original. Something tells me my CSS isn't playing nice with my code.
Did it. Wasn't able to figure out how to do the datepicker value though.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
div{
font:12px normal arial, helvetica;
}
body{
height:670px;
width:auto;
background: -webkit-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -moz-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -ms-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -o-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
color:ghostwhite;
}
#navbar{
height:30px;
width:auto;
border-bottom:2px solid ghostwhite;
top:45px;
left:0;
right:0;
position: absolute;
}
#dragdiv{
height:50px;
width:150px;
border:1px solid black;
top:100px;
left:565px;
background-color:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
position: absolute;
}
#dropdiv{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background-color: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#dragdiv span{
display:table;
margin:0 auto;
margin-top:15px;
}
#dropdiv span{
display: table;
margin: 0 auto;
margin-top: 60px;
}
#birthday{
position:absolute;
top:460px;
left:573px;
width:auto;
height:200px;
}
#birthday span{
display: table;
margin:0 auto;
margin-bottom:10px;
}
#tabs{
width:200px;
bottom:0px;
left:0px;
top:75px;
border-top:2px solid ghostwhite;
border-right:2px solid ghostwhite;
position: absolute;
background: #5D5D5D ;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: grey;;
color: #222;
}
.tab-content{
display: none;
background: grey;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
margin-bottom: 10px;
}
#sortable{
width:200px;
left:1070px;
top:-5px;
height:620px;
border-top:2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: relative;
background:#5D5D5D ;
}
ol {
margin:0 0 10px 0;
cursor:pointer;
}
li:not(:last-child) {
margin-bottom: 10px;
}
#goback{
position: absolute;
top:550px;
left:620px;
}
</style>
<script>
$(function(){
var drag = $('#dragdiv');
var drop =$('#dropdiv');
drag.draggable();
drop.droppable({
drop: function(){
drag.text('Dropped!');},
out: function(){
drag.text('No! Please! Take me back!');},
over: function(){
drag.text('Please drop me! Pls...');
}
});
var divsort=$('#fruitlist');
divsort.sortable();
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
$('#datepicker').datepicker();
});
function goBack(){
window.location = "http://www.javascriptpractice.pcriot.com/practiceSet5.html"
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='dropdiv'><span>Drop Here!</span></div>
<div id='dragdiv'><span>Drag Me!</span></div>
<div id='birthday'>
<span>Enter your birthday!</span>
<input type='text' id='datepicker'>
<input type='button' id='btn1' value='Go!' onClick=birthday()/>
</div>
<div id='tabs'>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Home</li>
<li class="tab-link" data-tab="tab-2">About<li>
<li class="tab-link" data-tab="tab-3">Products</li>
<li class="tab-link" data-tab="tab-4">Tabs</li>
</ul>
<div id="tab-1" class="tab-content current">
Welcome to my best jQuery page yet!
</div>
<div id="tab-2" class="tab-content">
I really like compsci. Sometimes I go overboard.
</div>
<div id="tab-3" class="tab-content">
I also make and sell word clocks with Arduino microcontrollers!
</div>
<div id="tab-4" class="tab-content">
Tabs aren't as easy as they look.
</div>
</div>
<div id='sortable'><span>Sort me!</span>
<ol id="fruitlist">
<li>Apples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Lemons</li>
<li>Kiwis</li>
<li>Strawberries</li>
<li>Oranges</li>
<li>Mango</li>
<li>Plums</li>
<li>Peaches</li>
<li>Apricots</li>
<li>Squash</li>
<li>Honeydew</li>
<li>Watermelons</li>
</ol>
</div>
<input id='goback' type="button" value="Go Back" onClick='goBack()'/>
</body>
</html>
I use mouseenter and mouseleave to toggle a delete button using js below :
$('body').on("mouseenter",".item", function(){
$(this).next().show();
}).on("mouseleave", ".item",function(){
$(this).next().hide();
});
Here is my HTML
<div class="item"></div>
<span class="dlt">x</span>
I did a demo http://jsfiddle.net/sm3dx99k/ to reproduce my problem. When I hover into the x button it will flick, I expect it to as I want it to be clickable.
Try this there is no flickering. I made a few changes to your js
$('body').on("mouseenter",'.parent', function () {
$(this).children('.dlt').show();
}).on("mouseleave",'.parent', function () {
$(this).children('.dlt').hide();
});
.item {
border-radius: 50% !important;
background:orange;
width:50px;
height:50px;
}
.dlt {
border-radius: 50%;
font-size: 18px;
background: #ddd;
border: 1px solid #888;
font-weight: bold;
cursor: pointer;
padding: 0px 5px;
position:absolute;
margin:-55px 30px;
display:none;
}
.parent{
display:inline-block;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="parent">
<div class="item"></div>
<span class="dlt">x</span>
</div>
<div class="parent">
<div class="item"></div>
<span class="dlt">x</span>
</div>
I have two horizontal scrollers and I need to drag div from upper scroller to lower scroller. This is working fine but the problem is that the dragged div gets lost under the scroller borders while dragged. Dragging comes from jquery-UI and scrollers smoothdivscroll.
Is there a way to fix it or should i start from scratch?
Here it is in http://jsfiddle.net/yCESP/
Here is list of jquery plugins.
jquery-ui-1.10.4.custom.min.js
jquery.mousewheel.min.js
jquery.kinetic.min.js
jquery.smoothdivscroll-1.3-min.js
jquery.ui.touch-punch.min.js
Here is code
HTML
<div id="wrapper">
<div id="mainColumn">
<div id="mixedContent2" >
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>1</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>2</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>3</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>4</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>5</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>6</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>7<br></p>
</div>
</div>
<div id="mixedContent" >
<div class="contentBox" style="background-color:#4254a3;color:white;">
<br/>
<p>FIRST</p>
</div>
<div class="contentBox" style="background-color:white;color:black;">
<p>SECOND</p>
</div>
<div class="contentBox" style="background-color:grey;color:white;">
<p>THIRD</p>
</div>
</div>
</div>
</div>
CSS
#wrapper {
z-index:0;
}
#mainColumn {
z-index:0;
}
#mixedContent {
width:80%;
height: 330px;
position: relative;
display: block;
z-index:1;
border:2px;
border-style:solid;
border-color:#093;
}
#mixedContent .contentBox {
position: relative;
float: left;
display: block;
height: 250px;
width: 250px;
border: solid 1px #ccc;
padding: 10px;
margin: 0px 5px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:5px 5px 5px 5px;
box-shadow: 2px 2px 2px #585858;
z-index:0;
}
#mixedContent .contentBox img {
margin-bottom: 10px;
}
#mixedContent .contentBox p {
font-size: 10px;
}
#mixedContent2 {
width:80%;
height: 330px;
position: relative;
display: block;
z-index:1;
border:2px;
border-style:solid;
border-color:#06C;
}
.koko_koira {
position: relative;
float: left;
display: block;
height: 200px;
width: 128px;
border: solid 1px #ccc;
padding: 10px;
margin: 0px 5px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:5px 5px 5px 5px;
box-shadow: 2px 2px 2px #585858;
z-index:50;
}
.koko_koira img {
margin-bottom: 10px;
}
JS
$(document).ready(function() {
$("#mixedContent").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true
});
});
$(document).ready(function() {
$("#mixedContent2").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true
});
});
$( ".koko_koira" ).draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
});
$( ".contentBox" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
You should play with overflow: hidden and overflow: visible on div.scrollWrapper during drag/drop events. You also need to rethink the way you're positioning your top scrollers.
An updated fiddle (which sadly breaks up layout on drag event) can be found here.
Drag events to listen to while dragging:
drag: function() {
$('div.scrollWrapper').css('overflow', 'visible');
},
stop: function() {
$('div.scrollWrapper').css('overflow', 'hidden');
}
I created a simple JQuery accordion at the top of my page in html, the problem is that everytime i click a box to slide down the page moves to the very top again. I dont get why this would even happen and have spent countless hours determining if its a css issue or JQuery.
Im a JQuery noob so im not sure if there is a specific control to fix this or not.
I will provide my code (there is also a content slider on the page):
CSS
.clear
{
clear:both;
}
body
{
background: #0B0909;
min-height: 200px;
}
.wrap
{
width:940px;
padding:10px;
margin:50px auto;
font-family: Arial, Helvetica, Times;
/* border: 3px ridge #FFDA00; */
}
.header
{
background: #0B0909;
color:#fff;
padding: 25px;
font-family: 'Special Elite', Arial, serif;
font-weight: 400;
text-align: center;
}
.sliderFade
{
position:relative;
width:940px;
height: 300px;
}
.sliderFade img
{
position:absolute;
left:0;
top:0;
border: 5px solid #FFDA00;
width:930px;
height: 295px;
}
#container1
{
position:relative;
width:940px;
height: 200px;
}
dl, dt, dd, ul, li, a
{
margin: 0;
padding: 0;
}
a
{
text-decoration: none;
font-size: 20px;
color: #0B0909;
outline: none;
font-family: 'Special Elite', Arial, serif;
}
li
{
padding-left: 2px;
list-style-type: none;
border-left: 3px solid #FFDA00;
border-right: 3px solid #FFDA00;
border-bottom: 3px solid #FFDA00;
background-color: white;
height: 200px;
}
dl
{
width: 300px;
position:relative;
}
dt
{
padding-top: 4px;
background-color: #FFDA00;
border-left: 3px solid #FFDA00;
border-right: 3px solid #FFDA00;
border-bottom: 3px solid #CDCDCD;
}
dt a
{
color: #0B0909;
font-size: 30px;
font-family: 'Special Elite', Arial, serif;
}
.footer
{
background: #0B0909;
color:#fff;
padding: 25px;
font: 0.8em, serif;
height: 100px;
border-top: 3px solid #FFDA00;
}
JQuery
$(function()
{
//Hide all images except the first in content slider
$('.sliderFade :gt(0)').hide();
setInterval(function()
{
$('.sliderFade img:first-child').fadeOut().next('img').fadeIn().end().appendTo('.sliderFade');
//$('#star').clone().animate({height:"30px"}).appendTo('.outside');
}, 4000);
//hide all sub-windows on load
$("dd:not(:first)").hide();
//slide the window up on click
$("dt a").click(function()
{
$("dd").slideUp("slow");
$(this).parent("dt").next("dd").slideDown("normal");
});
});
HTML
<body>
<div class="outside">
<img id= "star" src="star.png" height="10px" width="15px">
</div>
<div class="wrap">
<div class="header" >
<h1> My web app </h2>
</div>
<div class="sliderFade">
<img id = "1stImage" src="space2.jpg">
<img id = "2ndImage" src="space.jpg">
<img id = "3rdImage" src="paint-types.jpg">
</div>
<div class="clear" />
<div id="container1">
<dl>
<dt>Home</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
<dt>Blog</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
<dt>Contact</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
</dl>
</div>
<div class="footer">
<dt>Blog</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
<dt>Contact</dt>
<dd>
<ul>
<li>link 1</li>
</ul>
</dd>
</div>
</div>
</body>
thanks.
Add return false in click event...
$(function()
{
//Hide all images except the first in content slider
$('.sliderFade :gt(0)').hide();
setInterval(function()
{
$('.sliderFade img:first-child').fadeOut().next('img').fadeIn().end().appendTo('.sliderFade');
//$('#star').clone().animate({height:"30px"}).appendTo('.outside');
}, 4000);
//hide all sub-windows on load
$("dd:not(:first)").hide();
//slide the window up on click
$("dt a").click(function()
{
$("dd").slideUp("slow");
$(this).parent("dt").next("dd").slideDown("normal");
return false;
});
});
hope this will work...
You'll need to use return false or preventDefault() to stop the anchor links from functioning on click.