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'
}
//]]>
Related
I'm building a site that can only be seen through an iframe. I also added a script that auto resize height can be adjusted.
But loading my blog so the added weight of having to load two pages at once. To cope, I apply the OnClick to load the iframe.
Auto Resize But it turned out to not work.
Load Iframe code:
<script type="text/javascript">
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div><div id="starApps"><span onclick="okeBos()">Load Iframe</span></div>
Do you know how to work the Auto Resize for tricks like this? Please help me, thanks ..
EDIT
The following code snippet Resize My
Stored at sites that are loaded:
<script src='http://britha.com/Upload/MyFile/iframeResizer.contentWindow.min.js' type='text/javascript'></script>
<script>
var iFrameResizer = {
messageCallback: function(message){
}
}
</script>
Stored at the site containing the iframe:
<script src="http://britha.com/Upload/MyFile/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">
iFrameResize({
log : true,
enablePublicMethods : true,
enableInPageLinks : true,
});
</script>
UPDATE
What I know about iframes is that they are usually the last on the DOM to load, so you have to expect a lag sometimes. I have neglected to ask if you can even load an iframe successfully by normal means (i.e. in the markup (HTML)). Anyways, I strongly suggest that you load your iframe the normal way because it won't be recognized by the iframe-resizer plugin. It has to coordinate between 2 pages, calculate, and adjust so I'm pretty sure it takes loading times into account. An iframe that pops up whenever the user decides to press a button is like 5 years to a computer (not scientific fact just an exaggeration).
I have made a Plunker and used the example provided by this repository and I added some of my own tests as well. Here is the most important code:
Parent Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.min.js"></script>
<script>
iFrameResize({options});
Child Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
<script>
MOST IMPORTANT: DO NOT CREATE THE IFRAME DYNAMICALLY
PLUNKER
OLD
Please explain how it doesn't work. It functions in this Snippet...How am I supposed to know what to fix if I do not have the auto-resize script?
SNIPPET
<script>
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';
document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div>
<div id="starApps">
<span onclick="okeBos()">Load Iframe</span>
</div>
problem is, that the website is loading like for about 20 second or longer (user-problems preprogrammed)
my solution was to load a pre-site where the user sees a loading screen.
i did this with this html-site but i want to do the same in php.
the test-page is http://kater.selfhost.me/test/
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("siteLoader").style.display = "none";
document.getElementById("container").style.display = "block";
}
</script>
</head>
<body>
<div id="container" style="display:none">
<div id="body">
<iframe src="http://kater.selfhost.me/stats/skins.php" frameborder="0" height="2000px" width="1024px"></iframe>
</div>
</div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0'>
Please wait while the page loads...<br /> <br />
</div>
</div>
</body>
</html>
i tried some workarounds, but after searching & testing for about three hours i give up...
thanks in advance for any help provided! :-D
Adding what I alredy said at your question commentary, I made a code loading this content via AJAX:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
//Load content
loadAjaxContent();
});
function loadAjaxContent()
{
//VERY IMPORTANT: the URL domain MUST HAVE be the same as your request
//that's why I'm not writting the full http://kater.selfhost.me/stats/skins.php
$.ajax({
url: "/stats/skins.php"
}).done(function(data) {
//remove loader
$("#siteLoader").hide();
//put PHP content
$("#ajaxContent").html(data);
});
}
</script>
</head>
<body>
<div id="body">
<div id="ajaxContent" style="width:1024px;"></div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0' />
Please wait while the page loads...<br /> <br />
</div>
</div>
This is the most used way to load asynchronous content in the web. But pay attention at this: The http://kater.selfhost.me/stats/skins.php page is made to open as single page in the web, so it has <html> , <head>, <body> , etc.. tags, so..after loading this page into another you'll have two <html>, <body> .. tags in a same page, this is bad, but modern browsers have an awesome common sense and don't bother by this, but you should know that, and be aware.
The actual problem why it isn't loading yet, is this javascript in your content:
<script type="text/javascript"><!--
EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//-->
</script>
I removed that and now works fine. Remember that's a quick fix, I don't know what this JS does.
Why it works in <iframe> and doesn't via AJAX? When you open in <iframe> is like opening in a new browser window..and via AJAX, as I have said, it'll load the page content straight inside your "parent" page.
So, removing this Javascript will work, but awesome further solutions:
If you need to open this page both as content to load (via AJAX), both as single page, you can make two pages.. one for each need.
If you just want to use as content to load, remove <html>, <head>, etc.. tags, and fix Javascript to work inside another page.
I wanted to insert this ad code.
<script type="text/javascript" src="http://website.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script>
right after
<div id="adminmenu"></div>
So that the output of the script will be displayed after the adminmenu div
Is there a way to do that using jquery? I tried .insertAfter but it only works on plain html.
Render the content first in a hidden, temporary container:
<div class="temp">
<script type="text/javascript" src="http://website.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script>
</div>
then move the contents after it is rendered:
$('.temp').contents().appendTo(finalDestination)
If a script is using document.write() to emit content, then you have to place the script in the place that you want the content to go.
If you control the script, then you can have the script not emit it's content by default and you can call a function in the script and pass a parent object that directs the script where it should put it's content (which it will not use document.write() to create).
The only other option is to place a div around the script, let it emit the content into that div and then move that container div to another location in the page after it runs.
<div id="ads">
<script type="text/javascript" src="http://website.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script>
</div>
<script>
$(document).ready(function() {
$("#ads").appendTo("#myFooter");
});
</script>
I'm not sure exactly what you're trying to ask about jQuery. jQuery is capable of inserting dynamically created content anywhere you want in the page. You'd have to ask a more specific question for us to advise in more details.
i need a javascript code that would enable me, on a certain button click to let a panel open which contains another page not under my domain for example, www.google.com!
Press Here and upon pressing it, a popup will appear or a panel will become visible that contains Google.com in it!
thanks!
In a function that you bind to the click event for the element you want to click on: Create an iframe and set its src, then append it to an element already in the document.
I'd look into using jquery http://docs.jquery.com/How_jQuery_Works
It's hosted on a CDN so it's easy to include in a document and many browsers will already have it cached decreasing the pages load time.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
jquery is a lightweight javascript library that makes selecting and manipulating page elements REALLY easy.
$("#button").click(function () {
$("#hiddenDiv").slideDown();
});
The hidden div should contain an iframe to display the off-domain page.
http://www.w3schools.com/html/html_iframe.asp
Oh and if you need to dynamically assign the iframe then look into the jquery append function http://api.jquery.com/append/
$('#hiddenDiv').append('<iframe src="http://www.google.co.uk"></iframe>');
This should put you on the right tracks.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show_frameDiv').click(function(){
$('#frameDiv').show();
});
});
</script>
<style>
#frameDiv { display: none; }
#frameDiv iframe { width: 100%; height: 600px; }
</style>
</head>
<body>
Show external site
<div id="frameDiv">
<iframe src="http://www.bbc.co.uk">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
This will work only if the site you are trying to display allows frames. Otherwise you may need to open the site in a separate browser window.
use window.Open method like this:
window.open ("www.google.com","mywindow");
see
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
for more details.
How can I give javascript for every div instead of the whole page?
<head>
my jquery
my javascript for the whole page
</head>
<body>
<div id="cc1">
Some content - I want to add Javascript for this div
</div>
</body>
I know we add javascript only in head of the page or we call functions write in external js in onclick of html button events.
I need separate JS for each div because I am going to have a <noscript> in every div to show some static ad content if user has disabled javascript ; else if user has already enabled javascript, I am going to generate a dynamic ad content with my own javascript.
So how you do it?
It sounds like you're wanting to do something like this:
<div>
<script type="text/javascript">
document.write("Content A");
</script>
<noscript>
Alternate content
</noscript>
</div>
<div>
<script type="text/javascript">
document.write("Content B");
</script>
<noscript>
Alternate content
</noscript>
</div>
This is an old-fashioned way of doing things and I don't recommend it. An alternative to using inline script/noscript tags is to put the "noscript" content in the divs, then replace the content with JavaScript after the page loads; that way, if JavaScript is disabled, the original content will remain.
If I get your question correctly, you cannot really add JavaScript for a div, you should add it for the whole page and then use it just in that div.
To make something happen inside that div, you have to work with <script> </script> tags and address that particular div. Otherwise just add another .js file on the head of the HTML file to make it do something on that div.
Hy
You can get a reference of that DIV, with var dvo = document.getElementById('id_div');
Then you can do and apply what you want to only that div.