I have a bit of js toggle code that has worked for me in the past but isn't working after I've altered it for another project. For some reason there is a display:none; property that will not toggle.
It might be because I have moved the div that is to be toggled; originally it came directly after the triggering div but I now have it in a seperate li element.
I'm an amateur coder and a bit confused as to what is going on. Any help is greatly appreciated!
Here's a fiddle:
https://jsfiddle.net/mfqa5ahb/1/
When I inspect the html of the fiddle this shows up as an attribute of the div I want toggled (davebiobox):
element.style {
display: none;
}
And if I temporarily disable this attribute and click the view/hide bio button it toggles properly once and then resets to display:none;
Here's the code:
HTML:
<div class="ourteamlist">
<ul>
<li>
<img src="images/slide4/larry.jpg" class="profilepic" alt="Profile Pic">
<div class="lilbluebox">
<div class="teambox">
<ul>
<li>
<p class="whitetext">Dave Henderson</p>
<h4>CPA, CA, Partner</h4>
</li>
<li>
<div id="daveshowbio" class="viewbio">VIEW BIO</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div id="davebiobox">
<div class="bioleft">
<p>Dave Henderson</p>
</div>
<div class="bioright">
<p>DAVE DAVE DAVE DAVE DAVE DAVE</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
.ourteamlist{
max-width:1200px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
letter-spacing:1px;
}
.teambox ul li a{
text-decoration: none;
}
#davebiobox{
position:relative;
display:inline-block;
max-width:1200px;
height:287px;
background:#FFFFFF;
}
#davebiobox:after{
content:"";
position:relative;
display:block;
width:0;
height:0;
}
.bioleft{
position:relative;
float:left;
width:50%;
}
.bioright{
position:relative;
float:right;
width:50%;
}
JS:
$(document).ready(function () {
$(".viewbio").click(function() {
var $self = $(this);
var originalText = $self.text().trim();
$(".viewbio").text("VIEW BIO");
if (originalText == "VIEW BIO") {
$self.text("HIDE BIO");
}
});
});
$(document).ready(function () {
var $slides = $('#davebiobox').hide();
$('#daveshowbio').show().click(function () {
var $slider = $(this).next("#davebiobox");
if (!$slider.length){
$slider = $(this).closest("#davebiobox");
}
$slides.not($slider).stop(true, true).slideUp();
$slider.stop(true, true).slideToggle(0);
});
});
Thanks alot!
I have given this code some tweaking and came up with this.
$(document).ready(function () {
$(".viewbio").click(function() {
var $self = $(this);
var originalText = $self.text().trim();
$(".viewbio").text("VIEW BIO");
if (originalText == "VIEW BIO") {
$self.text("HIDE BIO");
}
});
var $slides = $('#davebiobox').hide();
$('#daveshowbio').show().click(function () {
var $slider = $("#davebiobox");
$slider.stop(true, true).slideToggle();
});
});
.ourteamlist{
max-width:1200px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
letter-spacing:1px;
}
.teambox ul li a{
text-decoration: none;
}
#davebiobox{
position:relative;
display:inline-block;
max-width:1200px;
height:287px;
background:#FFFFFF;
}
#davebiobox:after{
content:"";
position:relative;
display:block;
width:0;
height:0;
}
.bioleft{
position:relative;
float:left;
width:50%;
}
.bioright{
position:relative;
float:right;
width:50%;
}
<div class="ourteamlist">
<ul>
<li>
<img src="images/slide4/larry.jpg" class="profilepic" alt="Profile Pic">
<div class="lilbluebox">
<div class="teambox">
<ul>
<li>
<p class="whitetext">Dave Henderson</p>
<h4>CPA, CA, Partner</h4>
</li>
<li>
<div id="daveshowbio" class="viewbio">VIEW BIO</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div id="davebiobox">
<div class="bioleft">
<p>Dave Henderson</p>
</div>
<div class="bioright">
<p>DAVE DAVE DAVE DAVE DAVE DAVE</p>
</div>
</div>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Related
I am new in Javascript, So I have small problem,
First here is my live Code & written here.
this is my index.php file
<ul id="friends">
<li id="Maxi" class="user">Maxi</li>
<li id="John" class="user">John</li>
<li id="Henry" class="user">Henry</li>
<li id="Max" class="user">Max</li>
<li id="Simon" class="user">Simon</li>
</ul>
<div id="windows"></div>
It is my stylesheet page.
.user{
text-align:center;
width:50px;
height:20px;
display:inline-block;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
float:right;
}
.mwindow{
width:150px;
height:200px;
border:2px solid #16a085;
}
.mwindow{
width:140px;
height:25px;
background-color:#1abc9c;
padding:5px;
}
.cls{
display:inline-block;
float:right;
cursor:pointer;
font-size:20px;
font-weight:bold;
}
And it is my js page
$(document).ready(function(){
$('.user').click(function(){
var id = $(this).attr("id");
$html = '<div class="mwindow"><div class="hwindow">'+id+'<span class="cls">x</span></div></div>';
$('#windows').append($html);
});
});
$(document).ready(function(){
$('#friends').on('click','.user', function(){
$('.mwindow').hide();
});
});
So my problem is when I click on one of users then display is showing none instead of display block.
This is happening because you have this line $('.mwindow').hide();, which hides the elements that you append to #windows. To hide the element when you press on x you should attach the event on .cls and to hide the parent.
$(document).ready(function(){
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
});
$(document).ready(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
$html = '<div class="mwindow"><div class="hwindow">'+id+'<span class="cls">x</span></div></div>';
$('#windows').append($html);
});
});
$(document).ready(function(){
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
});
body{
margin:0;
background-color:#999;
height:700px;
}
.frnd{
text-align:center;
width:50px;
height:20px;
display:inline-block;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
float:right;
}
.mwindow{
width:150px;
height:200px;
border:2px solid #16a085;
}
.mwindow{
width:140px;
height:25px;
background-color:#1abc9c;
padding:5px;
}
.cls{
display:inline-block;
float:right;
cursor:pointer;
font-size:20px;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="friends">
<li id="Maxi" class="frnd">Maxi</li>
<li id="John" class="frnd">John</li>
<li id="Henry" class="frnd">Henry</li>
<li id="Max" class="frnd">Max</li>
<li id="Simon" class="frnd">Simon</li>
</ul>
<div id="windows"></div>
I made a responsive nav that hides all of the pages for mobile view. It is toggled and appears when the user clicks the menu nav. The thing is when you go to another page then the nav stays open. I want the nav to stay closed when visiting any page.
jsfiddle - http://jsfiddle.net/mw59vvcm/1/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Taffies Cupakes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<header>
<img src="images/header.png" alt="taffies logo">
</header> <!-- end of header -->
<aside class="sidebar">
<nav>
<div class="menu"></div>
<ul class="main_nav">
<li>home</li>
<li>about us</li>
<li>orders</li>
<li>gallery</li>
<li>contact</li>
</ul>
</nav> <!-- end of nav -->
<div class="company_info">
<p>Taffies cupcakes</p>
<p>111 x drive road</p>
<p>milton keynes</p>
<p>l0002</p><br>
<p>telephone: 078 878-8888</p>
</div> <!-- end of compnay info text -->
</aside> <!-- end of aside -->
<section class="first_article">
<article>
<p class="first_main_paragraph">Welcome to Taffies Cupcakes website! In here you will find various types of cupcakes we offer. Our cupcakes are fresh and we deliver in 24 hours. </p>
<p class="second_main_paragraph">Check out the gallery section to see which type of cupcake you prefer. If you don't see your favorite, you can contact us and give us suggestions on what other type of cupcakes we should offer. We take feedback seriously and want to provide the best cupcakes to our customers.</p>
<img src="images/contact-button.png" alt="contact_button" class="contact_button">
<img src="images/cupcake.png" alt="cupcake" class="cupcake">
</article>
</section> <!-- end of section -->
<footer>
<p>Taffie's Cupcakes © copyright 2014</p>
<ul>
<li>contact us</li>
<li>gallery</li>
<li>orders</li>
<li>about us</li>
<li>home</li>
</ul>
</footer> <!-- end of footer -->
</div> <!-- end of container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(".menu").click(function(){
$(".main_nav").toggle();
});
</script>
</body>
</html>
*{
margin:0px;
padding:0px;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
margin:0 auto;
}
body{
background-color:#e8d4cb;
}
header img{
padding:43px;
display:block;
margin:0 auto;
box-sizing:border-box;
}
.first_article{
float:left;
width:500px;
margin:25px;
}
.first_main_paragraph{
font-family:arial;
font-size:20px;
color:#846a5f;
margin-bottom:50px;
}
.second_main_paragraph{
font-family:arial;
font-size:13px;
color:#846a5f;
}
.first_article .contact_button{
float:left;
margin-top:165px;
}
.first_article .cupcake{
float:left;
margin-top:20px;
margin-left:19px;
}
.sidebar{
float:left;
margin:30px;
}
nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
width:39%;
}
nav ul li:hover a{
color:#e8d5cc;
}
nav ul li{
margin-bottom:3px;
background-color: #CBAFA2;
}
nav ul li:hover{
background-color: #3D2316;
}
.company_info{
background-color:#cbafa2;
padding:20px;
text-align:right;
margin-bottom:100px;
font-size:14px;
color:#3d2316;
font-family:myriad pro;
}
.about_section{
float:left;
width:500px;
margin:25px;
}
.about_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.about_text{
font-family:arial;
font-size:13px;
color:#846a5f;
}
.orders_section{
float:left;
width:500px;
margin:25px;
}
.orders_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.second_order{
margin-top:50px;
}
.order_text{
font-family:arial;
font-size:11px;
color:#846a5f;
}
.order_numbers{
color:#3D2316;
}
.gallery_section{
float:left;
width:600px;
margin:25px;
}
.gallery_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_section{
float:left;
width:500px;
margin:25px;
}
.contact_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_text{
font-family:arial;
font-size:13px;
color:#846a5f;
}
footer{
clear:both;
font-family:arial;
border-top:1px solid #aa8573;
height:100px;
}
footer p{
color:#784f3d;
margin:10px;
float:left;
}
footer ul li a{
text-decoration:none;
font-size:13px;
color:#784f3d;
margin:10px;
float:left;
}
footer ul li{
float:right;
}
footer ul li a:hover{
color:#3d2316;
}
figure{
float:left;
margin:25px;
}
figcaption{
text-align:center;
font-family:arial;
font-size:13px;
color:#846a5f;
margin-top:15px;
}
span{
font-family:arial;
font-size:15px;
color:#846a5f;
font-weight:bold;
}
mobile responsive code:
#media screen and (max-width:640px){
.container{
width:100%;
}
.sidebar{
width:100%;
margin:0;
}
.main_nav{
display:none;
}
.company_info{
display:none;
}
.first_article{
width:90%;
margin-top:50px;
}
footer p{
display:none;
}
.about_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.orders_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.contact_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.gallery_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.menu:before{
content:"Menu";
}
.menu{
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
background-color: #CBAFA2;
margin-bottom:3px;
cursor:pointer;
width:100%;
}
}
You have to cancel the default action with http://api.jquery.com/event.preventDefault/
If it's not enough, hide the element on DOM ready.
I have copied the javascript of iscroll-lite from here
html code
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
<div id="header" class="header">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>
<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>
The content of desc tag is going to overflow
CSS
.wrapper
{
position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif;
}
.header
{
float:left; height:100%; min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
float:left; padding:0%; margin:0%; height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%;
}
.images
{
position:relative; width:100%;
}
.description
{
float:left; width:100%; overflow:auto; height:100%;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px;
}
.desc p
{
margin-top:0;
}
.footer
{
width:100%; position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
.info
{
width:25%; float:right; padding-top:1%;
}
USING iscroll
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll()
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady()
{
scroll();
----
----
On scrolling,I just get the following
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
PROBLEM:
It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.
I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0
Please,Guide me!!
This is answered here.
The concept was implementing with the tags such as <ul> and <li> within the <wrapper> and <scroller> div.
Excellent answer!
i use i slider ( that i make myself ) and it's working .. but by clicking on the number of each tab
and i wanna make it go through each image automatically each 5 seconds or whatever ..
this is the html and javascript codes :
html :
<div class="slide2">
<div id="tabs">
<div id="content">
<div id="slide-6" class="tab-slide" style="display: block">
<div class="desc">
<div>Slide 6 - tab1</div>
</div>
</div>
<div id="slide-7" class="tab-slide">
<div class="desc" style="width:320px;padding-top:236px;height:120px;">
<h1>Slide 7 - tab2</h1>
</div>
</div>
<div id="slide-8" class="tab-slide">
<div class="desc" style="width:320px;">
<h1>Slide 8 - tab3</h1>
</div>
</div>
<div id="slide-9" class="tab-slide">
<div class="desc" style="width:320px;">
<h1>Slide 9 - tab4</h1>
</div>
</div>
</div>
<ul id="nav2">
<li><a class="current" id="tab-6" href="#tab">Tab1</a></li>
<li><a id="tab-7" href="#tab">Tab2</a></li>
<li><a id="tab-8" href="#tab">Tab3</a></li>
<li><a id="tab-9" href="#tab">Tab4</a></li>
</ul>
</div>
javascript :
$(function(){
$('#tabs #nav2 li a').click(function(){
var currentNum = $(this).attr('id').slice(-1);
$('#tabs #nav2 li a').removeClass('current');
$(this).addClass('current');
$('#tabs #content .tab-slide').hide(1);
$('#tabs #content #slide-'+currentNum+'.tab-slide').show(300);
});
$('#tabsSlide #nav2 li a').click(function(){
var currentNum = $(this).attr('id').slice(-1);
$('#tabsSlide #nav2 li a').removeClass('current');
$(this).addClass('current');
$('#tabsSlide #content .tab-slide').slideUp(300);
$('#tabsSlide #content #slide-'+currentNum+'.tab-slide').slideDown(300);
});
});
CSS :
.slide2 {
margin:0 auto;
padding:0;
width:574px;
}
#tabs {
width:574px;
margin:0 auto;
padding:0;
}
#tabs #nav2 {
float: right;
margin:0;
padding:0px;
list-style-type:none;
width:574px;
}
#tabs #nav2 li{
display:inline;
}
#tabs #nav2 li a {
display:block;
width:25%;
text-align:center;
float:right;
padding:0;
margin:0;
height:55px;
line-height:55px;
color:#0096d6;
text-decoration:none;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
background-image: url('images/slide/a.png');
}
#tabs #nav2 li a:hover {
background:#dddede;
}
#tabs #nav2 li a.current {
background:#dddede;
color:#666666;
}
#tabs #content {
padding:0px;
clear: both;
text-align: right;
min-height: 366px;
}
#tabs #content ul {
list-style-type:none;
color:#c1c0c0;
}
.tab-list {
width:115px;
float:right;
line-height:200%;
margin:0px 10px 0px 0px;
padding:0px 0px 0px 0px;
color:#c1c0c0;
}
.tab-list a {
color:#c1c0c0;
}
.tab-list a:hover {
color:#0198d8;
}
#tabs #content .tab-slide { display: none; }
#tabs #content .tab-slide p {
margin:0;
padding: 0;
font: 11px tahoma;
line-height: 150%;
}
.slide2 #slide-6 {
background-image: url('images/slide/1.jpg');
width:574px;
height:366px;
}
.slide2 #slide-7 {
background-image: url('images/slide/2.jpg');
width:574px;
height:366px;
}
.slide2 #slide-8 {
background-image: url('images/slide/3.jpg');
width:574px;
height:366px;
}
.slide2 #slide-9 {
background-image: url('images/slide/4.jpg');
width:574px;
height:366px;
}
Thanks!
and i don't need the mouseover pause ..
i just want to make the content move automatically that's all !
This should cycle for you (every 5 seconds)...without all of your code, and adding hooks into it, this seems the simplest way. It will not pause the cycle timer when on mouseover as many sliders do, unless you add that functionality as well.
var to;
function cycle() {
$('#tabsSlide #nav2 li a').click();
to = setTimeout(cycle,5000);
}
cycle();
Note, to add the pause effect, you need to stop/restart the timeout call by clearing the timeout on mouseover and resuming on mouseout. if you want to resume the timer instead of restarting it, you need to do some math to do that as well.
I'm building a menu that allows the user to hover over the given topic, and a menu drops down to reveal an array of different options.
Everything works fine in Safari, Chrome, Firefox, Opera, IE9 - IE8 (non-compatability view), but IE7 is doing something weird.
In HTML, my menu is built like this:
<div id="menu_container">
<div id="menu_collapse">
<div id="menu">
<div id="home_button">
</div>
<ul>
<li>Television</li>
<li>Radio</li>
<li>Get Involved</li>
<li>Non-Profit Services</li>
<li>Education</li>
<li>Donate</li>
<li>Extra</li>
</ul>
</div>
<div id="search_menu">
<div id="socialcons">
<img src="css/img/twitter.jpg">
<img src="css/img/facebook.jpg">
</div>
<input type="text" name="search">
<button></button>
</div>
</div>
</div>
</div>
My CSS looks like this:
#menu_container
{
clear:both;
float:left;
width:1000px;
}
#menu
{
float:left;
width:700px;
height:50px;
background-color:#654a6f;
}
#home_button
{
height:50px;
width:40px;
float:left;
background-image:url('img/home.jpg');
background-repeat:no-repeat;
}
#menu ul
{
background-color:#485860;
}
#menu li img
{
margin:0;
padding:0;
}
#menu li
{
float:left;
color:#ffffff;
line-height:50px;
padding-left:15px;
padding-right:15px;
text-shadow:1px 1px 2px #3e204d;
}
#menu li.active
{
background-image:url('img/menu_hover.jpg');
background-repeat:no-repeat;
background-position:bottom center;
}
#menu li:hover
{
background-image:url('img/menu_hover.jpg');
background-repeat:no-repeat;
background-position:bottom center;
}
#menu_collapse
{
position:absolute;
float:left;
width:1000px;
height:50px;
background-image:url('img/menu_collapse_bg.jpg');
background-repeat:repeat-x;
background-color:#ffffff;
z-index:99999;
}
#search_menu
{
height:40px;
width:295px;
padding-right:5px;
padding-top:10px;
float:right;
line-height:50px;
background-image:url('img/search_menu.jpg');
background-repeat:no-repeat;
}
#search_menu input
{
float:left;
width:140px;
}
#search_menu button
{
height:32px;
width:32px;
border:0;
outline:0;
float:left;
background-image:url('img/search.jpg');
}
#socialcons
{
height:32px;
width:75px;
float:left;
margin-left:20px;
margin-right:10px;
line-height:0;
}
#socialcons img
{
margin-left:3px;
}
And here is my JQuery, Javascript:
$(document).ready(function() {
$('#menu li').mouseover(function() {
$('.active').removeClass('active');
$('#menu_collapse').animate({height:'210'}, 300);
$('#menu li').mouseout(function() {
$(this).addClass('active');
});
});
$('#menu_collapse').hover(function(){},function(){
$('#menu_collapse').animate({height:'50'}, 300);
$('.active').removeClass('active');
});
});
In IE7, and all "compatible" modes with IE, the div #menu_collapsable animates back up when I hover of it, thus defeating the purpose of having it.
Help!!
$(document).ready(function() {
$('#menu li').hover(
function(){
$('.active').removeClass('active');
$('#menu_collapse').animate({height:'210'}, 300);
},
function(){
$(this).addClass('active');
}
);
$('#menu_collapse').mouseleave(function(){
$(this).animate({height:'50'}, 300);
$('.active').removeClass('active');
});
});