At first laod, image and the escape button do not appear in the designated place.
Go on and close the divs by clicking the escape button and then execute the function again.
Surprisingly, at the second execution, it works perfectly.
Does anyone know why results are different at the first load?
(FireFox)
< html>
< head>
< style type="text/css">
#wievbackground {
position: fixed;
top: 0;
left: 0;
height:100%;
width:100%;
background-color:red;
}
#escapebutton {
position:fixed;
background-color:white;
height:40px;
width:40px;
}
< /style>
< /head>
<body>
<div id="wievwrap"> </div>
<script type="text/javascript">
function itemview(itemurl) {
document.getElementById("wievwrap").innerHTML = ' <div id="wievbackground"> </div> ';
document.getElementById("wievbackground").innerHTML = ' <img id="theitem" style="position:fixed" src="' + itemurl + '"> ';
document.getElementById("wievbackground").innerHTML += '<div onclick="document.getElementById(\'wievwrap\').innerHTML=\'\';" id="escapebutton"></div>';
document.getElementById("theitem").style.left = document.getElementById("theitem").parentElement.offsetWidth / 2 - document.getElementById("theitem").offsetWidth / 2 + "px";
document.getElementById("theitem").style.top = document.getElementById("theitem").parentElement.offsetHeight / 2 - document.getElementById("theitem").offsetHeight / 2 + "px";
var x = parseInt(document.getElementById("theitem").style.left) + parseInt(document.getElementById("theitem").offsetWidth - document.getElementById("escapebutton").offsetWidth / 2);
document.getElementById("escapebutton").style.left = x + "px";
document.getElementById("escapebutton").style.top = parseInt(document.getElementById("theitem").style.top) - document.getElementById("escapebutton").offsetHeight / 2 + "px";
}
</script>
<div></div>
<div onclick="itemview('smt.png')">function</div>
</body>
</html>
Related
I have an image in HTML and i want the user to write an input in HTML and then if he click on the image it will create a colored div which is written inside the input, the position of this div is based of the coordinates where the user clicked (not centered, a little on top and to the left), for now I can create the rectangular div, but i don't know how to put a text in it.
let listaAre = [];
let quantiClic = 0;
document.getElementById('blah').addEventListener('click', event => {
document.getElementById('squareContaine').innerHTML =
document.getElementById('squareContaine').innerHTML +
'<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;"></div>';
document.getElementById('squar' + quantiClic).style.top = (event.pageY - Number(document.getElementById('dimensione').value) / 2) + 'px';
document.getElementById('squar' + quantiClic).style.left = (event.pageX - Number(document.getElementById('dimensione').value) / 2) + 'px';
document.getElementById('squar' + quantiClic).style.width = Number(document.getElementById('dimensione').value)/4 + 'px';
document.getElementById('squar' + quantiClic).style.height = Number(document.getElementById('dimensione').value)/10 + 'px';
document.getElementById('squar' + quantiClic).style.background =(document.getElementById('colorebordo').value);
listaAre.push({
x: (event.offsetX - Number(document.getElementById('dimensione').value) / 2),
y: (event.offsetY - Number(document.getElementById('dimensione').value) / 2),
width: Number(document.getElementById('dimensione').value),
height: Number(document.getElementById('dimensione').value),
background:(document.getElementById('colorebordo').value)
});
document.getElementById('squar' + quantiClic).addEventListener('click', function (e) {
this.style.display = 'none';
});
quantiClic = quantiClic + 1;
});
article, aside, figure, footer, header,
hgroup, menu, nav, section { display: block; }
.fasciaalta {
position: fixed;
background-color: white;
}
<div class="fasciaalta">
<input type="color" id="colorebordo">
<input type="text" id="nome">
<input type="number" id="dimensione" value="200">
<hr size="2px" color="blue" width="100">
</div>
<img id="blah" src="montagna.jpg" alt="your image" />
<div id="squareContaine"></div>
<div id="previewImage"></div>
You can get the coordinates of the mouse on the event click by accessing the clientX and clientY properties of the event object. Then you simply tell the new element to use them as top and left styles to position it.
Snippet
document.getElementById('blah').addEventListener('click', function(event) {
var div = document.createElement("DIV"); // Create a <div> element
var t = document.createTextNode("HELLO");// Create a text node
div.appendChild(t); // Append the text to <div>
document.body.appendChild(div); //Add <div> to document
div.style.position = 'absolute'; //Make its position absolute
//Set the coordinates
div.style.left = event.clientX + "px";
div.style.top = event.clientY + "px";
})
<div>
<img id="blah" src="http://img1.wikia.nocookie.net/__cb6/nyancat/images/5/50/Wiki-background" alt="your image" />
</div>
Extra
If instead of creating a new div, you want to use one simply access that element with getElementById and change its properties instead. I've made the example as simple as possible so that it can apply to not only your case but anyone else's trying to solve their issue.
If you need the text value then all you need is to change the first 2 statements of your click function. - Check this Codepen
1) Onclick, get the value of the textbox like so
var val = document.getElementById('nome').value;
2) Next insert this val into your innerHTML statement
document.getElementById('squareContaine').innerHTML =
document.getElementById('squareContaine').innerHTML +
'<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;">'+ val + '</div>';
Scroll the very end of the above statement to see the val inserted.
Also do not forget to change the color of the text if the background of the box is black.
document.getElementById('blah').addEventListener('click', event => {
var val = document.getElementById('nome').value; //added
//below statement changed
document.getElementById('squareContaine').innerHTML =
document.getElementById('squareContaine').innerHTML +
'<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;">'+ val + '</div>';
.. rest of the code remain the same ..
});
I have some old code that I am trying to convert to divs. It contains frames that have no target src, just JavaScript to generate a page.
Below is the code...
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
window.editbox.document.write(editboxHTML);
window.editbox.document.close();
window.editbox.document.f.ta.value = defaultStuff;
update();
}
function update() {
var textarea = window.editbox.document.f.ta;
var d = dynamicframe.document;
if (old != textarea.value) {
old = textarea.value;
d.open();
d.write(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, ''))
d.write(extraStuff);
d.close();
}
window.setTimeout(update, 150);
}
<frameset onload="init();" rows="50%,50%" resizable="no">
<frame name="editbox" src="javascript:'';">
<frame name="dynamicframe" src="javascript:'';">
</frameset>
This code has a user input box at the top to input HTML code into, and the bottom displays what that code would look like in a browser.
How would I manipulate this code to work with divs instead of frames, so I can include extra styling, and so that it is not fully depreciated in HTML5.
If your answer includes AJAX, please can you explain it as I am not familiar with that coding.
EDIT: If there is no div alternative, is there an iframe alternative?
Answer Updated
CSS Fixed
Error fixed
Jquery way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 50%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">qweqwe' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
$("#editbox").html(editboxHTML);
$("#editbox form[name='f'] [name='ta']").focus();
$("#editbox form[name='f'] [name='ta']").val(defaultStuff);
update();
}
function update() {
var textarea = $("#editbox form[name='f'] [name='ta']");
var d = $("#dynamicframe");
if (old != textarea.val()) {
old = textarea.val();
if (old != undefined){
d.html(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, '')){
d.append(extraStuff);
}
}
else{
d.html("old undefined");
}
}
setTimeout("update()", 150);
}
</script>
<button onclick="init()">EDIT</button>
<div id="editbox"></div>
<div id="dynamicframe"></div>
you can just create one div tag with id say <div id='editbox' /> and add one line code in your update function document.getElementById("editbox").innerHTML=editboxHTML;
I am a beginner with javascript. I have two images. One is for clicking, and the other one is for moving 10px to the left & right randomly. Once I click on the "high5" image, "pic2" image has to move randomly in any direction no more than 10 pixels. Every click is added to the score to generate total score at the end. I am stuck at this point, and I don't know where to go. Can someone help me, please?
As you can see, I have edited my code. I'm still having problems in:
Creating scoreboard to keep track of how many clicks the user
clicked within 30 seconds.
I need a timer that counts 30 seconds.
Every time the picture in the middle moves, it keep going to the
left.
HTML code:
<!DOCTYPE html>
<!-- game.html
Uses game.js
Illustrates visibility control of elements
-->
<html lang="en">
<head>
<title>Visibility control</title>
<meta charset="utf-8" />
</head>
<body>
<div id="score">
0
</div>
<div id="high5" style="position: relative; left: 10px;">
<img onclick= "moveImg(); clicked();" src="pics/high5.jpg"
style="height:250px; width:250px; " alt="Minion High Five" />
</div>
<div id="pic2" style="position: relative; top: 20px; left: 650px;">
<img src="pics/pic2.gif" style="height:250px; width:350px;"/>
</div>
<script type="text/javascript" src="game.js" ></script>
</body>
</html>
javascript:
var x = 0;
var y = 0;
var timer = 30;
var count = 0;
var isDone = true;
function moveImg() {
x += Math.floor(Math.random() * 20) - 10;
y += Math.floor(Math.random() * 20) - 10;
pic2.style.left = x + "px";
pic2.style.top = y + "px";
if(timer > 0) {
setTimeout("moveImg()", 50);
timer--;
}
else {
timer = 30;
}
}
function clicked() {
timer = 30;
count++;
score.innerHTML = count;
}
Try something like this: DO not use onclick inside HTML.I have added some jquery part,if you don't need change it accordingly or let me know.
var high5,myVar;
$(function(){
$("img").on("click",function(){
console.log($(this));
if($(this).data('id') == "minion"){
high5=document.getElementById('pic2');
high5.style.left="10px";
moveImg();
}
});
setInterval(function(){ myStopFunction(); }, 3000);//call to stop shacking after 3000 miliseconds.
});
function moveImg() {
//alert("hi");
var x;
x = Math.floor(Math.random()*4)+1;
left = parseInt(high5.style.left.replace('px', ''));
console.log(x+ "," +left);
if (x==4 && left >= 10) {
high5.style.left = (left - 10) + 'px';;
}
if (x==3 && left <= 650) {
high5.style.left = (left + 10) + 'px';
}
if (x==2 && left >= 10) {
high5.style.left = (left - 10) + 'px';;
}
if (x==1 && left <= 450) {
high5.style.left = (left + 10) + 'px';
}
myVar = setTimeout(function(){moveImg();},100);
}
function myStopFunction() {
clearTimeout(myVar);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "high5" style = "position: absolute;">
<img src="pics/high5.jpg" style="height:250px; width:250px;
margin-top: 50px; margin-left: 50px; border:none;"
alt="Minion High Five" data-id="minion"/>
</div>
<div id = "pic2" style=" position: absolute; width:350px;height:250px;margin-left: 550px;border:1px solid black;margin-top:150px;">
<img src="pics/pic2.gif" style="width:350px;height:250px;" alt="Minion High Five"/>
</div>
I wrote a code for a 5 image slideshow and the NEXT and PREVIOUS buttons are supposed to take you to the next and previous slide but nothing happens when i press them. Can anyone help me out? some more detail some more detail some more detail some more detail
var slideShow = [];
function newImage(source, caption) {
var pic = new Object();
pic.src = source;
pic.cap = caption;
return pic;
}
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
var i = 0;
function nextPic() {
i = (i + 1);
if (i == 5)
i = 0;
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' id="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
function prevPic() {
if (i == -1)
i = 4;
else
i = (i - 1);
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' id="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
#picture {
width: 200px;
margin-left: 50;
margin-right: auto;
}
div.buttons {
width: 200px;
margin-left: auto;
margin-right: auto;
}
div.info {
width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 3px solid purple;
}
button {
font-size: 12px;
}
button.left {
auto;
margin-right: 418px;
}
p {
text-align: center;
}
<h3>Project 2: Slide Show</h3>
<h4>I do not own any of the following pictures</h6>
<h4>All pictures acquired online, unknown owners</h4>
<br />
<div id="picture">
<img src="slideshow1.jpg" id="images" alt="my picture" height="200 px">
<p>The Happy Cat</p>
</div>
<div class="buttons">
<button class="left" onClick="prevPic()">PREVIOUS</button>
<button onClick="nextPic()">NEXT</button>
</div>
1) Typo in slideShow
2)Not related but you cannot have duplicate id instead use class
var slideshow = [];
function newImage(source, caption) {
var pic = new Object();
pic.src = source;
pic.cap = caption;
return pic;
}
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
var i = 0;
function nextPic() {
i = (i + 1);
if (i == 5)
i = 0;
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' class="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
function prevPic() {
if (i == -1)
i = 4;
else
i = (i - 1);
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' class="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
<h3> Project 2: Slide Show </h3>
<h4> I do not own any of the following pictures </h6>
<h4> All pictures acquired online, unknown owners </h4>
<br />
<div id="picture">
<img src="slideshow1.jpg" class="images" alt="my picture" height="200 px">
<p>The Happy Cat</p>
</div>
<div class="buttons">
<button class="left" onClick="prevPic()">PREVIOUS</button>
<button onClick="nextPic()">NEXT</button>
</div>
You declaring var slideShow = []; array, however later you are populating slideshow with the code:
slideshow[0] = newImage("slideshow1.jpg","The Happy Cat");
which throws ReferenceError because you can't set property of the undefined.
Use var slideshow = [] instead of var slideShow = []
I am using the following coding
<html>
<head>
<style>
#thediv {
margin:0 auto;
height:400px;
width:400px;
overflow:hidden;
}
img {
position: relative;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<input type="button" value ="-" onclick="zoom(0.9)"/>
<input type="button" value ="+" onclick="zoom(1.1)"/>
<div id="thediv">
<img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/>
</div>
<script>
window.onload = function(){
zoom(1)
}
function zoom(zm) {
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
</script>
</body>
</html>
For making a simple zoom in and zoom out function.
I this i have a difficulty of the image is zooming indefinitely. i want to fix a position to zoom in and zoom out. The image must not exceed that position while zooming in and zooming out.
I am adding a fiddle to this link
Here you go:
var zoomLevel = 100;
var maxZoomLevel = 105;
var minZoomLevel = 95;
function zoom(zm) {
var img=document.getElementById("pic");
if(zm > 1){
if(zoomLevel < maxZoomLevel){
zoomLevel++;
}else{
return;
}
}else if(zm < 1){
if(zoomLevel > minZoomLevel){
zoomLevel--;
}else{
return;
}
}
wid = img.width;
ht = img.height;
img.style.width = (wid*zm)+"px";
img.style.height = (ht*zm)+"px";
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
You can modify the zoom levels to whatever you want.
I modified the fiddle a bit, since you only need to add javascript to the bottom-left area.