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.
Related
I'm working on blogger and I've been trying to make a menu with some dropdowns using JQuery but for some reason it isn't working on Blogger, in my pc it works just fine. I've added the scripts and the style to the page HTML and then I placed the body on a HTML block but it doesn't work there.
Picture from the blog structure with the HTML Block
Here's the demo I'm using on my pc.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.menu {
padding:10px 0;
width: 500px;
}
.menu ul {
list-style-type:none;
margin:0;
padding:0;
}
.menu ul li {
display:inline-block;
position:relative;
}
.menu ul li ul {
background-color:rgb(225,75,75);
position:absolute;
left:0;
top:40px; /* make this equal to the line-height of the links (specified below) */
width:200px;
}
.menu li li {
position:relative;
margin:0;
display:block;
}
.menu li li ul {
position:absolute;
top:0;
left:500px; /* make this equal to the width of the sub nav above */
margin:0;
}
.menu a {
line-height:40px;
padding:0 12px;
margin:0 12px;
}
.menu a {
color:#000;
text-decoration:none;
display:block;
}
.menu a:hover,
.menu a:focus,
.menu a:active {
color:rgb(255,00,00);
}
/* style sub level links */
.menu li li a {
border-bottom:solid 1px rgb(200,50,50);
margin:0 10px;
padding:0;
}
.menu li li:last-child a {
border-bottom:none;
}
/* show arrows for dropdowns */
.menu li.dropdown > a {
background-image:url('../img/arrow-down.png');
background-position:right 20px;
background-repeat:no-repeat;
}
.menu li li.dropdown > a {
background-image:url('../img/arrow-right.png');
background-position:right 16px;
background-repeat:no-repeat;
}
/* hide sub menu links */
ul.sub-menu {
display:none;
}
</style>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(
function(){
$(this).children('.sub-menu').slideDown(200,stop());
},
function(){
$(this).children('.sub-menu').slideUp(200,stop());
}
);
function stop(){
$('.sub-menu').stop(true, true);
}
});
</script>
</head>
<body>
<div class="menu">
<ul >
<li>Home</li>
<li class="dropdown">Streams
<ul class="sub-menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</li>
<li>Guides</li>
<li>Reports</li>
</ul>
</div>
</body>
</html>
Edit:
I've also trying making an alert in the JQuery function and when the mouse passed over the menu the alert appears but the dropdown doesn't.
The answer to my own question is... Blogger's gadget for HTML/Javascript block applies some css that was making the bar not show up. You can either find a way to remove the css from the gadget or simply place your HTML code on the HTML page.
I have two drop menus that I need to close when a user clicks outside of them, or on the other drop menu. I have tried several methods without success and only one works slightly. Currently, the "state" menu will open and close properly (the first time) and then not work correctly the second time. but will work properly the 3rd time, and so on. Not sure what's going on here. Any help would be great!
Here's my fiddle: http://jsfiddle.net/SteveSerrano/rc7fhhhu/6/
HTML:
<div class="state_box">
<input type="checkbox" id="state-tgl" onblur="myFunction()">
<label id="state-tgl-label" for="state-tgl"> <span class="collapse_tiny">Choose a state</span>
<img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
</label>
<ul class="state-menu" id="state_drop-menu">
<li class="option"><span class="collapse_tiny">Connecticut</span>
</li>
<li><span class="collapse_tiny">New Hampshire</span>
</li>
<li><span class="collapse_tiny">New Jersey</span>
</li>
<li><span class="collapse_tiny">New York</span>
</li>
</ul>
</div>
<br>
<br>
<br>
<div class="carrier_box">
<input type="checkbox" id="carrier-tgl">
<label id="carrier-tgl-label" for="carrier-tgl"> <span class="collapse_tiny">Select a carrier</span>
<img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
</label>
<ul id="carrier_drop-menu">
<li><span class="collapse_tiny">Carrier 1</span><span class="collapse expand_tiny inline">Conn.</span>
</li>
<li><span class="collapse_tiny">Carrier 2</span><span class="collapse expand_tiny inline">N.H.</span>
</li>
<li><span class="collapse_tiny">Carrier 3</span><span class="collapse expand_tiny inline">N.J.</span>
</li>
<li><span class="collapse_tiny">Carrier 4</span><span class="collapse expand_tiny inline">N.Y</span>
</li>
</ul>
</div>
<br>
<br>
CSS:
.state_box {
margin-bottom:-9px;
width:320px;
}
#state-tgl-label {
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:15px;
background-color:rgba(6, 0, 0, 0.09);
}
.state_box ul {
margin:0;
padding:0;
list-style-type: none;
}
.state_box ul li {
display:inline;
}
.state_box ul ul {
display:inline;
}
.state_box ul li a {
text-decoration:none;
padding-left:16px;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
font-weight:500;
font-size:23px;
font-size:2.3rem;
text-transform:uppercase;
vertical-align:-8px;
color:#939598;
}
.state_box ul li a.first_state {
padding-left:0px;
}
.state_box ul li .third_level {
color:#a7a9ac;
font-size:18px;
font-size:1.8rem;
vertical-align:-5px;
}
.state_box ul li .fourth_level {
color:#BCBEC0;
font-size:14px;
font-size:1.4rem;
vertical-align:-3px;
}
.state_box ul li a:hover {
color:#808285;
}
.state_box ul li .selected_state {
font-size:36px;
font-size:3.6rem color:#000000;
text-transform:uppercase;
vertical-align:text-top;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
}
#state-tgl {
position:absolute;
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* Real Browsers */
opacity:0;
}
#state-tgl-label {
font-size:28px;
font-size:1.8rem;
color:#000000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
/*font-weight:500;*/
display:block;
}
#state-tgl-label img {
float:right;
margin-top:5px;
}
#state_drop-menu {
position:relative;
z-index:9999;
background-color:rgba(6, 0, 0, 0.09);
/*border:solid 2px black;*/
width:320px;
padding-top:8px;
padding-bottom:8px;
display:none;
max-height:0px;
transition: max-height 0.25s ease;
margin-top:10px;
}
#state_drop-menu li {
display:block;
padding:0px;
margin:0px;
width:100%;
}
#state_drop-menu li a {
font-size:36px;
font-size:1.8rem;
color:black;
padding:0px;
margin:0px;
display:block;
padding-left:8px;
padding-right:8px;
}
#state_drop-menu li a:hover {
color:white;
background-color:black;
}
#state-tgl:checked ~ #state_drop-menu {
display:block;
max-height:1000px;
}
/*########### Carrier Drop Menu ############*/
.carrier_box {
margin-bottom:-9px;
width:320px;
}
.carrier_box ul {
margin:0;
padding:0;
list-style-type: none;
}
.carrier_box ul li {
display:inline;
}
.carrier_box ul ul {
display:inline;
}
.carrier_box ul li a {
text-decoration:none;
padding-left:16px;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
font-weight:500;
font-size:23px;
font-size:2.3rem;
text-transform:uppercase;
vertical-align:-8px;
color:#939598;
}
.carrier_box ul li a.first_carrier {
padding-left:0px;
}
.carrier_box ul li .third_level {
color:#a7a9ac;
font-size:18px;
font-size:1.8rem;
vertical-align:-5px;
}
.carrier_box ul li .fourth_level {
color:#BCBEC0;
font-size:14px;
font-size:1.4rem;
vertical-align:-3px;
}
.carrier_box ul li a:hover {
color:#808285;
}
.carrier_box ul li .selected_carrier {
font-size:36px;
font-size:3.6rem color:#000000;
text-transform:uppercase;
vertical-align:text-top;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
}
#carrier-tgl {
position:absolute;
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* Real Browsers */
opacity:0;
}
#carrier-tgl-label {
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:15px;
background-color:rgba(6, 0, 0, 0.09);
font-size:28px;
font-size:1.8rem;
color:#000000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
/*font-weight:500;*/
display:block;
}
#carrier-tgl-label img {
float:right;
margin-top:5px;
}
#carrier_drop-menu {
position:relative;
z-index:9999;
background-color:rgba(6, 0, 0, 0.09);
/*border:solid 2px black;*/
width:320px;
padding-top:8px;
padding-bottom:8px;
display:none;
max-height:0px;
transition: max-height 0.25s ease;
margin-top:10px;
}
#carrier_drop-menu li {
display:block;
padding:0px;
margin:0px;
width:100%;
}
#carrier_drop-menu li a {
font-size:36px;
font-size:1.8rem;
color:black;
padding:0px;
margin:0px;
display:block;
padding-left:8px;
padding-right:8px;
}
#carrier_drop-menu li a:hover {
color:white;
background-color:black;
}
#carrier-tgl:checked ~ #carrier_drop-menu {
display:block;
max-height:1000px;
}
#charts {
margin-top:50px;
}
JQuery:
/*
$(document).click(function(){
$(".state-menu").hide();
});
$(".state_box").click(function(e){
e.stopPropagation();
});*/
$(".state_box").click(function(){
$(".state-menu").show(1);
$(document).click(function(){
$(".state-menu").hide();
});
});
/*function myFunction() {
$(document).click(function () {
$(".state-menu").hide(1);
});
}*/
Edited answer based on OPs comments below:
Working example here: http://jsfiddle.net/am83oczu/
Add a specific ID to each dropdown menu (example below uses id="state-dropdown" and id="carrier-dropdown").
You also need to remove the <input type="checkbox"> you have in place as its onblur attribute messes with everything.
$(document).on('click', function (event) {
// Show the states dropdown if this was clicked...
if (document.getElementById('state-tgl-label') === event.target ||
$.contains(document.getElementById('state-tgl-label'), event.target)) {
$('#carrier-dropdown').hide();
if ($('#state-dropdown').is(':visible')) {
$('#state-dropdown').hide();
} else {
$('#state-dropdown').show(1);
}
}
// ... or show the carrier dropdown if this was clicked
if (document.getElementById('carrier-tgl-label') === event.target ||
$.contains(document.getElementById('carrier-tgl-label'), event.target)) {
$('#state-dropdown').hide();
if ($('#carrier-dropdown').is(':visible')) {
$('#carrier-dropdown').hide();
} else {
$('#carrier-dropdown').show(1);
}
}
});
Following is not a very good solution - but this is based on the current structure of your html (as in jsFiddle) and my understanding of what you are trying to do...
$(".state_box").click(function (e) {
e.stopPropagation();
e.preventDefault();
$("#carrier_drop-menu").hide();
$('#state-tgl').prop('checked', true);
$(".state-menu").show();
});
$(".carrier_box").click(function (e) {
e.stopPropagation();
e.preventDefault();
$(".state-menu").hide();
$('#carrier-tgl').prop('checked', true);
$("#carrier_drop-menu").show();
});
$(document).click(function () {
$(".state-menu").hide();
$("#carrier_drop-menu").hide();
$('#state-tgl').prop('checked', false);
$('#carrier-tgl').prop('checked', false);
});
See jsFiddle here
Edit Based on comments - the code is updated to:
/*As initially the menus are hidden using css class
So toggle won't work for the first time.
So we need to add these two lines*/
$("#carrier_drop-menu").hide();
$(".state-menu").hide();
$(".state_box").click(function (e) {
e.stopPropagation();
e.preventDefault();
$("#carrier_drop-menu").hide();
$('#state-tgl').prop('checked', true);
$(".state-menu").toggle();
});
$(".carrier_box").click(function (e) {
e.stopPropagation();
e.preventDefault();
$(".state-menu").hide();
$('#carrier-tgl').prop('checked', true);
$("#carrier_drop-menu").toggle();
});
$(document).click(function () {
$(".state-menu").hide();
$("#carrier_drop-menu").hide();
$('#state-tgl').prop('checked', false);
$('#carrier-tgl').prop('checked', false);
});
Updated JsFiddle here.
Let's try by using this method here http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/
You should manage to do what you want by following accordion menu tuto.
I'm fairly new to jQuery and advanced CSS. I was wondering if anyone could take a look at my code and help me get this working. Basically, the gray box on the left is supposed to be fixed and follow you as the page scrolls(that works). Essentially, I want to have the tabs in that gray scroll bar, and have the content of the tabs be displayed in the orange-ish flexbox on the right. I understand that my issue stems from the separation of the <ul> and content divs in HTML, because that's how jQuery reads the tabs. That being said, can anyone help me achieve what I'm looking for. The code is fairly convoluted, so any advice is welcome. I want to learn, so don't hold back!
$(document).ready(function () {
$('#menu').tabs();
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
});
body {
margin:0;
margin-top:10px;
padding:0px;
}
#wrapper {
border:1px solid black;
display:flex;
margin-left:300px;
margin-right:10px;
}
#scrollBar {
background-color:gray;
height:300px;
width:280px;
position:fixed;
margin:10px;
margin-top:0px;
}
#box1 {
background-color:#ffcc66;
height:1000px;
flex:1;
}
.tabs {
list-style-type: none;
margin:0;
padding:0;
z-index:10;
width:100%;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
.tabs a {
color:black;
position:relative;
text-decoration:none;
}
.tabs li:focus {
outline:none;
color:orange;
}
.tabs a:hover, .tabs a:focus {
color:blue;
}
.tabs a:focus, .tabs a:active {
outline: none;
cursor:pointer;
color:orange;
}
.ui-tabs-active a {
color:orange;
overflow:visible;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="scrollBar">
<div id="menu">
<ul class="tabs">
<li>Coding
</li>
<li>Photography
</li>
<li>About Me
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="box1">
<div id="coding" class="contentDiv">
<div class="fillerText">
<p>this is my code</p>
</div>
</div>
<div id="photography" class="contentDiv">
<div class="fillerText">
<p>these are my pictures</p>
</div>
</div>
<div id="info" class="contentDiv">
<div class="fillerText">
<p>this is my info</p>
</div>
</div>
</div>
</div>
</body>
Code: http://jsfiddle.net/yk55vufk/
I don't know why you have added this line :
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
In your code you don't have classes "ui-tabs-active", "ui-tabs-active", "ui-state-active"
some classes and jquery needs be fixed in your code :
Here is fiddle
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>
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');
});
});