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>
Related
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/
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>
Try the bootstrap dashboard example http://getbootstrap.com/examples/dashboard/
My interest is primarily in using their fixed sidebar template. But interestingly, the sidebar and its contents disappear when you switch to a smaller viewport (in case of desktop, smaller window screen).
Is it really hidden? or is there a way to view the sidebar even in mobile view?
(try the toggle device button in Chrome's debug mode for mobile view)
Yes the default style is hidden. Line 33 in dashboard.css.
It is by design, they hide the sidebar for mobile devices or when the screen size is very small, in order to give importance to the content. If you wanna do something that doesn't get affected like this, you can start from this:
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
a {text-decoration: none;}
html, body {height: 100%;}
body {padding-top: 50px; padding-left: 75px;}
p {margin: 0 0 10px;}
header {background-color: #000; position: fixed; top: 0; width: 100%; z-index: 2; left: 0;}
header h1 {line-height: 1; text-align: center; padding: 5px 0; font-weight: 1.5em;}
header h1 a {font-weight: normal; color: #fff;}
aside {position: fixed; left: 0; height: 100%; top: 30px; background-color: #99f; padding-top: 25px; z-index: 1; width: 70px;}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<header>
<h1>Heading</h1>
</header>
<aside>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</nav>
</aside>
<p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p>
<p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p>
<p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p>
<p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p>
Yes Anuj, It is hidden.
If you open dashboard.css and go to line no. 33 you will find below code:
.sidebar {
display: none;
}
if you change that code from display:none to display:block You will see side bar above your container division.
But you really want that fix side bar in small devices like tablet or mobile (which I dont recommend you to do), You will have to play with CSS and find a fix yourself. Here's something I did
.sidebar{
display:inline-block;
float:left:
}
I am uploading snapshot of both scenario.
Thanks,
Jimish
this is the css responsive attribute #mediaquery by which you can apply the rules the elements on the specific screen size . i.e if you check
#media (min-width: 768px)
.sidebar {
/* other rules */
display: block; //display on width more than 768px
/* other rules */
}
and for width smaller than 768px
.sidebar {
display: none; // it will hide the sidebar
}
You control by CSS only, using this code:
.navbar-fixed-top .sidebar { display: inherit !important;}
Otherwise you create a parent id set a css same fomat
#id-name .sidebar { display: inherit !important;}
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/
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();
});