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

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 841 results

  1. Can I use a two word keyword? Like "reproductive rights" or "socialist feminist"?
  2. <link href="styles.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="http://localhost/favicon/browserIcon"> <title>Altraz</title> HTML ^ Full code: <!DOCTYPE html> <html> <head> <link href="styles.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="http://localhost/favicon/browserIcon"> <title>Altraz</title> </head> <body> <h1>Altraz</h1> </body> </html> body { background-color: dimgrey; } CSS ^ Whenever I run this, the background is still white.
  3. HI, Can I take header and article tag inside a section. I just want to know if my HTML code is correct, please check my code below <section> <header>What happened on this day in History?</header> <article> <h2>A heading here</h2> <p>Some additional information here</p> </article> </section> <section> <header>What happened on this day in History?</header> <article> <h2>A heading here</h2> <p>Some additional information here</p> </article> </section>
  4. Hey guys, i've got a webpage which is password safe by htaccess, but i want to change a few things and i'd like to hear your opinions of how i should execute it at the end. What i've got is: you enter the webpage then you have 1 account to login with via htaccess and then you're on the webpage. What i want is: Something more safe than htaccess. That i can add more users with where i can see when they were last online etc. And idk if htaccess is bruteforce safe but i also need that. My plan was to create a landing page with a login mask connected to an sql database, where all the accounts are managed. Plus the landing page will be with google recaptcha or something like that. What i need to know is, is this the best way to handle all this or do you guys recommend something else? Much appreciated Greetings, Merdo
  5. I created a mobile navigation menu which display navigation icons in the bottom of the mobile screen. I linked google icons page where I'm taking the icons. All 5 icons are displaying in the bottom of screen, however now I'm stuck and don't have an idea how to add links of pages in the menu bar. I mean there is icon with three bar for main menu, like I want to add contact.html, blog.html, images.html in that icon. I mean whenever user click on the three bar it should display the links of these pages where user can click on of those and read. I appreciate your help. Here is the html code here is the CSS code
  6. I want to add image gallery to my blog. I want the background color of images to be #dcdcdc. when i change the background color, all the images appear to be in a single image like this(in the picture attached below) i want to add space between two images. how can i give space between two images in CSS image gallery. please provide me the code. Any help would be appreciated. <!DOCTYPE html> <html> <head> <style> div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> </head> <body> <div class="gallery"> <a target="_blank" href="img_5terre.jpg"> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="img_lights.jpg"> <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="img_mountains.jpg"> <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html>
  7. So i have a table with both names and numerical values and I'm really struggling to figure out how to sort both. What do I need to modify in order for it to sort numbers as well? My table has 8 columns. function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("funds"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.rows; for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch= true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount ++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } I'm brand new to coding and loving it, any help would be greatly appreciated! Doug
  8. I want to create a smooth scrolling effect such that whenever someone clicks on the anchor tags, they move to the bottom without any abrupt jump. So far everything has worked for me but scroll-behavior property. Look at the code below: <!doctype html> <html> <body> <h1>Analystfriend.com</h1> <img src="/img/lighthouse.png" width="400" height="250"> <p scroll-behavior="smooth"><a href="https://www.itstheliar.wordpress.com">Analystfriend.com</a> is a website that provides its readers with a new perception of the topics of high importance.<a id="bnp-1"></a><a href="#np-1"><sup>[1]</sup></a> It is one of the most dynamic content driven non-organisational website at the moment.<a href="#ft-2"><sup>[2]</sup></a></p> <p>So if you're in search of a guider or finding a way to inculcate learning in your hobbies, then you're in the right place. All you need to do is to subscribe to our newsletter and <em>relax</em>.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc</p> <h2>Footnotes</h2> <strong>1)</strong> <a href="#bnp-1">^</a> <a href="https://en.m.wikipedia.org/wiki/Petr_Čech" id="np-1">Citation no. 1</a> <br> <strong>2)</strong> <a href="https://en.m.wikipedia.org/wiki/Gianluigi_Buffon" id="ft-2">Citation no. 2</a> </body> </html> See the scroll-behavior property in the first paragraph tag. What is wrong with it? Why it is not working? It is scrolling in the usual way of jumping.
  9. Greetings: I've recently taken over responsibility for managing the following website: Abacus Custom Painting. The prior webmaster is unavailable for consul. There are three site webpages on which three (in question) submission forms are embedded:Those pages are:1) Home Page: Note the "No Job Too Small... Get Your Free Estimate Today!" submission form. Visitors are encouraged to submit first name, last name, email address & phone number, and a brief description of needed work vis-a-vis this form. 2) 7 Things You Must Know Before Hiring a Painter Page: Note the "Get Your Free Estimate Today!" submission form. Visitors are encouraged to submit first name, last name, email address & phone number, zip-code, and a brief description of needed work vis-a-vis this form. 3) 5 Suggestions To Choose Paint Colors Page: Note the "Get Your Free Estimate Today!" submission form (same as above.)For the first two (2) site-pages and submission forms, could someone identify the code (in its entirety) which governs these two unique submission forms? My goal with posting this thread is to:1) better understand what specific script(s), even if remotely-hosted, is being invoked when a site visitor chooses to submit contact details through one or all of the above submission forms &2) understand exactly (step by step) which process or code edits/modifications are needed to ensure visitor-provided contact details are submitted/routed to an email address or other technology of my choosing.Thanks in advance --
  10. Fi2

    Fi2

    To make a simple information website for my partner's local chicken farm, I got one of those website builders where you're supposed to just upload a template and tweak the html/css a bit but now I think I have gotten way over my head on this one! I have messed with html and css some in the past, that's why I thought I could do this, but the template we love (because we don't have a lot of text) is built with/on bootstrap and I am not at all familiar with it! can't seem to find where to tweak to remove/replace the background images of the different sections of the template. I don't even know what question I should be asking right now (in technical terms) so I will just drop the code here and hope someone here will be kind enough to tell me what I need to do, and thanks in advance. To be clear, I am trying to replace the (building) images in the different containers/sections/backgrounds in the code below with our chicken images: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chozeq Farms</title> <!-- Strip http://www.templatemo.com/tm-482-strip --> <!-- load stylesheets --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style --> <link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style --> <link rel="stylesheet" href="custom.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div class="container tm-container"> <div class="row navbar-row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 navbar-container mynav"> <a href="javascript:void(0)" class="navbar-brand" id="go-to-top">Chozeq Farms</a> <nav class="navbar navbar-full"> <div class="collapse navbar-toggleable-md" id="tmNavbar"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#tm-section-1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#tm-section-2">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#tm-section-3">Trainings</a> </li> <li class="nav-item"> <a class="nav-link" href="#tm-section-4">Contact</a> </li> </ul> </div> </nav> <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar"> ☰ </button> </div> </div> <div class="tm-page-content"> <!-- #home --> <section id="tm-section-1" class="row tm-section"> <div class="tm-white-curve-left col-xs-12 col-sm-12 col-md-12 col-lg-7 col-xl-6"> <div class="tm-white-curve-left-rec"></div> <div class="tm-white-curve-left-circle"></div> <div class="tm-white-curve-text"> <h2 class="tm-section-header blue-text">About Us</h2> <p> Chozeq Farms is involved in the production of poultry meat, eggs, and processed and packaged poultry. Our farm is located in a serene rural environment and we strive to operate the best practices of poultry farming in order to offer the highest quality meat to our customers. </p> </div> </div> <div class="tm-home-right col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-6"> </div> </section> <!-- #home --> <!-- #vision --> <section id="tm-section-2" class="row tm-section"> <div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6"> <img src="img/XXX.jpg" alt="Image" class="img-fluid tm-img"> </div> <div class="tm-white-curve-right col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6"> <div class="tm-white-curve-right-circle"></div> <div class="tm-white-curve-right-rec"></div> <div class="tm-white-curve-text"> <h2 class="tm-section-header red-text">Our Vision</h2> <p>To provide top-quality white meat and egg protein within the most environmentally scrupulous conditions.</p> </div> </div> </section> <!-- #services --> <!-- #mission --> <section id="tm-section-3" class="row tm-section"> <div class="tm-white-curve-left col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6"> <div class="tm-white-curve-left-rec"> </div> <div class="tm-white-curve-left-circle"> </div> <div class="tm-white-curve-text"> <h2 class="tm-section-header gray-text">Our Mission</h2> <p class="thin-font">To impact, in the first instance, the local poultry industry, and evolve into a national and regional player, and to become a dominant force in the industry.</p> </div> </div> <div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6"> <img src="img/XXX.jpg" alt="Image" class="img-fluid tm-img"> </div> </section> <!-- #about --> <!-- #contact --> <section id="tm-section-4" class="row tm-section"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6 tm-contact-left"> </div> <div class="tm-white-curve-right col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6"> <div class="tm-white-curve-right-circle"></div> <div class="tm-white-curve-right-rec"></div> <div class="tm-white-curve-text"> <h2 class="tm-section-header green-text">Contact</h2> <p>We're available to take your orders and answer any of your enquires between the hours of 8:00 am to 5:00 pm (Monday - Friday) and 10:00 am to 4:00 pm (Saturday).</p> <h3 class="tm-section-subheader green-text">Our Address</h3> <address> Ibadan 200261, Oyo State-NG </address> <div class="contact-info-links-container"> <span class="green-text contact-info"> Tel: <a href="tel:+2348134865720" class="contact-info-link">+2348134865720</a></span> <span class="green-text contact-info"> Email: <a href="mailto:info@chozeqfarms.com" class="contact-info-link">info@chozeqfarms.com</a></span> </div> </div> </div> </section> <!-- #contact --> <!-- footer --> <footer class="row tm-footer"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <p class="text-xs-center tm-footer-text">Copyright © 2020 Chozeq Farms</p> </div> </footer> </div> </div> <!-- .container --> <!-- load JS files --> <script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) --> <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h --> <script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) --> <script src="js/jquery.singlePageNav.min.js"></script> <!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) --> <!-- Templatemo scripts --> <script> var bigNavbarHeight = 90; var smallNavbarHeight = 68; var navbarHeight = bigNavbarHeight; $(document).ready(function(){ var topOffset = 180; $(window).scroll(function(){ if($(this).scrollTop() > topOffset) { $(".navbar-container").addClass("sticky"); } else { $(".navbar-container").removeClass("sticky"); } }); /* Single page nav -----------------------------------------*/ if($(window).width() < 992) { navbarHeight = smallNavbarHeight; } $('#tmNavbar').singlePageNav({ 'currentClass' : "active", offset : navbarHeight }); /* Collapse menu after click http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click ----------------------------------------------------------------------------------------*/ $('#tmNavbar').on("click", "a", null, function () { $('#tmNavbar').collapse('hide'); }); // Handle nav offset upon window resize $(window).resize(function(){ if($(window).width() < 992) { navbarHeight = smallNavbarHeight; } else { navbarHeight = bigNavbarHeight; } $('#tmNavbar').singlePageNav({ 'currentClass' : "active", offset : navbarHeight }); }); /* Scroll to top http://stackoverflow.com/questions/5580350/jquery-cross-browser-scroll-to-top-with-animation --------------------------------------------------------------------------------------------------*/ $('#go-to-top').each(function(){ $(this).click(function(){ $('html,body').animate({ scrollTop: 0 }, 'slow'); return false; }); }); }); </script>
  11. For the past few days, I'm struggling with one Chart.js chart that I want to clip or mask with custom vector path. I was able to do something like what I want, but I think I'm missing something. The approach that I took is to create the chart in html (the traditional way, with html canvas ..etc) and then create a svg with the shape I want to cut off and then overlay the <canvas> and <svg> elements. This is what I was able to accomplish: js: var config = { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', fill: false, borderColor: "red", backgroundColor: "red", data: [ {x:23,y:57}, {x:43,y:67}, {x:143,y:167} ] }, { label: 'My Second dataset ', fill: false, borderColor: "blue", backgroundColor: "blue", data: [ {x:12,y:76}, {x:23,y:89}, {x:143,y:167} ] }] }, options: { title: { display: false, text: 'Chart.js Line Chart' } } }; window.onload = function () { var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); }; css: canvas { position: absolute; z-index: 0; } svg { position: absolute; z-index: 1; } body { background-color: white; } html: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <head> <title> My cutoff chart </title> </head> <body> <canvas id="canvas"></canvas> <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style> #clickHandler { pointer-events: all; } </style> <path id="ship" d="m 100.09542,69.20104 h -83.5475 v -0.41351 -0.41351 l -0.595313,0.0828 -0.595312,0.0828 -0.01659,-0.66146 -0.01659,-0.66146 -0.380288,0.12526 -0.380288,0.12526 -1.890519,0.007 -1.890518,0.007 -0.556877,-0.50403 -0.556878,-0.50403 v -0.38141 -0.38142 l 1.06532,-1.21026 1.065319,-1.21027 -0.09501,-0.28554 -0.09501,-0.28554 -1.433331,-0.20539 -1.433331,-0.20539 -0.859896,-0.13733 -0.859896,-0.13733 v -0.38353 -0.38353 l -1.220114,-0.57352 -1.220114,-0.57352 -0.737049,-1.01747 -0.73705,-1.01747 -0.8116695,-2.57755 -0.8116695,-2.57756 -0.3901093,-1.98437 -0.3901092,-1.98438 -0.1825245,-1.65364 -0.1825245,-1.65365 h 1.5141537 1.5141538 l 0.132161,-0.50538 0.132161,-0.50539 2.753486,-0.18768 2.753485,-0.18767 v -0.35283 -0.35282 l 0.307053,-0.6739 0.307053,-0.67391 h 1.904977 1.904977 l 1.193236,-0.16355 1.193236,-0.16355 0.365047,-0.8067 0.365045,-0.8067 1.190625,-0.37783 1.190625,-0.37784 4.034896,-0.1393 4.034896,-0.13929 v -0.30579 -0.30578 l 0.849273,-0.74523 0.849272,-0.74522 1.393399,-0.14381 1.393397,-0.14381 0.16044,-0.5055 0.160438,-0.5055 -0.328146,-0.39539 -0.328147,-0.39539 0.311142,-0.31114 0.311142,-0.31114 1.80399,-0.10194 1.80399,-0.10193 0.314769,-0.87049 0.314772,-0.87048 0.939179,-0.17619 0.939175,-0.17619 0.380341,-0.91029 0.380341,-0.91028 h 0.365017 0.365016 l 0.1606,-0.41852 0.160599,-0.41851 v -0.99569 -0.99568 l 0.522388,-0.47276 0.522386,-0.47275 0.668239,0.43784 0.668237,0.43785 0.02929,0.45692 0.02929,0.45692 -0.05502,0.66146 -0.05502,0.66146 0.224168,-0.21512 0.224168,-0.21513 0.410602,-2.16612 0.410601,-2.16613 0.712267,-0.34439 0.712266,-0.3444 0.157782,-0.62865 0.157778,-0.62864 0.372999,-0.14314 0.372997,-0.14313 v -1.46351 -1.46351 h 0.264583 0.264583 l 0.0013,1.91822 0.0013,1.91823 0.169696,2.94481 0.169696,2.9448 2.130634,0.12334 2.130634,0.12334 0.101764,0.30529 0.101767,0.3053 h 0.882353 0.882354 l 0.418512,0.1606 0.418516,0.1606 v 0.50086 0.50086 h 5.277839 5.277839 l 0.07997,-1.38907 0.07997,-1.38906 2.513542,-0.17857 2.513541,-0.17856 3.79988,-0.51512 3.799877,-0.51511 0.180554,-0.29215 0.180555,-0.29214 0.606329,-3.31745 0.606333,-3.31746 0.393073,-0.39307 0.393073,-0.39308 h 0.852265 0.852268 l 0.317889,-1.18854 0.317886,-1.18855 3.459062,0.10402 3.459061,0.10403 0.169617,0.16961 0.169614,0.16962 0.143208,5.34668 0.142968,5.34667 1.717418,0.1323 1.717416,0.13229 0.08401,0.52916 0.08401,0.52917 0.1346,0.39688 0.13459,0.39687 0.25994,-0.46302 0.25993,-0.46302 h 3.9273 3.92729 l 0.1523,0.39687 0.1523,0.39688 h 1.63278 1.63278 l 0.35148,-0.46302 0.35148,-0.46302 0.008,-0.46302 0.008,-0.46302 h 3.28946 3.28947 l 0.16795,0.52916 0.16795,0.52917 h 6.59675 6.59676 v -0.52917 -0.52916 h 3.30729 3.30729 v -0.75275 -0.75274 l 0.48385,-0.43788 0.48386,-0.43788 h 0.40118 0.40118 l 0.46944,0.51872 0.46945,0.51874 -0.12644,0.73804 -0.12643,0.73804 -0.19802,0.46302 -0.19802,0.46302 4.72466,-0.003 4.72466,-0.003 0.99752,-0.16487 0.99752,-0.16486 -0.1725,-0.91953 -0.17251,-0.91953 0.35298,-0.21815 0.35298,-0.21815 0.21107,0.13044 0.21107,0.13045 v 1.04272 1.04272 h 1.29052 1.29052 l 0.28495,-0.34335 0.28495,-0.34335 0.14065,-2.7655 0.14064,-2.76551 0.1645,-2.11667 0.16451,-2.11666 0.91522,-1.12448 0.91522,-1.12448 h 0.24687 0.24687 v 1.98437 1.98438 h 1.05833 1.05833 v 0.26458 0.26459 h -0.24701 -0.24701 l -0.0837,0.71713 -0.0837,0.71715 -0.66145,0.18252 -0.66146,0.18253 1.24115,0.0264 1.24116,0.0264 0.17453,0.28239 0.17452,0.28239 -0.55578,0.14534 -0.55579,0.14535 v 0.74612 0.74613 l -0.8599,0.0829 -0.85989,0.0829 v 1.19063 1.19062 l 0.85989,0.0829 0.8599,0.0829 v -0.66891 -0.66892 l -0.53658,-0.28716 -0.53658,-0.28717 0.15532,-0.25131 0.15532,-0.25132 h 1.0271 1.02711 l 0.15347,0.24832 0.15347,0.24832 -0.46859,0.28798 -0.46858,0.28797 0.66146,-0.0733 0.66145,-0.0733 0.0677,-1.71979 0.0677,-1.71979 0.14895,-0.64766 0.14894,-0.64766 0.24235,0.38307 0.24235,0.38308 0.004,2.26219 0.004,2.26219 0.3175,0.3175 0.3175,0.3175 h 0.47625 0.47625 v 0.64362 0.64363 l 0.5268,0.1672 0.52679,0.1672 0.26696,-0.16498 0.26695,-0.16499 v -0.52916 -0.52917 l 0.26458,0.16352 0.26458,0.16352 v 0.51 0.51 l 0.8599,0.35945 0.8599,0.35943 0.36113,0.43546 0.36113,0.43546 -0.18881,1.25917 -0.18881,1.25918 -0.23314,0.43567 -0.23314,0.43568 0.65613,0.16468 0.65613,0.16467 2.1e-4,0.45798 2.1e-4,0.45798 0.75188,1.5875 0.75189,1.5875 1.23054,1.91823 1.23055,1.91823 0.33246,0.037 0.33247,0.037 0.97177,-0.0577 0.97177,-0.0577 0.29431,0.54992 0.29431,0.54992 h 0.63653 0.63654 l 0.18667,-0.30203 0.18667,-0.30204 0.15967,-2.1242 0.15967,-2.1242 0.33073,-0.10935 0.33073,-0.10936 5.3e-4,2.20487 5.3e-4,2.20486 3.0196,0.0151 3.0196,0.0151 0.4194,0.34806 0.41939,0.34807 1.4e-4,0.16604 1.3e-4,0.16604 -2.40702,-0.0934 -2.40701,-0.0934 -0.29187,0.29186 -0.29174,0.29187 2.23573,0.0403 2.23573,0.0403 0.26458,0.0615 0.26458,0.0615 1.91823,0.0305 1.91823,0.0305 v 0.42473 0.42473 l 4.16719,-0.17789 4.16719,-0.17789 1.51081,-0.27919 1.51082,-0.27919 0.40741,0.15633 0.40741,0.15634 v 0.48438 0.48438 l -2.40439,2.50049 -2.4044,2.50049 -1.84101,2.24895 -1.841,2.24896 -1.31085,2.60364 -1.31085,2.60364 v 0.63751 0.6375 l 0.8599,0.0355 0.8599,0.0355 1.05833,-0.0538 1.05833,-0.0538 0.92604,0.63314 0.92605,0.63314 -0.0719,0.87537 -0.0719,0.87537 -0.45725,0.7761 -0.45726,0.77609 -1.35008,0.89689 -1.35008,0.89688 -1.9519,0.5409 -1.95188,0.5409 z m 33.00145,-39.6875 h 0.1323 v -0.13229 -0.13229 h -0.1323 -0.13229 v 0.13229 0.13229 z m 20.54212,-7.82802 0.22768,-0.14071 v -0.24897 -0.24897 h -0.39688 -0.39687 v 0.22049 0.22049 l 0.16919,0.16919 0.1692,0.1692 z" /> <rect id="bg" x="-1%" y="-1%" width="102%" height="102%"/> <mask id="myMask"> <use xlink:href="#bg" fill="white"/> <use xlink:href="#ship" fill="black" /> </mask> </defs> <use xlink:href="#bg" mask="url(#myMask)" fill="chocolate" fill-opacity="0.5"/> <use xlink:href="#ship" fill="none" id="clickHandler" style="fill:none; stroke-width:0.264583;stroke:black;"/> </svg> </body> Here is a working code pen. So far so good, but I wasn't able to align the chart and the cutout properly. The desired position of the visible part of the chart is inside the blue rectangle: As I said, I'm not sure that I took the best approach for achieving this effect. And to be honest, my knowledge in front-end development and graphical design (using .svg files) are very basic. Any help will be greatly appreciated Thanks in advance, Julian
  12. I really love this site. W3Schools is such a helpful site for people who work in SEO, Website building, Ecommerce and IT industries even for beginners!
  13. من میخوام وقتی خودم سایت میزنم و بقیه اون رو add to home screen میکنن هم اسم و تصویر داشته باشه هم تمام صفحه بشه. لطفاً لطف کنید کد این کار رو بگید. G translator (Persian => English) When I create a site myself and others add it to the home screen, I want it to have both a name and an image and a full page. Please tell, whats the story of them big puppys .....
  14. Hi guys I have uploaded a document with html and css in the file manager of my Wordpress blog. The html is the image of horse and the css is used to turn the horse into a galloping horse. Unfortunately, the code doesn't work on my blog as it does on codepen https://codepen.io/dannyku18/pen/yLYJXMV I think the connection between html and css is missing. How can I make this code work? Best, Daniele
  15. Top javascript projects for bginners with source code We have lots of free basic to advanced level JavaScript projects here. Here you will learn JavaScript step by step. If you are a teacher, there is a very good way, that from on you can download or copy sample mini or advanced JavaScript projects and teach your students very well because every javascript project has very good examples. Each JavaScript project here is category-based, such as calculators, converters, online tools, games, Random scripts, and more. Each JavaScript project for beginners will be able to use and enhance their own programming skills.There are sample projects, javascript mini projects, basic javascript projects, advanced javascript projects, 100+, and more list of javascript projects. Step-by-step video tutorial on how to download a JavaScript project source code or file usage on your webpage.
  16. I have changed the code, because it happens to me before with another code. The thing is my code is aparently ok but when you fill the form and send it the e-mail is not sent. Any idea, please? Thank you. I Attach the code and the html page. My web site is http://victorpan.com/contacto.html contacto.html correo.php
  17. Hello, I am struggling for days now, i want to use this template and my question is how can i reverse animation/transisition on close? In this example it gets terminated at the same moment when i click close and there is no transistion back. https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_animate many thanks in advance.
  18. I am not able to understand how to enter any other element under SVG. suppose if you have to put your form under the SVG CIRCLE then how you will do it. Or suggest any other idea how i can nest my form's input text field under SVG. I also want to know weather i can align any form's input field like we can align texts. please answere my questions.
  19. I am following the tutorial here, and I would like to add more than two slideshows on a page. I tried this: <h4>10 Shot Photo Challenge #1</h4> <div class="slideshow-container"> <div class="mySlides1"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_BlackAndWhite.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Contrast.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Emotion.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_FavoriteColor.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Misc.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Numbers.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Outside.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Rule_of_Thirds.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_StartingWithB.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_UpClose.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #2</h4> <br> <div class="slideshow-container"> <div class="mySlides2"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_happy.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_January.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2873.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2931.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2985.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2986.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3031.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3037.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3041.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_E3040.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #3</h4> <br> <div class="slideshow-container"> <div class="mySlides3"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0139.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0144.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0157.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0158.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0159.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0160.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0192.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0199.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0936.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0945.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div> <script> var slideIndex = [1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> This made 2 slideshows, but the third one didn't work. How can I get a third slideshow onto this webpage? ZIP file attached with all website files. 10shot.html is the file I am having trouble with. Alex's Website.zip
  20. Ian1000

    Ian

    I'm writing a website for a local organisation which has several different interest groups within it. Each of these groups has its own page, however some of the information they provide for members changes frequently. In order to save myself a lot of ongoing bother having to make all the changes for them, I'd like to have a <div> on each of these pages which has a 'contenteditable' attribute so that the organiser of the group can change parts of his/her own group's page, such as details of upcoming meeting or reviews of past meetings etc. However there needs to be a way of password protecting this via an 'Edit' button on each page to open a login popup so that only someone with the correct password for that page (the relevent group organiser) can do the editing. Each editable page needs to have its own unique password. Is this possible? In other words, if the password is correct for that page the 'contenteditable' attribute is set to 'true', but otherwise it's 'false'. I should add that I'm relatively new to web design, so I'll need a quite detailed explanation of how this can be done.
  21. I recently added darkmode.js to my website which works amazingly other than the fact that does not change the colour of the nav bar on my website if someone can help me that would be amazing
  22. Hello, I’m a beginner and I’m trying to link my html file with my css file. Mi css file is inside a folder called css, in the same folder that the html file. I’ve written in the head of my html file: <link rel=”stylesheet” type=”text/css” href=”css/styles”> But the thing is I can not change my tags background colors neither nav, neither footer, content… I don’t know what I’m doing wrong but maybe you can help with that. Thank you. estilos.css index.html
  23. Hi! So I am new to coding and I am just trying to make a small project for myself. All it is a button that when you press it, it plays randomly one of three sounds. Something is going wrong though and I can't figure out what, anyone know? <!doctype <!DOCTYPE html> <link rel="stylesheet" href="C:\Users\Owner\Google Drive\Code\Experiments\HTML-CSS-JAVASCRIPT\Random Sound\Code\Random Sounds.css"> <h1> Random Sounds </h1> <button id="press"> Press me! </button> <script> var num = 0 function pressed() { num = Math.floor(1 + 3 * Math.random()) if (num == 1) { var audio1 = new Audio('C:\Users\Owner\Google Drive\Code\Experiments\HTML-CSS-JAVASCRIPT\Random Sound\Sounds\OFFICIAL Somewhere over the Rainbow - Israel IZ Kamakawiwoʻole.mp3'); console.log('1') audio1.play() } else if (num == 2) { var audio2 = new Audio('C:\Users\Owner\Google Drive\Code\Experiments\HTML-CSS-JAVASCRIPT\Random Sound\Sounds\OFFICIAL Somewhere over the Rainbow - Israel IZ Kamakawiwoʻole.mp3'); console.log('2') audio2.play() } else { var audio3 = new Audio('C:\Users\Owner\Google Drive\Code\Experiments\HTML-CSS-JAVASCRIPT\Random Sound\Sounds\OFFICIAL Somewhere over the Rainbow - Israel IZ Kamakawiwoʻole.mp3'); console.log('3') audio3.play() } } press.onclick = pressed </script> cheers A
  24. Hello, I have been using W3 tutorials to create custom code elements on my weebly website. Lately I have been having issues with a code I created from two separate tutorials: image roll over and responsive size. The code is situated within a greater grid created with weebly's building tools. Image rollover and responsive size work in W3's try it editor, but on my website only the rollover works. On a full size window everything looks just fine (the bottom left is the custom coded element) but a slighter smaller window results in a slide bar to view the full image, because it will not scale down. On a phone-scaled window, the opposite happens and it doesn't scale up, appearing significantly smaller. Any help would be much appreciated!!! I have included images and the latest code I've tried to show what's happening. Thank you!!!!! <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; } </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front" width="720" height= "720"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"width="720" height= "720"> </div> </body> </html>
  25. Hello, I’m trying to learn how to créate a webpage on html. My first Project is my curriculum vitae. But wen I open the html browsers only show the alternative text (alt) but not the picture. I’ve tried with: Chrome, Explorer, Opera and Mozilla and none of them show the picture. So I probed with a very simple website, just with the image command. An I have the same problem, browsers don't show the image, they only show the alternative text. This is the html code: <htlm> <body> <img src="mario.jpeg" alt="Foto Mario"> </body> </html> And the picture name’s is mario.jpeg, and is jpeg format and in the same folder that the html file. I’ve try in my mobile phone and in a friend's computer, and the result is the same I attatche a screen shot below this If you can help me it would be great, THANK YOU!!!! consultaforo.zip
×
×
  • Create New...