Develop Reference

How to create a read more link with fade out background?

I am following this tutorial and I tried to apply it to my case:
HTML
<div class="jiku_text">
<p>I was born in Mauritius in 1967, spending my childhood under the sun of the Indian Ocean, before moving to the UK in July 1976. Punk had just started its own cultural revolution, while reggae and dub were ever present in the neighbourhood “blues” parties, as well as from the first real booming systems in the cars that would ever so often drive casually through the streets of Lewisham, South-East London. I did all of my schooling there, drawing since as far back as I can remember, spending my youth deep into comics, sci-fi and fantasy literature, as well as role-playing games such as “Dungeons & Dragons”.</p>
<p>I can’t forget to mention what effect the release of Star Wars, in 1977, had on my vision of the world around me. Before even getting into J.R.R. Tolkien, this movie was definitely a milestone in my childhood, and stoked a fire for science-fiction and fantasy which would have me look at the world around me in a totally different way from before.</p>
<p>All these influences, as well as the music coming from the radio, the TV and the street, were reflected in what I drew or painted; from comic strip characters to lead figurines, even to the odd oil portrait or landscape painting.</p>
<p>After my school exams in summer ‘84, I started hanging out in Covent Garden, the hub of the London Hip Hop scene, which I had discovered the year before, walking through it with my mother and the younger of my older brothers. My drawing ability led me to pick up the marker and spray-can, doing anything from painting banners for the “Alternative Arts” centre, or customizing the trousers or jackets of some of the other people hanging out with me, whether they were dancers or Mc’s. I was soon trying to make a name for myself, along with my partner Scribla, then with Zaki Dee, Eskimo, and Xerox as The Trailblazers, and eventually as part of a crew called The Chrome , which I formed in the spring of 1985, around the time of a seminal gig called The Rapattack, at the Shaw Theatre in the Euston area of London.</p>
<p class="read-more">Read More</p>
</div>
CSS
.jiku_text {
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 60px;
background: #3a3a3a;
margin-top: 40px;
margin-bottom: 40px;
margin-right: 20px;
margin-left: 20px;
color: #fff;
max-height: 200px;
position: relative;
overflow: hidden;
}
.jiku_text .read-more {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0; padding: 30px 0;
background-image: linear-gradient(to bottom, transparent, black);
}
JS
var $el, $ps, $up, totalHeight;
$(".jiku_text .btn").on("click", function() {
totalHeight = 0
$el = $(this);
$p = $el.parent();
$up = $p.parent();
$ps = $up.find("p:not('.read-more')");
// measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
$ps.each(function() {
totalHeight += $(this).outerHeight();
});
$up
.css({
// Set height to prevent instant jumpdown when max height is removed
"height": $up.height(),
"max-height": 9999
})
.animate({
"height": totalHeight
});
// fade out read-more
$p.fadeOut();
// prevent jump-down
return false;
});
But the expansion creates a jump, see the test case on jsFiddle
UPDATE
tried to provide outerHeight instead of "height": $up.height(), but the text isn't expanding in full see https://jsfiddle.net/fbh0o67o/351/

You have an issue with your container div. Remove paddings from you css 'jiku_text'.
.jiku_text {
/*
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 60px;
*/
background: #3a3a3a;
margin-top: 40px;
margin-bottom: 40px;
margin-right: 20px;
margin-left: 20px;
color: #fff;
max-height: 200px;
position: relative;
overflow: hidden;
}

Thanks to an answer in regards of my padding given to .jiku_text, I noticed where the issue was:
In my JS, I had to change "height": $up.height(), to "height": $up.outerHeight(), and then give "height": totalHeight + 140 which is the new calculated height with the padding in my css
https://jsfiddle.net/fbh0o67o/365/

How to trigger a show or hide operation based on div size when the browser is resized

I am designing a summary container for the author page in a book publishing website. Some authors have more summary content while others have less content. I want to enable/ disable show more/less button dynamically when the height of the div container crosses a cutoff height(180px). So, it turns out to control the height of the div container dynamically (180px and original height). I need a piece of code which works perfectly in all browsers.
I have got a code implemented here:
http://jsfiddle.net/rraagghhu/9dgs6432/3/
HTML :
<div class = "container">
<div class="info-wrapper">
<div class="info">
Chetan Bhagat is the author of six blockbuster books.These include five novels—Five Point Someone (2004), One Night # the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009),
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release.
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info#chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (#chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
(more)
(less)
</div>
<div class = "footer"> THIS IS FOOTER </div>
</div>
CSS:
.container{
background-color: yellow;
}
.footer{
background-color: yellow;
}
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
background-color: red;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: hidden;
position: relative;
text-align: justify;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
position: relative;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.less { height: auto; display: none; }
.more { display: none; }
Jquery:
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible"});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden"});
$("a.more").show();
$("a.less").hide();
return false;
});
As you can see, the footer stays at the absolute position. If the more button is clicked, the (less) should come down, below that should come the footer. Is it possible to enable/disable the show more/less button dynamically when the browser is shrunk/expanded?

Set the max-height to 100% for show more and set the max-height to 180px when show less.
Updated JSFiddle

You don't need the overflow to ever be shown, instead just increase the max-height to 100%.
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"max-height": "100%"});
$("a.less").show();
$("a.more").hide();
return false;
});
I also added in some padding so you can see the text a bit easier.
Updated fiddle
This is really another question, but using innerHeight instead of height you can detect if the text is overflowing with the padding on window resize:
$(window).resize(function(){
if($(".info")[0].scrollHeight > $(".info").innerHeight()) {
$("a.more").show();
}
});
I also positioned the less/more button absolutely at the bottom of the info box to overlay any text that might extend into the padding:
.info-wrapper a {
left: 0; bottom: 0;
width: 100%;
background: red;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
line-height: 20px;
}
Full code is in this fiddle

You are not removing the max-height from the CSS and that is what is causing the issue. You can do two things here:
Either you can set the max-height to 100%
or, you can set the max-height in another css class and add and remove that class to the info div dynamically
Create a css style:
.restrict{
max-height: 180px;
}
On click of more:
$(".info").removeClass('restrict');
On click of less:
$(".info").addClass('restrict');
See my forked fiddle with the changes:
https://jsfiddle.net/jdnf5vka/4/

Yes you can enable and disable the buttons as the browser is resized.
You'll need to build your javascript like this:
// make your function re-usable
var buttonChecker = function() {
// show / hide buttons logic here
}
// bind the function to the resize event (note, no parenthesis for calling the function here, it's just a reference passed in that is then called when the resize event is triggered)
$(window).on('resize', buttonChecker);
// call your function on page load so the buttons are correctly shown then (note, parenthesis are used, function is called
buttonChecker();
This way when the browser is resized the show / hide button functionality will be re-called.
PS - here is the OPs example fixed: http://jsfiddle.net/9dgs6432/20/ - note the contents of the buttonChecker() function and the logic to hide as well as show.

Traversing up the DOM to show the individual content according to each anchor

Im working on an some code to fade toggle information out of its relevant link. Because i want to show the content so it doesn't hide the anchor. Does anyone know if there is a way to go up the DOM and show the individual content according to each anchor? My code shows that its going up the DOM. I'm struggling to get it working using the jsfiddle code below.
http://jsfiddle.net/g1mn79td/
<div class="info">
<p>South Korea</p>
<p>South Korea is known globally for its thriving energy industry, providing a large number of overseas employment opportunities. The majority of foreign nationals make themselves at home in the larger cities such as Seoul, Busan and Incheon. If you’ve found a great role in South Korea, then follow the link to find out more about what you’ll need to think about when moving yourself or your family to this fascinating country.</p>
</div>
<div class="info">
<p>Angola</p>
<p>As one of the largest countries in southern Africa, Angola has great natural resources in oil, diamonds, gold and copper. Portuguese is the most commonly spoken language in Angola so learning some of the basics can be instrumental in helping you get by. The prospect of moving yourself and even your family to a new country can be overwhelming with many elements to think about when planning your relocation. All of this information and more is available in this guide.</p>
</div>
<div class="t">
<div class="tc rel">
<div class="book" id="book">
<div class="page cover"></div>
<div class="page two">
<div class="block">
<h1>passport</h1>
click
</div>
</div>
<div class="page three">
<div class="block">
<h1>passport</h1>
click
</div>
</div>
</div>
</div>
</div>
html, body {
margin: 0;
height: 100%;
}
body {
background-color: #333;
}
body.hide-overflow {
overflow: hidden;
}
/* helpers */
.t {
display: table;
width: 100%;
height: 100%;
}
.tc {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.rel {
position: relative;
}
/* book */
.book {
margin: 0 auto;
width: 90%;
height: 90%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
top: 140px;
}
.book .page {
height: 100%;
float: left;
}
.book .cover {
background:white url(pages/1.jpg) no-repeat;
background-size:cover;
}
.book .two {
background:url(pages/2.jpg) no-repeat;
background-size:cover;
}
.book .three {
background:url(pages/3.jpg) no-repeat;
background-size:cover;
}
.book .page img {
max-width: 100%;
height: 100%;
}
.block {
background:red;
width:50%;
height:50%;
display:block;
margin:60px auto;
padding:10%;
overflow:hidden;
}
.green {
background:green;
}
body .info {
background: none repeat scroll 0 0 white;
height: auto;
margin: 30px;
position: absolute;
width: 80%;
z-index: 1;
display:none;
padding:10px
}
body .info p {
font-size:15px;
line-height:20px
}
var $findtip = $('.page');
$findtip.find('a').on('mouseenter mouseleave', function () {
var $link = $(this);
$(this).parents().eq(7).find('.info').fadeToggle();
});

http://jsfiddle.net/g1mn79td/6/
var o;
$('.page a').on('mouseenter mouseleave',function(){
o = $(this).parent().parent().index();
i = parseInt(o) - 1;
$('body').find('.info').eq(i).fadeToggle();
});

Since there is no direct structural connection between a given link and a given info section (e.g. they are not each uniquely in a sub-tree of the DOM), you will have to create such a link. I'd suggest adding an id to each info section:
<div id="koreaInfo" class="info">
<p>South Korea</p>
<p>South Korea is known globally for its thriving energy industry, providing a large number of overseas employment opportunities. The majority of foreign nationals make themselves at home in the larger cities such as Seoul, Busan and Incheon. If you’ve found a great role in South Korea, then follow the link to find out more about what you’ll need to think about when moving yourself or your family to this fascinating country.</p>
</div>
<div id="angolaInfo" class="info">
<p>Angola</p>
<p>As one of the largest countries in southern Africa, Angola has great natural resources in oil, diamonds, gold and copper. Portuguese is the most commonly spoken language in Angola so learning some of the basics can be instrumental in helping you get by. The prospect of moving yourself and even your family to a new country can be overwhelming with many elements to think about when planning your relocation. All of this information and more is available in this guide.</p>
</div>
And, the add a custom attribute to each link:
click
....
click
The, you can fetch the custom attribute for the hovered link and use that to show/hide the relevant info area.
$(".tip").hover(function() {
$(".info").hide();
var id = $(this).data("info");
$("#" + id).show();
}, function() {
$(".info").hide();
});

Simple css not working in Iceweasel 31.2

So I am making a website for a relative, I have made a which isn't displayed at first (display : none) and fades in when the user click somewhere on the page.
It works very well with Chromium, but when I try with Iceweasel 31.2 the CSS for the part of the page that is supposed to fade-in doesn't load.
The javascript function that is called upon clicking the button :
var openGallery = function(){
$('section, nav, #topleft').fadeOut(400);
$('#gallerie').toggle();
}
This is the CSS involved
#gallerie
{
position: relative;
height: 874px;
width: 1152px;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
margin: auto;
text-align: center;
}
#gallerie img:first-of-type
{
max-width: 1100px;
max-height: 720px;
display: block;
margin-left: auto;
margin-right: auto;
}
.close
{
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
}
.left, .right
{
position: static;
top: 746px;
}
And finally, the HTML that fades in/out (note that the JS part of it comes from some PHP)
<div id="gallerie">
<script type="text/javascript">
var collection = [
// "FILENAME" | "NAME" | WIDTH | HEIGHT
["6ème arrondissement-73 X 60.JPG","6ème arrondissement",1535,1832],
(more data...)
["Sur la neige-55 X 46.JPG","Sur la neige",1853,1562]
]
</script>
<h3>Gallerie</h3>
<figure>
<img src="data/tableaux/6ème arrondissement-73 X 60.JPG" class="big" title="6ème arrondissement" alt="0">
<figcaption>6ème arrondissement</figcaption>
<img src="images/left.png" alt="left" class="left" title="left"><img src="images/right.png" alt="right" class="right" title="right">
</figure>
<img src="images/close.png" class="close" title="Fermer la fenetre">
</div>
I really don't know where the bug might come from. Thanks for helping me out.

Personally, I would use JQuery to toggle through the class events and use those to do the transitions etc. Right now, CSS3 is pretty good across browsers.
Instead of:
$('section, nav, #topleft').fadeOut(400);
I would add CSS that handles the fade with a transition.
Check out the pen I made here to see the effect. You can add toggleClass(); addClass(); or removeClass(); should you choose.
http://codepen.io/brycesnyder/pen/LEPJZg
EDIT: .toggle(); will cause a stupid effect, I meant .toggleClass();

How to create stack of divs and display on scroll dynamically?

This is a link to my website template which i am designing i want the next div to be appeared smoothly but when i scroll fast it shows borders of div!!
This is a (http://jsfiddle.net/kailash8591/329cos9y/embedded/result/)
Here is the reference site i am trying to follow design!!
chameleon
How can i achieve this using jQuery?
$(function () {
$(".wrapper").scroll(function () {
var height = $(".active").height();
if ($(".wrapper").scrollTop() > (height - 400)) {
//alert("wrapper content "+$(".wrapper content").scrollTop());
//ert("height of wrapper"+height);
$(".active").animate({
'opacity': 0
}, 'slow');
$next = $(".active").next();
$next.addClass('active');
$next.siblings().removeClass('active')
$prev = $next.prev();
$next.animate({
'opacity': 1
}, 'slow');
}
});
});
<div class="header">
<div class="companylogo">logo</div>
<div class="companytitle">Click Online Services</div>
</div>
<div class="wrapper" id='wrapper'>
<!--column-->
<div class="green active" id="green">
<img class="bg-img" src="http://s15.postimg.org/n4xk7g62j/green.jpg">
<div class='Description'>
<p> <span>Company Brief</span> 3 click online services is a leading Solutions Provider, implementing technology and design to deliver the best in time. Founded with an aim to revamp end user's perception of the Web. Industry and still growing, 3 click online services have added a whole new dimension to Web Development and Design. 3 click online services is not just limited his boundaries to Web development but also Software Development Logo Designing etc. 3 click online services are a bunch of passionate people working round the clock to bring that 'smile-of-content' on your face. We stay a step ahead of your expectations, upholding high and professional standards of work. With our technical expertise at play, all our solutions are tailor-made to suite your business needs. Our core team of developers, programmers and artists are dedicated to offering business class services with a touch of compassion. Talking about clients, our relationships do not end with deployment.</p>
<p>Companies Services Logo Designing 3 click online services provide an artistic creation of logos. Web Designing and Development 3 click online services solution provides a broad range of web design services from static html websites to web applications and software development. We focus on achieving our clients' business goals. We know that a successful website is not only about a beautiful design - it is about understanding the clients' business requirements and translating them into scalable web design solutions. We are proud to be a part of our clients' team, unlike many other web companies who merely treat designing as a job. The end result is websites and web applications that are consistent with our clients' online expectations we pay high attention to details, provide fast turn-around and are extremely affordable. Our clients range from individuals to large corporations throughout the world. All of the cutting-edge market tendencies are presented in Development Services of our company. We are skilled in Html, Java, .NET, PHP .Our web sites and networks have a wide functionality and are integrated with payment systems, mobile platforms and corporate resources. We are passionate about what we do, and believe that the best way to demonstrate our expertise is to show you our work.</p>
</div>
</div>
<div class="red">
<img class="bg-img" src="http://s15.postimg.org/hi179z3jv/red.jpg">
</div>
<div class="yellow">
<img class="bg-img" src="http://s15.postimg.org/c966c3l4r/yellow.jpg">
</div>
<div class="blue" id="blue">
<img class="bg-img" src="http://s15.postimg.org/wmxb7hrqz/blue.jpg">
</div>
<div class="dblue">
<img class="bg-img" src="http://s15.postimg.org/dj3zr5ewr/darkblue.jpg">
</div>
<!--contentwrapper-->
</div>
html, body {
height: 100%;
margin:0;
padding:0;
overflow: hidden;
font-family:'robotolight';
}
.wrapper {
position: relative;
overflow-y: scroll;
width: 100%;
overflow-x: hidden;
}
.wrapper {
position:relative;
margin-top:65px;
background-image: url("http://s15.postimg.org/3vvw3owjf/black.jpg");
}
.bg-img {
width:1366px;
height:2000px;
}
.wrapper, .green {
height:100%;
left:0;
top:0;
opacity:1;
}
.red, .blue, .yellow, .dblue {
opacity:0;
position:absolute;
left:0;
top:0;
height:100%;
border-style: none;
border-color: transparent;
background-color: transparent;
/* display:none; */
}
.green {
border-style: none;
position:absolute;
left:0;
top:0;
background-color: transparent;
border-color: transparent;
z-index: 2;
}
.green img {
width:1366px;
height:1366px;
margin-top:-388px;
}
.red img {
margin-top: -208px
}
.yellow img {
margin-top: -388px;
}
.blue img {
margin-top: -388px;
}
.dblue img {
margin-top: -388px;
}
.red {
z-index:4;
}
.yellow {
z-index: 6;
}
.blue {
z-index: 10;
}
.dblue {
z-index: 12;
}
.header {
height:60px;
width:100%;
z-index:200;
position:fixed;
background-color:rgba(2, 2, 2, 0.8);
color:white;
font-size: 24px;
text-align: center;
padding-top: 5px
}
.header .companylogo {
position: absolute;
width:137px;
height:40px;
float:left;
margin: 6px 8px;
overflow:hidden;
border-color: white;
border:1px solid;
}
.header .companytitle {
width: 280px;
margin: auto;
padding-top: 12px;
}
.Description {
position:absolute;
top: 34px;
left:200px;
margin: auto;
width: 700px;
height: 400px;
background-color: transparent;
z-index: 51;
}

jsBin demo
I would do it simply as:
Store a desired color inside an element data-* attribute: <div class="page" data-bgcolor="#27AE61">. That color will be than assigned using JS to the body element.
Create an Array that will dynamically collect all the elements positions and the colors resulting as: [[0,"#27AE61"],[1250,"gold"],....etc]
On scroll get the Array item that matches the scroll position and retrieve it's color (when the element is mostly visible so I used /1.5)
Set that color to $('body') and achieve the BODY bg color transition with CSS3: body{ transition: background 3s;}
JS/jQ:
var $page = $('.page'),
pos2Color = [], // [[pos,color],[pos,color],...]
winH, scrH, oldColor,
start = true;
function getPosColorData(){ // Creates the Array [[pos, color], ... ]
pos2Color = [];
winH = $(window).height();
scrH = $('html, body')[0].scrollHeight;
$page.each(function(){
pos2Color.push([
this.getBoundingClientRect().top,
this.dataset.bgcolor
]);
});
}
$(window).on("scroll", function(){
if(start){ // Do it only once on first scroll
getPosColorData();
start=false;
}
var st = $(this).scrollTop();
var color = pos2Color.filter(function(k){ // Search in our Array...
return k[0] > ( st-winH / 1.5 ); // (change 1.5 to your needs)
})[0][1]; // ...and retrieve the color!
if(color!==oldColor){ // Only if it's a new color!
$("body").css({background: color});
oldColor = color;
}
}).on('resize', function(){
start = true; // Something changed, allow another take.
});
HTML:
<header>
<h1>HELLO WORLD</h1>
</header>
<div class="page" data-bgcolor="#27AE61"><h1>page1</h1></div>
<div class="page" data-bgcolor="gold"><h1>page2</h1></div>
<div class="page" data-bgcolor="#37e"><h1>page3</h1></div>
<div class="page" data-bgcolor="#e73"><h1>page4</h1></div>
<div class="page" data-bgcolor="#7fe"><h1>page5</h1></div>

To be honest, if I were you I wouldn't bother with the pain of building a one page template from scratch. If this is for your company's website, look into working with pre-made templates, they're usually around 10 dollars, and they're worth it given the time they save you. (all you have to do is fill the website up, do some tweaking with the css and js, and maybe add some custom sections)
Anyway, this is just a suggestion, because I just briefly scrolled over chameleon, and you're going to encounter a lot of problems :)