Say I have a menu that goes 4 to 5 levels deep. In most cases, selecting the menu will open up the same. Here is some html:
<div class="container">
<div class="trigger">Click Here</div>
<div class="menu">
<ul>
<li>
Main
<ul>
<li>
First
<ul>
<li>
Third
<ul>
<li>
Five
</li>
<li>
Six
</li>
</ul>
</li>
<li>
Fourth
</li>
</ul>
</li>
<li>
Second
</li>
</ul>
</ul>
</div>
</div>
How can I make it so that if you click on "Third", and you go to that page, that when you get to that page and click on the menu again, that it will open up showing the "Third" title at the top with its children instead of opening it up like it would normally do?
If the page is loaded (after kicking a link)
you need to indicate first which page has been loaded for example: blah3.aspx or blah4.aspx
Then in Order to rearange the list, u must get the html content of the list-item that should be shown on top menu.
<div class="menu">
<ul>
<li>
Main
<ul>
<li>
First
<ul>
<li id="page3">
Third
<ul>
<li>
Five
</li>
<li>
Six
</li>
</ul>
</li>
<li>
Fourth
</li>
</ul>
</li>
<li>
Second
</li>
</ul>
</ul>
</div>
Example here if page 3 has been loaded:
Get inner html content:
var treeStructure = $("#page3").html;
Remove the list-item from list with the jQuery remove method:
$("#page3").remove();
Add saved content to the beginning of the list with the jQuery prepend method:
$(".menu ul").prepend("<li>" + treeStructure + "</li>");
Related
I want to make a navigation panel that holds jump-to anchors as the links. How do I make the anchor links go to the next webpage and jump to it's assigned anchor?
I've tried assigning a unique anchor in the webpages to match those in the navigation panel. So far, the links will navigate to another webpage and jump to its anchor, once.
Then, the only links that work are those with anchors only found on the current page, even though the links tell them to go to another page and find them corresponding anchors.
The following is code contained in a .php file so that the navigation is the same across the site.
<html>
<ul>
<li><h2>About</h2></li>
<li><h2>Prints</h2></li>
<li><h2>Archival</h2></li>
<li><h2>VHS & Reels</h2></li>
<li>Contact Us</li>
<li>Standard 1HR</li>
<li>Shoebox Scan</li>
<li>Tape to DVD</li>
<li>Blog</li>
<li>Large Format</li>
<li>Single Scan</li>
<li>Repairs</li>
<li>Find Us</li>
<li>Mounting</li>
<li>Slide (Positive) Scan</li>
<li>Film to DVD</li>
<li>Hire Us!</li>
<li>Lamination</li>
<li>Negative Scans</li>
<li>Cassette to CD</li>
<li> </li>
<li>Order Online</li>
<li>CD/DVD Copy</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li><h2>Film</h2></li>
<li><h2>Restorations</h2></li>
<li><h2>Special</h2></li>
<li><h2>Events</h2></li>
<li>Develop Only</li>
<li>Photoshop I</li>
<li>Canvas Prints</li>
<li>Classes</li>
<li>Single Set</li>
<li>Photoshop II</li>
<li>Aluminum</li>
<li>1-on-1 Consultation</li>
<li>Double Set</li>
<li>Small Projects</li>
<li>Metalic</li>
<li>Sales</li>
<li>Black & White</li>
<li> </li>
<li>Wood Transfer</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
===== Section: Page A ===========================================
<div class="prints01">
<h3>Mounting</h3>
<p>Add a unique spin to your image!</p>
<ul>
<li>High-quality, crisp color printing</li>
<li>24 Hour Turn-Around</li>
<li>Durable and Long-Lasting</li>
<li>Professional, personal application</li>
<li>Available in Matte and Glossy Finish</li>
</ul>
<!-- end prints01 --></div><a id="pj03"></a>
===== Section: Page B ===========================================
<div class="prints01" style="margin-top: 12%">
<h3>Negative Scans</h3>
<p>Lamination is the ideal method for adding years to the life of your displayed images and graphics.</p>
<ul>
<li>High Gloss</li>
<li>Maintains Image contrast & Saturation</li>
<li>Adds UV Protection</li>
<li>Easily Cleanable</li>
<li>24 Hour Turn-Around</li>
</ul>
<!-- end prints01 --></div><a id="pj09"></a>
</html>
I expect the links to navigate from the navigation panel to its destination on pages A and B.
This can be found live at http://weathersbyink.com/hikc
I just found this answer.
"I found this in a w3school bootstrap template that included this command as part of a block that makes a nice scroll to the hashtag. Once I commented it out, the links worked fine."
https://stackoverflow.com/a/40722833/8836444
Thank you #charlietfl and #mike ursitti
I am trying to get the jquery plugin unslider working where on every click of the next/previous button, the next couple hidden slides move into view.
For example, if on page load only three slides are in view, then every time the next arrow is clicked, the next three slides come in to view.
I currently have unslider working where only one slide is in view and one slide moves into view with every click.
Was wondering if anyone had accomplished this behavior in the past with this plugin and was willing to assist?
Thanks in advance
JS
$('.photo-slider').unslider({
infinite: true,
nav: false
});
HTML
<div class="photo-slider">
<ul>
<li>
Hello1
</li>
<li>
Hello2
</li>
<li>
Hello3
</li>
<li>
Hello4
</li>
<li>
Hello5
</li>
<li>
Hello6
</li>
<li>
Hello7
</li>
<li>
Hello8
</li>
<li>
Hello9
</li>
<li>
Hello10
</li>
<li>
Hello11
</li>
<li>
Hello12
</li>
<li>
Hello13
</li>
<li>
Hello14
</li>
<li>
Hello15
</li>
</ul>
Better change view and add 3 image or text in one li, like this:
<div class="photo-slider">
<ul>
<li>
<div>Hello1</div>
<div>Hello2</div>
<div>Hello3</div>
</li>
<li>
<div>Hello4</div>
<div>Hello5</div>
<div>Hello6</div>
</li>
</ul>
I have this menu and I want to set one variable for each li item, and alert with it's text when clicked. This was easy, I solved for this with the script below.
$("ul#menudropd .animal li a").click(function() {
var whatever = $(this).text();
alert(whatever); });
Now, I also need to include the 'parent' (ie, the text in the mainlinks class) in the alert. The parent is usually never clicked, only hovered over to display the children. But, it is text so it should be easy right?
Example:
Currently, you click on "Puppy" and alert says "Puppy". I need to say "Dog : Puppy". Same for the next section. Click on "Kitten" I need the alert to come back as "Cat: Kitten".
I know how to have the alert display both once I get that 2nd variable set, I just can't figure out how to do it without clicking it. Any ideas?
<ul id="menudropdown">
<li class="mainlinks"> Dog
<div class="animal dog">
<li> Puppy </li>
<li> Pup </li>
</div>
</li>
<li class="mainlinks"> Cat
<div class="animal cat">
<li> Kitty </li>
<li> Kitten </li>
</div>
</li>
</ul>
Use closest() and you may also want ul instead of div, the html you have seems invalid as div directly contain li element.
The HTML List item element (<li>) is used to represent a list item. It
should be contained in an ordered list (), an unordered list
() or a menu (), reference.
Live Demo
Html
<ul id="menudropdown">
<li class="mainlinks"> Dog
<ul class="animal dog">
<li> Puppy
</li>
<li> Pup
</li>
</ul>
</li>
<li class="mainlinks"> Cat
<ul class="animal cat">
<li> Kitty
</li>
<li> Kitten
</li>
</ul>
</li>
</ul>
Javascript
$("ul#menudropdown .animal li a").click(function () {
alert($(this).closest('.mainlinks').find('a:first').text());
});
You should find the closest li tag with your mainlinks class and then select the text of the first child.
Like this:
$(this).child().first().text()+" : "+$(this).text();
I have been trying to create a page using jQuery mobile.
I am trying to create a navigation menu using lists and collapsibles.
The way the navigation works is there are links and there are collections of links.
Each collection of links is put into a collapsible list.
Here is the page:
<div data-role="page">
<div data-role="content">
<ul data-role="listview">
<li> Link 1
</li>
<li> Link 3
</li>
</ul>
<div data-role="collapsible" data-inset="false">
<h3>Links inside</h3>
<ul data-role="listview">
<li>link 5
</li>
<li>link 6
</li>
</ul>
</div>
<ul data-role="listview">
<li> Link 3
</li>
<li> Link 4
</li>
</ul>
</div>
The problem is that putting anything after a listview or collapsible seems to have some issue with padding and is slightly pushed up into the previous element, covering some of it.
I tried using <br/> here
and clear:both here
If possible I would like to use only one listview instead of mixing listviews and collapsible but that did not work for me.
I have a navigation on my site where the last link opens a modal.
Scrollspy is working fine but I don't want it to highlight the last element that opens the modal in any case.
Is there any way to do so?
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
Kontakt
</li>
</ul>
</nav>
I've found a solution without adding extra markup, but this is not so beautiful.
The scrollspy highlights the menu item only when the <a> contains the href attribute (at least, in Bootstrap 3.x). So if there's no href, the menu item will never be highlighted.
I've found an extension for the Bootstrap's scrollspy JS to exclude some items ID here, but this is for the 2.x version.
A solution for your problem may be :
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
<a data-toggle="modal" data-target="#contact">Kontakt</a> <!-- See http://getbootstrap.com/javascript/#modals-usage -->
</li>
</ul>
</nav>