So I have been trying to get something similar to this topnav menu found on this page: https://www.apotekhjartat.se/
Not sure if this is pure css, javascript or some jquery. (guess its called/reffered as toggle or hide/show div)
I like the way the arrows are displayed if the content is opened or closed and that the content slides down.
If I have a look at the examples on w3schools I can only find that that works with one link...
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
Simple markup:
<header>
<ul>
<li>This is my first link</li>
<li>This is my second link</li>
<li>This is my third link</li>
</ul>
</header>
<section id="01" style="display: none">
<p>This is the conent of the first link</p>
</section>
<section id="02" style="display: none">
<p>This is the conent of the second link</p>
</section>
<section id="03" style="display: none">
<p>This is the conent of the third link</p>
</section>
Can someone point me in the correct direction to get something similar to: https://www.apotekhjartat.se/...
Thanks!
What you're looking for is known as a Sticky Header.
There are various libraries, tutorials, and SO Questions that should help you further.
Related
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>
Have been looking around for a solution/plugin that handles. navigation, menu highlighting and hash change (both on scroll and menu click) but can't really find one. I have this markup of sections for a one page site and i want to implement the bow mentioned in a nice way.
so basically
- change hash on scroll and menu click (menu also needs highlighting). Both on scroll and when clicked.
EDIT: exactly like this but i need the hash to change on scroll as well.
http://callmenick.com/2013/04/22/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation/
html
<nav id="main-nav">
<ul>
<li>
product
</li>
<li>
process
</li>
<li>
testimonials
</li>
<li>
contact
</li>
</ul>
</nav>
<section class="main-section" id="product">
</section>
<section class="main-section" id="process">
</section>
<section class="main-section" id="testimonials">
</section>
<section class="main-section" id="contact">
</section>
You can update your URI by calling history.pushState('/myPage#MyNewURI')
That won't reload the page, just change the URI.
I noticed that nav-tabs left doesn't work in Bootstrap 3.3.0,3.3.2 and was wandering if anyone knew how to re-enable the style. Tabs should run up and down, with content chosen on the right.
Working bootstrap2.3.2 BIN:
http://jsbin.com/vimekuloqo/4/edit
Here's the not working 3.3.0 link:
http://jsbin.com/wituxucuja/1/edit
Relevant code (directly from http://getbootstrap.com/2.3.2/components.html#navs)
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li class="">Section 2</li>
<li class="">Section 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="lA">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="lB">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="lC">
<p>What up girl, this is Section C.</p>
</div>
</div>
</div>
...
<script language=javascript>
$('#myTab a').click(function (e) {
if($(this).parent('li').hasClass('active')){
$( $(this).attr('href') ).hide();
}
else {
e.preventDefault();
$(this).tab('show');
}
});
</script>
This article provides a full answer with code and demo down the page a ways: http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/
The simple answer is you need to add .nav-stacked to the <ul> and then use the normal row/column system to lay it out. BS3 doesn't natively support floating the tabs around on its own like BS2 did.
http://jsbin.com/kobegaguwa/1/edit
Note that for jsbin preview you need to use xs columns or it will stack everything in 1 column responsively.
The default styling doesn't work very well for tabs, but works ok for pills.
I have the following jsfiddle. I'm trying to get the right hand side div to slide to where the left div is when a user clicks on any of the example links, i can't figure out how to do this as im fairly new to CSS3 transitions and jquery. Could someone help guide me in the right direction. I've had a look at jQuery animate too but find it a little confusing.
The transition should work in IE10+, anything below it's fine if it doesnt have a transition
http://jsfiddle.net/AV22p/
Below is the structure of my HTML
<section id="modalwindow">
<div id="foodlist">
<div class="links">
<h1>Div 1</h1>
<ul>
<li>Example1 </li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
<li>Example5</li>
<li>Example6</li>
<li>Example7</li>
<li>Example8</li>
</ul>
</div>
</div>
</section>
<section id="modalwindow">
<div id="food_details">
<div class="details">
<h1>Recipe</h1>
<ul>
<li>test </li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</section>
Not sure if this is what you want since the description is quite vague. But you might be able to convert this to your needs.
divWidth checks for the with of the section. On click of a link the section containing #food_details gets moved the (negative)width of #modalwindow to the LEFT.
$('.links ul li a').click(function(){
var divWidth = '-'+$('#modalwindow').width();
$('#food_details').parent().animate({left: divWidth});
});
http://jsfiddle.net/AV22p/3/
Also note that your first example link has a different/invalid markup than the rest.
I am going to have an ExpressionEngine weblog that will place user designed content blocks in the footer. But, it's only going to show one at at time.
My HTML looks like this:
<ul class="footernav">
<li class="first"><a class="active" href="#">Get in touch</a></li>
<li>Interested in joining?</li>
<li>Feedback</li>
<li>Link 4</li>
</ul>
<div class="copy gutters show">
<p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
<p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
<p>Lorem Ipsum</p>
</div>
I want to switch the show class to a hide class depending on the clicked link. Not sure how I can accomplish this. It has to be flexible enough to work with N number of content blocks--because they will be defined by the user in ExpressionEngine.
I'm pretty much brand new to JavaScript so I would really appreciate any insight, or solution for how I might accomplish this.
I think this would work with your structure:
// Cycle through each link in our ul.footernav element
$(".footernav a").each(function(i,o){
// Attach click-logic to each link
$(this).click(function(e){
// Prevent page from bouncing, reloading, etc.
e.preventDefault();
// Add .active class to this, but remove from all other links
$(this).addClass("active").closest("li").siblings("li").find("a").removeClass("active");
// Show any DIV having class .copy and same index as clicked link
// meaning, clicking the second link will show the second div
$("div.copy:eq("+i+")").show().siblings("div.copy").hide();
});
});
Demo Online: http://jsbin.com/ekecu