So..
I've been trying to dynamically load content but when I click on the menu loader shows only. It seems I can't figure this out, can you please look at the code and tell me if I missed something or did wrong?
this is my html
<body>
<div id="wrapper">
<div id="top">
<div id="logo">
<img src="images/logo.png"/>
</div>
<div id='cssmenu'>
<ul id="nav">
<li class='has-sub'>Storitve
<ul>
<li>Grafično oblikovanje</li>
<li>Spletno oblikovanje</li>
<li>Industrijsko oblikovanje</li>
</ul>
</li>
<li>Reference</li>
<li>Cenik</li>
<li class='last'>Kontakt</li>
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<p>©Copyright 2015</p>
</div>
</div>
</body>
</html>
..and js
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
and css
body { width:100%;
height:100%;
margin:0px;
padding:0px;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
text-align:center;
background:#BFBFBF;
padding-bottom:60px;
}
#logo { float:left;
position: fixed;
margin-top: 20px;
margin-left: 20px;
margin-bottom:20px;
z-index: 2000;
}
#top { position:relative;
top: 0px;
left:0px;
width:945px;
height: 160px;
background-color: white;
z-index:auto;
opacity: ;
}
#cssmenu { float:right;
position:fixed;
margin-top:123px;
margin-left:554px;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 11px;
line-height: 15px;
text-transform: uppercase;
text-align: left;
z-index:3;
}
#cssmenu > ul { width: auto;
list-style-type: none;
padding: 0;
margin: 0;
}
#centeredmenu ul ul {
z-index: 1 !Important;
}
#wrapper { width: 945px;
margin:0px auto;
background: #BBB;
position:relative;
border: ;
}
#content { width:880px;
background-color:white;
border: px solid white;
margin: 10px auto;
padding: 0 30px;
}
#footer { position:fixed;
bottom:0;
left:0;
width:100%;
height:40px; /* Height of the footer */
background:white;
}
#load {
display: none;
position: absolute;
right:460px;
top: 380px;
background: url(../images/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}
You are removing your loader from the DOM:
$('#load').remove();
yet after that you try to fade it in while it does not exist:
$('#load').fadeIn('normal');
Replace the .remove() with a .hide() call to hide it, but not remove it from the DOM.
This is my navigation menu and what I'm trying to make is when I click on navigation, it dynamically loads the requested page into a content div with jQuery.
<div id='cssmenu'>
<ul id="nav">
<li>Domov</li>
<li class='has-sub'>Storitve
<ul>
<li>Grafično oblikovanje</li>
<li>Spletno oblikovanje</li>
<li>Industrijsko oblikovanje</li>
</ul>
</li>
<li>Reference</li>
<li>Cenik</li>
<li class='last'>Kontakt</li>
</ul>
</div>
</div>
<div id="content"></div>
And I changed JS code into:
$(document).ready(function() {
// initial
$("#content").load("content/index.html");
// handle menu click
$("ul#nav li a").click(function() {
var page = $(this).attr("href") ;
$("#content").load("content/" + page + ".html");
return false;
});
});
but it's working just on 2 menu buttons.
Related
I have a page with an initial description, followed by 2 buttons, where the user can choose typeA or typeB. They work by "target": when the user clicks typeA comes the content relative to typeA, bellow the buttons; same to typeB.
typeA is the most common selection, then, when the page loads, a javascript emulates the click to typeA and opens respective content. To avoid hidden the initial description, there is another javascript to put the page at the top. Worked on Chrome and Edge, not on Firefox.
I would like to repeat the same process when the user clicks: opens the respective content, but positioning the page at the top, or, at least, showing the buttons. I thought event onClick calling the same js backToTop would worked - but not.
I put an alert on js and enters there but not execute: always keeps the content of the button selected in its better visibility.
I tried:
window.location.href = '#top';
window.scrollBy(0, -500);
document.html.scrollTop = document.documentElement.scrollTop = 0;
without success.
What am I doing wrong?
<head>
<meta charset="UTF-8">
<title>TOP PAGE TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html {margin-left:auto; margin-right:auto;width:70%; font-family:verdana; font-size:1.2em;}
.menuFAQ {background:#aaa; font-size:2em; width:100%;}
.menuFAQ ul {list-style-type:none; position:relative; margin-left:-40px; /* to avoid user agent chrome */}
.menuFAQ li {display:inline-block; margin-top:10px; margin-bottom:10px; width:49%; background:#fff; text-align:center; box-shadow:2px 3px 4px 0px rgba(170,170,170,1); font-weight:400; line-height:80px;}
.menuFAQ li a {display:block; color:#020062; background:#fff; font-weight:400; text-decoration:none;}
.menuFAQ li .active,.menuFAQ li:hover a {color:#fff; font-weight:400; background-image:linear-gradient(#165686, #0f3a5a); }
:target {color:#fff;font-size:1em;}
div.items>div:not(:target) {display:none}
div.items>div:target {display:block; margin-left:auto; margin-right:auto; color:#000; border:1px solid #aaa;}
</style>
</head>
<body>
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p><p>text2B</p><p>text3B</p>
<br>[...]
</nav>
</div>
</div>
<script>
const allTargetLinks = document.querySelectorAll('.target')
allTargetLinks.forEach(targetLink => {
targetLink.addEventListener('click', () => {
allTargetLinks.forEach(targetLink => {
targetLink.classList.remove('active')
})
targetLink.classList.add('active')
})
})
window.onload = function() {assignPreferedFAQ()};
function assignPreferedFAQ() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
//document.html.scrollTop = document.documentElement.scrollTop = 0;
//document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>
You had a real mess there regarding how you process click events and href attribute, i.e:
You had onclick attribute on your links, and you were adding yet another listener to them in JS
You didn't event.preventDefault() in your function, and default browser behavior when you click on a link is to get you to its href path
I've cleaned up a bit and changed some things. Since we need to prevent default behavior :target selector will no longer work, so instead I did what you've already been doing with links, and added an active class to your content. clickHandler() will now remove and add class active as necessary. At the end just scroll to the top. Here's the snippet:
document.querySelectorAll('.target').forEach(targetLink => targetLink.addEventListener('click', clickHandler, false));
function clickHandler(ev) {
ev.preventDefault(); // prevent browser from automatically scrolling to href pos
if (!ev.currentTarget.classList.contains('active')) {
// disable active elements
document.querySelector('.target.active').classList.remove('active');
document.querySelector('.items div.active').classList.remove('active');
// add class to the clicked on button and its corresponding content tab
ev.currentTarget.classList.add('active');
// to prevent pointless string slicing below, you'd have to store ids somewhere else i.e in the data-id attribute
const id = ev.currentTarget.href.slice(ev.currentTarget.href.lastIndexOf('#') + 1);
document.getElementById(id).classList.add('active');
}
window.scrollTo(0,0);
}
* {
font-family: verdana;
font-size: 1em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
text-align: center;
padding: 0;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
width: 48%;
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
div.items>div {
display: none;
}
div.items>div.active {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a class="target active" href="#typeA">TypeA</a></li>
<li><a class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div class="active" id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</div>
Note that instead of artificially clicking at the page load, now your content just loads with class active.
Hope this help you.
< script >
window.onload = function() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
//alert("enter backToTop");
var elmnt = document.getElementById("top");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
}; <
/script>
body,
html {
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: verdana;
font-size: 1.2em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
position: relative;
margin-left: -40px;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 49%;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
:target {
color: #fff;
font-size: 1em;
}
div.items>div:not(:target) {
display: none
}
div.items>div:target {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div> <br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5<br>textExp6<br>textExp7<br>textExp8<br>textExp9<br>textExpA<br>textExpB<br>textExpC<br>textExpD
<br>textExpE
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</di
I came across this JSFiddle online whilst searching for a solution. It almost does what I need except I need to start with the div being hidden. I've tried playing around with it but being new to JS I've not had much luck.
I thought I'd put this here as a starting point to see if anyone could advise on the route I would need to take?
Any help would be appreciated.
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
$('.pbox:visible').fadeOut('slow', function () {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
});
});
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
position:relative;
float:left;
border-bottom:4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
border-bottom:4px solid #3d496a;
}
ul#menu li a {
padding:2px 2px;
text-decoration:none;
font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color:#68759c;
}
ul#menu li a:hover {
color:#8895b8;
border:none;
}
#div1 {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
Just add display: none; in css to an element which you want to be hidden.
And remove class="active" from first li so that it's not chosen.
And modify js a little bit. See your function only shows a div if previously it hid. And if you start with all hidden it won't hide anything therefore it won't show anything.
$(document).ready(function() {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function() {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
var visibleElements = $('.pbox:visible');
if (visibleElements.length <= 0) {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
} else {
visibleElements.fadeOut('slow', function() {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
}
});
});
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul#menu li {
position: relative;
float: left;
border-bottom: 4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom: 4px solid #3d496a;
}
ul#menu li:hover {
border-bottom: 4px solid #3d496a;
}
ul#menu li a {
padding: 2px 2px;
text-decoration: none;
font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color: #68759c;
}
ul#menu li a:hover {
color: #8895b8;
border: none;
}
.pbox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
EDIT
If you want to hide all the divs on click anywhere else here is how to:
It's actually pretty easy.
We bind click event to document and check what was clicked.
If it was div with content (#div1, #div2 etc.) or if it is menu element we do not want to hide the div, but else we do.
$(document).on('click', function(e) {
if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
$('.pbox').fadeOut('slow');
$("#menu .current").removeClass("current");
}
});
e.target returns an element which (in this case) was clicked. If it has class pbox it means this is a div with content.
Second condition is menu element. If .closest() function
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
returns an element with id="menu" it means that we clicked on an element inside the menu.
Notice the exclamation mark. It means that if the condition is false return true. So if we did not click the div with content and if we did not click menu element then we hide the div.
I hope you understand what I mean :)
$(document).ready(function() {
$('#menu').on('click', 'a', function() {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
var visibleElements = $('.pbox:visible');
if (visibleElements.length <= 0) {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
} else {
visibleElements.fadeOut('slow', function() {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
}
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
$('.pbox').fadeOut('slow');
$("#menu .current").removeClass("current");
}
});
});
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul#menu li {
position: relative;
float: left;
border-bottom: 4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom: 4px solid #3d496a;
}
ul#menu li:hover {
border-bottom: 4px solid #3d496a;
}
ul#menu li a {
padding: 2px 2px;
text-decoration: none;
font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color: #68759c;
}
ul#menu li a:hover {
color: #8895b8;
border: none;
}
.pbox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
i just delete the class "current". but first div still appear, so i create another div, empty, and it works :)
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
$('.pbox:visible').fadeOut('slow', function () {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
});
});
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
position:relative;
float:left;
border-bottom:4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
border-bottom:4px solid #3d496a;
}
ul#menu li a {
padding:2px 2px;
text-decoration:none;
font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color:#68759c;
}
ul#menu li a:hover {
color:#8895b8;
border:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div5"></div>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
Delete class="current", so none is active at the beginning,
and then set the first div to display:none;
I am trying to make an iframe fade out then fade in but I can't seem to get the code right. I think I am pretty close but for some reason the code acts as if my jquery isn't there. Can someone identify where I went wrong?
HTML
<body>
<center>
<div class="headbackground">
<h1 class="headfont1"> Kellen's Homepage</h1>
<div id="menubar">
<a id="menulink" href="homepage.html" target="iframe1"> Homepage </a>
<a id="menulink" href="about.html" target="iframe1"> About Me </a>
<a id="menulink" href="projects.html" target="iframe1"> Projects </a>
<a id="menulink" href="resume.html" target="iframe1"> Resume </a>
</div>
</div>
</center>
<div id="iframediv">
<iframe id="iframe1" name="iframe1" src="" frameborder="0"></iframe>
</div>
</body>
CSS
.headbackground {
background-color:RGBa(0,0,0,.75);
z-index:2;
margin-top:0;
}
div#menubar {
padding: 24px;
}
div#menubar > a {
font:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:17px;
background:#333;
padding: 12px 24px;
color: #999;
margin-right: 10px;
text-decoration:none;
border-radius:3px;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar > a:hover {
background:#36F;
color:#FFF;
z-index:2;
}
#iframe1 {
position: absolute;
left: 0px;
top: 215px;
width: 100%;
height: 100%;
z-index:1;
}
body {
background-image:url(images/ronaldo-elche-real-madrid-live-bale-isco-best-team-celebrating-goal.jpg);
background-repeat:repeat-y;
background-position:top center;
background-attachment:fixed;
background-size:cover;
margin:0;
overflow:scroll;
}
jQuery
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(document).ready(function () {
$('div#menubar > a').click(function(){
var iframeSrc = $(this).attr('href');
$('#iframediv').fadeOut(1000,function(){
$('#iframediv iframe').attr('src',iframeSrc);
$('#iframediv').fadeIn(1000);
});
return false;
});
});
</script>
that's because to the browser, your code isn't there. Your code needs to be in a separate script tag.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('div#menubar > a').click(function(){
var iframeSrc = $(this).attr('href');
$('#iframediv').fadeOut(1000,function(){
$('#iframediv iframe').attr('src',iframeSrc);
$('#iframediv').fadeIn(1000);
});
return false;
});
});
</script>
Can someone please take a moment to look over this and let me know where I am going wrong in my code?
For some reason, the content div won't change when the buttons are clicked.
It's very simple, and right now I feel very confused for not being able to find my error.
CSS:
#wrapper {
margin: 0 auto;
width:100%;
max-height: 133px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
}
#buttons {
width:340px;
float: left;
height: 133px;
margin: 10px 10px 0 0px;
border-right: 1px solid #666;
}
#button1 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-position: -292px 0px;
background-repeat:no-repeat;
float:left;
margin-right:20px;
}
#button1 a:hover {
background-position: -292 -105px;
}
#button1 a:active {
background-position: -292 -210px;
}
#button2 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-repeat:no-repeat;
background-position: -438px 0;
float:left;
}
#button2 a:hover {
background-position: -438px -105px;
}
#button2 a:active {
background-position: -438px -210px;
}
#content {
font-family: Arial, Helvetica, sans-serif;
float: left;
display:block;
}
a {
text-decoration:none;
}
ul {
overflow:hidden;
margin: 10px 0 0 8px;
padding:0;
}
li{
line-height:1.5em;
display:inline;
}
#content1 {
color:#953735;
}
#content2 {
color:#604a7b;
}
JavaScript:
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
HTML:
<div id="wrapper">
<div id="button">
<div id="button1">
</div>
<div id="button2">
Reporting Administrator
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
</body>
</html>
The selector $('button') is the problem. You don't want to select a button - element but an element within the div #button, am I right?
So you should take $("#button a") as selector, if you want to append the event handler to all links within the #button element.
David Müller had it correct regarding the button selector being an issue.
The switching wasn't occurring with the event on the link because the index of the links will be 0 since both are only children. If the event is instead on the parent div, the switching works. Below is a jsfiddle and the code.
http://jsfiddle.net/VrKsh/2/
<div id="wrapper">
<div id="button">
<div id="button1">
Content1
</div>
<div id="button2">
Content2
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#button div').bind('click', function() {
$('div#content div:visible').hide();
$('div#content' + ($(this).index() + 1)).show();
});
</script>
I've got a toggle menu, please see code and function in JsFiddle
When you click on a h3 tag eg Category 1 which is an a tag, the menu opens and stays open on the linking/current page.
However when you click on h3 tag (Category1) again or any submenu for Category 1 eg Option 1, the menu collapses close and then open again on the current page.
Is there any way I can avoid the closing and opening function when you click on any of the links on the current page?
Any code or examples would be appreciated.
Thanks in advance.
http://jsfiddle.net/LcsLr/33/
HTML
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="productmenu">
<div class="submenublock" id="submenu1">
<h3>
<a href="#" class="link" >Category 1</a>
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
<div class="submenublock" id="submenu2">
<h3>Category 2</h3>
</div>
<div class="submenublock" id="submenu3">
<h3>
Category 3
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li><a href="#" class="linkx">Option 1
</a></li>
<li><a href="#" class="linkx">Option 2
</a></li>
<li><a href="#" class="linkx">Option 3
</a></li>
</ul>
</div>
</div>
</body>
JS
$(document).ready(function() {
$('h3,.second_level li').each(function(){
var href = $(this).children('a').attr('href');
if(window.location.pathname.search(href) != -1) {
$(this).children('a').addClass('currentPage')
}
});
$('.currentPage').each(function(){
var parent;
if($(this).parent('h3').length > 0){
parent = $(this).parent('h3');
}
else{
parent = $(this).parents('ul').siblings('h3');
}
$(parent).children('.arrow').addClass('open');
$(parent).siblings('ul').show();
});
$('.link').click(function() {
OpenParent($(this).parent('h3'));
window.location = $(this).attr('href');
});
$('.arrow').click(function(e){
e.preventDefault();
OpenParent($(this).parent('h3'));
});
});
function OpenParent(CurrentParent){
var currentArrow = $(CurrentParent).children('.arrow');
$('.open').not(currentArrow ).removeClass('open').parent().siblings('ul').slideUp('fast');
currentArrow.toggleClass('open');
$(CurrentParent).next().slideToggle('fast');
}
CSS
#sidebar {
float:left;
width:220px;
}
#productmenu { width:220px; margin-left: 0px;}
.submenublock{
margin: 0px;
padding: 0px;
}
.submenublock h3{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0px;
border-bottom:#CCC 1px solid;
}
.submenublock h3 a{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-decoration:none;
color: #000000;
}
.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}
.second_level{
list-style-type:none;
list-style:none;
margin:0px;
padding:0px;
}
.second_level li{
list-style-type:none;
list-style:none;
display: block;
border-bottom:#CCC 1px dashed;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
/* background:url(images/menuarrowright.gif) no-repeat right;*/
}
.second_level li a{
display: block;
margin-left:15px;
text-decoration:none;
color:#000000;
}
#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}
.second_level{
display:none;
}
a.currentPage{
color:blue !important;
}
.link{
padding:10px;15px;
display:block;
}
.linkx{
padding:10px;15px;
display:block;
}
.arrow{
background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px;
float:right;
height:17px;
width:13px;
margin-top:-27px;
}
.open{
background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px;
}
</style>