Website: Same universal menu on different pages - javascript

I'm trying to put together a website that no-longer uses frames (my previously preferred method) but a singe page format.
One big problems I've found is that each page on the site will use the same menu. Now it occurs to me that if I amend the menu at a later date, then I'd have to change it on every page manually. This seems very time consuming and Inefficient.
Can anyone suggest ways I can alter the menu code once and have it on every page? I was thinking initially of embedding a javascript anchor to a js file on each page, then I would only have to change the js file. Are there better ways to do this?
The menu is a simple image and mix of text and anchor links.
I can program HTML/JS/CSS/C++ ... and willing to look at others if necessary to achieve my goals.
Thank you.

Make a separate partial view file containing your menu code and than include it on each page you need it to use the menu.
In PHP:
<?php require_once(__ROOT__.'/mainMenu.php'); ?>
In ASP something like:
<%# Register src="~/mainMenu/mainMenu.ascx" tagname="MainMenu" tagprefix="uc" %>
<uc:MainMenu ID="MainMenu" runat="server />
Ideally you can expand this logic and create a master template page and than feed just the dynamic content in it - that keeps all your code on one place and makes changes very simple.

Related

HTML sub-pages (using a domain)

I've been thinking about purchasing a domain and putting a website on it, but I'm not sure how I would add sub-pages. I'm probably using the wrong words, but I'll try to explain what I mean.
For example, the main page is stackoverflow.com. When you go to another page, it goes to stackoverflow.com/questions. Is this achieved using Javascript, or is it set up manually where you link an HTML file to the sub-page?
I'm not too sure where to start here, so any help is appreciated.
One of the simplest ways to set up a website with multiple pages is to create a folder for each page and an index.html file for each page. These can then be linked together using HTML anchors or JavaScript code. For detailed instructions on how to do this, I suggest checking out tutorials from W3Schools like how to make a website

How do I include a navbar in all of my HTML pages using vanilla JavaScript?

I am working on a website that has around ~20 pages. I also have a nice Navbar at the top that I want to include in every HTML page. I don't want to have to manually paste 30 lines of code in every HTML page just to have a Navbar. Is there a way I can just have a single Navbar HTML page (navbar.html) and include all the lines of code in that single page, and somehow have some HTML or JavaScript code that includes everything in that page at a specific location of my choosing?
If so, I need some direction in incorporating it. This would also be useful for my footer as well.
Thanks in advance!

Is it possible to use 1 JS file for 2 HTML?

I'm trying to write JS code so that when a button is pushed in the first HTML page, in the second HTML page some content is displayed. I tried to do it in one JS file but it did not work, so I'm asking if maybe I have to use two separate JS files and in that case how do they communicate with each other? I'm using jQuery.
I'm not sure if you mean that two HTML pages are of the same website or they are two pages apart.
But if you mean the both are of the same website, I advise you to do the functionally of the page 2 on a div in page 1 and then only change the content dynamically by clicking the button on page 1 by jquery. "append()" function must be very usefull for this.
If the two pages are not related and they are of the same website, you can pass a JSON to the LocalStorage and then use it in page 2 by appending the JSON values between the html tags.
Whatever, if the two pages are so different or are not of the same website, you have to develop a websocket with "socket.io" or just use another "listener" library (like "datatable" for jquery) to show the data dynamically in page 2 in the case data comes from a db (should be the best way).
Please let me know if this is usefull or how can I help more.

One page layout for a PHP webpage

I want to make a one page layout for my webpage.
And I want to make that so, when i click a button in my navigation bar, it to display a div i've created for my content, but normally is hidden. Also, when i click on the logo of the page, the page goes to it's original state (without the content div showing).
I have no idea how to do this.
I guess your using Javascript and / or PHP for this?
Can you guys give me an example how to do this?
Example: http://www.basjansenmedia.nl/
When you go to themeforest, there's a separate category called One Page themes. Do have a look at it. Or, why not you Google it for yourself? Anyways, a few tutorials would be:
One Page
15 Useful HTML5 Tutorials and Examples For Beginners
Coding a CSS3 & HTML5 One-Page Website Template
Single Page Apps with AngularJS Routing and Templating
Assuming you use jquery
$('#myButton').click(function() {
$('#myNewDiv').show();
$('#myOldDiv').hide();
}
($'#logo').click(function() {
$('#myOldDiv').show();
$('#myNewDiv').hide();
}

Loading external content with jquery or iframe?

Hiho,
There's an existing website that i need to include into another site which goes like this:
a.mysite.com
and i need to fetch content from this site in my
www.mysite.com
website...
As i need to access the content of the iframe the Same origin policy produces a problem here.
What i did was to configure mod_proxy on Apache to proxy pass all requests from
www.mysite.com/a
to
a.mysite.com
This will work fine...but my problem is that im not sure what the best way would be to include those pages.
1. Idea
As the content of the iframe is a full featured site with a top navigation...left navigation etc....i would need to change the page template to only show the content box to be able to integrate that page in the iframe.
2. Idea
I could just load the DIV where the content lies through JQuery.load() and integrate it into my site.
What is the best way to accomplish such a task? How bad is both ideas from the SEO point of view?
Unless it involves significant rework, the best solution is to combine the two into a single HTML page on the server side (using server-side includes).
Advantages:
No problems with SEO as it's delivered as a single page. Content in iFrames and content loaded via AJAX (with an associated link in the HTML) are traversed, but only the link, not the content itself is associated with the main page. See: http://www.straightupsearch.com/search-marketing/best-practices/seo_iframes_a_g/
Faster page load - either of your suggestions will cause the main page to be loaded first before the other content is loaded.
No reliance on Javascript - your second method will fail completely if javascript is not supported / turned on.
Include all JS and CSS only once - your first method will require these to be duplicated in the <head> of each page. This is more of a long term advantage if you wish to achieve full integration of site "a". However, it can be a disadvantage initially, see below.
Disadvantage:
May cause conflicts with scripts and CSS between the two pages. However, this same problem exists with your second method.
If you must choose between either of the two options you proposed, I would not select the second as others have suggested. Significant amounts of static content should never be loaded via Ajax, and in this scenario gives you no additional benefits. At least iFrames guarantee no JS and CSS conflicts.
Use the 2nd approach (jQuery.load) and if you're working with HTML5, for browsers that support the History API you can change the URL to whatever the content is for that div.
Check out https://github.com/blog/760-the-tree-slider for an example of how github did it for their tree slider.
EDIT:
I am not sure how using an iFrame whose src points to your own domain affects search rankings but at best it's a grey area. I would assume that possibly some pagerank would trickle from the parent to the child but I have no clue how it would work for instance if a blogger linked to your page with the iframe that pointed to another page. This would be a pretty good question to ask at the Webmaster Help Forum
Always say no to iframes. jQuery+Ajax all the way.

Categories

Resources