Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have this code:
<img src="http://www.w3schools.com/html/html5.gif" id="imgid">
<h1 id='header'>Example</h1>
<!--This is an example html doc not the real thing!-->
<button onclick="spin(document.getElementById('header'));spin(document.getElementById('imgid'));">Spin!</button>
<script>
function spin(object) {
setInterval(function() {
object.style.transform += "rotate(10deg)";
}, 1);
}
</script>
How do I make the text spin correctly? If you could explain how it works then that would be great. If you need any references of my sources then:
SetInterval
style.transform
By "correctly" I mean spinning centered. (Not all over the page).
Thanks!
Try this. The main problem was that the width extended all the way across the page which messed up the rotation, so adding in display:inline-block made the width match up with the div's contents.
<style>
#imgid{display:inline-block;}
#myDIV{display:inline-block;}
</style>
<html>
<head>
<title>Example</title>
</head>
<body>
<div><img src="http://www.w3schools.com/html/html5.gif" id="imgid"></div>
<div><h1 id='myDIV'>Example</h1></div>
<div><button onclick="spin(document.getElementById('imgid'));spin(document.getElementById('myDIV'));">xdfdsf</button></div>
</body>
</html>
<script>
function spin(object)
{
setInterval(function()
{
object.style.transform += "rotate(10deg)";
}, 1);
}
</script>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 10 months ago.
Improve this question
I am trying to add a script to my HTML file that changes the opacity of a div when a button is clicked.
This is the HTML file
This is the CSS file
This is my function
Essentially what I'm trying to achieve is the div that is currently set to 0 opacity, will be change to 1 opacity on the click of the button. Currently this is not working, and I am relatively new to incorporating JS in and HTML file. Any tips would be greatly appreciated.
Here's a simple example using JavaScript embedded in HTML. Make sure you're using an event listener that listens for the click of your button.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1 style="opacity: 0;">About Me</h1>
<button>
Show
</button>
<script>
var button = document.querySelector('button');
button.addEventListener('click', function() {
var h1 = document.querySelector('h1');
h1.style.opacity = 1;
});
</script>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to create a hashtag feature in my project but I don't know how to. I've tried many times but all to no avail.
Like for example:
I love #coding.
to be transformed to:
I love #coding using JQuery/JavaScript.
Any ideas?
#Chirs try this in your webpage
function FormatText()
{
var txt =document.getElementById("mytext").innerHTML;
var matches = txt.match(/#\w+/g);
if(matches==null)
return;
for(i=0;i<matches.length;i++)
{
txt=txt.replace(matches[i],"<b>"+ matches[i] +"</b>")
}
document.getElementById("mytext").innerHTML=txt;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body onload="FormatText();">
<div id="mytext">
I love #coding using JQuery/JavaScript on #WebPages.
</div>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm working on a Google site as I though it was easier...But I'm having some troubles with it. I'd like to create a button that expand and collapsea block of text. I've tried some different options but I didn't get it. Does anyone know how to do it?
Thanks a lot
EDIT: Something like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle
For example, if you can use JavaScript, you can set the style to "display:none;" or "display:block;" by clicking a button.
<div id="ThisTextWillBeHidden">This text needs to be hidden</div>
<button type="button"
onclick="document.getElementById("ThisTextWillBeHidden").style.display='none';">
Click me to hide!
</button>
<button type="button"
onclick="document.getElementById("ThisTextWillBeHidden").style.display='block';">
Click me to show!
</button>
I assume Google Sites does not support scripts, so you will need to save this code somewhere else, like on your hosting or in a file storage service, and call it like this:
<iframe src="location of the file containing your code.html"></iframe>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I want to start a timer at first keypress (on the ) and it should count down till 0. The catch is that once it is started it should not stop until it has reached 0 nor it should be affected by subsequent key presses.
Thank you! :)
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<h1 align="center"></h1>
<script>
var time=10;
var timer;
$('body').keypress(function() {
timer=setInterval(function(){
if(time<=0)
clearInterval(timer);
$('h1').html(time);
time--;
},1000)
$(this).unbind('keypress');
});
</script>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I'm pretty sure logic is fine, but for some other reason, when I click on the image, it doesn't change. All of the images are in the same directory, and I could load lightOn.png image, but can not change it.
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage() {
if (document.getElementById("myimg").src == "lightOn.png") {
document.getElementById("myimg").src = "lightOff.png";
}
else {
document.getElementById("myimg").src = "lightOn.png";
}
}
</script>
<img id="myimg" onclick="changeImage()" src="lightOn.png">
<p>Turn on/off the light</p>
</body>
</html>
The only problem that seems to exist is that the img src is not correct, make sure path to your image is correct. I changed the path and it works http://jsfiddle.net/Y4yCb/
<body>
<script>
function changeImage() {
if (document.getElementById("myimg").src == "http://www.freeimageslive.com/galleries/light/pics/light00002g.jpg") {
document.getElementById("myimg").src = "http://solar.calfinder.com/assets/blog/images/energy-light-off.jpg";
}
else {
document.getElementById("myimg").src = "http://www.freeimageslive.com/galleries/light/pics/light00002g.jpg";
}
}
</script>
<img id="myimg" onclick="changeImage()" src="http://www.freeimageslive.com/galleries/light/pics/light00002g.jpg">
<p>Turn on/off the light</p>
</body>