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

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 634 results

  1. Not sure if I worded that right. I am trying to ad a modal to our page. Eventually it will need to be more than one modal but one problem at a time. I am struggling to add multiple images in a modal where visitors can just click on the image and it will enlarge and they can scroll through them. Instead what happens is it gives me the images but no option to click on an arrow which means every image has to opened separately. Can someone help me please as I am not managing with google. This is the coding I found on W3Schools. I just copied and pasted it like I found it and just put my image tag in. I just can't figure out how to add more images. <!-- Trigger the Modal --> <img id="myImg" src="img/t1.jpg" alt="Tinkerbell Party" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times; </span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img01"> <!-- Modal Caption (Image Text) --> <div id="caption"></div> </div> <html> <head> <style> #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } </style> </head> <body> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } </script> </body> </html>
  2. 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>
  3. I am trying to find a solution to a problem that I have encountered while trying to get a fixed-top navigation menu to work dynamically in W3.CSS. By dynamically, I mean that the horizontally-orientated navigation bar should remain in its place under the page title and image until the page is scrolled downwards and reaches the top of the viewport. At this point, it should fix itself to the top of the screen. I have been able to achieve this effect using my own html/css and jquery script but this method doesn’t work as intended with W3.CSS. I have been moving my websites over to W3.CSS as I as a means of making them responsive and also because css is not my strong point and I like the W3.CSS structure. The menu bar operates as it should when it is in its static mode but, when it is fixed, which involves position:absolute and a z-index of 1, the dropdown menus no longer appear above the bar but are concealed within it. I have tried altering the z-index values of the dropdown-hover and dropdown-content elements but cannot find a solution to this problem. If there is anyone who can, I would be very grateful. The html code below is based closely on the “Navigation Bar with Dropdown” example taken from the W3.CSS Navigation Bars page. I also include the css used to fix the bar and the jquery function to call the css once the top of the screen is reached. HTML <div id=”container”> <div id=”header”></div> <img id="header_image" src="titleimage.jpg" alt="Header Image" class="header_image"/> <img id="header_image_m" src="title_image_m.jpg" alt="Header Image" class="header_image"/> <div id=”nav_bar_container> <div id=”nav_bar” class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a> <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-mobile"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div> </div> CSS #nav_bar_container, #nav_bar{ margin:0; padding:0; width:100%; max-width:948px; } .nav_bar_fixed { position:fixed; top:0px; z-index:1; } Jquery if ($( window ).width() > 600) { $(window).scroll(function() { var fixedBar = $('#nav_bar'), targetScroll = $('#nav_bar_container').position().top, currentScroll = $('html').scrollTop() || $('body').scrollTop(); fixedBar.toggleClass('nav_bar_fixed', currentScroll >= targetScroll); }); }
  4. Problem with Photo Image Layout

    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; }
  5. Changing the place of input and label

    The html code is this : <div class="form-group"> <label class="col-sm-4 control-label">Checkbox inputs</label> <div class="col-sm-8"> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt01" checked> <label for="opt01">Option 1</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt02"> <label for="opt02">Option 2</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt03"> <label for="opt03">Option 3</label> </div> </div> </div> I attached the results photo : I want to change the place of checkbox and label I mean I want first be label and then checkbox. It had bootstrap too I uploaded the bootstrap files too : https://www.dropbox.com/s/kc8ytkkd5dxcmc1/assets.zip?dl=0 Who can say that how can I change the place of checkbox and label I will be thank.
  6. So the first picture is my homepage(mt.hebronbaptistchurch.html) and the link box is the size i want it to be. The second picture is my pictures and videos page(picturesandvideos.html and the link size is increased and I have no clue why. I added a slideshow feature using CSS and I think it messed with the link box. Mt.hebronbaptistchurch.html News.html PicturesandVideos.html
  7. Dear W3Schools-Community, There is something not working with my code right here. It should be mentioned that I am fairly new to using JavaScript. Here is my HTML code (stripped down to the essential parts): <!DOCTYPE html> <html lang="de"> <head> <script type="text/javascript"> function change_content(contentname) { if (document.getElementById(contentname).className = 'notactive') { document.getElementById('login').className = 'notactive'; document.getElementById('news').className = 'notactive'; document.getElementById('info').className = 'notactive'; document.getElementById('websites').className = 'notactive'; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById('content').innerHTML = this.responseText; if (contentname == 'kontakt' || contentname == 'hilfe' || contentname == 'impressum') { document.getElementById('info').className = 'active'; } else { document.getElementById(contentname).className = 'active'; } } }; xmlhttp.open('POST', contentname + 'page.php', true); xmlhttp.send(); } if (document.getElementById('info').className == 'active') { document.getElementById('dropdown-icon').src = "/ressource/images/nydoo-dropdown-icon-black.png"; } else { document.getElementById('dropdown-icon').src = "/ressource/images/nydoo-dropdown-icon-yellow.png"; } } window.onload = change_content; </script> </head> <header> <ul id="mainnavigation"> <li id="mainlist" class="dropdown"><a id="info" class="notactive" onclick="change_content(this.id);">Information<img id="dropdown-icon" style="width: 15px; height: 12px; float: right; margin-top: 7px; margin-right: 20px;" src="/ressource/images/nydoo-dropdown-icon-yellow.png" id="dropdown_icon"></a></li> </ul> </header> <body onload="change_content('login'); return false;"> <div id="content"> </div> </body> </html> What I'm trying to do is changing the color from img (id="dropdown-icon") from yellow to black whenever a (id="info") has class "active". Also the other way around (class "notactive" -> change from black to yellow). Hopefully this describes it. It maybe a simple thing. But I'm getting frustrated with this issue. Let me know if I screwed it up myself :3 Thank you very much n advance.
  8. logo

    how adding logo to top page next to the title.
  9. Hi I am using below script to create 3 tables adjacent to each other : PARAMETERS MOUNT SIZE 1 f fg fgh BEFORE_USAGE USED AVAILABLE USE% 1 f 5 fg fgh t2 AFTER_USAGE USED AVAILABLE USE% Fvfev kjhkj kjgfhkg fbghvg gcfv hfjghj QUERY : I want to use df -h command which should fill the data ( <td> ) in the above 3 table columns ( Parameters/ Before_Usgae/After_Usage). BEFORE USAGE : The disk space before clearing the space on the server. AFTER USAGE : Disk space after clearing the space. The problem here is : I am able to write the code in linux to generate the table like above ( next to each other) but unable to generate the data for ( Mount/size) , ( Used/available/use%) in runtime. Please help me how can i achieve this. ------------------------- #! /bin/bash MailTO=xyz@gmail.com DATE=`/bin/date '+%Y%m%d-%H%M%S'` HOST=`hostname` ALERT_DIR_COUNT=`df -Ph | grep -v "Use%" | sed 's/%//g' | awk '$5 > 70 {print $1,$2,$3,$4,$5"%",$6;}' | column -t | wc -l` ( printf "To: xyz@gmail.com\n" printf "Subject:$HOST\n :$ALERT_DIR_COUNT\n mounts reached threshold & Logs Cleared : $Numberofdays days\n" printf "Content-Type: text/html\n" printf "<html>\n" printf "<body>\n" df -Ph | awk ' BEGIN { printf "<table border="1" cellspacing="0" cellpadding="0">" printf "<tr>" printf "<td width="40">" printf "<table width="100" border="1" cellspacing="0" cellpadding="1">" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#B2BABB align=center colspan="2">PARAMETERS</th>" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#EAEDED>MOUNT</th>" printf "<th style=\"font-size:12px\" bgcolor=#EAEDED>SIZE</th>" printf "</tr>" printf "<tr>" printf "<td>1</td>" printf "<td>f</td>" printf "</tr>" printf "<tr>" printf "<td>fg</td>" printf "<td>fgh</td>" printf "</tr>" printf "</table>" printf "</td>" printf "<td width="30">" printf "<table width="100" border="1" cellspacing="0" cellpadding="1">" printf "<tr>" printf "<th style=\"font-size:12px\"bgcolor=#73C6B6 align=center colspan="3">BEFORE_USAGE</th>" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#D0ECE7>USED</th>" printf "<th style=\"font-size:12px\" bgcolor=#D0ECE7>AVAILABLE</th>" printf "<th style=\"font-size:12px\" bgcolor=#D0ECE7>USE%</th>" printf "</tr>" printf "<tr>" printf "<td>1</td>" printf "<td>f</td>" printf "<td>5</td>" printf "</tr>" printf "<tr>" printf "<td>fg</td>" printf "<td>fgh</td>" printf "<td>t2</td>" printf "</tr>" printf "</table>" printf "</td>" printf "<td width="30">" printf "<table width="100" border="1" cellspacing="0" cellpadding="1">" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#7FB3D5 align=center colspan="3">AFTER_USAGE</th>" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#D6EAF8>USED</th>" printf "<th style=\"font-size:12px\" bgcolor=#D6EAF8>AVAILABLE</th>" printf "<th style=\"font-size:12px\" bgcolor=#D6EAF8>USE%</th>" printf "</tr>" printf "<tr>" printf "<td>Fvfev</td>" printf "<td>kjhkj</td>" printf "<td>kjgfhkg</td>" printf "</tr>" printf "<tr>" printf "<td>fbghvg</td>" printf "<td>gcfv</td>" printf "<td>hfjghj</td>" printf "</tr>" printf "</table>" printf "</td>" printf "</tr>" printf "</table>" } END { print "</table>" }' printf "</body>\n</html>\n" ) | /usr/sbin/sendmail $MailTO
  10. Hello everyone, I am trying to make my first website and have been going through some javascript examples on W3S to learn how to make a website more interactive. I have been looking at the code for modal login and signup forms found here: https://www.w3schools.com/howto/howto_css_login_form.asp and here: https://www.w3schools.com/howto/howto_css_signup_form.asp The HTML and CSS are easy enough to understand I think, but I seem to be having some trouble with the JS aspect of the tutorials. What I have done is simply add both forms to an HTML document, linked to the styling and that seems to be working fine. The problem is when I click outside of the form the display for the modal forms should be set to none by the javascript code but this only works for one button. I have been able to rearrange some of the code so the second button works but then the first button wouldn't work. I have the code listed below. I've been trying this for a few days and would really like some help. Thanks in advance. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website3</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="login.css"> </head> <body> <div id="outerMain"> <div id="main"> <header> <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button> <button onclick="document.getElementById('id02').style.display='block'" style="width:auto;">Sign Up</button> <div id="id01" class="modal"> <form class="modal-content animate" action="/action_page.php"> <div class="imgcontainer"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span> <img src="logo.png" alt="Avatar" class="avatar"> </div> <div class="container"> <label><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <input type="checkbox" checked="checked"> Remember me </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> </div> </form> </div> <div id="id02" class="modal"> <form class="modal-content animate" action="/action_page.php"> <div class="imgcontainer"> <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span> </div> <div class="container"> <label><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <label><b>Repeat Password</b></label> <input type="password" placeholder="Repeat Password" name="psw-repeat" required> <input type="checkbox" checked="checked"> Remember me <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p> <div class="clearfix"> <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button> <button type="submit" class="signupbtn">Sign Up</button> </div> </div> </form> </div> <script src="scripts.js"> </script> </header> <section> <center><img src="centerimg.png" alt=""></center> </section> </div> </div> <footer> <center>HERE IS THE FOOTER!!</center> </footer> </body> </html> Javascript: var login = document.getElementById('id01'); var modal = document.getElementById('id02'); console.log(login); console.log(modal); if(login == document.getElementById('id01')){ console.log(login); window.onclick = function(event) { if (event.target == login) { login.style.display = "none"; } }; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }; CSS: html,body{ height: 100%; } #outerMain { min-height: 100%; } #main{ overflow: auto; padding-bottom: 100px; background-color: green; } header{ background-color: blue; } /* Full-width input fields */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* Set a style for all buttons */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } /* Extra styles for the cancel button */ .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /* Center the image and position the close button */ .imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } .container { padding: 16px; } span.psw { float: right; padding-top: 16px; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button (x) */ .close { position: absolute; right: 25px; top: 0; color: #000; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: red; cursor: pointer; } /* Add Zoom Animation */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } }
  11. how to link another page using id

    Hello folks, i want to link the page from to another page ex: In my footer column, i've 5 types of products but when i click those products it links to product.html page.Actually In that product page there 5 no of products are listed. when i click the product from index page.I want exact header location for the product.. Thanks in advance
  12. I have created some js file to change the height of my header when a user scrolls through it. The goal is that the header starts at 90% of the window height (90vh in css) when the page is loaded and it shrinks down to 80px when a user starts scrolling down (if the user goes back to the top of the page it will again grow to 90%). Also I want a gif playing in the back behind the header. The code works, but when you scroll down/up it seems to be lagging, but I would like it to fluently do these actions. Can anyone can give me some hints on how to improve the speed? Here is my code for these actions: HTML <html> <body> <div id="header-back" class="col12"></div> <div id="header" class="col12"></div> <div id="main" class="col12"></div> </body> </html> CSS /****** GRID VIEW ******/ [class*="col"] { width: 100%; } @media only screen and (min-width: 850px) { .col1 {width: 8.33%;} .col2 {width: 16.67%;} .col3 {width: 25.00%;} .col4 {width: 33.33%;} .col5 {width: 41.67%;} .col6 {width: 50.00%;} .col7 {width: 58.33%;} .col8 {width: 66.67%;} .col9 {width: 75.00%;} .col10 {width: 83.33%;} .col11 {width: 91.67%;} .col12 {width: 100.00%;} .col {width: auto;} } * { font-family: Trebuchet MS; border: 0px solid black; box-sizing: border-box; } body { width: 100vw; min-height: 100vh; margin: 0; } /* HEADER */ #header { height: 90vh; min-height: 80px; max-height: 90vh; background-color: rgba(30,30,30,0.8); position: fixed; top: 0; left: 0; box-shadow: 0 0 15px rgb(0,0,0); z-index: 2; } #header-back { height: 90vh; min-height: 80px; max-height: 90vh; position: fixed; top: 0; left: 0; z-index: 1; background-image: url("https://media.giphy.com/media/wyBcwFyH2FpO8/giphy.gif"); background-position: bottom left; background-size: cover; } /* MAIN */ #main { min-height: 100vh; padding-top: 90vh; background-color: rgb(230,230,230); } Javascript // change header size on scroll $(document).ready(function(){ // variables var vh90 = $(window).height()*(9/10); var height, color, opacity; // control height of header on scroll $(window).scroll(function(){ height = vh90 - $(window).scrollTop(); opacity = 1 - ( (height-80) / vh90 ) * 0.2; color = "rgba(30,30,30," + opacity + ")"; $("#header").css({"height": height, "background-color": color}); $("#header-back").css({"height": height}); }); }); I have created a jsfiddle to show my idea, but in the fiddle it seems to be working fluently (I used another gif, but I don't think this is the problem because this gif gets loaded at the start and doesn't really go away?)
  13. Hello buddy...! how can someone hide image preview/post snippet on Contempo new blogger theme on homepage for mobile view just like THIS BLOG mobile view.? Need it to show only Post title.. Regards...
  14. Replacing HTML in a web page

    Hi all. Not been here for a while but I'm now in need of some help. I'm trying to understand what and how to replace some code in a squeeze page. the code i'm trying to replace with new is because I have found the page is being spammed by a spam bot and I have new code to add a capcha addition to the sequence which should stop it. The page is hosted, along with lots more, at Hostgator, the code comes from I-Contact form builder. I have it saved on my desktop. The page code, currently, looks like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Secrets to professional dog training</title> <meta name="description" content="Comprehensive website detailing the secrets that professional dog trainers use to get dogs to behave just the way they wish."> <meta name="keywords" content="dog,dogs,training,dogtraining,secrets,professional dog training,dog behaviour,train your dog."> <meta name="robot" content="index,follow"> <meta name="copyright" content="Copyright &copy; 2012 my-dogtrainingsecrets. All Rights Reserved."> <meta name="generator" content="www.onlinemetatag.com"> <!-- MetaTags - Online Meta Tag http://www.onlinemetatag.com --> <!-- Create your meta tag and increase your website position on search engines! --> <style type="text/css"> .auto-style25 { background-color: #FFFFFF; } .auto-style35 { text-align: center; font-family: Verdana; font-weight: 700; font-style: italic; font-size: medium; } .auto-style36 { font-style: normal; font-weight: normal; } .auto-style37 { text-align: center; font-size: x-small; } .auto-style38 { border: 1px solid #000000; text-align: center; background-color: #FFFFE8; } .auto-style39 { text-align: left; } .auto-style40 { font-size: x-small; } </style> </head> <body leftmargin="190" topmargin="70" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" alink="#00ffff" link="#0000ee" marginheight="0" marginwidth="0" vlink="#551a8b"> <center> <p style="margin-top: 0pt; margin-bottom: 0pt;">&nbsp;</p> </center> <table style="text-align: left; margin-left: auto; margin-right: auto; width: 890px; height: 592px;" border="12"> <tbody> <tr> <td> <center> <p style="margin-top: 0pt; margin-bottom: 0pt;" align="center"><font style="background-color: rgb(255, 255, 255); font-size: 21pt;" face="Impact">&nbsp;Need to Train Your Dog?&nbsp; </font> </p> <font color="#000000"> </font> <p style="margin-top: 7px; margin-bottom: 10px;" align="center"><font color="#000000"><font style="font-size: 32pt;" face="Impact">"Learn How to Train Your Dog Like a Professional in No Time At All"</font></font></p> </center> <table class="auto-style25" style="width: 669px; height: 348px;" align="center" cellpadding="7"> <tbody> <tr> <td valign="top"> <table style="width: 90%;" align="center"> <tbody> <tr> <td class="auto-style35" style="width: 592px;" valign="top"> <font color="#000000" face="Verdana, Arial, Helvetica"> <strong>"That's right. You Too Can Learn To Train Your Dog To Be As Obedient as a Crufts Champion. This <big style="font-weight: bold; color: rgb(255, 0, 0);">Free!</big> Report will Show You How!"<br> <br> </strong> <span class="auto-style36">Simply enter your primary email address in the form<br> below to <strong>get instant access</strong>...<br> </span><strong><br> </strong><strong> </strong> <table style="width: 90%;" class="auto-style25" align="center"> <tbody> <tr> <td class="auto-style25"> <img src="images/s3-green_l.png" style="float: right;" height="129" width="120"></td> <td class="auto-style38" style="width: 257px;"> <form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup1839" accept-charset="UTF-8" onsubmit="return verifyRequired1839();"><input name="redirect" value="http://my-dogtrainingsecrets.com/articles/how-to-train-your-dog-quickly-and-effectively/" type="hidden"> <input name="errorredirect" value="http://my-dogtrainingsecrets.com/articles/how-to-train-your-dog-quickly-and-effectively/" type="hidden"><input name="listid" value="44525" type="hidden"><input name="specialid:44525" value="CUIP" type="hidden"><input name="clientid" value="871932" type="hidden"><input name="formid" value="3813" type="hidden"> <input name="reallistid" value="1" type="hidden"><input name="doubleopt" value="0" type="hidden"> <table class="signupframe" border="0" cellpadding="5" cellspacing="0" width="260"> <tbody> <tr> <td valigh="top" class="auto-style39" style="width: 101px;">First Name </td> <td align="left"> <input name="fields_fname" type="text"></td> </tr> <tr> <td aligh="top" class="auto-style39" style="width: 101px;"> <span class="required">*</span> Email </td> <td align="left"> <input name="fields_email" type="text"></td> </tr> <tr> <td style="width: 101px;"> </td> <td class="auto-style40">* = Required Field</td> </tr> <tr> <td style="width: 110px;"> </td> <td><input name="Submit" value="Get Instant Access" type="submit"></td> </tr> </tbody> </table> </form> <script type="text/javascript"> var icpForm1839 = document.getElementById('icpsignup1839'); if (document.location.protocol === "https:") icpForm1839.action = "https://app.icontact.com/icp/signup.php"; function verifyRequired1839() { if (icpForm1839["fields_email"].value == "") { icpForm1839["fields_email"].focus(); alert("The Email field is required."); return false; } return true; } </script></td> <td class="auto-style25"> <img src="images/s3-green_r.png" style="float: left;" height="129" width="120"></td> </tr> </tbody> </table> <br> <table style="width: 63%;" align="center"> <tbody> <tr> <td> <img src="images/nospaming.png" height="17" width="40"></td> <td class="auto-style37">Your privacy is protected. Your information will never be shared.&nbsp; We hate spam too! </td> </tr> </tbody> </table> <br> </font></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html> The Code I'm trying to add has 2 versions. I think the long one is meant to be posted as HTML on a web page. The short version is: <script type="text/javascript" src="//app.icontact.com/icp/core/mycontacts/signup/designer/form/automatic?id=102&cid=871932&lid=7416"></script> The long version is: <script type="text/javascript" src="//app.icontact.com/icp/static/form/javascripts/validation-captcha.js"></script> <script type="text/javascript" src="//app.icontact.com/icp/static/form/javascripts/tracking.js"></script> <link rel="stylesheet" type="text/css" href="//app.icontact.com/icp/static/human/css/signupBuilder/formGlobalStyles.css"> <style type="text/css" id="signupBuilderAdvancedStyles"> </style> <style type="text/css" id="signupBuilderStyles"> #ic_signupform .elcontainer { background: #ffffff; text-align: left; max-width: 300px; padding: 10px 10px; border-radius: 0px; border: 1px solid #000000; font-size: 12px; color: #226699; font-family: arial; } #ic_signupform .elcontainer.center-aligned .formEl { margin-right: auto; margin-left: auto; } #ic_signupform .elcontainer.right-aligned .formEl { margin-left: auto; } #ic_signupform .form-header { display: none; background: #ffffff; margin-top: -10px; margin-left: -10px; margin-right: -10px; margin-bottom: 10px; /* using padding on purpose */ padding-top: 30px; padding-right: 10px; padding-bottom: 30px; padding-left: 10px; border-radius: calc(0px - 1px) calc(0px - 1px) 0 0; text-align: center; font-size: 150%; color: #333333; border-bottom: 1px solid #dddddd; } #ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-input label, #ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-dropdown label, #ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-radio h3, #ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-checkbox h3, #ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-input label, #ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-dropdown label, #ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-radio h3, #ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-checkbox h3 { width: 30%; } #ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-radio h3, #ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-checkbox h3, #ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-radio h3, #ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-checkbox h3 { line-height: 3em; } #ic_signupform .elcontainer.tight.inline-label-left .formEl.fieldtype-radio h3, #ic_signupform .elcontainer.tight.inline-label-left .formEl.fieldtype-checkbox h3, #ic_signupform .elcontainer.tight.inline-label-right .formEl.fieldtype-radio h3, #ic_signupform .elcontainer.tight.inline-label-right .formEl.fieldtype-checkbox h3 { line-height: 2em; } #ic_signupform .elcontainer.generous.inline-label-left .formEl.fieldtype-radio h3, #ic_signupform .elcontainer.generous.inline-label-left .formEl.fieldtype-checkbox h3, #ic_signupform .elcontainer.generous.inline-label-right .formEl.fieldtype-radio h3, #ic_signupform .elcontainer.generous.inline-label-right .formEl.fieldtype-checkbox h3 { line-height: 4em; } #ic_signupform .elcontainer.inline-label-left .formEl input[type="text"], #ic_signupform .elcontainer.inline-label-left .formEl select, #ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-radio .option-container, #ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-checkbox .option-container, #ic_signupform .elcontainer.inline-label-right .formEl input[type="text"], #ic_signupform .elcontainer.inline-label-right .formEl select, #ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-radio .option-container, #ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-checkbox .option-container { width: 70%; } #ic_signupform .elcontainer.hidden-label .formEl.required:before { color: #000000; } #ic_signupform .elcontainer .formEl { font-size: 1em; } #ic_signupform .elcontainer .formEl.fieldtype-input label, #ic_signupform .elcontainer .formEl.fieldtype-dropdown label, #ic_signupform .elcontainer .formEl.fieldtype-radio h3, #ic_signupform .elcontainer .formEl.fieldtype-checkbox h3 { font-size: 100%; font-weight: bold; color: #226699; } #ic_signupform .elcontainer .formEl.fieldtype-input input[type="text"], #ic_signupform .elcontainer .formEl.fieldtype-dropdown select { background-color: #ffffff; border: 1px solid #666666; border-radius: 0px; } #ic_signupform .elcontainer .formEl.fieldtype-input input[type="text"], #ic_signupform .elcontainer .formEl.fieldtype-dropdown select, #ic_signupform .elcontainer .formEl.fieldtype-radio label, #ic_signupform .elcontainer .formEl.fieldtype-checkbox label { font-size: 100%; } #ic_signupform .elcontainer .formEl input[type="text"]::-moz-placeholder { color: #bdbdbf; font-family: inherit; } #ic_signupform .elcontainer .formEl input[type="text"]::-webkit-input-placeholder { color: #bdbdbf; font-family: inherit; } #ic_signupform .elcontainer .formEl input[type="text"]:-ms-input-placeholder { color: #bdbdbf; font-family: inherit; } #ic_signupform .elcontainer .formEl input[type="text"], #ic_signupform .elcontainer .formEl select, #ic_signupform .elcontainer .formEl .option-container label { color: #000000; font-family: inherit; } #ic_signupform .elcontainer.inline-button .submit-container { display: inline-block; box-sizing: border-box; right: -.5em; padding: 0 1em 0 0; position: relative; vertical-align: bottom; margin-bottom: 1em; } #ic_signupform .elcontainer.inline-button.tight .sortables { margin-bottom: -.5em; } #ic_signupform .elcontainer.inline-button .sortables { margin-bottom: -1em; } #ic_signupform .elcontainer.inline-button.generous .sortables { margin-bottom: -1.5em; } #ic_signupform .elcontainer .submit-container { text-align: center; } #ic_signupform .elcontainer .submit-container input[type="submit"] { background: #ffffff; border: 1px solid #666666; border-radius: 0px; line-height: 1em; padding: 9px 53px; color: #666666; font-size: 100%; font-family: inherit; width: auto; }</style> <form id="ic_signupform" captcha-key="6Leg3ykTAAAAAOl-32RMwHSsbwyZA5j84VGnmfnV" captcha-theme="light" method="POST" action="https://app.icontact.com/icp/core/mycontacts/signup/designer/form/?id=102&cid=871932&lid=7416"><div class="elcontainer tight inline-label-right left-aligned inline-button"><div class="form-header"><h3>Form Heading</h3></div><div class="sortables"><div class="formEl fieldtype-input" style="display: inline-block; width: 100%;" data-validation-type="1" data-label="First Name"><label>First Name<span class="indicator required">*</span></label><input placeholder="" name="data[fname]" type="text"></div><div class="formEl fieldtype-input required" style="display: inline-block; width: 100%;" data-validation-type="1" data-label="Email"><label>Email<span class="indicator required">*</span></label><input placeholder="" name="data" type="text"></div><div class="formEl fieldtype-checkbox required" dataname="listGroups" style="display: none; width: 100%;" data-validation-type="1" data-label="Lists"><h3>Lists<span class="indicator required">*</span></h3><div class="option-container"><label class="checkbox"><input alt="" name="data[listGroups][]" value="44525" checked="checked" type="checkbox">My-dogtrainingsecrets.com</label></div></div><div class="submit-container"><input value="Submit" class="btn btn-submit" type="submit"></div></div><div class="hidden-container"></div></div></form><img src="//app.icontact.com/icp/core/signup/tracking.gif?id=102&cid=871932&lid=7416"/> The page can be viewed at http://www.my-dogtrainingsecrets.com I really am lost as HTML is not my forte so I could do with some help to understand and implement . Look forward to hearing from someone soon. Thanks J Morris UK.
  15. This is another strategy question. Multiple answers are welcome. What is written in present tense should be thought of as future, not yet realized activity. BACKGROUND: I have constructed a form whose intended purpose is to create chunks of data including text, links, and images that can be entered into a MySQL database for both immediate and future use. For the moment, I am only concerned about their immediate use. From the database these same chunks of data are retrieved and entered into an HTML template that serves as the backbone for an email insert that is, in fact, a weekly newsletter that can be viewed directly in one's mailbox or viewed on line should the insert fail. The mail insert is then distributed using PHPMailer that takes advantage of an assembled list of subscribers stored in the same database. Based on previous experience I believe that I am well able to handle this routine except for one hitch -- the treatment of the HTML data. MY DILEMMA: In the form are <textarea> elements that I intend to fill with a combination of plain text, HTML, and CSS styling attributes. That the HTML does not render as anything but the code itself is not a cause for concern on my part. Rather, I am bothered about how to send this data to the remote server. Now, I have been taught to filter and sanitize $_POST variable data as it is received and before processing. This time, however, I am sending the data to myself, and what will be generated and sent to my subscribers will also be generated by me. Do I even need to worry how about filtration and sanitation when I am both the source and the receiver of the data? Further, it is my understanding that MySQL is indifferent how the data is received, and that it will automatically return data in the same format that it is received. Am I making a big ado about nothing? By the way, it is not just a matter of filtration and sanitization. Take, for example, the following script used to process form data on the same page that it is entered. <form id="sevengates" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>">
  16. bad CSS and HTML

    Hello, My home page has Sticky Notes and they keep affecting my Top Menu, making the Top Menu look like Sticky Notes, but without content, just top menu’s name in it. I believe that there is something wrong with my CSS (I am not a pro at HTML, just copy & paste stuff, though some images and texts have been added). Second, on hover sticky notes are underlined and that is not supposed to happen. I love my sticky notes, they look pretty good, I spent a lot of effort on making them look good but still cannot make them being friendly to my Top Menu, as well as to the Side Modules. Sticky notes turn all my menus into a real mess (see images attached). Images of my problem are in the attachment. Any help ideas are much appreciated Thanks in advance
  17. Hi everyone, I try to convert an XML file to a HTML page but nothing is displayed. in the following, i put the XML code, the xslt code and the HTML page. Thank you for your help. the XML code <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="fg.xsl" ?> <cuimodel> <window id='window1'> <div> <label id='label1'> searchPreference </label> <label id='label12'> seeFirst </label> <combobox id='CB1' name='criteriaCB'> <item>promotions</item> <item>BestRated </item> </combobox> </div> <div> <label id='label2'> mon </label> <label id='label21'> second </label> <combobox id='CB2' name='DispLayout'> <item>GridLayout</item> <item>listlayout</item> </combobox> </div> <div> <label id='label13'> Preference </label> <label id='label122'> see </label> <combobox id='CB3' name='CT'> <item>HighContrast</item> <item>LowContrast</item> </combobox> </div> <button>cancel</button> <button>ok</button> </window> </cuimodel> the XSLT code <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <xsl:for-each select="div"> <xsl:for-each select="label"> <label> <xsl:value-of select="."/> </label> <select> <xsl:for-each select="combobox"> <option> <xsl:value-of select="item"/> </option> </xsl:for-each> </select> </xsl:for-each> <xsl:for-each select="button"> <button> <xsl:value-of select="."/> </button> </xsl:for-each> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet> and the HTML page
  18. Local files

    On my computer I've never been able to get an HTML file (opened locally on microsoft edge, not a server) to open any local files. These files are files such as .ogg, .mp3, .js, .css, and .xml. I'm sure I've written the directories correctly. Are there any other steps that I need to take?
  19. On my computer I've never been able to get an HTML file (opened locally on microsoft edge, not a server) to open any local files. These files are files such as .ogg, .mp3, .js, .css, and .xml. I'm sure I've written the directories correctly. Are there any other steps that I need to take?
  20. Please Provide me Book or Link which Cover the Following Topics: 1. HTML/HTML5 a. HTML Page design using DIV based layout (no tables) b. META Tags c. Viewport d. HTML5 Page design using &lt;header>, <footer>, <article>, <section> and <div> 2. CSS a. Styling of elements using CSS <b>b. CSS properties – float, align, background, margin, padding, position, width, height c. Pseudo classes d. How to override CSS properties</b> e. Inline, embedded and external CSS <b>3. JavaScript a. DOM Manipulation i. Change content of the DIV based on some event ii. Populate data inside a DIV using AJAX iii. Show/Hide Elements b. Event handlers c. Timer functions – setTimeOut, setTimeInterval d. AJAX and JSON e. Cookies management f. Debugging using Browser Console g. JavaScript/CSS magnification </b> Please advise me any link for the topics of above links, or are there any software houses in Dubai who suggest me with the respective resolution. Please reply asap.
  21. Menu bar help

    Hi, I recently codded a html im kinda new i need help by getting a better stylish nav bar or menu bar here is the coding. Could you please tell me what to do or just copy my codding make it the same but have a menu or nav bar. For any proposes this is my website - http://jackaust.cf/ i also have all the htmls like index about and more. index.html <html> <head> <title>Jackaust | Home </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <body link="white" link="white"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>Welcome People To Jackaust Official Website!</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> Welcome to my website it took ages to make through html finally its done! </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> about.html <html> <head> <title>Jackaust | About </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>About Me</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> I'm Jackaust and I make YouTube videos and play alot of games! </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> videos.html <html> <head> <title>Jackaust | Videos </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>Videos</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> <li><a href="https://www.youtube.com/channel/UCMYDsxDPlFPEk7UKGhiKDiw"><img src="IMG/photo.jpg" alt=""><span style="position:relative;bottom:20px;"></span></a></li> These are my some of my YouTube Videos </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Downloads.html <html> <head> <title>Jackaust | Home </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>Here you can download items.</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> Nouthing to download </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
  22. Border and Picture problem

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Page</title> <link rel="stylesheet" href="main.css"> </head> <body> <header> <div class="container"> <h1 class="title">My Personal Page</h1> <nav class="links"> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> </nav> </div> </header> <div class="clear"></div> <div class="container"> <div class="picture "> <img src="https://s-media-cache-ak0.pinimg.com/originals/e5/95/14/e59514c89d530660923148bad789ef67.jpg" alt=""> </div> </div> <div class="img2"></div> </body> </html> *{ margin:0; padding:0; } .container{ width:960px; margin:0 auto 0 auto; } .links{ float:right; padding: 20px; background-color: #737373; } a{ color:white; text-decoration: none; margin-right:10px; } .title{ display:inline-block; color: #9d9d9d; font-family: Georgia,"Times New Roman",Times,serif; } header{ background-color: dimgray; padding:20px 0 50px 0 ; margin-bottom:30px; } .clear{ clear: both; } .picture{ border:1px solid black; padding:5px; } i had this problem before where the picture wont stay in the border , but i forgot how i fixed it the first time .can someone help
  23. Hello, I'm currently undertaking a college course and we need to design a website, W3Schools is one of our resources so I thought I'd ask a question here. I was hoping to create - on the frontpage of my website - a section in which my Tumblr blog was shown, looking on Google there is an old set of instructions (that I can see) that direct you to getting the HTML from Tumblr so you can have your blog on your website. However, the HTML no longer seems to be on Tumblr to make your blog appear. I was wondering if anyone in the W3Schools world may be able to help me here? My Tumblr page is - http://villordsutch.tumblr.com/ Thank you
  24. Hi, I am going through bootstrap 4 alpha version. But when I tried to create a simple modal I found that it doesn't work in my browser. Can anyone find out what is wrong I am doing? The problem is fixed. It was causing problem because of incorrect data-target attribute. <!DOCTYPE html> <html lang= "en-US"> <head> <meta charset= "utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name= "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit= no"/> <title> . Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <div class= "container"> <div class= "row"> <div class= "col-12"> <h1 class= "alert-info">Live Demo</h1> <div class= "w-100"></div> <button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#liveModal"> Go Live </button> <div class= "modal fade" tabindex="-1" id= "liveModal" role= "dialog" aria-labelledby= "liveModalLabel"> <div class= "modal-dialog" role="document"> <div class= "modal-content"> <div class= "modal-header"> <h5 class= "modal-title">Modal Title</h5> <button class= "close" type="button" data-dismiss= "modal" aria-label= "Close"> <span aria-hidden= "true">×</span> </button> </div> <div class= "modal-body"> <p> Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. </p> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body> </html>
  25. The FORM Attribute

    QUESTION ONE: When using the form attribute with a non-form element to redirect the contents of the non-form element to the form element, will confusion be created, if the non-form element is included in a form element different from the form element that contains the type='submit' input element? QUESTION TWO: Are fieldset elements an exception in this regard? Or, are they, too, treated as non-form elements.
×