On a site such as http://failblog.org/, there are a bunch of photos with content around them. Whenever failblog uploads a new photo, it pushes the bottom photo of the first page onto the second page, and the bottom of the second onto the third, etc. How can I do this? I want to have a section of HTML (such as the contents of a <div>) automatically wrap onto multiple pages, and everything not inside the section will repeat. (As on failblog.org). Thank you.
Ok, you have 2 options.
Server-Side Only
You need something called pagination to occur- when there is too much content to display on one page, server-side code can create virtual "pages" for each page of content to display.
This can't be solved with HTML, Javascript, or CSS, this depends on the server-side language (such as PHP, Ruby, Python, etc) that you are working with.
AJAX
If you want to flip through content, though on the same page, then you might consider looking at a jQuery plugin that can do that for you. Here's a list of plugins that look like they might suit your needs.
Related
I am creating a training site where I have a table of contents on the left side of my page (currently using a DIV to contain that). I want the table of contents to have links to other external html pages that contain the content for the particular topic, but instead of taking me to that stand-alone web page for that content, I would like that content to be displayed (with the ability to scroll) within another DIV on the same page as the table of contents. By simply clicking through the different topics it would refresh and load the content on the right side.
I have built pages with 2 DIVs where I have the main body of the page in one div, and a table of contents in the second. The table of contents links to specific sections in the main body using the # anchor. But in this case, I don't want to build my entire training content in a single page and jump to different sections. Instead I want to have each topic be bite-sized into a separate HTML page and load it as necessary when clicking on the specific topic.
My knowledge of web design and terminology is limited, and so I work best by looking at other code that has already been developed, breaking it down, and tweaking it to my needs if there is anything out there that anyone is willing to share (assuming this can be done easily with traditional HTML and JavaScript code). I have seen similar topics where people want to load a specific page into an existing page upon opening, and mine needs to be dynamic to load any page at will.
Any help would be greatly appreciated, and I apologize if this question has been asked and answered already.
Say I want a web site with about 20 different pages. How should I go about building it so I can have the same content like a navbar and footer across all pages without having to copy and paste edits into each and every html file when something changes?
edit: I'm basically trying to figure out how to do Jade's include without installing Jade
That depends entirely on how you build it. If you are using a content management system (such as WordPress or Joomla) this is the inherent behavior. Header/footer content, and other areas depending on your use of widgets, etc. will automatically display the same content on every page. This content is easy to update site-wide in one location. Content management systems excel in this area.
If you are building the site from static files, and you are using a scripting language of some kind (such as PHP, ASP, etc) the use of includes would be a good option. Simply call the repeated block of code wherever you'd like to insert it on each page.
For example, if using PHP, you have a file that contains your legal text in the footer called footer_legal.php. Anytime you wished to include this content, you simply add the line include('footer_legal.php'); and the insertion happens.
What you're referring to is called templating and bootstrapping. There are various templating engines out there. It also depends on which server-side language you're running, as others said you maybe running PHP, NodeJS, C or something else, depends on your choice. The essential part is that you'll have separate files called templates (eg. .HTML, .EJS, .PHP, etc) for each element that repeats across different pages ( footer, header, content) and then you call that template where you want it.
I have a sidebar with basic link that should appear on every page:
about
engage
contribute
If I go from main page and click on about link, how to go to engage from that page?
I have created multiple directories with .html files for every page. Right now I am using this method:
href="../../engage/engage.html"
but it gets complicated when making more pages and subdirectories.
Also, bonus question, is that a good way to organize webpages?
Thank you.
Well, I believe your problem is only happening because of your directory structure. I wouldn't use it, as I prefer a more navigational and hierarchical structure.
This may turn out to be a big mess as structure grows, but when it does, you shouldn't be using simple HTML.
If you have a lot of duplicated code in different HTML pages, you may want to use something else, such as PHP, to load your pages.
For example, if you use PHP, you make your index.php page load the duplicated code everytime, like headers, footers, toolbars, and the content page based on a path parameter (e.g. /index.php?page=engage.html). The good thing is: when you load pages that way, using the include('engage.html'), all the links in the pages you load refer to the relative path from index.
Any links to your other pages would look like this: href="index.php?page=about.html". With proper setup, it may even be cleaner: yourwebsite.com/?p=somedir/page.html.
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).
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.