I have pre-loader image inside body tag and nav tag is inside head , nav tags
elements are remaining on the page, while loader is showing for body
onload only. How to do it properly without using onload in body tag
<html>
<head>
<style>
body {
background-image: url("https://img.freepik.com/free-vector/elegant-white-background-with-shiny-lines_1017-17580.jpg?size=626&ext=jpg"), url("https://www.publicdomainpictures.net/pictures/140000/nahled/grey-white-background.jpg");
}
</style>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</head>
<body onload="loader()">
<div id="loading">
<img id="loading-image" src="http://people.ischool.berkeley.edu/~ellyrath/images/spinner-loop.gif" alt="Loading..." />
</div>
This body has pre-loaded image
<script language="javascript" type="text/javascript">
function loader () {
document.getElementById("loading").style.display = "none";
}
</script>
</body>
</html>
Please read on what belongs in the head element - below I've moved the nav into the body where it belongs.
No need for an onload - simply run the javascript line(s) immediately in the script tag.
Alternatively, you could keep it in a function, and immediately call the function in your script.
<html>
<head>
<style>
body {
background-image: url("https://img.freepik.com/free-vector/elegant-white-background-with-shiny-lines_1017-17580.jpg?size=626&ext=jpg"), url("https://www.publicdomainpictures.net/pictures/140000/nahled/grey-white-background.jpg");
}
</style>
</head>
<body>
<div id="loading">
<img id="loading-image" src="https://placeimg.com/640/480/any">
</div>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
This body has pre-loaded image
<script language="javascript" type="text/javascript">
// simply execute this function immediately...
document.getElementById("loading").style.display = "none";
</script>
</body>
</html>
Well What you want to achieve you can do something like this using jquery
or you can follow this [https://devdojo.com/tutorials/get-a-preloader-on-your-site-with-jquery][1]
<head>
<style>
body {
background-image: url("https://img.freepik.com/free-vector/elegant-white-background-with-shiny-lines_1017-17580.jpg?size=626&ext=jpg"), url("https://www.publicdomainpictures.net/pictures/140000/nahled/grey-white-background.jpg");
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(window).load(function() {
$('#loading').fadeOut('slow');
});
</head>
<body >
<div id="loading">
<img id="loading-image" src="http://people.ischool.berkeley.edu/~ellyrath/images/spinner-loop.gif" alt="Loading..." />
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
This body has pre-loaded image
</body>
</html>
[1]: https://devdojo.com/tutorials/get-a-preloader-on-your-site-with-jquery
Related
I found this code while searching and was wondering if it is possible to extend it so that i can have more than 2 'pages' on the project i am creating?
here is the code:
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
Not the most elegant solution but it works :)
<html>
<head>
<style>
ul li {
display: inline-block;
}
.shown: {
display: block;
}
.hidden: {
display: none;
}
</style>
</head>
<body>
<ul>
<li class="links" data-link="0">Page1</li>
<li class="links" data-link="1">Page2</li>
<li class="links" data-link="2">Page3</li>
<li class="links" data-link="3">Page4</li>
</ul>
<div class="pages" id="Page1" data-item="0">
Content of page 1
</div>
<div class="pages" id="Page2" data-item="1" style="display:none">
Content of page 2
</div>
<div class="pages" id="Page3" data-item="2" style="display:none">
Content of page 3
</div>
<div class="pages" id="Page4" data-item="3" style="display:none">
Content of page 4
</div>
<script>
(function() {
var links = document.querySelectorAll('.links');
var pages = document.querySelectorAll('.pages');
for(var i=0;i<links.length;i++) {
links[i].addEventListener('click', function() {
for(var j=0;j<pages.length;j++) {
pages[j].setAttribute('style', 'display: none');
if(this.getAttribute('data-link') === pages[j].getAttribute('data-item')) {
pages[j].setAttribute('style', 'display: block')
}
}
})
}
}());
</script>
</body>
</html>
Yes, you can extend the code to as many pages you want on a single page. This code simply gives you link to show different content on a same page. You will have to change your script according to your need.
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
<div id="Page3" style="display:none">
Content of page 3
Show page 3
</div>
</body>
</html>
<script>
var lastPage = 'Page1';
function show(shown) {
document.getElementById(shown).style.display='block';
document.getElementById(lastPage).style.display='none';
lastPage = shown;
return false;
}
</script>
Show page 2
I'm trying to load a navigation bar from an external HTML file, and automatically set an anchor's tag class to "active" based on the current page.
Here's the code:
<html>
<head>
<title>Main</title>
<style>
.active {
background-color: green;
}
</style>
<script>
$(document).ready(loadAndSet());
function loadAndSet() {
loadBar();
setActive();
}
function loadBar() {
$('#bar').load('navigation.html');
}
function setActive() {
var aObjects = document.getElementById("bar").getElementsByTagName("a");
for (var i = 0; i < aObjects.length; i++) {
if (document.location.href.indexOf(aObjects[i].href) >= 0) {
aObjects[i].className = "active";
}
}
}
</script>
</head>
<body>
<div id="bar"></div>
<h1>Content Title</h1>
<p>Some content</p>
</body>
</html>
And here's navigation.html:
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
What am I doing wrong?
EDIT:
New code:
<html>
<head>
<title>Main</title>
<style>
.active {
background-color: green;
}
</style>
<script>
$(document).ready(loadBar());
function loadBar() {
$('#bar').load('navigation.html', setActive);
}
function setActive() {
$("#home").addClass("active");
}
</script>
</head>
<body>
<div id="bar"></div>
<h1>Content Title</h1>
<p>Some content</p>
</body>
</html>
And navigation.html:
<ul>
<li><a id="home" href="index.html">Home</a></li>
<li><a id="page2" href="page2.html">Page 2</a></li>
</ul>
The navigation bar doesn't even load...
Your navigation.html code is missing the closing ul-Tag: change the last <ul> to </ul>.
The second problem is a little bit more difficulty. The page index.html can have multiple different values in document.location.href!
It can be:
http://www.stackoverflow.com/index.html
or
http://www.stackoverflow.com/
or even
http://www.stackoverflow.com
Your code wouldn't work for the last two versions of the url.
The third problem is, that the load() function can take a few seconds, so that the code isn't loaded at the time your setActive() is executed. You have to wait until load is finished. You can achieve this by using a callback function:
$(document).ready(loadBar());
function loadBar() {
$('#bar').load('navigation.html', setActive);
}
function setActive() {
var aObjects = document.getElementById("bar").getElementsByTagName("a");
for (var i = 0; i < aObjects.length; i++) {
if (document.location.href.indexOf(aObjects[i].href) >= 0) {
aObjects[i].className = "active";
}
}
}
You can give every link an unique id and then use this little javascript at the end of every site.
<script type="text/javascript">
$(document).ready( function(){
$("#IFOFYOURLINK").addClass("active");
});
</script>
EDIT:
Try to use
function loadBar() {
$('#bar').load("navigation.html", setActive);
}
I have a problem with creating 2 elements with different z-index.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.capty.css">
<script src="jquery.capty.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-jesse.css">
<script type="text/javascript" src="jquery-jesse.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fix').capty({
cWrapper: 'capty-tile',
height: 36,
opacity: .6
});
$('#list').jesse();
});
</script>
<style>
#list {
max-width: 640px;
margin: 20px auto;
}
div.capty-caption {
z-index: 999;
}
</style>
<title></title>
</head>
<body>
<ul class="jq-jesse" id="list">
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' target='_blank'><img class="fix" name="#content-target-1" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' width='100' height='100'></a>
<div id="content-target-1">
[x]
</div>
</li>
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' target='_blank'><img class="fix" name="#content-target-2" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' width='100' height='100'></a>
<div id="content-target-2">
[x]
</div>
</li>
</ul>
</body>
</html>
Example:
http://plnkr.co/edit/8HSgSbc96LlSQ66hgY79?p=info
How can I intercept a click on the caption?
I'm trying to set z-index: 999 for div capty-caption, but it's not working for me.
The event you are looking for is well described in Simple jQuery Plugin For Drag & Drop Sorting Of Lists - jesse
$('#list').jesse({
// executed when the item has dropped
onStop: function(position, prevPosition, item) {
alert('ok');
}
});
The onStop is executed at the end of mouseup event. If you do not need this but only the click event you may always use (I discourage you to follow this path):
$('#list').mouseup(function(e) {
alert('ok');
});
i want to make the map'e height is auto with the device's screen...
but when i change the style.height to auto, 100%, screen.height, the map is disappear...
how to make the height is auto?
this is my code...
script.js
$('#home').live('pagecreate',function(){
document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";
});
in index.html i just called
<div id="home" data-role="page">
<div data-role="header">
*my header*
</div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
</div>
if you use jquery you can do as below:
instead of this:
document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";
you can use:
$("#map_canvas").css({
'width':screen.width,
'height':"20em"
});
Please check this example:
I think your problem is related to css not to javascript.
The % height you want to set will be based on the parent height, so if the parent is empty, the 100% of 0 will be 0: check this
code example:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<style>
#map_canvas{
background-color:#00F;
}
#cont{
background:#F00;
height:200px;
}
</style>
<button onClick="doit1()">Click me to put something in map_canvas</button>
<button onClick="doit()">Click me to make the height 100%</button>
<div id="home" data-role="page">
<div data-role="header">
*my header*
</div>
<div id="cont" data-role="content">
<div id="map_canvas"></div>
</div>
</div>
</body>
<script>
$('#home').live('pagecreate',function(){
$('#map_canvas').css('height','auto');
});
function doit(){
$('#map_canvas').css('height','100%');
}
function doit1(){
$('#map_canvas').html('a')
}
</script>
</html>
I am making a webpage that is continuous scrolling. However I am unable to make it scroll smoothly
My html code is:
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- Logo -->
<a class="brand" href="index1.html">MAPPLAS</a>
<ul class="nav">
<li>Inicio</li>
<li>Portfolio</li>
<li>Equipo</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
</div><!-- end .container -->
</div><!-- end .navbar-inner -->
</nav> <!-- end .navbar -->
My function is as follows:
((function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500);
event.preventDefault();
});
});
})();
I think there is a problem because I have another function which creates a buttom back-to-top, that function is as follows:
((function() {
$('<i id="back-to-top"></i>').appendTo($('body'));
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop:0},600);
});
})();
The thing is that one is working smoothly ( the back to top ) but the other is not. I am not an expert on js and I have tried including completely separated js scripts but nothing solves the problem.
Anyone has an idea why is not working??Thank u!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style type="text/css">
.container{
width:300px;
margin:0 auto;
}
.section{
margin-top:60px;
}
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
HTML
JavaScript
jQuery
PHP
CSS
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p>
put your text about html here
</p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p>
put your javascript details here.
</p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p>
Put your details about javascript here
</p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p>
put your details about php here
</p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p>put your details </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var offset = 60;
var target = $(id).offset().top - offset;
$('html, body').animate({scrollTop:target}, 3000);
event.preventDefault();
});
});
</script>
</body>
</html>