Some content, in this case a navbar (navbar.php), is loaded into the index.html by Javascript. Now I want to change a navbar list item from "Home" to "Something else" using Javascript. But it seems that the script can not see the loaded content. The console gives an „document.getElementById(...) is null“ error. Following the code:
index.html
<!DOCTYPE html>
<html lang="de">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$("#navbar").load("navbar.php");
return false;
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<header>
<div id="navbar">
</div>
</header>
<main>
</main>
<footer>
</footer>
<script>
let myChange = document.getElementById("change").innerHTML;
myChange = "<a href='somethingelse.html'>Something else</a>";
</script>
</body>
</div>
</div>
</html>
navbar.php
<div>
<ul>
<li id="change">Home</li>
<li >Logout</li>
</ul>
</div>
Any idea what is wrong in the code?
Thanks a lot in advance.
You would need to use the load's callback function for load to know when the content has been added to the document.
$("#navbar").load("navbar.php", function() {
const myChange = document.getElementById("change");
myChange.innerHTML = "<a href='somethingelse.html'>Something else</a>";
});
Related
im trying to open a different webpage as a colorbox but i cant seem to figure it out.
Below is the webpage i want to open when a person clicks on the image.
<div class="album py-5">
<div class="container">
<div class="row">
<div id="projects" class="col-md-8 col-lg-6 shadow-sm">
<a href="project1.html" id="yourlink"><img class="img-fluid" src="img/mockup.png" alt="iPhone Mockup">
</a>
</div>
</div>
</div>
</div>
Below is the script i did.
<script>
"use strict";
$(document).ready(function(){
$('#yourlink').colorbox();
});
</script>
This is my first time trying to use colorbox so its a little confusing, thank you.
colorbox has a configuration atrtibute called "html" where you can provide html code for it to show. For example:
var code = $('div.py-5').html();
$('#yourlink').colorbox({html: code});
If you can modify the html to show, you could also check the colorbox examples as they include an inline HTML example.
Edit: Here's a working example:
var button = $("#clickme");
$(document).ready(function() {
var code = $("#myContent").html();
$("#clickme").colorbox({ "html": code })
});
#myContent {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<style rel="https://www.jacklmoore.com/colorbox/example1/colorbox.css"></style>
</head>
<body>
<div id="myContent">
<p>Hello World from the content.</p>
</div>
Click me
</body>
</html>
Has anyone tried html jquery load file? How can I possibly use Jquery to control a class from a Html that's loaded from Jquery? A direct content of my header html will work if inserted into index.html. However I'm trying to use the Jquery include file as there will be a lot of pages so a separate file is much more feasible. The problem is when I target a certain class or id in js it won't do anything.
index.html
<!DOCTYPE html>
<html>
<body>
<div id="header"></div>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/jquery.superslides.js" type="text/javascript" charset="utf-8"> </script>
<script src="js/app.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
</body>
</html>
header.html
<header>
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
Managed to fix with a different approach.
index.html
<!DOCTYPE html>
<html>
<link rel="import" id="template-file" href="header.html">
<body>
<script>
var getImport = document.querySelector('#template-file');
var getContent = getImport.import.querySelector('#header');
document.body.appendChild(document.importNode(getContent, true));
</script>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>
header.html
<header id="header">
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
I'm new to HTML and especially HTML5.
I'm trying to select the header with id of mr and change it to the length of the number of items that have para as its class.
Nothing seems to be changing in my browser view.
Not sure why. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
var items = document.getElementsByClassName("para");
var log = document.getElementById("mr");
log.innerText = items.length;
</script>
<title>Title</title>
<html lang="en"/>
</head>
<body>
<header>
<h1 id="mr">This is a header</h1>
</header>
<nav>
Index
</nav>
<section>
<h1>Section 1</h1>
<article>
<p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
</article>
<article>
<p class="para"> <mark>here is some more shit</mark></p>
</article>
</section>
<footer>
</footer>
</body>
</html>
Neither para nor mr is present in DOM when the script is running.
Option 1
Just put the script part before closing body tag
<script>
var items = document.getElementsByClassName("para");
var log = document.getElementById("mr");
log.innerText = items.length;
</script>
</body>
Option 2
If you still want to put it inside head tag put the js inside window.onload
<script>
window.onload=function(){
var items = document.getElementsByClassName("para");
var log = document.getElementById("mr");
log.innerText = items.length;
}
</script>
Plunker
The thing you have to remember about HTML is that it's read and parsed from top to bottom. Meaning things that are on the top get rendered first while things at the bottom, later. It's usually good practice to put JS at the end of the body or defer it till the page loads.
<body>
<h1 id="mr">This is a header</h1>
<p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
<p class="para">
<mark>here is some more stuff</mark>
</p>
<script>
var items = document.getElementsByClassName("para");
var log = document.getElementById("mr");
log.innerText = items.length;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
function startup() {
var items = document.getElementsByClassName("para");
var log = document.getElementById("mr");
log.innerText = items.length;
}
</script>
<title>Title</title>
<html lang="en"/>
</head>
<body onload="startup();">
<header>
<h1 id="mr">This is a header</h1>
</header>
<nav>
Index
</nav>
<section>
<h1>Section 1</h1>
<article>
<p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
</article>
<article>
<p class="para"> <mark>here is some more shit</mark></p>
</article>
</section>
<footer>
</footer>
</body>
</html>
the script runs before the page has loaded, to fix this we run the code once the body loads.
Put your js code in the scripts tag inside document.onload event, since after this event will ensure that by the time this event is fired your DOM elements are loaded and ready to be accessed by DOM API.
<script>
document.onload = function(){
var items = document.getElementsByClassName("para");
var log = document.getElementById("mr");
log.innerText = items.length;
};
</script>
First your script should be at the end which help loading the content the user sees first faster and also it makes shure that all the DOM elements are loaded. Second i would replace log.innerText with log.innerHTML because somehow log.innerText doesnt really work for me and i prefer log.innerHTML anyway because there you can use html tags and stuff.
So heres a script that works at least for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<html lang="en" />
</head>
<body>
<header>
<h1 id="mr">This is a header</h1>
</header>
<nav>
Index
</nav>
<section>
<h1>Section 1</h1>
<article>
<p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
</article>
<article>
<p class="para">
<mark>here is some more stuff</mark>
</p>
</article>
</section>
<footer>
</footer>
<script>
var items = document.getElementsByClassName("para");
var log = document.getElementById("mr");
log.innerHTML = items.length;
</script>
</body>
</html>
I am new to jQuery, and I loaded a div from an external HTML page and I wanted to perform functions such as click, hide, show, etc. The problem is that I tried to put the functions which I wanted to accomplish in the HTML pages script but they did not work. I see the div of #helpPage loaded.
The HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>
<script>
$(document).ready(function(){
$( "#loadHelpHere" ).load( 'help.html #helpPage' );
$('#helpSection div').not(".helpDiv").hide();
$('.justClick').bind('click', function() {
$('#helpSection div').not(".helpDiv").hide();
$('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html());
});
});
</script>
<style>
#helpMenu ul li{margin: 0 0 5px 0;}
</style>
</head>
<body>
<div id="loadHelpHere"></div>
</body>
</html>
That is what was loaded into the div from the external HTML page:
<div id="helpPage">
<div id="helpMenu">
<header>Help Documentation</header>
<article>
<h4>Help Menu</h4>
<ul id="menu">
<li class="current_page_item justClick">Help Section 1</li>
<li class="justClick">Help Section 2</li>
<li class="justClick">Help Section 3</li>
</ul>
</article>
</div>
<div id="helpSection">
<div class="helpDiv">
<header>Help Documentation</header>
<article>
Works!
</article>
</div>
<div class="helpDiv1">
<header>Help Documentation content 1</header>
<article>
Help Section 1
</article>
</div>
<div class="helpDiv2">
<header>Help Documentation content 2</header>
<article>
Help Section 2
</article>
</div>
<div class="helpDiv3">
<header>Help Documentation content 3</header>
<article>
Help Section 3
</article>
</div>
</div>
</div>
Any help is appreciated.
Event delegation is what you want to use for HTML elements that are dynamically loaded into the DOM. The .on() method is the place to start.
Example
$(document).on('click', '.justClick', function(e){
$('#helpSection div').not(".helpDiv").hide();
$('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html());
});
Any questions?
Trying to add content into individual div-containers I stumbled on the command .innerHTML, which I tried to implement accordingly. Strangely I get the following error:
*Uncaught TypeError: Cannot read property 'innerHTML' of null *
I'm running the code over my local Apache server if that makes any difference.
index.html
<html>
<head>
<title>Welcome</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
</body>
</html>
javascript.js
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
Put it in window.onload
window.onload = function()
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
}
The element has to be present in the DOM, before you can access it in JS
You have to ensure that your DOM elements have loaded before accessing them with javascript.
Since you are using jquery, your javascript can simply be
$(function() {
var $navidiv = $('#left');
$navidiv.html($navidiv.html() + 'FirstElement');
});
try this
html
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
javascript.js
$( document ).ready(function() {
var navdiv=$("#left").html();
$("#left").html(navdiv+"FirstElement");
});
see DEMO