Would it be possible for me to make edits on a particular item that is on all page on my website and have it be edited on all pages.
For example, if I had a sidebar on all pages of my website, and I wanted to change the announcements box within that sidebar to a new announcement, could I do so without having to make the changes on all pages? How would I be able to if so?
What you're looking for is an iframe, you'll find tons of tutorials about that, but here's a quick example:
In your page e.g. index.html:
<html>
<head>
</head>
<body>
<div id="sidebar">
<iframe width="100" height="500" src="sidebar.html"></iframe>
</div>
<div>
Your main page content
</div>
</body>
</html>
In your sidebar.html:
<html>
<head>
</head>
<body>
<div>
Sidebar content goes here...
</div>
</body>
</html>
Now anything you update on the sidebar.html will be updated on index.html.
Add this iframe to every page that you want to contain this sidebar.
Hope this helps...
Related
MY SERVER IS TOO BASIC TO SUPPORT PHP/JAVASCRIPT, ANY SUGGESTIONS?
I have a HTML website with multiple pages. I am using an identical menu on all pages and when I add a page I have to each page and edit the code.
I am wondering is there a way of adding a menu page that can be called?
I am using CSS/HTML is it possible to do anything to help? I have researched a bit and I think it involves PHP, but can PHP be used in conjuncion with CSS/HTML?
You can have the code for your menu in a separate html and call it in all your other html files
<html>
<head>
<title>test page</title>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="header">
<div id="menu">
</div>
Rest of the Header Content
</div>
<br />
<div id="content">
Main Content
</div>
<br />
<div id="footer">
Footer Content
</div>
<script>
$("#menu").load("menu.html");
</script>
</body>
</html>
You have to use php to be able to do that.
Do 2 separate files, one will be your index.php and the other menu.php
To include menu.php you have to add :
<?php include '../elements/menu.php'; ?>
in your index.php.
All your other elements still can be coded in HTML even if your new extension is .php
You include this menu on all your website pages and if you want to add a page, you just have to add the link in menu.php and it will appear everywhere.
just use #Html.Render("pagename.html");
When I click the link home on the page, the corresponding file opens up in the iframe shown by the arrow as it is targeted at it.
But, when I right click the link and click on open link in new tab then only the page corresponding to the link i.e the content of the iframe, opens up in the new tab and not whole layout.
What I want is that when I open that link in a new tab, the exactly same thing opens up in the new tab as shown in figure.
So basicly your problem is: you need to check if the iframe content is actually being open inside an iframe.
With window.top you can achieve that.
After that, if you content is not being open inside an iframe, make it redirect to the main page.
This is a sample, but i guess you can adapt for what you want:
home.html
<html>
<head>
<title>Main Page</title>
<head>
<body>
<h1>Main Page</h1>
Page 2
<iframe name="myIframe" src="page1.html"></iframe>
</body>
</html>
and page2.html
<html>
<head>
<title>Page 2</title>
<script>
if (window.top == window.self) {
window.location.replace("mainpage.html");
}
</script>
<head>
<body>
<h1>Page 2</h1>
</body>
</html>
I have been searching for a solution including many here on Stackoverflow but am still not able to get it working hence the question.
The aim is to place collapsible content boxes in a simple html page. After looking at several demos I feel the following looks best and quite easy to install (script is already hosted, only have to deal with html): http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_collapsible_sets
I have pasted the following into head:
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Omitted meta name and link rel because if they're included, the page's formatting is messed up (some header text becomes bold, buttons are misaligned).
The following was placed at the desired location on the page:
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
...
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
However, the hiding function is not working when I view the page in Firefox; everything is shown. Can someone advise please?
Thank you Andy. I've managed to get it somewhat working but found that it messes up my fonts and stuff. Removing this line from head
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
fixes it, but renders the collapsible set broken. I don't believe they're expecting people to put their code into a site that doesn't use CSS, and obviously I'm not going to dump mine and use theirs, so how can I make this linked CSS play nice with my existing one?
Also, I am trying to embed a a Jotform code into the set. However, even though I've pasted the code inside (tried embed, iframe, source) nothing shows up in the expanded panel. Help?
I have been learning Jquery Mobile also.
Your header needs the following, just basics so you can get it working :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>my test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
Now within your body try the following pasted within the body of pageone:-
<div data-role="main" class="ui-content">
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div>
I would strongly recommend spending a little time on the Jquery Mobile site http://jquerymobile.com/
The collapsible set widget is directly linked here http://api.jquerymobile.com/collapsibleset/
I'm probably thinking about this 'oldschool' but what am I missing?
I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.
I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.
In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.
My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:
<div data-role="page">
<div data-role="header">
<h1>MyApp</h1>
</div>
<div data-role="content">
<center>
<p>This is page 2. Click me</p>
</center>
</div>
</div>
Here is my demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function handlePageLoaded() {
$('#loadPage2').on("click",function(){
$.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
// Tried these as well:
//$.mobile.loadPage("pages/page2.php");
//$('#main_content').load("pages/page2.php");
alert ("#loadPage2.onClick()");
return false;
});
};
$(document).ready(handlePageLoaded);
</script>
<title>MyApp</title>
</head>
<body>
<div data-role="page" id="application">
<div data-role="panel" id="menu" data-display="overlay">
<center>
Close<br />
<a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
</center>
</div><!-- /panel -->
<div data-role="header">
<h1>MyApp</h1>
Me
</div>
<div id="main_content" data-role="content">
<center>
<p>This is the landing page.</p>
</center>
</div>
<div data-role="footer"><span class="ui-title" /></div>
</div>
</body>
</html>
I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.
So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?
you can use $.get to get common header
$.get('header.html', {}, function(response){
$('div#nav').append(response);
});
it will load common header in this div
<div id="nav" class="navcontain">
</div
I was wondering if anyone had any suggestions as how to structure a website. I have a logo at the top, I wanted a navigation bar below that, and finally below that I wanted to have the page's contents. I messed around with it for hours, but I can't seem to get the navigation bar to go below the logo and above the main content. Does anyone have any ideas? Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="slideshow.js"></script>
<style>
#Slideshow1 img { width:1200px; height:500px }
</style>
<title> Law Firm </title> <!-- Seriously, don't forget to change that.-->
<div class="heading">
<div id="head">
<div id="logo">
<img src="logo.png" alt="Logo" width="1700" height="175">
</div>
<div id="navigation">
Home
About us
Areas of Practice
Reviews
I'm running out of ideas
Boring....
</div>
</div>
</div>
<!-- Include content types, links to external resources, keywords for the search engine, epirations and stuff, and whatever else needs to go here like titles and website icons. -->
</head>
<body> <!-- Obviously, the body starts here. -->
<div class="main">
<div id="content"> <!-- Let's kick it off with some stuff, of course. -->
<!-- Now let's get some java up in here!! -->
<script>
var imgArray = new Array();
imgArray[0] = "images/pic1.png";
imgArray[1] = "images/pic2.png";
slideshowFade('Slideshow1','',imgArray,20,5000);
</script>
</div>
</div>
</body>
</html>
It might help if you made a JSFiddle of what was going on, but I think I can answer this.
1) You're putting stuff in the head tag. I think you misunderstand what it means. It's not the "heading" of the page, it is ment for information that won't show up on the page itself (like what the page is called, what type of page it is). EVERYTHING (Meaning every div) goes in the body tag! The body doesn't mean the body of the website, it means what shows up on the page!
2) I can only guess because you haven't attached the style sheet, but I'm guessing you don't have clear: both on navigation, heading, and logo styles.
3) To the same elements I mentioned in #2, you may also want to add display: block just in case that isn't already set.
4) If 2 and 3 don't work, try defining heights for all of the elements as well (Sometimes this works for me, depending on what is causing the problem)
1 doesn't fix your problems, but it's right. 2 should fix your problem, but you really need to put main.css into your question because I can't know for sure. Also, look into using a ul tag for menue. It's worth doing.
Here is a JSFiddle example: http://jsfiddle.net/5JqUt/
You cannot have structural elements (like your <div>s) in a <head> element. All structural elements belong in the <body>.
You are writing your HTMLK code in the head trag so it's not visible. You should
write everything in between <body></body> tags of your page. Just bring your <div class="heading"> out of the head tags and put it inside body tag.
Here is an answer about HTML, if you look at the fiddle examle then you can understand it a bit. Remember that, every visible elements in a web page is the contents of the body tag, which means that, whatever you see in a web page, belongs to <body>your page content goes here</body>.
Here's a little messy code (functional, though) that I make for you:
<body bgcolor="#f5f5f5">
<link href='http://fonts.googleapis.com/css?family=Lato:100|Lato:300' rel='stylesheet' type='text/css'>
<div style="position:absolute;top:0px;left:0px;width:100%;">
<center>
<div style="color:#c3c3c3;font-size:75px;font-family:Lato;padding-top:25px;font-weight:100;">designing rocks</div>
<div style="text-align:left;width:465px;font-size:20px;font-family:Lato;font-weight:300;padding-top:10px;"><span style="color:#00bbbb;">home</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span>
</center>
<div style="position:absolute;top:165px;left:0px;width:100%;">
<center>
<div style="text-align:left;width:600px;background-color:white;font-family:Lato;font-weight:300;padding:25px;color:gray;">I LOVE content!</div>
</div>
</div>
You can always do embellishments, like a hover effect for the navigation links...
Tell me if it's functional. :)
You could always scrape a little of the ideas for your project.
Oh, and the other answers are correct, the reason why your layout doesn't work could be due to the fact that the page content is in the head. The head is for the title of the page, (title), and scripts you want to load before any other go in the head. The body is the part of the page that's visible to the user.