I am having a header which it will be uniform in all the pages. I want to make it generic. So I want to include common header in every HTML Page.
When i checked for HTML includes i cameup with SSI which needs a server. My Requirement is I want to include HTML file in another WITHOUT a server.
The way I would do it would be to make a "hanger" div with a class of .header. Then put a <p> inside the div to put alt text into. Then in your main css stylesheet apply your header image as a background image, and negatively indent the text.
Example
.hanger {background-image:url(header.png); text-indent:-1000px;}
To resize the header all you would do is put a width and height on div.hanger.
Does this help?
I've never heard of including html in another html file. I think what you can trying to do can be accomplished using an iframe.
example: header.html
This later question got an answer that works with files on disk provided you are using firefox.
Chrome gives a cross site scripting error
You could have a <div> for the header, I will call it <div id="header">.
Using jQuery we could say something like: $('#header').load(---html file---);. Aside from the pain it might be to include the JS file in all pages, it will allow you to make changes to the header globally throughout your application.
Related
I am writing a preview function to let user preview the HTML file they uploaded and do some minor editing. The HTML file will contain no Javascript and no external CSS. All CSS are either inside style tag or inline. Images, on the other hand, will always be external as we don't provide space for storing images.
iFrame is not a good solution, because:
The preview is before actually saving the content, so I cannot provide an URL for iFrame to load the page.
It is difficult to touch the element inside iFrame. As the user will be doing minor update in another text box showing the plain HTML, I will need to update the elements inside frequently.
However, if I just insert content into an <div> the repeated <html>, <head> and <body>tag will crash the page.
So, is there a way I can preview the HTML without iFrame?
if you dont want to have the main app to affect the styling of the preview, you need to use iframe. have you see iframe's content window? https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow. this might be the answer you are looking for. So basically here you try to access the DOM of your iframe. give it a try!
preview = getYourIframeDom();
code = getYourHtmlCodeHere();
preview.contentWindow.document.open("text/html","replace");
preview.contentWindow.document.write(code);
preview.contentWindow.document.close();
I'm running a large site, one that has a nav bar at the top. Rather than change the 100+ html files each time we want to change one of the buttons in the top nav, we want to switch the navbar to be displayed using an include of some kind. I want these includes to work on both Firefox and IE, and I don't want to have to change the extensions of each file either.
So far I've tried:
Javascript read file - This works fine on firefox, but IE has file reading blocked it seems.
HTML include - So far only works if we change the extension to shtml
PHP include - I know you can set up apache servers to run php scripts within html, but I don't know how to make this happen in SunOne.
iframes - I had to block iframes in order to comply with security standards.
I'm more than open to suggestions I haven't considered, or ways to make the above attempts work. Any ideas?
Eureka! I've found it!
So rather than include the html, why not just include the javascript and css? Every page will include a .js and .css file. The css can set the image src, and in each image I can use "onclick" to tell it to execute a function in the .js file with a simple window.location. Voila! Two quick changes will change the whole site!
Thanks to Mr. Lister for the CSS idea. That set me on the path.
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.
I want to create a static Facebook page, which should include some images and text. Are there any restrictions to what I can use? Ideally I'd simply thrown in my HTML markup, with images , styles and fonts hosted on another domain and be done with it.
If it's just images and text there won't be any problem but be aware that Facebook saves to cache the styles if you use the <link> tag and you won't see the changes you make on it right away.
I don't know much css or html, so I have a question about taking html that looks like this:
html code paste and putting into another page.
The problem is when I just copy and paste this into a webpage is completely messes up the background (turns it black) and overwrites other settings. How can I take that exported html and css so that I can paste the code I exported from emacs into a webpage and not kill other settings?
Ideally it would appear just as it currently looks but in a little box inside the rest of the page.
Thanks.
You can use an IFrame
Put the desired HTML/CSS/etc in another file. Call this file2.html
In your main file, use an OBJECT element to embed this document.
<object data="file2.html" type="text/html">
View file2
</object>
This will create a "box" with your file inside. You can style the OBJECT element in any way you wish. Removing scrollbars, adjusting the width, etc.
If a browser does not support the OBJECT element, then they will see the link directly to the file.
You could also paste the code someplace like http://gist.github.com/ or http://pastie.org/ where they also give you some code to embed the code snippet in your site/weblog/etc.
You can see an example of the embedded code (for gist.github.com) here: http://github.com/blog/605-new-languages-highlighted