snick

Cheers heydanreeves, I took a look at that but my only issue is that all of them tend to work on percents of the page to work out the collum width. I don't suppose you (or anyone) has any info on how to get sections of the site changing positioin based on the resolution? Very similar to this site: http://method.com/ All their boxes just position themselves underneith to fit, and don't simply change size. This is the effect I'm after and I'm unsure what to even search for.

Could anyone advise me on which responsive framework to use for something like this. Uploaded with ImageShack.us As you can see I have six columns for monitor, three for a tablet and just two for a smartphone. I've looked at many different frameworks (I found the Zurb really nice), however, I'm unsure if there are any better alternatives considering my sections will split depending on screen size. What I have built here works fine as I adjust the width of the website, but I figured building ontop of an existing framework would be a much better idea than me trying to add in all the seperate media queries. Anyone got any suggestions? Or perhaps examples of similar frameworks like what I'm after?

Absolutley fantastic (: Thanks Léon!

Hi there. I have a 6 x 4 grid (Using this as a base - http://www.gridsyste...idMarginLeft=20) and I'm wanting to murge the top left boxes into one larger box. Essentially I'm trying to turn this: into this Here's a rough jsfiddle version of what I have so far http://jsfiddle.net/CgNL9/ I cannot figure out how to do this withouth messing up the other boxes, don't suppose anyone has any ideas?

The code below simply shows and hides a div (content) when you click on the heading (heading). <script type="text/javascript"> jQuery(document).ready(function() { jQuery(".content").hide(); //toggle the componenet with class msg_body jQuery(".heading").click(function() { jQuery(this).next(".content").slideToggle(0); }); }); </script> Demo - http://www.designgala.com/demos/collapse-expand-jquery.html By default, the content is always hidden - Is there any way to have the content showing by default? I'm using a number of these on a page, some will need to be showing by default, others will have to be hidden. Just wondering how to maybe add a bit to the code to make both possibloe?

Hi there guys, I've recently came across LiveValidation (http://livevalidation.com/) but I'm having a little trouble getting the validation to work with dropdowns. There are no examples in the examples page (http://livevalidation.com/examples), nor can I find any forum mentions. Can I ask if anyone has ever used this with a drop down? Or would anyone know how to edit the script to allow validation on dropdowns? Link to the main Javascript: http://www.livevalid...n_standalone.js In particular what I'm wanting is the following function to work with a drop down. <form> <input name="example" type="text" id="example" value="" /> <script type="text/javascript"> var f1 = new LiveValidation('example'); f1.add(Validate.Presence); </script> </form> The functioin above simply checks if the user hasn't entered anything into the 'example' field. I'm wanting the same thing to happen when the user hasn't selected an option from the drop down, something like below. <form> <select name="example"> <option value=""></option> <option value="One">1</option> <option value="Two">2</option> </select> <script type="text/javascript"> var f1 = new LiveValidation('example'); f1.add(Validate.Presence); </script> </form> Any idea on how to go about doing this?

If I'm honest I found that article a little hard to follow, but I've given it a go. I'm a little confused as to how to put my data into this thing. <?php // Suggested Code $tpl_file = '/includes/php/forms/contact/email_tpl.txt'; if (!file_exists($tpl_file)) { die('Template file not found!'); exit; } $msg_tmpl = file_get_contents($tpl_file); $arr_tpl_vars = array('{name}'); $e_msg = str_replace($arr_tpl_vars); // End Suggested code if(!$_POST) exit; // Email address verification, do not edit. function isEmail($email) { return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email)); } if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n"); // Initial Information. $name = $_POST['name']; $message = $_POST['message']; $email = $_POST['email']; $phone = $_POST['phone']; $verify = $_POST['verify']; // Initial Information. if(trim($name) == '') { echo '<div class="error_message">Attention! You must enter your full name.</div>'; exit(); } else if(trim($message) == '') { echo '<div class="error_message">Attention! Please enter a message.</div>'; exit(); } else if(trim($email) == '') { echo '<div class="error_message">Attention! Please enter a valid email address.</div>'; exit(); } else if(!isEmail($email)) { echo '<div class="error_message">Attention! You have enter an invalid e-mail address, try again.</div>'; exit(); } else if(trim($phone) == '') { echo '<div class="error_message">Attention! Please enter a phone number.</div>'; exit(); } // Verification. if(!isset($verify) || trim($verify) == '') { echo '<div class="error_message">Attention! Please enter the verification number.</div>'; exit(); } else if(trim($verify) != '4') { echo '<div class="error_message">Attention! The verification number you entered is incorrect.</div>'; exit(); } if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); } // Send to configuration option. $address = "admin@test.co.uk"; // Subject configuration option. $e_subject = 'Startup Brief - ' . $businessname . '.'; // Email body configuration option. $e_body = "Message" . PHP_EOL . PHP_EOL; $e_content = "Message" . PHP_EOL . PHP_EOL . "Name \n" . $name . PHP_EOL . PHP_EOL . "phone \n" . $phone . PHP_EOL . PHP_EOL . "Email \n" . $email . PHP_EOL . PHP_EOL . "Message \n" . $message . PHP_EOL . PHP_EOL . $e_reply = "You can contact $name via email, $email or via phone $phone"; $msg = wordwrap( $e_body . $e_content . $e_reply, 70 ); $headers = "From: $email" . PHP_EOL; $headers .= "Reply-To: $email" . PHP_EOL; $headers .= "MIME-Version: 1.0" . PHP_EOL; $headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL; $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL; if(mail($address, $e_subject, $msg, $headers)) { echo "<fieldset>"; echo "<div id='success_page'>"; echo "<h1>Email Sent Successfully.</h1>"; echo "<p>Thank you <strong>$name</strong>, your message has been submitted to us.</p>"; echo "</div>"; echo "</fieldset>"; } else { echo 'ERROR!'; } // autoresponce /* Prepare autoresponder subject */ $respond_subject = "Thank you for contacting us!"; /* Prepare autoresponder message */ $respond_message = "Hello! Thank you for contacting us! We will get back to you as soon as possible! Yours sincerely, Your name www.yourwebsite.com "; /* Send the message using mail() function */ mail($email, $respond_subject, $respond_message); ?> All my email_tpl.txt says is this. Hi {name}, The Admin Just trying to test it really. But the article didn't show is being used within something like this, so I'm a little confused to say the least. Any chance any of this is right?

Thanks for the info Rallport. I'll try and get my head around this and report back.

Hi Guys, I have a simple contact form, with validation and auto responce here, but I'm really confused how to format the source. Could anyone shed some light on if the parts of this form are in the correct possition? It looks really messy and unorganised to me to be honest, just looking for some pointers on how to potentially clean up this souce. <?php if(!$_POST) exit; // Email address verification, do not edit. function isEmail($email) { return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email)); } if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n"); // Initial Information. $name = $_POST['name']; $message = $_POST['message']; $email = $_POST['email']; $phone = $_POST['phone']; $verify = $_POST['verify']; // Initial Information. if(trim($name) == '') { echo '<div class="error_message">Attention! You must enter your full name.</div>'; exit(); } else if(trim($message) == '') { echo '<div class="error_message">Attention! Please enter a message.</div>'; exit(); } else if(trim($email) == '') { echo '<div class="error_message">Attention! Please enter a valid email address.</div>'; exit(); } else if(!isEmail($email)) { echo '<div class="error_message">Attention! You have enter an invalid e-mail address, try again.</div>'; exit(); } else if(trim($phone) == '') { echo '<div class="error_message">Attention! Please enter a phone number.</div>'; exit(); } // Verification. if(!isset($verify) || trim($verify) == '') { echo '<div class="error_message">Attention! Please enter the verification number.</div>'; exit(); } else if(trim($verify) != '4') { echo '<div class="error_message">Attention! The verification number you entered is incorrect.</div>'; exit(); } if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); } // Send to configuration option. $address = "admin@test.co.uk"; // Subject configuration option. $e_subject = 'Startup Brief - ' . $businessname . '.'; // Email body configuration option. $e_body = "Message" . PHP_EOL . PHP_EOL; $e_content = "Message" . PHP_EOL . PHP_EOL . "Name \n" . $name . PHP_EOL . PHP_EOL . "phone \n" . $phone . PHP_EOL . PHP_EOL . "Email \n" . $email . PHP_EOL . PHP_EOL . "Message \n" . $message . PHP_EOL . PHP_EOL . $e_reply = "You can contact $name via email, $email or via phone $phone"; $msg = wordwrap( $e_body . $e_content . $e_reply, 70 ); $headers = "From: $email" . PHP_EOL; $headers .= "Reply-To: $email" . PHP_EOL; $headers .= "MIME-Version: 1.0" . PHP_EOL; $headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL; $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL; if(mail($address, $e_subject, $msg, $headers)) { echo "<fieldset>"; echo "<div id='success_page'>"; echo "<h1>Email Sent Successfully.</h1>"; echo "<p>Thank you <strong>$name</strong>, your message has been submitted to us.</p>"; echo "</div>"; echo "</fieldset>"; } else { echo 'ERROR!'; } // autoresponce /* Prepare autoresponder subject */ $respond_subject = "Thank you for contacting us!"; /* Prepare autoresponder message */ $respond_message = "Hello! Thank you for contacting us! We will get back to you as soon as possible! Yours sincerely, Your name www.yourwebsite.com "; /* Send the message using mail() function */ mail($email, $respond_subject, $respond_message); ?> Thanks.

Cannot thank you enough, works perfectly (: Thanks Evu, greatly appreciate your help.

Hi there, I'm currently working with a Media Query theme, and I have a quick question on how to go about changing the way it behaves when re-sized. See here for an online example. http://o-p-o.org/test/ Regular CSS - http://o-p-o.org/test/css/style.css Responsive CSS - http://o-p-o.org/test/css/responsive.css Attached are some screenshots on how it behaves, and what I'm trying to achieve. 1.jpg is the full width currently, and 2.jpg is what I'd like it to look like. 3.Jpg is the medium width Currently and 4.jpg is what I'd like it to look like. I've tried so many things to try and get this to work but I really can't figure out how to do this. Any help with this would be greatly appreciated. Cheers.

No sadly not, I need that div to be 100% width and height of the page. So It needs to be outside the div, as far as I know. It'd probably be an easier fix if I was able to place it inside the wrap. But sadly I can't. Anymore suggestions? I've been reading up on an iframe fix, which seems a little bit over the top just to fix some z-index. But I may have to give it a go. //EDIT. Fixed. Was able to fix this by moving all the things I wanted to be above the wrap into a second wrap with a higher z-index.

Sorry forgot to include that. It's outside the div, it's a css lightbox kind of thing: </head> <body id="home"> <!--wrap--> <div id="wrap"> <!--main--> ... <div id="vpbg"></div> ... <div id="promo"></div> ... </div> <!--end wrap--> <div id="dark"></div> </body> </html>

Hey guys, just a question about this z-index issue. I've been reading a lot about how z-index doesn't work in IE to try and fix the problem I'm having. One post said that the trick was to give your parent a z-index and set position to either relative or absolute. I've tried all sorts, but nothing have some of if. Could someone take a look and see if anyone can see the problem: </head> <body id="home"> <!--wrap--> <div id="wrap"> <!--main--> ... <div id="vpbg"></div> ... <div id="promo"></div> ... </div> <!--end wrap--> </body> </html> Heres a simple version of the code for you to see. What I'm wanting to happen is for #dark to be higher than #promo but below #vpbg. Which works fine in every other browser. But IE always places #dark above everything. Seeing as it said give your parent a z-index value. I figured the only parent this particular div had was the wrap. So I gave the wrap a value of 1. But then it just made all the browsers display it all the same with #dark over everything. Anyone know why this is happening? Here is the css for all the DIVs that work in all browsers but IE: #wrap { position:relative; width: 960px; margin-left: auto; margin-right: auto; margin-top:4px; } #vpbg { position:absolute; left:0; top:76px; width:956px; height:267px; z-index:30; background-image: url(img/vpbg.jpg); } #dark { position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:20; background-color: #000000; } #promo { position:absolute; top:571px; width:954px; height:192px; background:#FFFFFF; border-style:solid; border-width:1px; border-color:#cbcbcb; background-repeat:repeat-x; background-color: #F9F9F9; background-image: url(img/promo.jpg); z-index:10; } Even if someone knew how to get a div ontop of #dark in ie it'd be fine. I could do the rest. I just can't seem to get a div above it. Thanks for any help.

Thanks for the info. I did do some searching but couldn't really find a straight answer and wanted to make sure. Thanks alot for your help lloydsolutions & mrsminkie