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/
Related
I want to be able to move an img around within its container once the image is zoomed in, because as you can see once you click the image it becomes too big and you can't see the whole image. Also how can I make the image goes back to normal once it's not being hovered? thanks in advance.
// Zoom in/out clothing img
$('.image').click(function() {
$(this).toggleClass('normal-zoom zoom-in');
});
.container {
width: 800px;
margin: 0 auto;
border: 2px solid black;
display: flex;
}
.img-wrapper {
margin: 10px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
}
.text {
width: 40%;
padding: 20px;
}
.normal-zoom {
transform: scale(1);
cursor: zoom-in;
transition: all 250ms;
}
.zoom-in {
transform: scale(1.6);
cursor: zoom-out;
transition: all 250ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="img-wrapper">
<img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">
</div>
<p class="text">Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.</p>
</div>
Since you're using transform: scale() for the zoom effect it's faster and more correct to modify transform-origin to change the center point of the zoom effect on mousemove:
// Zoom in/out clothing img
$('.image').click(function() {
$(this).toggleClass('normal-zoom zoom-in');
});
$('.image').on('mousemove', function(event) {
// This gives you the position of the image on the page
var bbox = event.target.getBoundingClientRect();
// Then we measure how far into the image the mouse is in both x and y directions
var mouseX = event.clientX - bbox.left;
var mouseY = event.clientY - bbox.top;
// Then work out how far through the image as a percentage the mouse is
var xPercent = (mouseX / bbox.width) * 100;
var yPercent = (mouseY / bbox.height) * 100;
// Then we change the `transform-origin` css property on the image to center the zoom effect on the mouse position
//event.target.style.transformOrigin = xPercent + '% ' + yPercent + '%';
// It's a bit clearer in jQuery:
$(this).css('transform-origin', (xPercent+'% ' + yPercent+ '%') );
// We add the '%' units to make sure the string looks exactly like the css declaration it becomes.
});
// If you want it to automatically trigger on hover
$('.image').on('mouseenter', function() {
$(this).addClass('zoom-in');
$(this).removeClass('normal-zoom');
});
// and stop when not hovering
$('.image').on('mouseleave', function() {
$(this).addClass('normal-zoom');
$(this).removeClass('zoom-in');
});
.container {
width: 800px;
margin: 0 auto;
border: 2px solid black;
display: flex;
}
.img-wrapper {
margin: 10px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
}
.text {
width: 40%;
padding: 20px;
}
.normal-zoom {
transform: scale(1);
cursor: zoom-in;
transition: transform 250ms;
}
.zoom-in {
transform: scale(1.6);
cursor: zoom-out;
transition: transform 250ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="img-wrapper">
<img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">
</div>
<p class="text">Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.</p>
</div>
You can use the mousemove event listener on the image with class .zoom-in to change the left and top CSS params. Make sure to set position:relative; on the image.
Example:
$(document).on('mousemove', '.zoom-in', function( event ) {
$(".text").text(event.pageX + ", " + event.pageY);
var positionLeft = event.pageX - $(this).width()/2;
var positionTop = event.pageY - $(this).height()/2;
$(this).css({'left': positionLeft, 'top': positionTop});
});
Here is a fiddle.
I received some help and figured out how to put the clickable and shareable Twitter button in my Javascript.
However, now when it links the generated quote, in the places where I had unicode escaped characters I get �.
The quotations and hyphen do not appear. How can I fix this?
Below is my Javascript code.
var currentQuote = '';
var quotes = [
'\u201CMeditation is to be aware of every thought and of every feeling, never to say it is right or wrong, but just to watch it and move with it. In that watching, you begin to understand the whole movement of thought and feeling. And out of this awareness comes silence\u201D. - Jiddu Krishnamurti',
'\u201CHave you not noticed that love is silence? It may be while holding the hand of another, or looking lovingly at a child, or taking in the beauty of an evening. Love has no past or future, and so it is with this extraordinary state of silence.\u201D - Jiddu Krishnamurti',
'\u201CA quiet mind is all you need. All else will happen rightly, once your mind is quiet. As the sun on rising makes the world active, so does self-awareness affect changes in the mind. In the light of calm and steady self-awareness, inner energies wake up and work miracles without any effort on your part.\u201D - Nisargadatta Maharaj',
'\u201CLet silence take you to the core of life.\u201D \u2013 Rumi',
'\u201CSilence is a true friend who never betrays.\u201D \u2013 Confucius',
'\u201CYou throw thorns, falling in my silence they become flowers.\u201D \u2013 Gautama Buddha',
'\u201CSilence is an empty space, space is the home of the awakened mind.\u201D \u2013 Gautama Buddha',
'\u201CCare about what other people think and you will always be their prisoner.\u201D \u2013 Laozi',
'\u201CNot thinking about anything is Zen. Once you know this, walking, sitting, or lying down, everything you do is Zen.\u201D \u2013 Bodhidharma',
'\u201CIf you use your mind to study reality, you won\u2019t understand either your mind or reality. If you study reality without using your mind, you\u2019ll understand both.\u201D \u2013 Bodhidharma',
'\u201CThe ultimate Truth is beyond words. Doctrines are words. They\u2019re not the way.\u201D \u2013 Bodhidharma',
'\u201CWhen we\u2019re deluded there\u2019s a world to escape. When we\u2019re aware, there\u2019s nothing to escape.\u201D \u2013 Bodhidharma',
'\u201CTrying to find buddha or enlightenment is like trying to grab space.\u201D \u2013 Bodhidharma',
'\u201CBe empty of worrying. Think of who created thought. Why do you stay in prison when the door is wide open? Move outside the tangle of fear-thinking. Live in silence. Flow down and down in always widening rings of being.\u201D \u2013 Unknown',
'\u201CBeyond The Witness, there is the Infinite Intensity of Emptiness and Silence.\u201D \u2013 Sri Nisargadatta Maharaj'
];
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
function tweet() {
var quote = document.getElementById('quoteDisplay').innerHTML // Replace this with appopriate quote that you wanted.
var text = quote;
var tweet_url = "https://twitter.com/intent/tweet?text=" + text;
window.open(tweet_url);
};
document.getElementById("tweetButton").addEventListener("click", tweet);
This is what shows up
It originally had this,
var text = escape(quote);
But would not show anything, so I put
var text = quote;
However, now I get the �.
Here is the simple method that you can use to tweet the things via your twitter button.
function tweet() {
var quote = document.getElementById('quoteDisplay').innerHTML // Replace this with appopriate quote that you wanted.
var text = escape(quote);
var tweet_url = "https://twitter.com/intent/tweet?text=" + text;
window.open(tweet_url);
};
document.getElementById("tweetButton").addEventListener("click", tweet);
You can specify the function in onclick to call the function like a link
var currentQuote = '';
var quotes = [
'\u201CMeditation is to be aware of every thought and of every feeling, never to say it is right or wrong, but just to watch it and move with it. In that watching, you begin to understand the whole movement of thought and feeling. And out of this awareness comes silence\u201D. - Jiddu Krishnamurti',
'\u201CHave you not noticed that love is silence? It may be while holding the hand of another, or looking lovingly at a child, or taking in the beauty of an evening. Love has no past or future, and so it is with this extraordinary state of silence.\u201D - Jiddu Krishnamurti',
'\u201CA quiet mind is all you need. All else will happen rightly, once your mind is quiet. As the sun on rising makes the world active, so does self-awareness affect changes in the mind. In the light of calm and steady self-awareness, inner energies wake up and work miracles without any effort on your part.\u201D - Nisargadatta Maharaj',
'\u201CLet silence take you to the core of life.\u201D \u2013 Rumi',
'\u201CSilence is a true friend who never betrays.\u201D \u2013 Confucius',
'\u201CYou throw thorns, falling in my silence they become flowers.\u201D \u2013 Gautama Buddha',
'\u201CSilence is an empty space, space is the home of the awakened mind.\u201D \u2013 Gautama Buddha',
'\u201CCare about what other people think and you will always be their prisoner.\u201D \u2013 Laozi',
'\u201CNot thinking about anything is Zen. Once you know this, walking, sitting, or lying down, everything you do is Zen.\u201D \u2013 Bodhidharma',
'\u201CIf you use your mind to study reality, you won\u2019t understand either your mind or reality. If you study reality without using your mind, you\u2019ll understand both.\u201D \u2013 Bodhidharma',
'\u201CThe ultimate Truth is beyond words. Doctrines are words. They\u2019re not the way.\u201D \u2013 Bodhidharma',
'\u201CWhen we\u2019re deluded there\u2019s a world to escape. When we\u2019re aware, there\u2019s nothing to escape.\u201D \u2013 Bodhidharma',
'\u201CTrying to find buddha or enlightenment is like trying to grab space.\u201D \u2013 Bodhidharma',
'\u201CBe empty of worrying. Think of who created thought. Why do you stay in prison when the door is wide open? Move outside the tangle of fear-thinking. Live in silence. Flow down and down in always widening rings of being.\u201D \u2013 Unknown',
'\u201CBeyond The Witness, there is the Infinite Intensity of Emptiness and Silence.\u201D \u2013 Sri Nisargadatta Maharaj'
];
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
function newFunction() {
alert("Javascript Link");
}
body {
font-family: 'PT Serif', sans-serif;
margin: 0;
<!-- the above allows use of older browsers #D13053 -->
}
h1 {
color: white;
font-size: 45px;
<!-- margin-top: 100px;
-->font-weight: normal;
margin-bottom: 0;
}
h2 {
color: white;
font-size: 25px;
margin-top: 0;
}
.bio {
color: white;
font-size: 14px;
}
.me {
height: 165px;
border-radius: 110%;
border-style: solid;
border-color: white;
margin-top: 40px;
}
.about {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.grey {
height: 3px;
background-color: white;
border: none;
width: 50px;
}
.about-container {
background: url('inc.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 2000px;
}
h3 {
text-align: center;
font-size: 28px;
font-weight: normal;
margin-top: 100px;
color: white;
}
h4 {
text-align: center;
font-size: 24px;
}
button {
border-radius: 20px;
background-color: #ffffff;
font-size: 30px;
font-family: PT Serif, cursive;
padding: 0 20px;
border: none;
border-bottom: black solid 3px;
margin-top: 85px;
vertical-align: bottom;
}
.tweet-button {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 30px;
transition: all 0.5s;
cursor: pointer;
height: 80px;
}
.tweet-button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.tweet-button:active {
transform: translateY(5px);
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i" rel="stylesheet">
<title>Your Core</title>
</head>
<body>
<iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/H2JtoG97zhI?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
<div class="about-container">
<div class="about">
<img src="fib2.jpg" class="me" />
<h1> Find the space, </h1>
<h2>the space which is between thoughts...</h2>
<hr class="grey" />
<button onclick="newQuote()">Breathe and press here
</button>
<h3>
<div id="quoteDisplay">
<!-- quotes here -->
</div>
</h3>
<img id="tweetButton" class="tweet-button" src="http://orig01.deviantart.net/dac8/f/2013/023/b/c/twitter_button___logo_by_pixxiepaynee-d5sfq9u.png" onclick="newFunction();">
<script src="javascript.js"></script>
</body>
</html>
I am creating a mobile app where a user will post content to a feed. For each post would have a separate div area where he can add content and a pic. The problem is that when I paste a dummy text and a photo all in the same div, the height is off and not adjusting itself.
The pic below has the grey background area fully covered when I set it to a specific height
Here is what it looks like now when I set the height to auto. Notice the grey background area is cut short.
The goal is for the div area to auto adjust to the height despite the content the user adds. I have tried height:auto, height:auto !important, height: 100%, height:100 !important, and overflow:hidden. None of those gave me the results I wanted. What would be the best way to make the grey background area cover everything automatically? I would accept an answer that uses JavaScript or jQuery to make that happen.
HTML
<!-- Feed Begins -->
<section class="feed section-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="FalconsFan1 text-center">
<p>FalconsFan1</p>
</div>
<div class="-posts text-center">
<p>497 posts</p>
</div>
<!-- Posts -->
<div class="container Second-Post">
<div class="row">
<div class="col-sm-12">
<img src="img/bitmap_2.jpg" alt="" class="post-avatar">
<h4 class='post-username'>FalconFans1</h4>
<small class="post-timestamp">32 seconds ago</small>
<p class='post-content'>Julio is the best receiver in the game right now!</p>
<img src="img/post-img.jpg" alt="" class="post-img">
<ul class="polling-icons text-center">
<li><img src="img/green-like-button.png" alt=""></li>
<li><img src="img/grey-dislike-button.png" alt=""></li>
<li><img src="img/grey-comment-button.png" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- Posts -->
</div>
</div>
</div>
</section>
CSS
.feed {
margin-top: -50% !important;
}
.FalconsFan1 {
/* width: 392px;
height: 78px; */
font-size: 64px;
letter-spacing: 0.7px;
text-align: center;
color: #3f3f3f;
margin-left: -15%;
}
.-posts {
/* width: 208px;
height: 49px; */
font-size: 40px;
letter-spacing: 0.5px;
text-align: center;
color: #3f3f3f;
margin-left: -15%;
}
.Second-Post {
object-fit: contain;
background-color: #f8f8f8;
height: auto;
width: 988px !important;
}
.Second-Post::after {
content: " ";
display: block;
clear: both;
}
.post-avatar {
position: absolute;
margin-top: 1%;
left: 5%;
width: 86px;
height: 88px;
}
.post-username {
position: absolute;
left: 20%;
font-size: 42px;
}
.post-timestamp {
position: absolute;
margin-top: 6%;
left: 20.5%;
}
.post-content {
position: absolute;
margin-top: 10%;
left: 20.5%;
width: 754px;
height: 70px;
font-size: 27px;
letter-spacing: 0.8px;
color: #3f3f3f;
}
.post-img {
position: absolute;
margin-top: 17%;
left: 20.5%;
width: 779px;
height: 588px;
}
.polling-icons {
list-style: none;
position: absolute;
margin-top: 80%;
left: 10%;
}
.polling-icons li {
padding: 0;
display: inline !important;
padding: 130px;
}
As long you don't have position:absolute in your stylesheet everything will fall into place, make sure your position is set to relative and leave height at auto (which should be default)
#small_div {
padding: 2rem;
background: orange;
}
#large_div {
padding: 2rem;
background: lime;
}
<div id="small_div">
123
</div>
<div id="large_div">
1 In the beginning God created* the heaven and the earth. 2 And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters. 3 And God said, Let there be light: and there was light. 4 And God saw* the light, that it was good: and God divided* the light from the darkness. 5 And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day. 6 And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters. 7 And God made the firmament, and divided the waters which were under the firmament from the waters which were above the firmament: and it was so. 8 And God called the firmament Heaven. And the evening and the morning were the second day. 9 And God said, Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so. 10 And God called the dry land Earth; and the gathering together of the waters called he Seas: and God saw that it was good. 11 And God said, Let the earth bring forth grass, the herb yielding seed, and the fruit tree yielding fruit after his kind, whose seed is in itself, upon the earth: and it was so. 12 And the earth brought forth grass, and herb yielding seed after his kind, and the tree yielding fruit, whose seed was in itself, after his kind: and God saw that it was good. 13 And the evening and the morning were the third day. 14 And God said, Let there be lights in the firmament of the heaven to divide the day from the night; and let them be for signs, and for seasons, and for days, and years: 15 And let them be for lights in the firmament of the heaven to give light upon the earth: and it was so. 16 And God made two great lights; the greater light to rule the day, and the lesser light to rule the night: he made the stars also. 17 And God set them in the firmament of the heaven to give light upon the earth, 18 And to rule over the day and over the night, and to divide the light from the darkness: and God saw that it was good. 19 And the evening and the morning were the fourth day. 20 And God said, Let the waters bring forth abundantly the moving creature that hath life, and fowl that may fly above the earth in the open firmament of heaven. 21 And God created great whales, and every living creature that moveth, which the waters brought forth abundantly, after their kind, and every winged fowl after his kind: and God saw that it was good. 22 And God blessed them, saying, Be fruitful, and multiply, and fill the waters in the seas, and let fowl multiply in the earth. 23 And the evening and the morning were the fifth day. 24 And God said, Let the earth bring forth the living creature after his kind,
</div>
I am developing a webpage for authors section for a book publishing website and working on the show more/ show less button. There are two media div's, one for the author image(on the left side) and his summary(on the right side). I want to enable/disable the show more/ show less button based on the height of the summary content. I want to enable the show more/less button only when the height of the summary content is more than that of the fixed height image (180px).
Referred from : http://jsfiddle.net/thebabydino/U7Cyk/
NOTE : media, media-left and media-body are bootstrap classes.
HTML Code :
<div id = "author-page">
<div>
<h3>
Chetan Bhagat
</h3>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="http://img01.ibnlive.in/ibnlive/uploads/2014/10/chetan_bhagat_151110.jpg"/>
</div>
<div class = "media-body">
<div class="info-wrapper">
(more)
(less)
<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>
</div>
</div>
</div>
</div>
CSS :
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: scroll;
position: relative;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
bottom: 1.5em;
height: 1.25em;
margin: -.1em 0 .35em -4.5em;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.info-wrapper a:focus { outline: none; }
.info-wrapper .less { display: none; }
.info-wrapper .more:focus ~ .info,
.info-wrapper .more:active ~ .info {
max-height: none;
}
.info-wrapper .more:focus {
display: none;
}
.info-wrapper .more:focus + .less {
display: block;
}
If i understood your question properly,you can use jquery height functionality
$('window').height(); //gives height of browser viewport
Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property
http://api.jquery.com/height
Put overflow hidden and programmatically identify
if the scrollHeight is higher than the the height of the div then make the "more" visible
var outerHeight = $(".info").outerHeight();
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible"});
$(".info").css({"max-height": "inherit"});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden"});
$(".info").css({"max-height": outerHeight + "px"});
$("a.more").show();
$("a.less").hide();
return false;
});
here outerHeight will reach your max-height when the content overflows
Therfore you can put #media queries for various screen size and use max-height accordingly
Check this http://jsfiddle.net/ZigmaEmpire/9dgs6432/11
I asked others also for this task and I got a solution. :-)
Thank you Nanang for answering the question. And here is exactly what I wanted,
http://jsfiddle.net/rraagghhu/9dgs6432/15/
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", 'maxHeight': '100%'});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden", 'maxHeight': '180px'});
$("a.more").show();
$("a.less").hide();
return false;
});
$(window).resize(function() {
var hg = $('.info').height();
if (hg && hg >= 180) {
$('.info').css({ 'maxHeight': 180 });
$('a.more').show();
} else {
$('.info').css({ 'maxHeight': '100%' });
$('a.more').hide();
}
});
Now, expand and shrink the Result column in JSFiddle and see what happens. Happy playing. :-)
Remove max-height when show more is clicked
$(".more").click(function(){
$(".info").css("max-height","none");
$(this).hide();
$(".less").show();
});
$(".less").click(function(){
$(".info").css("max-height","120px");
$(this).hide();
$(".more").show();
});
http://jsfiddle.net/dggupta25/U7Cyk/150/
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.