Basically, I want to make the resize bar move as I move the cursor across as long as I'm focusing on it. I did that but the thing is that it's being glitchy. It returns to the original state one time and the other time follows the cursor. I don't want it to do that.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
slider.style.left += e.offsetX + "px";
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
slider.style.left = e.offsetX + "px"
console.log("Cursor is " + e.offsetX)
console.log("Element is" + slider.style.left)
}
})
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
As you can see, as you drag the element, it works but it isn't smooth. It returns to its original coordinates sometimes and then follows the cursor the other time.
.offsetX is the mouse position relative to the element, so that makes the slider jump. .clientX is the mouse position relative to the document.
In order to use clientX, however, you need to subtract the original x position of the slider. I'm going to assume that .Container will always be the container for the slider. By using getBoundingClientRect() (which is a operation that takes time), I can get the x position (.left) from said container.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
updateSliderPosition(e.clientX);
console.clear();
console.log("Cursor is " + e.clientX);
console.log("Element is" + slider.style.left);
}
})
function updateSliderPosition(value) {
let box = container.getBoundingClientRect();
slider.style.left = value - box.left + "px";
}
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
My approach is to use a translation, which are generally considered better for animations than absolute positioning, for moving the slider.
I'm also using pointer events over mouse events. These work the same as mouse events but also will work for touch devices. They also allow the use of setPointerCapture, which means that once we have clicked on the slider, it will receive all events until we release it (which we do in the mouseUpHandler). You can see in the demo that even if the pointer goes outside the image, you can still move the slider around.
let slider = document.querySelector("#slider");
let container = document.querySelector('#container');
let sliderWidth = container.offsetWidth * (1 / 100);
let maxWidth = container.offsetWidth - sliderWidth;
let lastX = 0;
let thisX = 0;
let leftEdge = 0;
function mouseDownHandler(e) {
lastX = e.clientX;
slider.addEventListener('pointermove', mouseMoveHandler);
slider.setPointerCapture(e.pointerId);
}
function mouseMoveHandler(e) {
thisX = e.clientX;
xDiff = thisX - lastX;
leftEdge = Math.min(maxWidth, Math.max(0, leftEdge + xDiff));
slider.style.transform = `translate(${leftEdge}px)`;
lastX = thisX;
}
function mouseUpHandler(e) {
slider.removeEventListener('pointermove', mouseMoveHandler);
slider.releasePointerCapture(e.pointerId);
}
slider.addEventListener("pointerdown", mouseDownHandler);
slider.addEventListener("pointerup", mouseUpHandler)
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone,
.conttwo {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.contone {
z-index: -11;
}
.conttwo {
z-index: -11111;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: red;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<div id="container" class="Container">
<div class="contone">
<img class="Pic1" src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg" />
</div>
<div id="slider" class="Slider"></div>
<div class="conttwo">
<img class="Pic2" src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg" />
</div>
</div>
Related
I'm trying to implement an effect on overlapping images so when I click and drag a bar the other image underneath should reveal modifying the width. My code works, but it's kind of buggy. When I click on the bar I have to then release it to make it work, so it's not really a drag, and it supposed to stop moving when I release the click.
And second, the bar goes right even outside my container. How could I fix my code?
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
bar.on("mousedown", function () {
container.on("mousemove", function (e) {
bar.css("left", e.clientX);
up.width(e.clientX);
});
});
$("body").on("mouseup", function () {
container.off("mousemove");
});
container.on("mouseleave", function () {
container.off("mousemove");
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
}
#up {
width: 50%;
}
#bottom,
#up {
position: absolute;
overflow: hidden;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" />
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" />
</div>
<div id="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Explanation : When the bar was being slid, the images were acting as draggable elements. To stop that, I set draggable attribute to false in both image elements. Besides that, the blue color appearing was highlight because of selection of element. To prevent that, I set CSS property user-select to none for the container divs of images.
For browser compatibility, use different versions for user-select.
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
bar.on("mousedown", function() {
container.on("mousemove", function(e) {
let left = e.clientX;
let containerWidth = container.width();
let barWidth = bar.width();
if((left + barWidth) > containerWidth)
left = containerWidth - barWidth;
bar.css("left", left);
up.width(left);
});
});
$("body").on("mouseup", function() {
container.off("mousemove");
});
container.on("mouseleave", function() {
container.off("mousemove");
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
}
#up {
width: 50%;
}
#bottom, #up {
position: absolute;
overflow: hidden;
user-select: none;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" draggable="false"/>
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" draggable="false"/>
</div>
<div id="bar"></div>
</div>
My advise is to NOT unregister (remove) the mousemove event listener.
Below, I used a barActive as a "flag" to know if the mouse button is down. The flag is resetted on mouseup and mouseleave of the container.
The mousemove event is a machinegun... But is still not fast enough to "really" follow the mouse. So if a user moves the bar fast, the cursor often is off the bar (I'm sure you noticed it). So a mouseup has good chances to not fire if the mouseup event listener is on the bar. So the event listener has to be on the container.
Now... While mousemove is not fast enought to follow the mouse perfectly... It often is too fast and may interfeer with the actions you wish to do with the other events, like mousedown were you set the "flag". At the same millisecond, you can have the mousedown event and multiple mousemove events. So to "isolate" it form the mousemove events, I used a real tiny setTimeout. That is giving enought time for the flag to be set bafore any next mousemove to enact.
About making sure the bar does not go outside the container, I used a condition on e.clientX.
I also took the container's padding in account.
console.clear();
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
var barActive = false;
bar.on("mousedown", function (e) {
barActive = true;
});
container.on("mousemove mouseup mouseleave", function (e) {
if (barActive && e.type === "mousemove") {
setTimeout(function () {
if (e.clientX < container.width() && e.clientX>5) {
bar.css("left", e.clientX - 8);
up.width(e.clientX - 8);
}
}, 1);
return;
}
barActive = false; // Applies only for mouseup and mouseleave
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
user-select: none; /* Prevents the image itself to be selected */
}
#up {
width: 50%;
}
#bottom,
#up {
position: absolute;
overflow: hidden;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
overflow: hidden; /* Will make sure the bar does not go over the border */
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" />
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" />
</div>
<div id="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CodePen
I am new to Javascript and CSS. I have a div that will contain an image. The below code, I pieced it together after watching some YouTube videos and going over some documentation, however I am sure that this is not the right code.
https://jsfiddle.net/0hp97a6k/
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div {
margin: 0;
}
.headerspace {
width: 100%;
height: 20px;
background-color: white;
}
.header {
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headerspace"></div>
<div class="header">
<div class="logo" id="logoid">
</div>
</div>
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function() {
var value = window.scrollY;
logo.style.marginleft = value * 0.5 + 'px';
})
</script>
</body>
</html>
How do I set the left margin based on scroll?
Also can scroll based properties be applied to two margins, say top and right at the same time?
marginleft should be marginLeft in your javascript
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
})
</script>
And then if you want to edit the left and top you can do the following
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
logo.style.marginTop = value * 0.5 + 'px';
})
</script>
To make sure the logo element goes back where it started you should edit the css like this
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div{
margin: 0;
}
.headerspace{
width: 100%;
height: 20px;
background-color: white;
}
.header{
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
padding-top: 50px;
padding-left: 50px;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
I have removed the margin from .logo because that will be overwritten and added those values as padding to the parent (.header)
to my understanding, .onclick, should work each time I click the button, however this is only working once. This is my code so far
var left = document.getElementById("left");
left.onclick = moveLeft;
function moveLeft() {
var box = document.getElementById("box1");
var pos = 200;
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
like I said, it works, but only once, it shifts the box to the left one square, but it shouldn't stop until after 5 squares.
please help...
The first answer is right, your pos variable revalue to 200 when you click your button everytime.
So it is just from 200 to 250 everytime.it look like same everytime.
try like this:
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
That is because your pos variable is defined inside the moveLeft function. Every time the function is executed, the pos is always 200. Define it outside the moveLeft function.
Either make pos global as in below snippet.
Or set it dynamically within the function.
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
I am trying to show a tooltip by hovering the mouse on a circle inside a canvas. While the CSS is changing from hidden to visible by javaScript (saw that through chrome inspect), the tooltip is not showing up. Please help to sort this out. Thank you for your help.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
</canvas>
</div>
</body>
</html>
you need to move the .tooltip element out of the canvas element, otherwise it won't display.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create circle
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circle);
// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) {
// Check whether point is inside circle
if (ctx.isPointInPath(circle, event.clientX, event.clientY)) {
showtext();
} else {
hidetext();
}
});
function showtext() {
document.getElementById("tooltiptext").style.visibility = 'visible';
}
function hidetext() {
document.getElementById("tooltiptext").style.visibility = 'hidden';
}
.tooltip {
visibility: hidden;
position: absolute;
top: 20px; left: 20px;
}
body {
margin: 0;
}
<canvas id="canvas"></canvas>
<div class="tooltip">
<span id="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
There were two issues:
The manner in which you were applying styles to your canvas were causing its display not to match its internal tracking of the position of the items it contained, so the if condition was not necessarily returning true when the cursor was over where the circle was appearing.
A canvas cannot render and display contents.
As such, the below snippet shows a version of this that works. You'll need to figure out how to position things correctly, but it solves the immediate issue.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
</canvas>
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">
blah
</span>
</div>
</div>
</body>
</html>
The problem was that you set the width and height of the canvas as the 100% of the parent in the css.
You need to set the canvas's width and height attribute instead.
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
<canvas id="canvas" width="200" height="200">
I have problem with caption "TEST CAPTION", because after move a scroll, the caption flees to top. I need to synchronize caption with near image.
[https://jsfiddle.net/ohamdcaL][1]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PARALLAX</title>
<style type="text/css">
body {
margin: 0px;
background: url(http://th09.deviantart.net/fs70/PRE/i/2013/215/a/3/bubble_background_by_diversekitty-d6giw39.png) fixed;
min-height: 2000px;
}
#content_layer {
position: absolute;
/*min-height: 100%;*/
}
#paralax_div1 {
position:fixed;
background: url(http://www.agencjaface.com/wp-content/uploads/marek_wlodarczyk_icon.jpg) no-repeat 600px 400px;
width:100%;
height:800px;
}
#caption {
position: fixed;
top: 500px;
left: 300px;
font-size: 20px;
width:100%;
}
</style>
<script>
function parallax() {
var paralax_div1 = document.getElementById("paralax_div1");
var caption = document.getElementById("caption");
paralax_div1.style.top = -(window.pageYOffset / 80)+'px';
caption.style.top = -(window.pageYOffset / 80)+'px';
}
window.addEventListener("scroll", parallax, false);
</script>
</head>
<body>
<div id="paralax_div1"></div>
<div id="caption"> TEST CAPTION </div>
<div id="content_layer">
<script>
for( i =0; i < 100; ++i) {
document.write('HEHEHEHEHEH <BR/>');
}
</script>
</div>
</body>
</html>