Gordon MWS

You could try using a global variable setup in a config file, I do something similar. When using a DB I setup a table with config settings including a 'url_home' entry which stores an absolute url (different on my testing and live servers). Or for a non-DB site I will create a config.inc.php file with a list of global variables and settings in it, one of which will be $url_home - same again absolute url, but a different config file on testing/live. Hope this helps! Gordon

Haven't tested this but off the top of my head I would for something like (based on a 960px width, centered)... #container { width: 960px; margin: 0 auto 0 auto; padding: 0; } #header { width: 960px; height: 80px; /* Or whatever height you want */ } #sidebar { width: 185px; margin: 0; padding: 0; float: left; display: inline; } #content { width: 775px; margin: 0; padding: 0; float: left; display: inline; } #footer { clear: both; width: 960px; margin: 0; padding: 0; } With your html... <div id="container"> <div id="header"></div> <div id="sidebar"></div> <div id="content"></div> <div id="footer"></div> </div> I would recommend using a reset stylesheet as well, saves having to fill your own with repeated margin, padding and border statements. Hope this helps, like I say I just typed it straight in here without testing it - but if I can help at all give me a shout. Gordon

I am looking at using a couple of fairly large partially transparent PNGs (around 150k) and I need to keep them as high quality as possible. They are not that large that they take especially long to load but I am not a fan of the 'blinds' style loading that FireFox does with these kind of things, so I am looking at using an animated 'loading' icon in it's place until it's loaded and then either display it or fade it in. I am not a JavaScript expert by any stretch of the imagination, although I am sure that JS is the solution for this. I have googled and found a few rather over complicated scripts that I can't quite make sense of, and they tend to be preloaders for of screen images, or delay the page display until the images are loaded - not what I am after. For once I have got the transparency issue with IE6 sorted! (UnitPNGfix!) Does anyone know of a good script that is already available that would be simple to implement, or of a good 'beginners' tutorial that might get me the result and teach me a bit more about JavaScript at the same time? Cheers, Gordon

ooooooops! Ignore the above post - it helps if you ensure that your database connection is in place before you query the table! (Big thanks to Mozilla FireFox and its error console for that find!) Regards, Gordon

Thanks Mihai, that is exactly what I was after only it's not working and I cannot see what I have done wrong... I have put the relevant ajax.js file in place and called it from the page header. I have inserted the following in the header of the page: <script type="text/javascript"> var ajax = new Array(); function getModelList(sel) { var manufacturerCode = sel.options[sel.selectedIndex].value; document.getElementById('modelselect').options.length = 0; // Empty Model Select Box if(manufacturerCode.length>0){ var index = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'assets/scripts/getModels.php?manufacturerCode='+manufacturerCode; ajax[index].onCompletion = function(){createModels(index)}; ajax[index].runAJAX(); } } function createModels(index) { var obj = document.getElementById('modelselect'); eval(ajax[index].response); } </script> and in the page body I have the following: <?php echo "<h1>".$page_title."</h1>\n"; echo "<form method='post' action='".$form_target."' title='Add or Edit Stock'>\n"; echo " Manufacturer: <select name='manufacturerselect' id='manufacturerselect' size='1' onchange='getModelList(this)'>\n"; echo " <option>Select Manufacturer</option>\n"; $get_mans = "SELECT * FROM manufacturers ORDER BY manufacturer ASC;"; $res_mans = mysql_query($get_mans); while($row_mans = mysql_fetch_assoc($res_mans)){ echo " <option value='".$row_mans['id']."' "; if((isset($row['manufacturer']))&&($row_mans['manufacturer'] == $row['manufacturer'])){echo "selected='selected' ";} echo ">".$row_mans['manufacturer']."</option>\n"; } echo "</select><br />\n"; echo "<select id='modelselect' name='modelselect'></select>\n"; echo "</form>\n"; ?> To generate the list of models for use in the second select I have created the following getModels.php: <?php if(isset($_GET['manufacturerCode'])){ $sql = "SELECT * FROM model WHERE man_id = '">$_GET['manufacturerCode']."' ORDER BY model ASC;"; $result = mysql_query($sql); while($row = mysql_fetch_assoc($result)){ echo "obj.options[obj.options.length] = new Option('".$row['model']."','".$row['id']."');\n"; } } ?> I cannot see why this does noy work, but the second select element has a 0 length at all times, and it is throwing up a page error message which relates roughly to the 'eval' statement in the page header script. Can anybody help me with this one please, it feels like I am close - but I ain't got the cigar yet! Regards, Gordon

Hi everyone, I am sure a few of you will have managed this before now, and I am guessing it is not too difficult I am just struggling to work out how best to achieve it... I have a form that is used for inserting records into a mySQL database. On the form are a two <select> inputs, one of which is dependant on another. I would like to use javascript/ajax to dynamically alter the sql query that is used to generate the <options> list on the second <select>, depending on what is selected in the first <select> field - without a page load. I am sure this will be a DOM and onChange event, but still a little wet behind the ears with Javascript I am not sure how best to go about it? Any advice or links to tutorials are very welcome! Regards, Gordon

Well that was fun! I have now developed a solution for this myself, if I get a chance I will package it up and put it ou GPL! How I did it.... The page requiring the image rollovers calls a php script in the header, which creates the required javascript based on a query to the database. In the body of the page it makes a call to another php script which queries a different set of tables (based on what the result of the first script) and generates the html to display the master image and thumbnails, calling and using the javascript in the header..........are you still awake?? Finally I gave it a healthy lick of CSS and Bob is your mother's brother - happy days! Regards, Gordon

Your right there are some nice effects there, but because the amount of images and filenames are to be generated dynamically from a database I cannot include the filenames in a CSS file. The same goes for some of the Javascripts that I have seen, they too rely on having the image filenames included in an external js file. Any other options? Regards, Gordon

Hi all - hoping someone can point me in the right direction with this one... I am looking to create a mini gallery on a page using a main image and a group of thumbnails. What I would like to happen is that when a thumbnail is rolled over the main image changes to show the larger version of the thumbnail, and a sexy java type transition would be a nice bonus. The images are being sized using a gd based image resizing script I have developed in PHP, and are being fed to the page via an sql query so I cannot use CSS for this one (from what I can tell). I have been looking at JQuery and Mootools etc but nothing is jumping out at me. Can anybody get me started on this one? Regards, Gordon