I have an unordered list of links like so:
<ul id="linkwrapper">
<li><a name="latestBlog"class="menuLinks"id="link1"href="#latestBlog"><img src="images/blog.png" /></a></li>
<li><a name="meetings"class="menuLinks suckit"id="link2"href="#meetings"><img src="images/meetings.png" /></a></li>
<li><a name="aboutus"class="menuLinks suckit"id="link3"href="#aboutus"><img src="images/who_we_are.png" /></a></li>
<li><a name="contact"class="menuLinks"id="link4"href="#contact"><img src="images/contact.png" ,></a></li>
</ul>
I'm using the following javascript to cancel regular link behavior and display a different div depending on which link is clicked.
<script type="text/javascript">
$(document).ready(function(){
var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs
$(document).ready(function() {
$('#link1').trigger('click');
});
$('#linkwrapper a').click(function(){
var $contentDiv = $("#" + this.id + "content");
$allContentDivs.hide(); // Hide All Divs
$contentDiv.show(); // Show Div
return false;
});
});
</script>
This works great, until I start positioning the unordered list. When I do this much css it still works fine:
#linkwrapper {
position:absolute;
left:175px;
}
but if I add another line like so...
#linkwrapper {
position:absolute;
left:175px;
top:0px;
}
...only the last link in the is clickable. why does that one line of css break the menu?
Fix the closing tag on the last link's image: /> instead of ,>
$(document).ready inside $(document).ready looks weird, you should better move $('#link1').trigger('click'); to the end.
Everything works fine, or the problem is out of what you have described. Check this out: http://jsfiddle.net/fVE4m/
Related
I'm basically trying to replicate what you get on google images with a div appearing from an onClick event directly below the row of images containing the anchor that is clicked. I've found code for the show and hide methods which is pretty easy, as per below:
$(document).ready(function(){
$("#hide").click(function(){
$("#imageBox").hide("slow");
});
$('a').click(function(){
$("#imageBox").show("slow");
document.getElementById("displayImage").innerHTML = '<img src = "images/profiles/male-silhouette.jpg" style="margin:20px;" />';
});
});
However I can't get around the div appearing wherever I place it in the HTML. For instance, in the code below the div with image and text will obviously always appear between the first and second lists, in the same place:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div id="imageBox">
<button id="hide" class="hButton">X Close</button>
<p id="displayImage"> </p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
After searching on Google and Stack Overflow I've not even come close to learning how to do this. Can anyone point to some open source code or a tutorial?
jQuery is used to select elements and apply CSS to them and much more. You can learn a lot about jQuery on their website:
http://api.jquery.com/id-selector/
The CSS is what provides the animation, with 'transitions'.
a box opening would change size (height for example) and you'd want to put a transition tag on the height property in the CSS of the particular div.
http://css3.bradshawenterprises.com/transitions/
To learn jQuery, CSS, HTML and all, I recommend starting with W3Schools:
http://www.w3schools.com/default.asp
http://www.w3schools.com/css/css3_intro.asp
http://www.w3schools.com/jquery/default.asp
you can try
$('button funtion').on('click', function(event) {
$('sample1').className;
$('sample1').removeClassName('hidden');
$('sample1').className;
$('sample2').className;
$('sample2').addClassName('hidden');
$('sample2').className;
});
attribute hide must be created in css
hidden {
visibility: hidden;
}
or you can searh for toogle class, this method invert the property
$("button").click(function(){
$("p").toggleClass("hidden");
});
You have the placed the document.getElementById("displayImage").innerHTML in the $('a').click(function () { where there is no anchor tag at all in the markup..
put the code inside the document.ready
$(document).ready(function () {
$("#hide").click(function () {
$("#imageBox").hide("slow");
});
document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';
$('a').click(function () {
$("#imageBox").show("slow");
});
});
DEMO FIDDLE
NOTE: can't understand your $('a').click(function () { as i can't see any anchor tags in the markup.
Change after your comment:
$(document).ready(function () {
$("#imageBox").hide();
$("#hide").click(function () {
$("#imageBox").hide("slow");
});
$('a').click(function () {
$("#imageBox").show("slow");
document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';
});
});
UPDATED FIDDLE
I have a simple menu that has an arrow within the anchor. I have jQuery that adds a class to show the arrow on click. However I need it to NOT "show the arrow" on click if the clicked li a doesn't have a submenu. Here's a rough example of my menu:
<ul id="menu">
<li>TopLevel_LinkOne <img src="img/down-carat.png" class="down-carat"></li>
<li>TopLevel_LinkTwo <img src="img/down-carat.png" class="down-carat"></li>
<li>TopLevel_LinkThree <img src="img/down-carat.png" class="down-carat">
<ul class="sub-menu">
<li>Submenu Link One <img src="img/down-carat.png" class="down-carat"></li>
<li>Submenu Link Two <img src="img/down-carat.png" class="down-carat"></li>
<li>Submenu Link Three <img src="img/down-carat.png" class="down-carat"></li>
</ul>
</li>
</ul>
In this example I do not want the arrow to show, if "TopLevel_LinkOne" or "TopLevel_LinkTwo" is clicked. I can't remove the arrow image because it's being added automatically by the nav walker in Wordpress.
Here's my jQuery:
$('#menu li a').click(
function() {
$('ul li a').removeClass('show-arrow'); // Remove any previous arrows
if('some jquery here that checks if THIS has submenu') {
$(this).addClass('show-arrow'); // Show the arrow image
}
});
Try this:
if($(this).parent().find('ul').length) {
$(this).addClass('show-arrow'); // Show the arrow image
}
If your HTML allows you to make certain assumptions, you can do this really easily.
For example, if it's a safe assumption that your list items will only ever contain either "just a single <a> element", or "a single <a> element followed by a submenu", then you can just do:
if( this.parentNode.children.length > 1)
But if you want robustness, you could do this:
if( $("ul",this.parentNode).length)
Try,
if($(this).closest('li').find('.sub-menu').length > 0)
Full code:
$('#menu li a').click(function() {
$('ul li a').removeClass('show-arrow'); // Remove any previous arrows
if($(this).closest('li').find('ul.sub-menu').length) {
$(this).addClass('show-arrow'); // Show the arrow image
}
});
try this way
JQUERY CODE:
$('#menu li a').click(function() {
$('ul li a').removeClass('show-arrow'); // Remove any previous arrows
if($(this).siblings('ul').length) {
$(this).addClass('show-arrow'); // Show the arrow image
}
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/MHg67/3/
Happy Coding :)
This one might just work for you:
$('#menu > li').click(function () {
$('ul li a').removeClass('show-arrow');
$(this).has('ul.sub-menu').addClass('show-arrow');
}
You can modify it accordingly to suit your needs. Thanks!
i'm trying to create my own navigation bar using Javascript, this is what I have so far.
$(document).ready(function() {
<nav class="menuL">
<ul id="menu">
<li><span></span>portfolio</li>
<ul id="submenu">
<li id="first">Wine</li>
<li id="second">Landscape</li>
<li id="third">Divers</li>
</ul>
<script>
$('#submenu').hide();
</script>
<script>
if ($('#portmenu').mouseover() || $('#first').mouseover() || $('#second').mouseover() || $('#third').mouseout()) {
$('#submenu').show();
} else {
$('#submenu').hide();
}
});
</script>
The submenu is infact being hidden but when I hover over portmenu, the submenu does not appear.. any ideas on what is wrong? I'm new to javascript so I have no idea if im using the selectors, OR operators and the if statements correctly.
Basically what I'm trying to do is, if the main portmenu is hovered over or if first, second and third are being hovered over, then show the sub menu. Otherwise, hide it. I'm trying to do this because if I just create a function which shows the submenu if portmenu is being hovered over, then the moment I hover of the text 'portfolio' the submenu goes away.
You can do it CSS only:
#menu > #submenu{
display: none;
}
#menu:hover > #submenu{
display: block;
}
DEMO: http://jsfiddle.net/Wp5sF/
jsFiddle Demo
You should probably do something more along these lines by taking advantage of jQuery's hover:
$('#submenu').hide();
$('#portmenu, #first, #second, #third').hover(function(){
//in
$('#submenu').show();
},function(){
//out
$('#submenu').hide();
});
Here is my suggestion to fix your code.
(Demo here)
$(document).ready(function(){
$('#submenu').hide();
$('#menu').on('mouseover', function (){$('#submenu').show()});
$('#menu').on('mouseout', function (){$('#submenu').hide()});
});
I have JQuery working to show a particular div when a certain link is clicked.
I have managed to apply the effect I'm after with the main navigation bar through id'ing the body tag and using css to style when the id is found.
However, i'd like to apply the same effect to the sub navigation when a certain div is present.
How the main navigation is styled:
HTML:
<nav>
<ul>
<li id="nav-home">Home</li>
<li id="nav-showreel">Showreel</li>
<li id="nav-portfolio">Portfolio</li>
<li>Contact</li>
</ul>
</nav>
CSS:
body#home li#nav-home,
body#portfolio li#nav-portfolio
{
background: url("Images/Nav_Underline.png") no-repeat;
background-position: center bottom;
color: white;
}
(Other links havent been added to styling as those pages are still in development)
How the sub navigation is structured:
<nav id="portfolioNav">
<ul>
<li id="portfolio-compositing"><a id="compositingWork" href="#">Compositing</a></li>
<li id="portfolio-animation"><a id="animationWork" href="#">Animation</a></li>
<li id="portfolio-motionGfx"><a id="GFXWork" href="#">Motion Graphics</a></li>
<li id="portfolio-3D"><a id="3DWork" href="#">3D</a></li>
</ul>
</nav>
As you can see, its similar format to the main navigation, however i've tried the same approach and it doesn't work :(
The Javascript that switches the divs on the navigation click:
<script type="text/javascript">
$(document).ready(function() {
$('#3DWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #Portfolio3D');
});
$('#GFXWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #motionGraphics');
});
$('#compositingWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
$('#animationWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #PortfolioAnimation');
});
});
</script>
JSFiddle for full HTML & CSS : JSFiddle File
The effect I'm After:
You can modify your script like this:
$('#compositingWork').click(function(){
$(this).addClass('active');
$('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
and add this to css:
.active
{
background: url("Images/Nav_Underline.png") repeat-x;
background-position: center bottom;
}
upd. but the easier way is to combine similar strings:
$(document).ready(function() {
// bind link id and id for load()
var loadDiv = {
'3DWork': 'Portfolio3D',
'GFXWork': 'motionGraphics',
'compositingWork': 'PortfolioCompositing',
'animationWork': 'PortfolioAnimation'
};
var links = $('#3DWork, #GFXWork, #compositingWork, #animationWork');
links.click(function(e) {
e.preventDefault();
// remove effect from all links
links.parent('li').removeClass('active');
// and add to clicked one
$(this).parent('li').addClass('active');
// load you contant using array of ids
$('#portfolioWork').load('portfolioContent.html #'+loadDiv[this.id]);
});
});
also I don't think you need an image for this effect. Why not using border-botom style with width and color you need?
check this example http://jsfiddle.net/vladkras/sJNMR/
(I also added "prevent default" action for your need)
i've got a problem with the CSS. Normally I can get it right, but now it's just not working for me.
Got the menu-code
<nav>
<ul class="ca-menua">
<li class="home"><div class="ca-icona">O</div><span>Home</span>
</li>
<li class="info"><div class="ca-icona">e</div><span>Info</span>
</li>
<li class="komp"><div class="ca-icona">S</div><span>Kompetencer</span>
</li>
<li class="cases"><div class="ca-icona">F</div><span>Cases</span>
</li>
<li class="kontakt"><div class="ca-icona">#</div><span>Kontakt</span>
</li>
</ul>
</nav>
The i've got the javascript which add's the active class.
<script type="text/javascript">
$(document).ready(function(){
$('.home a.tooltip').addClass('active');
});
</script>
<script type="text/javascript">
$(function() {
$('a.tooltip').click(function(e) {
var $this = $(this);
$("#nav").load($this.attr('href'));
$('a.tooltip').removeClass('active');
$(this).addClass('active');
// prevent default link click
e.preventDefault();
})
});
</script>
This works fine, and adds the class, but I just can't get the CSS right!
I need some help with a prob. small problem.
The website link is: HERE
THE CSS:
a.tooltop.active{
color: #f3cb12;
font-size: 50px;
}
Just add the div part into a.tooltip.active selector so you get something like this:
a.tooltip.active div {
color: #F3CB12;
font-size: 50px;
}
I have assumed that you are trying to get the icon bigger and highlighted if the menu item is active. The problem is that it is not the anchor that should be getting new styles, but the child div element.