I'm trying to make an infinite scroll in my list. So far the scroll event is not triggered.
$(function() {
var t = $('.notif-dropdown-menu').html(),
c = 1,
scroll_enabled = true;
function load_ajax() {
console.log('Triggered');
$('.notif-dropdown-menu').append('<h4>' + (++c) + ' </h4>' + t);
scroll_enabled = true;
}
$(window).bind('scroll', function() {
if (scroll_enabled) {
if($(window).scrollTop() >= ($('.notif-dropdown-menu').offset().top + $('.notif-dropdown-menu').outerHeight()-window.innerHeight)*0.9) {
scroll_enabled = false;
load_ajax();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul style="max-height: 250px; height: 100px; overflow: auto" class="notif-dropdown-menu">
<li>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
</li>
</ul>
A working example but not with a list (taken from here Detecting when user scrolls to bottom of div with jQuery):
$(function() {
var t = $('.posts').html(),
c = 1,
scroll_enabled = true;
function load_ajax() {
$('.posts').append('<h4>' + (++c) + ' </h4>' + t);
scroll_enabled = true;
}
$(window).bind('scroll', function() {
if (scroll_enabled) {
if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {
scroll_enabled = false;
load_ajax();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="posts">
Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit
sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut
libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet
lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque
</div>
This is just a matter of knowing what is used in the comparison.
By the way .bind() is deprecated. use .on().
You can "bind" the "infinite scrollable element" directly to a scroll event.
What you have to check is the height of the element + the scrolled pixels of that element.
If that is greater or equal to its scrollHeight property... Then call your function to append more.
Aditionnaly, a good practice is to store a lookedup element in a variable to avoid looking up for it uselessly.
In an event handler, $(this) refers to the element on which the event fired.
$(function() {
var infinite_scrollable_element = $('.notif-dropdown-menu')
var t = infinite_scrollable_element.html(),
c = 1,
scroll_enabled = true;
function load_ajax() {
console.log('Triggered');
infinite_scrollable_element.append('<h4>' + (++c) + ' </h4>' + t);
scroll_enabled = true;
}
infinite_scrollable_element.on('scroll', function() {
let element = $(this)
if (scroll_enabled) {
if (element.height() + element.scrollTop() >= (element[0].scrollHeight)) {
scroll_enabled = false;
load_ajax();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul style="max-height: 250px; height: 100px; overflow: auto" class="notif-dropdown-menu">
<li>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
<p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
</li>
</ul>
Related
I have 2 divs div1 and div2. My goal is to make them change on each button click
<div>
<button onclick="changeText();" id="changeText" data-text="Enjoy!">Hello!</button>
<div id="div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo,
scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div id="div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem
gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
My js-code that right now works but i can see that it is completely wrong written.
var button = document.getElementById("changeText");
button.addEventListener(
"click",
function () {
if (document.getElementById("div1").style.display == "block") {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "block";
} else {
document.getElementById("div2").style.display = "none";
document.getElementById("div1").style.display = "block"
}
},
false
);
What can I do to make this code look and work better?
It will at least look a little better if you create variables of the two divs;
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
If I understand your question correctly, you can achieve this by toggling between style.display: none and style.display: block on your elements with each click of the button. For example, something like:
function toggleDisplay(el) {
el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
const divEl1 = document.querySelector('#div1');
const divEl2 = document.querySelector('#div2');
document.querySelector('div').addEventListener('click', event => {
if (event.target.tagName === 'BUTTON') {
toggleDisplay(divEl1);
toggleDisplay(divEl2);
}
});
<div>
<button id="changeText" data-text="Enjoy!">Hello!</button>
<div id="div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div id="div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
My suggestion:
var divs = document.querySelectorAll('.text');
changeText.onclick = () => divs.forEach(div => div.classList.toggle('hidden'));
.hidden {
display: none;
}
<div>
<button id="changeText" data-text="Enjoy!">Hello!</button>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div class="text hidden">
Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
Alternatively:
div_2.style.display = "none";
changeText.onclick = () => {
div_2.style.display == "none" ? (div_1.style.display = "none", div_2.style.display = "block") : (div_1.style.display = "block", div_2.style.display = "none")
};
<div>
<button id="changeText" data-text="Enjoy!">Hello!</button>
<div id="div_1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div id="div_2">
Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
Create a CSS class that hides content, and toggle that class:
let divs = document.querySelectorAll(".text");
document.getElementById("changeText").addEventListener("click", () => {
for (let div of divs) div.classList.toggle("hidden");
});
.hidden { display: none }
<div>
<button id="changeText">Hello!</button>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo,
scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div class="text hidden">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem
gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
Some comments on your code:
It defines two click handlers: one with addEventListener, but another one with the HTML attribute onclick. The latter references a function you did not provide.
data-text="Enjoy!" is not used
id="div1": don't create a sort of enumerated id attributes. This is almost always a wrong choice. Instead give such a group of elements a common CSS class, and then use a DOM method to get all of them in a node list.
I recommend saving the elements in variables and using classes to hide the element using the classList.toggle () method.
CSS
.hidden{display:none;}
HTML
<div>
<button onclick="changeText();" id="changeText" data-text="Enjoy!">Hello!</button>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
</div>
<div id="div2" class="hidden">
Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
</div>
</div>
JS
var button = document.getElementById("changeText");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
button.addEventListener("click",function () {
div1.classList.toggle('hidden');
div2.classList.toggle('hidden');
});
I try to use Readmore.js, a jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links, for the first time and can't really understand the reason why nothing changes.
I try to get article contents collapsed and Read more button to appear.
I checked twice if the source files are there for both jQuery and readmore.
$('article').readmore();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<article>
<p class="giftheading"><b>Name Surname</b> celebrates <b>Event</b> in <b>5</b> days!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis
nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
</article>
Your code works with an older version of jQuery (1.11.1):
$('article').readmore();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<article>
<p class="giftheading"><b>Name Surname</b> celebrates <b>Event</b> in <b>5</b> days!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis
nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
</article>
It also works with 2.1.1 version:
$('article').readmore();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<article>
<p class="giftheading"><b>Name Surname</b> celebrates <b>Event</b> in <b>5</b> days!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis
nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
</article>
Readmore doesn't initiate on a block unless its height is larger than the collapsedHeight plus heightMargin. Using no options this works out to be 216px.
I am using bootstrap jumptron and a background image. As I scroll down the background image disappears leaving the jumptron div class only showing the heading. How can it be fix so when I scroll down the image doesn't desappear. The other content works proper, The following files provide more detail. The following files are in a Rails 5 app.
index.html.erb
<div class="bg"></div>
<div class="jumbotron">
<h1>Organize and Mobilize</h1>
</div>
<div class="container">
<div class="row">
<h2>We need you to take action</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<hr>
<div class="row">
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<hr>
<div class="row">
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12 text-center"><p>The End.</p></div>
</div>
</div>
bootstrap_and_overrides.css
/*
=require twitter-bootstrap-static/bootstrap
Static version of css will use Glyphicons sprites by default
=require twitter-bootstrap-static/sprites
*/
body { padding-top: 50px; }
.bg {
background: url('protest.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 450px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
.jumbotron {
margin-bottom: 50px;
height: 350px;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
background:transparent;
}
and cable.js
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the rails generate channel command.
//
//= require action_cable
//= require_self
//= require_tree ./channels
(function() {
this.App || (this.App = {});
App.cable = ActionCable.createConsumer();
}).call(this);
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
This is the image before I scroll the page:
You shouldn't put an image as the background of the jumbotron, that's not what it's for.
Instead, make the jumbotron background color transparent, then add the background image to the div outside of the container.
ie. in HAML
#YourDivToApplyBackground
.container
.row
.col-md-12
.jumbotron
%h1 Your Page Title
This is how your code should look for bootstrap.
I'm needing to run a script that I made, it's pretty basic but it is working, but not the way I want, I made this code because I could not find any that could modify
HTML:
<div class="corpo">
<div class="menu-segmento">
<div class="item total">
<div class="item-topo">
<div class="tooltips" >
<img class="ocultar" src="img/ocultar.png" />
<span>Veja menos</span>
</div>
<div class="tooltips" >
<img class="mostrar" src="img/mostrar.png" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item total">
<div class="item-topo">
<div class="tooltips" >
<img class="ocultar" src="img/ocultar.png" />
<span>Veja menos</span>
</div>
<div class="tooltips" >
<img class="mostrar" src="img/mostrar.png" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
and here is the JS for jQuery
$(function () { // DOM ready shorthand
var flip = 0;
$('.mostrar').click( function(){
$('.segmento').slideToggle();
$('.mostrar').fadeOut();
$('.ocultar').fadeIn();
});
$('.ocultar').click( function(){
$('.segmento').slideToggle();
$('.ocultar').fadeOut();
$('.mostrar').fadeIn();
});
});
He is opening the 2 and know it is missing a line of code but I have no idea how to fix.
Any suggestions?
LIVE DEMO
If you have i.e this CSS:
.segmento, .ocultar{
display:none;
}
Remove the classes from the images and add to .tooltips:
<div class="corpo">
<div class="menu-segmento">
<div class="item total">
<div class="item-topo">
<div class="tooltips ocultar">
<img src="http://placehold.it/50x50/f00&text=ocultar" />
<span>Veja menos</span>
</div>
<div class="tooltips mostrar" >
<img src="http://placehold.it/50x50/cf5&text=mostrar" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item total">
<div class="item-topo">
<div class="tooltips ocultar" >
<img src="http://placehold.it/50x50/f00&text=ocultar" />
<span>Veja menos</span>
</div>
<div class="tooltips mostrar" >
<img src="http://placehold.it/50x50/cf5&text=mostrar" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
And this is all you need:
$(function () { // DOM ready shorthand
$('.mostrar, .ocultar').click( function(){
var $parent = $(this).closest('.item');
$(this).toggle().siblings().toggle();
$parent.find('.segmento').slideToggle();
});
});
I need to make each of my <p> have flexible font size with fixed width and height.
Current code
CSS
p{
width:500px;
height:100px;
background-color:#F0F0F0;
margin:10px;
padding:5px;
font-size:24px;
}
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<br><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<!-- This one is perfect -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>
Check and try the code in jsfiddle
http://jsfiddle.net/8GNAV/
And this the output I want to reach
http://jsfiddle.net/8GNAV/1/
The general idea is to get overflow:hidden, then keep shrinking the text until the scrollHeight is less than the offsetHeight. Like so:
[].forEach.call(document.getElementsByTagName('p'),function(p) {
p.style.overflow = "hidden";
var f = 24;
while(f > 6 && p.scrollHeight > p.offsetHeight) {
f--;
p.style.fontSize = f+"px";
}
});
Demo