DarkxPunk

Maybe I can achieve this in CSS (but cant figure it out) so I thought maybe JS could do it. Can't figure it out. So i thought maybe document.getElementById("Div I want to change").style.height = document.getElementById("Div I want to copy").style.height; would work. Its not. Any ideas? I have it loading when the Div I want to change loads. SOLVED: So I figured out .style.height does not give you the CSS value (figures) so you use .offsetHeight. Than because it does not give you the measurement used (figures again) you need to add the measurement, so +"px" was used. Here is the working code: document.getElementById("Div you want to change").style.height = document.getElementById("Div you want to copy").offsetHeight+"px";

Here is my HTML: <div class="options" id="advertise"> <div class="oTitle"><h2>Advertise</h2><h5>Blah Blah</h5></div> <div class="oContent"> <p>Blah Blah</p> </div> <div class="moreInfo"><p>Learn More<p></div> </div> <div class="options" id="host"> <div class="oTitle"><h2>Host</h2><h5>Blah Blah</h5></div> <div class="oContent"> <p>Blah Blah</p> </div> <div class="moreInfo"><p>Learn More<p></div> </div> <div class="options" id="experience"> <div class="oTitle"><h2>Experience</h2><h5>Blah Blah</h5></div> <div class="oContent"> <p>Blah Blah</p> </div> <div class="moreInfo"><p>Learn More<p></div> </div> Here is my CSS: .options {border: 1px solid #e7e5e5;width: 275px;height: 555px;}.options h2,.options h5,.options p {margin: 0 !important;}.options h2,.options h5 {color: #6ac5f2;}.oTitle {margin: 0 0 30px 0;padding: 20px 0;background: #eeeeee;}.oContent {padding: 0 15px;}.oContent ul {margin: 5px inherit;}.moreInfo {margin: 20px auto 0;padding-top: 2px;width: 90px;height: 20px;}#advertise,#host,#experience {position: relative;}#advertise {z-index: 1;}#host {z-index: 2;}#experience {z-index: 3;} Why won't it stack?

I actually was looking at a site with a drop down menu and I thought to myself maybe this is why. I am not convinced though it is the most efficient way. I challenge myself to make it simpler Will get back to you with my results.

Add overflow: hidden; to the container

Hey everyone, So I have a comment to make and I would love feed back about my comment. Now I have been building websites for about 4 years now. I still know almost nothing and I have allot to learn, but I am trying my best to get there. Through my travels I have noticed many 'common practices' when attempting to code certain things, in this example a nav bar. Allot of the times these 'common practices' are over done and add extra code when not needed, or as far as I can tell. Here is my example: 'Common Practice' Nav Bar <div id="nav"><ul><li><a href="#>Home</a></li><li><a href="#>About</a></li><li><a href="#>Contact</a></li><ul></div> My Simple Nav Bar <div id="nav"><a href="#>Home</a><a href="#>Home</a><a href="#>Home</a></div> As you can see I saved allot of extra (almost useless) typing. I still gotta style it all the same in CSS, actually my simple nav requires less styling because I don't gotta remove default styling from the ul and li. 'Common Practice' Nav Bar CSS ul,li {margin: 0;border: 0;padding: 0;list-style: none;}li {float: left;}li a {color: #eeeeee;} My Simple Nav Bar CSS #nav a {float: left;color: #eeeeee;} By now I think you see my point. Now there are many instances where you need something to wrap the links, but why use ul + li when we have the beauty of divs? Thanks for reading this, hope this made your lives easier. Also please rip me apart if I am totally wrong, I WANNA LEARN .

Don't forget. Always RE READ your code 10000000000000times

Or learn JS or PHP - I am in the same boat as you bro... I am starting a big website project and I NEED (not simply want) the nav bar to do this. Maybe we can work together on the JS/PHP?

Give the header the same height as the other divs so 141px. Fixed it for me.

Is it possible to have the hand cursor appear when mousing over a "submit" input? HTML <input id="submit" type="submit"> CSS #submit { cursor: hand; } Doing this does not do it... Any ideas? [sOLVED] Was supposed to use pointer not hand. My bad!

Here is the error: Fatal error: Call to undefined function: filter_var() in \\boswinfs02\home\users\web\b2680\ez.barfuturian2006\beta\index-5.php on line 102 Here is the PHP: <?php function spamcheck($field) { $field=filter_var($field, FILTER_SANITIZE_EMAIL); if(filter_var($field, FILTER_VALIDATE_EMAIL)) { return TRUE; } else { return FALSE; } } if (isset($_REQUEST['contact'])) { $mailcheck = spamcheck($_REQUEST['contact']); if ($mailcheck==FALSE) { echo "<form method='post' action='/index-5.php'><cite>E-Mail Address:</cite><br /><input name='contact' type='text' size='30px' /><br /><cite>Subject:</cite><br /><input name='subject' type='text' size='30px' /><br /><cite>Your Message:</cite><br /><textarea name='message' rows='10' cols='30'></textarea><br /><input type='submit' /></form>"; } else { $email = $_REQUEST['contact'] ; $subject = $_REQUEST['subject'] ; $message = $_REQUEST['message'] ; mail("michaelasnape@me.com", "Subject: $subject",$message, "From: $email" ); echo "Thank you for your interest, we will be in contact soon."; } } else { echo "<form method='post' action='/index-5.php'>E-Mail Address:<br /><input name='contact' type='text' size='30px' /><br />Subject:<br /><input name='subject' type='text' size='30px' /><br />Your Message:<br /><textarea name='message' rows='10' cols='30'></textarea><br /><input type='submit' /></form>"; } ?> I have used this code before... Never a error like this. Where is my error?

Forms JS://forms;(function($){ $.fn.forms=function(o){ return this.each(function(){ var th=$(this) ,_=th.data('forms')||{ errorCl:'error', emptyCl:'empty', invalidCl:'invalid', notRequiredCl:'notRequired', successCl:'success', successShow:'4000', mailHandlerURL:'bin/MailHandler.php', ownerEmail:'support@guardlex.com', stripHTML:true, smtpMailServer:'localhost', targets:'input,textarea', controls:'a[data-type=reset],a[data-type=submit]', validate:true, rx:{ ".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'}, ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'}, ".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'}, ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'}, ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'}, ".message":{rx:/.{20}/,target:'textarea'} }, preFu:function(){ _.labels.each(function(){ var label=$(this), inp=$(_.targets,this), defVal=inp.val(), trueVal=(function(){ var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html() return defVal==''?defVal:tmp })() trueVal!=defVal &&inp.val(defVal=trueVal||defVal) label.data({defVal:defVal}) inp .bind('focus',function(){ inp.val()==defVal &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl)) }) .bind('blur',function(){ _.validateFu(label) if(_.isEmpty(label)) inp.val(defVal) ,_.hideErrorFu(label.removeClass(_.invalidCl)) }) .bind('keyup',function(){ label.hasClass(_.invalidCl) &&_.validateFu(label) }) label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide() }) _.success=$('.'+_.successCl,_.form).hide() }, isRequired:function(el){ return !el.hasClass(_.notRequiredCl) }, isValid:function(el){ var ret=true $.each(_.rx,function(k,d){ if(el.is(k)) ret=d.rx.test(el.find(d.target).val()) }) return ret }, isEmpty:function(el){ var tmp return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal') }, validateFu:function(el){ el.each(function(){ var th=$(this) ,req=_.isRequired(th) ,empty=_.isEmpty(th) ,valid=_.isValid(th) if(empty&&req) _.showEmptyFu(th.addClass(_.invalidCl)) else _.hideEmptyFu(th.removeClass(_.invalidCl)) if(!empty) if(valid) _.hideErrorFu(th.removeClass(_.invalidCl)) else _.showErrorFu(th.addClass(_.invalidCl)) }) }, getValFromLabel:function(label){ var val=$('input,textarea',label).val() ,defVal=label.data('defVal') return label.length?val==defVal?'nope':val:'nope' } ,submitFu:function(){ _.validateFu(_.labels) if(!_.form.has('.'+_.invalidCl).length) $.ajax({ type: "POST", url:_.mailHandlerURL, data:{ name:_.getValFromLabel($('.name',_.form)), email:_.getValFromLabel($('.email',_.form)), phone:_.getValFromLabel($('.phone',_.form)), fax:_.getValFromLabel($('.fax',_.form)), state:_.getValFromLabel($('.state',_.form)), message:_.getValFromLabel($('.message',_.form)), owner_email:_.ownerEmail, stripHTML:_.stripHTML }, success: function(){ _.showFu() } }) }, showFu:function(){ _.success.slideDown(function(){ setTimeout(function(){ _.success.slideUp() _.form.trigger('reset') },_.successShow) }) }, controlsFu:function(){ $(_.controls,_.form).each(function(){ var th=$(this) th .bind('click',function(){ _.form.trigger(th.data('type')) return false }) }) }, showErrorFu:function(label){ label.find('.'+_.errorCl).slideDown() }, hideErrorFu:function(label){ label.find('.'+_.errorCl).slideUp() }, showEmptyFu:function(label){ label.find('.'+_.emptyCl).slideDown() _.hideErrorFu(label) }, hideEmptyFu:function(label){ label.find('.'+_.emptyCl).slideUp() }, init:function(){ _.form=_.me _.labels=$('label',_.form) _.preFu() _.controlsFu() _.form .bind('submit',function(){ if(_.validate) _.submitFu() else _.form[0].submit() return false }) .bind('reset',function(){ _.labels.removeClass(_.invalidCl) _.labels.each(function(){ var th=$(this) _.hideErrorFu(th) _.hideEmptyFu(th) }) }) _.form.trigger('reset') } } _.me||_.init(_.me=th.data({forms:_})) typeof o=='object' &&$.extend(_,o) }) }})(jQuery)$(window).load(function(){ $('#contact-form').forms({ ownerEmail:'#' })})

Any help at all please? I need this done for a job...

Okay but every time I send the data it says it worked. But it does not send the data. Clearly the JS is working fine and collecting the data, but it's not sending it to the php to send it to me.What do I have to change, or more specifically how do I change it to get it to work?

There are a few files provides (honestly I am completely willing to simply redo the code for this damn form but I need to keep the validation for the fields, which is done in JS) I will compress all the code provided and you can use the form provided here to figure this out. Contact Form Package.zip

Made the corrections, still no results. PHP: <?php$owner_email = $_POST["michaelasnape@me.com"];$headers = 'From:' . $_POST["email"];$subject = 'A message from your site visitor ' . $_POST["name"];$messageBody = "";if($_POST['name']!='nope'){ $messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}if($_POST['email']!='nope'){ $messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}else{ $headers = '';}if($_POST['state']!='nope'){ $messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}if($_POST['phone']!='nope'){ $messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}if($_POST['fax']!='nope'){ $messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}if($_POST['message']!='nope'){ $messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";}if($_POST["stripHTML"] == 'true'){ $messageBody = strip_tags($messageBody);}try{ if(!mail($owner_email, $subject, $messageBody, $headers)){ throw new Exception('mail failed'); }else{ echo 'mail sent'; }}catch(Exception $e){ echo $e->getMessage() ."\n";}?><!--<?php$field_name = $_POST['name'];$field_email = $_POST['email'];$field_message = $_POST['message'];$mail_to = 'michaelasnape@me.com';$subject = 'Message from a site visitor '.$field_name;$body_message = 'From: '.$field_name."\n";$body_message .= 'E-mail: '.$field_email."\n";$body_message .= 'Message: '.$field_message;$headers = 'From: '.$field_email."\r\n";$headers .= 'Reply-To: '.$field_email."\r\n";$mail_status = mail($mail_to, $subject, $body_message, $headers);if ($mail_status) { ?><script language="javascript" type="text/javascript"> alert('Thank you for the message. We will contact you shortly.'); window.location = 'contact_page.html';</script><?php}else { ?><script language="javascript" type="text/javascript"> alert('Message failed. Please, send an email to gordon@template-help.com'); window.location = 'contact_page.html';</script><?php}?>--> HTML: <form action="bin/MailHandler.php" method="post" id="contact-form"> <div class="success"> Contact form submitted!<br> <strong>We will be in touch soon.</strong> </div> <fieldset> <label> <input name="name" type="text" value="Enter Your Name:"> <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span> </label> <label class="email"> <input name="email" type="text" value="Enter Your E-mail:"> <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label> <label class="phone"> <input name="phone" type="tel" value="Enter Your Phone:"> <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label> <label class="message"> <textarea name="message" >Enter Your Message:</textarea> <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span> </label> <div class="buttons-wrapper"> <a class="link" data-type="reset">Reset</a> <a class="link" data-type="submit">Submit</a> </div> </fieldset> </form>

Hey everyone, So honestly I can only guess what I am supposed to add here for you all to help so let me first get that out of the way PHP: (Note that commented out code was code provided by the template providers support) <?php$owner_email = $_POST["owner_email"];$headers = 'From:' . $_POST["email"];$subject = 'A message from your site visitor ' . $_POST["name"];$messageBody = ""; if($_POST['name']!='nope'){ $messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}if($_POST['email']!='nope'){ $messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}else{ $headers = '';}if($_POST['state']!='nope'){ $messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}if($_POST['phone']!='nope'){ $messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}if($_POST['fax']!='nope'){ $messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n"; $messageBody .= '<br>' . "\n";}if($_POST['message']!='nope'){ $messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";} if($_POST["stripHTML"] == 'true'){ $messageBody = strip_tags($messageBody);} try{ if(!mail($owner_email, $subject, $messageBody, $headers)){ throw new Exception('mail failed'); }else{ echo 'mail sent'; }}catch(Exception $e){ echo $e->getMessage() ."\n";}?> <!--<?php$field_name = $_POST['name'];$field_email = $_POST['email'];$field_message = $_POST['message'];$mail_to = 'michaelasnape@me.com';$subject = 'Message from a site visitor '.$field_name;$body_message = 'From: '.$field_name."\n";$body_message .= 'E-mail: '.$field_email."\n";$body_message .= 'Message: '.$field_message;$headers = 'From: '.$field_email."\r\n";$headers .= 'Reply-To: '.$field_email."\r\n";$mail_status = mail($mail_to, $subject, $body_message, $headers);if ($mail_status) { ?><script language="javascript" type="text/javascript"> alert('Thank you for the message. We will contact you shortly.'); window.location = 'contact_page.html';</script><?php}else { ?><script language="javascript" type="text/javascript"> alert('Message failed. Please, send an email to gordon@template-help.com'); window.location = 'contact_page.html';</script><?php}?>--> HTML: <form action="bin/MailHandler.php" method="post" id="contact-form"><div class="success">Contact form submitted!<br><strong>We will be in touch soon.</strong></div><fieldset><label class="name"><input name="name" type="text" value="Enter Your Name:"><span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span></label><label name="email" class="email"><input type="text" value="Enter Your E-mail:"><span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span></label><label name="phone" class="phone"><input type="tel" value="Enter Your Phone:"><span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span></label><label name="message" class="message"><textarea>Enter Your Message:</textarea><span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span></label><div class="buttons-wrapper"><a class="link" data-type="reset">Reset</a><a class="link" data-type="submit">Submit</a></div></fieldset></form> Now tell me why this is not working. I have made e-mail forms before but this is a template and its so confusing to me. Any help is appreciated. Note I did contact the template support with no real help. PeaceMichael Snape

Wow thanks. I searched slideshow and slide show in the search field and found nothing. Thanks.

Hey everyone! Now I know, if you search on the web you can find 101+ tutorials, and prebuilt slideshow JSs. The problems I have with these all are simple. They are targeted towards either A: Complete JS idiots who want something done for them -or- B: Absolute JS pros The tutorials are not targeted at the amateur JSer like myself They are not simple to manage/customize (At least most I have found) Now first I searched on these forums for a Slideshow JS thread to maybe learn with someone. Sadly it does not exist...so lets make it happen! Here is my proposal, we as the W3Schools Forum community make a Slideshow JS which follows these characteristics: Is not compiled, you must go through the tutorial to learn how to make it (Great for amateur JSers like myself) Is a tutorial, made for amateur JSers (No overly complicated libraries and jQuery stuff) Is completely customizable through CSS (Thats one thing I hate about most Slideshow JS on the web, they are ugly and complicated to customize) Is cross-browser compatible (Including IE6 if able) Must have a slide transition hence 'slide'show Is built step by step by the community here! (Characteristics will be updated as needed) So whose with me? Now I will not start the script because honestly I have no idea where to start, I really am a amateur JSer. Lets see who starts. *P.S. I will update this post as this thread progresses and will cite where needed.*

Interesting idea. Thanks.

I want it to scroll, I just don't want it to push the content to left. Because it pushes the content to make room for the scroll bar.

Hey everyone, I have no idea how to do this honestly but there must be a way. All I want is when a scroll bar appears to not push the content to the left. Keep it in the same position but show the scroll bar. There must be a way. Have it offset the page by x if overflow occurs? Any help would be appreciated.Thanks.

I think I agree with you So Called... If I could see all the code I think I could understand it better for this guy. I am pretty good with css and screwing around with it. All your solutions should work, and I don't know exactly what he did in PHP to 'fix' it. I am not so PHP friendly yet either. To Lessismore If your willing to put up your code either in a file or by using the code button here I could try and sort through to find whats conflicting. I just want code I can throw open and test myself.

Honestly I would use just use JW Player http://www.longtailvideo.com/players/ its open source and will make your life ALOT easier. No I am not advertising it has just never let me down.

Toggling the class name is a interesting idea. Currently I just told it to use RGB so I think it will be alright. If I run into compatibility problems I will take my shot at the class toggling (JS is so confusing at times if you don't understand all the logic behind it) Thanks again Ingolme!

Thanks for the simplified version. Yes it was exactly that. The browser was returning it as rgb which once I replaced it fixed it. Now will this work in all browsers you think? Here is the new JS: function hideShow(a) {var show_hide_ref = a.parentNode.id.replace("row", "info");var show_hide = document.getElementById(show_hide_ref);show_hide.style.height = (show_hide.style.height == "20px" ? "1px" : "20px");show_hide.style.backgroundColor = (show_hide.style.backgroundColor == "rgb(255, 255, 255)" ? "" : "rgb(255, 255, 255)");}