Example in code:
No page navigation:
<body>
<nav>
// Navigation links to the parts of the site.
// Clicking a link calls a javascript function to display the relevant <div>
</nav>
<section id="page1">
// Page 1 content
</section>
<section id="page2">
// Page 2 content
</section>
</body>
Page navigation:
// Page1.php:
<body>
<nav>
// Navigation links to parts of the site.
// Act as normal <a> tags, redirecting the browser to the new page
</nav>
<section>
// Page1 content
</section>
</body>
// Page2.php:
<body>
<nav>
// Navigation links to parts of the site.
// Act as normal <a> tags, redirecting the browser to the new page
</nav>
<section>
// Page2 content
</section>
</body>
Pros for link navigation:
The browser doesn't need to load the entire site all at once
No javascript needed to use the site
Provides direct URLs for easy navigation
Seems like the standard thing to do
Pros for javascript navigation:
For sites with heavy server-side scripting (like mine), minimizes page requests
No need for the same code in different places (the <nav> element, for example). Creating a echo_nav_html() function in PHP is not a good solution, as it makes coding in an IDE environment annoying
After initial load, site is superfast, as barely any new requests are sent to the server
Oh wise internets, any thoughts on this?
Or maybe more elegant solutions that provide the pros listed for javascript navigation?
The best solution is to do both.
Have valid links on the HREFs on your anchors, but include onClick actions that load the div and disable the progress to the HREF.
Read about graceful degradation and progressive enhancement.
There are lots of reasons to provide non-JavaScript code. Not all browsers support JavaScript. Lots of corporate networks still use ancient versions of IE that may behave unpredictably, or they may force configuration that disables JS entirely.
You want your site to be usable by everyone, but provide the best possible experience to those users who have the technology to support it.
If you are using a heavy dose of server side code (assuming that means dynamic content generation/population), I would probably use links to other pages as I can't imagine that loading all the content you could possibly access on the site on initial load is real resource efficient, especially assuming not every user will access ever section of the site.
You can still use javascript, but I'd only generate the content when it's actually requested; whether that be through an AJAX call (so the URL's being called there) or loading a new page. Seems kind of wasteful to me to load everything at run time...that's just me though.
Related
So I'm trying to build an informational page on my website that is fairly expansive, enough so that it has it's own Nav and Sub-nav.
The nav is currently built and now I need to introduce and link the content to appear the way that I want it to, but that's where I'm beginning to get lost in how I should structure it efficiently. I'll try to give as detailed a run-down of the structure it lives is as possible.
First of all, all of this must happen on one page of the site. The links in the navigation should trigger different content, but in interacting with this Nav one should never leave the page (I suppose reloading it is okay, but not preferable).
The page is loaded from a "template.php" that basically just has different div's that contain a function $definepage to load their content.
Something like:
<div class="middleArea" id="infoPage">
<div id="Nav" class="content">
<?php require($definepage); ?>
</div>
<div class="returnNav"><img>backbutton</img></div>
</div>
I want to add a separate div in this template that will be for showing the user's desired content dynamically without leaving the page. So if "Item 6a" is chosen this div will be loaded with the item's corresponding content, then if "Item2b" is chosen the div instead is loaded with that item's content - with the previous content no longer there.
I have about eight Main Nav items and six of them have multi-item subnavs. So there's a lot of content which is why I didn't want to have it all existing on the page and simply hidden and shown with the links for page load reasons.
But I need the links from the first div (in the template) to load the correct .php in the (to be) content area div, as well as stay "active" while the corresponding php is loaded to remain highlighted - show that that link's info is currently being shown.
Can this be accomplished through a href="#anchors"? Or can I somehow have the content area exist in the same div of the template, but still load from external php so all of it doesn't have to load with the page? (I figured php within php within php was a bad idea)
If you want to load some content without reloading the page, you may use AJAX.
You should use JavaScript to change the content of the page without reloading it/changing the URL, using AJAX calls as mentioned by #antoyo to transfer data between the server and client as needed.
Here's an example for an ajax request with jQuery:
http://jsfiddle.net/dj50uev5/1/
HTML:
<div id="placeholder">
</div>
<input type="button" value="Ajax Call Test" />
Javascript:
$('input').click(function() {
$.ajax({
url: "internalUrlOrFile.txt",
context: document.body
}).success(function(data) {
$('#placeholder').html( data );
});
});
I can't really provide a working sample where the content is added automatically due to cross domain origin policies.
Let me know if you need further clarification.
Possible Solution:
What if I use iframe to load a "separate site" as a separate directory in my site's root folder whose pages would contain the needed content. The links in the Nav would then be URLs pointing to the corresponding page in the "content site"?
Any glaring functionality issues here? On paper it looks like it would work.
*(Please disregard the previous idiom's ironic use for the web medium)
Fantastic community you have here, onto my first question.
I'm creating a blog completely from scratch, and already know that I can load content on scrolling events using jquery and PHP (to save loading it all at once). For those of you who don't know how or what this is, you can find a tutorial link here:
http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html
However, this method relies on javascript requests. In the name of good practice and for the 1-2% of people that still load the yahoo homepage with java-script disabled. This could result in a user only loading a few posts, or loading the entire set of posts. I'd like to find the best progressive workaround that will allow me to:
If Javascript is enabled (load content using the above JQ/PHP scrolling method as normal)
If Javascript is disabled (Grayskull Forbid!?) fall back to a more html/css reliant method automatically, without me having to design for it separately.
Quite a complex question, I hope it makes sense. If I'm thinking along the right lines, the html/css fallback might be to break up the content with separate pages and page buttons, but I'm unsure how the two might translate together, for instance, what I design for the JQ/PHP scrolling method seems to be within one loading page, where the html alternative seems to be on separated pages.
I could use some advice.
To give you an idea: pseudo code:
<noscript>
<!-- Server-side language generated pagination -->
1
2
3
</noscript>
<content>
<article>
<article>
<article>
<article>
<!-- JS pushes new content on scroll with AJAX, otherwise...-->
</content>
<noscript>
1
2
3
</noscript>
I'm making a radio streaming website using PHP. I need to keep my audio-player DIV static throughout the website. I need to changing URLs and page content, but player DIV must stay without reloading. This is something smiler to HTML frames in old days. My solution must also be search engine friendly. I'm really appreciate if some can help me with this.
I search everywhere to find an exact solution for this problem. But did not able to find something that clear enough for me.
Page structure is something like this
<div id='main_wrap'>
<div id="header">
<!-- Titles and other content. Different on each page. -->
</div>
<div id="player">
<!-- Flash live audio streaming player. same throughout the site. Shouldn't reload for constant playback-->
</div>
<div id="footer">
<!-- Other content. Different on each page. -->
</div>
</div>
You got a few options, you could use HTML5's built in history which will only work on selected browsers and then use Ben Alman or Jquery Address as a fallback for other browsers that don't support HTML5 history
What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.
However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.
EXAMPLE: http://rageslide.com/
As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).
I have this idea:
Cache the generated output of a page (http://example.com/2) for 60 seconds.
When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.
Different idea:
Somehow, http://example.com/1 is being interpreted as http://example.com/content.php#1 through a .htaccess. But I have no idea if this is possible or not.
Will this work? Or what would be the best way to solve this problem?
No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.
You can read more about it in this article and in the following questions asked in the past:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
i can think of two possible thing you can try out.
first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.
the other is to use the rel attribute, here is an explanation about it.
hope this helps you out
you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources
for caching images, put dummies at the end of the body
<img .... height="0" width="0">
and for pages
<link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages
Note: the url can be a javascript resource
Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback
I have some content I would like to share with other websites.
Currently I do this via an iframe:
<iframe width=“540”; height=“700” frameborder=“0” src=“http://www.energiekostencalculator.nl/forms/frame_tabs.php?first=yes&product=1&links=1&css=http://www.energiekostencalculator.nl/forms/susteen.css”></iframe>
This has two problems.
It is not SEO friendly. The links on the content of the iframes do not count as inbound links since they page is hosted on my server.
It is (on my server anyway) not possible to link outside css stylesheets to the content of the iframe. The objective is to allow other websites to easily link their stylesheet to my content.
Who has the solution to these issues?
Perhaps using jquery (see below), however I'm not sure Google would parse it and "see" the links...
<html>
<head>
<script src="/js/jquery.js" type="text/javascript">
</head>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
Have a look at how TripAdvisor does it - a static link and then javascript to replace it once the page has loaded.
<div id="TA_rated459" class="TA_rated">
<ul id="JRrkXsd6H" class="TA_links GYO6Zcd">
<li id="IN1Gc4AMw8T" class="zQkgIs4xdv"><a href=http://www.tripadvisor.com/Hotel_Review-g294207-d501440-Reviews-Ngong_House-Nairobi.html>Ngong House</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=rated&uniq=459&locationId=501440&lang=en_US"></script>
There are some better alternatives to iframe but its really up to the "other websites" to make it crawlable by creating HTML snapshots, Making AJAX Applications Crawlable.
As for your code example, Its not possible to load content from external domains, due to the Same origin policy.
Other iframe alternatives maybe a script tag, which most widgets use, where you tell your content users to embed your widget (script tag) into a parent div which will hold the content, and when your script loads it will automatically fill its parent element, with content.
There is a more "advanced" way of doing this but it might be limited by certain shared servers. Any other way I don't think you could solve your issues either by AJAX or iFrames. Since it looks like it's all html and javascript other than what gets parsed via php prior to the displaying of the page you should be able to load the actual contents of the site directly from server to server via fsocketopen and then do anything with that content from the other server. You could pregenerate code that could be used by your clients or customers on their servers.
A collection of links with no context isn't going to be SEO friendly, period. Spreading a chunk of HTML that just has some links in it around the web is just going to trash the PR of people who embed them. If you want SEO benefits, then you need unique (relevant!) content containing the links on each site linking in (otherwise welcome to duplicate content penalties).
Given that, you might as well just continue to use an iframe (assuming there is a benefit to showing the links to visitors to the other sites).
I think you could probably have a DIV with overflow: auto; (and specify dimensions). Then the HTML can be inside the DIV (and so part of the page) rather than in a separate file.
Maybe you should create an API. This will definitely solve issue #2 - allowing publishers to style up your content any way they like.
And about issue #1 - SEO - I'm not sure. Don't understand the language of the site, but to my understanding you allow people to embed some kind of useful calculator to their own pages, while the content of their pages would generally stay unique, so this may or may not be SEO benefitial, I'd also like to know if any SEO experts read this.