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
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>
Its my first page:
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="comment"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#comment').load('comment.php');
});
</script>
</body>
<html>
And its comment.php :
<ul id="comments" style="overflow: scroll;">
<li>
<p>comment</p>
</li>
<li>
<p>comment</p>
</li>
<li class="importants">
<p>comment</p>
</li>
<li>
<p>comment</p>
</li>
<li>
<p>comment</p>
</li>
<li>
<p>comment</p>
</li>
</ul>
I want ul scroll to li.importants after load.
.importants for show comment with scroll. (important comment)
Just this ul scrolls to bottom !
$(document).ready(function() {
$('#comment').load('comment.php', function() {
$("#comments").animate({scrollTop: $('.importants').offset().top - $("body").height() + 410});
});
});
But it just work for your site !!
Try this :
$(document).ready(function() {
$('#comment').load('comment.php', function() {
$('#comments').animate({
scrollTop: $('#comments').find('.importants').offset().top
}, 400);
});
});
scrollTop: $('li .importants').offset().top
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>
A javascript problem on a rails app.
Twitter docs keep things very straightforward, however I'm still unable to get tabs to work dynamically (tab switching and dropdown). I straight up copied their source code and downloaded their javascript and included that in my application.js file on my rails app. Not sure what I'm missing.
The HTML file:
<script>
$(function () {
$('#.tabs').bind('change', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
</script>
<h3>Demo</h3>
<ul class="tabs" data-tabs="tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
<li class="dropdown" data-dropdown="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>#fat</li>
<li>#mdo</li>
</ul>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="active tab-pane" id="home">
<p>Lorem Ipsum.</p>
The Application.js file:
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
$(document).ready(function(){
!function( $ ){
"use strict"
function activate ( element, container ) {
container
.find('> .active')
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
}
function tab( e ) {
var $this = $(this)
, $ul = $this.closest('ul:not(.dropdown-menu)')
, href = $this.attr('href')
, previous
, $href
if ( /^#\w+/.test(href) ) {
e.preventDefault()
if ( $this.parent('li').hasClass('active') ) {
return
}
previous = $ul.find('.active a').last()[0]
$href = $(href)
activate($this.parent('li'), $ul)
activate($href, $href.parent())
$this.trigger({
type: 'change'
, relatedTarget: previous
})
}
}
/* TABS/PILLS PLUGIN DEFINITION
* ============================ */
$.fn.tabs = $.fn.pills = function ( selector ) {
return this.each(function () {
$(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
})
}
$(document).ready(function () {
$('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
})
}( window.jQuery || window.ender );
});
you don't need the first script (it's included in the documentation as an example only, in case you want more than what comes in the box)
what you do need is a link to the bootstrap stylesheet:
<link rel="stylesheet" href="your_bootstrap_folder/bootstrap.min.css">
and two scripts (assuming you have jquery otherwise include that first):
<script type="text/javascript" src="your_bootstrap_folder/js/bootstrap-tabs.js"></script>
<script type="text/javascript" src="your_bootstrap_folder/js/bootstrap-dropdown.js"></script>
and finally the function call
<script>
$(function () {
$('.tabs').tabs()
})
</script>
that should do the trick.
EDIT: just to make sure you've got the sequence right, here's a full example:
<!DOCTYPE html>
<html>
<head>
<title>bootstrap tabs test</title>
<link rel="stylesheet" href="path_to_bootstrap/bootstrap.min.css">
</head>
<body>
<ul class="tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
<li>Contact</li>
<li data-dropdown="dropdown" class="dropdown">
<a class="dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li>Secondary link</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Another link</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="path_to_jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="path_to_bootstrap/js/bootstrap-tabs.js"></script>
<script type="text/javascript" src="path_to_bootstrap/js/bootstrap-dropdown.js"></script>
<script>
$(function () {
$('.tabs').tabs()
})
</script>
</body>
</html>
I fired up the javascript console on Chrome and realized that my scripts weren't being loaded. This is because on rails, you don't need to include the "public" file in your path to load the javascript; only is needed.
In addition, in the application.hmtl.erb file, <%= javascript_include_tag 'bootstrap-dropdown.js' %> must be included as :default does not load these js files.
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>