https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_image
this is about changing html content with js, but it is about images. is it possible to do something like this too, so the same but doing it with a new html file so that you can switch pages inside a page?
So the plan is to replace the html underneath (with id="id") by another html file using js.
document.getElementById("id").src = "otherfile.html";
<html>
<body>
hey guys! here is my html page. If you click underneath, content will be changed.
<html id="id">
<body>
here is the text that will change if id="id" will be changed by a different html file
</body>
</html>
</body>
</html>
Of course, I know that this won't work.
But is there a way to archieve this?
Thank you if you are reading and trynna answer my post, I understand if it's a messy and shitty question so shoutout to you.
How about changing the contents of a div instead the whole HTML? Via jQuery.
<div id="dynamic-html">
here is the text that will change if id="id" will be changed by a different html file
</div>
$( "#btnChangeHTML" ).click(function() {
$( "#dynamic-html" ).html("<div class='myclass'>This is the custom HTML</div>");
});
Here's a fiddle:
https://jsfiddle.net/u8xsker2/2/
Read about iframe. Perhaps it is what you want.
Related
I have a page that will show several svg images that will be generated from json data. I created a javascript class that will generate the svg but I don't know how to add it to the dom.
As a simple example:
<html>
<body>
<div class="myrow">
*i want to add the image here*
</div>
</body>
</html
I tried something like:
let x = new mysvgobject(json);
x.img.addTo('.myrow');
but it doesn't work. I think I need to convert that x.img to something the HTML will understand but don't know what that might be. Any help would be appreciated.
Found the answer. Just had to drill down further into the svg produced by the class with:
x.img.node.outerHTML
and drop it on the page.
Assume I have an iframe in my HTML webpage that contains a part of my HTML data. It has an input for a search text box. I want, when I write something inside the input, using onkeypress event, I can show the data in the span.
How can I do this?
I read many different suggestions but none of them worked correctly for me!
Note that pages are at same domain but I don't have access to the iframe page code!
Can anyone help me writing it?
Here is the simplified code of what I need:
$(document).ready(function() {
$('#iframeDoc').ready(function(){
$(this).contents().on('keypress', function(event) {
// add pressed keys to span });
});
$('#iframeDoc').attr("src","JavaScript:'iframe content'");
});
Main page HTML:
<html>
<body>
<iframe id="iframeDoc" src="iframepage.html"></iframe>
</body>
</html>
iframepage html:
<html>
<body>
<input type="text" />
<span id="result"></span>
</body>
</html>
A generic function to capture any keyup events within the iframe, e.g.
$(document.getElementById('frame-id').contentWindow.document).keyup(function(e){
//code here
});
Separately you can access elements in iframes with code like (note that I added an ID to your input element):
$('#iframe').contents().find('#element_id');
So putting them together, could you not do something like:
$(document.getElementById('frame-id').contentWindow.document).keyup(function(e){
if($('#iframe').contents().find('#element_id').is(":focus")){
//code here
}
});
Fiddle of what I think is working example for your code:
https://jsfiddle.net/42j45kmn/7/
I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?
I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});
Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.
I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});
I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.
I have a javascript that I want my users to be able to put on their sites. In this javascript, I want to generate a simple button, that is located exactly where the javascript has been pasted into the site. How can I do this? It would be simple if I could give my <script> tag an id and then just getting the element with the specific ID and appending after it, but I can't.
For example if I have something like this:
<body>
<p>test para</p>
<p>test para</p><p>test para</p><p>test para</p>
<p>test para</p>
<div>test div</div>
<script src="embed.js" type="text/javascript"></script>
<div>last div</div>
</body>
I want my button to be placed right between test div and last div (before or after the script tag, it doesn't matter). Can I do this?
Could you just use after -
$("div:contains('test div')").after('<input type="button"/>');
This would obviously be better if you could give the 'div' an id or a class rather than finding it by the text it contains.
jQuery can find a script tag using -
$("script[src='embed.js']").after('<input type="button"/>')
Demo - http://jsfiddle.net/7GPx7/1
embedding JavaScript something you may want to consider is your visitors may not have jQuery enabled on their sites, so you could bloat the call by loading jQuery or construct your requirement in pure JavaScript.
The embed snippet for your visitors
<script id="eduard_luca" src="http://cdn.example.com/embed.js" type="text/javascript"></script>
embed.js
var element = document.createElement('a');
element.setAttribute('href','http://google.com');
element.innerHTML = 'Click Me';
document.getElementById("eduard_luca").appendChild(element);
I Hope this help you with your project.