I've been trying and trying to get the scroll spy to work on my bootstrap site, but I'm unable to get it to work. The problem I'm having is, scrolling has no effect, wherever I scroll to. You can see what I'm doing here.
I've performed all the steps required i.e. below is the body tag
<body data-spy="scroll" data-target="#top-fixed-nav">
and nav is also there:
<ul class="nav" id="top-fixed-nav">
<li>
Home
</li>
<li class="">
About
</li>
<li class="">
How to Use?
</li>
<li class="">
Contact
</li>
</ul>
Have called the scrollspy as well.
$('#top-fixed-nav').scrollspy();
Can anyone please have a look and please point out what I'm overlooking or doing wrong here.
Docs say:
To easily add scrollspy behavior to your topbar navigation, add
data-spy="scroll" to the element you want to spy on ( most typically
this would be the <body>). Then add thedata-target attribute with the
ID or class of the parent element of any Bootstrap .nav component.
The code you posted wasn't working because you were spying on #top-fixed-nav (scroll events).
try this: jsfiddle
if Scrollspy highlight final element, you can add
height: 100%
to html and body tag
Related
I have a header and a footer that work perfectly when the user is on a desktop and has a mouse and can hover over them and navigate everything that way.
The problem is on mobile when there is no mouse, I need everything to work as close to the same as it does on desktop. I was almost able to make the "PROJECTS" drop-down work to my liking when clicked as well as the "CONNECT" drop-up, but I'm having two issues.
The first problem I'm having is when "PROJECTS" or "CONNECT" drop-ups/drop-downs are clicked, when I click off them or I click them again, the drop-up/drop-down doesn't vanish. It becomes constantly displayed block and I need it to go back to display: none when the user clicks anywhere else or clicks "PROJECTS"/"CONNECT" a second time. I thought the "else" statement in the script I'm using would accomplish that, but apparently it is not working and I'm not sure why! What is the best way to make that work?
The second problem I'm having is when the user clicks on the li item "ONE" inside "PROJECTS" or any of the li items inside "CONNECT", I need the background of the clicked element to turn black and the text to turn white right before it loads the link (similar to how it looks on the desktop version using the :hover css). At this point, when they are clicked it just flashes the gray highlight color over the element for a split second. I tried adding the same type of css but changing "hover" to "focus" or "visited" and I couldn't get either to work. What is the best way to accomplish that?
Here is a JSFiddle of all the code: http://jsfiddle.net/xmdzg8vu/
If you view the JSFiddle on desktop, it will be hard to see the issues I'm having since you have a mouse and can hover... hopefully having the code will help with finding my errors though!
HTML:
<div id="background"></div>
<header id="header">
<div id="nav">
<ul>
<li id="projects" onclick="displayDropdown()">
PROJECTS
<ul>
<a href="/one" class="blocklink" target="_self">
<li id="one">ONE</li>
</a>
</ul>
</li>
</ul>
</div>
</header>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="connect" onclick="displayDropup()">
CONNECT
<ul>
<a href="https://www.instagram.com/" target="_blank" class="blocklink">
<li id="instagram">
INSTAGRAM
</li>
</a>
<a href="https://twitter.com/" target="_blank" class="blocklink">
<li id="twitter">
TWITTER
</li>
</a>
<a href="mailto:mail#mail.com" class="blocklink">
<li id="email">
EMAIL
</li>
</a>
</ul>
</li>
</ul>
</div>
</footer>
JS and CSS are seen in the JSFiddle.
Thank you so much!
UPDATE: I have updated my JSFiddle to remove extra script not applicable to this question. Hopefully that cleans it up a little!
For the second problem, have you tried the :active selector? For example, using part of your CSS code:
#one:focused, #one:visited, #one:hover, #one:active {
background-color: black;
color: white;
}
It looks like there are some issues in your markup. Normally we don't nest ul>a. We normally do ul>li>a.
For problem #1 you could add an onclick event handler to the submenu li to close the dropdown (/dropup) ul when a submenu item is clicked.
Let me know if that works. You might also want to use touch events for mobile (even thought click might work).
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I am using Angular Bootstrap Tour to create a tour, and am having trouble with the backdrop hiding an element on the navbar that needs to be highlighted as part of the tour. This is what the code looks like:
<ul class="nav navbar-nav navbar-left" tour-step order="1" placement="bottom" backdrop="true" content="Content goes here">
<li>
Link Goes Here
</li>
</ul>
I've tried to change the position to static and the z-index to auto of all the elements in the same stack as the tour step, but no avail. I've also tried to bring down the z-index of the tour backdrop and container, but nothing seems to be giving me the effect required. Any help is greatly appreciated!
I have used "enscroll" js scroll bar in my page. http://enscrollplugin.com/#demos
<div id="enscroll_name">
<ul>
<li id="p1">product1</li>
<li id="p2">product2</li>
<li id="p3">product3</li>
<li id="p4">product4</li>
<li id="p5">product5</li>
</ul>
</div>
On Page load the product3 need to be in the visible area. I used <a name="p3"></a> for this. But in query how to achieve this? In html we used anchor name tag like <a name="p3"></a>. But in this script how to achieve this?
You can use .scrollTop() jquery function to visible whatever the area that you want inside the div.
Try like this..
$('#yourdiv').scrollTop($("p[name='p2']").height());
Check the sample fiddle
First off, I apologize if this is an incorrect format for a question (I'll be posting a JSFiddle link).
Here is the HTML:
<nav>
<ul>
<li>Climate Models
<ul>
<li>GFDL</li>
<li>CGCM3</li>
<li>CCSM</li>
</ul>
</li>
<li id="about">About Data</li>
<li>Contact US</li>
</ul>
</nav>
<div id="overlay"></div>
<div id="popupabout">
X
<br>Data</br>
</div>
Here is the link: http://jsfiddle.net/n3fUV/3/
The HTML code contains a navigation bar with a drop-down menu. The CSS contains styling for the menu and some styling for a pop-up box that I am trying to incorporate (it also includes the CSS for a custom-styled button). The JS contains what I thought would be correct functions to allow me to click on the "About Us" list item & have it handle the opening & closing of the pop-up box.
My question is: Is it possible to make list items clickable? If there is, I have no idea how to utilize it; I'm afraid that I'll have to re-do all of my styling for the navigation bar if I have to make them elements in order to get this to work.
I'm sorry if I did a terrible job explaining this, as I'm fairly new to web design in general. If you don't understand something I'll try to re-explain it as best as I can. I'd appreciate any & all help.
Code was correct but you have to select 'No wrap - in '. You can find it under "Frameworks&Extensions", it's the dropdown box where 'onLoad' is selected.
EDIT
You have already selected 'onLoad' so this line under HTML is not needed:
<body onload="initialize()">
And do not set the window.onload function.
JSFiddle: http://jsfiddle.net/n3fUV/6/