I emplemented two html pages separately. how can put them in the same page (tabs system). ALl the example found on the net are more about simple content tabs (text or so..)
thanks
Call the files using iframe in tab content just keep your markup in html files and don't put any styles or script in that file.
How about using HTML includes?
https://www.w3schools.com/howto/howto_html_include.asp
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="<path to html file goes here>"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
working example here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1
Thank you for your answers! but I'm looking more for showing the content of the page. I'm already using frames in each page so putting it in frame is not the best solution for my case.
I think I found my answer in the load() function of jquery to load dynamically a page! here's an example: http://www.jquery-tutorial.net/ajax/the-load-method/
where you can simply add the link of the page.
http://www.jquery-tutorial.net/ajax/the-load-method/
this library is not bad too but I'm going for a tab system and a jquery load for each tab!
Related
Trying to organize my first website project, I want to set aside an html template to be used in several of my files.
From what I read about mhtml, this format is supposed to solve this problem, and the way to use it seems to be to simply change the extension to .mhtml. I then included the template in the .mhtml file like so:
<!DOCTYPE html>
<html lang="en">
<!--#include virtual="/templates/my_template.shtml" -->
<body>
I am a unique body!
</body>
</html>
With the included server side my_template.shtml looking like so:
<head>
I appear at the top of multiple sites where I am included.
</head>
When I do this and try loading the main page in firefox nothing is displayed anymore and I get a blank page.
What part of the syntax or procedure did I get wrong?
Can I achieve what I want to do without using mhtml
are there any other differences between mhtml and html?
Thanks in advance.
I have a site with nearly much pages with the same look. the only difference is the content of them. each page is stored in an HTML file.
The problem of the site is that during maintenance (i.e. for changing the site theme and look) the CSS is done very nice (because all the pages are linked to a single CSS file) but changing a small <div> block can be really annoying to apply individually for all of the pages.
Is there any other way to use to avoid this? like a theme for a blog.
My own idea was to place the new page contents (section part) into a bare HTML page and place it in the site's homepage using <iframe> then I will only have one page that is the main page. and posts are loaded into an <iframe> in the section part of the main page.
But this would reduce the site's SEO. because of having only one page.
What else can I do?
I want to do the same thing a separate CSS file does to the page style, to the htmls content. I want the theme to be unique in all the pages. and if changed, the changes applies on all of the pages.
There are a few ways to do this:
1) PHP: Using PHP, you can simply include an html file into another one
<?php include('fileOne.html'); ?>
2) jQuery: Using jQuery, you can load an HTML page dynamically into another (this is kind of hacky in my opinion):
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Source: Include HTML Page via jQuery
3) Framework: Using a framework like Python/Django, you can use {% include %} blocks to create standalone html files that can be reused like blocks.
<html>
{% include 'navbar.html' %}
</html>
My honest recommendation is #2 if you have to stay with just raw html, otherwise, if you are using PHP then includes are a no brainer. The last option is the frameworks, and that is really only if you have other heavy-duty functions you would need.
I have an html file which is linked to a CSS stylesheet and it is saved into my USB. I send it to a compressed folder and sent it via facebook to my friend, but when he opened it, the design in the first page is not loaded and the following pages cannot be displayed whereas here in my pc, it's working. It seems like it cannot locate the files and I think that it has something to do with the links and directories...
How am I going to send it so that my friend will be able to open it and see it in the same way?
Any help would be greatly appreciated.
If it's in a compressed folder, your friend will need to extract the folder for each file to be able to use eachother.
Or, if your friend isn't that tech-savvy, you could inline all the css (i.e. not link to it externally) and JavaScript into one .html file:
<html>
<head>
<style>
/* All your styles here */
</style>
</head>
<body>
<h1>HTML here</h1>
<script>
//Some js code...
</script>
</body>
</html>
I have a page and within the page I have an Iframe. The directory is as follows:
Folder1
Folder2
IframeCSS
IframeCSS.Css
iframePage1.html
stuff.css
parentPage1.html
In the iframePage it is referencing the IframeCSS.Css by use of relative link so /IframeCss/IframeCSS.Css
Due to the nature of the application, I am unable to change the link of the iframe page via hard code (Modifying the physical iFrame Html Page)
The overall goal is to get iframePage1.html to see IframeCSS.Css (and all other hrefs/src's) through relative links (href="/IframeCSS/IframeCss.Css")
There are a couple of things I've tried:
Dynamically add a base path to the Iframe
This failed because the base can only be added AFTER the iframe loads thus making the links act as if base did not exists
Create a container Iframe to get the HTML, add the Base, and copy over the Contents over to the displayed Iframe
This failed because of the reason above, this method also causes issues with Google Map API's being loaded in as well
Go through the container iframe, using jquery, append the parent root to all src's and hrefs's to change the url
This also failed.
What would you guys suggest I do at this point?
(The iframe points to the same domain AND the user needs to be able to navigate through the iframe)
parent HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="cmsCSS/CmsStyle.css" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="CmsScript.js"></script>
<script src="Insights.js"></script>
</head>
<body id="Dash">
<form id="form1" runat="server">
<div id="topDash">
<img id="something" src="img/logo.png" />
</div>
</form>
<iframe id="dashBody"></iframe>
<iframe id="iframeContainer"></iframe>
</body>
</html>
using your same directory structure, this -
href="IframeCSS/IframeCss.css"
didn't work? Without the "/" keeps it in the same directory. Conversely, using "../" means back one directory. So if you're trying to move backwards, you can just keep adding "../" (ex: "../../../stuff.css").
referencing a page within the same domain is simply not possible because even without the iframe, the page would not work with the relative file path:
Folder1
Folder2
IframeCSS
IframeCSS.Css
iframePage1.html
stuff.css
parentPage1.html
If you accessed the page by typing in domain.com/Folder1/Folder2/IframePage1.html
the page will not work because IframePage1.html is trying to access the css with:
href="/IframeCSS/IframeCss.Css"
which means that it is looking for domain.com/IframeCSS/IframeCss.Css and based on the file structure I provided, It simply does not exist.
What I was attempting to do was to simply somehow change the Hrefs and src's of the entire iframePage to instead of looking for domain.com/IframeCSS/IframeCss.Css, it would correct the link and search it in domain.com/Folder1/Folder2/IframePage1.html instead.
The solution to this is to put the contents of Folder2 in the root directory, and create a new directory within the new root that contains the parentPage1.html. This way, file paths need not to be changed.
if you have access to the page that is being rendered inside of the iFrame, then all you have to do is add your link inside the <head> tags on that page for the CSS. you should not have to do anything through the calling page.
you can view the page that is being called all by itself. so do everything for it all by itself. JavaScript and all.
create that page first. then call it into the other page. iframePage1.html should be finished before you think about calling it into an iFrame in another page. you should not have to do anything to it through parentPage1.html.
iframePage1.html should have it's own <html> tags, it should be a self sustaining page that can be viewed in a browser with out an iframe.
I feel like I am going a little overboard. but I want to make sure that it is understood.
I can call google.com in an iframe on my page, and it will look the same as it does if I opened it in a browser all by itself.
Found the Answer you are looking for I think
check out this fiddle, the iframe on the right has clickable links that you can navigate inside of that iframe with.
I set the sandbox to allow only a certain number of things, I didn't know about this prior to this question.
JSFiddle
here is the page that I found that told me a little bit about the sandbox, sounds like something that I will read about later
maybe something you should take a look at.
Sandboxed iframes
I thought that you could move around in the iframes, but I was WRONG , but with Sandboxing you can do this!!!!
I have a really hard time searching for this, because I have no idea how to call it.
I'll try to describe the process I want, and see if any of you know such an editor.
I have a website that has the same html component repeated in them, for example, a menu. I can define how the menu looks with css, but I can't (as far as I know) add the same piece of html to every html page with a simple line.
What I do, is copy the menu over to every place. If I change the menu, I need to do it all again.
I know this can be achieved by using a dynamic server, with something like php or jsp, but I don't need it to be dynamic.
I was wondering if there was a way to do this.
I thought possibly there was an editor, where I can edit html using includes, and then "compile" the htmls after modification to produce the htmls I will replace on my server.
Thanks
Have a look at server side includes ... create a menu.shtml page and then include it like so :
<!--#include virtual="/menu.shtml" -->
Its supported by most web servers out of the box (including IIS, Apache and lighttpd)
Have you heard about MasterPage Concept
The below link will give you a quick start
Master page are pages which will act as a frame for all other pages. You have to write it only one. And each page that is coming under that, will have to include the master page. Thats all!
You can do this with jquery
Assume you have page1.html page2.html etc.
You want in each of these pages your contactinfo. You can create a file with the name "info.txt". On the spot where you want this contact info, you put a div. as shown in this example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- page content -->
<div id="contact"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact").load("info.txt");
;
});
</script>
Whatever you place in 'info.txt' will be put on the spot of were you put
You could write a simple bit of js in an external file and then call it in each page to dynamically load the menu. You can then simply edit the menu by editting the JS file. all you'd need to do then is include the in the html and use document.getElementById("menu").innerHTML = menuHTML; where menuHTML is a variable containing the pure HTML code of the menu. You can then include the JS file and call it in the body onload