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


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 769 results

  1. I am looking for some help if anyone could please. I am creating a fully html and css navigation bar I am no expert in html or css just a hobbyist. I am trying to create a website for my business i don't want a nav bar like on google i want to create one with my own social media icons search bar which can find words on that page and hold my logo and page links If anyone has anything Please comment or Could anyone email me a snippet of code if they have done this before Many thanks Kieran Patience k.pwebdesign@outlook.com
  2. i have a table of songs"links" and i am trying to make a search bar for them but i cant seem to figure it out, would anyone be so kind to help me? S3RL (WIP).html
  3. No keywords are highlight. for what reason behind that. please help me Here is my HTML code and at the bottom PHP. HTML CODE: <form id="nbc-searchblue1" method="post" enctype="multipart/form-data" autocomplete="off"> <input type="text" id="wc-searchblueinput1" class="nbc-searchblue1" value="<?php echo $search; ?>" placeholder="Search Iconic..." name="search" type="search" autofocus> <br> <input id='nbc-searchbluesubmit1' value="Search" type="submit" name="button"> </form> PHP CODE: <?php // We need to use sessions, so you should always start sessions using the below code. session_start(); // If the user is not logged in redirect to the login page... if (!isset($_SESSION['loggedin'])) { header('Location: ../index.php'); exit(); } include 'connect.php'; $search = $sql = ''; if (isset($_POST['button'])){ $numRows = 0; if (!empty($_POST['search'])){ $search = mysqli_real_escape_string($conn, $_POST['search']); $sql = "select * from iconic19 where student_id like '%{$search}%' || name_bangla like '%{$search}%' || name like '%{$search}%' || phone like '%{$search}%' || blood like '%{$search}%' || district like '%{$search}%'"; $result = $conn->query($sql); $numRows = (int) mysqli_num_rows($result); } if ($numRows > 0) { echo "<table> <thead> <tr> <th><b>Photo</th> <th><b>Student ID</th> <th style='font-weight: 700;'><b>নাম</th> <th><b>Name</th> <th><b>Mobile No.</th> <th><b>Blood Group</th> <th><b>Email</th> <th style=' font-weight: 700;'><b>ঠিকানা</th></tr></thead>"; while ($row = $result->fetch_assoc()){ $student_id = !empty($search)?highlightWords($row['student_id'], $search):$row['student_id']; $name = !empty($search)?highlightWords($row['name'], $search):$row['name']; $district = !empty($search)?highlightWords($row['district'], $search):$row['district']; echo "<tbody>"; echo "<tr>"; echo "<td>" . "<div class='avatar'><a class='fb_id' target='_blank' href='https://www.facebook.com/" . $row['fb_id'] . "'><img src='" . $row['photo'] . "'><img class='img-top' src='fb.png'></a>" . "</td>"; echo "<td data-label='Student ID'>" . $row['student_id'] . "</td>"; echo "<td data-label='নাম' style=' font-weight: 700;'>" . $row['name_bangla'] . "</td>"; echo "<td data-label='Name' style='font-weight:bold;' >" . $row['name'] . "</td>"; echo "<td data-label='Mobile No'>" . "<a href='tel:" . $row['phone'] . "'>" . $row['phone'] . "</a>" . "</td>"; echo "<td data-label='Blood' style='color:red; font-weight:bold;' >" . $row['blood'] . "</td>"; echo "<td data-label='Email'>" . "<a href='mailto:" . $row['email'] . "'>" . $row['email'] . "</a>" . "</td>"; echo "<td data-label='ঠিকানা' style='font-weight: 700;'>" . $row['address_bangla'] . "</td>"; echo "</tr>"; echo "</tbody>"; } } else { echo "<div class='error-text' style='font-weight: 700;'>No Result</div><br /><br />"; } } $result = $conn->query("SELECT * FROM iconic19 $sql ORDER BY id DESC"); function highlightWords($text, $word){ $text = preg_replace('#'. preg_quote($word) .'#i', '<span style="background-color: #F9F902;">\\0</span>', $text); return $text; } $conn->close(); ?>
  4. Is there anyway to make this dropdown menu use onclick instead of hover on small screens. I'm creating a menubar with several dropdowns and a couple sub-dropdowns with-in them and as it is on small screes the menu is too hard to navigate with the hover. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown Thanks!
  5. I tried to make the parts of this code "The band section" and the menu: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_band&stacked=h But in the class="w3-justify" the text is still aligned at the left of the page and the menu doesn't even open when I shorten the window to see how it works. What can I do?
  6. I just started teaching myself html and css and ended up making this practice page with song lyrics. I managed to get the wav file to appear and play the song on the page but I'd love to have the song automatically play when the page opens without the player visible as its taking away from the aesthetic I want.
  7. Hi, I am building a website in wordpress! Even though im very new to coding HTML, CSS and Java, i am trying! My problem is that i want to make a slideshow based for ads, so every picture need a individual link! Can anyone tell me how thats done? Thank you
  8. Can someone help me try to figure out the proper HTML and CSS to both align images side by side AND put a sliding caption overlay on each image that slides up from the bottom? I'm using the following as references: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom Thank you!
  9. I have a use case where my content editable div accepts only string inside it but it shows the html elements as they are supposed to be shown on website but as per the configurations mentioned in package. They have mentioned the attributes but not click events. Now, if I have string as `some text here <button onclick=someFunction()>button</button>`. Here someFunction is directly being called without triggering button because I think it is in string. How can I call `someFunction()` only when button is clicked.
  10. Currently I am working on a project and I faced this problem i want to hide the parameters from URL that are passed. I am working on a site http://letsfindcourse.com and I want to hide the parameters from URL so how can I do that ?
  11. Hello everyone, I was searching for a technique to make an element on my html page staying at the same place even if we scroll the page. I found 2 methods : This one and this one. What is the difference between these two techniques ? (apart from how it's coded) Also, I have a problem with these methods : when we scroll down, it stay at the same place - that's nice - but the rest of the page goes in front of my sticky element and not behind, like it does on the two methods I mentioned before. Have anyone an answer to my to questions ? Thank you in advance, Maxi_Mega PS: Sorry for my english, I'm french :s
  12. Well, I'm trying to make it so that the slide ends on the last page and shows a sign that whoever's reading has reached the end, but I'm not too experient on JavaScript, could you guys help me on that? Here's the code: <html> <title>Terra Formars</title> <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link> <style> .mySlides {display:none} </style> <body> <div class="w3-container"> <h2> Leitor BETA</h2> <p>Capítulo 202 de Terra Formars.</p> </div> <div class="w3-center"> <div class="w3-section"> <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button> </div> </div> <div class="w3-content"> <img class="mySlides" src="https://i.ibb.co/fqQw2mX/00.png" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/CQ9VjsF/01.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/FVfsh9c/02.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/sq7czrk/03.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/By7k2J4/04.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/NnYp2xH/05.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/cXkgpK0/06.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/CW8fr43/07.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/LJ25GnH/08.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/Khbg5h9/09.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/wRrdp5T/10.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/TTnfdvv/11.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/72rLfpX/12.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/x8zR2yp/13.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/zXv7HJg/14.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/4tkwzt8/15.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/hHW04cS/16.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/dGx73nH/17.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/rx8G6Yr/18.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/4W1v7WS/19.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/qMYLTJz/20.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/3yG8h2N/22.jpg" style="width: 100%;" /> </div> <div class="w3-center"> <div class="w3-section"> <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-red", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-"; } </script> </body> </html>
  13. I have referenced the W3 slideshow tutorial here and added two slideshows to my web page using Dreamweaver. I understand that the Javascript needs to be edited to accommodate 2 slideshows (divs vs. classes i think?), and I have tried to follow the instructions given here in order to edit it. Both of my slideshows seem to work independently now, but i can't figure out how to edit the Javascript to make the dots work right. The hover color works (red), but on the second slideshow, the dots do not turn red as the slideshow is advanced. I know very little about Javascript and I have gone through the Javascript tutorial, but I haven't landed on a solution. I've also searched the forums for an answer, but haven't found one that works for my specific situation. If anyone could point me toward a solution to have two slideshows on the page that both work pretty much like the one on the W3 tutorial page (with dots and arrows), I'd greatly appreciate your help — ANY guidance about how to fix the code is greatly appreciated. ~bex Here is my code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .mySlides {display:none} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #f44336; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div id="wrapper"> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="img_nature_wide.jpg" width="100%"> <img class="mySlides fade" src="img_fjords_wide.jpg" width="100%"> <a class="prev" onclick="plusDivs(-1, 0)">&#10094;</a> <a class="next" onclick="plusDivs(1, 0)">&#10095;</a> <!-- Extra plusDivs parameter refers to first (0) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1)"></span> <span class="dot" onclick="currentDiv(2)"></span> </div> </div> <hr> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="img_nature_wide.jpg" width="100%"> <img class="mySlides fade" src="img_fjords_wide.jpg" width="100%"> <a class="prev" onclick="plusDivs(-1, 1)">&#10094;</a> <a class="next" onclick="plusDivs(1, 1)">&#10095;</a> <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1)"></span> <span class="dot" onclick="currentDiv(2)"></span> </div> </div> <script> var slideIndex = 1; var z = document.getElementsByClassName("slideshow"); for (i = 0; i < z.length; i++) { //set custom data attribute to first current image index z[i].setAttribute("data-currentslide", 1); showDivs(z[i].getAttribute("data-currentslide"), i); } function plusDivs(n, j) { //get custom data attribute value of current image index to slideshow class index j slideIndex = parseInt(z[j].getAttribute("data-currentslide")[0]); showDivs(slideIndex += n, j); } function currentDiv(n,j) { showSlides(slideIndex += n, j); } function showDivs(n, j) { var i; var z = document.getElementsByClassName("slideshow")[j]; var x = z.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length; } //set custom data attribute to current image index z.setAttribute("data-currentslide", slideIndex); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } </script> </div> </body> </html>
  14. Hay can someone offer some input(it's definitely not mobile friendly what I wrote) in regards to JavaScript and the html form document, I can't recalls the relationship while testing the JavaScript logic, any inputs welcome. Definitely recommend looking at it via desktop mode if on tablet or phone. 🤗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> </head> <body> <!--FORM_REGISTER--> <div class="one"> <form action=" " method="post" onsubmit = "return register_details();" /> <!--C--> Country<br><input type="text"id="country"/></br> <!--A--> Age<br><input type="age"id="DOB"/></br> <!--S--> Status<br><input type="text"id="status"/></br> </form> </div> <div class="two"> <form action="submission.html" method="register_details(id)" onsubmit = "return register_details();" /> <!--U-->UserName<br><input type="text" value="" id="UsernName"/></br> <!--P-->Password<br><input type="password"value="" id="Password"/></br> <!--E--> Email<br><input type="Email" value="" id="Email"/></br> Male<br><input type="radio" value="" id="male" /></br> Female<br><input type="radio" value="female" id="female" /></br> Submit<br><input type="submit" value="register" id ="submit "/></br> </form> </div> <style type="text/css"> .one { background-color:#444444; color:white; margin:350px; padding:12px; text-align:left; position:fixed; } .two { background-color:#444444; color:white; margin:350px; padding:12px; text-align:center; position:fixed; left:10px; top:240px; width:1157px; height:1000px; background:#444444; } //body { overflow:hidden; } </style> <!-----------------------------------------------> <script type="text/javascript"> function register_details(id) { // bool checked = false; var username = document.getElementById (id,value,"username").value; var password = document.getElementById (id,"password").value; var email = document.getElementById (id,"email").value; var male = document.getElementById (id,"male").value; var female = document.getElementById (id,"female").value; <!------------------------------------------------------> var submit = document.getElementById (id,"register").value; if ((value === "") || (password === "") || (email === "")) { alert("please correct information"); }if ((male[0].checked === false ) && ( female[1].checked === false )){ console.log("please fix gender"); } else if (ErrorText= "") { alert("please correct information"); }else{ submit(register_details(id)) } } </script> <!------------------------------------------------> </body> </body> </html>
  15. hi there... i use the dot slideshow indicator with the carousel code for automatic advance images, but can´t make points changes togheter with the image changes with the code... any ideas? sorry about my english.... here is the code... thanks in advance. <header class="w3-display-container w3-center" id="home" style="padding-top: 150px"> <div class="w3-content w3-display-container" style="max-width:800px"> <img class="mySlides" src="img-1.jpg" style="width:100%"> <img class="mySlides" src="img-2.jpg" style="width:100%"> <img class="mySlides" src="img-3.jpg" style="width:100%"> <img class="mySlides" src="img-4.jpg" style="width:100%"> <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span> </div> </div> </header> <script> //slideshow carousel var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 9000); } //new code var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var n = document.getElementsByClassName("myIndex");//quitar var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-white"; } </script>
  16. Hi everyone, is it possible to collect data such as checkbox and radio inside iframe when push button outside of iframe? or require to method of post inside iframe?
  17. I was following the filtered photo gallery tutorial below: https://www.w3schools.com/howto/howto_js_portfolio_filter.asp I have an issue with the photos bunching up on the right side & not shifting to a new column. This is the HTML in the link below: https://www.w3schools.com/code/tryit.asp?filename=FWU52Y6W22GU What can I add to make sure the formatting is right?
  18. I am trying to design my own mockup website based on one of the W3 templates; however, I could not get the photo images to lay out on my website the same way as the W3 template. Here is the W3 template that I was talking about: https://www.w3schools.com/w3css/tryw3css_templates_photo2.htm. And here is the following codes that I came up with for my website. Any feedback will help. HTML <!doctype html> <html> <head> <title>Amy Perrales | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- !PAGE CONTENT! --> <div class="photography" style="max-width:1500px"> <!-- Header --> <header class="panel" style="padding:128px; 16px;"> <h1 class="ap-xlarge">PHOTOGRAPHER</h1> <h1>Amy Perrales</h1> </head> <body> <div> <id class="introduction"> <a href="Home" style="text-decoration: none;">Home</a> <a href="Portfolio" style="text-decoration: none;">Portfolio</a> <a href="About Amy" style="text-decoration: none;">About Amy</a> <a href="Contact" style="text-decoration: none;">Contact</a> </div> </header> <!-- Photo Grid --> <div class="half-width"> <img src="img/amusement_park.jpg" alt="amusement park" style="width: 599px; height: 424px;"> <img src="img/dock-1365387_640.jpg" alt="dock" style="width:550px; height:633px;"> <img src="img/kaboompics_Black baby chicks.jpg" alt="baby chicks" style="width: 342px; height:513px;"> <img src="img/sunset-114557_640.jpg" alt="sunset" style="width: 275px; height: 550px;"> <img src="img/wedding_couple.jpg" alt="wedding couple" style="width:550px; height:412px;"> </div> <div class="full-width"> <img src="img/ballet-437990_640.jpg" alt="ballet dancer" style="width:424px; height="640px;"> <img src="img/baseball.jpg" alt="baseball player" style="width:424px; height="640px;"> <img src="img/dancer-2471026_640.jpg" alt="dancer" style="width:424px; height="640px;"> <img src="img/pool.jpg" alt="children and pool" style="width:424px; height="640px;"> </div> <!-- Footer --> <footer> <i class="fa fa-facebook-square" style="font-size:36px;"></i> <i class="fa fa-twitter-square" style="font-size:36px;"></i> <i class="fa fa-instagram" style="font-size:36px;"></i> <i class="fa fa-pinterest" style="font-size:36px;"></i> <i class="fa fa-linkedin" style="font-size:36px;"></i> </footer> </style> </body> </html> CSS /* ========================================================================== Base Styles ========================================================================== */ body,h1 { font-family: 'Slabo 45px', serif; text-align: center; letter-spacing: 6px; color: #9aa6b1; } a { color: #a9b3bc; border: 3px solid #fba69d; padding: 8px; margin-left: 3px; margin-right: 5px; } img { margin-bottom: 128px; width: 100%; height: auto; }
  19. Hi everyone, I'm trying to create the look like "paginate data page", but it is not. I set up the file to insert in website by iframe, but I need to find a way to make clicked data like click the checkbox, then click on next, go to next file in iframe, then come back, stay checked in checkbox. Do you understand what I mean? I'm not fluent in English, my prime is American Sign Language.
  20. When I add element in "Search HTML" box that I want to find on page and it gives me several results. how can I see those that come after the first one? I don't see arrow or anything like that. For ex. when I add "id" for some page it gives me 9 results but I see highlighted only the first one. How to scroll to others?
  21. AJ2021

    Nav bar spruce up

    Hi, I'm new to web design and need help w/ my nav bar. I need help spacing my page links on the nav bar as well as spacing my nav bar within the page. I have my nav bar spaced right now but I don"t know if it will work well w/my page and the page links aren't spaced correctly and I'm not sure how to space them. I also got my page links to be white but the rest of the words in the nav bar are still black & I want it white as well. Any help would be greatly appreciated. HTML: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jackson Lawton_homePage</title> <link href="_CSS/main.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header> <h1>Jackson Lawton and Family</h1> <nav> <ul> <li><a href="index.html">Home</a> </li> <li><a href="contact.html">Contact</a> </li> <li><a href="media.html">Media</a> </li> <li><a href="gallery.html">Gallery</a> </li> <li><a href="resume.html">Resume</a> </li> </ul> </nav> </header> <section> <h1 id="pagename">Home</h1> <h2>Welcome to the Lawtons</h2> </section> </div><!-- end of wrapper --> </body> </html> CSS: @charset "utf-8"; /* CSS Document */ #wrapper { width: 1920px; min-height: 1080px; position: relative; margin: 0 auto; background-color: #5DD7FE } header { width: 1778px; min-height: 62px; background-color: #808080; position: absolute; top: 48px; left: 142px; } header h1 { font-size: 40px; color: #ffffff position: absolute; width: 425px; } header nav ul li { list-style-type: none; display: inline-block; } header nav ul li a { text-decoration: none; color: #ffffff; font-size: 18px; } header nav ul li a:hover { color: red; } header nav { position: absolute; top: 6px; left: 500px; } /* Style inputs with type="text", select elements and textareas */ input[type=text], select, textarea { width: 100%; /* Full width */ padding: 12px; /* Some padding */ border: 1px solid #ccc; /* Gray border */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /* Make sure that padding and width stays in place */ margin-top: 6px; /* Add a top margin */ margin-bottom: 16px; /* Bottom margin */ resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */ } /* Style the submit button with a specific background color etc */ input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } /* When moving the mouse over the submit button, add a darker green color */ input[type=submit]:hover { background-color: #45a049; } /* Add a background color and some padding around the form */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } Also line 24 which is position:absolute under header h1 in Dreamweaver is coming up as a problem and I can't seem to find out why. header h1 { font-size: 40px; color: #ffffff position: absolute; width: 425px;
  22. I would like to call the jquery text() method with a string argument that includes the HTML character entity for the copyright symbol (&copy;). I've tried numerous variations of the following theme: $('#copyright').text('&copy; ' + date.getFullYear() + ' John Doe'); So far, nothing I've tried has produced the desired result. Specifically, the HTML "& copy;" entity is not getting translated into the copyright symbol. Is it possible to pass an HTML character entity in this way?
  23. I have a need for creating checkbox names that go through a loop and are named by concatenating the name of the field with a number that is the loop index. <%if pDiscussed(i) <> "True" then%> <input type="checkbox" name="ynDiscussed" & CStr(i) value="0" /> <%else%> <input type="checkbox" name="ynDiscussed" & CStr(i) value="1" checked /> <%end if%></td> I've done this before with text boxes and there are no problems but somehow with a checkbox it will not work. I've even tried using an array (ynDiscussed[]) along with... <%if pDiscussed(i) <> "True" then%> <input type="checkbox" name="ynDiscussed(" & CStr(i) & ")" value="0" /> <%else%> <input type="checkbox" name="ynDiscussed(" & CStr(i) & ")" value="1" checked /> <%end if%></td> but it doesn't like that either. I can't even substitute in a number instead of the CStr(i) and have it pick it up - my code reading: <input type="checkbox" name="ynDiscussed" & "1" value="0" /> Is this simply impossible or what am I missing? Any help is very much appreciated. Cheers!
  24. I am using a drop-down menu with a search option that excludes short-code search (based on my last post: How to ignore shortcode on html text search). Basically, it needs to look like this Country selection page: Now I have this very long drop-down menu that I would like to manage in a controlled window and I thought that using the select size function will work for me. Unfortunately, it didn't... Please see the following attached screenshots & codes that describe the problem. 1. This is the one that is working well but with a very long list (without the select size function): Working code but long list And the code is: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */ transition-duration: 0.8s; }.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block} } #myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .Country { position: relative; display: inline-block; } .Country-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .Country-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .Country a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="Country"> <button onclick="myFunction()" class="dropbtn">Country</button> <div id="myCountry" class="Country-content"> <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()"> <a href="/professional-network/asia/Afghanistan">[flag=af] <span>Afghanistan</span></a> <a href="/professional-network/asia/Armenia">[flag=am] <span>Armenia</span></a> <a href="/professional-network/asia/Azerbaijan">[flag=az] <span>Azerbaijan</span></a> <a href="/professional-network/asia/Bahrain">[flag=bh] <span>Bahrain</span></a> <a href="/professional-network/asia/Bangladesh">[flag=bd] <span>Bangladesh</span></a> <a href="/professional-network/asia/Bhutan">[flag=bt] <span>Bhutan</span></a> <a href="/professional-network/asia/Brunei">[flag=bn] <span>Brunei</span></a> <a href="/professional-network/asia/Cambodia">[flag=kh] <span>Cambodia</span></a> <a href="/professional-network/asia/Cyprus">[flag=cy] <span>Cyprus</span></a> <a href="/professional-network/asia/East Timor">[flag=tl] <span>East Timor</span></a> <a href="/professional-network/asia//Georgia">[flag=ge] <span>Georgia</span></a> <a href="/professional-network/asia/India">[flag=in] <span>India</span></a> <a href="/professional-network/asia/Indonesia">[flag=id] <span>Indonesia</span></a> <a href="/professional-network/asia/Iran">[flag=ir] <span>Iran</span></a> <a href="/professional-network/asia/Iraq">[flag=iq] <span>Iraq</span></a> <a href="/professional-network/asia/Israel">[flag=il] <span>Israel</span></a> <a href="/professional-network/asia/Japan">[flag=jp] <span>Japan</span></a> <a href="/professional-network/asia/Jordan">[flag=jo] <span>Jordan</span></a> <a href="/professional-network/asia/Kazakhstan">[flag=kz] <span>Kazakhstan</span></a> <a href="/professional-network/asia/Kuwait">[flag=kw] <span>Kuwait</span></a> <a href="/professional-network/asia/Kyrgyzstan">[flag=kg] <span>Kyrgyzstan</span></a> <a href="/professional-network/asia/Laos">[flag=la] <span>Laos</span></a> <a href="/professional-network/asia/Lebanon">[flag=lb] <span>Lebanon</span></a> <a href="/professional-network/asia/Malaysia">[flag=my] <span>Malaysia</span></a> <a href="/professional-network/asia/Maldives">[flag=mv] <span>Maldives</span></a> <a href="/professional-network/asia/Mongolia">[flag=mn] <span>Mongolia</span></a> <a href="/professional-network/asia/Myanmar">[flag=mm] <span>Myanmar</span></a> <a href="/professional-network/asia/Nepal">[flag=np] <span>Nepal</span></a> <a href="/professional-network/asia/North Korea">[flag=kp] <span>North Korea</span></a> <a href="/professional-network/asia/Oman">[flag=om] <span>Oman</span></a> <a href="/professional-network/asia/Pakistan">[flag=pk] <span>Pakistan</span></a> <a href="/professional-network/asia/China">[flag=cn] <span>China</span></a> <a href="/professional-network/asia/The Philippines">[flag=ph] <span>The Philippines</span></a> <a href="/professional-network/asia/Qatar">[flag=qa] <span>Qatar</span></a> <a href="/professional-network/asia/Taiwan">[flag=tw] <span>Taiwan</span></a> <a href="/professional-network/asia/Russia">[flag=ru] <span>Russia</span></a> <a href="/professional-network/asia/Saudi Arabia">[flag=sa] <span>Saudi Arabia</span></a> <a href="/professional-network/asia/Singapore">[flag=sg] <span>Singapore</span></a> <a href="/professional-network/asia/China">[flag=sg] <span>China</span></a> <a href="/professional-network/asia/South Korea">[flag=kr] <span>South Korea</span></a> <a href="/professional-network/asia/Sri Lanka">[flag=lk] <span>Sri Lanka</span></a> <a href="/professional-network/asia/Syria">[flag=sy] <span>Syria</span></a> <a href="/professional-network/asia/Tajikistan">[flag=tj] <span>Tajikistan</span></a> <a href="/professional-network/asia/Thailand">[flag=th] <span>Thailand</span></a> <a href="/professional-network/asia/The United Arab Emirates">[flag=ae] <span>The United Arab Emirates</span></a> <a href="/professional-network/asiaTurkey">[flag=tr] <span>Turkey</span></a> <a href="/professional-network/asia/Turkmenistan">[flag=tm] <span>Turkmenistan</span></a> <a href="/professional-network/asia/Uzbekistan">[flag=uz] <span>Uzbekistan</span></a> <a href="/professional-network/asia/Vietnam">[flag=vn] <span>Vietnam</span></a> <a href="/professional-network/asia/Yemen">[flag=ye] <span>Yemen</span></a> </div> </div> <script> function myFunction() { document.getElementById("myCountry").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myCountry"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { var label = a[i].querySelector('span'); if (label.innerText.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> This is the one that is using the select size function but with bugs and not working (broke the search, the flags, the design and not opening properly on the website): The code problem And the code is: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */ transition-duration: 0.8s; }.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block} } #myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .Country { position: relative; display: inline-block; } .Country-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .Country-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .Country a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="Country"> <button onclick="myFunction()" class="dropbtn">Country</button> <div id="myCountry" class="Country-content"> <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()"> <select size="20"> <option><a href="/professional-network/asia/Afghanistan">[flag=af] <span>Afghanistan</span></a> <option><a href="/professional-network/asia/Armenia">[flag=am] <span>Armenia</span></a> <option><a href="/professional-network/asia/Azerbaijan">[flag=az] <span>Azerbaijan</span></a> <option><a href="/professional-network/asia/Bahrain">[flag=bh] <span>Bahrain</span></a> <option><a href="/professional-network/asia/Bangladesh">[flag=bd] <span>Bangladesh</span></a> <option><a href="/professional-network/asia/Bhutan">[flag=bt] <span>Bhutan</span></a> <option><a href="/professional-network/asia/Brunei">[flag=bn] <span>Brunei</span></a> <option><a href="/professional-network/asia/Cambodia">[flag=kh] <span>Cambodia</span></a></option> <option><a href="/professional-network/asia/Cyprus">[flag=cy] <span>Cyprus</span></a></option> <option><a href="/professional-network/asia/East Timor">[flag=tl] <span>East Timor</span></a></option> <option><a href="/professional-network/asia//Georgia">[flag=ge] <span>Georgia</span></a></option> <option><a href="/professional-network/asia/India">[flag=in] <span>India</span></a></option> <option><a href="/professional-network/asia/Indonesia">[flag=id] <span>Indonesia</span></a></option> <option><a href="/professional-network/asia/Iran">[flag=ir] <span>Iran</span></a></option> <option><a href="/professional-network/asia/Iraq">[flag=iq] <span>Iraq</span></a></option> <option><a href="/professional-network/asia/Israel">[flag=il] <span>Israel</span></a></option> <option><a href="/professional-network/asia/Japan">[flag=jp] <span>Japan</span></a></option> <option><a href="/professional-network/asia/Jordan">[flag=jo] <span>Jordan</span></a></option> <option><a href="/professional-network/asia/Kazakhstan">[flag=kz] <span>Kazakhstan</span></a></option> <option><a href="/professional-network/asia/Kuwait">[flag=kw] <span>Kuwait</span></a></option> <option><a href="/professional-network/asia/Kyrgyzstan">[flag=kg] <span>Kyrgyzstan</span></a></option> <option><a href="/professional-network/asia/Laos">[flag=la] <span>Laos</span></a></option> <option><a href="/professional-network/asia/Lebanon">[flag=lb] <span>Lebanon</span></a></option> <option><a href="/professional-network/asia/Malaysia">[flag=my] <span>Malaysia</span></a></option> <option><a href="/professional-network/asia/Maldives">[flag=mv] <span>Maldives</span></a></option> <option><a href="/professional-network/asia/Mongolia">[flag=mn] <span>Mongolia</span></a></option> <option><a href="/professional-network/asia/Myanmar">[flag=mm] <span>Myanmar</span></a></option> <option><a href="/professional-network/asia/Nepal">[flag=np] <span>Nepal</span></a></option> <option><a href="/professional-network/asia/North Korea">[flag=kp] <span>North Korea</span></a></option> <option><a href="/professional-network/asia/Oman">[flag=om] <span>Oman</span></a></option> <option><a href="/professional-network/asia/Pakistan">[flag=pk] <span>Pakistan</span></a></option> <option><a href="/professional-network/asia/China">[flag=cn] <span>China</span></a></option> <option><option><a href="/professional-network/asia/The Philippines">[flag=ph] <span>The Philippines</span></a></option> <option><a href="/professional-network/asia/Qatar">[flag=qa] <span>Qatar</span></a></option> <option><a href="/professional-network/asia/Taiwan">[flag=tw] <span>Taiwan</span></a></option> <option><a href="/professional-network/asia/Russia">[flag=ru] <span>Russia</span></a></option> <option><a href="/professional-network/asia/Saudi Arabia">[flag=sa] <span>Saudi Arabia</span></a></option> <option><a href="/professional-network/asia/Singapore">[flag=sg] <span>Singapore</span></a></option> <option><a href="/professional-network/asia/China">[flag=sg] <span>China</span></a></option> <option><a href="/professional-network/asia/South Korea">[flag=kr] <span>South Korea</span></a></option> <option><a href="/professional-network/asia/Sri Lanka">[flag=lk] <span>Sri Lanka</span></a></option> <option><a href="/professional-network/asia/Syria">[flag=sy] <span>Syria</span></a></option> <option><a href="/professional-network/asia/Tajikistan">[flag=tj] <span>Tajikistan</span></a></option> <option><a href="/professional-network/asia/Thailand">[flag=th] <span>Thailand</span></a></option> <option><a href="/professional-network/asia/The United Arab Emirates">[flag=ae] <span>The United Arab Emirates</span></a></option> <option><a href="/professional-network/asiaTurkey">[flag=tr] <span>Turkey</span></a></option> <option><a href="/professional-network/asia/Turkmenistan">[flag=tm] <span>Turkmenistan</span></a></option> <option><a href="/professional-network/asia/Uzbekistan">[flag=uz] <span>Uzbekistan</span></a></option> <option><a href="/professional-network/asia/Vietnam">[flag=vn] <span>Vietnam</span></a></option> <option><a href="/professional-network/asia/Yemen">[flag=ye] <span>Yemen</span></a> </div> </div> <script> function myFunction() { document.getElementById("myCountry").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myCountry"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { var label = a[i].querySelector('span'); if (label.innerText.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> Obviously, I have done something wrong so if you can help me fix it I will appreciate this a lot!
  25. First of all, I'm no way near any skilled "programmer" or website builder, I mostly just copy things and modify the styles and stuff! So this is probably a nooby question, you have been warned. I've this website I'm building for a school project and I've a few problems left and I've given up trying to fix them, I need to start working on other stuff. First of all so am I trying to get this slider between the three pictures and the navigation bar in the supposedly start page, but the animation disappear when you put it in and I don't think the autoplays work either. This is the main thing I'm trying to do. Secondly, When you go on mobile view and press the dropdown menu it doesn't seem to find the script, which i don't understand why. In the header I have <script src="/online-store-header/js/flertdown.js"></script> and the body I've the code <a href="javascript:void(0);" style="font-size:25px;position: absolute; top: 65px; right: 0; border: 0;" class="icon" onclick="specificName()">☰</a> The console returns this error: Uncaught TypeError: Cannot read property 'className' of null at specificName (flertdown.js:3) at HTMLAnchorElement.onclick (final.html:195) Dropdown js code Any help would be really appreciated, i really need to be done this site soon :)) And I'm really sorry if the index file is totally chaos, elements seems to have a life of their own and come back and reproduce to multiple of the same element after I've deleted them, I've lost control of what i've created (or copied)
×
×
  • Create New...