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.
Related
I'm writing some codes in P5JS. And I want to add multiple JS files to my HTML page. But when I do that, only the last one is displayed on the page. How can I show all of them?! And how can I style each one? For example I want to show one of them on top of the page, then have some HTML files or texts or whatever, then another JS file below them. How can style them using CSS? I have already linked the CSS file to the HTML page.
The site didn't allow me to paste the code the way I wanted so I uploaded the picture here
Thanks..
You can put all of the js files either in the head section:
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
or you can put it at the bottom of the file:
<html>
<head>
</head>
<body>
</body>
<script src=script1.js></script>
<script src=script2.js></script>
</html>
If you're going to add multiple p5js sketches to one HTML document you could create p5 instances to keep all variables out of the global scope of your page.
Example if the following was saved as 'sketch.js':
var sketch = function( p ) {
var x = 100;
var y = 100;
p.setup = function() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
p.fill(255);
p.rect(x,y,50,50);
};
};
var myp5 = new p5(sketch);
and then you would import the sketch and use it in a div in your HTML.
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</style>
</head>
<body>
<div id="sketch"></div>
</body>
</html>
You would then repeat for other sketches. You can even have multiple p5js sketches in one js file.
With the code for your sketches and html this would probably be fairly quick to resolve.
I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);
I found this script, that i want to implement into my webside.
http://codepen.io/johnmotyljr/pen/qhvue
It does exactly what i want it to do, BUT! I don't know how to put into my webside?! Where to put the JS and how?
The content that i need to change is stored in an html-file, but how do i get that content into my div with this script?
Hope you can understand what i'm asking for and sorry for my limited/bad english!
View the source code of your link, find the <iframe> tab, and the demo html is inside.
You can load that content via AJAX. So, building on the CodePen-example you gave, you could do something like this:
$('#kittens').click(function() {
$('div').load('kittens.html');
});
Where kittens.html is the URL of the html file you want to load.
Update:
Now that you have posted a link to your website, I notice a few more things:
You haven't got jQuery included. Between you <head></head> tags you
should include <script type="text/javascript"
src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Probably, you want the Resultater | Billeder | Video | Afkom links to load different content, right? Then, you should use
something like this:
In between <script type="text/javascript"></script>:
$('.hesteundertop a[href="#resul"]').click(function(e) {
$('.hestetekst').load('... Resultater URL ...');
e.preventDefault();
});
try this type of method.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
var kittens = "Kittens";
var puppies = "puppies";
var aardvark = "aardvark";
$('#kittens').click(function(){
$('div').html(kittens);
//$('div').load('kittens.html');
});
})
</script>
<body>
<ul>
<li id="kittens"></li>
<li id="puppies"></li>
<li id="aardvark"></li>
</ul>
<div>Click on the picture for description.</div>
</body>
</html>
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.
How can I write client javascript to get an image by its source ?
An image that is on the page?
You can do this with jQuery:
<body>
<!-- your content including the image -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var myimg = $('img[src="/some/path/to/img.jpg"]');
});
</script>
</body>
This uses the tag-selector(docs) along with the attribute-equals-selector(docs) to get img elements where the src matches the source you want.
Use JQuery.
$("img[src='imageurl.jpg']")