I want to create a simple menu using jquery.
I want to slideDown the sub <li> elements of another <li> (containing a ul) on mouseover of the parent element and slide them up if the mouse goes out of them.
At the moment I use this code but it does not work it slidesUp the child elements if I leave the parent element.
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
function showSubLi() {
//alert("Hallo");
if (!$('#first').children().is(':visible')) {
$('#first').children().slideDown();
}
}
function hideSubLi() {
//alert("Hallo");
if ($('#first').children().is(':visible')) {
$('#first').children().slideUp();
}
}
</script>
<body>
<ul>
<li id="first" onmouseover="showSubLi();" style="background-color: Yellow">FirstLI
<ul style="background-color: Green" onmouseout="hideSubLi();">
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$('#first').children().hide();
});
</script>
What's wrong whith this code?
I'm going to guess that this will get you close to what you want:
$('ul > li').hover(function(){
$(this).children('ul').slideToggle();
}).children('ul').hide();
http://www.jsfiddle.net/yijiang/De54m/
Instead of inline events, which should not be used under almost any circumstances, we can use jQuery's event handling capability with the hover() function as well as slideToggle() to do away with the multiple is(':visible') calls.
The problem is that the line $('#first').children() refers to the ul element instead of the li elements. Instead, you could use $('#first>ul>li'), which refers to the li elements.
Your corrected code:
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
function showSubLi() {
//alert("Hallo");
if (!$('#first>ul>li').is(':visible')) {
$('#first>ul>li').slideDown();
}
}
function hideSubLi() {
//alert("Hallo");
if ($('#first>ul>li').is(':visible')) {
$('#first>ul>li').slideUp();
}
}
</script>
<body>
<ul>
<li id="first" onmouseover="showSubLi();" style="background-color: Yellow">FirstLI
<ul style="background-color: Green" onmouseout="hideSubLi();">
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$('#first>ul>li').hide();
});
</script>
Related
I am trying to toggle a ul but getting an error saying that "slideToggle is not a function". The menu is used to toggle through a list.
$(function() {
$("li ul").hide();
var currentChildLevel;
var previousLevel;
var isAChild; //means it belongs to parent li
$("li ul").hide();
$("li > a + ul").prev("a").after('<span class="children"> > </span>');
$("li a").click(function () {
console.log($(this).text());
});
$("span.children").click(function() {
$(this).find('ul').first().slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul class="test">
<li>Black b</li>
<li>Black c</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Basically when users click the >, the submenu should be shown.
I cannot reproduce the slideToggle is not a function error you mention.
However your code will not work, because this line is incorrect:
$(this).find('ul').first().slideToggle();
The ul element is a sibling, not a child of the span.children element. Changing it to the following resolves the issue:
$(this).siblings('ul').first().slideToggle();
$(function() {
$("li ul").hide();
var currentChildLevel;
var previousLevel;
var isAChild; //means it belongs to parent li
$("li ul").hide();
$("li > a + ul").prev("a").after('<span class="children"> > </span>');
$("li a").on('click', function () {
console.log($(this).text());
});
$("span.children").on('click', function() {
$(this).siblings('ul').first().slideToggle();
});
});
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul class="test">
<li>Black b</li>
<li>Black c</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Once an li is clicked I want to load a separate html page with content on the main index page.
HTML
<nav>
<ul>
<li>Planet 1</li>
<li>Planet 2</li>
<li>Planet 3</li>
<li>Planet 4</li>
</ul>
</nav>
So once one of the links is clicked I want the jquery to load the content on the same page.
$(document).ready(function(){
// load("location-to-your-file", function(){})
//var indexCatch = $('ul li').click(function(){ alert($(this).index()); });
$("li").click(function(){
$("main").load("tab-1.html", function(){
// Instead of creating another selector combining it from $(this).hide()
// $($(this).hide()).fadeIn(1000);
// you can chain the methods:
$(this).hide().fadeIn(1000);
});
});
Its working for me,
save this file example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Include</title>
</head>
<body>
<input type="text" id="txt_name">
<a id="link" href="#">Click Test Link</a>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$("#link").on('click',function(){
value=$("#txt_name").val();
window.location = "tab-1.php?txt_value="+value;
});
</script>
</body>
</html>
save this file tab-1.php
<b><i>Hello : <?php echo $_GET['txt_value']; ?></i></b>
You're problem is probably the fact that you are using <a> tags
you don't need them
<nav>
<ul>
<li data-href="tab-1.html">Planet 1</li>
<li data-href="tab-2.html">Planet 2</li>
<li data-href="tab-3.html">Planet 3</li>
<li data-href="tab-4.html">Planet 4</li>
</ul>
</nav>
$(document).ready(function(){
$("li").click(function () {
$("main").load(this.dataset.href, function(){
$(this).hide().fadeIn(1000);
});
});
});
Here we get the value of that specific link href attribute, and inject it into the load function
NOTE: As I can't show a demo of it using fiddle or S.O code panel, here is a DEMO showing how this code works
$(document).ready(function () {
$("nav a").each(function () {
$(this).click(function (e) {
e.preventDefault();
var href = $(this).attr("href");
$("main").load(href).hide().fadeIn(1000);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav>
<ul>
<li>Planet 1
</li>
<li>Planet 2
</li>
<li>Planet 3
</li>
<li>Planet 4
</li>
</ul>
</nav>
<main></main>
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
I'm trying to build a basic resizing script using just raw jQuery v1.5.1 (Script below). For some reason it throws the following error and won't continue with running the script.
This is being tested with Chrome, Mac OSX
Error
Uncaught TypeError: Cannot read property 'defaultView' of undefined
Code:
$(document).ready( function() {
/* Set initial #site width */
stretch_portal_content();
$(window).resize( stretch_portal_content );
});
function stretch_portal_content() {
alert($('#site').width());
$('#left-container').width(
$('#site').width()-150
);
if ($(window).height() > $('body').innerHeight()){
$('#site').height(
$(window).innerHeight()
);
}
}
Example HTML
<!DOCTYPE html5>
<html>
<head>
<title></title>
<link media="screen" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="site">
<div id="left-container">
<div class="inner">
<ul id="grid">
<li>Story 1</li>
<li>Story 2</li>
<li>Story 3</li>
<li>Story 4</li>
<li>Story 5</li>
</ul>
</div>
</div>
<div id="right-container">
<ul id="category-list">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
<li>Category 6</li>
<li>Category 7</li>
</ul>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/core.js"></script>
</body>
</html>
Inner Height Documentation
The issue is the innerHeight function is not applicable to the window object. Use height instead.
Let's say I have a simple list:
<ul>
<li class="notClicked">1</li>
<li class="notClicked">2</li>
<li class="notClicked">3</li>
</ul>
Can I onClick of one "li" change styles of all li's except the one clicked?
So if I click "li" number 2, then the list will look like:
<ul>
<li class="notClicked">1</li>
<li class="clicked">2</li>
<li class="notClicked">3</li>
</ul>
So if I click on first "li" then it will have clicked class, while others will be notClicked.
In case you want to play with it, here's jsbin: http://jsbin.com/ucuca4/edit
Make either in Prototype or plain JavaScript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;
function CngClass(obj){
if (Lst) Lst.className='';
obj.className='Clicked';
Lst=obj;
}
/*]]>*/
</script>
<style>
.notClicked {color: black}
.Clicked {color: red}
</style>
</head>
<body>
<ul>
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">1
</a>
</li>
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">2
</a>
</li>
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">3
</a>
</li>
</ul>
</body>
</html>
Why change the style of the other? You may want to change the style of the clicked element.
If so, you can use jQuery for that
Example:
<li class = "notClicked">element 1</li>
<li class = "notClicked">element 2</li>
<li class = "notClicked">element 3</li>
$('.notClicked').click(function()
{
$(this).addClass('active');
});
<script>
function changeClass(){
document.getElementById("idElement").setAttribute("class", "Clicked");
}
</script>
<ul>
<li class="notClicked" >1</li>
<li class="notClicked" onClick="changeClass()" id="idElement">2</li>
<li class="notClicked">3</li>
</ul>