Jump to content

Search the Community

Showing results for tags 'HTML'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 824 results

  1. Hi Guys, I have a form adds details to a table and one of them is owner email which takes in an email address. this in turn displays this email address on the form. What I am looking to do is for the form have the user just put in there username and the email address is automatically attached at the end(as all the details after@ in the email address will be the same). Then when the table is displaying the email address it just displays the username which when clicked still brings you to a new email to that email address. Images: so here it would be just username and @whatver.com is always on the form and here it just displays the username so dmurran instead of the whole email address. here is the code for the table: // display data in table echo "<table align='center' border='1' cellpadding='2' class='footable mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--4dp full-width'>"; echo "<tr> <th>ID</th> <th>Administration Console</th> <th>Product Version</th> <th>Platform</th> <th>Database</th> <th>Owner</th> <th>Status</th> <th></th> <th></th></tr>"; // loop through results of database query, displaying them in the table while($row = mysql_fetch_array( $result )) { // echo out the contents of each row into a table echo "<tr>"; echo '<th>' . $row['id'] . '</th>'; echo '<td><a href="'.$row['curl'].'">'.$row['curl'].'</a></td>'; echo '<td>' . $row['pversion'] . '</td>'; echo '<td>' . $row['platform'] . '</td>'; echo '<td>' . $row['dversion'] . '</td>'; echo '<td><a href="mailto:'.$row['email'].'">' . $row['email'].'</a></td>'; echo '<td>' . $row['status'] .'</td>'; echo '<td><a href="php/edit.php?id=' . $row['id'] . '">Edit</a></td>'; echo '<td><a onclick="javascript:confirmationDelete($(this));return false;" href="php/delete.php?id=' . $row['id'] . '"onclick="return confirm("Do you want to delete this?")">Delete</a></td>'; echo "</tr>"; } // close table> echo "</table>"; ?> and here is the form: <?php /* NEW.PHP Allows user to create a new entry in the database */ // creates the new record form // since this form is used multiple times in this file, I have made it a function that is easily reusable function renderForm($curl, $pversion, $platform, $dversion, $email, $status, $error) { ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="../css/style.css"> <link href='../css/bootstrap.cs' rel='stylesheet'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src='../js/bootstrap.js'></script> <title>New Repo</title> </head> <body> <div id="page-wrap"> <center><a href="https://repo-project-danielmurran.c9users.io/view.php"><img src="../images/logo.png" alt="what image shows" height="90" width="300"></a></center> <h1>GCS Reproduction Environment</h1></br> <button type="button" onclick="window.location='https://repo-project-danielmurran.c9users.io/view.php'">Home</button> <hr/> <h2> Add Reproduction</h2> <?php // if there are any errors, display them if ($error != '') { echo '<div style="padding:4px; border:1px solid red; color:red;">'.$error.'</div>'; } ?> <form action="" method="post"> <div id="bform"> <table id="maintable" border='1' cellpadding='10'> <thead> <tr> <th>Repoduction Console URL: *<td><input type="text" name="curl" value="<?php echo $curl; ?>" /></td> </tr> <th>Product Version: *<td> <input type="text" name="pversion" value="<?php echo $pversion; ?>" /></td></tr> <th>Platform: * <td><input type="text" name="platform" value="<?php echo $platform; ?>" /></td></tr> <th>Database: * <td><input type="text" name="dversion" value="<?php echo $dversion; ?>" /></td></tr> <th>Owner Emaill: * <td><input type="email" name="email" value="<?php echo $email; ?>" /> </td></tr> <th>Repo Status: * <td><input type="text" name="status" value="<?php echo $status; ?>" /></td></tr> </table> * required <input type="submit" name="submit" value="Submit"> </div> </form> </div> </body> </html> <?php } // connect to the database include('../php/connect-db.php'); // check if the form has been submitted. If it has, start to process the form and save it to the database if (isset($_POST['submit'])) { // get form data, making sure it is valid $curl = mysql_real_escape_string(htmlspecialchars($_POST['curl'])); $pversion = mysql_real_escape_string(htmlspecialchars($_POST['pversion'])); $platform = mysql_real_escape_string(htmlspecialchars($_POST['platform'])); $dversion = mysql_real_escape_string(htmlspecialchars($_POST['dversion'])); $email = mysql_real_escape_string(htmlspecialchars($_POST['email'])); $status = mysql_real_escape_string(htmlspecialchars($_POST['status'])); // check to make sure all fields are entered if ($curl == '' || $pversion == '' || $platform == '' || $dversion == '' || $email == '' || $status == '') { // generate error message $error = 'ERROR: Please fill in all required fields!'; // if either field is blank, display the form again renderForm($curl, $pversion, $platform, $dversion, $email, $status, $error); } else { // save the data to the database mysql_query("INSERT INTO players SET curl='$curl', pversion='$pversion', platform='$platform', dversion='$dversion', email='$email', status='$status'") or die(mysql_error()); // once saved, redirect back to the view page header("Location: ../view.php"); } } else // if the form hasn't been submitted, display the form { renderForm('','','','','','',''); } ?> I tried to cut off the end of the email but it was not bringing me to the email address anymore. Any help is appreciated. Thanks!
  2. Tarzan67

    Format Contact Form

    I created a contact form inside a wordpress container using the column selection. When I apply the code only inside the container it changes the color of the entire page to that background color of the form. Also, the form has side by side fields but for some reason onilne the fields are stacked. See photos. As you can see in the first picture I removed the background color. <!DOCTYPE html> <html> <head> <style> input[type=text]:hover { background-color: #C5E3BF; } input[type=text], select, textarea { width: 100%; padding: 12px; width: 48%; border: 6px double #96BADD; border-radius: 8px; font-family: "Tahoma", sans, serif; font-size: 20px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #FFF; color: #434343; padding: 12px 200px; border: box; border-radius: 4px; cursor: pointer; font-size: 18px; font-family: "Tahoma", sans, serif; } input[type=submit]:hover { background-color: #96badd; text-align: center; color: black; } h2 { font-size: 30px; font-family: "Tahoma", sans, serif; text-align: center; } .container { border-radius: 15px; background-color: #96BADD; padding: 20px; } </style> </head> <body> <div class="container"> <h2>Request a Free Information Packet<h2> <form action="/action_page.php"> <input type="text" id="fname" name="firstname" placeholder="Full Name"> <input type="text" id="lphone" name="Phone" placeholder="Phone"> <input type="text" id= "email" name="Email" placeholder="Email"> <input type="text" id= "Message" name="Message" placeholder="Message"> <p style="text-align: center;"><input type="submit" name="Submit" value="SUBMIT"></p> </form> </div> </body> </html>
  3. <head> <script> $( document ).ready(function() { console.log( "ready!" ); $('#other').hide(); function otherTongue() { if ($('#tongue').val() == 'other_tongue') { $('#other').show(); } } }); </script> </head> <body> <form> <select name="tongue" id="tongue" size=4 onchange="otherTongue()" > <optgroup label='Oceania'> <option value=mi>Maori</option> <option value=haw>Hawaiian</option> <option value=sm>Samoan</option> </optgroup> <optgroup label='Not Listed'> <option value='other_tongue'>Other Language</option> </optgroup> </select> <input type='text' name='other' id='other' /> </form> </body> Why do I am receiving the error message: "Can't find variable otherTongue( )"?
  4. Hello When i use a facebook share url on my site on Wordpress, it picks the title of my site, the sub-title and then it picks the first image of the site. How can i choose the pic to be displayed, what if i want to show a special picture like a logo or something whenever i want to share my site on Facebook? How can i do it?
  5. Hello Everyone, How to make HTML Search Like Google But : For Example my link is example.com/videos When I want to make search for this word funny by HTML inbut and when I click submit button the result should be like this: example.com/videos/funny How I do that, please ... Thanks
  6. Hi. I am familiar with some HTML but my knowledge in Javascript, JQuery and CSS is very limited. I have been learning from examples on the web and making my own changes. Please see the fiddle I am working on below; sorry if the full code is messy! https://jsfiddle.net/djj2c84t/ There are a number of features I wish to implement but I am totally stumped! I have gotten as far as I think I can with the fiddle above and it would be more than appreciated if anyone can provide any help, possibly with any example code and where the code needs to go. When I make a multiple selection from the list, how do I get the results (divs) to show in order of most recent selection at the top? For example, if I multi-selected in the order Nuts, Meats, Vegetables, Fruits, how do I get the results (divs) to appear in the order Fruits, Vegetables, Meats, Nuts? At the moment they appear in the order that they are listed in the box. I would also like to ask if it is possible to keep the results (divs) showing for all the items selected even after a new search is performed and a new selection made. For example, if I search for 'F' and select 'Fruits' and then search for 'V' and select 'Vegetables', can I have both the 'Vegetables' and 'Fruits' divs showing in the results? At the moment, 'Vegetables' replaces 'Fruits'. If this is possible, would it also be possible to have the selected items in the list remain highlighted even after a new search is performed? For example, after making the above searches/selections, if I then search for 'ts', the list would show 'Fruits', 'Nuts' and 'Meats', but I would like 'Fruits' to still be highlighted and to be able to close the 'Fruits' div by de-selecting 'Fruits' from the list or clicking the Close (X) button on the 'Fruits' div itself. There are a few other things I have not been able to solve but I will refrain from posting too many questions at once. Any help would be greatly appreciated! Thank you.
  7. Hi all - I'm trying to hyperlink from a web page to a specific slide in Powerpoint 2013. I thought coding as follows would do the trick (the pound sign and slide number at the end): /mypowerpoint.pptx#5 However when clicking on the link, it opens up to the first slide and not the fifth - any ideas? Thanks! Steve
  8. I've got this responsive image gallery, made with W3.CSS <div id="portraits" class="w3-row tab"> <div class="w3-half"> <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> <div class="w3-half> <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> </div> <--! more stuff here -->... These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other. I've looked for answers. Putting the image in the div etc... doesn't work... I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask. Thanks in advance! (attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though) portfolio.html
  9. Hi there, I have a form with a field, which will be prefilled, but this field is a text box and editable for everyone. But i want it only as a readonly field, but this field can´t be changed directly to a html field, so i was wondering, is it possible to copy the body of that field and show it as readonly and only, if it is not empty? I do not want to use a button for that Thanks a lot in advance
  10. Hi. I am relatively new to using PHP and am working on building a contact form. It's pretty much good to go and it sends to my email, however, I am having the issue where it just sends this information to my email and not what the user put in, just leaving the message blank. Name: Email: Phone: Message: I'm not exactly sure what I am doing incorrectly. Also is there way to improve my code to make sure it gets in my inbox and not my spam? I've included the PHP and the HTML regarding the form. Here's the PHP. <?php $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone']; $message = $_POST['message']; $formcontent=" From: $name \n Email: $email \n Phone: $phone \n Message: $message"; $recipient = "contact@immersivewebdesign.com"; $subject = "Contact Form"; $mailheader = "From: $email \r\n"; mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); echo "Thank You!" . " -" . "<a href='http://immersivewebdesign.com/' style='text-decoration:none;color:#ff0099;'> Return Home</a>"; ?> Here's the HTML form. <div class="container"> <div class="col-lg-offset-4 col-lg-4" id="panel"> <h2>Get In Touch</h2> <form action="mail.php" method="post"> <div class="group"> <input type="text" name="name" required> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div> <div class="group"> <input type="email" email="email" required> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div> <div class="group"> <input type="tel" phone="phone" required> <span class="highlight"></span> <span class="bar"></span> <label>Phone</label> </div> <div class="group"> <input type="text" message="message" required> <span class="highlight"></span> <span class="bar"></span> <label>Message</label> </div> <div class="group"> <center> <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button></center> </div> </form> </div> </div> Thank you for your help.
  11. Hello, I would like to ask if there is any tool which automatically simplifies the creation of external or internal styles from inline styles of a html page and make the appropriate changes into the html code. For example, I build html pages with a CSS framework and use inline styles. Instead of making a mysite.css file on my own, a tool parses the inline styles, creates an elegant and sophisticated css file, and makes the appropriate changes into the html page code. Thanks in advance.
  12. Hello, I want to do a countdown and put it in my website. I did a countdown but I have a problem, when I launch it, the seconds are freezing they are not anymore running... So the countdown is not in realtime anymore... I have to refresh in order to see the countdown running. Here is what I did: <div id="after"> <span id="dhour"></span>:<span id="dmin"></span>:<span id="dsec"></span> </div> <div id="count2">Texte à afficher</div> <div class="numbers" id="dday" hidden="true"></div> <script> var ladate = new Date("<?php echo gmdate("Y-m-d\TH:i:s\Z");?>"); var year=ladate.getFullYear(); var month=ladate.getMonth()+1; var day=ladate.getDate(); var hour=14; var minute=20; var tz=0; var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); function countdown(yr,m,d,hr,min){ theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min; var today= new Date("<?php echo gmdate("Y-m-d\TH:i:s\Z");?>"); var todayy=today.getYear(); if (todayy < 1000) {todayy+=1900; } var todaym=today.getMonth(); var todayd=today.getDate(); var todayh=today.getHours(); var todaymin=today.getMinutes(); var todaysec=today.getSeconds(); var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec; var todaystring=Date.parse(todaystring1)+(tz*1000*60*60); var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min); var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60)); var dd=futurestring-todaystring; var dday=Math.floor(dd/(60*60*1000*24)*1); var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1); var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1); var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1); if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){ document.getElementById('count2').style.display="inline"; document.getElementById('after').style.display="none"; document.getElementById('dday').style.display="none"; document.getElementById('dhour').style.display="none"; document.getElementById('dmin').style.display="none"; document.getElementById('dsec').style.display="none"; document.getElementById('days').style.display="none"; document.getElementById('hours').style.display="none"; document.getElementById('minutes').style.display="none"; document.getElementById('seconds').style.display="none"; return;}else { document.getElementById('count2').style.display="none"; document.getElementById('dday').innerHTML=dday; document.getElementById('dhour').innerHTML=dhour; document.getElementById('dmin').innerHTML=dmin; document.getElementById('dsec').innerHTML=dsec; window.location.reload(); setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);}} countdown(year,month,day,hour,minute); </script> Thank you.
  13. Is there a way to prevent that a malicious person crafts a piece of code that changes the value of an action attribute? Like when you have this line of html: <form method="post" name="register" action="<?php echo $_SERVER['PHP_SELF']; ?>"> but the attacker places the entire script on his own server. Is this XSS? What are the consequences of gaining/finding protected data? If this kind of attack is possible, can someone show with an example how this is done?
  14. I'm a student, and currently busy with creating my own website, but now I've got a question which I can't figure out myself. My website is about professional cycling and on it I'll have the jerseys of the teams which I want to overlay when going over it with the mouse. I figured this out OK, but now it happens that if I move over it with my mouse, a big square overlays the picture (because it's a square picture with a transparent background) and I want that there is only an overlay over the jersey and not over the "background" of the picture. I hope you can help me! Need to fix this! Thank you in advance! .container { position: relative; width: 25%; height: auto; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #00b0f0; opacity: 0.8; overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .container:hover .overlay { height: 100%; } .text { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } <div class="container"> <a href="AG2R.html"> <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image"> </a> <div class="overlay"> <div class="text">AG2R La Mondiale</div> </div> </div> This is the picture I used:
  15. <p><strong>My first Javascript</strong></p> <button type="button" on-click="myfunction()">Click here</button> <script> function myfunction() {document.getElementById("demo").innerHTML = "Hello its Wednesday";}</script> <p id="demo">Hello its Tuesday</p> Any assistance would be much appreciated. I am learning the W3Schools tutorials and I can't seem to move forward. The results dont's show its a "Wednesday"! <script> function light(sw) {var pic; if (sw == 0) {pic = "gifs/pic_bulboff.gif"} else {pic = "gifs/pic_bulbon.gif"} document.getElementById('myImage').src = pic;</script> <img id="myImage" src="gifs/pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button></p> I can't quite make the light bulb to go on.
  16. Why does the border on hover that appears on the 4 smaller pictures not fall exactly on the pictures edge, but at the bottom it is about 7px lower and leaves an empty space? http://www.mikroviologos.gr/test2 Thank you!
  17. I'm going to get this out of the way right up front, I am very new at this PHP stuff. After a lot of research I have developed a standalone PHP file that I want to call from a HTML page. It isn't getting past my HTML code so I think I've done something there. This is my HTML code: <div class="visitor-count">Number of visitors since 12-10-2016:</div> <img alt="Hit counter" src="../javascripts/counter.php" /> Any help would be greatly appreciated. RPatton
  18. hi everyone im trying to get back in to web design and re learn everything i knew 5 6 months ago . im curently stuck on this and have no idea how to fix it . can someone help me pls. i cant click on the Pages i linked and i have no idea how to fix it .ive been trying to fix it for about 40 min now and nothing comes to mind this is the Index.html http://imgur.com/a/5eQnt this is the page2 http://imgur.com/a/sHxO9 this is the page3 http://imgur.com/a/IWj0h this is main.css http://imgur.com/a/wJJaf this is the result http://imgur.com/a/dIU6t
  19. i wanted to use this sample code from code pen http://codepen.io/emilioincerto/pen/yaVzJd However, when i want to use it my java script isn't working Here is my code. <!DOCTYPE html> <html> <head> <script src="../java/java2.js"></script> <title> </title> </head> <body> <h1>Shopping List</h1> <ul class="shopping-list"> </ul> <div> <input type="text" id="item" /> <button id="b1" value="Add">Add</button> </div> </body> </html> ************This is JavaScript*********** $(document).ready( function(){ $("#b1").on("click", function(){ //grab the value of input element with id item and set it to userinput var userInput = $("#item").val(); //log userinput to the console console.log( userInput ); var shoppingItem = $(document.createElement("li")); //shoppingItem.addClass("item"); shoppingItem.html(userInput); if (userInput.length > 3){ $("ul.shopping-list").append(shoppingItem); //clear all input fields $("input").val(""); } }); $("ul").on("click", "li", function(){ console.log("test number two"); $(this).remove(); }); } );
  20. 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; } }
  21. Hi, I thank all of you in this forum because whenever I don't understand anything you people help me. Now I want to know something more. I know HTML, CSS, JavaScript and jQuery. Now I have started building an e-commerce shopping website. But I don't know how I will manage the data on this site, how I will request data from server,keep the recordings of the sales and products. Is there any way, I can complete my website with just javascript scripting language. Please have some dynamic suggestion for me. Thank you in advance.
  22. Hi, I am having some problem while creating a mega dropdown menu. I want the mega-dropdown-content to be divided to 4 column and 3column will be for the menu and rest 1 column will be for an image. But this is not the expected result. Here is the code. Please tell how can I fix it? Thank you. <!DOCTYPE html> <html> <head> <link rel= "stylesheet" href= "mega%20menu%20copy%20copy.css"/> <link rel= "stylesheet" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style> .menu-container, .mega-menu, .nav, .nav li, .nav a, .nav div{ margin: 0; padding: 0; border: none; outline:none; } .nav { position: relative; } .nav a { text-decoration: none; } .nav li { list-style: none; } a { color: white; } .menu-container { position: relative; width: 100%; } .mega-menu { position: absolute; width: 48%; left: 26%; height: 40px; background-color: red; } .nav > li { display: inline-block; height: 40px; font-size: 20px; font-weight: bold; } .nav > li > a { display: block; padding: 10px 10px; color: white; text-align: left; vertical-align: center; margin-bottom: 10px; } .mega-menu-content, .dropdown { padding-top: 60px; position: absolute;; width: 100%; display: none; background-color: white; color: black; font-size: 16px; border: 2px solid lightgrey; } .mega-menu-content > ul > li:first-child,.dropdown > ul >li:first-child { padding-top: 10px; } .mega-menu-content > ul> li, .dropdown > ul > li { display: block; min-width: 120px; min-height: 40px; margin: 0; padding: 0; } .mega-menu-content > ul > li > a, .dropdown > ul > li > a { color: red; font-size: 16px; min-width: 120px; padding: 8px 10px; border: 1px solid lightgrey; } .mega-menu-content { column-count: 3; column-width: 33%; column-gap: 0; } .mega-menu-content > ul > li > a:hover, .dropdown > ul > li > a:hover { background-color: lightgrey; } .nav > li:hover .mega-menu-content, .nav > li:hover .dropdown{ display: block; } </style> </head> <body> <div class= "menu-container"> <div class= "mega-menu"> <ul class= "nav"> <li><a href= "#">Home</a></li> <li><a href= "#">Clothing <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <ul>Men<hr/> <li><a href= "#">T-shirts</a></li> <li><a href= "#">Shirts</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Shoes</a></li> <li><a href= "#">Sunglasses</a></li> <li><a href= "#">Caps</a></li> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Others</a></li> </ul> <ul>Women<hr/> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Coats & Jackets</a></li> <li><a href= "#">Tops & Blouses</a></li> <li><a href= "#">Intimate & Sleep</a></li> <li><a href= "#">Jeans</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Skirts</a></li> <li><a href= "#">Sweaters</a></li> </ul> <ul>Others<hr/> <li><a href= "#">Boys</a></li> <li><a href= "#">Girls</a></li> <li><a href= "#">Baby</a></li> <li><a href= "#">Luggage</a></li> </ul> <ul>From Popular Sites<hr/> <li><a href= "#">Amazon</a></li> <li><a href= "#">Ebay</a></li> <li><a href= "#">Etsy</a></li> <li><a href= "#">Shoppify</a></li> </ul> <img src= "#" height= "100px" width= "100px" style= "float: right;"/> </div> </li> <li><a href= "#">Products <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <img src= "#" height= "100%" width= "25%" style= "float: left;"/> <hr/> <ul>Electronics & Computers<hr/> <li><a href= "#">TV & Video</a></li> <li><a href= "#">Cellphone & Camera</a></li> <li><a href= "#">Head Phones</a></li> <li><a href= "#">Video Games</a></li> <li><a href= "#">Computers & Tablets</a></li> <li><a href= "#">Monitors</a></li> <li><a href= "#">Schools & Office Supplies</a></li> <li><a href= "#">Trade In Your Electronics</a></li> <hr/></ul> <ul>Health & Beauty<hr/> <li><a href= "#">All Beauty</a></li> <li><a href= "#">Luxury Beauty</a></li> <li><a href= "#">Specialty Diets</a></li> <li><a href= "#">Health,Household & Baby care</a></li> <li><a href= "#">Coupons</a></li> <hr/></ul> <ul>Sports & Outdoors<hr/> <li><a href= "#">Athletic Clothing</a></li> <li><a href= "#">Exercise & Fitness</a></li> <li><a href= "#">Hunting & Fishing</a></li> <li><a href= "#">Team Sports</a></li> <li><a href= "#">Cycling</a></li> <li><a href= "#">Water Sports</a></li> <li><a href= "#">Winter Sports</a></li> <li><a href= "#">All Sports</a></li> </ul> </div> </li> <li><a href= "#">Gifts <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class="dropdown"> <ul> <li><a href= "#">Games</a></li> <li><a href= "#">Books</a></li> <li><a href= "#">Show Piece</a></li> <li><a href= "#">Kids Birthday</a></li> </ul> </div> </li> <li><a href= "#">Arts & Crafts</a></li> <li><a href= "#">Services</a></li> </ul> </div> </div> </body> </html>
  23. In my site www.mikroviologos.gr I would like to make a news section at the bottom of the content like this example. I tried different ways: 1. Inside <div id="content" class="col-9"> after the last <p> I created a <div class="col-4"> to divide the content into 3 columns. 2. I made .floating-box following this tutorial inside <div id="content" class="col-9"> after the last <p> but the result was always the same: part of bottom text goes under footer. Why does this happen? Since I put news section inside <div id="content" class="col-9"> shouldn't it have the behavior of content (push the footer down)? So, I would like to ask, which is the best way to create a News section and how can I make it not hide under the footer, but push the footer down like now content does? Here is my .css: * {box-sizing: border-box;} html{overflow-y:scroll;position:relative;height:100%} header{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2;} header > .container {overflow: visible;white-space:nowrap;} #nav a{color:#d2dce6;font-size:15px;display:block;padding:3px 4px;font-weight:bold;} #nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left} #nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4;} #l1 {color:#f2f2f2;font-size:19px} #l2 {color:#d2dce6;font-size:14px} #logoArea {display:inline-block;float:none;height:auto;padding-bottom:0;vertical-align:top;font-weight:bold;font-family:Arial} #logoArea > a {white-space:normal;} #logoArea > a div {margin-left:12px;} #nav {list-style:outside none none;overflow:hidden;} #logoArea,#nav {margin:0;} #navArea {display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap;} ul#nav {padding:0;} .container {width: 81%; margin:0 auto;max-width:1000px} aside{height:100%;margin:12px 0 15px 0} h1{color:#4A6B98;font-size:21px;} h2{font-size:19px} h3{font-size:16px} #block1{height:auto;margin-top:14px;} #block1 ul{height:auto;padding:0;margin:0;} #block1 ul li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9;} #block1 ul li a{color:#4a6b98;text-decoration:none;font-size:15px;padding:0;display:block;font-weight:bold;} #block1 ul li a:hover, #block1 li a.selected{color:#262626;} #block1 li:first-child{border-top:1px solid #d9d9d9;} #block2, #block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px;line-height:1.5} #block2 h2, #block3 h2{margin:0;font-size:18px} #block2 h3, #block3 h3{margin-top:0;} #block2 p, #block3 p, #block2 form{font-size:13px;} p{font-size:15px;} body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:14px;line-height:1.43;color:#4d4d4d;} body a{text-decoration:none;color:#4a6b98;} #content{font-size:15px;margin:26px 0 15px;line-height:1.5} footer{width:100%;text-align:center;background-color:#dae4f1;margin-left:auto;margin-right:auto;border-top:#6e98c2 2px solid} footer p{font-size:12px;text-align:left;margin:0;line-height:1.43} #iso {width:41px;height:40.5px;float:left;margin-right:5px} #p1 {color:#1a3365} #p2 {color:#dae4f1} #c {color:#1a3365} ul.topnav li.icon {display:none;} .row::after {content: "";clear:both;display:block;} [class*="col-"] {float:left;padding:15px;} .col-1 {width:8.33333%;} .col-2 {width:16.6667%;} .col-3 {width:25%;} .col-4 {width:33.3333%;} .col-5 {width:41.6667%;} .col-6 {width:50%;} .col-7 {width:58.3333%;} .col-8 {width:66.6667%;} .col-9 {width:75%;} .col-10 {width:83.3333%;} .col-11 {width:91.6667%;} .col-12 {width:100%;} #wrapper {min-height:100%;} footer.col-12 {position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;} aside:after, #content:after {content:"";display:block;padding-bottom:100px;} footer.col-12 {margin-top:-100px;} @media screen and (max-width:1020px) { aside:after {padding-bottom:15px;} #content img:first-child, #content h1:first-child + img {margin:0 auto;display:block;} ul.topnav li:not(:first-child) {display:none;} ul.topnav li.icon {float:right;display:inline-block;} #logoArea {display:block;text-align:center;} header {height:auto;} #navArea {display:block;height:30px;margin:1em 15px;} [class*="col-"] {width:100%;} #nav li {float:none;margin:0;background-color:#1a3365;} #nav {position:absolute;left:0;right:0;} ul.topnav li.icon {display:inline-block;position:absolute;right:0;top:0;} #navArea #nav a {font-size:16px;} #content {margin-top:0px;} aside {margin-bottom:0;} .container{width:auto;} ul.topnav.responsive {position:relative;} ul.topnav.responsive li.icon {position:absolute;right:0;top:0;} ul.topnav.responsive li {float:none;display:block;margin: 0;} ul.topnav.responsive li a {display:block;text-align:left;} #nav.topnav.responsive > li:not(:first-child):not(:last-child) {margin-top:-1px;} } @media screen and (max-width:1090px) {#nav a {font-size:14px;}} and here is my .html <!DOCTYPE html> <html lang="el"> <head> <meta name=viewport content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> <title>Αρχική σελίδα | Μικροβιολογικό Εργαστήριο στην Καβάλα</title> <meta name="description" content="Ο Χάρης Καραχριστιανίδης είναι Mικροβιολόγος στην Καβάλα. Το Μικροβιολογικό Εργαστήριό του λειτουργεί από το 2005 στην οδό Φιλικής Εταιρείας 5"> <style> h1 {margin-top:0;font-weight:bold;font-family:Arial;margin-left:12px} #mc {max-width:100%;height:auto} #l1, #l2 {display:block} </style> </head> <body><div id="wrapper"> <header> <div class="container"> <div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><span id="l1">mikroviologos.gr</span><span id="l2">Εργαστήριο Μικροβιολογίας</span></a></h1></div> <div id="navArea"> <ul id="nav" class="topnav"> <li><a href="/">Αρχική σελίδα</a></li> <li><a href="biografiko">Βιογραφικό</a></li> <li><a href="syxnes-erotiseis">Συχνές ερωτήσεις</a></li> <li><a href="arthra/">Άρθρα</a></li> <li><a href="apotelesmata">Αποτελέσματα</a></li> <li><a href="epikoinonia">Επικοινωνία</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div><!--End of navArea--> <script> function myFunction() { var x = document.getElementById("nav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; }} </script> </div> </header> <div class="row"> <div class="container"> <aside class="col-3"> <div id="block1"> <ul> <li><a href="organosi-ergastiriou">Οργάνωση εργαστηρίου</a></li> <li><a href="exoplismos">Εξοπλισμός</a></li> <li><a href="fotografies">Φωτογραφίες</a></li> <li><a href="tmimata-exetaseis">Τμήματα - εξετάσεις</a></li> <li><a href="proliptikes-exetaseis">Προληπτικές εξετάσεις</a></li> <li><a href="politiki-poiotitas">Πολιτική ποιότητας</a></li> <li><a href="asfalistika-tameia">Ασφαλιστικά ταμεία</a></li> </ul> </div><!--End of block1--> <div id="block2"><h2>Εξετάσεις αλλεργίας</h2><hr><p>Το εργαστήριό μας πρόσφατα απέκτησε τον αναλυτή της Phadia UniCAP 100 που προσδιορίζει με μεγάλη ακρίβεια με τη μέθοδο αναφοράς ImmunoCAP τις ειδικές IgE και την τρυπτάση</p></div> <div id="block3"><h2>Αποτελέσματα online</h2><hr><p>Αν θέλετε να μπορείτε να βλέπετε τα αποτελέσματά σας online και να τα κατεβάζετε σε μορφή pdf παρακαλώ ενημερώστε μας και <a href="/user/register">εγγραφείτε στην ιστοσελίδα μας</a></p></div> </aside> <div id="content" class="col-9"> <img id="mc" src="http://s.mikroviologos.gr/image/microscope.jpg" alt="Μικροβιολογικό Εργαστήριο του Χάρη Καραχριστιανίδη στην Καβάλα"><p>Το μικροβιολογικό εργαστήριο του Χάρη Καραχριστιανίδη, Iατρού Bιοπαθολόγου (Mικροβιολόγου), λειτουργεί από τις αρχές του 2005 στο κέντρο της πόλης της Καβάλας. Σε καίριο σημείο, με εύκολη πρόσβαση από τα χωριά του νομού μας καθώς και από άλλους νομούς, προσφέρουμε υπηρεσίες ιατρικής με εγκυρότητα και υπευθυνότητα.</p> <p>Ο άρτια εξοπλισμένος χώρος μας με αναλυτές τελευταίας τεχνολογίας, σε συνδυασμό με το εξειδικευμένο και ειδικά καταρτισμένο προσωπικό, σας εγγυώνται αξιοπιστία και ασφάλεια.</p> <p>Η συνέπεια, η στήριξη, ο επαγγελματισμός και το ανθρώπινο πρόσωπο είναι τα βασικά στοιχεία της παροχής υπηρεσιών υγείας του εργαστηρίου μας, για την κάλυψη των δικών σας αναγκών, κάθε στιγμή που αυτό είναι απαραίτητο.</p> </div><!--End of content--> </div><!--End of container--> </div><!--End of row--> </div><!--End of wrapper--> <footer class="col-12"><div class="container"><p class="col-3"><u>Πιστοποίηση ποιότητας</u><br><img id="iso" src=http://s.mikroviologos.gr/image/iso_logoss.png alt="Πιστοποιημένο με ISO 9001:2008 Μικροβιολογικό Εργαστήριο στην Καβάλα">Εργαστήριο πιστοποιημένο<br>με <a href="http://s.mikroviologos.gr/files/iso90012008.pdf" target="_blank">ISO 9001:2008</a> από την<br>TUV Hellas</p><p class="col-2"><u>Διεύθυνση</u><br>Φιλικής Εταιρείας 5<br>(έναντι ΙΚΑ και ΚΤΕΛ),<br>Καβάλα</p><p class="col-3"><u>Επικοινωνία</u><br><span id="p1">☏</span> 2510-620630,<br><span id="p2">☏</span> 6974-900493<br><span id="c">✉</span> <a href="http://www.mikroviologos.gr/forma-epikoinonias">Φόρμα επικοινωνίας</a></p><p class="col-4"><br>Σχεδιασμός: <a href="/">Χάρης Ν. Καραχριστιανίδης</a><br>Copyright © 2005-2016</p></div></footer> </body> </html> Thank you!
  24. consider this is my json array [ {"products":[{"productname":"Online Test","product":[{"subjectname":"Quants","lessonid":"16","subjectid":null,"subject_covered":"Algebra for SSC","lesson":"15","videoflag":false,"videos":null,"quiz":[{"practice":[{"title":"15.0 - Test of Quantitative Aptitude: Algebra for SSC : Lesson 15.0 ","nid":"21712","quizid":null}],"combo":null,"mock":null}],"ebook":null},{"subjectname":"Quants","lessonid":"17","subjectid":null,"subject_covered":"Trigonometry for SSC","lesson":"16","videoflag":false,"videos":[],"quiz":[{"practice":[{"title":"16.0- Test of Quantitative Aptitude: Trigonometry for SSC : Lesson 16.0 ","nid":"21816","quizid":null}],"combo":[],"mock":[]}],"ebook":null},{"subjectname":"Quants","lessonid":"18","subjectid":null,"subject_covered":"Mensuration for SSC","lesson":"17","videoflag":false,"videos":[],"quiz":[{"practice":[{"title":"17.0- Test of Quantitative Aptitude: Mensuration for SSC : Lesson 17.0 ","nid":"21675","quizid":null}],"combo":[],"mock":[]}],"ebook":null},{"subjectname":"Quants","lessonid":"19","subjectid":null,"subject_covered":"Geometry for SSC","lesson":"18","videoflag":false,"videos":[],"quiz":[{"practice":[{"title":"18.0 -Test of Quantitative Aptitude: Geometry for SSC : Lesson 18.0 ","nid":"21740","quizid":null}],"combo":[],"mock":[]}],"ebook":null},{"subjectname":"GK","lessonid":"02","subjectid":null,"subject_covered":"Test of SSC GK Question","lesson":"2","videoflag":false,"videos":[] and i want to print the product array and print the subject name as well as quiz array title in a web page... how to parse the json and display these results in html page? please help me thanks in advance
  25. <?php $host = 'localhost'; $username = 'root'; $password = ''; $datadase = 'registerfinal'; $connect = mysqli_connect($host, $username, $password) or die ('error to connect to datadase'.mysqli_error()); if ($connect) { echo 'mysqli connect succsessfull'; } echo '<br /><br />'; $selectdb = mysqli_select_db($connect, $datadase) or die ('unable to select datadase'.mysqli_error()); if($selectdb) { echo 'database selected succsessfully'; } if(isset($_POST['savedetails'])) { $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $username = $_POST['username']; $password = $_POST['password']; $repeat_password = $_POST['repeat_password']; $gender = $_POST['gender']; $country = $_POST['country']; if(isset($_POST['food'])) { $food = $_POST['food']; $favfood = ""; foreach($food as $meal ) { $favfood = $meal.","; print_r($favfood); } } if(isset($_POST['imageUpload'])) { $imageUploadname = $_FILES['imageUpload']['name']; $imageUploadsize = $_FILES['imageUpload']['size']; $imageUploadtmp_name = $_FILES['imageUpload']['tmp_name']; $imageUploadtype = $_FILES['imageUpload']['type']; $uploadFolder = "uploadFolder/"; $destinationName = rand(1000, 10000).$imageUploadname; move_uploaded_file($imageUploadtmp_name, $uploadFolder.$destinationName); echo "$imageUploadname"; echo "$imageUploadsize"; echo "$imageUploadtmp_name"; echo "$imageUploadtype"; echo "$destinationName"; } $sqltwo = "INSERT INTO `registerfinaltable` (`id`, `firstname`, `lastname`, `username`, `password`, `repeat_password`, `gender`, `food`, `country`, `imageUploadname`, `imageUploadsize`, `imageUploadtype`) VALUES (NULL, '$firstname', '$lastname', '$username', '$password', '$repeat_password', '$gender', '$favfood', '$country', '$destinationName', '$imageUploadsize', '$imageUploadtype')"; $results = mysqli_query($connect, $sqltwo) ; if($results){ echo "inserted successfully"; } } ?> <html> <head> <title>register</title> </head> <body> <form action = "" method = "post" enctype = "multipart/form-data" > <label>first name : <input type = "text" name = "firstname" /> </label> <br /><br /> <label>last name : <input type = "text" name = "lastname" /> </label><br /><br /> <label>username : <input type = "text" name = "username" /> </label><br /><br /> <label>password : <input type = "password" name = "password" /> </label><br /><br /> <label>repeat password : <input type = "password" name = "repeat_password" /> </label><br /><br /> <label>Male : <input type = "radio" name = "gender" value = "Male" /> </label><br /><br /> <label>Female : <input type = "radio" name = "gender" value = "Female" /> </label><br /><br /> <label>pizza : <input type = "checkbox" name = "food[]" value = "pizza"/> </label><br /><br /> <label>burger : <input type = "checkbox" name = "food[]" value = "burger"/> </label><br /><br /> <label>chips : <input type = "checkbox" name = "food[]" value = "chips"/> </label><br /><br /> <label>sausage : <input type = "checkbox" name = "food[]" value = "sausage"/> </label><br /><br /> <label>sandwich : <input type = "checkbox" name = "food[]" value = "sandwich"/> </label><br /><br /> <label>Image : <input type = "file" name = "imageUpload" /> </label><br /><br /> <select name = "country"> <?php $sql = 'SELECT * FROM `countrie` '; $querry = mysqli_query($connect, $sql); while($country = mysqli_fetch_array($querry)):; ?> <option value = "<?php echo $country['country']; ?>"><?php echo $country['country']; ?></option> <?php endwhile;?> </select> <br /> <input type = "submit" name = "savedetails" /> </form> <table border = "1" bgcolor = "" width = "100%"> <tr><th>id</th><th>Firstname</th><th>Lastname</th><th>Username</th><th>Password</th><th>Password 2</th><th>Gender</th><th>Fav. Food</th> <th>Image</th> <th>Country</th><th>imageUploadname</th><th>imageUploadsize</th><th>imageUploadtype</th></tr> <?php $sqldata = "SELECT * FROM registerfinaltable"; $querysqldata = mysqli_query($connect, $sqldata); while($rows = mysqli_fetch_array($querysqldata) ):; ?> <tr> <td><?php echo $rows['id'];?></td> <td><?php echo $rows['firstname'];?></td> <td><?php echo $rows['lastname'];?></td> <td><?php echo $rows['username'];?></td> <td><?php echo $rows['password'];?></td> <td><?php echo $rows['repeat_password'];?></td> <td><?php echo $rows['lastname'];?></td> <td><?php echo $rows['gender'];?></td> <td><?php echo $rows['food'];?></td> <td><?php echo $rows['country'];?></td> <td><?php echo $rows['imageUploadname'];?></td> <td><?php echo $rows['imageUploadsize'];?></td> <td><?php echo $rows['imageUploadtype'];?></td> <?php endwhile;?> </tr> </table> </body> </html>
  • Create New...