I'm stumped. As far as I can see from other posts the following should work to replace the contents of the p tags:
<p id="activateSubMenuIcons">.</p>
<script type="text/javascript">
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
}
</script>
but no dice. Also, no indication of an error comes up in the console. Would anyone be kind enough to tell me what I'm doing wrong??
EDIT
Ok here's the whole HTML as rendered by Umbraco:
<!DOCTYPE html>
<html>
<head>
<title>WSHA</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/wsha-style.css">
<link rel="stylesheet" type="text/css" href="/css/wsha-style-mobile.css">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans" rel="stylesheet">
</head>
<body>
<nav>
<img id="logo" src="/media/1042/wshalogo.png">
<ul>
<li class="current">Home
<span id="mainMenuIcon" class="fa fa-bars menuIcon"></span>
</li>
<li class="mainMenuItem">
About us
<span id="1259" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Our People</li>
<li>Who we were and are</li>
<li>Our Houses</li>
<li>Annual Reports</li>
</ul>
</li>
<li class="mainMenuItem">
Being a Tenant
<span id="1293" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Asbestos</li>
<li>Being Safe & Secure</li>
</ul>
</li>
<li class="mainMenuItem">
News
<span id="1305" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Community Garden</li>
<li>Football Team</li>
<li>Health Centre</li>
</ul>
</li>
</ul>
<br class="clear">
</nav>
<p id="activateSubMenuIcons">.</p>
<script type="text/javascript">
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
}
</script>
<div id="banner" style="background-image: url('/media/1035/houses-banner.jpg');">
<div id="bannerTitle">
<h1>Whiteinch & Scotstoun Housing Association</h1>
</div>
</div>
<div id="bannerMobile">
<div id="bannerTitle">
<h1>Whiteinch & Scotstoun Housing Association</h1>
</div>
</div>
<div id="subTitle">
<h4 class="text-centre">A Charity Registered in Scotland No. SC035633.</h4>
<h2 class="text-centre">Aiming for High Quality Homes in a Desirable Environment</h2>
</div>
<div id="homeContent-container">
<div id="homeContent">
<p><p>Welcome to our website. Please let us know if there is any information you would like to see included which we haven't thought of.</p>
<p>The modules are designed to help you navigate the site, and by clicking on the 'keys' on the left hand side of the module home pages, you will, hopefully, find the infomation you need.</p>
<p>You can opt for a text only version (see top of page), and there is the facility to download Adobe Reader is you want to print off any information and don't have this facility already (see below).</p>
<p>Please contact us using the link at the bottom of the page.</p></p>
</div>
</div>
<div id="footerContent">
<div class="footerContentBlock" id="first">
<h4>Quick Links</h4>
<ul>
<li>
<a href="http://www.banskorental.co.uk/about-us/our-people/" target="_blank">
<p>Our People</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.banskorental.co.uk/news/" target="_blank">
<p>News</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.banskorental.co.uk/about-us/annual-reports/" target="_blank">
<p>Annual Reports</p>
</a>
</li>
</ul>
<ul>
</ul>
<ul>
</ul>
</div>
<div class="footerContentBlock" id="middle">
<h4>Opening Hours</h4>
<table border="0" height="79" style="width: 272.583px;">
<tbody>
<tr>
<td style="width: 144px;">Monday to Thursday</td>
<td style="width: 108.583px;">9am to 5pm</td>
</tr>
<tr>
<td style="width: 144px;">Friday</td>
<td style="width: 108.583px;">9am to 3pm</td>
</tr>
<tr>
<td style="width: 144px;">Saturday, Sunday</td>
<td style="width: 108.583px;">Closed</td>
</tr>
</tbody>
</table>
</div>
<div class="footerContentBlock" id="last" >
<p style="text-align: right;"><strong>Whiteinch and Scotstoun Housing Association</strong></p>
<p style="text-align: right;">The Whiteinch Centre</p>
<p style="text-align: right;">1 Northinch Court</p>
<p style="text-align: right;">Glasgow</p>
<p style="text-align: right;">G14 0UG</p>
<p style="text-align: right;"> </p>
<p style="text-align: right;">Phone: 0141 959 2552</p>
<p style="text-align: right;">Fax: 0141 950 4432</p>
<p style="text-align: right;">email: wsha_admin#wsha.org.uk</p>
</div>
</div>
<div id="googleTranslateContainer">
<p>Translate this page.</p>
<p id="closeButton" onclick="translateClose()">x</p>
<div id="googleTranslate"></div>
</div>
<script type="text/javascript">
function translateClose() {
document.getElementById("googleTranslateContainer").style.visibility = "hidden";
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'googleTranslate');
}
</script>
<script type="text/javascript" src="/scripts/template2Javascript.js"></script>
</body>
</html>
And the javascript in template2Javascript.js:
document.getElementById("mainMenuIcon").onclick = function () {
var x = document.getElementsByClassName("mainMenuItem");
var numberOfMenuItems = x.length;
for ( i=0 ; i < numberOfMenuItems ; i++ ) {
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
};
if you print something in console you have to write cosole.log() like
console.log(document.getElementById("activateSubMenuIcons1").innerHTML);
and also you prevent p tag value than += concat with old value
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
document.getElementById("activateSubMenuIcons1").innerHTML += "hello";
console.log(document.getElementById("activateSubMenuIcons1").innerHTML);
}
<p id="activateSubMenuIcons">.</p>
<p id="activateSubMenuIcons1">.</p>
I apologise for wasting everyone's time. I now realise that I had misunderstood how innerHTML works. I was looking for a change in the source code, not the change in the browser. The reason I didn't spot that it was working was the text was displaying white on white. When I changed the css to make it purple and 200% it showed up and I could see that it does work after all.
I just need to rethink what I'm trying to do - see comment on Bhargav's answer below.
Related
For the html pages where the external javascript does not work, I put the js code in internally in the HTML file and it worked but what's the problem with the pages that can't do it without applying javascript in the HTML pages. The only page it works externally is in contact.html below. After that code is the sample1.html file where it does not work externally but only internally? What can I do to make it work externally? (javascript file is in the same folder)
contact.html
` <!--contact us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">Contact Us</title>
</head>
<body>
<!--header-->
<section class="header3">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Sponsor Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Contact Us</h1>
</div>
</section>
<!--inquiry box inspired from w3schools.com-->
<section class="box">
<div class="row">
<div class="box-col">
<form action="/action_page.php">
<div class="container">
<h1>Have Any Inquires?</h1>
<p>Fill out the form and our team will get back to you as soon as possible</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="inquiry"placeholder="Inquiry" name="name" required>
<p class="rq">*Required Field </p>
<input type="text" id="email2" placeholder="Email address" name="mail" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button1">Submit</button>
</div>
</form>
</div>
<div class="box-col">
<form name="form1" action="/action_page.php" onsubmit="required"()>
<div class="container">
<h1>Get A Estimated Quote</h1>
<p>This is just a estimate and our team will send a email with more detailed information</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="text" placeholder="Name" name="name3" required>
<p class="rq">*Required Field </p>
<input type="text" id="email" placeholder="Email address" name="mail3" required>
<p class="rq">*Required Field </p>
<input type="text" id="classNum" placeholder="How many different classrooms would you need" name="classrooms3" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button">Submit</button>
</div>
</form>
</div>
</div>
</section>
<!--end-->
<!-- offices(portion)-->
<section class="portion">
<h1>Our Offices</h1>
<div class="row">
<div class="portion-col">
<img src="images/city1.jpg">
<h3>Toronto Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city2.jpg">
<h3>Montreal Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city3.jpg">
<h3>Brampton Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>About Us</h1>
<br>
<br>
Learn More
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html>` </strike>
sample1.html page that doesn't work externally
<!--about us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">ClassPass An Interactive Classroom</title>
</head>
<body>
<!--header-->
<section class="header">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks" >
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Support Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Class Pass</h1>
<p>An Interactive Classroom</p>
</div>
</section>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
<script>
var icon2 = document.getElementById("icon2");
if(localStorage.getItem("theme") == null){
localStorage.setItem("theme", "light");
}
let localData = localStorage.getItem("theme");
if(localData=="light"){
icon2.src== "images/moon.png";
document.body.classList.remove("dark-mode");
}
else if(localData=="dark"){
icon2.src== "iamges/sun.png";
document.body.classList.add("dark-mode");
}
icon2.onclick = function(){
document.body.classList.toggle("dark-mode");
if(document.body.classList.contains("dark-mode")){
icon2.src="images/sun.png";
localStorage.setItem("theme","dark");
}
else{
icon2.src="images/moon.png";
localStorage.setItem("theme","light");
}
}
</script>
<!--sideblock-->
<section class="sideblock">
<div class="row">
<div class="side-col">
<h1>Our Mission</h1>
<p>Here at Class Pass we wanted to bring the classroom into the homes of students and teachers. We re-imagined the way students can interact with their classmates and teachers away from school. ClassPass is designed to offer students a wide varity of learning material through artifical intelligence based reccomended resources. At Class Pass we believe the future starts with the classroom. Important features: </p>
<div class="list">
<ul>
<br>
<li>AI Powered Resources</li>
<br>
<li>Interactive Online Community</li>
<br>
<li>Direct Communication To Teachers</li>
</ul>
</div>
</div>
<div class="side-col">
<img src="images/class1.jpg">
</div>
</div>
</section>
<!-- sub moving cards-->
<section class="sub">
<h1>Specififc features</h1>
<div class="row">
<div class="sub-col">
<img src="images/infopic1.png">
<div class="layer">
<h3>AI Powered Resources</h3>
<p>Class Pass uses the power of Artifical Intelligence to curate specialized resources to each student and teacher</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic2.jpg">
<div class="layer">
<h3>Interactive Online Community</h3>
<p>Students can communicate with their classmates and interact with cards work together</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic3.jpg">
<div class="layer">
<h3>Direct Communication To Teachers</h3>
<p>Parents and students can ask their teachers any questions anytime of the day</p>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>Interested In Our Vision?</h1>
<br>
<br>
Support Us
Contact Us
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html> </strike>
in my previous project , i have used the foundation 4 open source. that time i have got a top bar navigation. but now am again trying new project with foundation. for that i have downloaded http://foundation.zurb.com/develop/download-f4.html that is foundation4.3.2 version. i have refereed the foundation 4.3.2 version css and js in my new project, but the top-bar not coming its showing like tree view without any effort of foundation ?
if i refer the foundation 4 , top - bar is working...
then
why Top-bar not working while i refereeing the foundation 4.3.2 version ?
HTML code
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate</li>
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Options</li>
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Configuration</li>
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</ul>
</section>
</nav>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/foundation/foundation.topbar.js"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
Note: There is no error i found out at run time.. but my web page showing like tree view ( i used ul and li element) without any effort of foundation 4.3.2 version.
My web page should look like below image
The following should work:
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Options
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Configuration
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>');
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
I've done a few things here. First and foremost, I just formatted the code so it could be read easier. Second, I removed the call to foundation.min.js in the head. You're calling foundation.min.js at the foot of the body, and including it twice can cause confusion with naming variables. I also removed your call to foundation.topbar.js because this file is included in the minified script you've already included. Last I re-worked your dropdown menus so that Foundation could interpret them properly. Foundation expects to the dropdown menu to be within the parent li element. I also made the dropdown li text into anchors in accord with Foundation documentation.
Oh, and I added a semi-colon to the document.write() statement that includes jQuery/zepto.
This is not foundation 4.3.2 version problem. actually i have made some changes in foundation.css itself.. that made the problem for my web page. after i deleted changes made in the foundation.css then got the top-bar navigation.
So we dont make changes in the foundation.css itself.
better we can create customized css for our references.
I discovered the difference when checking to see what the requests looked like to download the JavaScript files from the server. I just wanted to see what the link looked like in the HTML, but when I checked in the inspector, I couldn't find any references to any JavaScript. When I checked the source, they were certainly there.
You can see the example here: http://todomvc.com/architecture-examples/angularjs/#/
I can't seem to figure out why.
Here it is in Firebug's inspector:
And here it is when viewing it from the source:
There are also some element attributes that seem to disappear between the two.
Can someone explain why?
Edit:
Here's the complete markup from source:
<!doctype html>
<html lang="en" data-framework="angularjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AngularJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>[ng-cloak] { display: none; }</style>
</head>
<body ng-app="todomvc">
<ng-view />
<script type="text/ng-template" id="todomvc-index.html">
<section id="todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</header>
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEditing(todo)" ng-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: status == ''} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: status == 'active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: status == 'completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Credits:
Christoph Burgdorf,
Eric Bidelman,
Jacob Mumm and
Igor Minar
</p>
<p>Part of TodoMVC</p>
</footer>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/todoCtrl.js"></script>
<script src="js/services/todoStorage.js"></script>
<script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoEscape.js"></script>
</body>
</html>
And here's what the markup looks like in the inspector:
<!DOCTYPE html>
<html lang="en" data-framework="angularjs">
<head>
<style type="text/css">
#charset "UTF-8";
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{
display:none !important;
}ng\:form{
display:block;
}
</style>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>
AngularJS • TodoMVC
</title>
<link href="bower_components/todomvc-common/base.css" rel="stylesheet">
<style>
[ng-cloak] {
display: none;
}
</style>
</head>
<body class="learn-bar ng-scope" ng-app="todomvc">
<aside class="learn">
<header>
<h3>
AngularJS
</h3>
<span class="source-links">
<h5>
Architecture Example
</h5>
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs">
Source
</a>
<h5>
Dependency Example
</h5>
<a class="demo-link" href="http://todomvc.com/labs/dependency-examples/angularjs_require">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/dependency-examples/angularjs_require">
Source
</a>
<h5>
AngularJS Optimized
</h5>
<a class="demo-link" href="http://todomvc.com/architecture-examples/angularjs-perf">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs-perf">
Source
</a>
<h5>
TypeScript & AngularJS
</h5>
<a class="demo-link" href="http://todomvc.com/labs/architecture-examples/typescript-angular">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/typescript-angular">
Source
</a>
</span>
</header>
<hr>
<blockquote class="quote speech-bubble">
<p>
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
</p>
<footer>
<a href="http://angularjs.org">
AngularJS
</a>
</footer>
</blockquote>
<hr>
<h4>
Official Resources
</h4>
<ul>
<li>
<a href="http://docs.angularjs.org/tutorial">
Tutorial
</a>
</li>
<li>
<a href="http://docs.angularjs.org/api">
API Reference
</a>
</li>
<li>
<a href="http://docs.angularjs.org/guide">
Developer Guide
</a>
</li>
<li>
<a href="http://builtwith.angularjs.org">
Applications built with AngularJS
</a>
</li>
<li>
<a href="http://blog.angularjs.org">
Blog
</a>
</li>
<li>
<a href="http://docs.angularjs.org/misc/faq">
FAQ
</a>
</li>
<li>
<a href="http://www.youtube.com/angularjs">
AngularJS Meetups
</a>
</li>
</ul>
<h4>
Articles and Guides
</h4>
<ul>
<li>
<a href="http://www.codeschool.com/code_tv/angularjs-part-1">
Code School AngularJS course
</a>
</li>
<li>
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features">
5 Awesome AngularJS Features
</a>
</li>
<li>
<a href="http://briantford.com/blog/angular-yeoman.html">
Using Yeoman with AngularJS
</a>
</li>
<li>
<a href="http://stephenplusplus.github.io/meangular">
me&ngular - an introduction to MVW
</a>
</li>
</ul>
<h4>
Community
</h4>
<ul>
<li>
<a href="http://www.youtube.com/playlist?list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz">
Walkthroughs and Tutorials on YouTube
</a>
</li>
<li>
<a href="https://groups.google.com/forum/?fromgroups#!forum/angular">
Google Groups mailing list
</a>
</li>
<li>
<a href="http://stackoverflow.com/questions/tagged/angularjs">
angularjs on Stack Overflow
</a>
</li>
<li>
<a href="https://twitter.com/angularjs">
AngularJS on Twitter
</a>
</li>
<li>
<a href="https://plus.google.com/+AngularJS/posts">
AngularjS on Google +
</a>
</li>
</ul>
<footer>
<hr>
<em>
If you have other helpful links to share, or find any of the links above no longer work, please
<a href="https://github.com/tastejs/todomvc/issues">
let us know
</a>
.
</em>
</footer>
</aside>
<ng-view class="ng-scope">
<section id="todoapp" class="ng-scope" ng-controller="TodoCtrl">
<header id="header">
<h1>
todos
</h1>
<form id="todo-form" class="ng-pristine ng-valid" ng-submit="addTodo()">
<input id="new-todo" class="ng-pristine ng-valid" autofocus="" ng-model="newTodo" placeholder="What needs to be done?">
</form>
</header>
<section id="main" class="ng-hide" ng-show="todos.length">
<input id="toggle-all" class="ng-pristine ng-valid" type="checkbox" ng-click="markAll(allChecked)" ng-model="allChecked">
<label for="toggle-all">
Mark all as complete
</label>
<ul id="todo-list">
</ul>
</section>
<footer id="footer" class="ng-hide" ng-show="todos.length">
<span id="todo-count">
<strong class="ng-binding">
0
</strong>
<ng-pluralize when="{ one: 'item left', other: 'items left' }" count="remainingCount">
items left
</ng-pluralize>
</span>
<ul id="filters">
<li>
<a class="selected" href="#/" ng-class="{selected: status == ''} ">
All
</a>
</li>
<li>
<a href="#/active" ng-class="{selected: status == 'active'}">
Active
</a>
</li>
<li>
<a href="#/completed" ng-class="{selected: status == 'completed'}">
Completed
</a>
</li>
</ul>
<button id="clear-completed" class="ng-binding ng-hide" ng-show="completedCount" ng-click="clearCompletedTodos()">
Clear completed (0)
</button>
</footer>
</section>
<footer id="info" class="ng-scope">
<p>
Double-click to edit a todo
</p>
<p>
Credits:
<a href="http://twitter.com/cburgdorf">
Christoph Burgdorf
</a>
,
<a href="http://ericbidelman.com">
Eric Bidelman
</a>
,
<a href="http://jacobmumm.com">
Jacob Mumm
</a>
and
<a href="http://igorminar.com">
Igor Minar
</a>
</p>
<p>
Part of
<a href="http://todomvc.com">
TodoMVC
</a>
</p>
</footer>
</ng-view>
</body>
</html>
Inspector = current state of the dom (May be modfied by scripts), source code = original data send by server.
Certain elements like scripts that where used to store templates or other data , are often removed from dom by the libraries after their content was read to keep the dom clean.
That's why they don't appear in the inspector.
This function updates my content using the .load method from JQuery. The code works as intended on Google Chrome and Mozilla Firefox, but does not work at all in IE8 nor IE9.
Here is its content:
$(function(){
var newHash='';
$contentwrapper = $("#contentwrapper");
$("nav").delegate(".menuOptions", "click", function()
{
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function()
{
newHash = window.location.hash.substring(1);
$contentwrapper.load(newHash + " #contentcolumn");
setTimeout(TitleUpdater, 200);
});
});
function TitleUpdater()
{
top.document.title=$("#contentcolumn").attr("title");
}
I would like to know how to make this code compatible with Internet Explorer! Thank you.
Edit: On Firefox and Chrome, this code only replaces one big <div id="contentcolumn">...</div> and all the style around stays the same as it was before the script execution. While IE8 and IE9 just remove ALL my html code by <div id="contentcolumn">...</div> (it even writes over the head and body tags). This is really weird!
Here is index.html:
<!DOCTYPE html>
<html>
<head>
<title>Vladi Manaev</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/bagums.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div id="maincontainer">
<div id="topsection">
<div id="banner"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<nav>
<a class="brand" href="">Bagums.com</a>
<ul class="nav">
<li class="dropdown">
Basic Tutorials<b class="caret"></b>
<ul class="dropdown-menu">
<li><a class="menuOptions" href="BasicTutorials/CTutorial.html" name="CTutorial">C</a></li>
<li><a class="menuOptions" href="BasicTutorials/CppTutorial.html" name="CppTutorial">C++</a></li>
<li><a class="menuOptions" href="BasicTutorials/CsharpTutorial.html" name="CsharpTutorial">C#</a></li>
<li><a class="menuOptions" href="BasicTutorials/JavaTutorial.html" name="JavaTutorial">Java</a></li>
<li><a class="menuOptions" href="BasicTutorials/OtherTutorials.html" name="OtherTutorials">Others</a></li>
</ul>
</li>
<li class="dropdown">
My Projects<b class="caret"></b>
<ul class="dropdown-menu">
<li><a class="menuOptions" href="MyProjects/CProject.html">C</a></li>
<li><a class="menuOptions" href="MyProjects/CppProject.html">C++</a></li>
<li><a class="menuOptions" href="MyProjects/CsharpProject.html">C#</a></li>
<li><a class="menuOptions" href="MyProjects/JavaProject.html">Java</a></li>
<li><a class="menuOptions" href="MyProjects/Others.html">Others</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/Links.html">Links</a></li>
<li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/Contact.html">Contact</a></li>
<li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/About.html">About</a></li>
</ul>
</nav>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div><!-- navbar -->
</div><!-- topsection -->
<div id="contentwrapper">
<div id="contentcolumn" title="Vladi Manaev">
<div id="mainPostsTitle">Latest News</div>
<div class="postWrapper">
<div class="post">
<div class="postTitle"><div class="postTitleTxt">Third post on website</div></div>
<div class="postInfo"> Aug 4, 2012 # 7:23 pm</div>
<div class="postContent">
<p>
CONTENT
</p>
</div>
</div>
</div>
<div class="postWrapper">
<div class="post">
<div class="postTitle"><div class="postTitleTxt">Second post on website</div></div>
<div class="postInfo"> Aug 4, 2012 # 7:22 pm</div>
<div class="postContent">
<p>
CONTENT
</p>
</div>
</div>
</div>
<div class="postWrapper">
<div class="post">
<div class="postTitle"><div class="postTitleTxt">First post on website</div></div>
<div class="postInfo"> Aug 4, 2012 # 6:48 pm</div>
<div class="postContent">
<p>
CONTENT
</p>
</div>
</div>
</div>
</div><!-- contentcolumn -->
</div><!-- contentwrapper -->
<div id="footer">
<nav>
<div> Copyright © 2012 created by <a class="menuOptions" href="OtherPages/Contact.html"> Vladi Manaev</a></div>
</nav>
</div><!-- footer -->
</div><!-- maincontainer -->
<!-- Placed at the end of the document so the page load faster -->
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/bootstrap-dropdown.js"></script>
<script>
$(function(){
var newHash='';
$contentwrapper = $("#contentwrapper");
$("nav").delegate(".menuOptions", "click", function()
{
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function()
{
newHash = window.location.hash.substring(1);
$contentwrapper.load(newHash + " #contentcolumn");
setTimeout(TitleUpdater, 200);
});
});
function TitleUpdater()
{
top.document.title=$("#contentcolumn").attr("title");
}
</script>
</body>
</html>
When i changed my href to start with # like this:
<a class="menuOptions" href="#BasicTutorials/CTutorial.html" name="CTutorial">C</a>
...
It start working on IE as well!
My guess is that window.location.hash does not work on IE... and when i added "#" by hand it solved the problem.
Thanks everyone for trying to help !
Can't seem to get my lightbox to work. Any ideas?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<title>WildFire</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[#rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
</head>
<body>
<div id="wrapper">
<div id="body">
<img src="images/tempbar.png">
<div id="text">
<img class="logo" src="images/logo.png">
<ul class="info">
<li>Hours: </li>
<p>
<li> Lunch 11am - 3pm </li>
<li> Dinner 5pm - 10pm </li>
<p>
<li>Phone: </li>
<p>
<li>(607) 277-9143</li>
<p>
<li>Address: </li>
<p>
<li> 106 S Cayuga St </li>
<li>Ithaca, NY 14850 </li>
</ul>
<p class="linkouts">
<a rel="lightbox" "href="images/lunch.png">
<img src="images/lunchlink.png">
</a>
<p>
<img src="images/dinnerlink.png">
</div>
</div>
<div id="footer">
For Lounge Events Find Us On
<a href="http://www.facebook.com/pages/Ithaca-NY/WildFire-Lounge/144229581885?ref=ts" target="_blank">
<img class ="fb" src="images/loungefb.png">
</a>
Come Visit
<a href="http://www.madelines-restaurant.com/" target="_blank">
<img class="mad" src="images/madelineslogo.png">
</a>
And Our Friend
<a href="http://www.stateofithaca.com/" target="_blank">
<img class="state" src="images/stlogo.png"
</a>
</div>
</div>
</body>
</html>
Your selector is incorrect, the "#" is no longer used (deprecated, LOL I couldn't think of the word without my morning caffiene). Try this instead:
$(function() {
$('a[rel="lightbox"]').lightBox();
});
Without testing anything else or looking closely at the problem, have you tried removing the incorrectly-placed quote mark from before the href attribute?
<a rel="lightbox" href="images/lunch.png">
<img src="images/lunchlink.png">
</a>