I need the navigation tab on the left side to slide down its contents on hover. But the code is not working. What might be the problem.
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover">
<a style="background-color:#f78144; color: #000; text-align: center;" href="#">Time Table</a>
</li>
</ul>
<div id = "hovercontent">
Contents 1
</div>
<script type = "script/javascript">
$(document).ready(function(){
$("#mousehover").hover(function(){
$("#hovercontent").slideDown("slow");
});
});
</script>
Replace
<script type="script/javascript">
with
<script type="text/javascript">
or just use
<script>
<script type = "text/javascript">
$(document).ready(function(){
$("#mousehover").hover(function(){
$("#hovercontent").slideDown("slow");
});
});
</script>
replace script/javascript by text/javascript
Related
This my jQuery code for displaying a dropdown menu on hovering over an image. Imgbtn_Dsp is the id of the image and nav_menu is the id of the list, but it's not working.
<html>
<head>
<title>Dropdownlist Hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
$('#Imgbtn_Dsp').mouseover(function() {
$('#nav_menu').slideDown();
});
</script>
</head>
<body>
<form id="form1">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
<div>
</form>
</body>
</html>
Get rid of div and modify ul like this if you want to work it properly ;)
<ul id="nav_menu" style="display: none">
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
Modify your script like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function (){
$('#nav_menu').hide();
$('#Imgbtn_Dsp').mouseover(function () {
$('#nav_menu').slideDown();
});
$('#Imgbtn_Dsp').mouseleave(function () {
$('#nav_menu').slideUp();
});
});
</script>
You can see the cod in action in this jsfiddle.
it could be done without jquery. all you have to do is define parent container of image and list set some css.
<div class="parentDIV">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
</div>
now define some css:-
.parentDIV{position:relative}
#nav_menu{position:absolute;
left:0;top:99%;display:none;}
.parentDIV:hover #nav_menu{display:block}
hopefully you will find it useful
I'm doing some exercises to practice my JQuery but i can't manage to find the solution with this. I just want to hide the first element of the list when it's clicked.
I've tried this:
JS
$(document).ready(function(){
$("li.oculta").click(function(){
$(this).hide();
});
});
<html>
<head>
<style>
p{
background-color: #AA55AA;
}
</style>
<script src="/jquery-2.1.1.js"></script>
</head>
<body>
<ul class='list1'>
<li class="oculta">Taco</li>
<li>Jamón</li>
<li>Queso</li>
</ul>
<ul class='list2'>
<li class="oculta">Coke</li>
<li>Leche</li>
<li>Té</li>
</ul>
</body>
</html>
But i can't figure out why isn't working. Any ideas?
Use on('click',function(){... instead of .click(function(){...
$(document).ready(function(){
$("li.oculta").on('click',function(){
$(this).hide();
});
});
jsfiddle
Very simple error, the code is all right, but you forgot to import jQuery.
$(document).ready(function(){
$("li.oculta:first-of-type").click(function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style>
p{
background-color: #AA55AA;
}
</style>
<script src="/jquery-2.1.1.js"></script>
</head>
<body>
<ul class='list1'>
<li class="oculta">Taco</li>
<li>Jamón</li>
<li>Queso</li>
</ul>
<ul class='list2'>
<li class="oculta">Coke</li>
<li>Leche</li>
<li>Té</li>
</ul>
</body>
</html>
The localScroll plugin doesn't work for me. The console doesn't say anything and I don't see the error.
Here is my code:
<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="js/jquery.localScroll.js"></script>
<div id="navbar" class="collapse navbar-collapse">
<ul id="navigation_menu" class="marginul nav navbar-nav">
<li class="active">Mapa</li>
<li>Nosotros</li>
<li>Contacto</li>
</ul>
</div>
Then I have 3 sections with id and their content:
<section id="mapa" class="section_mapa"></section>
<section id="institucional" class="section_institucional fondoinstitucional"></section>
<section id="contacto" class="section_contacto">
My jQuery's code:
<script type="text/javascript">
$(document).on("ready",function(){
$("#navigation_menu").localScroll({
duration:1000,
});
});
</script>
Please help me!
Thanks!
When I click on "Tools" tab, nothing happens: tabs don't switches, not toggles.
$('[data-toggle="tab"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href');
$.get(loadurl, function(data) {
$('#content').html(data);
});
$this.tab('show');
return false;
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="navigation" class="active">My links</li>
<li role="navigation">Statistics</li>
<li role="navigation">Tools</li>
<li role="navigation">Payments</li>
</ul>
</div>
<div id="content" class="container">
</div>
Where I am wrong?
Put
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
before
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
like this:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
bootstrap.min.js requires jquery.min.js to run first before it.
when we click on sub menu parent menu should highlight. Please check my Javascript code. I am unable to get the result.Here i got the results only main menu highlighted. Please help me.Thanks in advance
<html>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;
}
<ul id="id">
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
You forgot to close the style tag which is what caused the problem. Also I added some other tags you forgot like doctype and head tags. Validate your document http://validator.w3.org/ and you won't get problems like these anymore.
<!doctype html><html><head><title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {console.log(this.href);
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;display:block;
}
</style>
</head><body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body></html>
Something like this?
HTML:
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
JS:
$(function(){
$('#cssmenu li').click(function() {
if ($(this).hasClass('has-parent')){
var parent = $(this).closest('.has-sub');
parent.attr('class', 'active');
}
});
});
Styles:
.active{
background: #4FA9E4; color:#FFF;
}
Please see this fiddle.
add click function
$('#cssmenu a').unbind('click').click(function(){
$(this).addClass("active");
return false;
});
Sample here