Jaytech

Members
  • Content count

    6
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Jaytech

  • Rank
    Newbie
  1. I have a responsive drop-down navigation bar that is responsive to screens of all width. The navigation bar has a hidden menu icon that displays when the screen width is below 480 px. When the button is clicked the drop-down lists appear. The problem is that am not able to make the navigation scale to the full-width of the mobile screen and also the drop-down lists appear as a block in tandem to the navigation bar. index.html <!DOCTYPE html> <html> <head> <link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <!-- Clicking on the label will check the checkbox because for and id of checkbox are the same--> <label for="show-menu" class="show-menu"> Menu </label> <input type="checkbox" id="show-menu"> <div class="navbar"> <div class="menu"> <ul class ="list"> <li class="active"> Home </li> <li> <a href="humanities.html"> Humanities <span class="arrow">&#9660; </span> </a> <ul> <li> <a href="#" rel="nofollow"> Music </a></li> <li> <a href="#" rel="nofollow"> Linguistics </a></li> <li> <a href="#" rel="nofollow"> Penology </a></li> <li> <a href="#" rel="nofollow"> Anthropology </a></li> <li> <a href="#" rel="nofollow"> Sociology <span class="arrow"> &rang;</span></a> <ul> <li><a href="#" rel="nofollow"> Psychology</a></li> <li><a href="#" rel="nofollow"> Counselling </a></li> <li><a href="#" rel="nofollow"> C.M.D </a></li> </ul> </li> </ul> </li> <li> <a href="education.html"> Education <span class="arrow">&#9660; </span> </a> <ul> <li> <a href="#" rel="nofollow"> E.C.D.E </a></li> <li> <a href="#" rel="nofollow"> Science </a></li> <li> <a href="#" rel="nofollow"> Arts with Edu </a> <ul> <li><a href="#" rel="nofollow"> Swahili </a></li> <li><a href="#" rel="nofollow"> Psychology </a></li> <li><a href="#" rel="nofollow"> Sociology of Ed. </a></li> <li><a href="#" rel="nofollow"> Liberal Ed. </a></li> </ul> </li> </ul> </li> <li> <a href="eng.html"> Engineering <span class="arrow">&#9660; </span> </a> <ul> <li> <a href="#" rel="nofollow"> Electrical </a></li> <li> <a href="#" rel="nofollow"> Civil & Structural </a></li> <li> <a href="#" rel="nofollow"> Aeronautical </a></li> <li> <a href="#" rel="nofollow"> Chemical </a></li> <li> <a href="#"rel="nofollow" > Mechanical </a> <ul> <li><a href="#" rel="nofollow"> Industrial </a></li> <li><a href="#" rel="nofollow"> Automotive </a></li> </ul> </li> </ul> </li> <li> <a href="contact.php" rel="nofollow"> Contact Us</a></li> </ul> </div> </div> </body> </html> style.css /*Styles the background-color of an active link*/ .menu ul .active{ color: #ffffff; background: #red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(red 20%, green); /* Standard syntax */ background: linear-gradient(red 20%, green); /* Standard syntax */ } .navbar{ width:100%; max-width:1000px; text-align:center; margin-top:-8px; margin-bottom:60px; margin-left:160px; } .menu ul{ /*Removes bullets*/ list-style:none; } /*Styles each list within ul*/ .menu ul li{ background-color:green; border:1px solid #ffffff; width:100%; max-width:173px; height:35px; line-height:35px; margin:auto; text-align:center; /*Makes the list dispaly in a horizontal maneer*/ float:left; position: relative; border-radius:8px; font: 15px; font-weight:regular; } .menu ul li a{ text-decoration:none; color:white; display:block; } .menu ul li a:hover{ background-color:red; border-radius:8px; } .menu ul ul{ position:absolute; margin-left:-40px; display:none; } .menu ul li:hover >ul{ display:block; } .menu ul ul ul{ width:100%; margin-left:134px; top:0px; } /*Display the drop-down on hover*/ /*+ selecctor styles every element that are placed immediately after another element */ .menu ul li a:hover + .menu ul li ul, .menu ul li ul:hover{ display:block; } /*Hide Checkbox*/ input[type=checkbox]{ display:none; } /*Show menu when invisible checkbox is checked*/ /*We select checkbox and then use selector column checked to make sure that the checkbox is checked*/ /*~ selects everything that is beneath element on the left shoul be styled with CSS style within the curly bracket*/ input[type=checkbox]:checked ~ .list{ display:block; } /*Styles the menu-label according to its class*/ .show-menu{ font-family:"Helvetica Neue", Helvetica, Arial,sans-serif; text-decoration:none; color:#fff; background: #19c589; text-align:center; padding:10px 0; display:none; } /*Responsive styles*/ @media screen and (max-width:480px){ /*Make drop-down links appear inline*/ .menu ul{ position:static; display: none; } .navbar{ margin-top:-15px; margin-left:5px; } #show-menu:checked ~ .navbar .menu ul { display: block; } /*Create vertical spacing*/ .menu ul li{ margin-bottom:1px; } /*Make all menu links full width*/ .menu ul li, .menu li a{ width:100%; } .show-menu{ display:block; } body{ background-image:none; } }
  2. Hello dsonesuk, thanks for the help, I 've read the article and tried to implement some of the suggestions on that site but the problem persists. Do you have any other idea that could be helpful?
  3. Hello all, I have a website hosted on Hostgator servers. I have also added it to a CDN(Cloudflare). When I fill the contact form and submit I get Error 524(An error occured). How can I fix that pwebk.com _ 524_ A timeout occurred.html ..Please assist
  4. Thanks alot guys, my problem has been solved.
  5. Hey all, I have got a PHP contact form which is working fine in localhost, but when I upload it to a live server(hostgator),I get the following single-line error when l load the form, Please assist PHP CODE <?php session_start(); //INITIALIZE VARIABLES and set to empty values $name = $phone = $email = $message= $captchaResults= ""; $nameErr = $phoneErr = $emailErr = $checkboxErr= $messageErr= $captchaErr= ""; ini_set('display_errors', 1); error_reporting(E_ALL); if ($_SERVER["REQUEST_METHOD"] == "POST") { $valid = true; //check if name is empty and performs functions in curly brackets if (empty($_POST["name"])) { $valid = false; $nameErr = "Please fill out this field"; } else { //Passes name throught test input function at the bottom of page $name = test_input($_POST["name"]); //remove illegal characters from name , Sanitize data $nm =filter_var($name, FILTER_SANITIZE_STRING); // Validate Data if (!preg_match("/^[a-zA-Z\s,.-]{3,30}$/", $nm)) // Regexp requiring letters, spaces, commas and fullstops and should not exceed 30 letters { $valid = false; $nameErr = "Please don't insert numbers*"; } } //check if phone contains numbers if (empty($_POST["phone"])) { $valid = false; $phoneErr = "Please fill out this field"; } else { $phone = test_input($_POST["phone"]); if (!preg_match("/^[0-9\s(),+.-]*$/", $phone)) { $valid = false; $phoneErr = "Please don't insert letters*"; } } //check if email is valid if (empty($_POST["email"])) { $valid = false; $emailErr = "Please fill out this field"; echo'email is empty<br>'; } else { $email = test_input($_POST["email"]); //Remove all illegal characters from email $em = filter_var($email, FILTER_SANITIZE_EMAIL); if (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/", $em)) { $valid = false; $emailErr = "*Please insert a valid email address*"; } } // Check the values from checkbox and POST them to email $value= ""; // if (empty($_POST["checkbox"])) { $valid = false; $checkboxErr = "Please fill out this field*"; } else{ $checkbox =$_POST["checkbox"]; //Array of values from the checkbox values $value= implode(' , ', $checkbox); //implode values and separate by a comma $value = test_input($value); } //check if message contains letters and white-space if (empty($_POST["message"])) { $valid = false; $messageErr = "Please fill out this field"; echo 'Message is empty<br>'; } else { $message = test_input($_POST["message"]); //remove illegal characters from url $msg =filter_var($message, FILTER_SANITIZE_STRING); if (!preg_match("/^[a-zA-Z\s-,:;`~.?()]*$/", $msg)) //Regexp requiring spaces, full-stops, colon, semi-colons brackets, question marks { $valid = false; $messageErr = "Only letters and spaces are allowed*"; } } //Captcha Results $getRandomNumber1 = $_POST["firstRandomNumber"]; $getRandomNumber2 = $_POST["secondRandomNumber"]; $getCaptchaResults = $_POST["captchaResults"]; $totalNumber= $getRandomNumber1 + $getRandomNumber2; if($totalNumber == $getCaptchaResults){ echo''; } else{$valid = false; $captchaErr="Wrong Answer";} //stores name in a session variable to be used in thank-you page $_SESSION["nm"]= $nm; require ("PHPMailer/PHPMailerAutoload.php"); //including phpmailer class $mail = new PHPMailer(); $mail->IsSMTP(); // set mailer to use SMTP $mail->SMTPDebug = 2; $mail->Host = "smtp.gmail.com"; // specify main and backup server or I.P ADDRESS from server $mail->SMTPSecure = "tls"; // Connect using a TLS connection $mail->Port = 587; //Gmail SMTP port $mail->SMTPAuth = true; // turn on SMTP authorization $mail->Username = "************@gmail.com"; // SMTP username $mail->Password = "**********"; // SMTP password $mail->From = "$em"; //email of sender $mail->FromName = "$nm"; //name of the sender $mail->AddAddress("**************@gmail.com", "Patwan"); //email address of recepient and name $mail->AddReplyTo($em, $nm); //Address to which recepient will reply $mail->WordWrap = 100; // set word wrap to 100 characters $mail->IsHTML(true); // set email format to HTML $mail->Subject = "Contact Form"; //subject of email $mail->Body = "Name: " . $nm . "<br>Phone: " . $phone . "<br>Email: " . $em . "<br>Subject: " . $value . "<br>Message: " . $msg ; //$mailphp = false; if ($valid) { // if (!$mailphp) { if (!$mail->Send()) { echo 'Form could not be sent.'; echo 'Mailer Error: ' . $mail->ErrorInfo; exit; } else { header('Location:thank_you2.php'); } } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?> Error Warning: session_start(): Cannot send session cookie - headers already sent by ( output started at /home4/pwebk/public_html/contact.php:1) in /home4/pwebk/public_html/contact.php on line 4
  6. Hey all, I have got a jquery slideshow on my website which am trying to make the images in it responsive so that they can fit on tablets and mobile device screens, but it doesn`t work as expected. Kindly assist? HTML <div id= "hero"> <div id= "pager"> </div> <div id= "pause"> ≈ </div> <div id= "play"> Δ</div> <div id= "next"> 〉 </div> <div id= "prev"> 〈 </div> <div id= "slider"> <div class= "items"> <img src= "images/hp.jpg" alt="HP Computers" id="img"> <div class = "info"> <h2> HP Computers </h2> <p> We deliver all type of HP laptops <a href= "laptops.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/mobile.jpg" alt="Mobile Phones"> <div class = "info"> <h2> Mobile Phones</h2> <p> We create all kinds of mobile websites <a href= "mobile.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/photography.jpg" alt="Photography Portfolio Designs"> <div class = "info"> <h2> Photography Brochures </h2> <p> We create unique, responsive and amazing photography portfolio <a href= "photography.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/graphic_design.jpg" alt= "Graphics Design"> <div class = "info"> <h2> Graphics Designs </h2> <p> We create amazing graphic contents for your project or institution <a href= "graphic_design.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> </div> <!--End_slider--> </div> <!--End_hero--> <script type="text/javascript" src= "jquery-1.12.3.js"> </script> <script type="text/javascript" src= "jquery.cycle.all.js"> </script> <script type="text/javascript" src= "test.js"> </script> CSS /*Screen size of laptop and Desktop monitors.*/ @media screen and (min-width: 1024px){ /*Index page Slideshow styles*/ #hero{ width: 550px; height: 250px; border: 2px solid brown; box-shadow: 7px 7px 7px; display: block; position: relative; margin: auto; } #slider{ width: 550px; height: 250px; display: block; position: absolute; overflow: hidden; } .info { width: 550px; height: 100px; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 15px; } .info p { font-family: sans-serif; font-size: 13px; font-weight: lighter; color: #ffffff; padding: 0 0 0 15px; line-height: 1px; } } /* Screen size of a tablet and below.*/ @media screen and (max-width: 1024px){ /*Index page Slideshow styles*/ #hero{ width: 98%; background-size: auto; height: 250px; border: 2px solid brown; box-shadow: 7px 7px 7px; display: block; position: relative; margin: auto; } #slider{ width: 98%; background-size: auto; height: 250px; display: block; position: absolute; overflow: hidden; } .info { width: 98%; height: 100px; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 8px; } .info p { width: 98%; font-family: sans-serif; font-size: 13px; font-weight: lighter; color: #ffffff; padding: 0 0 0 8px; line-height: 1px; } } /*Screen size of a phone in potrait and landscape mode.*/ @media screen and (max-width: 480px){ #hero{ width: 98%; border: 2px solid brown; box-shadow: 3px 3px 3px; display: block; position: relative; margin: auto; } #slider{ width: 98%; display: block; position: absolute; overflow: hidden; } .info { width: 98%; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 5px; } .info p{ opacity: 0; } }