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.
Related
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.
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 have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be [header_img_height] and when I get to section one it would return to margin-top:0px.
My header markup right now:
<header>
<div id="header_banner">
</div>
<ul id="nav_cont">
<li data-menuanchor="section1">
<a id="home_hover" href="#section1">Home</a>
</li>
<li data-menuanchor="section2">
<a id="about_hover" href="#section2/1">About</a>
</li>
<li data-menuanchor="section3">
<a id="gallery_hover" href="#section3">Gallery</a>
</li>
<li data-menuanchor="section4">
<a id="literature_hover" href="#section4">Literature</a>
</li>
<li data-menuanchor="section5">
<a id="contact_hover" href="#section5">Contact</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="Home">
<div class="container"></div>
</div>
.
.
.
other sections
This is what I want to end up with:
I would recommend you to do it with CSS directly.
Check out this video tutorial in which you can see how to use the class added to the body element to fire your own CSS changes.
Otherwise, you can also do it using callbacks such as afterLoad or onLeave. You have an example of it available in the fullpage.js files.
You even have an example of how to use them in this Apple demo also available in the files to download.
Would this help? On the first section it adds the class fixed-header to your nav, and on the other sections it will disappear
$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});
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 have been driving myself mad over getting ScrollSpy working. I have a menu that remains in a fixed, left position as the user scrolls down after a certain point, however, ScrollSpy refuses to work in any shape or form. I have tried a multitude of methods to get it working, as well as using a CMS (DotNetNuke) so please excuse some messy code here and there.
Here's the HTML of the nav:
<div role="complementary" class="bs-docs-sidebar hidden-print" id="sideNav">
<div class="sideNavCont">
<div>
<span class="sideMenuHeading">TITLE</span>
</div>
<div class="sideMenuGuideSep"></div>
<div class="sideMenu" id="navbar">
<ul class="nav nav-list affix sideMenuGuide">
<li>Option 1</li>
<li>Option 2 </li>
<li>Option 3 </li>
<li>Option 4 </li>
(and so on...)
</ul>
</div>
</div>
</div>
And here is the HTML for the content I want spied on:
<div id="content">
<span id="opt1">
<strong>Overview</strong>
</span>
<div>
<strong>
<span id="opt2" style="font-size: 32px;">TITLE</span>
</strong>
</div>
<p>
<span id="opt3" style="font-size: 32px;">
<strong>TITLE</strong>
</span>
</p>
</div>
Plus I have this piece of Jquery:
$('body').scrollspy({ target: '#content' });
Note that I also currently have working page anchors on each heading that work from linking from the nav.
I know the answer is probably staring me right in the face, but I'd appreciate your help. Thanks!
From the bootstrap doc, http://getbootstrap.com/javascript/#scrollspy.
"Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component."
So it should probably be initialized like this:
$('body').scrollspy({ target: '#sideNav' })