Hi I want to create a website which has the following structure:
The idea is to have a menu in the left and border images in the left and right frames. the header will contain the page title and also user information (i.e. logged in, log out button etc). The content region is the one where the site content is displayed. I want to only update this as buttons are pressed in the menu in the left frame...
How can I achieve this using iframes? Sorry I am a HTML noob.... Are frames the best approach? I just want to have a part of the page that updates as opposed to the entire page redrawing each time..
Actually frames are NOT a good approach. You should avoid frames and completely forget about their existence if possible. Frames are evil.
Better approach is use of a preprocessor (PHP, ASP, Python,..) to include parts of the page into HTML. There are many frameworks and templating systems which will do the hard work for you. E.g. for PHP see Smarty temlating engine.
If you don't want browsers to reload all page but only content in the middle of the page AJAX is much better solution.
Update:
In jQuery you could use jQuery.click() and jQuery.load() functions to load and place new content into page when a user clicks on a menu item.
Best practice when using ajax to load new content dynamically is to provide also alternative for machines with disabled JavaScript (e.g. search engines crawlers). However it's bit more complicated to implement this properly from a scratch, but there are some frameworks which can help you. Personally I prefer Nette Framework because it's lightweight and efficient in comparison to other frameworks.
Related
I am building a website on Drupal 7 and want to add an audio player on the front page, and when the user goes to another page, I want the music to remain uninterrupted (to continue playing).
Is this possible without using frames tag?
You can do this by using javascript (more likely jQuery etc.) to load your content (via AJAX) into the page and insert it into a content block. This will allow you to avoid frames but adds new problems. For one you will need to change the way that most of what Drupal does for you to allow for this AJAX loading of content. That means the menus will need to trigger javascript not load a page. The same goes for links in the content.
With some clever jQuery you can bind much of that linking functionality with some live() events, but if you've never done that before it will be a bit tricky. To be more specific with this I'd need to see how your code really looked.
A plugin like jQuery BBQ can take some of the pain out of this technique but it isn't going to be a magical solution, just a powerful tool so you can do it yourself. http://benalman.com/projects/jquery-bbq-plugin/
Is there any other way to access one and the same menu without re-adding the code for it in each "page"?
I mean a menu looks exactly the same, no matter which part of the site you´re in.
So there should be a way to have that menu attached to every page on the site without adding the code for every page you create?
Which language you want to use for your site development?
There are lot of frameworks available for each language.
For example struts with tiles in java.
In tiles concept you will be defining some base layouts. which will specify header here sidebar here etc.
Then on next pages you can simply extend your new page into your base layout. There even if you are not specifying any content specifically, it will take previously defined one by default.
For example refer the struts tiles example link.
In jsp there is an option to add a page within an another page. Key word is
<%# include file='menu.jsp'%>
here menu.jsp is mu menu bar, which I am calling to a location in my page. So hat it it will appear in the place where I specified. If you are not comfortable with tiles concept, you can use this method for adding menu into your pages with out repeating entire codes in all pages.
There are a good number of ways to do this, and as far as I am concerned, they all use PHP or something similar to generate the HTML menu code on each individual page.
The browser must have all the content or it will not display a particular part. One can either hard code something like a menu into every html page or they could create something more of a php site which generates the html and serves it to the browser.
Other the writing the php yourself, off the shelf solutions will (often) allow you to do this. Examples would be shopping carts, as well as content management systems (CMS).
I'm currently evaluating the combination of jQuery Mobile and PhoneGap. For my application, I need a kind of "inner application" navigation model: A fixed header that contains elements to switch between various contexts and functions, and the entire region below that depends on whatever function is selected. An example: The user selects a customer and can then switch between different data and statistics views concerning that customer. Alternatively, the user can switch between different customers while keeping the same view. Each function / view might again be a rather complex construct of multiple pages with its own navigation.
I think I understand the basic ideas of jQuery Mobile by now, but I'm unsure how to implement this "the right way".
I could do this simply by coding the entire header with the navigation into every single page, but that feels like a really bad idea - lots of redundant code, lots of places to insert tiny mistakes that are very hard to find.
I could try to add all the UI elements for the different views to a single page, hide them and only display the ones that belong to the current function. This doesn't feel right either - I suspect that the DOM would be really large and I suspect that this might cause various (performance) issues.
I could try to create the contents of the page that depend on the function dynamically using jQuery DOM manipulation techniques. This sounds like a good idea, but the individual pages can be really complex, and I'm worried that generating lots of complex HTML code using JavaScript will lead to an unmaintainable blob of code.
I could try to combine the approaches - code the individual pages in the HTML file and then somehow "link" them into the appropriate place using DOM manipulation - but I've never done that and I'm unsure if and how I can get this working.
I could try to put the "detail" page into an iframe - would this work at all?
What is the best / canonical way of implementing this kind of application? Do you know of any tutorials or examples?
Just detach your header and then reattach it to your new page. For instance:
$footer = $("#myfooter");
$header = $("#myheader");
$footer.detach();
$footer.appendTo('#newpage');
$header.detach();
$header.prependTo('#newpage');
$.mobile.changePage('#newpage');
Detaching does not kill all of your button handlers / etc. You will need to keep track of what page you are on or look at location.hash to do different things depending on what page is being shown.
--Greg Frame
Thex Interactive
www.thexinteractive.com
The first way is the easiest way to do it. That's the way i did it too. Also this gives u the freedom to add a button specific to whats in the browsing area for that page.
The second approach will have loads of extra calls which you don't want.
The rest of the approaches are not worth the effort.
I'm in the process of writing a website and I want some tabs on the side of my website. I want the website to flow well, so I don't want a simple graphical link to a website, but rather an interactive tab system where you can click on what you want and you will get there instantly.
My experience is limited to XHTML and CSS, so I probably am not advanced enough to know how to do this, but I am willing to learn anything needed to accomplish making my vision reality.
Sorry I can't give examples. I know I've seen it before, I just can't think of where.
Use Javascript; I would recommend jQuery.
Approach 1: The idea is to initially hide the contents of the tab, then show the corresponding one when a tab is clicked. There's already a JQuery Plugin for this: http://jqueryui.com/demos/tabs/
Approach 2: If you have huge contents, I would suggest to use AJAX to load the contents of each tab on demand. This way, all of the contents are not loaded in one go thus saving bandwidth and improving performance. However, this approach needs knowledge in server-side programming, in a way this is more advanced than Approach 1.
There are plenty of examples of HTML/CSS layouts on the internet. Here are some resources:
http://www.maxdesign.com.au/articles/css-layouts/
http://www.code-sucks.com/css%20layouts/
I'm building a small-scale website (a personal one) in which each page would have the same set of header elements (I'm not talking about the <head> element). In other words, I want each page to have essentially the same title at the top of the page and the same navigation bar below that (with possibly minor differences in each page). It's kind of like how StackOverflow has that navigation bar (with the logo, and the Questions, Tags, etc. buttons) on the top of every page.
Is it possible create such a header for every web page without copying and pasting the HTML code to do so? I really don't want to run into a situation where if I want to make a single change, I would have to change all of my pages containing the header.
Real web sites use real web frameworks, which have a concept called a "layout" (at least that's what they're called in Rails; as mentioned in Uwe's answer, they're called master pages in ASP.NET). All the common "templatey" stuff goes into a layout.
How about include files in a server-side language like PHP or master pages in ASP.NET?
You need to use some kind of dynamic page processing, whether it's PHP, a server-side include, or a similar tool.
If you need to stick with straight HTML, you could try to rig something up with AJAX or JavaScript - but then you highly limiting your website's functionality, giving it serious performance issues, AND preventing users who have JavaScript disabled from using your website.
A third answer is to use some sort of pre-deployment tool. This used to be a bigger market, but I think it's mostly dried up now. Here's an example for using DreamWeaver to handle this.
If you have a PHP server that supports PHP,
<?php include 'header_inc.php'; ?>
If that's not available
<!--#include virtual="header_inc.html" -->
But whether this works or not is server dependent
If you have a server with PHP capabilities
include 'header.inc.php';
you must put the header code in a file named that and then put that include code in all pages that you want the header to show up on