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.)
Related
The layout of my simple website is that there are 3 sections below each other with different background and every section have it's own textual content. I want to achieve so called 3D perspective effect, that the content text will throw shadow over the background section and when scrolling, the text will scroll a little bit faster than background.
Now there are thow ways of organizing the code:
First - every section (with background) have it's own content:
<main>
<section class="background-1">
<div class="content-1">Some text and image</div>
</section>
<section class="background-2">
<div class="content-2">Some text and image</div>
</section>
<section class="background-3">
<div class="content-3">Some text and image</div>
</section>
</main>
Second - sections (serving as a background) and text contents (hovering over background) are separated:
<div class="backgrounds">
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
</div>
<main class="contents">
<section class="content-1">Some text and image</section>
<section class="content-2">Some text and image</section>
<section class="content-3">Some text and image</section>
</main>
The difference is, that in first case, we must animate let's say top property of every content separately and in second case only the .contents wrapper need to be animated.
What is more preferred way, especially considering mobile device performance, then SEO and other stuff?
I'm making a small page that has 3 sections. While 1 section is showing the others are hidden. When the page loads the welcome section is displayed, while the other sections are set to display:none. Clicking the menu button for the other pages shows the desired section and hides all the others; I am using jQuery to do that. Unfortunately, now I come across the problem that I'm unable to make a url to go to the specific section. Usually, to go to a section of a page that is not hidden, I would just create an anchor and name is XXX, and then add #XXX at the end of that page's url, but doing this on a hidden div doesn't make the div show.
Any suggestions?
html:
<div id="menu">
<p>Home</p>
<p>Page 1</p>
<p>Page 2</p>
</div>
<div id="home">
<h1>Welcome!</h1>
<p>This is where all the home page stuff will go</p>
</div>
<div id="page1">
<h1>Page 1</h1>
<p>Page 1 content here</p>
</div>
<div id="page2">
<h1>Page 2</h1>
<p>Page 2 content here</p>
</div>
css:
#page1 {
display:none;
}
#page2 {
display:none;
}
js:
$(document).ready(function(){
$('#menu-home).click(function(){
$('#home').show('fast');
$('#page1').hide('fast');
$('#page2').hide('fast');
});
$('#menu-page1).click(function(){
$('#page1').show('fast');
$('#home').hide('fast');
$('#page2').hide('fast');
});
$('#menu-page2).click(function(){
$('#page2').show('fast');
$('#home').hide('fast');
$('#page1').hide('fast');
});
});
You could use window.location.hash* which will return the corresponding part of the url.
For this to work you should give your <a> tags some proper hash value:
<p>Page 1</p>
<p>Page 2</p>
And check the mentioned string whether it matches a given page:
$(document).ready(function(){
//binding click events to elements
var locationHash = window.location.hash.substring(1);
if(locationHash == 'page1'){
$('#menu-page1').trigger('click');
}else if(locationHash == 'page2'){
$('#menu-page2').trigger('click');
}
});
You see I used the click-events for a fast quick-n-dirty solution and also substringed location.hash to get rid of the #.
Of course this is open for improvement .e.g. not hiding page1 or page2 at all on page load if a given hash is found.
*See the linked document for Location as window.location is a Location object which holds a hashproperty
You will need some javascript, that, on page loading, checks the URL for an anchor like #menu-xy, and makes the corresponding div visible.
I'm making a small page that has 3 sections. While 1 section is showing the others are hidden. When the page loads the welcome section is displayed, while the other sections are set to display:none. Clicking the menu button for the other pages shows the desired section and hides all the others; I am using jQuery to do that. Unfortunately, now I come across the problem that I'm unable to make a url to go to the specific section. Usually, to go to a section of a page that is not hidden, I would just create an anchor and name is XXX, and then add #XXX at the end of that page's url, but doing this on a hidden div doesn't make the div show.
Any suggestions?
html:
<div id="menu">
<p>Home</p>
<p>Page 1</p>
<p>Page 2</p>
</div>
<div id="home">
<h1>Welcome!</h1>
<p>This is where all the home page stuff will go</p>
</div>
<div id="page1">
<h1>Page 1</h1>
<p>Page 1 content here</p>
</div>
<div id="page2">
<h1>Page 2</h1>
<p>Page 2 content here</p>
</div>
css:
#page1 {
display:none;
}
#page2 {
display:none;
}
js:
$(document).ready(function(){
$('#menu-home).click(function(){
$('#home').show('fast');
$('#page1').hide('fast');
$('#page2').hide('fast');
});
$('#menu-page1).click(function(){
$('#page1').show('fast');
$('#home').hide('fast');
$('#page2').hide('fast');
});
$('#menu-page2).click(function(){
$('#page2').show('fast');
$('#home').hide('fast');
$('#page1').hide('fast');
});
});
You could use window.location.hash* which will return the corresponding part of the url.
For this to work you should give your <a> tags some proper hash value:
<p>Page 1</p>
<p>Page 2</p>
And check the mentioned string whether it matches a given page:
$(document).ready(function(){
//binding click events to elements
var locationHash = window.location.hash.substring(1);
if(locationHash == 'page1'){
$('#menu-page1').trigger('click');
}else if(locationHash == 'page2'){
$('#menu-page2').trigger('click');
}
});
You see I used the click-events for a fast quick-n-dirty solution and also substringed location.hash to get rid of the #.
Of course this is open for improvement .e.g. not hiding page1 or page2 at all on page load if a given hash is found.
*See the linked document for Location as window.location is a Location object which holds a hashproperty
You will need some javascript, that, on page loading, checks the URL for an anchor like #menu-xy, and makes the corresponding div visible.
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());
I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks
I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.
The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.
See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.