Woodburn2006

works brilliantly in firefox but IE has let me down, any ideas on how to work it in IE?

i cannot find the solution to this problem anywhere but can anybody tell me how to make items in a select menu bold? i have a list of items and i want some of them to be bold and some to be normal is there a way of doing this?

cool thanks but how would i incorporate this into a link as i was to use a seperate page to unload the session i would have to somehow let the new page know which session it is going to unload?

this may seem like a silly question but i cannot seem to find an answer on the internet, but i have a link on my site saying 'LOGOUT' and i use sessions to dtermine a user being logged in or not, what i want to know is how to close the session when the user clicks the link? thanks

i have a couple of problems to discover and as im very new its hard understanding examples from the internet. i am creating an image gallery and have a bar on the page which shows image thumbnails which can be clicked to see the larger image, i have the larger image ability sorted but in testing i used just php to create the menu. i had it so that the menu displays 5 thumbs then you can click next or prev to scroll through the images in the gallery. i had this all working with just php but i now want to do it with AJAX so that when you click next or prev then it loads the next or last 5 images without loading the whole page again. i have created a php page that creates the thumbs menu and have tested it and it works fine. now i just need to incorporate it into my actual site. i have the place holders etc for it but i cannot work out how to load the ajax function to load the thumbs when the browser opens the site and also without knowing this i cannot test the thumbs menu to see if it works. the second roblem i have is i do not know how to call ajax functions on simple text links, i have had a similar problem using images as links and have been helped nicely by the guys here but i am not advanced enough to mess about. i have tried what i might think works but it dosnt alot of the time. and as the next and prev buttons are text links i need to work out how its done below is the codes of the pages i am using: photos.php (where the viewer sees the images) <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="spacer_column"> </td> <td class="content_sub"> <!--start of left sub table --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" class="frame_sub_border_top">galleries</td> </tr> <tr> <td class="frame_border_left_right"> </td> <td class="sub_window" align='left'> <? $sql_galleries = "SELECT gallery,date,photo_id FROM photos ORDER BY date"; $result_galleries = mysql_query($sql_galleries, $connection); if (mysql_error()) { print "Database Error: $sql_news " . mysql_error(); } while($row_galleries = mysql_fetch_array($result_galleries)){ extract($row_galleries); $photo_id = substr($photo_id, 0, 5); $photo_gallery = $gallery; if ($photo_gallery != $current_gallery){ echo "<img src='images/folder.png' height='30px'> <a href='?go=photos&a=$photo_id'>".$photo_gallery."</a><br / >"; $current_gallery = $photo_gallery; } } ?> </td> <td class="frame_border_left_right"> </td> </tr> <tr> <td colspan="3" class="frame_border_bottom"></td> </tr> <tr> <td colspan="3" class="spacer_row"></td> </tr> <tr> <td colspan="3" class="frame_sub_border_top">where are we?</td> </tr> <tr> <td class="frame_border_left_right"> </td> <td class="sub_window"></td> <td class="frame_border_left_right"> </td> </tr> <tr> <td colspan="3" class="frame_border_bottom"></td> </tr> </table> <!--end of left sub table --></td> <td class="spacer_column"> </td> <td class="content_main_large"> <!--start of main content table --> <table id="gallery" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" class="frame_main_border_top"> <? $sql_gallery_heading = "SELECT gallery FROM photos WHERE photo_id LIKE '$a%'"; $result_gallery_heading = mysql_query($sql_gallery_heading, $connection); if (mysql_error()) { print "Database Error: $sql_gallery_heading " . mysql_error(); } $rows_gallery_heading = mysql_fetch_array($result_gallery_heading); echo $rows_gallery_heading["gallery"]." (". mysql_num_rows($result_gallery_heading)." photos)"; ?> </td> </tr> <tr> <td class="frame_border_left_right"> </td> <td class="main_window_photos_thumbs"><div id="thumbNails">thumbnails go here</div></td> <td class="frame_border_left_right"> </td> </tr> <tr> <td colspan="3" class="frame_border_bottom"></td> </tr> <tr> <td colspan="3" class="spacer_row"></td> </tr> <tr> <td colspan="3" class="frame_main_border_top">large photo</td> </tr> <tr> <td class="frame_border_left_right"> </td> <td class="main_window_photos_view"> <div id="bigPic"><b>large image shown here</b></div> </td> <td class="frame_border_left_right"> </td> </tr> <tr> <td colspan="3" class="frame_border_bottom"></td> </tr> <tr> <td colspan="3" class="spacer_row"> </td> </tr> </table> <!--end of main content table --> </td> <td class="spacer_column"> </td> </tr> </table> thumbnails.js var xmlHttp function showPhoto(a,page) { xmlHttp = createXmlHttp() if (xmlHttp == null) { alert("Browser does not support HTTP Request"); return; } var url = "/AJAX/thumbnails.php"; url += "?a=" + a; url += "&page=" + page; url += "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET", url, true) xmlHttp.send(null) } function stateChanged() { if(xmlHttp.readyState == 1 || xmlHttp.readyState == "loading") { document.getElementById("thumbNails").innerHTML="<img src='/images/ajax-loader.gif' border='0' alt='running' />"; } if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("thumbNails").innerHTML=xmlHttp.responseText } } function createXmlHttp() { var xmlHttp; try { //try the hard way because IE7 doesn't implement XMLHttpRequest() properly var xmlVersions = new Array('MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'); //iterate through the array until we get one that works for(var i = 0; i < xmlVersions.length && !xmlHttp; i++) { xmlHttp = new ActiveXObject(xmlVersions[i]); } } catch(e) { //try the easy way for the good browsers xmlHttp = new XMLHttpRequest(); } //return object (if we have one) or null return xmlHttp; } thumbnails.php <? $a=$_GET["a"]; $page=$_GET["page"]; include("db.inc"); include("/content/functions.php"); $connection = connect_to_sql($host,$usr,$pwd,$db); if (!$connection) { die('Could not connect: ' . mysql_error()); } $page = $_GET['page'] ? (int) $_GET['page'] : 1; $limit= 5; $query_count = "SELECT count(*) AS rowcount FROM photos WHERE photo_id LIKE '$a%'"; $result_count = mysql_query($query_count, $connection); $row_count = mysql_fetch_array($result_count, MYSQL_ASSOC); $totalrows = $row_count['rowcount']; $limitvalue = $page * $limit - ($limit); $query_thumbs = "SELECT * FROM photos WHERE photo_id LIKE '$a%' ORDER BY photo_id LIMIT $limitvalue, $limit"; $result_thumbs = mysql_query($query_thumbs) or die("Error: " . mysql_error()); echo"<table width='100%' border='0' cellspacing='5' cellpadding='0'> <tr> <td width='10%' class='photos_thumbs'>"; if($page > 1){ $pageprev = $page - 1; echo ("<a href=\"$PHP_SELF?go=photos&page=".$pageprev."\"><< PREV</a>"); } echo"</td><td width='80%' valign='middle' class='photos_thumb_img'>"; $img_number = 0; while ($row_thumbs = mysql_fetch_array($result_thumbs)) { extract($row_thumbs); if($img_number == 4){ echo "<img id='$photo_id' src='$url' height='65px' border='1'>"; }else{ echo "<img id='$photo_id' src='$url' height='65px' border='1'> "; $img_number ++; } } $numofpages = ceil($totalrows / $limit); echo"</td><td width='10%' class='photos_thumbs'>"; if($page < $numofpages){ $pagenext = $page + 1; echo("<a href=\"$PHP_SELF?go=photos&page=".$pagenext."\">NEXT >></a>"); } echo"</td></tr></table>"; ?> this bit of javascript is in the heading of my main index.php file. <script type=\"text/javascript\"> window.onload = function() { var gallery = document.getElementById('gallery'); var images = gallery.getElementsByTagName('img'); for(var i = 0; i < images.length; i++) { images[i].onclick = function() { showPhoto(this.id); } } } </script> any type of input it much appreciated thanks alot

i am creating a photo gallery and i want to only display a few images as thumbnails at a time so that users click these thumbnails and they view the large image. when the gallery has more images i want to display the photos 5 at a time with page numbers so users can flick through the pages. i have done this before but cannot work out why i cannot get it to work this time. this is the code i am using for this section of this page: <? if(empty($page)){$page = 1;} $limit= 5; $query_count = "SELECT count(*) AS rowcount FROM photos WHERE photo_id LIKE '$a%'"; $result_count = mysql_query($query_count, $connection); $row_count = mysql_fetch_array($result_count, MYSQL_ASSOC); $totalrows = $row_count['rowcount']; $limitvalue = $page * $limit - ($limit); $query_thumbs = "SELECT * FROM photos WHERE photo_id LIKE '$a%' ORDER BY photo_id LIMIT $limitvalue, $limit"; $result_thumbs = mysql_query($query_thumbs) or die("Error: " . mysql_error()); while ($row_thumbs = mysql_fetch_array($result_thumbs)) { extract($row_thumbs); echo "<img id='$photo_id' src='$url' height='65px'> "; } $numofpages = ceil($totalrows / $limit); if($page > $numofpages){ $page = $numofpages; } if($page > 1){ $pageprev = $page - 1; echo ("<a href=\"$PHP_SELF?go=photos&page=".$pageprev."\"><< PREV</a> - "); } for($i = 1; $i <= $numofpages; $i++){ if($i == $page){ echo($i." "); }else{ echo("<a href=\"$PHP_SELF?go=photos&page=".$i."\">$i</a> "); } } if($page < $numofpages){ $pagenext = $page + 1; echo(" - <a href=\"$PHP_SELF?go=photos&page=".$pagenext."\">NEXT >></a>"); } ?> </td> the layout is not great at the moment as im stillgetting it to function but the site addy is: http://travelling.dw20.co.uk/?go=photos if anyone can see what is going wrong it would much help thanks

sorted, thanks alot, i just used this: function stateChanged() { if(xmlHttp.readyState == 1 || xmlHttp.readyState == "loading") { document.getElementById("txtHint").innerHTML="<img src='/images/ajax-loader.gif' border='0' alt='running' />"; } if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } cheers for that

i have an image ready to use as a loading image for when images are loading after an ajax request but as i am very new to javascript and ajax all of the examples i have read seem weird because they are all coded slightly differently. here is the code in my JS file: var xmlHttp function showPhoto(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML="" return } xmlHttp = createXmlHttp() if (xmlHttp == null) { alert("Browser does not support HTTP Request"); return; } var url = "http://travelling.dw20.co.uk/AJAX/largephoto.php"; url += "?id=" + str; url += "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET", url, true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } function createXmlHttp() { var xmlHttp; try { //try the hard way because IE7 doesn't implement XMLHttpRequest() properly var xmlVersions = new Array('MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'); //iterate through the array until we get one that works for(var i = 0; i < xmlVersions.length && !xmlHttp; i++) { xmlHttp = new ActiveXObject(xmlVersions[i]); } } catch(e) { //try the easy way for the good browsers xmlHttp = new XMLHttpRequest(); } //return object (if we have one) or null return xmlHttp; } could anybody please advise me on how i would go about adding a loading image into this script? thanks alot in advance

ah sweet, that works a treat. the reason there was a new html doc in the middle is because i have a main page and all the smaller pages like photos etc load within a table on the main page. but thats sorted now so no problem, the only thing is because of this whenever i load up the homepage it comes up with an error saying 'null' is not null or not an object, any ideas?

thats works great in the test but i cannot seem to get it working on the actual site, i need a way of getting the photos id passed into the javascript function which i cannt seem to do with this. if you look at http://travelling.dw20.co.uk/?go=photos then you can see. also if i leave the code as you gave it in the head part of the page it will only load the image that is in the call function demand in that script and only a couple of the images work as links

i have been testing and have got it working here: http://ajaxtesting.dw20.co.uk/photos/ but the thing is, it is calling the images from a form which i know how to do but i still cant get it working from a link as you can see from the page it works with the form but not when you click the 'hello' link hopefully this helps

no joy still. i get the same error as i always have saying that the value of $photo_id is undefined. could be anything to do with the type of date im feeding?

i put this code after that line but i still got the same error as before, alert (url) is there anything else i can try, like putting the showphoto.js content in the actual php page im calling it from?

sure, here it is: var xmlHttp function showPhoto(str) { xmlHttp=createXmlHttp() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="largephoto.php" url=url+"?id="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } largephoto.php works fine because i have tested that on multiple occasions

ok thanks, im not sure i quite understand here is the page im using, im not sure i have linked to the JS properly either so would be good to get it all checked out. this code is a page that is loaded through an include using php. so on my main page there is an area that this page loads into when i click the link on the menu. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="AJAX/largephoto.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="site.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #333333; } --> </style></head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="spacer_column"> </td> <td class="content_sub"> <!--start of left sub table --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" class="frame_sub_border_top">galleries</td> </tr> <tr> <td class="frame_border_left_right"> </td> <td class="sub_window" align='left'> <? $sql_galleries = "SELECT gallery,date,photo_id FROM photos ORDER BY date"; $result_galleries = mysql_query($sql_galleries, $connection); if (mysql_error()) { print "Database Error: $sql_news " . mysql_error(); } while($row_galleries = mysql_fetch_array($result_galleries)){ extract($row_galleries); $photo_id = substr($photo_id, 0, 5); $photo_gallery = $gallery; if ($photo_gallery != $current_gallery){ echo "<img src='images/folder.png' height='30px'> <a href='?go=photos&a=$photo_id'>".$photo_gallery."</a><br / >"; $current_gallery = $photo_gallery; } } ?> </td> <td class="frame_border_left_right"> </td> </tr> <tr> <td colspan="3" class="frame_border_bottom"></td> </tr> <tr> <td colspan="3" class="spacer_row"></td> </tr> <tr> <td colspan="3" class="frame_sub_border_top">where are we?</td> </tr> <tr> <td class="frame_border_left_right"> </td> <td class="sub_window"></td> <td class="frame_border_left_right"> </td> </tr> <tr> <td colspan="3" class="frame_border_bottom"></td> </tr> </table> <!--end of left sub table --></td> <td class="spacer_column"> </td> <td class="content_main_large"> <!--start of main content table --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" class="frame_main_border_top"> <? $sql_gallery_heading = "SELECT gallery FROM photos WHERE photo_id LIKE '$a%'"; $result_gallery_heading = mysql_query($sql_gallery_heading, $connection); if (mysql_error()) { print "Database Error: $sql_gallery_heading " . mysql_error(); } $rows_gallery_heading = mysql_fetch_array($result_gallery_heading); echo $rows_gallery_heading["gallery"]." (". mysql_num_rows($result_gallery_heading)." photos)"; ?> </td> </tr> <tr> <td class="frame_border_left_right"> </td> <td class="main_window_photos_thumbs"> <? $sql_thumbs = "SELECT * FROM photos WHERE photo_id LIKE '$a%' ORDER BY photo_id DESC"; $result_thumbs = mysql_query($sql_thumbs, $connection); if (mysql_error()) { print "Database Error: $sql_news " . mysql_error(); } while($rows_thumbs = mysql_fetch_array($result_thumbs)){ extract($rows_thumbs); echo "<a href='#' onclick='showPhoto($photo_id)'><img src='$url' height='65'></a>"; } ?></td> <td class="frame_border_left_right"> </td> </tr> <tr> <td colspan="3" class="frame_border_bottom"></td> </tr> <tr> <td colspan="3" class="spacer_row"></td> </tr> <tr> <td colspan="3" class="frame_main_border_top">large photo</td> </tr> <tr> <td class="frame_border_left_right"> </td> <td class="main_window_photos_view"> <? if($id==""){echo "<img src='$url' width='660px'>";} else{ $sql_large_photo = "SELECT url FROM photos WHERE photo_id='$id' LIMIT 1"; $result_large_photo = mysql_query($sql_large_photo, $connection); if (mysql_error()) { print "Database Error: $sql_large_photo " . mysql_error(); } $rows_large_photo = mysql_fetch_array($result_large_photo); echo "<img src='".$rows_large_photo["url"]."' width='660px'>";} ?> </td> <td class="frame_border_left_right"> </td> </tr> <tr> <td colspan="3" class="frame_border_bottom"></td> </tr> <tr> <td colspan="3" class="spacer_row"> </td> </tr> </table> <!--end of main content table --> </td> <td class="spacer_column"> </td> </tr> </table> </body> </html> when i click on the images in the thumbnail area i get an error saying that the value within the function all is undefined. a working example is: http://travelling.dw20.co.uk/?go=photos there you can see how it is laid out and the error i get

all i have learnt is how to call an ajax function from a form elementbut i want to call it from clicking on an image: i have tried this: echo "<a href='javascript:showPhoto(aust1001)'><img src='$url' height='65px'></a> "; but get an error saying aust1001 is undefined i basically want this bit of code to call a ajax function rather than reload the whole page echo "<a href='?id=$photo_id'><img src='$url' height='65px'></a> ";

cool thanks for the reply but that is sorted now, just need to sort my other question which is above ....

wooohooo i managed to get it to work, it was the tutorials fault not mine tho, the code they supplied was wrong, the function name was wrong therefore it was not calling a function, so now hopefully i can continue to write my code. just one more problem to overcome, i know how use ajax when linkin from a form element like: <select name="users" onChange="showUser(this.value)"> but what i need to do is use ajax from an image, so that when the image is clicked it will call the same ajax script so what i basically want to know is: how would i edit this line to call a ajax function? echo "<a href='?go=photos&id=$photo_id&a=$a'><img src='$url' height='65px'></a> ";

that does not seem to solve anything, i get an error saying that on: url: http://ajaxtesting.dw20.co.uk/db line: 7 char: 1 error: object unexpected does this help solve anything?

yeh sorry dint really think when i typed the post, was just getting frustrated. i wanted to try a ttorial of an ajax script that connected to a mysql database so i did this tutorial: http://www.w3schools.com/php/php_ajax_database.asp this is the html page: <html> <head> <script src="selectuser.js"></script> </head> <body><form> Select a User: <select name="users" onChange="showUser(this.value)"> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form><p> <div id="txtHint"><b>User info will be listed here.</b></div> </p></body> </html> this is the JS page (selectuser.js): var xmlHttp function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML="" return } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="getuser.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } }function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } this is the php page (getuser.php) i removed db details: <?php $q=$_GET["q"]; $con = mysql_connect('', '', ''); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("", $con); $sql="SELECT * FROM db_demo WHERE id = '".$q."'"; $result = mysql_query($sql); echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>"; while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con); ?> when i look at the page it displays correctly but when you select someone from the list it does not display anything, so basically does not work at all and as i am new to ajax i do not know how to debug it. a working example is on the w3schools site and this is the addy to my version: http://ajaxtesting.dw20.co.uk/db/ i have tried it in IE, firefox and safari and none of them work. another tutorial i tried is the one that is sticky in this forum and all i did is copied the code and i get this result: http://ajaxtesting.dw20.co.uk/New%20Folder%20(2)/

i have tried to get AJAX working for a good few days now, i have tried several tutorials and i can only get very simple ones to work. if you look at this page: http://ajaxtesting.dw20.co.uk it is all the tutorials i have tried i have even tried the tutorial on this site and simply copied and pasted it but it still wont work cany anyone advise me on what i am doing wrong, thanks alot

this seems really simple but i cannot seem to find this anywhere on the net but when i have a value in a form field i want it to disappear when a user clicks in the field to add their own value, i see it everywhere but cannot find the method of doint it myself thanks alot

cool so thats one problem sorted, the next being is it hard to use to create simple thumbnails of images or can it get quite complicated and gritty? also are there any good tutorials out there to guide me along the way?

cool thanks that last post helped. i found this in the phpinfo: gd GD Support enabled GD Version bundled (2.0.34 compatible) FreeType Support enabled FreeType Linkage with freetype FreeType Version 2.1.4 GIF Read Support enabled GIF Create Support enabled JPG Support enabled PNG Support enabled WBMP Support enabled XPM Support enabled XBM Support enabled does this mean it is on my server? http://travelling.dw20.co.uk/phpinfo.php

well from looking at that it all looks jibberish, im not amazing at php i can do some things with it but nothing too complicated which this looks? is it a hard process setting up gd and using it?