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>
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>
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>");
I am using bootstrap sidebar.
Its only two levels sidebar nav on the website. I have added two more levels, now its four level sidebar. I am receiving a random issue
that some time when I click on second nav of same level it doesn't open nor other nav collapse, until and unless I scroll down. Then it starting working back again.
Like in the below ScreenShot. By clicking on 'Alerts' it should open and accessing should collapse but its not. But on scrolling it working fine.
I have added the code. Please do let me know if i can add anything more.
<body data-spy="scroll" data-target=".p8-sidebar" onLoad="fixNavbarIssue()">
<div class="p8-sidebar hidden-print hidden-sm hidden-xs bs-docs-sidebar hidden-print affix" role="complementary">
<ul class="nav p8-sidenav nav-stacked">
<li class="active">
Console
<ul class="nav">
<li class="">Login
</li>
<li class="">Understanding Console
</li>
<li class="">Connected Users
</li>
<li class="">Connected Consoles
</li>
<li class="">Logout
</li>
</ul>
</li>
<li class=""> Alerts
<ul class="nav">
<li class="">
Creating a New Alert
<ul class="nav">
<li>Basic Information
</li>
<li>Send To
</li>
<li>Event Name
</li>
<li class="">Short Message
</li>
<li class="">Long Message
</li>
<li class="">
Require Acknowledgement
</li>
</ul>
Bootstrap css/js are unchanged.
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.