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.
Related
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 12 months ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script>
function dragstart(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function dragfinish(ev){
ev.preventDefault();
}
function dropstart(ev){
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<p text-style="center"> I started to work on drag and drop</p>
<div style="width:400px;height:380px; border:2px; border-style:solid;" id="div1" ondrop="dropstrat(event)" ondragover="dragfinish(event)"></div>
<div style="height:300></div>
<img id="pic1 src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAqB_HEXzRtgLQiHn71I1-ph0cAhoiBXkMwA&usqp=CAU" width="355" height="355" draggable="true" ondragstart="dragstart(event)">
</body>
I tried this code but have no idea what is wrong with it?
can anyone help me!
I wonder whether the problems roots in my web browser, upper case or lowercase, or I don't know maybe a semicolon can make problem? the thing is I can drag an element in my web page, but I cannot drop in in the div that I defined, I guess all went well except the time I wrote script.
The problem is that your
ondrop="dropstrat(event)"
instead of
ondrop="dropstart(event)"
A lot of typos, missing quote etc
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script>
function dragstart(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function dragfinish(ev) {
ev.preventDefault();
}
function dropstart(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<p text-style="center"> I started to work on drag and drop</p>
<div style="width:400px;height:380px; border:2px; border-style:solid;" id="div1" ondrop="dropstart(event)" ondragover="dragfinish(event)"></div>
<div style="height:300"></div>
<img id=" pic1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAqB_HEXzRtgLQiHn71I1-ph0cAhoiBXkMwA&usqp=CAU" width="355" height="355" draggable="true" ondragstart="dragstart(event)" />
</body>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
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.
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.
Improve this question
Hello,
I downloaded electron and installed it on webstorm in order to learn it. I also installed Jquery using the terminal and including in my scripts but jquery isn't working but it is recognized in my code (I haven't got any error).
My code :
const remote = require('electron').remote;
let window = remote.getCurrentWindow();
function exitGame() {
alert("test");
$('exit').click(() => {
alert("closing");
window.close();
})
}
exitGame();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Test</title>
<!-- RESET CSS -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!-- ADDING CSS -->
<link rel="stylesheet" type="text/css" href="css/main_menu.css">
</head>
<body>
<div id="exit">Leave the game</div>
<!-- ADDING JAVASCRIPT -->
<script>
// You can also require other files to run in this process
require('./renderer.js');
require('./js/jquery.min.js');
require('./js/main_menu.js');
</script>
</body>
</html>
The jQuery alert is working but the click isn't.
Even if I replace the "exit" id by "body" it's not working...
Can you tell me what's wrong ?
Thank you very much, best regards.
exit is an id and not some element. So you need to use # before it.
$('#exit').click(() => {
alert("closing");
window.close();
})
Better way to check jQuer is wokring or not could be:
if(!jQuery)
{
alert("Not working!");
}
Alright, made it working by editing the tag with the code requiere jQuery.
Before Electron's base script tag, I added a tag with my jQuery. It seems that it wasn't loaded
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 6 years ago.
Improve this question
I have problem with assigning value to input box located in other frame when view using MS Edge. No problem though when view using IE. So, kindly advise if there any workaround/solution to this problem.
Here is a sample exhibiting the issue: http://thebeebs.github.io/so-35720658/
Code:
index.html Frameset:
<frameset rows="20%,*> id="run-detail-frame">
<frame name="runDetailMain" id="runDetailMain" src="detail.html" ></frame>
<frame name="runDetailSub" id="runDetailSub" src="custlist.html"></frame>
</frameset>
detail.html:
<html>
<head></head>
<body>
<form name="routeForm">
<input type="text" class="textbox" name="q_cust_no" size="40" maxlength="40">
</form>
</body>
custlist.html:
<html>
<head></head>
<body>
<button id="start">Click to fire function</button>
<script>
document.getElementById("start").onclick = function(){
selectCustomer("Hello")
}
function selectCustomer(cust_cd){
parent.document.frames["runDetailMain"].routeForm.q_cust_no.value = cust_cd;
}
</script>
</body>
Change the code inside of the function selectCustomer to be:
parent.frames["runDetailMain"].routeForm.q_cust_no.value = cust_cd;
In your code you are calling parent.document.frames.
I have a repro that contain working code over on GitHub: https://github.com/thebeebs/so-35720658/tree/master/solution
And a working demo: http://thebeebs.github.io/so-35720658/solution
Calling parent.document.frames seems to work in IE but not in Edge and Chrome. Edge has made lots of changes recently and where behaviour is different from other browsers or standards then the Edge team have chosen to remove the behaviour rather than maintain backwards compatibility with IE.
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