Flexible Font Size for fixed width and height - javascript

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

Related

Readmore.js doesn't works

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.

Jumptron background image disappears when I scroll down

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.

Select all tags within divs with certain class [duplicate]

This question already has answers here:
document.getElementsByClassName doesn't work
(2 answers)
Closed 7 years ago.
I've been trying to find a solution to my problem for days now without any luck, I found this: getElementsByClassName doesn't work but it's not a solution to my problem since I want to access all tags and change them, so here we go:
I want to be able to change the style of tags that are within divs with a certain class. I started out by trying this with an ID on a div and that works exactly the way I want it, but since the page where I will use this will have the same div's appear several times I have to use class instead and I can't get it to work. I have to use javascript and not jQuery.
Example of how it worked with ID:
var images = document.getElementById("test").getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].align = "right";
}
<div id="test">
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet. Vivamus convallis, dolor a euismod scelerisque, nisi lorem placerat nisi, sed euismod ligula eros in lorem. Pellentesque vel ante semper,
convallis ante in, mollis odio.
</p>
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet. Vivamus convallis, dolor a euismod scelerisque, nisi lorem placerat nisi, sed euismod ligula eros in lorem. Pellentesque vel ante semper,
convallis ante in, mollis odio.
</p>
</div>
Example of how I want it to work:
var images = document.getElementsByClassName("test").getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].align = "right";
}
<div class="test">
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
</div>
<div class="test">
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
</div>
I understand that there should be a completely different way of writing the statement when I want to access the classes, but I can't figure out how.
Anyone who knows and can give me some pointers?
The code document.getElementsByClassName("test") gives you a list of elements, not one element. Do a loop (for) on these elements. In this loop, call getElementsByTagName("img").

How to wrap inner content of a paragraph after specific child element?

I have several bios that all look like this:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</p>
Not the prettiest text blocks, but they're auto-generated by the system. I need to iterate through each <p> and take everything after the first set of break tags and wrap that in something like a <div>.
The end result would be:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.</p>
<div class="theRest">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</div>
</p>
Try this (inspired of #dave answer):
$("p").each(function(){
// Add a div after the second <br /> (in the current <p>)
$("br:eq(1)", this).after('<div class="theRest"> </ div>');
// Split each "child" in an array
$(this).contents().filter(function(index, elem){
// Keep only children after the <div />
return index > 3;
// Remove and put them into the <div />
}).detach().appendTo($(".theRest", this));
});
Fiddle
Try this:
$('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});
But it's not a good enough solution.
For prevent your other p element be wrapped, You should find from any parent element like below:
$('.father').find('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});
Try this:
$($("p").contents().get(2)).after('<div class="theRest"></div>');
$("p").contents().filter(function(index, element) {
return index > 3;
}).detach().appendTo(".theRest");
Fiddle
Even though the format returned from server is bad from my standards as it complicates things for the given purpose. However, with some tricks there is still a way to do it.
Explanation: select all nodes, discard the first node because that happens to be the text node, then use jquery wrapAll method to take everything after that node and wrap it up in new div.
Demo: http://jsfiddle.net/qe3bm92e/3/
var txt = $('.txt').contents();
txt.splice(0,1);
txt.wrapAll($("<div>").addClass('red'));
You can replace '.txt' with 'p' but it's not a good practice for very obvious reason.

Is there a better way to write this jQuery script?

So the script works, but it seems pretty long. I think there may be some shortcuts I could take, maybe use an array? But I'm new at JS, and really new at jQuery.
What it does:
I have a list of ten questions, and I want to take a graphic (plus sign) and toggle it when clicked to a minus sign. It will also reveal the answer by using a slide toggle.
Here's the code:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".divOne").hide();
$(".divTwo").hide();
$(".divThree").hide();
$(".divFour").hide();
$(".divFive").hide();
$(".divSix").hide();
$(".divSeven").hide();
$(".divEight").hide();
$(".divNine").hide();
$(".divTen").hide();
$(".bbone").click(function(){
$(".divOne").slideToggle("slow");
$("#button1").toggleClass("down");
});
$(".bbtwo").click(function(){
$(".divTwo").slideToggle("slow");
$("#button2").toggleClass("down");
});
$(".bbthree").click(function(){
$(".divThree").slideToggle("slow");
$("#button3").toggleClass("down");
});
$(".bbfour").click(function(){
$(".divFour").slideToggle("slow");
$("#button4").toggleClass("down");
});
$(".bbfive").click(function(){
$(".divFive").slideToggle("slow");
$("#button5").toggleClass("down");
});
$(".bbsix").click(function(){
$(".divSix").slideToggle("slow");
$("#button6").toggleClass("down");
});
$(".bbseven").click(function(){
$(".divSeven").slideToggle("slow");
$("#button7").toggleClass("down");
});
$(".bbeight").click(function(){
$(".divEight").slideToggle("slow");
$("#button8").toggleClass("down");
});
$(".bbnine").click(function(){
$(".divNine").slideToggle("slow");
$("#button9").toggleClass("down");
});
$(".bbten").click(function(){
$(".divTen").slideToggle("slow");
$("#button10").toggleClass("down");
});
});
</script>
Here's the CSS:
<style type="text/css">
body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.divOne, .divTwo, .divThree, .divFour, .divFive, .divSix, .divSeven, .divEight, .divNine, .divTen
{
border:1px solid #CC0000;
background-color:#efefef;
width:580px;
margin-top:5px;
font-size:10px;
padding:5px;
clear:left;
}
.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten
{
padding-left:10px;
text-decoration:none;
color:#CC0000;
font-variant:small-caps;
font-size:14px;
}
.bbone, .bbtwo, .bbthree, .bbfour, .bbfive, .bbsix,.bbseven,.bbeight,.bbnine,.bbten
{
vertical-align:middle;
}
.question
{
height:auto;
background-color:#fff;
margin-bottom:10px;
width:800px;
}
p {
margin:0;
padding:0;
float:left;
width:16px;
height:16px;
background-image:url(images/add.png);
background-repeat:no-repeat;
}
p.down {
float:left;
width:16px;
height:16px;
background-image:url(images/delete.png);
background-repeat:no-repeat;
}
.wwwLink
{
padding-left:20px;
background: transparent url(images/world_go.png) no-repeat center left;
}
</style>
Here's the HTML:
<body>
<div class="question">
<p id="button1" class="bbone"> </p>Myth No. 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. . <br/>
<div class="divOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.
Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>
</div>
<div class="question">
<p id="button2" class="bbtwo"> </p>Myth No. 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. <br/>
<div class="divTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>
</div>
<div class="question">
<p id="button3" class="bbthree"> </p>Myth No. 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. <br/>
<div class="divThree">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>
</div>
<div class="question">
<p id="button4" class="bbfour"> </p>Myth No. 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. <br/>
<div class="divFour">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>
</div>
<div class="question">
<p id="button5" class="bbfive"> </p>Myth No. 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. <br/>
<div class="divFive">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>
</div>
<div class="question">
<p id="button6" class="bbsix"> </p>Myth No. 6: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. <br/>
<div class="divSix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>
</div>
<div class="question">
<p id="button7" class="bbseven"> </p>Myth No. 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. <br/>
<div class="divSeven">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.
</div>
</div>
<div class="question">
<p id="button8" class="bbeight"> </p>Myth No. 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. <br/>
<div class="divEight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam.
</div>
</div>
<div class="question">
<p id="button9" class="bbnine"> </p>Myth No. 9: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. <br/>
<div class="divNine">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>
</div>
<div class="question">
<p id="button10" class="bbten"> </p>Myth No. 10: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. <br/>
<div class="divTen">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>
</div>
<body>
Use this instead of any of the jQuery you posted:
$(document).ready(function() {
$('div.question')
.children('div').hide().end()
.children('p').click(function(){
$(this).toggleClass('down').next().slideToggle("slow");
});
});
Also, you really should consolidate your classes. I would use this updated HTML pattern for all your questions:
<div class="question">
<p class="button"> Myth No. 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. </p>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>
</div>
Your CSS would follow this form:
.question { }
.button { } /* Instead of bbOne, bbTwo, etc*/
.question div { } /* Instead of divOne, divTwo, etc */
.question div a { } /* Instead of wwwLink */
And then I would use this slightly updated jQuery:
$(document).ready(function() {
$('div.question')
.children('div').hide().end()
.find('p > a').click(function(e){
$(this)
.parent().toggleClass('down')
.next().slideToggle("slow");
e.preventDefault();
});
});
something like
$(document).ready(function(){
$('.question div').hide();
$('.question p').click(function(){
$(this).next('div').slideToggle("slow");
$(this).addClass('down');
});
});
you could also modify your markup some and use the jquery ui accordion:
http://docs.jquery.com/UI/Accordion
Give your DIVs a common class and use id's for identification, i.e. instead of all the ids on everything, just have one id on the top-level div, and then generic class names on child Ids. Also avoid using and <br/> tags, but do it with CSS padding/margins instead. Something along these lines:
<div class="question" id="question1">
<div class="questionText">
<p class="questionButton"></span>
Myth No. 1: ...
</div>
<div class="questionAnswer">
...
</div>
</div>
This will also simplify your CSS. Just use the common class names instead of enumerating all the questions.
In general you just need to use jQuery on the class names and it will attach itself to all your elements. Also in a jQuery click handler you rarely need to use the ids of elements, you can use $(this) to get the current element and then use traversing functions to get associated elements. Like this:
$(document).ready(function() {
$(".questionAnswer").hide();
$(".questionButton").click(function(){
$(this).parent().find(".questionAnswer").slideToggle("slow");
$(this).toggleClass("down");
});
});
Fred

Categories

Resources