Hi I have a page for which I have four different style sheets like this
<link rel="Stylesheet" href="fancydropdown.css" title="style-1" type="text/css" />
<link rel="Alternate" href="fancydropdown_1.css" title="style-2" type="text/css" />
<link rel="Alternate" href="fancydropdown_2.css" title="style-3" type="text/css" />
<link rel="Alternate" href="fancydropdown_3.css" title="style-4" type="text/css" />
And this is my HTML
<div id="menu">
<ul class="tabs">
<li><h4>In the blog »</h4></li>
<li class="hasmore"><span>Styles</span>
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
</li>
<li class="hasmore"><span>Topics</span>
<ul class="dropdown">
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li class="last">Topic 4</li>
</ul>
</li>
<li><h4>Elsewhere »</h4></li>
<li><span>About</span></li>
<li class="hasmore"><span>Networks</span>
<ul class="dropdown">
<li>Twitter</li>
<li>posterous</li>
<li>SpeakerSite</li>
<li>LinkedIn</li>
<li class="last">See more…</li>
</ul>
</li>
<li><span>Bookmarks</span></li>
this my dropdown class
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
when I click on style-1 and so on the style sheets shoud be change .....How can I do this using jquery? Can any one help me?
And please provide me the library's to be used to?
You just change the HREF of your stylesheet.
... HEAD
<link rel="Stylesheet" href="style1.css" >
... BODY
<ul class="dropdown">
<li><a data-stylesheet="style1.css">style 1</a></li>
<li><a data-stylesheet="style2.css">style 2</a></li>
<li><a data-stylesheet="style3.css">style 3</a></li>
</ul>
... SCRIPT
$('.dropdown a').click(function(ev){
ev.preventDefault();
$('link').attr('href',$(this).data('stylesheet'));
});
Please try following which works fine. See demo here http://jsfiddle.net/fLzck/
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
$(".dropdown a").click(function() {
var thisRel = $(this).attr('rel');
//alert(thisRel);
$("link[rel='stylesheet']").attr('href', thisRel);
})
Related
I'm trying to collapse a nested menu with jQuery. I read this answer and, to me, it appears to be similar to my solution. The problem is that mine doesn't work.
What I think I'm saying with my JavaScript code is: "hey, when a user clicks on a li that is the parent of a ul.submenu, get its ul.submenu children and attach the slideToggle only to it". But, as you can see from the snippet, it closes also the parent ul.submenu and I can't understand why.
$(document).ready(function () {
$('.submenu').hide();
$('.submenu').parent('li').click(function () {
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
You want to stop the click event from bubbling up the DOM and triggering the click handler on the parent. Use .stopPropagation() for that:
$(document).ready(function() {
$('.submenu').hide();
$('.submenu').parent('li').click(function(e) {
e.stopPropagation()
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
The jQuery dropdown menu does not pop-up when I click on the link. Here is my code.
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/jquery.dropdown.css" rel="stylesheet" />
<script src="Content/bootstrap-filestyle.min.js"></script>
<script src="Scripts/jquery.dropdown.js"></script>
html:
<span class="fa fa-2x fa-gear"></span>
<div id="ddlDept" class="jq-dropdown jq-dropdown-tip">
<ul class="jq-dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="jq-dropdown-divider"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
You need to make use of data-toggle attribute instead of data-dropdown. Also the contents you need to toggle needs to be wrapped inside a div element.
<ul>
<li>
<div class="dropdown">
<span class="fa fa-2x fa-gear"> </span>
<ul class="dropdown-menu" aria-labelledby="ddlDept">
<li>Item 1</li>
<li>Item 3</li>
<li class="dropdown-divider"></li>
<li>Item 4</li>
</ul>
</div>
</li>
</ul>
Working example : http://jsfiddle.net/DinoMyte/5p341amh/263/
From the documentation for jQuery Dropdowns, your container div must have a unique id (check) and the jq-dropdown class "immediately before your closing body tag". For dropdown menus, the div should contain the class jq-dropdown-menu. So it looks like your only issue is prefixing all of the classes with "jq-". That includes dropdown, dropdown-tip, dropdown-divider, and dropdown-menu. http://labs.abeautifulsite.net/jquery-dropdown/
I want to use AngularJS to include a header in every html i use. here is the header.html:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid" id="container-fluid1">
<div class="navbar-header" id="websiteName">
<a class="navbar-brand" href="#">Richazon</a>
</div>
<div id="theLinks">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Navbar Color <b class="caret"></b>
<ul class="dropdown-menu" id="dropdown-menu1">
<li class="greenBg">NB1</li>
<li id="greenBg">NB2</li>
<li id="greenBg">NB3</li>
</ul>
</li>
<li class="dropdown">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Page 2.0.0 </li>
<li class="divider"></li>
<li>Page 2.0.1 </li>
<li class="divider"></li>
<li>AngularJS List Removal </li>
</ul>
</li>
<li class="dropdown">
Page 3 <b class="caret"></b>
<ul class="dropdown-menu" id="dropdown-menu">
<li>Page 3.0.0 </li>
<li class="divider"></li>
<li>Page 3.0.1 </li>
<li class="divider"></li>
<li>Page 3.0.3 </li>
<li class="divider"></li>
<li>Page 3.0.4 </li>
<li class="divider"></li>
<li>Page 3.0.5 </li>
<li class="divider"></li>
<li>Page 3.0.6 </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
in my index1.html file I have this:
<html lang="en" ng-app="myApp">
then inside the body tag
<div appheader></div>
i understand this question has already been asked, hence my implementation. but i keep getting this error in the console: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
this is the code at the top of my index1.html file which might be causing issues:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<link href="css/index1.css" rel="stylesheet">
and here is my main.js:
angular.module('myApp')
.directive('appheader', function() {
return {
templateUrl: 'header.html'
};
});
If this is your main.js
angular.module('myApp')
.directive('appheader', function() {
return {
templateUrl: 'header.html'
};
});
you need to create module
angular.module('myApp',[])
I know this is incredibly easy but I have been writing and rewriting this function for whole day with no success, hope anyone can help me out.
I have an <li class="has-children">, when I click on it, it'll check if <ul> tag of this event inside has class is-hidden, it'll remove that class, my code work very well.
Now, I want to when click on <li class="go-back">, the parent (in this case is <ul class="sub-menu"> will add is-hidden again, but it doesn't work. I've used console.log to debug and nothing error. What I'm doing wrong?
Thanks for your time!
Live demo
HTML
<ul id="main-menu" class="main-menu">
<li>Home</li>
<li class="has-children">
About
<ul class="sub-menu is-hidden">
<li class="go-back">Pricing</li>
<li><a href="#" >Contact Us</a></li>
<li class="has-children">
hard goods
<ul class="sub-menu is-hidden">
<li class="go-back">Clothing</li>
<li>Beanies</li>
<li>Watches</li>
<li>Watches</li>
<li>Watches</li>
<li>Watches</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" >Services</a></li>
<li><a href="#" >Contact Us</a></li>
</ul> <!-- end main-menu -->
JS
//open submenu
$('.has-children').on('click', function(event){
var selected = $(this);
if( $('.has-children > ul', selected).hasClass('is-hidden') ) {
$('> a', this).addClass('selected');
$('> ul', this).removeClass('is-hidden');
// selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
}
});
//submenu items - go back link
$('.go-back').on('click', function(){
$(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('moves-out');
});
The answer is that the code actually work.
The problem is that after the code added the class 'is-hidden' in this line $(this).parent('ul').addClass('is-hidden')..., this class removed by this line $('> ul', this).removeClass('is-hidden');.
When you click on .go-back the click event of .has-children firing too.
The key is to add event.stopPropagation()
$('.has-children').on('click', function(event){
var selected = $(this);
if( $('.has-children > ul', selected).hasClass('is-hidden') ) {
$('> a', this).addClass('selected');
$('> ul', this).removeClass('is-hidden');
// selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
}
});
//submenu items - go back link
$('.go-back').on('click', function(e){
event.stopPropagation()
$(this).parent('ul').addClass('is-hidden');
});
.is-hidden {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul id="main-menu" class="main-menu">
<li>Home</li>
<li class="has-children">
About
<ul class="sub-menu is-hidden">
<li class="go-back">Pricing</li>
<li><a href="#" >Contact Us</a></li>
<li class="has-children">
hard goods
<ul class="sub-menu is-hidden">
<li class="go-back">Clothing</li>
<li>Beanies</li>
<li>Watches</li>
<li>Watches</li>
<li>Watches</li>
<li>Watches</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" >Services</a></li>
<li><a href="#" >Contact Us</a></li>
</ul> <!-- end main-menu -->
</body>
</html>
Any ideas why this Twitter Bootstrap dropdown isn't working?
Javascript in head:
<script src="/assets/js/bootstrap.js" type="text/javascript"></script>
Menu HTML:
<li class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
Put the dropdown class on a div that is wrapping the li rather than on the li itself. Like this...
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
That example is from the bootstrap site
Your code should look like this...
<!DOCTYPE html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script>
<link href="../theme/bootstrap.css" rel=stylesheet type="text/css">
</head>
<div class="dropdown">
<ul class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</ul>
</div>
I tried making a nested list, but it didn't work with bootstrap. I think it gets the two dropdowns confused.
Make sure you are using the latest version of JQuery
This is easily solved. The element wrapping your code is a li, but it needs to be a div. This works for me:
<div class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
If you want it to look like a button, just add "btn" to the class list like this:
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">
My header section looks like this:
<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap-responsive.min.css'>
<script src='js/jquery-2.0.0.min.js' type='text/javascript'>
<script src='js/bootstrap.min.js' type='text/javascript'>
You may want to leave out the responsive css if you're not doing anything for mobile devices.