Forgive my ignorance, because I'm pretty new to programing. I've been beating out my brains on this one. Can anyone tell me why this doesn't work? I know it will be something dumb:
addText(){
document.getElementById("demo").innerHTML = "New Content";
}
<!DOCTYPE html>
<html>
<head>
<title>InnerHTML Example</title>
</head>
<body>
<p id="demo">
<Button onclick="addText()">Change</Button>
Original Content
</p>
</body>
</html>
You haven't declared addTest() as a function. Should be:
<script>
function addTest() {
...
}
</script>
function addText() {
document.getElementById("demo").innerHTML = "New Content";
}
<!DOCTYPE html>
<html>
<head>
<title>InnerHTML Example</title>
</head>
<body>
<p id="demo">
<Button onclick="addText()">Change</Button> Original Content
</p>
</body>
</html>
Related
base.ejs:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Diary</title>
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script src="javascripts/jquery.js" ></script>
<script src="javascripts/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</body>
index.ejs:
<div class="container">
<!-- Button trigger modal -->
<h1>Welcome to Your Diary</h1>
<div>
<span class="label label-default">What would you like to do? </span>
<span class="label label-primary">Here are your Categories:</span>
</div>
</div>
I want block inheritance
EJS does not specifically support blocks, but layouts can be implemented by including headers and footers, like so:
<%- include('header') -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer') -%>
https://github.com/mde/ejs#layouts
You could split base.ejs into two files, header and footer, like this:
header.ejs
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Diary</title>
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script src="javascripts/jquery.js" ></script>
<script src="javascripts/bootstrap.min.js"></script>
</head>
<body>
footer.ejs
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</body>
</html>
Someone has made EJS with block inheritance capability (https://github.com/mafintosh/pejs)
Straight from the documentation (Retrieved on January, 1st, 2018):
Using blocks it's easy to implement template inheritance. Just declare
a base.html with some anchored blocks:
<body>
Hello i am base
<%{{ content }}%>
</body>
Then a child.html that renders base.html
<%{ './base.html' }%>
<%{ content %>
i am inserted in base
<%} %>
To render the example just render child.html
pejs.render('./child.html', function(err, result) {
console.log(result);
});
Looks pretty good. I'm going to try this on my own project.
You can use ejs-locals or ejs-mate engine for ejs
Sorry for being late. I am in the same situation. What you can do is to pass the content you want to render in the properties of the object. Like this:
<%- include('/partials/',{
title: 'my title',
tags: [
'<h1>Hi, my name is this</h1>'
]
});
%>
EJS does not support blocks, but this is the solution I have implementate. Hope it helps.
I am trying to open a simple modal dialog and I have been struggling to do this. Can
any one please help? This is the HTML code(please remove pre). This simply doesnot work.
Can any one please tell **strong text**me why? I have not been getting the kind of output that I really
need.
Any one help me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<script src="js/jquery.magnific-popup.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
</head>
<body>
<a class="popup-modal" href="#test-modal">Open modal</a>
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>Modal dialog</h1>
<p>You won't be able to dismiss this by usual means (escape or
click button), but you can close it programatically based on
user choices or actions.</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
<script>
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>
</body>
</html>
Load jquery before the magnific-popup plugin, it relies on jquery (I've never used it but I'm assuming so seeeing as it is pre-appended withfixed 'jquery')
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<!-- Jquery loaded first here... -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<!-- Plugins after... -->
<script src="js/jquery.magnific-popup.js"></script>
</head>
<body>
I want to hide the content until the page is fully loaded,
but i cant finde the problem why it dosent work.
the alert shows up, but not the content.
<!DOCTYPE html>
<html>
<head>
<style>
#content{
visibility:hidden;
}
</style>
<script type="text/javascript">
checkLoad();
function checkLoad(){
if (document.readyState === "complete"){
document.getElementById("content").style.visiblity = 'visible';
alert(document.getElementById("content").style.visiblity);
} else {
setTimeout('checkLoad();', 1000)
}
}
</script>
</head>
<body>
<div id="content">
<div id='tc1'>Content Text</div>
</div>
</body>
</html>
There's a typo in your code:
document.getElementById("content").style.visiblity = 'visible';
should be :
document.getElementById("content").style.visibility = 'visible';
(note the missing i in visibility)
I'm new to using magnific popup and I'm trying to implement query.magnific-popup.js in dreamweaver cs5. I did not change a thing in the original syntax of this file but get a syntax error in:
<meta name="selected-link" value="repo_source" data-pjax-transient />
I also placed a test image with syntax online and this simply works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Page</title>
<script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="www.youtube.com/iframe_api" type="text/javascript"></script>
<script src="www.youtube.com/iframe_api" type="text/javascript"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.magnific-popup.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/magnific-popup.css"></script>
</head>
<body>
<div id="wrapper">
<div id="topnav">
<div id="topnav-links">
<ul>
<li>Flexstay</li>
<li>Flexpack</li>
<li>Flexchoice</li>
<li>Flexclusives</li>
<li>Friends</li>
<li>Guiding | Car | Coach</li>
</ul>
</div>
<a class="popup" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" height="75" width="75"></a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup').magnificPopup({
type: 'image', closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
</body>
</html>
Can anyone help me here? Thanks in advance.
It's very strange, I call dijit.byId() in dojo.addOnLoad(function{...}), it return undefined. In order to check if the id exist, i call dojo.byId() at the same time, it return some object. So I guess the component is not a dijit component? this is the whole code: Please help me, thanks in advice!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- Dojo/Diji definations -->
<link href='../dojoroot/dijit/themes/tundra/tundra.css' type='text/css' rel='stylesheet'/>
<link href='../dojoroot/dojo/resources/dojo.css' type='text/css' rel='stylesheet'/>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- Main scripts -->
<script type="text/javascript">
dojo.addOnLoad(function()
{
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
// add the select child event to the tab panel
alert(dijit.byId("contentTabPanel")); // return no defined
alert(dojo.byId("contentTabPanel")); // return an object
});
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<!-- Content Tab Panel -->
<div id="contentTabPanel" dojoType="dijit.layout.TabContainer" region="center">
<!-- Tab UserGroup -->
<div dojoType="dijit.layout.ContentPane" title="UserGroup">
</div>
</div>
</div>
</body>
</html>
OMFG!!!!! I know the reason!!!!! I cost 5 Hours just for this STUPID error:
I MUST write the
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
outside the dojo.addOnLoad(function() { !!!