I have built a website and now wanting to add a slide on load feature on a few content pages, not the entire site.
I have tried using Barba.js transition but it's not working. I'm not sure if it's conflicted with the jQuery scripts I already have on my website or not.
Is there an easier way for me to create this form of sliding transition between pages not sections or divs just the html pages (index.html > about-us.html and so on...)?
<!DOCTYPE html>
<html>
<body>
<img src="ADD YOUR IMAGE" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
</body>
</html>
Try with this example and If you need for this all the pages just add this to the all pages too.
Related
I have a website and I want to use my dropdown menu as a separate code from any links in website.
http://www.stelianpopa.ro/photo/ancar.html
I use the code for my menu in menu.html and I integrated on website based on this example: http://api.jquery.com/load/
The codes are loaded but most of the time the drop menu doesn't work, even if appear to be loaded, it shows only the first line and not the submenu for "photo" and "video"
Any help for that?
Basically wat I want is to have my menu as an independent file and to be loaded on any html on my website as a reference, because when I want to add something in the menu I had to do it on every single html and that's why I want to be standalone, to modify once for every html.
Sorry for my bad english.
If not already, make a html file that includes your menu (dropdown).
Then, on every page that you want to use the menu, include an iframe pointing to the html file you created for your menu.
For example:
Menu.html
<html>
<head></head>
<body>
<!-- code for menu -->
</body>
</html>
Every page you want to use the menu on
<html>
<head>...</head>
<body>
<!-- content -->
<iframe src='path/to/menu.html'>Sorry, but your browser does not support iframe.</iframe>
</body>
</html>
Hope this works for you.
Without templating, you can use javascript to load template onto the page. I would set up a mini project for this to avoid copy-pasting, but the basics are below
In the body where you want the menu:
<div id="my-nav-menu"></div>
script:
document.addEventListener('DOMContentLoaded', function() {
var menu = document.getElementById('my-nav-menu');
menu.innerHTML = 'menu html here';
});
Update
I just noticed the jquery tag, so you can use the following script instead:
$(document).ready(function() {
$('#my-nav-menu').html('menu html here');
});
I'm wondering if it would be possible to have common elements between pages that don't refresh when you change pages.
More specifically, what I mean is: I have a header that is common to several pages, and contains the links to the pages themselves. Only, whenever I click on the header, the whole page refreshes, with the typically annoying flickering that comes with it. I would like to know if it would be possible to have the header fixed between pages, so that when I click on a link to change page the content refreshes but the header doesn't. (The same goes for the background as well).
What I have right now is this:
<script type="text/javascript">
$(document).ready(function(){
$("#header").load("../header_footer/header.html");
});
</script>
and in the body (common to all pages)
<body>
<div id="header"></div>
</body>
Is it possible to do this with just HTML or Javascript?
Thanks!
Unfortunately, this isn't possible using traditional page loads. If you don't want the flickering, I'd recommend making your site a Single Page App. Basically, you'd be loading your page once in the browser, and then all subsequent pages are dynamically loaded into the DOM via Ajax calls.
<style>
#pg2,#pg3{display:none;}
</style>
<body>
<div id="header"><button onclick="page(1)">Page 1</button><button onclick="page(2)">Page 2</button><button onclick="page(3)">Page 3</button></div>
<div id="pg1">
</div>
<div id="pg2">
</div>
<div id="pg3">
</div>
<script type="text/javascript">
//<![CDATA[
var pg =new Array;
pg[1] = document.getElementById('pg1')
pg[2] = document.getElementById('pg2')
pg[3] = document.getElementById('pg3')
function page(p){
pg[1].style.display='none'
pg[2].style.display='none'
pg[3].style.display='none'
pg[p].style.display='block'
}
//]]>
I am trying to change the content of a div on the page but the page has a lot of things to load and on slower computers there is a flicker where you can see the div changing (changing through jquery btw). Is there anyway that everything can be hidden and display it all at including the changes I made using jquery?
I had a similar issue with my web application.. This is what I did
Hide body in HTML
<body style="display:none">
And write this script :
$(window).bind("load", function() {
$("body").fadeIn(100);
});
OR this script
$(window).load(function () {
$("body").fadeIn(100);
}
This creates beautiful effect and shows the page ONLY after everything is fully loaded..
Perhaps you could do something like
<head>
<style>
body{
display:none;
}
</style>
</head>
<body>
flickery <div></div>s go here
</body>`
And your script
$(window).load(function(){
$(document.body).css("display","block"); //shows it when all the elements are ready for presentation
});
i've this simple piece of code that don't work in Internet Explorer, but do work in Chrome, Firefox etc.
It is a simple button image 'rollover' .
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="document.images[0].src='p2.png'" onMouseOut="document.images[0].src='p1.png'" ></a>
</body>
</html>
What's wrong in IE 6,7,8 ?
Change your code to this:
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="this.src='p2.png'" onMouseOut="this.src='p1.png'" />
</body>
</html>
Also, I if your HTML page contains more data the the HTML page you've showed in your question, I suggest you put this code in the beginning of the <body> in order to preload the rollover image so there will be no delay when you want the rollover to work (otherwise, the rollover image will be downloaded to the user's device only when he hovers the image, causing a slight delay to the rollover (depending on the onMouseOver image size)):
<img src="p2.png" class="hiddenPic" />
<!-- loading (hidden) rollover image before all the other page data -->
And add the CSS hiddenPic class code: .hiddenPic { display: none; }
Other methods to preload the rollover image can be done using CSS or the JavaScript onLoad event handler.
onmouseover="this.src='p2.png'"
Use this instead of document.images....
Another method (works if you need to rollover change something else as well):
<img src="p1.png" name="img3" id="img3" onMouseOver="document.getElementById('img3').src='p2.png'" onMouseOut="document.getElementById('img3').src='p1.png'" >
http://jsfiddle.net/DNtUY/5/ (3 examples, yours, Said's, this one).
PS. Your open tag is <img ...> but the close tag is </a>
Maybe if the images are not that heavy, you might try a different approach like declaring both images and hide one of them. Then with javascript when you roll over the visible image, you hide it and show the other one.
Perfectly working code for your question mr.Stighy:
<html>
<head>
<style type="text/css">
</head>
<body>
<img src="../a_b_c/a.jpg" alt="" onMouseOver="this.src='b.jpg'" onMouseOut="this.src='a.jpg'" onClick="this.src='c.jpg'" class="style1"></a>
</body>
</html>
I think we messed up with the images, that's it... p.s. Giulio is waching you.
I want to make div into my intex.htm file (already built site) to place in a .swf file that will cover the whole screen, and a few seconds later the animated page will disapear and the htm page will appear. I don't want to make different htm file, neither put a button on flash(ie on click...). I just want after a few seconds and after the flash has ended, the flash will go away and the page will appear.
You can use jQuery...
<html>
<head>
...
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function(){
var flash_time = 5000;//in ms
$('#flash').delay(flash_time).hide();
$('#cont').delay(flash_time).show();
});
</script>
</head>
<body>
<div id='cont' style='display:none;'>
...content...
</div>
<div id='flash' style='width:100%;height:100%;'>
...embed...
</div>
</body>
</html>