nano

There is a great article here on creating accessible forms: http://www.alistapart.com/articles/prettyaccessibleforms It's a really great read and insight. The concept of using ordered lists is pretty cool With regards to your above issue, overflow:hidden; on the container is a known method and I believe it works in all browsers bar the quirks modes ones such as IE6.

Hello, Please see below: http://jsfiddle.net/RUSm3/53/ Hopefully it helps, I was a little rush. I also made a couple of tweaks to your HTML markup - just to make it a little more semantic. Let me know if it helps.

If you're using jQuery, rather then play with document.getElementBy methods - why not just use jQuery selectors. Such as $('#ext-chat-output-join').hide() etc.

I am not sure how the above comments would help I dont know if I understand the problem fully, however you want subCats to display below boxContent? Is so, why is subCats within your boxContent div? Can't you just move subCats? Or if boxContent is meant to be a container then add overflow:hidden on boxContent. Maybe if you could clear up what you are trying to do, then I might be able to help

There are a few nice jQuery plugins around to do that but one I like is called Lazy Load.. You can find it here: http://www.appelsiini.net/projects/lazyload It's a great way for optimisation as certain browsers can only make say 4-8 requests in parallel.

I've only really touched the surface of jQuery AJAX and I remember what a pain caching was

I'm not any good at AJAX but could it be a possibility that the AJAX call has been cached by the browser, thus doing it just once..? See if you can set caching to false for that particular call.. maybe another avenue for you to investigate.

Hey Guys, I am a little stuck at the moment. I have the following HTML: <tr> <td class="place">Cardiff</td> <td class="selection"><input type="checkbox" name="Cardiff" class="been" value="CA_1" /></td> <td class="selection"><input type="checkbox" name="Cardiff" class="going" value="CA_2" /></td> </tr> <tr> <td class="place">Amsterdam</td> <td class="selection"><input type="checkbox" name="Amsterdam" class="been" value="AM_1" /></td> <td class="selection"><input type="checkbox" name="Amsterdam" class="going" value="AM_2" /></td> </tr> I am playing with Google Maps API and need to show different marker dependent on what the user checks. If they select the input with class been - show marker1.png If they select the input with class going - show marker2.png Then the fun one which I need help with.. If they select both checkboxes in the same table row, then show marker3.png This is what I currently have: $('tr input[type="checkbox"]').click(function() { var noCheckboxes = $('input[type=checkbox]'); var selected = this.value; var boxClass = $(this).attr("class"); var location = selected.substring(0, selected.indexOf('_')); // example: CA var boxType = boxClass.substring(0, boxClass.indexOf(' ')); // been or going due to focus // Find out if multiple checkboxes are checked for single marker if(noCheckboxes.filter(':checked').length > 1 && noCheckboxes.filter(':checked').attr('value', selected).length > 1) { plotImage = 'marker3.png'; } else { // Set plotImage dependant on checkbox checked switch (boxType) { case 'been': plotImage = 'marker1.png'; break; case 'going': plotImage = 'marker2.png'; break; default: plotImage = 'marker1.png'; } } }); Sooo basically, how can I give the markers a different image if both the check boxes are checked and in the same row only. My above jQuery fails badly Any help would be appreciated. Cheers.

Hello All, I am currently stuck on a problem and haven't got a clue what to search, I've looked at most articles related to 2D arrays and AJAX. Sorry if this is in the wrong section of the forum, it related to JQuery, AJAX but mainly JavaScript 2D arrays. I am using JQuery and want to create an array with error codes and messages. Here is sample XML: <resources> <resource name="errorCode1">Error Message One</resource> <resource name="errorCode2">Error Message Two</resource> </resources> Here is my current AJAX call: $.ajax({ type: "GET", url: "/resource.xml", dataType: "xml", success: function(xml) { $(xml).find('resource').each(function(){ errorCode = $(this).attr('name'); errorMsg = $(this).text(); }); } }); What I am trying to do, somehow, is create an array that stores all error codes and error messages. I then hope to pull back respective errors when searching for particular error codes. Any help is greatly appreciated. Cheers Guys.

Sure, go for it - even though I'm not a fan of tables :-\

<div style="float:left;margin-right:15px;width:200px;"> <b>coupon.gif</b><br> <a href="coupon.gif">Download coupon.gif</a> - <a href="full/coupon.gif">View Full Version of Image</a> <hr> <a href="1/coupon.gif"><img src="thumbnails/coupon.gif" alt="coupon.gif" title="coupon.gif" border="0"/> </a> <br /><br /> </div> Though for a semantic markup - you should look to stick you styles in a stylesheet

Could you put a fixed width on the first div? That will then make room for the second one to float

Of course! How silly of me.. Just pop the IMG inside the texte_contenus container: <div class="texte_contenus"> <img src="sealions_ultima-ball.jpg" border="0" align="right" class="img_contenus" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel arcu odio. Nunc ut diam quam. Vestibulum non mauris quam, lacinia luctus leo. Aliquam fringilla egestas fringilla. Aenean metus massa, iaculis sed consequat a, pellentesque eu sapien. Duis sed dui massa, et laoreet urna. Sed purus felis, pulvinar at egestas nec, semper in odio. Nam a mauris dui, ut consequat velit. Integer posuere, dolor non posuere pretium, sem nisl pellentesque purus, ac fringilla velit justo nec nisi. Maecenas tempus gravida mattis. Nunc ut sagittis quam. Ut sollicitudin hendrerit urna, porta consequat felis sagittis vel.</p> <p>Curabitur sit amet odio felis, eu laoreet turpis. Morbi nec nunc eget lacus dapibus tincidunt ac quis dui. Integer ornare urna ut lacus convallis nec pulvinar leo scelerisque. Sed ornare auctor nulla, ac semper magna bibendum id. Morbi id posuere erat. Sed porttitor, lacus ac tincidunt feugiat, velit enim rutrum sapien, et porta sapien lectus at erat. Etiam vel ligula eget tortor tincidunt rutrum. Mauris accumsan arcu at elit dignissim ut porttitor risus dapibus. Etiam placerat consectetur rhoncus. Aliquam metus mauris, rutrum pellentesque condimentum ut, pulvinar id urna. Quisque imperdiet nisl eget nulla mattis vel ullamcorper lectus convallis. Ut at velit ligula. Vivamus eu eros quis lectus pulvinar tincidunt. Sed et gravida lectus.</p> </div> And make sure you float your image right: .img_contenus { float:right; } That should do the trick, silly me

ah, I wonder why IE 8 is being so difficult! It is the direction:rtl; that is causing issues for IE8 but there is no reason it should.. If you float the image right etc, I can’t see why that shouldn’t work.. Maybe someone else knows and has experience of this behavior? On another note, you might want to wrap your paragraphs in <p> tags, instead of using line breaks <br /> I am not too sure about this one, fixing widths or possibly look at positions..? Sorry

What about the container that holds the main text.. It would be good to see how the page has been structured with the text and the image..

Good spot Should be a closing curly bracket though and not a semicolon }

Can you paste the code snippet of the HTML and the CSS for the relative entries. This will give us a better understanding of what needs a resolution. Thanks

I would say he is asking for flat out freelance work and not help with modifying the code himself.. There are many other community based forums out there where people can charge you for work like that, however this one is for helping people learn and develop their own code. You never know though

Why can't we do it with the :hover selector CSS: .pagination{ border:1px solid #CCCCCC; margin-left:2px; padding:2px 4px; display:block; float:left; } .pagination:hover { background-color:#990000; } .what { float:left; } HTML: <div class="what">I have this</div><a href="aaa.php" class="pagination">a</a> You need to watch out when you float just the anchor tag in FF and IE8 as it will end up before the text. So that's why the div is there around your primary text which is floated too.. Does that help?

I don't reallyy understand the problem, could you maybe clear up what you are after? Could you be possibly looking at having an automatic height on a container, so it extends dependant on content. Then setting the background image to the bottom of the element? /* This extends the containers height automatically */ #container { height:auto; overflow:hidden; } /* Sets the background image to the bottom of the container */ #container .image { background: transparent url('') no-repeat bottom left; } You obivously have to specify widths and heights for you background images, the above code does not reflect your code, just an example. That was a stab at the dark but if you could specify what image and what you are actually looking for, then I might try and help a bit more

That's a lot of float But haku is right, if you are floating divs, having them next to each other and you want to have another div on another line, simply clear the floats.. #question { clear:both; } You can clear left, right or both.. Hope that's what you were looking for. Cheers

Yes perfect. Thanks Nathan. Though as you were half asleep you did miss the closing single quote on style.display='none" and the closing div by save a lot! was closing the div id="ts_over_col1" but I wont hold it against you Thanks again. Worked a treat!

You could just create a new div for the background/box and then a sep. div for the text. and for the background just have a position: absolute; with background: url(image.gif) center center no-repeat; That way you can control both elements separately? Cheers.

Hey, I am not sure if you guys are familiar with the BBC iPlayer website, if a user hovers over the image, a new transparent div is created - showing how many days left etc. I wanted to create a similar feature for a console games online store I am attempting to make. I have created what I believe to be a successful onmouseover command, but it doesnt seem to do the job fully. example: index.php <div id="top_sellers_col1"> <div id="ts_over_col1" style="visibility: hidden;">£32.99<br />RRP: £600<br />Save: A lot!</div> <a href="#" onmouseover="visVisible('ts_over_col1')" onmouseout="visHidden('ts_over_col1')"> <img src="bully.jpg" width="117px" height="178px" alt="Bully" class="col_img" /> <div id="col_info">Bully: Scholarship Edition<br />(Xbox 360)</div> </a></div> body.css (ts_over_col1) #ts_over_col1 { position: absolute; top: 3px; left: 9px; width: 117px; height: 140px; background: #000; filter:alpha(opacity: 60); opacity: 0.60; -moz-opacity: 0.60; color: #fff; z-index: 100; font-weight: bold; } javascript source function layerSetup(id,visibility){ if(document.getElementById){ this.obj = document.getElementById(id).style; this.obj.visibility = visibility; return this.obj;} else if(document.all){ this.obj = document.all[id].style; this.obj.visibility = visibility; return this.obj;} else if(document.layers){ this.obj = document.layers[id]; this.obj.visibility = visibility; return this.obj;} } function visVisible(param){ new layerSetup(param,'visible'); } function visHidden(param){ new layerSetup(param,'hidden'); } The script was taken from tutorials dotted around. The reason it is not working the way I would like is, if you hover your mouse over the new created div, you have to keep the mouse absolutely still, as a slight movement will mean the div will not show again. I am sorry for the description, its rather hard to explain. Like on the BBC iPlayer site, if you hover, you can move the mouse all over the new hover div (created over the image) and it will not move. If you hover over my created div, it will be visible and hidden every time the mouse is moved. Once again sorry for the poor explanation, any help would be appreciated. Cheers.

Ok I found the problem, and for anyone else who might have a simular issue: The variables in the SQL statement have to be in quotes, otherwise it will treat the '@' as a like argument (from the email address) so result: $info = mysql_fetch_array(mysql_query("select * from user_system WHERE email = '$user'")); and to echo: {$info['email']} Thanks for the help