I don't know if this is possible. I have a jquery slidedown menu and I don't want the slider closing when I click one of the links in the slide menu. I want it to remain open when I get to the destination page of the link clicked.
Here's my code: index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Advice center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip_1").click(function(){
$("#panel_1").slideToggle("slow");
});
});
</script>
<style type="text/css">
.nodisplay{
display:none;
}
</style>
</head>
<body>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li id="flip_1"> <span>Slide here</span></li>
<div id="panel_1" class="nodisplay">
<ul>
<li>section 1</li>
<li>section 2</li>
</ul>
</div>
<li>bottom 1</li>
<li>bottom 2</li>
</ul>
</body>
</html>
Here's one of the pages linked to section1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Advice center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip_1").click(function(){
$("#panel_1").slideToggle("slow");
});
});
</script>
<style type="text/css">
.nodisplay{
display:none;
}
</style>
</head>
<body>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li id="flip_1"> <span>Slide here</span></li>
<div id="panel_1" class="nodisplay">
<ul>
<li>section 1</li>
<li>section 2</li>
</ul>
</div>
<li>bottom 1</li>
<li>bottom 2</li>
</ul>
Welcome to section 1
</body>
</html>
And the third page is below: section2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Advice center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip_1").click(function(){
$("#panel_1").slideToggle("slow");
});
});
</script>
<style type="text/css">
.nodisplay{
display:none;
}
</style>
</head>
<body>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li id="flip_1"> <span>Slide here</span></li>
<div id="panel_1" class="nodisplay">
<ul>
<li>section 1</li>
<li>section 2</li>
</ul>
</div>
<li>bottom 1</li>
<li>bottom 2</li>
</ul>
This is section 2 (TWO) page
</body>
</html>
Try the following if one of your links is clicked (you'll need an if/else in your .click event binding):
$("#panel_1").stop();
On the inner links, use a hash to identify them
Section 1
Then onPageLoad you can check if there's a hash and use this to open:
if(window.location.hash == "#panel") $("#panel_1").slideDown();
Also, a small fix to your code: put that div inside the li
<li id="flip_1"><span>Slide here</span>
<div id="panel_1" class="nodisplay">
<ul>
<li>section 1</li>
<li>section 2</li>
</ul>
</div>
</li>
And then use this to toggle:
$("#flip_1 span").click(function(){
$("#panel_1").slideToggle("slow");
});
Related
In my html, I have ol and 10 li. I need to change the even number li color to green and odd number li to red using only Javascript.
How can I do that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Change</title>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ol>
</body>
</html>
try this
li {
color: black;
}
li:nth-child(odd) {
color: red;
}
li:nth-child(even) {
color: blue;
}
I'm trying to build a dynamic dropdown menu following http://labs.abeautifulsite.net/jquery-dropdown/
So my code is:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p>
Here’s a link
and here’s a button <input type="button" value="Dropdown" data-dropdown="#dropdown-1" class="">
and here’s a <span class="example" data-dropdown="#dropdown-1">span</span>
</p>
<div id="dropdown-1" class="dropdown dropdown-tip" style="display: block; left: 204.671875px; top: 1373.265625px;">
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="dropdown-divider"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
But nothing happens and I really don't understand why.
Download project files and include them in your project. the order of included files is important:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />
<script type="text/javascript" src="jquery.dropdown.js"></script>
Here is the codepen I'm trying to get working: http://codepen.io/Bounasser-Abdelwahab/pen/ruiky
Here is the head of my index.html file in my Brackets project:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
When I try to run this, it runs about 90% correctly, but it's not a complete match. The menu is misaligned, and I can see bullet points that weren't there before, and the padding is all wrong.
How can I get a complete replication of the codepen code into my own project?
Edit: here is an image of how mine is coming out: http://i.imgur.com/F3o0yQF.png
Edit 2:
Here is my slightly modified HTML. Problem is persisting.
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<ul class="navbar cf">
<li>item 2</li>
<li>item 3
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3
<ul>
<li>google</li>
<li>yahoo!</li>
<li>jQuery
<ul>
<li>sub sub item 1</li>
<li>sub sub item 2
<ul>
<li>sub sub sub item 1</li>
<li>sub sub sub item 2</li>
<li>sub sub sub item 3
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
</ul>
</li>
</ul>
</li>
<li>sub sub item 3</li>
<li>sub sub item 4</li>
<li>sub sub item 5
</li>
</ul>
</li>
</ul>
</li>
<li>item a little longer</li>
</ul>
</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</body>
</html>
Here is the class which will resolve those issues:
`ol, ul { list-style: outside none none; }`
As you asked, another question later on, so adding another answer.
For removing the strange extra space to the left of some boxes,
Add below CSS class:
.body{
//your other class properties ...
padding:0
}
I'm trying to create a sortable list with jQuery UI, My code appears to work, but I want to add a drop down to each list to set an active for the clicked list.
How do I change this so, when selected, the selected sublist should be shown and the others should be hidden?
Relevant JSFiddle.
Relevant HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
Item 1
<ul class="subnav">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
</ul>
The .ui-sortable-helper class is added when starting dragging a li element. So with this simple css you can show the subclass only when dragging the element :
#sortable .subnav {display: none;}
#sortable>li.ui-sortable-helper .subnav {display: block;}
See the updated Fiddle
I have modified example connected-lists from jquery site http://jqueryui.com/sortable/#connect-lists below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.connectedSortable { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
.connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( ".connectedSortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
</head>
<body>
<ul class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
<ul class="connectedSortable last">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</body>
</html>
I need to prevent dropping to ul.last
Or in other words I need to prevent dropping into list to specific list if exists special condition.(connectedSortable styles should stay)
http://jsfiddle.net/Fdpyr/4/
Is there any ability to achieve that?
Try this:
// If you want a specific ul to get sortable you can use this
$(function() {
$( ".connectedSortable:eq(0)" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
or If you want last ul not to be sortable use it like this:
$(function() {
$( ".connectedSortable:not(:last)" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
Hope this works for you the way you need...