Search the Community
Showing results for tags 'html'.
-
Hi, I'm trying to implement a Server Side Event connection between a Node.js backend and the frontend with EventSource. It works perfectly... as long as I turn off my antivirus. As soon as it's on, it's silently blocking incoming responses. It doesn't matter if I try it on localhost or my Heroku VM. It just doesn't work. However, the example provided by W3Schools works: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse What's the magic? I've looked at the HTTP headers and replicated them... but to no avail. I offered a bounty on Stack Overflow for a solution: https://stackoverflow.com/questions/63716882/server-side-events-blocked-by-antivirus
-
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>
-
Hello everyone I am doing an IOT project in which is am successfull to send my microcontroller data to MySQL. I am receiving data in 0 and 1. Now what i want to do? I just to create a toggle switch that will ON when data in database is 1 and when data is 0 it remains OFF. secondly when i click the switch it should OFF in case it is already ON and a data 0 should be sended to database. same in case of OFF to ON. Please help me You can also use Javascript.
-
So my mom blogs on a norwegian blog site. She got loads of readers there, and wanted to make a website. I finished the website and was quite proud, but there was one problem... I had to automaticcly add her blog post to the website. So everytime she uploads a new post, I have to go into the codes and put it in manually.. Is there a way to do this automaticcly? I have coded the website with HTML and CSS. Any help would be appreaciated!!
-
Can I use a two word keyword? Like "reproductive rights" or "socialist feminist"?
-
<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.
-
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
-
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
-
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>
.thumb.png.05cd81aa2b77ce7886538bfbb20be92f.png)
-
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
-
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.
-
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 -- -
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>
-
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
-
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!
-
من میخوام وقتی خودم سایت میزنم و بقیه اون رو 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 .....
-
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
-
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)">❮</a> <a class="next" onclick="plusDivs(1, 0)">❯</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)">❮</a> <a class="next" onclick="plusDivs(1, 1)">❯</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>
-
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. -
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
-
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.
-
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.
-
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)">❮</a> <a class="next" onclick="plusSlides(1, 0)">❯</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)">❮</a> <a class="next" onclick="plusSlides(1, 1)">❯</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)">❮</a> <a class="next" onclick="plusSlides(1, 2)">❯</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
-
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.
-
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
.png.7b50d499c05fc80957574f57cdf94e4f.png)
