I have several HTML pages that share a menu area. Every time I update the menu area (eg with new "breaking news") I need to update all 10 pages manually.
With frames, they all point to same frame page so I only need to change one page. But I was told frames are bad and I should use divs. Is there a simple way to do this with divs? (preferably without JQuery or Ajax)
You could use an iframe. It still is sort of a frame, but you would avoid a frameset-index-page and if you set borders to 0 and content that fits in you won't even see borders or scroll-bars and it will behave like a div
<iframe style="border-width:0px;" src="news.html"/>
You should use fixed width-heights though to avoid scrollbars. To me its the simplest "html-only"-solution to your problem.
You could use jQuery's load() function.
You'd have to add the following to the head of each of your pages:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Then you'd have to add the following DIV where you want the content to be loaded.
<div id="breakingNews"></div>
<script type="text/javascript" src="http://example.com/news.js"></script>
Be sure to edit the link to the news.js file.
Then you'd create the news.js on your server, and add the following code:
$('#breakingNews').load('path/to/breakingnews.html');
More about load():
http://api.jquery.com/load/
Not the nice solution, but if you really want to have single point of menu definition, include it in the script which includes setMenu function and you load the script in every page's head and call a setMenu function on every page's body onload, which then sets the menu as innerHTML of the div that you include in every page specifically as a menu placeholder.
Client side templating may be a solution if you are trying to avoid server side solutions for dynamically generating your content.
Using ICanHaz.js templating, http://icanhazjs.com/, you could store your html as objects. Then either include them directly as .js files, or make ajax requests for them.
Related
I have a web site of more than 20 pages, all using the same dropdown menu. Currently, each page contains redundant HTML code for the menu, so if I want to change one thing in a menu, I have to change it for all the pages. I am using plain html/css and some javascript for my site. Is there a way to have my dropdown menu all in one file and include the reference to that file for all 20 pages?
I tried using the <embed> element to include the menu, but it did not work out for me since I cannot adequately align it as it leaves a large empty area right below it to allow for dropdown options. Not sure what is the best way to handle that
As suggested by Quetin Veron in the comment, PHP include statements are the best way to deal with it.
However, in case you're not interested in writing backend code, you can do that using JavaScript by parsing a json or an ini file/text in your script and converting it into the required links on the menu.
[Do note that you'll still have to use JavaScript for that]
If you'd not even prefer to use JS (Not recommended), you can use an iframe as the navigation menu
When you do that, add <base target="_parent"> in the head section of your iframe.
And then, in all other pages, add <iframe src="menu.html"></iframe> and replace menu.html with the path to the menu.
I hope this helps. However, please note that this just is a workaround if you wish to use frontend technologies only.
Otherwise use <?php include "menu.php";?> for PHP or for Node with EJS, use <%include "menu.ejs";%>
I made a drop down menu using HTML and CSS. Something like this: http://sneznipark-kg.si/
How can i put a menu in external file(so that i don't need to make changes to it on every page individually)?
I could use iframes, but the problem there is, that elements that "drop down", are only visible in iframe, not on the main page.
I found some solutions using PHP, but i cant use those, because contract with my server provider doesn't include databases (so i cant use PHP, right?).
I think you are looking for:
How to Make Website Navigations with PHP Includes:
http://www.youtube.com/watch?v=IMh2cGIX41g
Simple PHP/HTML navbar for a static website:
http://www.youtube.com/watch?v=v8PUIVn3NFE
As mentioned above, you should be able to use PHP.
If you're not opposed to jquery AND both files are on the same domain. You can use .load().
http://api.jquery.com/load/
You can use any container as a place holder. Like a div, then load the html page into the div. It will put the entire page into the div. So you probably just need to add the menu part, and not the entire html markup.
Scripts should be included in the <head> part is what I learned from w3c.
Why does Boostrap suggest to load itself in the <body> part as seen here:
http://getbootstrap.com/getting-started/#template
Scripts are technically supposed to be loaded and executed at where they are placed in the body. Imagine that your browser reads your HTML from top to bottom. If the script include is at the top of the document, then the browser is supposed to idle while it fetches the script from the web server.
A more detailed answer is available at
Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?
if the loading script is at the bottom of the body tage then it will be loaded last, making the rest of the page appear as if it is loaded faster
That really depends on that is on your page. If your page has things that need the js in order to work before displaying to the user, it would be wiser to load them before showing the html to the user
I'm trying to capture div#map-canvas from my site, www.RichBlocksPoorBlocks.com, to make an iframe that people can embed anywhere.
Here's my iframe
<iframe src="http://www.richblockspoorblocks.com#map-canvas" style="width:600px; height:400px;"></iframe>
It goes to div#map-canvas, but it also loads the rest of the page as well. I'd like that div to be the only thing in the iframe.
Is this possible with an iframe?
To achieve this, it would be easier to create a separate .php or .html document which contains only the parts that you want to show in the iframe and exclude everything else.
So, instead of the iframe pointing to "http://www.richblockspoorblocks.com#map-canvas", it would point to something like : "http://www.richblockspoorblocks.com/map-canvas.php".
This would be a very quick and efficient way of doing what you want, and doesn't require any outside libraries or javascript.
When you call http://www.richblockspoorblocks.com#map-canvas the hash will probably cause the browser to look for a corresponding <a name="foo">bar</a> so this won't work using an iFrame.
What I would recommend doing is writing a script which you call from your iFrame which accepts the name of the page fragment to load. I know using jQuery's $.load() you can call an element ID to load a page fragment, and I think it's also possible in PHP too...
You cannot use hash links in iframes.
You can and should use, few lines of you'r favorite server side language to create the specific content you want to render and then link to it. in that way, you'r server will send out to the end user only the desired data and also it saves bandwith and loading time.
Right now, I have a jQuery UI pop-up dialog that reads from an external page. This page reads from another external that has a video via flowplayer.
I'm using iframe to embed the video in the first:
<div id="donkeyVideo">
<iframe id="iframeDonkey" width="100%" height="496" src="../../../../video/donkey-2009-02-23.html" frameBorder="0"></iframe>
</div>
The width seems all right with 100%, but 100% height doesn't work. Is there a way around this?
Where and how do I embed the code, as well as the ID stuff. Please anyone, help?
You'll have to use some sort of JavaScript to dynamically adjust the height of an iframe if you want to use something like 100% rather than a pixel value.
Unfortunately, my understanding is that you cannot dynamically alter the height of an iframe that is pointing to a different domain than your own.
From lost-in-code:
jQuery : Auto iFrame Height
Please note that this jQuery autoHeight plugin will not work with iFrames accessing content from a different domain or remote location since the window object originating from a different domain cannot be accessed from the current one due to JavaScript security restrictions.
if you don't want to use a jquery plugin, you can do it simply using the method I've explained on my facebook post (https://www.facebook.com/antimatterstudios/posts/10151007211674364)
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using