Spent hours on this and don't understand that behavior. Any advice would be appreciated.
If you look below you load this code you will see the toolbar for sharing with add to any plugin that is what the page.js is including control for.
You can see I have commented out a foo bar at the bottom. That works just fine after load. I hit the button and the foo turns into a bar. When I load the entire div though I am trying to change the text ultimately by what I put in the insert form. An odd thing happens the entire add to any button dissapears. Any idea why? Is the page reloading and cannot grab the .js file or something bizarre like that?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
<script>
function second(){
//document.getElementById('hello').innerHTML = 'bar';
document.getElementById('hello').innerHTML = '<div class=\"a2a_kit a2a_kit_size_32 a2a_default_style\"> <a class=\"a2a_dd\" href=\"https://www.addtoany.com/share\"></a></div>';
};
</script>
</head>
<body>
<form>
<input type="text" name="foo" id="foo"></input>
<input type="button" onClick="second();first();"></input>
</form>
<div id="hello"></div>
</body>
<script type="text/javascript">
document.getElementById('hello').innerHTML = '<div class=\"a2a_kit a2a_kit_size_32 a2a_default_style\"><a class=\"a2a_dd\" href=\"https://www.addtoany.com/share\"></a></div>';
//document.getElementById('hello').innerHTML = 'foo';
</script>
</html>
Related
New to HTML and javascript. I'm trying to update a number that changes in another program without having to refresh the entire webpage using javascript. My home html page is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script type="text/javascript" src="Scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
Counter
<div id="counter"><h2>0</h2></div>
<button>Update</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#counter").load("value.html #count");
})
});
</script>
</html>
When I press the button, nothing changes. value.html contains:
<div id="count">:="DB1".counter:</div>
which is just an int value that counts up every second. If I load up this page, it shows the correct int value. But for some reason, the id="counter" never updates on the main html page. I've tried on chrome and internet explorer with no luck. Any help would be greatly appreciated.
Hello I want to autofill data in iframe on cross domain.I have a code but it's not working. please help me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function autoFill() {
var f=fm.document.forms[0];
f.form-control.value='Zanne';
f.submit();
}
</script>
</head>
<body>
<div>
<button type="button" onclick="autoFill();">autoFill</button>
</div>
<iframe name="fm" id="fm" src="url.com" width="100%" height="100%"></iframe>
</body>
</html>
the input filled:
Have any way to do this.
This is going to be a CORS violation.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
There are some workarounds to this. You have to use the postMessage API. Your parent window would need to send JavaScript events to the iFrame, which would need to have an event listener and react to it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I'm using some ready HTML for color picker.
When I add it in HTML, It works.
But when I add from javascript (after clicking button) as innerHTML It doesn't works.
As I saw, when HTML is starting some listeners (or maybe other things) are adding automathicaly.
What Can I do?
code JSP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<%--color picker --%>
<script type="text/javascript" src="jscolor.js"></script>
<script type="text/javascript">
function add() {
document.body.innerHTML += "<input id=\"zaz1\" size=\"5\" class=\"color\" value=\"000000\"> ";
}
</script>
</head>
<body>
<input id="zaz" size="5" class="color" value="000000">
<p onclick="add()">add</p>
</body>
</html>
Okay i understand why this doesn't work.
You need the images that was contained in the jscolor zip.
So put jscolor.js, your htlm files, and all given images in the same folder.
When you have that kind of error look at your console in the developper tools of your browser, my browser specifically told me what files were missing.
Hi I'm trying to use jQuery to load an html document into an existing html document.
I've tried using the code below, but the text doesn't load.
I'm not sure why. Could someone point me towards what I'm doing wrong please?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">$("#test").load("test.txt")</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
Try on DOM ready like
<script type="text/javascript">
$(document).ready(function(){
$("#test").load("test.txt");
});
</script>
And you also forgotted ending ;.You can also try like
$(function(){
$("#test").load("test.txt");
});
You need to add it in dom ready
jQuery(function($){
$("#test").load("test.txt")
})
The problem was when your script is executed the element with id test was not yes added to the dom so the selector $("#test") would return zero elements
On button click, I want to hide the div. How do i do it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" type="text/javascript">
function button()
{
var a = document.getElementById('approve');
document.getElementById('p').innerHTML= 'Fred Flinstone';
}
</script>
<body>
<div id="hide">
<form>
<p id="p">heya</p>
<input type="button" id='approve' value="approve" onclick="button()"/>
<input type="button" id="reject" value="reject"/>
</form>
</div>
</body>
</html>
SORRY FOR ASKING AGAIN...BUT COULDN'T FIND A BETTER METHOD. THANKS
document.getElementById('hide').style.display = 'none';
This sets the CSS code display: none; on the div, which causes the browser's rendering engine to act like the element is not even on the page (e.g. it does not occupy any space). See the CSS standard for the official description.
You can just use Jquery to make things super easy:
$("#approve").click( function() {
$("div#hide").hide() //you can just use $("#hide") if you want
});
You can show the element whenever you want with $("div#hide").show(). This will save you from having to deal with browser inconsistencies and other crap so you can just focus on producing great readable code. :)
If you use jQuery:
$(document).ready(function() {
$('#approve').click(function() {
$('#hide').hide();
});
});