I am trying to rotate an image within a div using html and js. I have it working for the most part except for an overlapping issue: the image either covers up everything or overlaps during rotation. I thought I had resolved it with my js formula which sets the div size based on the image size, however it's not working and I'm not sure why. Any ideas?
<html>
<head>
<style>
#photoimg {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#photo {
position: relative;
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br>
<input type="button" value="Show Image" id="btn1"/>
</form>
<div id="photo"></div>
<script>
document.getElementById('btn1').addEventListener('click', function(){
document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image"/>';
//Get larger edge
var largerPhotoDimension = Math.sqrt(Math.pow(document.getElementById('photoimg').offsetWidth , 2) + Math.pow(document.getElementById('photoimg').offsetHeight ,2) );
//Adjust container to fix image roted 90deg
document.getElementById('photo').offsetWidth(largerPhotoDimension);
document.getElementById('photo').offsetHeight(largerPhotoDimension);
});
</script>
<button id="button">rotate</button>
<script>
document.getElementById('button').onclick = function(){
var curr_value = document.getElementById('photoimg').style.transform;
var new_value = "rotate(90deg)";
if(curr_value !== ""){
var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 90;
new_value = "rotate(" + new_rotate + "deg)";
}
document.getElementById('photoimg').style.transform = new_value;
};
</script>
</body>
</html>
Just add these two lines
document.getElementById('photoimg').style.height = document.getElementById("photo").offsetWidth;
document.getElementById('photoimg').style.width = document.getElementById('photo').offsetHeight;
below
document.getElementById('photoimg').style.transform = new_value;
Thanks Guys. I fixed the issue using the following code.
<html>
<head>
<style>
#photoimg {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#photo {
position: relative;
}
</style>
</head>
<form action="#" method="post">
<input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br>
<input type="button" value="Show Image" id="btn1"/>
</form>
<div id="photo"></div>
<script>
document.getElementById('btn1').addEventListener('click', function(){
document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image"/>';
//Get larger edge
var largerPhotoDimension = Math.sqrt(Math.pow(document.getElementById('photoimg').offsetWidth , 2) + Math.pow(document.getElementById('photoimg').offsetHeight ,2) );
var marginVert = (largerPhotoDimension - document.getElementById('photoimg').offsetHeight)/2;
var marginHorz = (largerPhotoDimension - document.getElementById('photoimg').offsetWidth)/2;
//Adjust container to fix image rotated 90deg
document.getElementById('photo').style.marginRight = marginHorz;
document.getElementById('photo').style.marginLeft = marginHorz;
document.getElementById('photo').style.marginBottom = marginVert;
document.getElementById('photo').style.marginTop = marginVert;
});
</script>
<button id="button">rotate</button>
<script>
document.getElementById('button').onclick = function(){
var curr_value = document.getElementById('photoimg').style.transform;
var new_value = "rotate(45deg)";
if(curr_value !== ""){
var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 45;
new_value = "rotate(" + new_rotate + "deg)";
}
document.getElementById('photoimg').style.transform = new_value;
};
</script>
</body>
</html>
Related
Hi there fellow programmers!
I Want to be able to type in to the boxes how much px i want my div to move. But it won't move and I cant see whats wrong with my code. Can someone with fresh eyes spot the problem?
Any help is much appreciated!
Here's the code so far:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title> javascript</title>
<style>
#changeme {
background-color: lightblue;
position: absolute;
}
</style>
<script>
var $Rob = {};
$Rob.moveUpp = 0;
$Rob.moveLeft = 0;
$Rob.elementid = "";
$Rob.move = function(elementid, movex, movey)
{
$Rob.moveUpp = movey;
$Rob.moveLeft = movex;
$Rob.elementid = elementid;
$Rob.movesoft();
}
$Rob.movesoft = function() {
var elem = document.getElementById($Rob.elementid);
if ($Rob.moveUpp > 0) {
elem.style.top = (parseInt(elem.style.top) + 1) +
"px";
$Rob.moveUpp--;
} else if ($Rob.moveUpp < 0) {
elem.style.top = (parseInt(elem.style.top) - 1) +
"px";
$Rob.moveUpp++;
}
if ($Rob.moveUpp != 0) {
setTimeout($Rob.movesoft, 100);
}
}
</script>
</head>
<body>
<h1> Dynamic changes </h1>
<form>
<p>Move right:</p> <input value="0" type="text" id="moveRight" />
<p>Move down: </p> <input value="0" type="text" id="moveDown" />
<input type="button" value="Move" onClick="$Rob.move(document.getElementById('changeme'),parseInt(document.getElementById('moveRight').value),parseInt(document.getElementById('moveDown').value));" />
</form>
<div id="changeme" style="top: 100px;left: 100px;"> Hello </div>
</body>
</html>
All the best
I love Stackoverflow and its members!
cheers
// Mcgayjver
You're doing:
$Rob.move(document.getElementById('changeme'), x, y).
When you should just be doing:
$Rob.move('changeme, x, y)
Because $Rob.move expects an elementID string as a first parameter, not an actual HTMLElement.
Task:
I created a shape with 4 buttons, and need it to move to 4 directions depending on the button clicked (pure JS).
This is what I created - check out the snippet.
Problem:
Left/Right directions work great, but Up/Down do not.
Any idea why? Looks like both directions are identical. :/
Thanks a lot for your help, much appreciated!
var shape = document.getElementById("shape"),
leftBtn = document.getElementById("leftBtn"),
rightBtn = document.getElementById("rightBtn"),
upBtn = document.getElementById("upBtn"),
downBtn = document.getElementById("downBtn");
leftBtn.onclick = function(){
moveLeft();
}
rightBtn.onclick = function(){
moveRight();
}
upBtn.onclick = function(){
moveUp();
}
downBtn.onclick = function(){
moveDown();
}
function moveLeft() {
var val = (parseInt(shape.style.left) || 0) - 50;
shape.style.left = val + "px";
}
function moveUp() {
var val = (parseInt(shape.style.top) || 0) - 50;
shape.style.left = val + "px";
}
function moveRight() {
var val = (parseInt(shape.style.left) || 0) + 50;
shape.style.left = val + "px";
}
function moveDown() {
var val = (parseInt(shape.style.top) || 0) + 50;
shape.style.left = val + "px";
}
body{
background-color: black;
}
#shape{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
<html>
<head>
<title>JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
<div id="shape">
</div>
<div id="buttons">
<button class="button" id="leftBtn" direction="left">left</button>
<button class="button" id="upBtn" direction="up">up</button>
<button class="button" id="downBtn" direction="down">down</button>
<button class="button" id="rightBtn" direction="right">right</button>
</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>
As pointed by #Temani, in functions moveUp and moveDown, changing shape.style.left to shape.style.top will solve the problem.
var shape = document.getElementById("shape"),
leftBtn = document.getElementById("leftBtn"),
rightBtn = document.getElementById("rightBtn"),
upBtn = document.getElementById("upBtn"),
downBtn = document.getElementById("downBtn");
leftBtn.onclick = function(){
moveLeft();
}
rightBtn.onclick = function(){
moveRight();
}
upBtn.onclick = function(){
moveUp();
}
downBtn.onclick = function(){
moveDown();
}
function moveLeft() {
var val = (parseInt(shape.style.left) || 0) - 50;
shape.style.left = val + "px";
}
function moveUp() {
var val = (parseInt(shape.style.top) || 0) - 50;
shape.style.top = val + "px";
}
function moveRight() {
var val = (parseInt(shape.style.left) || 0) + 50;
shape.style.left = val + "px";
}
function moveDown() {
var val = (parseInt(shape.style.top) || 0) + 50;
shape.style.top = val + "px";
}
body{
background-color: black;
}
#shape{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
<html>
<head>
<title>JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
<div id="shape">
</div>
<div id="buttons">
<button class="button" id="leftBtn" direction="left">left</button>
<button class="button" id="upBtn" direction="up">up</button>
<button class="button" id="downBtn" direction="down">down</button>
<button class="button" id="rightBtn" direction="right">right</button>
</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>
I'm really new to working with jQuery and JSON, but I'm doing a simple weather retrieving practice project. I have got it to work except that I have to hit the Get Weather button twice in order for the Fahrenheit/Celsius button to work. I'm sure it is something small that I'm missing.
Here is all the code:
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function gettingJSON(data){
var temp = data.main.temp;
var tempC = (temp - 32) * .5556;
var far = $(".temp").html("The temperature is " + Math.floor(temp) + "F");
var cel = $(".tempC").html("The temperature in C is " + Math.floor(tempC));
cel.hide();
far.show();
$(document).on("click", "#change", function(){
far.toggle();
cel.toggle();
});
}
$(document).ready(function(){
$(document).on("click", "#getIt", function(){
var location = $(".loc").val();
var state = $(".state").val();
var apiKey = "a6253b99c39a496597483fbf2ff308ff";
var url = "http://api.openweathermap.org/data/2.5/weather?q="+location+","+state+"&units=imperial&appid=" + apiKey;
$.getJSON(url, gettingJSON);
});
});
</script>
<style>
body,html{
width: 100%;
height: 100%;
background: honeydew;
}
.temp, .tempC{
font-size: 30px;
}
</style>
</head>
<body>
<div class="toggleMe">
<p class="temp"></p>
<p class="tempC"></p>
</div>
<input type="text" class="loc" placeholder="City">
<input type="text" class="state" placeholder="State">
<button id ="getIt"> Get Weather</button>
<button id="change">C/F</button>
</body>
</html>
I'd appreciate any help available!
Thanks!
You should move the $(document).on("click", "#change", out of the gettingJSON function, otherwise - every time you call the gettingJSON function - you attache a new event listener for the click event on the #change element.
Here is your updated code:
var far = $(".temp");
var cel = $(".tempC")
function gettingJSON(data){
var temp = data.main.temp;
var tempC = (temp - 32) * .5556;
far.html("The temperature is " + Math.floor(temp) + "F");
cel.html("The temperature in C is " + Math.floor(tempC));
cel.hide();
far.show();
}
$(document).ready(function(){
$(document).on("click", "#change", function(){
far.toggle();
cel.toggle();
});
$(document).on("click", "#getIt", function(){
var location = $(".loc").val();
var state = $(".state").val();
var apiKey = "a6253b99c39a496597483fbf2ff308ff";
var url = "http://api.openweathermap.org/data/2.5/weather?q="+location+","+state+"&units=imperial&appid=" + apiKey;
$.getJSON(url, gettingJSON);
});
});
body,html{
width: 100%;
height: 100%;
background: honeydew;
}
.temp, .tempC{
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="toggleMe">
<p class="temp"></p>
<p class="tempC"></p>
</div>
<input type="text" class="loc" placeholder="City">
<input type="text" class="state" placeholder="State">
<button id ="getIt"> Get Weather</button>
<button id="change">C/F</button>
Dekel's answer is the way to go! Additionally if you want to make it a little bit nicer you could hide the change button until the values are actually available.
To reach that set the button to be hidden by the loading of the page via CSS:
#change {
display:none;
}
and in your gettingJSON() you can then call
$('#change').show();
for displaying the button.
I have a simple script which works as a simple html gallery. However, I need to add some transition effects to my gallery, something like fade in, fade out, or the effect of something similar to the subtitles at the end of every movie (you know what I mean).
How can I solve this? I would like to make it using only JS, HTML, CSS, without external plugins. Is it possible? For now on, I have only something like this below:
<head>
<title>Test</title>
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
i+=3;
},5000);
</script>
</head>
<body>
<div align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </br>
</div>
</body>
I just created a JQuery function and added it to your script. Now when you click on that button it will do as it says. It is just as an example how to do that
<html>
<head>
<title>Test</title>
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
i+=3;
},5000);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".btn1").click(function(){
$("#link1").fadeOut()
});
$(".btn2").click(function(){
$("#link1").fadeIn();
});
});
</script>
</head>
<body>
</script>
</head>
<body>
<div align="center">
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </br>
</div>
</body>
</html>
You can definitely achieve some effects with CSS. But not all (like jQuery-ui's blind)
most effects consist of changing:
opacity: [0-1]
display: relative; left: [X]px; top: [Y]px or transform: translate([X]px,[Y]px)
overflow: hidden
and an animation:
either CSS:
#img {
animation: fade-in 2s infinite;
}
#keyframe fade-in {
from {
left: -200px
}
to {
left: 0
}
}`
or JavaScript:
var img = document.getElementById('img');
for(i = 1; i <= 100; i++){
(function(step) {
setTimeout(function() {
img.style.transform = "translate(-"+(200-step*2)+"px, 0)";
}, step * 20);
})(i);
}
to achieve something like blind, you must move an image-container <div> left, while moving the image right at the same speed.
Here's a simplified blind effect example
https://jsfiddle.net/warkentien2/Lh10phuv/5/
Here I've implemented 8 pure JavaScript effects (including blind, with instructions)
- fade in
http://codepen.io/warkentien2/pen/pboVXR
- fade out
http://codepen.io/warkentien2/pen/EyxpVq
You can try this one. I have not changed your code at all.
HTML
<div align="center">
<a href="http://www.example1.com" id="link1">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' >
</a>
</br>
</br>
<a href="http://www.example2.com" id="link2">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' >
</a>
<br>
<br>
<a href="http://www.example3.com" id="link3">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3'>
</a>
<br>
</div>
Css
<style>
.animate{transition:all 1s ease; opacity:0;}
</style>
Js
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
document.getElementById('link1').style.opacity = 0;
setTimeout(function(){
document.getElementById('link1').setAttribute("class", "animate");
document.getElementsByClassName('animate')[0].style.opacity = 1;
setTimeout(function(){document.getElementById('link1').removeAttribute("class", "animate")},500)
},500)
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
document.getElementById('link2').style.opacity = 0;
setTimeout(function(){
document.getElementById('link2').setAttribute("class", "animate");
document.getElementsByClassName('animate')[1].style.opacity = 1;
setTimeout(function(){document.getElementById('link2').removeAttribute("class", "animate")},500)
},500)
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
document.getElementById('link3').style.opacity = 0;
setTimeout(function(){
document.getElementById('link3').setAttribute("class", "animate");
document.getElementsByClassName('animate')[2].style.opacity = 1;
setTimeout(function(){document.getElementById('link3').removeAttribute("class", "animate")},500)
},500)
i+=3;
},5000);
</script>
Check live example here - https://jsfiddle.net/Rit_Design/9mkvffnk/1/
Remember the code can be much more smarter.
with the great help of a few guys on here I have managed to create a page that creates dynamic resizable/draggable textareas on the fly. I am now trying to intregrate nicedit into these textareas. Its working to a point. On double click the textarea becomes a nicedit area but unfortunately the draggable event is overriding the nicedit even and so am unable to edit the textarea.
my javascript is limited so I was hoping someone could point out the error of my ways
thanks in advance.
here is the jsfiddle link http://jsfiddle.net/JVhpJ/9/
heres the code
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src = "http://js.nicedit.com/nicEdit-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
window.onload = function () {
var body = document.body;
// The magic
body.addEventListener ("dblclick", function (event) {
var target = event.target;
if (target.nodeName === "TEXTAREA") {
var area = new nicEditor ({fullPanel : true}).panelInstance (target);
area.addEvent ("blur", function () {
this.removeInstance (target);
});
}
}, false);
}
var i=0;
var p=25;
function creatediv1(id)
{
id=id+i;
var xp=xp+i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('iterate',i);
newdiv.style.position = "relative";
newdiv.style.top = p;
newdiv.style.left = p;
newdiv.style.cursor='move';
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i +"]' class='textarea1' width='300' style='position:absolute; top:0px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>";
document.getElementById("frmMain").appendChild(newdiv);
$(function()
{
$("#"+i).resizable(
{
stop: function(event, ui)
{
var width = ui.size.width;
var height = ui.size.height;
// alert("width="+width+"height="+height);
ValProportions(width,height,ui.element.context.id);
}
});
$( "#"+id ).draggable(
{
stop: function(event, ui)
{
Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
// alert("left="+Stoppos.left+"top="+Stoppos.top);
ValPostion(Stoppos.left,Stoppos.top,$(this).attr('iterate'));
}
});
$("#"+i).draggable({handle:"#handle"});
});
function ValProportions(defaultwidth, defaultheight,id) {
$('#width'+id).val(defaultwidth);
$('#height'+id).val(defaultheight);
}
function ValPostion(defaultleft,defaulttop,id) {
$('#left'+id).val(defaultleft);
$('#top'+id).val(defaulttop);
}
i++;
p=p+25;
}
</script>
<style>
textarea {
height: 100px;
margin-bottom: 20px;
width: 1000px;
}
</style>
</head>
<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="test.php" method="post">
<input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />
<input type="submit" value="Submit" >
</form>
</body>
I managed to fix this issue by use stoppropagation() on the mousedown event of the div, this allowed me to then edit the text without the draggable overriding the edit functions