Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About khalen

  • Rank
  1. I cant post link because I haven't uploaded yet. I need to get it working before I upload.basically I have this in html<p> At the end of each topic you will find an information book icon, <img class="book" src="images/book.jpg" width="25" height="25" /> This icon points you to suggested reading in the DSA publication 'Driving the essential skills'.</p>and the css code associated with this .book{display: inline;}The image is displaying but not in between the text I need it too that is where I have placed it in the code.Thanks
  2. Hi allI am trying to do a simple text base page with a couple of small gif's in with the text.No matter what I try I cannot get the bloody gifs to display inline.I have tried display: inline; in the css file and tried <span></span> in the html but it always aligns to the left.I can get it there with absolute positioning but then get the usual cross browser issues with it appearing in different places depending on the browser and ver!Can anyone suggest a solution please.
  3. khalen

    Xhtml Doctype

    Excellent ... thanks for your time
  4. khalen

    Xhtml Doctype

    Hi all ... I have searched through the W3Schools forum and tutorials but can't seem to find the doctype that has just been developed by W3C aiming to provide minimal support for web clients that do not support the full set of XHTML features (such as PDA, pagers etc)Can anyone enlighten me as to where I could go to find this info?Cheers
  5. khalen

    Game programming?

    Hi all just looking for some advise and your thoughts.I have put together a training package that operates from my webpage. It works fine but I have been told that as a training piece it is a little boring. I must agree because it is very static .... question come in ... answer question.I was thinking of making it more interactive by putting together a simple game with questions in. How difficult would this be which language/script would be best.
  6. khalen

    Who to complain to?

    It wasn't directly with Google ... it was with a company called Sherrif Ratings. We paid them and they link us to google ... I dont understand how it all works just that they have put our name as Avon Patch when it should be Avonpatch one word. I dont suppose that it make much difference except spiders will treat Avon Patch and Avonpatch differently. Over the past few months we have emailed several times and made prob 30 calls ... it is more complicated than just the name. they initially told us that we would get guaranteed front page and left hand side ... turned out to be small add right hand side and anywhere fon page 1 infinity.when we complained we were told that we should have asked how long it takes to get to page one.We were naive and they missled us.They ignore ALL communication with us nowAny help would be better than we got at the mo
  7. Hi all ... I wonder if someone will be able to help me?I have used a London (UK) based company to place an ad for me on google for my small business. However, apart from being lied to and deceived about what I am to get for my money they have spelt my business name wrong and I cannot get them to change it. I have tried emails and direct telephone calls ... all to be ignored.Is there an ombudsman or advertising standard dept that I can contact about this? All I want is my name spelt correctly on the ad so i get ssurfers comming to me and the busines actually benefiting from the hundreds of pounds we spent on it.thanks in anticipation
  8. Hi all ... can anyone tell me how I can make the input size EXACTLY 16 characters long. I need an error to flag if user attempts to input less than or more than 16 characters. Currently user can input any length they like and it still works. It is basically for a driving licence number which is always 16 characters long. Never any more or any less! <B>Licence No*:</B><INPUT TYPE="TEXT" LENGTH="16" NAME="licence"> Thanks
  9. smartalco ... thanks for your attempt. It didnt work but I appreciate you trying.jlhaslip ... very useful ... NOT. If I knew what was wrong I wouldn't be asking ... I take it you were a lot better than me after two weeks at studying JS.Deirdre's Dad ... thanks that worked. I used the '1990' approach. It works and I am attempting to teach myself. I will take onboard you comments though. Thanks
  10. Hi guys I am new to coding but i cant get past this problem.I am trying to make a bit of code for a simple login page ... username and password.You will see from the code below what I am trying to do ... i know that the problem is with comparing the values of var username with user and var password with pswd but I cant see what I have done wrong. All I get is alert("Uh Oh ... not this time"); actioning but never alert("Wow! ... I got it right."); <html><head><script LANGUAGE="JavaScript">var username="khalen";var paasword="anaria";function check_login(){ if (username == "user" && password == "pswd"){ alert("Wow! ... I got it right."); } else{ alert("Uh Oh ... not this time"); }}function validate() { if (document.form1.user.value.length < 1){ alert("Please enter a valid username."); return false; } if (document.form1.pswd.value.length < 1){ alert("Please enter a valid password."); return false; } else { check_login(); } }</SCRIPT></head><body><FORM name="form1"><B>Username: </B><INPUT TYPE="TEXT" LENGTH="16" NAME="user"><p><B>Password: </B><INPUT TYPE="TEXT" LENGTH="20" NAME="pswd"><p><INPUT TYPE="BUTTON" VALUE="Login" onClick="validate();"></FORM></body></html>
  11. k I've managed to get a few pages uploaded so you can see what the prob is. IE works ok but firefox and monitors larger than 15" dont look too good!http://www.avonpatch.co.uk/theory/drag_drop.htmlYou already have all the code above.Please any help would be very much appreciated.Paul
  12. Synook ... now I know what a 'devoted member' means. thanks a million. Now, I cant see how I attach it to a post so is there an email address I can send it to?Paul
  13. no i dont have a link because it is not live yet ... i cannot put it live till I finish it which is going to be a long time yet and I cant finish it till I resolve this problem.The images are just four road signs that could be any images for the purpose of seeing the problem. I could include the images if you like.If you read my original post ... I did ask if anyone could take a zip file of this so they could load it it into an editor and see what i am seeing. If I knew where the problem was I would post just that portion of the code but I dont. I am really sorry about the amount of code but I think it is in the css that is causing the problem. The other file is mostly drag and drop code.
  14. Thank you soooo much. This is the css file. body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */ background-color:#c8d0e0; } a img { border : none; } #footer{ height:30px; vertical-align:middle; text-align:right; clear:both; padding-right:3px; background-color:#cccccc; margin-top:2px; width:790px; } #footer form{ margin:0px; margin-top:2px; } #dhtmlgoodies_dragDropContainer{ /* Main container for this script */ width="100%"; height="100%"; background-color:#c8d0e0; -moz-user-select:none; } #dhtmlgoodies_dragDropContainer ul{ /* General rules for all <ul> */ margin-top:0px; margin-left:0px; margin-bottom:0px; padding:2px; } #dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{ /* Movable items, i.e. <LI> */ list-style-type:none; height:15px; background-color:#cccccc; border:1px solid #000; padding:2px; margin-bottom:2px; cursor:pointer; font-size:13px; line-height:15px; } li#indicateDestination{ /* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */ border:1px dotted #600; background-color:#cccccc; } #dhtmlgoodies_dragDropContainer ul li.correctAnswer{ /* Correctly moved item */ background-color:lime; color:#000; } #dhtmlgoodies_dragDropContainer ul li.wrongAnswer{ /* Item moved to wrong box */ background-color:red; color:#FFF; } /* LEFT COLUMN CSS */ div#dhtmlgoodies_listOfItems{ /* Left column "Available students" */ float:left; padding-left:50px; padding-right:10px; /* CSS HACK */ width: 180px; /* IE 5.x */ width/* */:/**/160px; /* Other browsers */ width: /**/160px; } #dhtmlgoodies_listOfItems ul{ /* Left(Sources) column <ul> */ height:160px; width: 200px; } div#dhtmlgoodies_listOfItems div{ border:1px solid #999; } div#dhtmlgoodies_listOfItems div ul{ /* Left column <ul> */ margin-left:5px; /* Space at the left of list - the arrow will be positioned there */ margin-right:5px; /* Space at the right of list */ } #dhtmlgoodies_listOfItems div p{ /* Heading above posible answers column */ width: 210px; margin:0px; font-weight:bold; padding-left:12px; background-color:#c8d0e0; color:#000000; margin-bottom:5px; } /* END LEFT COLUMN CSS */ #dhtmlgoodies_dragDropContainer .mouseover{ /* Mouse over effect DIV box in right column */ background-color:#E2EBED; border:1px solid #317082; } /* Start main container CSS */ div#dhtmlgoodies_mainContainer{ /* Right column DIV */ width:590px; float:right; } #dhtmlgoodies_mainContainer div{ /* Parent <div> of small boxes */ float:left; margin-right:10px; margin-bottom:10px; margin-top:0px; border:1px solid #c8d0e0; /* CSS HACK */ width: 172px; /* IE 5.x */ width/* */:/**/170px; /* Other browsers */ width: /**/170px; } #dhtmlgoodies_mainContainer div ul{ margin-left:10px; } #dhtmlgoodies_mainContainer div p{ /* Heading above question boxes */ margin:0px; padding:0px; padding-left:12px; font-weight:italic; background-color:#c8d0e0; color:#000000; margin-bottom:5px; } #dhtmlgoodies_mainContainer ul{ /* Small box in right column ,i.e <ul> */ width:152px; height:80px; border:0px; margin-bottom:0px; overflow:hidden; } #dragContent{ /* Drag container */ position:absolute; width:150px; height:15px; display:none; margin:0px; padding:0px; z-index:2000; } </style> <style type="text/css" media="print"> div#dhtmlgoodies_listOfItems{ display:none; } body{ background-color:#FFF; } img{ display:none; } #dhtmlgoodies_dragDropContainer{ border:0px; width:100%; } And this is the main code for the pages. <html><head><link rel="stylesheet" type="text/css" href="setup_style.css" /></head> <style type="text/css" media="print"> div#dhtmlgoodies_listOfItems{ display:none; } body{ background-color:#FFF; } img{ display:none; } #dhtmlgoodies_dragDropContainer{ border:0px; width:100%; } </style> <script type="text/javascript"> /* VARIABLES YOU COULD MODIFY */ var boxSizeArray = [1,1,1,1]; // Array indicating how many items there is rooom for in the right column ULs var arrow_offsetX = -5; // Offset X - position of small arrow var arrow_offsetY = 0; // Offset Y - position of small arrow var arrow_offsetX_firefox = -6; // Firefox - offset X small arrow var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow var verticalSpaceBetweenListItems = 5; // Pixels space between one <li> and next // Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li var initShuffleItems = true; // Shuffle items before staring var indicateDestionationByUseOfArrow = true; // Display arrow to indicate where object will be dropped(false = use rectangle) var lockedAfterDrag = true; /* Lock items after they have been dragged, i.e. the user get's only one shot for the correct answer */ /* END VARIABLES YOU COULD MODIFY */ var dragDropTopContainer = false; var dragTimer = -1; var dragContentObj = false; var contentToBeDragged = false; // Reference to dragged <li> var contentToBeDragged_src = false; // Reference to parent of <li> before drag started var contentToBeDragged_next = false; // Reference to next sibling of <li> to be dragged var destinationObj = false; // Reference to <UL> or <LI> where element is dropped. var dragDropIndicator = false; // Reference to small arrow indicating where items will be dropped var ulPositionArray = new Array(); var mouseoverObj = false; // Reference to highlighted DIV var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1; var destinationBoxes = new Array(); var indicateDestinationBox = false; function getTopPos(inputObj) { var returnValue = inputObj.offsetTop; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop; } return returnValue; } function getLeftPos(inputObj) { var returnValue = inputObj.offsetLeft; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft; } return returnValue; } function cancelEvent() { return false; } function initDrag(e) // Mouse button is pressed down on a LI { if(document.all)e = event; if(lockedAfterDrag && this.parentNode.id!='allItems')return; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft); dragTimer = 0; dragContentObj.style.left = e.clientX + sl + 'px'; dragContentObj.style.top = e.clientY + st + 'px'; contentToBeDragged = this; contentToBeDragged_src = this.parentNode; contentToBeDragged_next = false; if(this.nextSibling){ contentToBeDragged_next = this.nextSibling; if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling; } timerDrag(); return false; } function everythingIsCorrect() { alert('Well done! You have answered them all correctly. Move on to the next page.'); } function timerDrag() { if(dragTimer>=0 && dragTimer<10){ dragTimer++; setTimeout('timerDrag()',10); return; } if(dragTimer==10){ dragContentObj.style.display='block'; dragContentObj.appendChild(contentToBeDragged); } } function moveDragContent(e) { if(dragTimer<10){ if(contentToBeDragged){ if(contentToBeDragged_next){ contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next); }else{ contentToBeDragged_src.appendChild(contentToBeDragged); } } return; } if(document.all)e = event; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft); dragContentObj.style.left = e.clientX + sl + 'px'; dragContentObj.style.top = e.clientY + st + 'px'; if(mouseoverObj)mouseoverObj.className=''; destinationObj = false; dragDropIndicator.style.display='none'; if(indicateDestinationBox)indicateDestinationBox.style.display='none'; var x = e.clientX + sl; var y = e.clientY + st; var width = dragContentObj.offsetWidth; var height = dragContentObj.offsetHeight; var tmpOffsetX = arrow_offsetX; var tmpOffsetY = arrow_offsetY; if(!document.all){ tmpOffsetX = arrow_offsetX_firefox; tmpOffsetY = arrow_offsetY_firefox; } for(var no=0;no<ulPositionArray.length;no++){ var ul_leftPos = ulPositionArray[no]['left']; var ul_topPos = ulPositionArray[no]['top']; var ul_height = ulPositionArray[no]['height']; var ul_width = ulPositionArray[no]['width']; if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){ var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length; if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--; if(noExisting<boxSizeArray[no-1] || no==0){ dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px'; var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI'); for(var liIndex=0;liIndex<subLi.length;liIndex++){ var tmpTop = getTopPos(subLi[liIndex]); if(!indicateDestionationByUseOfArrow){ if(y<tmpTop){ destinationObj = subLi[liIndex]; indicateDestinationBox.style.display='block'; subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]); break; } }else{ if(y<tmpTop){ destinationObj = subLi[liIndex]; dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px'; dragDropIndicator.style.display='block'; break; } } } if(!indicateDestionationByUseOfArrow){ if(indicateDestinationBox.style.display=='none'){ indicateDestinationBox.style.display='block'; ulPositionArray[no]['obj'].appendChild(indicateDestinationBox); } }else{ if(subLi.length>0 && dragDropIndicator.style.display=='none'){ dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px'; dragDropIndicator.style.display='block'; } if(subLi.length==0){ dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px' dragDropIndicator.style.display='block'; } } if(!destinationObj)destinationObj = ulPositionArray[no]['obj']; mouseoverObj = ulPositionArray[no]['obj'].parentNode; mouseoverObj.className='mouseover'; return; } } } } function checkAnswers() { for(var no=0;no<destinationBoxes.length;no++){ var subLis = destinationBoxes[no].getElementsByTagName('LI'); if(subLis.length<boxSizeArray[no])return; for(var no2=0;no2<subLis.length;no2++){ if(subLis[no2].className=='wrongAnswer')return; } } everythingIsCorrect(); } /* End dragging Put <LI> into a destination or back to where it came from. */ function dragDropEnd(e) { if(dragTimer==-1)return; if(dragTimer<10){ dragTimer = -1; return; } dragTimer = -1; if(document.all)e = event; if(destinationObj){ var groupId = contentToBeDragged.getAttribute('groupId'); if(!groupId)groupId = contentToBeDragged.groupId; var destinationToCheckOn = destinationObj; if(destinationObj.tagName!='UL'){ destinationToCheckOn = destinationObj.parentNode; } var answerCheck = false; if(groupId == destinationToCheckOn.id){ contentToBeDragged.className = 'correctAnswer'; answerCheck=true; }else{ contentToBeDragged.className = 'wrongAnswer'; } if(destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')contentToBeDragged.className=''; if(destinationObj.tagName=='UL'){ destinationObj.appendChild(contentToBeDragged); }else{ destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj); } mouseoverObj.className=''; destinationObj = false; dragDropIndicator.style.display='none'; if(indicateDestinationBox){ indicateDestinationBox.style.display='none'; document.body.appendChild(indicateDestinationBox); } contentToBeDragged = false; if(answerCheck)checkAnswers(); return; } if(contentToBeDragged_next){ contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next); }else{ contentToBeDragged_src.appendChild(contentToBeDragged); } contentToBeDragged = false; dragDropIndicator.style.display='none'; if(indicateDestinationBox){ indicateDestinationBox.style.display='none'; document.body.appendChild(indicateDestinationBox); } mouseoverObj = false; } /* Preparing data to be saved */ function saveDragDropNodes() { var saveString = ""; var uls = dragDropTopContainer.getElementsByTagName('UL'); for(var no=0;no<uls.length;no++){ // LOoping through all <ul> var lis = uls[no].getElementsByTagName('LI'); for(var no2=0;no2<lis.length;no2++){ if(saveString.length>0)saveString = saveString + ";"; saveString = saveString + uls[no].id + '|' + lis[no2].id; } } document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>'; } function initDragDropScript() { dragContentObj = document.getElementById('dragContent'); dragDropIndicator = document.getElementById('dragDropIndicator'); dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer'); document.documentElement.onselectstart = cancelEvent;; var listItems = dragDropTopContainer.getElementsByTagName('LI'); // Get array containing all <LI> var itemHeight = false; for(var no=0;no<listItems.length;no++){ listItems[no].onmousedown = initDrag; listItems[no].onselectstart = cancelEvent; if(!itemHeight)itemHeight = listItems[no].offsetHeight; if(MSIE && navigatorVersion/1<6){ listItems[no].style.cursor='hand'; } } var mainContainer = document.getElementById('dhtmlgoodies_mainContainer'); var uls = mainContainer.getElementsByTagName('UL'); itemHeight = itemHeight + verticalSpaceBetweenListItems; for(var no=0;no<uls.length;no++){ uls[no].style.height = itemHeight * boxSizeArray[no] + 'px'; destinationBoxes[destinationBoxes.length] = uls[no]; } var leftContainer = document.getElementById('dhtmlgoodies_listOfItems'); var itemBox = leftContainer.getElementsByTagName('UL')[0]; document.documentElement.onmousemove = moveDragContent; // Mouse move event - moving draggable div document.documentElement.onmouseup = dragDropEnd; // Mouse move event - moving draggable div var ulArray = dragDropTopContainer.getElementsByTagName('UL'); for(var no=0;no<ulArray.length;no++){ ulPositionArray[no] = new Array(); ulPositionArray[no]['left'] = getLeftPos(ulArray[no]); ulPositionArray[no]['top'] = getTopPos(ulArray[no]); ulPositionArray[no]['width'] = ulArray[no].offsetWidth; ulPositionArray[no]['height'] = ulArray[no].clientHeight; ulPositionArray[no]['obj'] = ulArray[no]; } if(initShuffleItems){ var allItemsObj = document.getElementById('allItems'); var initItems = allItemsObj.getElementsByTagName('LI'); for(var no=0;no<(initItems.length*10);no++){ var itemIndex = Math.floor(Math.random()*initItems.length); allItemsObj.appendChild(initItems[itemIndex]); } } if(!indicateDestionationByUseOfArrow){ indicateDestinationBox = document.createElement('LI'); indicateDestinationBox.id = 'indicateDestination'; indicateDestinationBox.style.display='none'; document.body.appendChild(indicateDestinationBox); } } window.onload = initDragDropScript; </script> </head> <body> <table border="1" height=15% width=100% align=centre bgcolor="#cccccc"> <td align=center><h3>Different shaped signs have different meanings. Place the answer you think offers the best description underneath each sign. Correct answers will highlight in green and incorrect answers will highlight in red. <br><br>If you get any answers wrong press F5 and have another go!</h3></td> </table> <br><br> <div id="dhtmlgoodies_dragDropContainer"> <div id="topBar"> </div> <div id="dhtmlgoodies_listOfItems"> <div> <p>Answers</p> <ul id="allItems"> <li id="node20" groupId="box1">Information Sign</li> <li id="node1" groupId="box2">Warning Sign</li> <li id="node9" groupId="box3">Positive Order</li> <li id="node21" groupId="box4">Negative Order</li> </ul> <form name="button" action="unit1_p2.html"> <input type="submit" value="Next Page"> </form> </div> </div> <div id="dhtmlgoodies_mainContainer"><!-- ONE <UL> for each "room" --><div> <table border=0 align="right" bgcolor="#c8d0e0"> <tr> <td> <table border=0 align=center bgcolor="#c8d0e0"> <tr> <td align=center><img src="images/no_through_road.jpg" width="90" height="90"> <div> <p></p> <ul id="box1"> </ul> </div> </td> <td align=center><img src="images/crossroad.jpg" width="90" height="90"> <div> <p></p> <ul id="box2"></ul> </div> </td> </tr> <tr> <td align=center><img src="images/ahead_only.jpg" width="90" height="90"> <div> <p></p> <ul id="box3"> </ul> </div> </td> <td align=center><img src="images/40mph.jpg" width="90" height="90"> <div> <p></p> <ul id="box4"></ul> </div> </td> </tr> </table> </td> </tr></table></div></div></td><ul id="dragContent"></ul><div id="dragDropIndicator"></div><div id="saveContent"></div></body></html> If I run this in IE it is ok but in Firefox it looks naff ... also different size monitors display it badly too. The four images are just road signs ... I have not included those.i know it must be the css but can't figure out what.Thanks for looking!Paul
  • Create New...