how to display and image using external jquery in my html file - javascript

i am new to jquery, can anyone tell me how to display and image using external jquery in my html file.
i want my html to be clean and load the image where the image path is mentioned in the external jquery file.
my jquery file will be like this testjquery.js
// url to load the image (which i dont know ,whats the code for it)
and in my html file.
<html>
<head>
<script type="text/javascript">
(function() {
var test = document.createElement('script');
test.type = 'text/javascript';
test.async = true;
test.src = 'testquery.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(test, s);
test.onload=function(){
// function to load the external image
}
})();
</script>
</head>
<body>
</body>
</html>
Thanks in advance!

You can simply use:
HTML
<div id="divWhereYouWantAddImage"></div>
JQUERY
$('#divWhereYouWantAddImage').append("<img src='img.jpg' />");
You can read more about jquery .append() function here.

i think your question is wrong
so test this
first sure Loaded Jquery script file
and Set html for div Element
<div id="imageContainer"></div>
<script>
$('#imageContainer').html('<img src="/images/test.jpg" />');
</script>

Below is the file content in ExternalJSFile.js
imageUrl = 'your/img/path.png';
Your html file
<html>
</html>
<script src="ExternalJSFile.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
alert(imageUrl);
});
</script>

I dont know exactly what you mean... but i guess you mean obtrusive jQuery. So your html stays clean. The javascript you can put it in an external file or at the bottom of your page. If you put it in an external file you can delete the script tags.
<html>
<head>
<script src="style.js" type="text/javascript"></script>
</head>
<body>
<div id="image"></div>
</body>
</html>
and in style.js (you can put it in the same directory)
$(document).ready(function(){
imagePath = 'your_image.png';
$('#image').html("<img src='" + imagePath + "' />")
});
You can use html or append. The html function clears the whole image div and replaces it with the image. The append, appends it to the div so you can add another one later. The (document).ready function will run after the whole document is loaded.

Related

Dynamically reading text file into page

I'm trying to load a .txt file into my simple html page. I'm very noobish and all the code i got is stolen from stackoverflow.
The text file is in the same folder as the html file and contains some text that I'd like to have shown in a div and not just loaded in at the start but dynamically updated (in a 1 sec interval).
The Page that results from the code is just empty.
I am using Chrome 73.
I only use the html file and the txt file. No other files are in the folder.
<html>
<head>
<script type="text/javascript">
setInterval(read,1000);
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I don't know what's wrong with this code. Am I missing libraries? If you came up with a completely new code that would be appreciated as well.
Yes, you are missing the jQuery library. Try it like this and let me know:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
setTimeout(function(){read() },1000);
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Reference:
https://stackoverflow.com/a/24320973/1447509
See note in italics at very bottom of this article
what about a simple jQuery Load ?
$("#container").load("file.txt");
http://api.jquery.com/load/

How to check if content is loaded in HTML embed tag?

I am using embed tag to load pdf. It's a legacy application so can't use other approach. I want to run some javascript function when pdf loads completely in embed tag. How can I do this?
I have tried using onload event on embed tag but it doesn't work.
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
//This function should be called when pdf loads.
function ContentLoaded()
{
//Some code which should execute only after PDF loads on browser
}
</script>
</head>
<body>
<embed id="content" src="myfile.pdf"/>
</body>
</html>
I suggest you to place <script> tag just before the closing body tag (</body>). This way, JS code will run after the HTML content loaded.
If you place the code below before the closing head tag (</head>), it shows you error in developer's console. But if you place it before </body> tag, it works just fine.
<script type="text/javascript">
var pdf = document.getElementById('content');
console.log('pdf:', pdf);
var w = pdf.getAttribute('width');
console.log('pdf width is exactly:', w, 'pixels');
</script>

How to make an external js file write to the html <script> tags? Via plain JS or jQuery

I'm trying to write a function in an external javascript file linked to the index.html, which when called writes; for example between the <script></script> tags in the index.html file on line 18. Is it possible to do this with plain Javascript or jQuery? If so, how could this be done?
EDIT: I want to only have one script tag in my index.html.
function writeToScriptTags() {
// this function should write alert("Hello") to the <script></script> tags in the index.html file.
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" charset="utf-8"></script>
<title>CodeDragon</title>
<link rel="stylesheet" href="/css/master.css">
</head>
<body>
<div id="Dragon"></div>
<input type="text" name="_input" value="" id="_input">
<script src="script.js" charset="utf-8"></script>
<script>
// Javascript file should write alert("Hello") here
</script>
</body>
</html>
If the script tag already exists then you can set it's text/textContent/innerText value to whatever code you want to execute. But the script would need to have been empty beforehand, ie no text not even whitespace, otherwise it would not run.
//use an appropriate css selector to find the correct script
//this just selects the first script it finds
var s = document.querySelector('script');
s.text = 'alert("Here")';
It would probably be better to just create a new script element and add the code to that as then you would not need to worry about wither or not the script tag had already previously been used.
var s = document.createElement('script');
document.head.appendChild(s);
s.text = 'alert("Here")';
And of course if the script is set with a src attribute setting the text of the script will not run any code as it is ignored for externally linked script elements.
You can try this way
Say this is you external.js file
function writeToScriptTags() {
// this function should write alert("Hello") to the <script></script> tags in the index.html file.
}
You can call functions of external.js file between the tags in the index.html file this way.
$.getscript("path/to/jsFile", function() {
writeToScriptTags()
});
Hope you can get an idea.
jQuery solution:
$('script').html('alert(\'Hello\')');
Plain JS solution:
document.querySelector('html').innerHTML = alert('Hello');
Don't add it to the code as a text, beceause it'd be rendered as a plain text and it wouldn't have any functionality.

node-webkit: doesn't show active content?

I have a small nw.js app that alters the div section of the index.html page:
var myDiv = document.getElementById("outputSection");
var myImg = document.createElement("img");
myDiv.appendChild(myImg);
myImg.src = 'http://127.0.0.2:8080/prime_almost_full_00007.0001.png';
myImg.width = '256';
myImg.height = '256';
myImg.class = 'reel';
myImg.id = 'image';
myImg.setAttribute("data-images", 'http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0250');
The HTML code I'm trying to mimic in my static example, which works, is:
<img src='http://127.0.0.2:8080/prime_almost_full_00007.0001.png'width='256' height='256' class='reel' id='image' data-images='http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0021'>
I'm using the Jquery-reels library. At the top of my page, I include it thusly:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://code.vostrel.cz/jquery.reel.js' type='text/javascript'></script>
For some reason, while the image shows up with the first code snipped, it isn't interactive. My static page, which works is like this:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://code.vostrel.cz/jquery.reel.js' type='text/javascript'></script>
<head>
<title>Hi there</title>
</head>
<body>
<div>
<img src='http://127.0.0.2:8080/prime_almost_full_00007.0001.png'
width='256'
height='256'
class='reel'
id='image'
data-images='http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0021'>
</div>
</body>
</html>
It's not clear to me why this is happening. Is it something about node-webkit?
EDIT: re-scanning doesn't seem to work:
myDiv.innerHTML = "<img src='http://127.0.0.2:8080/prime_almost_full_00007.0001.png' width='256' height='256' class='reel' id='image' data-images='http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0021'>";
$.reel.scan();
When the page loads, the reel plugin automatically looks for elements with the attribute class="reel". See the annotated source for more info about this.
According to that documentation, since you are adding an element to the page after the page loads, you may need to call the $.reel.scan() function at the end of your javascript.

Get page url from embeded JS script

I have an HTML page that calls a JS file. Within that JS file I need to know what the URL of the HTML page is.
So far I have this.
HTML -
<!doctype html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Within my main.js I have the following:
$(function() {
$ = jQuery;
window.remoteUser = "%globals_server_REMOTE_USER%";
window.targetURL = "%globals_asset_url%";
console.log(document.referrer);
});
I thought document.referrer would return the URL of the html page. However it returns a blank line in the console.
Any help would be great. Thanks
Try this,
console.log(document.URL);
OR
console.log(window.location.href);
since i read that it doesn't work in some versions of firefox
location.href used to get url the of page.
jQuery(document).ready(function(){
jQuery("#url1").html(location.href);
});
DEMO

Categories

Resources