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>
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 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 2 years ago.
Improve this question
I'm new to js and I was working on something where this thing makes a bunch of new tabs, but when the code is run, the alert pops up when each tab is opened and on each individual tab.
here's the code
<script>
alert('something')
setInterval(function() {
var w = window.open();
w.document.write(document.documentElement.outerHTML||document.document
Element.innerHTML);
}, );
</script>
pls be nice I'm new
What about this one
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new browser window.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("Hi there");
window.open("https://www.w3schools.com");
}
</script>
</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 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>
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 7 years ago.
Improve this question
So I am currently try to change a css property of an element using jquery so that it will change once the page has loaded. For some reason though when trying to add either a css style or change its current property nothing happens?
What I am trying to achieve is the twitter feed at the bottom of this website:
http://www.footballkit.co.uk/
Here is my code:
<<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
<script src="jquery-1.12.0.min.js"></script>
</head>
//Main Code Below:
<body>
<div id="dr">
<h1>Hello World</h1>
</div>
<script>
$(document).ready(function(){
$("#dr").css("top","400px");
}
</script>
</body>
</html>
You have a syntax error, missing ); at the end, always check your developer's console to check for javascript errors (f12 usually)
$(document).ready(function(){
$("#dr").css("top","400px");
}); //Syntax error missing );
You have syntax error. That is not something important.
I made a demo for you on jsfiddle
$(document).ready(function(){
$("#dr").css("top","400px");
});
And if top is not working, you have to check your style. Element with static position can't get position (top, left, right, bottom)
DEMO with style
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 7 years ago.
Improve this question
I want to change the image of a button on clicking it. Below is my code, but it is not working. Please help me on that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image</title>
</head>
<body>
<h1>My Image</h1>
<p>
<img src="C:\Users\Hrushikesh\Pictures\iCloud Photos\Downloads\2015\IMG_3695.jpg" alt="HTML5 Icon" style="width:256px;height:256px;">
</p>
<button onclick="picturechange()"><img src="C:\Users\Hrushikesh\Desktop\star2.jpg" alt="HTML5 Icon" style="width:16px;height:16px;" id="pic1"></button>
<script>
function picturechange()
{
document.getElementById("pic1").src="C:\Users\Hrushikesh\Desktop\star1.jpg";
}
</script>
</body>
</html>
This code should work perfectly, change it to your liking :-]
window.picturechange = function() {
document.getElementById("pic").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/120px-Example.svg.png";
};
<p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/116px-Example.jpg" alt="HTML5 Icon" style="width:256px;height:256px;" id="pic">
</p>
<button onclick="picturechange()">Click Me</button>
Your image may not be showing up due to the following reasons:
You need to add file:/// prefix before loading any of local resources with full paths.
You may be getting an error 'Not allowed to load local resource' in your browser if you are running your webpage through a Web Server.