I have a bootstrap based website which is divided into different sections. In a section called features I have three images which I want to rotate when a user navigates to it or scroll downs to that section and also when the user hover overs it. I know how to rotate the images on hover but unable to think of a way to do it when a user scrolls down to that section.
The html section code:-
<section id="features">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading dark">Features</h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="bg1.png" class="feature-size">
</div>
</div>
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="bg2.png" class="feature-size">
</div>
</div>
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="bg3.png" class="feature-size">
</div>
</div>
</div>
</div>
</section>
The css for rotating images on hover:-
<style type="text/css">
img {
transition: all 0.5s ease-in-out 0s;
}
img:hover {
cursor: default;
transform: rotate(360deg);
transition: all 0.5s ease-in-out 0s;
}
</style>
Whenever a user goes to that section the images will rotate once and also on hovering over the image. Please provide a way to do it with css or plain javascript. I don't want to use any javascript plugins like jquery. Any help is highly appreciated.
You can use Waypoint js : http://imakewebthings.com/waypoints/
var waypoint = new Waypoint({
element: document.getElementById('waypoint'),
handler: function(direction) {
console.log('Scrolled to waypoint!')
}
})
Add a class on reaching the point during the scroll.
Using JQuery plugin Appear can make this a lot easier.
function toggleHover() {
$(".feature-size").each(function() {
$(this).toggleClass("hovered")
});
}
$('#features').appear(function() {
setTimeout(function() {
toggleHover();
setTimeout(toggleHover, 1000); //to revert the animation
}, 1500);
});
and add this css rule.
img.hovered {
cursor: default;
transform: rotate(360deg);
transition: all 0.5s ease-in-out 0s;
}
Feel free to change the timeout seconds, as i cannot predict the timings you may want without hands on
Here is the one with JavaScript, but you need to make some tweaks according to the requirements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{height: 100vh;}
</style>
</head>
<body>
<div>
<script>
</script>
</div>
<div>
<script>
</script>
</div>
<div id="foo" style="background-color:red;">
<script>
</script>
</div>
<script>
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
// deal with the page getting resized or scrolled
window.addEventListener("scroll", checkPosition, false);
window.addEventListener("resize", checkPosition, false);
function checkPosition() {
console.log(getPosition(myElement));
console.log(position);
if((getPosition(myElement)).y < 10 && (getPosition(myElement)).y > -10){
alert("Here");
}
}
var myElement = document.querySelector("#foo");
var position = getPosition(myElement);
</script>
</body>
</html>
You could do it with :target pseudo-class (MDN)
Something like this with your given code:
a {
display: block;
/* Just for demonstration */
height: 100vh;
}
img {
transition: all 0.5s ease-in-out 0s;
}
:target img {
cursor: pointer;
transform: rotate(360deg);
}
:target img:hover {
transform: rotate(720deg);
}
Link to section
<section id="features">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading dark">Features</h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="http://fillmurray.com/300/300" class="feature-size">
</div>
</div>
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="http://fillmurray.com/300/300" class="feature-size">
</div>
</div>
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="http://fillmurray.com/300/300" class="feature-size">
</div>
</div>
</div>
</div>
</section>
Related
I'm having a two issues/problems with the following slide.
It is a "double slider", so, two simultaneous slider in body section.
First is that when i reach the last image (9-nth, cos that much both sliders contain), the second slider continues to work properly (sliding images infinitely) but the first one just get blank.
Or if i click on previous button on begining then second doesn't work and images disapear, while the first one work nicely. Can't figure it out why. I've tried changing the "id" in the HTML and styling it but nothing change.
Second is, that i finally need to make it more dynamic, so, to avoid hardcoding images in the HTML and to putt them in JS and somehow append them in the DOM, but don't know what exactlly to do; creating an array, or using the "createElement"?
And which logic could be usable to actually include them in the DOM and have the following slider(s), considering the provided code?
Since it's my just second slider which i'm making, i found it pretty much hard, so any help/hint/advice is welcomed.
P.S Must be in jQuery and plugins excluded, so please don't provide any plugins links.
Thank you in advance.
var slides = $('.slide');
slides.first().before(slides.last());
$('button').on('click', function() {
// Selecting the slides
slides = $('.slide');
// Selecting button
var button = $(this);
// Register active slide
var activeSlide = $('.active');
// Next function
if (button.attr('id') == 'next') {
slides.last().after(slides.first());
activeSlide.removeClass('active').next('.slide').addClass('active');
}
// Previous function
if (button.attr('id') == 'previous') {
slides.first().before(slides.last());
activeSlide.removeClass('active').prev('.slide').addClass('active');
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
transition: 0.6s ease;
transform: translate(-100%, 0);
}
.slide img {
width: 100%;
height: 300px;
}
.slide.active {
transform: translate(0, 0);
}
.slide.active~.slide {
transform: translate(100%, 0);
}
body {
text-align: center;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aqua;
color: #333;
padding: 10px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slide active">
<img src="Assets/slider-image-1.jpg" alt="">
</div>
<div class="slide">
<img src="Assets/slider-image-2.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-3.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-4.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-5.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-6.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-7.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-8.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-9.jpg">
</div>
</div>
<div class="slider">
<div class="slide active">
<img src="Assets/slider-image-1.jpg" alt="">
</div>
<div class="slide">
<img src="Assets/slider-image-2.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-3.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-4.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-5.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-6.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-7.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-8.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-9.jpg">
</div>
</div>
<button id="previous"><img src="Assets/arrow-blue-left.png" alt=""></button>
<button id="next"><img src="Assets/arrow-blue-right.png" alt=""></button>
Your code doesn't work properly because the slides = $('.slide') variable contains all slides from both sliders. You have to manipulate the slides in the to sliders independently. The second failure is that in your example the first slide is the initial active slide. Only slides in range second -> penultimate are allowed. Working example here
function handleSlide(slider, direction) {
var slides = $(slider).find('.slide');
if(slides.length < 1) return;
// Register active slide
var activeSlide = $(slider).find('.active');
// Next function
if (direction == 'next') {
slides.last().after(slides.first());
activeSlide.removeClass('active').next('.slide').addClass('active');
}
// Previous function
if (direction == 'previous') {
slides.first().before(slides.last());
activeSlide.removeClass('active').prev('.slide').addClass('active');
}
}
$('button').on('click', function() {
var button = $(this);
handleSlide($("#slider1"), $(button).attr('id'));
handleSlide($("#slider2"), $(button).attr('id'));
});
Loading images dinamically: You can do that by defining an array which contains the images and you can append the images into the slider using the jQuery 'append' method. Working example on jsFiddle.
function fillSliders(slider, images) {
$(slider).empty();
for(var i = 0; i < images.length; i++) {
if(typeof images[i] == "string" && images[i] !== "") {
var active = (i == 1) ? " active" : "";
$(slider).append('<div class="slide'+active+'"><img src="'+images[i]+'"
alt="image-'+i+'" /></div>');
}
}
}
var images = ["image1.jpg", "image2.jpg","image3.jpg","image4.jpg"];
fillSliders($("#slider"), images);
i got a fullscreen-bg div which in my case got the ID #background-change.
In that fullscreen-bg i got 3 Divs called .fullscreen-column-1, .fullscreen-column-2 etc.
now i want to change the background-image of #background-change while the mouseoverevent is called on the columns.
My code looks like this, but it did not work.
<div id="background-change" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row full-width-content vc_row-o-full-height vc_row-o-columns-middle vc_row-o-equal-height vc_row-flex vc_row-o-content-middle standard_section first-section loaded" style="padding-top: 0px; padding-bottom: 0px; margin-left: -298px; width: 1841px; visibility: visible; min-height: 96.7579vh;"><div class="row-bg-wrap instance-0"><div class="inner-wrap"> <div class="row-bg " style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div></div> </div><div class="col span_12 dark left" style="min-height: 96.7579vh;">
<div class="vc_col-sm-4 fullscreen-column-1 wpb_column column_container vc_column_container col has-animation padding-10-percent instance-0 animated-in" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="#000000" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="fade-in-from-left" data-delay="500" style="padding-top: 184.094px; padding-bottom: 184.094px; opacity: 1; transform: translate(0px, 0px);"><a class="column-link" href="#"></a>
<div class="vc_column-inner">
<div class="wpb_wrapper">
<h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading" id="testid">About</h2>
</div>
</div>
</div>
<div class="vc_col-sm-4 wpb_column column_container vc_column_container col no-extra-padding instance-1" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading">Work</h2>
</div>
</div>
</div>
<div class="vc_col-sm-4 wpb_column column_container vc_column_container col no-extra-padding instance-2" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0" style="min-height: 425px;">
<div class="vc_column-inner">
<div class="wpb_wrapper">
</div>
</div>
</div> `<div class="vc_col-sm-4 fullscreen-column-1 wpb_column column_container vc_column_container col has-animation padding-10-percent instance-0 animated-in" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="#000000" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="fade-in-from-left" data-delay="500" style="padding-top: 184.094px; padding-bottom: 184.094px; opacity: 1; transform: translate(0px, 0px);"><a class="column-link" href="#"></a>
<div class="vc_column-inner">
<div class="wpb_wrapper">
<h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading" id="testid">About</h2>
</div>
</div>
</div>`
Here comes the js:
<script type="text/javascript">
document.getElementsByClassName("fullscreen-column-1").onmouseover = function() {
document.getElementById("background-change").style.backgroundImage = "url('https://mywebsite.de/uploads/image-1.jpg')";
};
</script>
any one got the solution? I cant get it to work, i feel dumb right now...
Solution: posted by: Rajan Patil
for (i = 0; i < document.getElementsByClassName("fullscreen-column-1").length; i++) {
document.getElementsByClassName("fullscreen-column-1")[i].onmouseover = function() {
document.getElementById("background-change").style.backgroundImage = "url('your-image-url')";
}
}
You do not need JavaScript for this. Use CSS instead.
.fullscreen-column-1 {
width: 400px;
height: 1000px;
background-image: url(https://picsum.photos/400/1000);
transition: 0.2s ease-in-out;
}
.fullscreen-column-1:hover {
background-image: url(https://picsum.photos/400/1002)
}
<div class="fullscreen-column-1"></div>
There is a typo. getElementsById should be getElementById
Also attach your event listener this way :
for (i = 0; i < document.getElementsByClassName("fullscreen-column-1").length; i++) {
document.getElementsByClassName("fullscreen-column-1")[i].onmouseover = function() {
document.getElementById("background-change").style.backgroundImage = "url('your-image-url')";
}
}
im trying to make a simple transition from right to left when i click on a button.
I've done this to illustrate what i mean : https://jsfiddle.net/Waarx/9kjhnwLp/22/
var button1 = document.querySelector('#div1');
button1.addEventListener('click', function(event) {
document.querySelector('#display2').style.display = "none";
document.querySelector('#display1').style.display = "block";
});
var button2 = document.querySelector('#div2');
button2.addEventListener('click', function(event) {
document.querySelector('#display2').style.display = "block";
document.querySelector('#display1').style.display = "none";
});
.parent {
width: 800px;
}
.col {
float: left;
width: 20%;
}
.col2 {
width: 70%;
}
.none {
display: none
}
<div class="parent">
<div class="col">
Div1
Div2
</div>
<div class="col2">
<div class="none" id="display1">
display 1
</div>
<div class="none" id="display2">
display 2
</div>
</div>
</div>
I hope that you could help me.
First off you can do the same thing with jQuery like this with less code:
$('#div1').click(function(event) {
$('#display2').hide();
$('#display1').show();
});
$('#div2').click(function(event) {
$('#display2').show();
$('#display1').hide();
});
Secondly: To animate an html element you have to set its opacity. display: none; will not animate at all. Also using only classes makes you lose less time on your CSS. So,
Test it here:
$( document ).ready(function() {
$('.div1').click(function(event) {
$('.display2').addClass('none');
$('.display1').removeClass('none');
});
$('.div2').click(function(event) {
$('.display2').removeClass('none');
$('.display1').addClass('none');
});
});
.display1, .display2 {
transform: translateX(0);
transition: all 1s ease-in-out;
}
.none {
transform: translateX(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
<div class="col">
Div1
Div2
</div>
<div class="col2">
<div class="display1 none">
display 1
</div>
<div class="display2 none">
display 2
</div>
</div>
</div>
I have a progress element. That element looks like the following:
<div class="container">
<div id="progress-bar">
<progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
When a user clicks the "animate" button, I want to fill the progress bar with an orange bar to 75%. The animation should take .5 seconds (half a second).
As shown in this Bootply, I'm stuck getting the animation to work. I tried using setInterval, however, the animation was really jerky. Plus, I couldn't get the bar to be orange. It was always green.
Is there a way to animate the value of a progress element for a smooth animation?
In webkit browsers you can use a pseudo class to add a transition and color:
$('#animateButton').on('click', function() {
$('#myProgressBar').val(75);
});
progress[value]::-webkit-progress-value {
transition: width 0.5s;
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="progress-bar">
<progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
If you need wider browser support, you can iterate the value 'till you get to the target value to animate the bar. However, you can't change the color.
function animateProgress($progressBar, val, currentVal) {
currentVal = currentVal || 0;
var step = val * 16 / 500;
function animate(currentVal) {
currentVal += step;
$progressBar.val(currentVal);
currentVal < val && requestAnimationFrame(function() {
animate(currentVal);
});
}
animate(currentVal);
}
$('#animateButton').on('click', function() {
animateProgress($('#myProgressBar'), 75);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="progress-bar">
<progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
Here's how it can be done using smooth CSS3 animation : no need for jQuery or even JS animation at all.
var progressBar = document.getElementById("progress-bar")
document.getElementById("animateButton").onclick= function(){
progressBar.style.width = "75%"
progressBar.style["background-color"] = "orange"
}
.container {
height: 30px;
}
.container #progress-bar {
background-color: #008000;
height: 100%;
width: 10%;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="container">
<div id="progress-bar"></div>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
Here's an example
document.getElementById("animateButton").onclick= function(){
document.getElementById("progress-bar").style.backgroundColor = "orange";
document.getElementById("progress-bar").style.width = "75%";
}
#progressHolder{
background:grey;
height:20px;
width:300px;
}
#progress-bar{
background:grey;
height:20px;
width:0px;
transition:background-color 0.5s, width 0.5s;
}
<div class="container">
<div id="progressHolder">
<div id="progress-bar">
</div>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
You can use JQuery animation and set the time interval as "slow", "fast", or in milliseconds.
$("#progress-bar").click(function(){
$("#myProgressBar").animate({width: "100px"},slow);
});
I have 2 divs that I need a shade over after a user action. The divs are just two divs next to each other:
<div class="bought">content</div>
<div class="class2">content</div>
Here is the CSS which is made visible via jQuery:
#view-hint .body > .img .bought {
display:none;
cursor:pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:2;
background: rgba(0,0,0,0.75);
}
When the event fires this is what it looks like:
That bottom white area needs to be covered dynamically as well.
The approach I thought to take was to wrap both div's in another div but it breaks the look of everything. So I tried to make the top div longer based off size but it's still not perfect...
var originalHeight = $('.bought').height();
var windowWidth = $(window).width();
if (windowWidth < 710) {
$('.bought').css('height', originalHeight * 0.6);
} else if (windowWidth > 710 && windowWidth < 1000) {
$('.bought').css('height', originalHeight * 0.698);
} else if (windowWidth > 1000 && windowWidth < 1300) {
$('.bought').css('height', originalHeight * 0.699);
} else if (windowWidth > 1300 && windowWidth < 1600) {
$('.bought').css('height', originalHeight * 0.865);
} else if (windowWidth > 1600 && windowWidth < 2000) {
$('.bought').css('height', originalHeight * 1.035);
} else {
$('.bought').css('height', "662px");
}
This mostly works for all size screens, but if you change the zoom it still causes issues.
How can I make it where both of these divs are covered by the CSS dynamically?
Edit:
Here is the full HTML with an added wrapper and an image that results:
<div id="test123">
<div class="bought">
<div class="row">
<div class="col">
<div class="body">
<?php if(Request::is('user/*')) { ?>
<div id="boughtquestion">Did you buy this for <?php echo $user->firstName ?>?</div>
<div class="options">
<!-- <a id="boughtyes" class="cbutton whiteonpurple" onclick="markPurchased(event)">Yes</a> -->
<a id="boughtyes" class="cbutton whiteonpurple">Yes</a>
<a id="boughtno" class="cbutton whiteonpurple">No</a>
</div>
<?php } else { ?>
<div>Bought?</div>
<p>Click here to send hinters a message to let them know.<br />And yes, it can still be a surprise!</p>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="markedaspurchased">
<div class="row">
<div class="col">
<div class="body">
<div id="markedpurchased">Marked as Purchased</div>
<p id="markedmessage">Marking as purchased prevents duplicate gift giving. Dont worry <?php echo $user->firstName ?> doesn't get notified but you can let <?php echo ($user->gender == 'female' ? 'him' : 'her') ?> know by sending a message!</p>
<p><a id="sendmessagebutton" class="cbutton whiteonpurple purchasebutton">Send message to let them know</a></p>
<p><a id="anonymousbutton" class="cbutton whiteonpurple purchasebutton">Send anonymous message</a></p>
<p><a id="secretbutton" class="cbutton whiteonpurple purchasebutton">Keep it a secret</a></p>
</div>
</div>
</div>
</div>
</div>
<p class="description"></info-coverp>
<div class="options">
<a class="buy cbutton whiteonpurple" target="_blank">Buy</a>
<a class="hint cbutton whiteonblack" target="_blank">Hint</a>
</div>
<div class="info">
<div class="bar"></div>
<div class="rehints">10 REHINTS</div>
<div class="hinter">
<div class="picture monophoto">
<div class="text">BO</div>
<div class="img" style="background-image: url();" onclick=""></div>
</div>
<div class="content">
<div class="one">Hinted by:</div>
<div class="two"></div>
</div>
</div>
<div class="partnertext">Partnered Hint</div>
<div style="clear:both;"></div>
</div>
</div>
Since you're using Jquery, why not give the divs a separate class and then use .wrapAll to create a wrapper...then position the overlay on top of that.
$(".wrapped").wrapAll('<div class="overlay" />');
.overlay {
display: inline-block;
position: relative;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapped bought">content 1</div>
<div class="wrapped class2">content 2</div>