I have 5 sections on my site, and a fixed div with 2 divs inside that I want the contents to change depending what section is scrolled over/in view.
I found this jsFiddle which is like what I want to achieve but not quite, and I can't work out how to make it work for me.
Here is the JS code used in that jsFiddle which I assuming a few modifications should be all it takes:
$(window).load(function () {
$(window).on("scroll resize", function () {
var pos = $('#date').offset();
$('.post').each(function () {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
$('#date').html($(this).find('.description').text()); //or any other way you want to get the date
return; //break the loop
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
})
Here is a few snippets of HTML from my site:
The sections:
<section id="space">
</section>
<section id="sky">
</section>
<section id="home">
</section>
<section id="about">
</section>
<section id="involved">
</section>
And the 2 divs:
<div id="caption1" class="nivo-html-caption">
<h1><strong>Test Test Headline home</strong></h1><em></em>
<div class="headline"><p>Home1 Home1 Home1</p></div>
</div>
<div id="caption2" class="nivo-html-caption">
<h1><strong>Test Test Headline 2 home</strong></h1> <em></em>
<div class="headline"><p>Home2 Home2 Home2</p></div>
</div>
So to summarise, when scrolling over the home section the text between the "h1" and "p" tags in the div "caption1" and the text between the "h1" and "p" tags in the div "caption2" will be unique to the "home" section but if for instance scrolling over the space section the text will change and be unique to the space section.
Thanks in advance!
In the script of the fiddle, you will see this line:
$('#date').html($(this).find('.description').text());
Change it to:
$('#date').html($(this).find('.description').html());
This will clone the whole content you provide and not just the text in it.
Then you will need to provide a description in every section you have in HTML, and adapt the selectors in the script to your html structure, if needed.
In your case, you need to populate two divs, but this isn't really a big difference:
JS:
$('#caption1').html($(this).find('.description1').html());
$('#caption2').html($(this).find('.description2').html());
HTML
<section id="home">
content
<div class="description1">content for caption1</div>
<div class="description2">content for caption2</div>
</section>
Don't use <p>-Elements as content holder. It won't work if they hold other HTML-elements. Just use a <div> instead.
Here's an example: Fiddle
It might be easier to apply this to all sections with varying caption lengths if you use a single class name for all captions within a section a structure like
<section id="home">
content
<div class="captions">
<div class="nivo-html-caption">content for caption1</div>
<div class="nivo-html-caption">content for caption2</div>
</div>
</section>
and then apply the content to the side container by
$('#side-panel').html($(this).find('.captions').html());
Related
I use fullpage.js and want to build navigation automatically when I ad a section or a slide. Therefore I need the id from the sections. Which I have in the script below. But I also need a data-anchor nested in the slide div's inside each section.
**Goal: the html structure is driven by fullpage.js. al working fine. But now I want to automatically generate a submenu for the slides. Therefor I need the id from the section. (which is done) And the value from the data-anchor to put into the href. so the href src needs to be =section0/about and section0/history. when I add a slide in the section it should automatically put a link in the nav. **
Anyone?
HTML
<div id="fullpage">
<div id="section0"></div>
<div id="section1">
<div class="slide" data-anchor="about"></div>
<div class="slide" data-anchor="history"></div>
</div>
<div id="section2"></div>
<div id="section3"></div>
</div>
JS
$( document ).ready(function() {
var sections = $('#fullpage > div').map(function(){
return '#' + this.id;
}).get();
});
RESULT MENU
<ul id="subnav" class="innernav">
<li class="subnav">About</li>
<li class="subnav">History</li>
</ul>
Edit
Does my explanation make any sense?
I have a large number of pages containing varying lengths of long text (1000 words+) that I have separated into logical tabs (Summary, Content, References and Authors) using CSS only. The Content tab has far more text than the other tabs and users still end up scrolling like crazy to read through it all.
I would like a way of splitting up the long Content text into sub-tabs or sub-pages, but without allowing the user to navigate away from the main tabbed page (i.e. I still want them to be able to switch between the 4 main tabs (Summary, Content, References and Authors).
I also, do not want to have to go through all the content and manually enter in the breakpoints for the Content section as the content may be changing fairly frequently.
Any ideas about how to split the Content section up to allow the 4 tab navigation and display the Content without having to scroll?
I have created a codepen with a sample of what it currently looks like with html and CSS code: http://codepen.io/TimSparrow/pen/xdKAa
<div class="chapters">
<article class="tabs">
<section id="tab1">
<h2>Summary</h2>
<p><h3>Summary</h3></p>
<ul>
<li>sample</li>
</ul>
</section>
<section id="tab2">
<h2>Content</h2>
<p>Long Text Goes Here</p>
</section>
<section id="tab3">
<h2>References</h2>
<p>This content appears on tab 3.</p>
</section>
<section id="tab4">
<h2>Authors</h2>
<p>This content appears on tab 4.</p>
</section>
</article>
</div>
Welcome to SO,
You could try using the overflow css property which handles how content should behave if it would overflow the borders of the containing element, and add a height to your content (so it will have the aforementioned content border limit), something as follows:
Wrap your content into a containing element, for example <div class="sectionContent">:
....
<section id="tab1">
<h2>Summary</h2>
<div class="sectionContent">
<h3>Summary</h3>
<p>Long text here</p>
....
....
</div> // div.sectionContent closed
</section>
....
And then add some CSS to the bowl to make it work:
.sectionContent{
overflow-y : scroll;
height : 15em;
color:#000;
}
Comment: I've also added the color attribute to this class' CSS, because you're referencing section > p (as in this case you don't have any direct p children within the sections, they are actually section > .sectionContent > p.)
I made this example up in jsfiddle: http://jsfiddle.net/yt88bsnf/1/
One section has a display of none, and the other is shown. What I am trying to accomplish is when the one of the h2 element is clicked, that section below becomes shown (unless it is already shown, then it would stay shown), and the other h2 element display changes to none (unless it already has a display of none).
Any help or suggestions would be greatly appreciated! Thanks
HTML:
<div id="container">
<h2>Section One</h2>
<h2>Section Two</h2>
</div>
<div id="section_one">
This is Section One
</div>
<div id="section_two">
This is Section Two
</div>
CSS:
#container{
overflow:hidden;
}
#container h2{
float:left;
margin-right:30px;
cursor:pointer;
}
#section_two{
display:none;
}
Check this fiddle
You can use jquery show() and hide(). For more information see W3Scools
And for the docs see here
show()
hide()
JS
$("#header1").click(function () {
$("#section_one").show();
$("#section_two").hide();
});
$("#header2").click(function () {
$("#section_two").show();
$("#section_one").hide();
});
HTML
<div id="container">
<h2 id="header1">Section One</h2>
<h2 id="header2">Section Two</h2>
</div>
<div id="section_one">This is Section One</div>
<div id="section_two">This is Section Two</div>
I've added each h2 an id (header1 and header2) and used that id to show and hide the divs respectively..Please Try it..
with jQuery you can use
$(document).ready(function() {
$('#button1').on('click', function() {
$('#section_one').show();
$('#section_two').hide();
});
$('#button2').on('click', function() {
$('#section_one').hide();
$('#section_two').show();
});
});
i added two id's to the h2's to reference them for the click event.
if you are using more than two sections you might want to use a loop to iterate through them and change their visibility. in that case you could also use the h2's index to check which section should be shown.
see FIDDLE
JS Fiddle Live Demo
An easy way to do it would be to wrap these in their individual parents like:
<div class="parent">
<h1>Section One</h1>
<p>Section One</p>
</div>
<div class="parent">
<h1>Section Two</h1>
<p style="visibility: hidden;">Section Two</p>
</div>
This way you can add multiple sections in your dom and this jQuery would be enough:
$(".parent").children("h1").click(function(){
$(".parent").children("p").css("visibility", "hidden");
$(this).siblings("p").css("visibility", "visible");
});
Feel free to ask any questions in comments.
The following jquery code allows you to hide show the div's irrespective of the number of div's and also do not require additional id's to be created.
$("#container").on('click','h2',function(){//click on any h2 in container
//hide all div's having section id starting with section_
$("div[id^='section_']").hide();
//show the div which has index position equal to the clicked h2
$($("div[id^='section_']")[$(this).index()]).show();
});
See fiddle http://jsfiddle.net/3pmakwh4/
I have a site that is divided into 2 columns (each at 50% width):
HTML:
<nav></nav>
<div class="left-column"></div>
<div class="right-column"></div>
<footer></footer>
I have a secondary page with html:
<nav></nav>
<div class="left-column"></div>
<div class="right-column level-two"></div>
<footer></footer>
Using .load() I want to have the right-column on the secondary page load on top of the right-column of the first page (with the intention of adding a close box afterwards).
The html would look like this:
<nav></nav>
<div class="left-column"></div>
<div class="right-column level-two"></div> //THE RIGHT COLUMN FROM LEVEL 2 INSERTED HERE
<div class="right-column"></div>
<footer></footer>
The problem is I can't figure out a way to do this: .append() still adds it into the div it's attached to and .before() doesn't work to add jquery(?) just content?
I want the two right-columns to exist because if I close out right-column level-two I still want the original right-column underneath.
Use CSS selector to search for the class left-column and it's neighbor class right-column
Insert the data from holder in between the two classes
$(document).ready( function () {
$.get('second-page-url.html',function (data) {
$(data).find('.right-column.level-two').insertBefore($('.left-column + .right-column'));
});
$.get('<secondary_page_url>',function (data) {
$(data).find('.right-column.level-two').insertBefore($('.right-column'));
})
I have many questions here so please be patient with me, very new jquery/javascript user.
Here is my current page http://integratedcx.com/index.php/experience
Basically I would like each of the projects and project categories to have the hidden div, slidedown like a drawer not just appear as they do now.
I have tried to achieve this through jquery without much success, here is my working http://integratedcx.com/temp/slide.html
How do I get the div below the one opening to "ease" down instead of jump
How do I get my close feature (orange box) in recent projects to work properly
How do I get my the project list on the right side of image to hide (as it does on my current page) as well as have the drawer opening effect.
Is there an easy way to i.e. variable to assign this to multiple divs using jquery.
Thank you in advanced for any/all help.
For your question 4, With the following script (based on ComputerArts's answer above), you can easily add the slide effect to a large number of divs:
$(document).ready(function () {
$(".toggle-to-show").click(function (evt) {
var targetdiv = $(evt.currentTarget).attr("data-drawer");
$(targetdiv).slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('.bracket', evt.currentTarget).html('less');
$('.project', evt.currentTarget).hide();
$('.closebox', this).bind('click', function(e) {$(evt.currentTarget).triggerHandler('click');});
}
else {
$('.bracket', evt.currentTarget).html('more');
$('.project', evt.currentTarget).show();
$('.closebox', this).unbind('click');
}
});
})
})
Then, you can mark up the toggle buttons and sliders as follows:
<div class="toggle-to-show" data-drawer="#firstsection">
<div class="project">Project One Heading</div>
<div class="bracket">more</div>
</div>
<div id="firstsection">
<h3>Project One Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#secondsection">
<div class="project">Project Two Heading</div>
<div class="bracket">more</div>
</div>
<div id="secondsection">
<h3>Project Two Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#thirdsection">
<div class="project">Project Third Heading</div>
<div class="bracket">more</div>
</div>
<div id="thirdsection">
<h3>Project Three Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
As for points #1 and #2, try this fiddle
I only changed the first script tag to
<script type='text/javascript'>
$(document).ready(function () {
$(".projectx-show").click(function () {
$("#projectx").slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('#projectx-bracket').html('less');
}
else {
$('#projectx-bracket').html('more');
}
});
})
})
</script>
FYI, you don't need to use $(window).load and then $(document).ready... one is enough
As for #3, I don't understand what you're trying to say.
#4, yes there is a way, using classes and keeping the structure the same for every bloc in your page.
http://api.jquery.com/slideDown/
$("#link_id").click(function(){
$("#div_to_show").slideDown();
});
http://api.jquery.com/slideUp/
$('#div_to_close').slideUp();
Using both of the methods from 1, and 2
By using class names instead of IDs for your selectors. For example:
$(".link_class").click(function(){
$(this).parentsUntil('.ex-wrapper').find('.div_to_show').slideDown();
});