I have a problem with the scrollTop jquery animation.
It micro-jumps right before the animation. The heavier the content is, worst it is.
I don't understand why does it do that...
Below, a sample of my code. (just copy/paste on file, it's a standalone code, I hadn't good result on jsfiddle)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<style>
html,body{height:100%;width:100%}body{width:100%;height:100%}section{display:block;width:896px;margin:0 auto;padding:0 48px}article{content:' ';position:relative;display:block;top:0;width:100%;height:500px;padding:20% 0}#ghostPage{height:30px;padding:0}section div{text-align:center;width:100%;height:100%}#page1 div{background-color:red}#page2 div{background-color:blue}#page3 div{background-color:#A52A2A}#page4 div{background-color:green}#page5 div{background-color:#FF0}#page6 div{background-color:#000}#page7 div{background-color:orange}#page8 div{background-color:purple}#page_loader{text-align:center;position:fixed;top:0;left:0;background-color:white;width:100%;height:100%;z-index:9999}
</style>
<section class="clearfix">
<div id="page_loader" class="loader1"></div>
<article id="page1">
<div>Page1</div>
</article>
<article id="page2">
<div>Page2</div>
</article>
<article id="page3">
<div>Page3</div>
</article>
<article id="page4">
<div>Page4</div>
</article>
<article id="page5">
<div>Page5</div>
</article>
<article id="page6">
<div style="color: white">Page6</div>
</article>
<article id="page7">
<div>Page7</div>
</article>
<article id="page8">
<div>Page8</div>
</article>
<article id="ghostPage"></article>
</section>
</body>
<script type="text/javascript">
/*
**
** Sliding
**
*/
function goToByScroll(id) {
var speed = 1200;
var offset = $('#page'+id).offset();
if (offset) {
$('body').stop().animate({scrollTop: offset.top},{duration: speed, queue: false});
window.location = '#page'+id;
}
}
/*
**
** Get current page id
**
*/
function getPageId() {
var url = document.location.toString();
if (url.match('#')) {
var anchor = url.split('#')[1];
var anchorId = parseInt(anchor.split('page')[1]);
if (!isNaN(anchorId))
return anchorId;
}
return 1;
}
/*
**
** MouseWheel handling
**
*/
function handle(delta) {
if (delta > 0)
goToByScroll(getPageId() - 1);
else if (delta < 0)
goToByScroll(getPageId() + 1);
}
function wheel(event){
event.preventDefault();
event.stopPropagation();
var delta = 0;
if (event.wheelDelta)
delta = event.wheelDelta/120;
else if (event.detail)
delta = -event.detail/3;
if (delta)
handle(delta);
}
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
/*fades le loader mask out*/
$(document).ready(function() {
$('#page_loader').css('background-image', 'none');
$('#page_loader').css('background-color', 'rgba(255, 255, 255, 0)').animate('slow', function(){$('#page_loader').css('z-index', '-9999');});
});
</script>
</html>
The content is not that heavy so it's hard to see the bug. Firefox make it easier to see and quick scrolling too.
I'm waiting your good advises. :)
ok, the problem is this line: window.location = '#page' + id;
by changing the hash-tag the page jumps to the specified element, then the jQuery kicks in and animates to the same ID. I tried around a little and my final version is this: http://jsfiddle.net/h6CS4/6/
though it's not great...
try this plugin instead of re-inventing the wheel: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Related
I am trying to develop a site where if user press n or N key on the keyboard, the page will auto scroll to the next section. Same applies to the previous section. But I am facing a problem, to scroll next section, sometimes I have to press n twice. On the contrary, it's skipping two sections instead of one while I am pressing p key to go back the previous section. How can I solve this?
I am including my code here:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function ScrollTo(address) {
$('html, body').animate({
scrollTop : ($('#' + address).offset().top)
}, 700);
}
</script>
</head>
<body>
<section id="section1">
<h1>section1</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<section id="section2">
<h1>section2</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<section id="section3">
<h1>section3</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<section id="section4">
<h1>section4</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<section id="section5">
<h1>section5</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<section id="section6">
<h1>section6</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<section id="section7">
<h1>section7</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<section id="section8">
<h1>section8</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<section id="section9">
<h1>section9</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<section id="section10">
<h1>section10</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>
<script type="text/javascript">
var sections = [];
$(document).find("section").each(function() {
sections.push(this.id);
});
var sectionIndex = 0;
$(document).keyup(
function(evt) {
var elid = $(document.activeElement).is("input, textarea");
if (elid) {
return;
}
if ((evt.keyCode == 80 | evt.keyCode == 112)
& sectionIndex > 0) {
sectionIndex=sectionIndex-1;
ScrollTo(sections[sectionIndex]);
} else if ((evt.keyCode == 78 | evt.keyCode == 110)
& sectionIndex < sections.length - 1) {
sectionIndex=sectionIndex+1;
ScrollTo(sections[sectionIndex]);
}
});
$(document).scroll(
function() {
$('section').each(
function() {
if ($(this).position().top <= $(document).scrollTop() && ($(this).position().top + $(this).outerHeight()) > $(document).scrollTop()) {
sectionIndex = sections.indexOf(($(this).attr('id')));
}
});
});
</script>
</body>
</html>
Hint: Change your code a little bit...
$('section').each(
function () {
this.style.background = '';
if ($(this).position().top <= $(document).scrollTop() && ($(this).position().top + $(this).outerHeight()) > $(document).scrollTop()) {
this.style.background = 'lightseagreen';
sectionIndex = sections.indexOf(($(this).attr('id')));
}
});
now during scrolling you'll see which section is "current". This demonstrates the problem: after pressing "N" the previous section is still "current".
You can easily fix it:
currently the highlighted section is the one that intersects the upper bound of the screen,
instead, you can imagine a line a bit below top of the screen, like 50px lower, and consider that as the "focus point" that determines which section is current.
The code could look like this:
$('section').each(
function () {
const focus = $(document).scrollTop() + 50;
this.style.background = '';
if ($(this).position().top <= focus && ($(this).position().top + $(this).outerHeight()) > focus) {
this.style.background = 'lightseagreen';
sectionIndex = sections.indexOf(($(this).attr('id')));
}
});
Only change here is comparing against $(document).scrollTop() + 50 instead of $(document).scrollTop(). Notice that now the section becomes highlighted quicker, before it touches the top edge of the screen.
I have a one page site with few sections.. Bootstrap template. One of the sections cause a bug after few refreshes of the site. There are no errors in the console.. nothing and I just don't know how to trace and find the problem.
This is the html part of this section
<section id="portfolio" class="section portfolio padding-large text-center" data-section-name="portfolio">
<div class="container margin-bottom-medium">
<div class="row margin-bottom-medium wow fadeInUp">
<h2> Portfolio </h2>
<div class="line main-bg"></div>
</div>
</div>
<div class="portfolio-wrapper margin-bottom-medium">
<div class="portfolio-item">
<div class="portfolio" style="margin-left:5px;"><a href="#" data-lightbox-gallery="portfolio"><img src="img/portfolio/release02-360x360.jpg" alt="">
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
<strong class="white-color bold-text" style="font-size: 20px;">Portfolio</strong>
</h2>
<div class="button">Check item</div>
</div>
</a>
</div>
</div>
</div>
<div class="button light margin-top-medium margin-bottom-medium hvr-grow"><i class="icon-reload"></i> Check All</div>
</section>
This is what I have in main.js from the portfolio section
var container = $('.portfolio-wrapper'); // portfoolio container
container.isotope({
itemSelector: '.portfolio-item',
animationEngine: 'best-available',
animationOptions: {
duration: 200,
queue: false
},
layoutMode: 'fitRows'
});
// Split columns for different size layout
function splitColumns() {
var windowWidth = $(window).width(),
columnNumber = 1; // default column number
if (windowWidth > 1200) {
columnNumber = 4;
} else if (windowWidth > 767) {
columnNumber = 3;
} else if (windowWidth > 600) {
columnNumber = 2;
}
return columnNumber;
}
// Set width for portfolio item
function setColumns() {
var windowWidth = $(window).width(),
columnNumber = splitColumns(),
postWidth = Math.floor(windowWidth / columnNumber);
container.find('.portfolio-item').each(function() {
$(this).css({
width: postWidth + 'px'
});
});
}
// initialize isotope
function initIsotope() {
setColumns();
container.isotope('layout');
}
container.imagesLoaded(function() {
setColumns();
});
$(window).bind('resize', function() {
initIsotope();
});
initIsotope();
Here are two images in normal state and when it's crashed. Normal behavior
Here is when it crashed
I really don't have an idea of what can be the issue since there are no errors at all. I think that may be a js problem but again I'm not sure.
Edit: Here are the JS which are included in footer in this order:
<script src="js/vendor/jquery-1.11.1.js"></script>
<script src="js/vendor/jquery-migrate-1.2.1.min.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/twitterFetcher_min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/appear.js"></script>
<script src="js/jquery.circliful.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/main.js"></script>
<script src="js/scrollify.js"></script>
Edit2: Wrapping like this?
// initialize isotope
function initIsotope() {
setColumns();
container.isotope('layout');
}
container.imagesLoaded(function() {
setColumns();
});
$(window).bind('resize', function() {
initIsotope();
});
//initIsotope();
setTimeout(function(){ initIsotope(); }, 0);
From having a look at similar masonry issues. I would suspect one of these two would solve your issue -
$(window).load(function(){
initIsotope()
});
// or
setTimeout(function(){ initIsotope(); }, 0);
Both these are masking the core issue - you should really be reading the section around unloaded media here - http://isotope.metafizzy.co/v1/docs/help.html
I would suggest your content is not fully loaded sometimes and isotope gets confused. Specifying the dimensions lets isotope render correctly despite the images not loading quickly enough. You need to follow this pattern so that slow connections work. Setting timeouts has its uses, but you should fix the underlying issue.
I am making a side scrolling blog post page for a client. After much trial and error I have ended up using JQuery to make the site scroll to the right if it's large or scroll up and down if it's mobile. Only problem is when the document loads initially in a non-mobile browser it is 40,000px wide. Here is the code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script>
(function($){
var windowH = $(window).height();
var windowW = $(window).width();
$(window).on('load', function(){
if(windowW >= windowH) {//this is horizontal
var allImgWidth = 0;
$('article img').each(function(){
allImgWidth += $(this).width() + 10 ;//10 is padding
});
$('html, body').width(allImgWidth); //makes page width of all images and padding that I have set elsewhere
$('article img').height(windowH - 150);//this accounts for header height and margin height from top
// $('article img').css('margin-left', '10px');
} else {
$('article img').width(windowW);//if window width is not greater than window height, the images are the width of the original window
}
if(windowW >= windowH) {
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll)
document.body.scrollLeft -= (delta*80); // Multiplied by 80
e.preventDefault();
}
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();//function scrollHorizontally ends
} else {
}//else ends
});//onload ends
$(window).resize(function(){
var windowH = $(window).height();
var windowW = $(window).width();
if(windowW >= windowH) { //horizontal
var allImgWidth = 0;
$('article img').each(function(){
allImgWidth += $(this).width() + 11 ;
});
$('html, body').width(allImgWidth);
$('article img').height(windowH - 150);
$('article img').css('width','auto');//dynamically resizes pics
$('article img').css('margin-left', '9px');
} else { //vertical
$('html, body').width(windowW);
$('article img').width(windowW);
$('article img').css('height','auto');
$('article img').css('margin-top', '10px');
}
if(windowH >= windowW) {
$(window).on('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
} else {
// scroll down
}
});
} else {
$(window).off('mousewheel DOMMouseScroll');
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll)
document.body.scrollLeft -= (delta*80); // Multiplied by 80
e.preventDefault();
}
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();//function scrollHorizontally ends
}
});//window resize ends
})(jQuery);//full function ends
</script>
And then the body of the page itself...
<div id="page-wrap">
<article class="post">
<img src="assets/images/tumblr_nqvdnry3Du1ttpk3mo1_1280.jpg">
<p>This is a caption!</p>
</article>
<article class="post">
<img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo3_1280.jpg">
<p>This is a caption!</p>
</article>
<article class="post">
<img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo2_1280.jpg">
<p>This is a caption</p>
</article>
<article class="post">
<img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo1_1280.jpg">
<p>this is a caption</p>
</article>
<article class="post">
<img src="pictures/photo3.jpg">
</article>
<article class="post">
<img src="pictures/photo4.jpg">
</article>
<article class="post">
<img src="pictures/photo5.jpg">
</article>
<article class="post">
<img src="pictures/photo6.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo1.jpg">
</article>
</div>
When the page is resized, it works fine. And onload is fine for small screens. It is only in the large screen when the page initially loads that it is this big. Thoughts?
You're adding all of the image widths together with this code:
$('article img').each(function(){
allImgWidth += $(this).width() + 11 ;
});
and then setting your html/body width to that number.
So, if the width of the page is 40,000px then that is what allImgWidth equals. Check to make sure there are not other images on the page that are being included with the $('article img') selector.
I have facing this bug, I have a script in JavaScript which handle actions on mousedown event. one do expanding and one do retracting the element using the JavaScript. It's done by timeloop and increasing the height of the div till the height fits the content or decreasing till the div is hidden. When you click on extract, wait till it extract and then click retract all works fine. The problem occurs when you quickly click extract and then retract (before the extraction ends). Then the magic bug appears. The actions is stuck in extracting and re-tracking one step and never ends.
I thought the problem should be with the loop variables (loop end condition).
Does anyone see where the problem rly is and how it could be fixed?
HERE'S THE CODE:
If you just copy the code into: something.html and extract_retract.js you can see the problem I'm dealing with.
Html document:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{ padding:10px 20px; background:#D9ECFF; }
div.mydivs {
background: #97D6FB;
width: 500px;
height:0px;
overflow:hidden;
}
div.mydivs > p{ padding:4px 16px; background: #97D6FB;}
</style>
<script type="text/javascript" src="expand_retract.js"></script>
</head>
<body>
<h3>Programming Raw JavaScript expand() and retract() Animation Functions</h3>
<p>
Expand Box 1 |
Retract Box 1
</p>
<div id="div1" class="mydivs">
<p>Box 1 Content</p>
<p>Box 1 Content</p>
<p>Box 1 Content</p>
</div>
<p>
Expand Box 2 |
Retract Box 2
</p>
<div id="div2" class="mydivs">
<p>Box 2 Content</p>
<p>Box 2 Content</p>
<p>Box 2 Content</p>
<p>Box 2 Content</p>
<p>Box 2 Content</p>
</div>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez názvu</title>
</head>
<body>
</body>
</html>
expand_retract.js code below:
function expand(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
var sh = target.scrollHeight;
var loopTimer = setTimeout('expand(\''+element+'\')',8);
if(h < sh){
h += 5;
} else {
clearTimeout(loopTimer);
}
target.style.height = h+"px";
}
function retract(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
var loopTimer = setTimeout('retract(\''+element+'\')',8);
if(h > 0){
h -= 5;
} else {
target.style.height = "0px";
clearTimeout(loopTimer);
}
target.style.height = h+"px";
}
Great code. I propose this to solve this issue:
var loopTimer = 0;
function expand(element) {
clearInterval(loopTimer);
loopTimer = setInterval('expandA(\''+element+'\')',8);
}
function expandA(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
var sh = target.scrollHeight;
if(h < sh){
h += 5;
} else {
clearInterval(loopTimer);
}
target.style.height = h+"px";
}
function retract(element) {
clearInterval(loopTimer);
loopTimer = setInterval('retractA(\''+element+'\')',8);
}
function retractA(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
if(h > 0){
h -= 5;
} else {
target.style.height = "0px";
clearInterval(loopTimer);
}
target.style.height = h+"px";
}
I'm using Javascript to show documents. First, I hide the content that is loaded. Then, if a user press a button, the text related to that button will become visible while hiding other texts.
Currently, my technique does not change the URL that shows in the address bar.
I would like to update the address bar when a user clicks on one of the content display buttons. For example:
address.com/value_of_button
And if a user enters:
adress.com/a_value
I want to change display of div associated with the value. How is this done?
You can always use a hash url, and set the url like this:
function setHash(var hash) {
window.location.hash = hash;
}
If you want to retrieve the hash in the link to update the page, you can use something like
function getHash() {
return window.location.hash;
}
And to update the page you can just simply use if statements like this:
if(getHash() == "#main") {
document.getElementById('content').innerHtml = "<p>Main content</p>";
}
I had already demonstrated this at some point in the last year with jQuery. It's possible to not use jQuery, of course, but I'll provide you with the demo I created. I'll port an example to regular Javascript as well.
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu a').each(function(){
id = $(this).attr('href');
id = id.substring(id.lastIndexOf('/'));
id = id.substring(0,id.indexOf('.'));
$(this).attr('rel',id);
});
$('#home').show();
$('#menu a').click(function(e){
e.preventDefault();
$('.content').hide();
$('#'+$(this).attr('rel')).show();
location.hash = '#!/'+$(this).attr('rel');
return false;
});
});
</script>
</head>
<body>
<div id="menu">
Home -
One -
Two -
Three
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>
EDIT
DOM method as promised:
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var links = document.getElementById('menu').getElementsByTagName('a'),
divs = document.getElementsByTagName('div'),
sections = [],
id = '';
for (var i = 0, size = divs.length; i < size; i++) {
if (divs[i].className.indexOf('content') != -1) {
sections.push(divs[i]);
}
}
for (var i = 0, size = links.length; i < size; i++) {
id = links[i].href;
id = id.substring(id.lastIndexOf('/') + 1);
id = id.substring(0,id.indexOf('.'));
links[i].rel = id;
links[i].onclick = function(e){
e.preventDefault();
for (var p = 0, sections_size = sections.length; p < sections_size; p++) {
sections[p].style.display = 'none';
}
document.getElementById(this.rel).style.display = 'block';
location.hash = '#!/' + this.rel;
return false;
}
}
document.getElementById('home').style.display = 'block';
};
</script>
</head>
<body>
<div id="menu">
Home -
One -
Two -
Three
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>