|
HTML - How To Make A Selection Guide ?
Hey im making a gaming gear review site and i want to add a Selection guide to help people choose the right gear for them.
Link below is something what i am thinking about but using drop down lists instead. http://www2.razerzone.com/MouseGuide/configurator/ i know how to make a drop down lists but i don't know how to link the information together also how would i produce the final result. Any help would be appreciated. Similar TutorialsAn HTML guide for the beginner's: The tutorials on this site are geared toward the newcomer. However, the reference guide provides useful information that would be useful to anyone. http://www.halshtmlschool.com/ Here's the link: http://www.thoughtcrux.com/blog/html-heading-guide Introduction: Seeing as this question is brought up very often, I hope this short guide will be a destination for users seeking information about the topic. Although this is a server-side issue, those who are not aware of this fact generally seek help in HTML/XHTML, so this is where the topic will remain Note: Read the answers to Frequently Asked Questions in the next post! Hasn't this been done before? Absolutely; this is meant as a straightforward stickied version that brings a few things together and references previous threads where you can find further details. If your question is somewhere in the realm of one of these, you're in the right place: How do large websites manage their content? How do I make the same content appear in multiple pages without copy/pasting? How do I automatically update parts of different pages, without editing every file? How do I avoid duplicating code in multiple files? Is there an alternative to IFrames? The answer is using PHP Includes, SSI (Server Side Includes), or ASP Includes. Each will be discussed below. Basic Concept: Let's assume we have a basic HTML page with a few links that represent a navigation menu (we're using HTML5 markup for simplicity): Code: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Main Page</title> </head> <body> <div> <ul> <li><a href="home.html">Home Page</a></li> <li><a href="gallery.html">Gallery Page</a></li> <li><a href="about.html">About Page</a></li> <li><a href="contact.html">Contact Page</a></li> </ul> </div> </body> </html> This HTML page is now our basic template for subsequent pages that we create, which traditionally meant that we copy and paste our menu into each one. However, what if we end up creating 50 pages and then find out we have to add another link to the menu? Our only solution would be to add the link to each page. In order to avoid this, we separate our menu from the rest of the page like so: Code: <div> <ul> <li><a href="home.html">Home Page</a></li> <li><a href="gallery.html">Gallery Page</a></li> <li><a href="about.html">About Page</a></li> <li><a href="contact.html">Contact Page</a></li> </ul> </div> Save it in a file, and then place an include on every page where we want to display the menu: Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
code for including menu would go here
</body>
</html>
This setup lets us update our menu file, and have the changes be immediately reflected everywhere we placed our include. The concept is most often used with things like menus, headers, and footers, but it can be used with anything and we'll now discuss how it's done in practice. Note: The attached zip contains working examples of all three methods. PHP Includes: General Requirements: Your web-hosting provider must support PHP, which most of them do. If your host does not support PHP, I would suggest switching hosts. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to run PHP. The easiest way to do this at once is by installing XAMPP. Required Filetypes: By default, servers will only parse PHP code inside files with the .php extension. Therefore, you must change the extension of any files you want to use includes in to .php (e.g. index.html becomes index.php). Although your main file must have a .php extension, you can include files with extensions such as .html, .txt, .inc, other .php files, and more. Syntax Here are two ways to include a file in PHP: PHP Code: <?php include('file_to_include.html');?> or: PHP Code: <?php include 'file_to_include.html';?> Note that you can also include full URLs if URL file-access is enabled in your server's configuration: PHP Code: <?php include("http://www.google.com/");?> Code Example: (some_page.php) Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Include</title>
</head>
<body>
<?php include("menu.html");?>
</body>
</html>
Server Side Includes (SSI): General Requirements: Your web-hosting provider must support Server Side Includes, which most of them do. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support Server Side Includes. If you are using Apache, you can find information on enabling SSI here. If you are using IIS, you can install Server Side Includes inside Windows Features > World Wide Web Services > Application Development Features > Server Side Includes, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse Server Side Includes inside files with the .shtml, .shtm or .stm extensions. Therefore, you must change any files you want to use includes in to have one of these extensions (e.g. index.html becomes index.shtml). Although your main file must have one of the above extensions, you can include files with extensions such as .ssi, .html, .txt, .inc, and more. Syntax Here are two ways to include a file using SSI: Code: <!--#include file="menu.ssi" --> Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.ssi are in the same directory. Code: <!--#include virtual="includes/menu.ssi" --> Is used to specify a path relative to the web root. The above assumes that menu.ssi is located inside webroot/includes Code Example: (some_page.shtml) Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SSI Include</title>
</head>
<body>
<!--#include file="menu.ssi" -->
</body>
</html>
ASP Includes: General Requirements: Your web-hosting provider must support ASP. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support ASP. If you are using Apache, you can find information on enabling ASP here. If you are using IIS, you can install ASP inside Windows Features > World Wide Web Services > Application Development Features > ASP, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse ASP code inside files with the .asp extension. Therefore, you must change the extension of any files you want to use includes in to .asp (e.g. index.html becomes index.asp). Although your main file must have a .asp extension, you can include files with extensions such as, .html, .txt, .inc, other .asp files, and more. Syntax Here are two ways to include a file using ASP (The syntax is exactly the same as SSI): Code: <!--#include file="menu.html" --> Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.html are in the same directory. Code: <!--#include virtual="includes/menu.html" --> Is used to specify a path relative to the web root. The above assumes that menu.html is located inside web root directory/includes Code Example: (some_page.asp) Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ASP Include</title>
</head>
<body>
<!--#include file="menu.html" -->
</body>
</html>
please help me guys!!! im trying to find a html code that allows people download a pdf files from the website that im trying to make..anyone out there help me.. Hello all I'm writing a mash up that has drag-able objects the problem is when I drag the object too fast my browser is selecting the text behind the object. So the screen behind the object keeps flashing blue. Is there a way to disable selection for a text block or change the color of what I select. Hey, I have a script at present which pre-loads 6 images and displays them on screen. I want a user to be able to select a checkbox next to the images so they can select which ones they want to use. On clicking continue the images selected are displayed on the next screen. Please can you help with coding for this as I am not getting very far. Thanks Hi everyone, I have a page that displays 40 pictures (of paintings) with a short description of each. I am trying to think of a way to enable a user to add whichever paintings they want to a list. Basically, so they do not have to scroll through the whole page to view specific paintings. I thought about converting the page from XHTML to ASP.Net and then addign checkboxes under each picture. I thought about using C# to get a list of the checkboxes checked. How do I then display a new page (or somewhere on the same page) with only the selected graphics? Any ideas would be appreciated. I am a newbie at web programming. Thank you! Marc Hello, I am semi new to HTML and was wondering if there is an easy way to adjust a price.. once a user has selected something from a selection box.. so say they pick an item for 10$ the price field then increases 10$.. same for if they downgrade price decreases. any ideas. Hi all, I have a form in dreamweaver that consists of a couple of textboxes and two list boxes. I would like to make listbox2 disabled until either of the bottom two selections from listbox1 have been selected. Is that possible? Thanks very much, Dan Hi.. I am having a html table with three columns and the rows are dynamic. I need to have a multiple selection of the rows and the value need to checked using javascript. I dont want any check box to be used... Can anyone help in getting this... Hi, how can I put in a drop down menu that slides down or across from a regular text link in html? Then, when selecting one of the options, I would like it to automatically take the visitor to the page option selected? I don't want a drop down menu and then hit 'Go' type mechanism, just a slide and click type thing. i.e when the link is clicked on it would reveal a drop down list that says.. Hotel Car Rental Airport Car Park Insurance and would then link directly to the appropriate page. Thanks! Hey guys. Man, it's been years since I've been here. Not that much into web design these days.. but as it turns out I was asked to make someone a site.. It went well and I managed to get good bits of code from online as you do, but I have stumbled across a problem.. I have an iFrame with a calendar in it (consisting of html and some javascript) and by clicking certain dates it will change the selection of a drop down menu (full of listed dates) which is located on the main page.. Because it is not simply changing a link and instead a selection on a menu, it required javascript and after a lot of messing around I got it to work.. this was the code: <a href="javascript:void(0)" onclick ="parent.document.getElementById('datechoose').value = '11';" style="display:block;">15</a> this, when attached to a link in the iFrame will select the 11th item on the menu on the main page. It only works online for some reason, but other than that. it works perfect.. Here's the problem. My dreamweaver template has screwed up as it often does.. and it will be waay to difficult to figure out the problem. so I'm scrapping that idea.. So now I have to update the menu options on about 15 different pages every week... OR - I could put this menu on it's own page in a seperate iframe so it only needs updated once.. So essentially, how would I modify this code to link from one iframe to another. I wish it was as simple as 'target' etc. but that won't work. I've looked at similar questions online, but none of the answers seem to work.. thanks in advance SIGH I'm doing a website in which customers have to complete a form and accept contractual terms, but the client wants for them to have to click "I Accept" before the link to complete a product download can be activated and I haven't the foggiest how to do it. To which thing (I Accept or the Download link) do I apply the code and what code do I use? Can the download link act as both the Download and Submit button simultaneously? I proposed to the client that we just make the Accept button the Submit, and have the download link on the Thank You page following submission, but in the event that he doesn't go for that... THANKS! I've been laboring over this forever. Hello. I was wondering if it's at all possible to have a specific checkbox or radio button checked/selected when the user gets to that page depending on the link they clicked to get to that page. For example, I have a client who wants the user to go to a single form but from different categories (rather than having a form for each), but to make sure the recipient of the email knows which category it came from, the checkbox for that category would already be checked. The user would be able to check it themselves as well, but this ensures it's already selected and creates convenience for the user. Thanks I have a form that contains a drop down list; <select name="list" id="list" multiple="multiple"> When the user clicks the form's submit button I want to run a function that returns true if an <option> from that <select> object was selected and false if they forgot to make a selection. What is a simple way of doing this? I was thinking that maybe there was an object method like; if(document.form.select.optionSelected()==true) {do something; return true}; else {do something else; return false;} Okay, I am not new to HTML but am expanding my knowledge out from the basics and learning more. I have been scouring the internet for about a week trying to figure out this problem but to no avail. I need to know how to take a drop down box and have the selection open in a new window with height=600 width=600, status bar, no scroll bars and no toolbars. I already have the dropdown box setup, just need to know how to accomplish that latter. Thanks for the help, dt_gry! I am in the process of making a website via goodsie, however even though they advertise that no knowledge of html is needed to make a site i have discovered that without html the site just won't look nice!! I am looking to create a sidebar (i think thats what it is called - picture below) any assistance you could offer would be greatly appreciated. How can I select the correct field in my "Select form field", once I know the value from php/mysql? PHP Code: $_SESSION['job'] = "FX"; Now I want to update the form to display the selected value... HTML Code: <select multiple="true" name="field">
<option value="FL" selected="true">Flash</option>
<option value="FX">Flex</option>
<option value="AJ">Ajax</option>
<option value="PH">Php</option>
<option value="HT">Html</option>
<option value="JV">Java</option>
<option value="CC">C++</option>
</select>
Hi all, Im just wondering if it is possible in any way to undertake this functionality.... I have different homepages which are essentially the same content but each is designed for a different screen resolution so that when in full screen mode the data will occupy the complete screen. Is there any way to load a certain homepage based on a user's screen resolution, eg if their resolution is 800x600 then homepage A is loaded, if 1024x768 then homepage B is loaded etc. Since a user's screen resolution info is readily available is it possible to undertake such a feature? Thanks in advance! McB |
|||||||