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.
Related
I am pretty new to HTML, Java, and CSS and have been working on getting hovering elements to appear in different regions in a webpage. I have created this jfiddle which shows what I have thus far:
startList = function() {
var sfEls = document.getElementById("over").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
//first remove all existing classes of .over
for (var j=0; j<sfEls.length; j++){
sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
}
this.className+=" over";// now add class
}
}
}
// addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(startList);
<head>
* {
margin:0;
padding:0
}/* for demo only - use a proper reset of your own*/
body { padding:20px 10px }
a img {
display:block;
border:none;
}
.outer {
width:760px;
margin:auto;
border:1px solid #000;
padding:10px 10px 20px;
position:relative;/* stacking context*/
overflow:auto;
}
.outer2{
width:1000px;
margin:auto;
border:1px solid #000000;
position:relative;
}
.image-holder {
float:right;
margin:86px 10px 10px 0;
width:500px;
height:400px;
background:#fffccc;
border:1px solid #000;
padding:3px;
position:relative;
z-index:1;
display:inline;
}
ul.links {
list-style:none;
margin:0 20px;
padding:0;
border:1px solid #000;
border-bottom:none;
width:100px;
}
.links li {
width:100px;
background:blue;
color:#fff;
border-bottom:1px solid #000;
}
.links li a {
display:block;
width:90px;
padding:5px;
background:blue;
color:#fff;
text-decoration:none;
}
.links li a span, .links li a b {
position:absolute;
right:24px;
top:-999em;
width:500px;
height:400px;
z-index:2;
}
.links li a span img {
display:block;
margin:0 0 5px
}
.links li a:hover, .links li.over a {
background:teal;
color:#000;
visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
top:200px;
left:50px;
height:auto;
}
h1 {
text-align:center;
margin:1em 0;
}
</style>
</head>
<div class="outer2">
<b>list moves here</b>
<div class="outer">
<p class="image-holder"><img src="https://lol.html" width="500" height="400" alt="Image Goes Here" /></p>
<ul id="all" class="links">
<li><input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all</li>
</ul>
<ul id="over" class="links">
<li>Google<span><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="400" alt="NWS" /></span></li>
<li>Yahoo<span><img src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png" width="500" height="400" alt="SPC" /></span></li>
</ul>
</div>
</div>
https://jsfiddle.net/qbrnuwe6/6/
One can hover over 'Google', and an image appears in the box in the bottom-right. Similarly, if one hovers over 'Yahoo', a different image appears in the box in the bottom-right.
However, now, I want to create a checkbox that, when checked, the list of 'Google' and 'Yahoo' will appear outside of the 'inner box' and populate the area where it says 'list moves here'. I was hoping this could be achieved by some function such as:
<input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all
One should be able to still hover over 'Google' and 'Yahoo' to make the image appear in the bottom-right For some reason I am stuck on how to move the list properly. I am not sure if this would work better with HTML, Java, or CSS, so any sort of help would be appreciated.
If I understood you correctly this should do it:
function toggle_show(type)
{
const menu = document.getElementById("over");
if (document.getElementById("list_all").checked)
{
document.querySelector("div.outer2").appendChild(menu);
}
else
{
document.querySelector("div.outer").appendChild(menu);
}
}
startList = function() {
var sfEls = document.getElementById("over").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
//first remove all existing classes of .over
for (var j=0; j<sfEls.length; j++){
sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
}
this.className+=" over";// now add class
}
}
}
// addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(startList);
function toggle_show(type)
{
const menu = document.getElementById("over");
if (document.getElementById("list_all").checked)
{
document.querySelector("div.outer2").appendChild(menu);
}
else
{
document.querySelector("div.outer").appendChild(menu);
}
}
<head>
* {
margin:0;
padding:0
}/* for demo only - use a proper reset of your own*/
body { padding:20px 10px }
a img {
display:block;
border:none;
}
.outer {
width:760px;
margin:auto;
border:1px solid #000;
padding:10px 10px 20px;
position:relative;/* stacking context*/
overflow:auto;
}
.outer2{
width:1000px;
margin:auto;
border:1px solid #000000;
position:relative;
}
.image-holder {
float:right;
margin:86px 10px 10px 0;
width:500px;
height:400px;
background:#fffccc;
border:1px solid #000;
padding:3px;
position:relative;
z-index:1;
display:inline;
}
ul.links {
list-style:none;
margin:0 20px;
padding:0;
border:1px solid #000;
border-bottom:none;
width:100px;
}
.links li {
width:100px;
background:blue;
color:#fff;
border-bottom:1px solid #000;
}
.links li a {
display:block;
width:90px;
padding:5px;
background:blue;
color:#fff;
text-decoration:none;
}
.links li a span, .links li a b {
position:absolute;
right:24px;
top:-999em;
width:500px;
height:400px;
z-index:2;
}
.links li a span img {
display:block;
margin:0 0 5px
}
.links li a:hover, .links li.over a {
background:teal;
color:#000;
visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
top:200px;
left:50px;
height:auto;
}
h1 {
text-align:center;
margin:1em 0;
}
</style>
</head>
<div class="outer2">
<b>list moves here</b>
<div class="outer">
<p class="image-holder"><img src="https://lol.html" width="500" height="400" alt="Image Goes Here" /></p>
<ul id="all" class="links">
<li><input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all</li>
</ul>
<ul id="over" class="links">
<li>Google<span><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="400" alt="NWS" /></span></li>
<li>Yahoo<span><img src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png" width="500" height="400" alt="SPC" /></span></li>
</ul>
</div>
</div>
Can someone please help me to fix what I'm doing wrong here? I just want the styles to be applied to the divs after scrolling down from the top. Funny enough only the header-wrap id changes, but nothing else changes. Why is this? e.g. t1, slogan and navmenus don't change following scrolling, but header-wrap does.
Would really appreciate any help here. Thank you
$(document).ready(function() {
var headerWrap = $('#header-wrap');
var t1 = $('#t1');
var slogan = $('#slogan');
var navMenu = $('ul.nav-menu');
var navMenuLink = $('ul.nav-menu a:link');
var navMenuVisited = $('ul.nav-menu a:visited');
var navMenuHover = $('ul.nav-menu a:hover');
$(window).scroll(function () {
headerWrap.addClass('scroll-opacity-change');
t1.addClass('t1-on-scroll');
slogan.addClass('slogan-on-scroll');
navMenu.addClass('ul.nav-menu');
navMenuLink.addClass('ul.nav-menu a:link');
navMenuVisited.addClass('ul.nav-menu a:visited');
navMenuHover.addClass('ul.nav-menu a:hover');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
t1.removeClass('t1-on-scroll');
slogan.removeClass('slogan-on-scroll');
navMenu.removeClass('ul.nav-menu-on-scroll');
navMenuLink.removeClass('ul.nav-menu-on-scroll a:link');
navMenuVisited.removeClass('ul.nav-menu-on-scroll a:visited');
navMenuHover.removeClass('ul.nav-menu-on-scroll a:hover');
}
});
});
body{height:1000px;width:auto;}
#header-wrap{
background:#4E6273;
width:100%;
height:auto;
border-bottom: 2px solid #f4fafe;
position:fixed;
top:0;/* may not be needed but no harm in having */
z-index:100000;
/* margin:0 auto; needed? */
opacity:0.9;
}
.scroll-opacity-change{
opacity:0.9;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
background:#f4fafe !important;
border-bottom: 2px solid #94C8F2 !important;
}
#t1{
font-family:'Open Sans', sans-serif;
font-weight:100;
text-transform:none;
color:#E6E8EB;
font-size:24px;
}
#t1.t1-on-scroll{
color:#f00;
}
#slogan{
font-family:'Open Sans', sans-serif;
font-weight:100;
text-transform:uppercase;
font-size:12px;
color:#E6E8EB;
}
#slogan.slogan-on-scroll{
color:#f00;
}
ul.nav-menu{
list-style-type:none;
margin-left: 50px;
font-size:20px;
font-family:'Open Sans', sans-serif;
font-weight:400;
color:#E6E8EB;
padding:0;
margin:0 0 0 0;
text-decoration:none;
}
ul.nav-menu li{
display:inline-block;
margin-left:50px;
}
ul.nav-menu a:link{
color:#E6E8EB;
text-decoration:none;
}
ul.nav-menu a:visited{
color:#E6E8EB;
text-decoration:none;
}
ul.nav-menu a:hover{
color:#B4E9FF;
}
ul.nav-menu-on-scroll{
list-style-type:none;
margin-left: 50px;
font-size:20px;
font-family:'Open Sans', sans-serif;
font-weight:400;
color:#f0f;
padding:0;
margin:0 0 0 0;
text-decoration:none;
}
ul.nav-menu-on-scroll li{
display:inline-block;
margin-left:50px;
}
ul.nav-menu-on-scroll a:link{
color:#f0f;
text-decoration:none;
}
ul.nav-menu-on-scroll a:visited{
color:#f0f;
text-decoration:none;
}
ul.nav-menu-on-scroll a:hover{
color:#f00;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<header id="header-wrap">
<div id="header-top">
<div id="header-left-wrap">
<div id="header-text-wrap">
<div id="header-title-wrap">
<span id="t1">title<span id="t1-emphasis">acronym</span></span>
</div>
<div id="header-slogan-wrap">
<span id="slogan">slogan</span>
</div>
</div>
</div>
<div id="header-right-wrap">
<nav class="wrap">
<ul class="nav-menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
Your code is totally wrong!! You added the wrong classes to your nav-menus, and some of your code doesn't even make sense like addClass('ul.nav-menu a:link')or var navMenuVisited = $('ul.nav-menu a:visited');
navMenu.addClass('nav-menu-on-scroll');
...
navMenu.removeClass('nav-menu-on-scroll');
is all you need.
$(document).ready(function() {
var headerWrap = $('#header-wrap');
var t1 = $('#t1');
var slogan = $('#slogan');
var navMenu = $('ul.nav-menu');
$(window).scroll(function () {
headerWrap.addClass('scroll-opacity-change');
t1.addClass('t1-on-scroll');
slogan.addClass('slogan-on-scroll');
navMenu.addClass('nav-menu-on-scroll');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
t1.removeClass('t1-on-scroll');
slogan.removeClass('slogan-on-scroll');
navMenu.removeClass('nav-menu-on-scroll');
}
});
});
body{height:1000px;width:auto;}
#header-wrap{
background:#4E6273;
width:100%;
height:auto;
border-bottom: 2px solid #f4fafe;
position:fixed;
top:0;/* may not be needed but no harm in having */
z-index:100000;
/* margin:0 auto; needed? */
opacity:0.9;
}
.scroll-opacity-change{
opacity:0.9;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
background:#f4fafe !important;
border-bottom: 2px solid #94C8F2 !important;
}
#t1{
font-family:'Open Sans', sans-serif;
font-weight:100;
text-transform:none;
color:#E6E8EB;
font-size:24px;
}
#t1.t1-on-scroll{
color:#f00;
}
#slogan{
font-family:'Open Sans', sans-serif;
font-weight:100;
text-transform:uppercase;
font-size:12px;
color:#E6E8EB;
}
#slogan.slogan-on-scroll{
color:#f00;
}
ul.nav-menu{
list-style-type:none;
margin-left: 50px;
font-size:20px;
font-family:'Open Sans', sans-serif;
font-weight:400;
color:#E6E8EB;
padding:0;
margin:0 0 0 0;
text-decoration:none;
}
ul.nav-menu li{
display:inline-block;
margin-left:50px;
}
ul.nav-menu a:link{
color:#E6E8EB;
text-decoration:none;
}
ul.nav-menu a:visited{
color:#E6E8EB;
text-decoration:none;
}
ul.nav-menu a:hover{
color:#B4E9FF;
}
ul.nav-menu-on-scroll{
list-style-type:none;
margin-left: 50px;
font-size:20px;
font-family:'Open Sans', sans-serif;
font-weight:400;
color:#f0f;
padding:0;
margin:0 0 0 0;
text-decoration:none;
}
ul.nav-menu-on-scroll li{
display:inline-block;
margin-left:50px;
}
ul.nav-menu-on-scroll a:link{
color:#f0f;
text-decoration:none;
}
ul.nav-menu-on-scroll a:visited{
color:#f0f;
text-decoration:none;
}
ul.nav-menu-on-scroll a:hover{
color:#f00;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<header id="header-wrap">
<div id="header-top">
<div id="header-left-wrap">
<div id="header-text-wrap">
<div id="header-title-wrap">
<span id="t1">title<span id="t1-emphasis">acronym</span></span>
</div>
<div id="header-slogan-wrap">
<span id="slogan">slogan</span>
</div>
</div>
</div>
<div id="header-right-wrap">
<nav class="wrap">
<ul class="nav-menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
You need to load the jQuery library first, then your Javascript code must be in a function that ensures both jQuery and the document are present. Easiest way:
(function ready() {
if (!document.body || !window.$) {setTimeout(ready, 50); return;}
// Your Javascript code here
})();
Ok, I'm guessing your problem is, that you didn't wrap your code in document ready.
Your JS code should look like this:
$(document).ready(function() {
var headerWrap = $('#header-wrap');
var t1 = $('#t1');
var slogan = $('#slogan');
var navMenu = $('ul.nav-menu');
var navMenuLink = $('ul.nav-menu a:link');
var navMenuVisited = $('ul.nav-menu a:visited');
var navMenuHover = $('ul.nav-menu a:hover');
$(window).scroll(function () {
headerWrap.addClass('scroll-opacity-change');
t1.addClass('t1-on-scroll');
slogan.addClass('slogan-on-scroll');
navMenu.addClass('ul.nav-menu');
navMenuLink.addClass('ul.nav-menu a:link');
navMenuVisited.addClass('ul.nav-menu a:visited');
navMenuHover.addClass('ul.nav-menu a:hover');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
t1.removeClass('t1-on-scroll');
slogan.removeClass('slogan-on-scroll');
navMenu.removeClass('ul.nav-menu-on-scroll');
navMenuLink.removeClass('ul.nav-menu-on-scroll a:link');
navMenuVisited.removeClass('ul.nav-menu-on-scroll a:visited');
navMenuHover.removeClass('ul.nav-menu-on-scroll a:hover');
}
});
});
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 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');
});
});