I created a page that show a gallery of images (imagenes.html):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="gallery"></div>
<div id="image"></div>
</body>
</html>
And the javascript code is (slider.js):
$(function() {
function loadSliderImage() {
var i, f, n;
for (i = 1; i < 49; ++i) {
n = ((i < 10) ? "0" : "") + i
f = n + "-120.JPG";
$("#gallery").append("<img src='images/cocinas/thumbs/" + f + "' rel=" + n + "></img>");
}
}
$("#gallery").on('click', 'img', function() {
$("#image").html("<img src='images/cocinas/small/" + $(this).attr("rel") + "-600.JPG' rel=" + $(this).attr("rel") + "></img>");
});
$("#image").on('click', 'img', function(e) {
var url = "images/cocinas/large/" + $(this).attr("rel") + "-980.JPG";
window.open(url, 'KitchenMaster', "width = 980, height = 670, scrollbars = no");
e.preventDefault();
});
loadSliderImage();
});
If I execute the imagenes.html, works fine but if I execute the page index.html that load the imagenes.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/km.js"></script>
<title>Gallery</title>
</head>
<body>
<div id="content"></div>
</body>
</html>
with the javascript code (km.js):
$(function() {
$("#content").load("imagenes.html");
});
the page imagenes.html not works fine (the javascript code slider.js does not run)
Can you help me?
Thanks in advance.
You are adding HTML inside HTML, it wont work, you can't have two head and body section in same HTML. instead in imagenes.html keep only those two divs 'gallery', 'image' and javascript stuff then load it in index.html
Related
I know this question is asked frequently but I can not copy a code. I want the image to change after a time. I think I made a lot of wrong coding errors. Below is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image=document.getElementById("image");
function volgendefoto() {
if (images==0) {
image.src="foto2";
}
if (images==1) {
image.src="foto2";
}
if (images==3) {
image.src="foto1";
}
}
function timer(){
setInterval(volgendefoto, 3000);
}
var images= [], x = -1;
image[0]="foto1.jpg";
image[1]="foto2.jpg";
image[2]="foto3.jpg";
</script>
</body>
</html>
Thanks in advance for help,
Jasper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 3000);
</script>
</body>
</html>
You're not creating your interval, timer is never executed. Here's one that will loop your pictures, assuming that your first image is images is the one preloaded (eg: images[0] === image.src on page load) :
const image=document.getElementById("image");
let images= ["foto1.jpg","foto2.jpg","foto3.jpg"], i = 0;
function volgendefoto() {
i<images.length?i+=1:i=0;
image.src=images[i];
}
setInterval(volgendefoto, 3000);
I'm making a little application with intel xdk I have already passed id values from one page to another. My problem is when I print some links in html I can't pass value from the other page. I'm trying by this way:
<script>
document.write("<a href='#' onclick='sendID('page2.html', '21')'>Link</a>");
</script>
I have passed id value from one page to another but in this case I need to pass from a printed link. Is it possible or there is another way. Thanks!
Also I don't know if there is another way to call a function that receives parameters when the link is printed.
More information. Into my head tag:
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
dir = dir.substring(0,dir.length-1);
location.href=dir;
}
</script>
</head>
And in my body tag:
<body>
Right link<br>
<br>
<br>
<script>
document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>");
</script>
</body>
In the first link the function is called and I get redirected to the other page, but in the printed link is doesn't work.
You have to do something like this
<body>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
return dir.substring(0,dir.length-1);
}
</script>
<script>
document.write("Link");
</script>
</body>
alternatively
you can also do a document.write(<<escape and put the sendID javascript function here>>) following by the document.write that prints the anchor tag.
<!DOCTYPE html>
<html>
<style type="text/css">
</style>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
dir = dir.substring(0,dir.length-1);
location.href=dir;
}
</script>
</head>
<body>
click here
<br>
<br>
<script>
document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>");
</script>
</body>
</body>
</html>
I am trying to replace the content of id='js' with javascript, but this is not working for me. here is the code.
<html>
<head>
<title></title>
<script type="text/javascript">
var ball = 0;
function count_balls(ball){
var count = ball + 1;
return count;
}
document.getElementById('js').innerHTML = count_balls(0);
</script>
</head>
<body>
<p id='js'>Result Here</p>
</body>
</html>
Because the element is not initialized yet, it's not working. You can either move the javascript to the end of the HTML (preferred) as shown below:
<html>
<head>
<title></title>
</head>
<body>
<p id='js'>Result Here</p>
<script type="text/javascript">
var ball = 0;
function count_balls(ball){
var count = ball + 1;
return count;
}
document.getElementById('js').innerHTML = count_balls(0);
</script>
</body>
Or you can use jquery document.ready to achieve the same thing.
I'm trying to create a simple test to modify the content of an iframe from its parent container and to modify the content of the parent container from the iframe. Here's what I have so far:
first.html:
<!doctype html>
<html>
<head>
<title>First</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="first.js"></script>
</head>
<body>
<h1>First</h1>
<iframe src="http://localhost:3000/second.html"></iframe>
</body>
</html>
second.html:
<!doctype html>
<html>
<head>
<title>Second</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>
<body>
<h1>Second</h1>
</body>
</html>
shared.js:
function modifyContent(targetContainerElement, targetSelector, sourceString) {
$(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!");
}
first.js:
$(document).ready(function() {
var iframe = $("iframe");
modifyContent(iframe.contents(), "h1", "First");
});
second.js:
$(document).ready(function() {
if (!top.document)
return;
modifyContent(top.document.body, "h1", "Second");
});
To run the code, I use python -m SimpleHTTPServer 3000 and navigate to localhost:3000/first.html. The first header is modified and says "Modified by Second!" but the second header just says "Second". What am I missing here?
Try changing the h1 tag inside the iframe when it's completely loaded:
$(document).ready(function() {
var iframe = $("iframe");
iframe.load(function ()
{
modifyContent(iframe.contents(), "h1", "First");
});
});
Plus I think you should rewrite modifyContent :
function modifyContent(isJquery, targetContainerElement, targetSelector, sourceString)
{
if ( isJquery )
targetContainerElement.find(targetSelector).html("Modified by " + sourceString + "!");
else
$(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!");
}
just targetContainerElement would work cause you don't really need to wrap it in $() since it's already a jquery object
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="finance.css"/>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript" src="canvastext.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="flotr.js"></script>
<script type="text/javascript" src="HumbleFinance.js"></script>
<script type="text/javascript" src="prettify.js"></script>
<script type="text/javascript">
var priceData=[];
var dateData=[];
var NewdateData = [];
var NewData=[];
var date1 ;
var date2;
function callMe()
{
alert('dddw');
}
function drawChart(data)
{
for (var i = 0; i < data.jobs.length; i++) {
priceData.push([i, data.jobs[i].INCPU]);
dateData.push(data.jobs[i].Dater);
}
HumbleFinance.init('finance', priceData , dateData);
Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
var area = e.memo[0];
xmin = Math.floor(area.x1);
xmax = Math.ceil(area.x2);
date1 = dateData[xmin];
date2 = dateData[xmax];
$('dateRange').update(dateData[xmin] + ' - ' + dateData[xmax]);
alert(date1);
alert(date2);
This two alerts are being called continously .
}
);
}
Event.observe(document, 'dom:loaded', function() {
new Ajax.Request('/HumblFin/Serv',
{
method:'get',
onSuccess: function(transport){
var data = transport.responseText.evalJSON();
drawChart(data);
},
onFailure: function(){ alert('Something went wrong...') }
});
});
</script>
</head>
<body>
<form id="sample">
<div id="finance">
<div id="dateRange">
</div>
</div>
</form>
</body>
</html>
The div dateRange is being updated only once , but the two alerts are being executed continuously
Please help ( Like the div tag , i want my alerts also want once )
It sounds like the custom event 'flotr:select' is being fired continuously.
Looking at the limited code provided i suspect that updating the 'dateRange' element is firing the 'flotr:select' event.
if you have firebug or google chrome, put a break point into the code and examine the call stack.