I have a problem. I have two .html files.
<!DOCTYPE html>
<html><head>...</head>
<body>
<ul><li id="home"><a>Home</a></li></ul>
<div class="content"></div>
<script type="text/javascript" src="Javascripts/navigation.js"></script>
</body>
</html>
and
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded">
</div>
<div id="textPanel" style="background:blue;"></div>
In my navigation.js I load the second .html file into the "content"-div of the first .html:
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
$('#textPanel').height( $('#imgPanel').height() );
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
The loading works! My question is now:
How can I get the id of the div's of the second .html I loaded into the first one?
The var = $("#textPanel"); is null.
Since the content gets loaded asynchronously, you might want to change your code like this, to execute $('#textPanel').height() when it is available:
function home(){
content.load("home.html", function(){
$('#textPanel').height( $('#imgPanel').height() );
});
}
From this specification of callbacks
EDIT
Alternative:
HTML of loaded content
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded" onload="setHeight()">
</div>
<div id="textPanel" style="background:blue;"></div>
JavaScript
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
function setHeight(){
$('#textPanel').height($('#imgPanel').height());
}
Related
Im just learninng javascript, and wanted to play around, but looks like the script doesnt connect to html page. I dont understand why.
thats in html:
<body>
<main>
<div class="tank">
<img id="tank2" src="tank.gif" alt="Tank Girl" style="cursor:pointer" onclick="hiGirl()>
</div>
</main>
<script type="text/javascript" src="script.js"></script>
</body>
And thats in script.js:
document.addEventListener("DOMContentLoaded", function (event) {
window.alert('Hi, Im tank Girl')
})
document.getElementById('tank2').onclick = function hiGirl () {
var userName = window.prompt('What is your name?', 'Enter your name here.')
if (userName) {
window.alert(`Szia Mia ${userName} !`)
} else { window.alert('Hello Stranger!') }
}
You have an syntax error on onclick in img tag, correct it:
<img id="tank2" src="tank.gif" alt="Tank Girl" style="cursor:pointer" onclick="hiGirl()">
Or just basically remove it as below because you added a onclick handler in script.js, so no need to use it on img tag:
<img id="tank2" src="tank.gif" alt="Tank Girl" style="cursor:pointer">
I have 2 html files. I want to take the innerHTML of an element of the 1st HTML file and display it in the 2nd HTML.
This is the 1.html file
<h1 id="data">DATA</h1>
<button onclick="go()">GO</button>
This is the 2.html file
<h1 id="display"></h1>
This is what I tried in js but didn't work
function go() {
let data = document.getElementById("data").innerHTML;
document.getElementById("display").innerHTML = data;
window.open("2.html")
}
Please someone help
Here is code which may help you.
In 1.html:
<h1 id="data">Main</h1>
<a href="2.html">
<button onclick="go()">GO</button>
</a>
<script src="action.js"></script>
In 2.html:
<h1 id="display"></h1>
<script src="action.js"></script>
<script>disp();</script>
In action.js:
function go() {
var data = document.getElementById("data").innerHTML;
localStorage.setItem("data ", data );
}
function disp() {
document.getElementById("display").innerHTML = localStorage.getItem("data");
}
I'm trying to make a slideshow of HTML pages outputting to a screen 24/7. What I have works, but different slides need different intervals. How can I achieve this?
The output is fullscreen with a fixed footer which displays logo, some messages and the time.
jQuery
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = ['welcome','movie']; // Which slides
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 1; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index === slides.length) { // If at end
index = 0; // Start again
}
div.attr('src', folder + '/' + slides[index] + '.' + extension); // Load next one
index++;
}
setInterval(function () {
loop();
}, time);
});
HTML
<iframe id="content" src="slides/welcome.html" width="100%" height="100%" frameborder="0"></iframe>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>
Using setTimeout and buttons to start and stop the loop.
http://jsfiddle.net/nirmaljpatel/75tmnmbq/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>
<div id="content"></div>
</body>
<script>
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = [{"ImageName":"Welcome", "Time":200},{"ImageName":"Image1", "Time":5000},{"ImageName":"Image3", "Time":1000},{"ImageName":"Image4", "Time":500},]; // Which slides
//var slideObj = JSON.parse(slides);
//alert(slides);
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 0; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index == slides.length) { // If at end
index = 0; // Start again
}
div.html("ImageName: "+slides[index].ImageName + "; Image Time Interval: "+slides[index].Time); // Load next one
index++;
}
if(index==0)
loop();
setInterval(loop, slides[index].Time);
});
</script>
</html>
I'm using a Seadragon Viewer for an image gallery. I want to get the first image opened when the page is ready.
The code:
<div class="all-facs">
<a onclick="switchTo(event, '55/dzc_output_images/55_A_1.xml');"
href="#">
<img src="55/dzc_output_images/55_A_1_files/7/0_0.jpg"/>
</a>
<a onclick="switchTo(event, '55/dzc_output_images/55_A_2.xml');"
href="#">
<img src="55/dzc_output_images/55_A_2_files/7/0_0.jpg"/>
</a>
<div id="containerSeadragon">
<script type="text/javascript">
var viewer = null;
function init() {
viewer = new Seadragon.Viewer("containerSeadragon");
viewer.openDzi(dzi);
}
function switchTo(event, dzi) {
if (dzi) {
viewer.openDzi(dzi);
} else {
viewer.close();
}
// don't let the browser handle the link
Seadragon.Utils.cancelEvent(event);
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
</div>
Now I just pass dzi to viewer.openDzi(dzi) and I need first to click on an image to get it shown. How can I pass the dzi of first a?
Thanks for help!
Update:
I'm using jquery-1.7.1.
I believe with jQuery you can trigger a click on that first link right at start-up, like so:
$('.all-facs a').eq(0).trigger('click');
Perhaps a more robust solution would be to attach the DZI info as a data attribute to the a tags, like so:
<div class="all-facs">
<a data-dzi="55/dzc_output_images/55_A_1.xml" href="#">
<img src="55/dzc_output_images/55_A_1_files/7/0_0.jpg"/>
</a>
<a data-dzi="55/dzc_output_images/55_A_2.xml" href="#">
<img src="55/dzc_output_images/55_A_2_files/7/0_0.jpg"/>
</a>
<div id="containerSeadragon">
<script type="text/javascript">
var viewer = null;
function init() {
viewer = new Seadragon.Viewer("containerSeadragon");
switchTo($('.all-facs a').eq(0).data('dzi'));
$('.all-facs a').click(function(event) {
switchTo($(event.target).data('dzi'));
});
}
function switchTo(dzi) {
if (dzi) {
viewer.openDzi(dzi);
} else {
viewer.close();
}
// don't let the browser handle the link
Seadragon.Utils.cancelEvent(event);
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
</div>
By the way, unrelated to the above, you might like to know that there's a new version of Seadragon:
http://openseadragon.github.io/
I have a gallery of thumbnails, all with class .thumb that are added by a php code that a friend wrote. I tried to add a simple click function:
$('.thumb').click(function () {
console.log('test');
});
And it does not log anything. I had tried this before we switched to php as well, and it still didn't work. (At that time the images were imported with jQuery)
Below is the relevant html code:
<div id="navbar">
<img src="images/sig.png">
<ul>
<li id="port"><a>Portfolio</a></li>
<ul id="inner">
<?php
$dir = opendir("images/portfolio");
while ($dosya = readdir($dir)){
if(substr($dosya,-1)!="." and is_dir("images/portfolio/".$dosya)){
if(file_get_contents("images/portfolio/".$dosya."/active.dl") == 'active'){
?>
<li class="galleryActivator" cats="<?=$dosya?>"><?=file_get_contents("images/portfolio/".$dosya."/name.dl")?></li>
<?php }}
}?>
</ul>
<li><li>Events</li></li>
<li>About</li>
</ul>
</div>
<div id="main">
<div id="thumbnails">
</div>
</div>
And the script:
(function(){
$('#inner').hide();
$('#main').hide();
$('#slideshow').hide();
$('#port').click(function(){
$('#inner').slideToggle(200);
console.log('test');
});
$('.galleryActivator').click(function () {
$("#main").hide();
$("#main img").remove();
var category = $(this).attr('cats');
var catSrc = "images/portfolio/" + category + "/files/";
var size = $(this).attr("data-size");
console.log(size);
var $thumbnails = $("#thumbnails");
$thumbnails.load( "albumler.php?adres="+category );
$('#main').fadeIn(200);
});
$('.thumb').click(function () {
console.log('test');
});
})();
it seems you are loading your thumbnails dynamically; you should set your event handler like this:
$(document).on("click", ".thumb", function () {
console.log('test');
});
you dont have anything in your above HTML with a class of thumb
but once you do just add document ready
$(document).ready(function(){
$('.thumb').click(function () {
console.log('test');
});
});