Jump to content

Search the Community

Showing results for tags 'Css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 894 results

  1. Il Domandatore

    Why use em?

    On w3schools.com it's suggested use em instead of px because first it's relative and second it's static. I'm still confused; which is the improvement?
  2. Which is the best CSS unit relative for a site responsive?
  3. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow So I basically copied this whole thing but the css and js are externally because my school project requires it to be. When the website loads, it is supposed to display the first image in the slideshow. However, when I loaded it up with everything linked, it is just blank with no image shown. It makes me click one of the dots/one of the arrows to see an image. Can anyone help me fix? gallery.htmlgallery.cssgallery.js
  4. Hi guys, If you click on "AC-brytare" there will be som content on the right. I want this content (.tabcontent) to automatically scroll down using position: sticky; How come it does not work? Best, Anders <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css">* {box-sizing: border-box} body {font-family: "Lato", sans-serif;} /* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 40%; height: 100%; } /* Style the buttons inside the tab */ .tab button { display: block; background-color: inherit; color: black; padding: 5px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 80%; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 60%; border-left: none; height: 100%; overflow: hidden; position: sticky; top: 0; } </style> <h2>Solcellslexikon</h2> <div class="tab"><button class="tablinks" id="defaultOpen" onclick="openCity(event, 'AC-brytare')">AC-brytare</button> <button class="tablinks" onclick="openCity(event, 'Ampere')">Ampere (A)</button> <button class="tablinks" onclick="openCity(event, 'Anlaggningsid')">Anl&auml;ggnings-ID</button> <button class="tablinks" onclick="openCity(event, 'anslutningspunkt')">Anslutningspunkt</button> <button class="tablinks" onclick="openCity(event, 'azimutvinkel')">Azimutvinkel</button> <button class="tablinks" onclick="openCity(event, 'behorigelektriker')">Behörig elektriker</button> <button class="tablinks" onclick="openCity(event, 'belastning')">Belastning</button> <button class="tablinks" onclick="openCity(event, 'cemarkning')">CE-märkning</button> <button class="tablinks" onclick="openCity(event, 'dc')">DC</button> <button class="tablinks" onclick="openCity(event, 'effekt')">Effekt</button> <button class="tablinks" onclick="openCity(event, 'effektbegransning')">Effektbegränsning</button> <button class="tablinks" onclick="openCity(event, 'effektgaranti')">Effektgaranti</button> <button class="tablinks" onclick="openCity(event, 'egenanvandel')">Egenanvänd el</button> <button class="tablinks" onclick="openCity(event, 'elhandelsforetag')">Elhandelsföretag</button> <button class="tablinks" onclick="openCity(event, 'elproducent')">Elproducent</button> <button class="tablinks" onclick="openCity(event, 'elsakerhetsintyg')">Elsäkerhetsintyg</button> <button class="tablinks" onclick="openCity(event, 'falsatplattak')">Falsat plåttak</button> <button class="tablinks" onclick="openCity(event, 'huvudsakring')">Huvudsäkring</button> <button class="tablinks" onclick="openCity(event, 'inverter')">Inverter (växelriktare)</button> <button class="tablinks" onclick="openCity(event, 'jordfelsbrytare')">Jordfelsbrytare</button> <button class="tablinks" onclick="openCity(event, 'kilowatt')">Kilowatt (kW)</button> <button class="tablinks" onclick="openCity(event, 'kilowattimme')">Kilowattimme (kWh)</button> <button class="tablinks" onclick="openCity(event, 'likstrom')">Likström</button> <button class="tablinks" onclick="openCity(event, 'lutningpatak')">Lutning på tak</button> <button class="tablinks" onclick="openCity(event, 'monokristallin')">Monokristallin</button> <button class="tablinks" onclick="openCity(event, 'mppt')">MPPT</button> <button class="tablinks" onclick="openCity(event, 'markeffekt')">Märkeffekt</button> <button class="tablinks" onclick="openCity(event, 'noct')">NOCT</button> <button class="tablinks" onclick="openCity(event, 'natbolag')">Nätbolag</button> <button class="tablinks" onclick="openCity(event, 'optimerare')">Optimerare</button> <button class="tablinks" onclick="openCity(event, 'paneltyp')">Paneltyp</button> <button class="tablinks" onclick="openCity(event, 'pascal')">Pascal (PA)</button> <button class="tablinks" onclick="openCity(event, 'plattaktrapets')">Plåttak trapets</button> <button class="tablinks" onclick="openCity(event, 'plattakfalsat')">Plåttak falsat</button> <button class="tablinks" onclick="openCity(event, 'rails')">Rails</button> <button class="tablinks" onclick="openCity(event, 'rotavdrag')">Rotavdrag</button> <button class="tablinks" onclick="openCity(event, 'servissakring')">Servissäkring</button> <button class="tablinks" onclick="openCity(event, 'snolastberakning')">Snölastberäkning</button> <button class="tablinks" onclick="openCity(event, 'solcell')">Solcell</button> <button class="tablinks" onclick="openCity(event, 'solpanel')">Solpanel</button> <button class="tablinks" onclick="openCity(event, 'spanning')">Spänning (V)</button> <button class="tablinks" onclick="openCity(event, 'stc')">STC</button> <button class="tablinks" onclick="openCity(event, 'strang')">Sträng</button> <button class="tablinks" onclick="openCity(event, 'strom')">Ström</button> <button class="tablinks" onclick="openCity(event, 'tegeltak')">Tegeltak</button> <button class="tablinks" onclick="openCity(event, 'toppeffekt')">Toppeffekt</button> <button class="tablinks" onclick="openCity(event, 'verkningsgrad')">Verkningsgrad</button> <button class="tablinks" onclick="openCity(event, 'vindlastberakning')">Vindlastberäkning</button> <button class="tablinks" onclick="openCity(event, 'volt')">Volt (V)</button> <button class="tablinks" onclick="openCity(event, 'vaxelriktare')">Växelriktare</button> <button class="tablinks" onclick="openCity(event, 'vaxelstrom')">Växelström</button> <button class="tablinks" onclick="openCity(event, 'watt')">Watt (W)</button> <button class="tablinks" onclick="openCity(event, 'overskottsel')">Överskottsel</button> <button class="tablinks" onclick="openCity(event, 'overspannigsskydd')">Överspänningsskydd</button> </div> <div class="tabcontent" id="AC-brytare"> <h3>Vad &auml;r en AC-brytare?</h3> <p>AC-brytare krävs för att koppla bort växelriktaren från elnätet vid service och underhåll. Nätbolaget skall alltid ha möjlighet att slå ifrån anläggningen. Brytaren placeras bredvid eller i närheten av växelriktaren för att göra det enklare att frånskilja växelriktaren. </p> <script>function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();</script> </body> </html>
  5. I have a CSS style that creates a TOP button fixed to the bottom right of a web page so, as you scroll, it stays put. How can I detect when the browser window is maximized so as to keep the Top button on the lower right edge of the content? My page design uses an 850px wide whole page table for content so the page width is fixed whether the browser window is at 850px or maximized. This is how a Word or PDF document behaves. The Top button appears at the lower right of the window at 850px but at the center of the page when the browser is maximized. The basic properties position the Top button to the left and slightly above the bottom of the window. position: fixed; bottom: 85px; left: 800px; with other properties specifying font properties and border effects. Yours, Michael F
  6. I am looking for either in css a way to take data from the device used to input as an attribute or a way to combine css and javascript to do the same thing. there may be a variable in css now but it isn't a true variable as far as I have found so far in the tutorial and the info I want I have only seen accessed using javascript so wanted to try combining it with the css I already have. I am looking to basically create a title page with css at the top of a website or in my case an actual ebook. I have this most of the way done. I want it to survive multiple devices so I want a variable height and width and I found that but the height is not quite perfect yet. I am using 100vh for 100% viewport height meaning the entire screen height but what I really want is the full window height. there is a javascript function in the tutorial that gives you the window.innerheight but I don't know how to input that number into my height attribute. right now that 100vh height is making it so that the footer is just beyond the screen and I have to scroll down a little to see it. but what I want it to do is that there is no scrolling needed because it fits perfectly on the screen. here is the code as is. <html> <head> <title>Title Page Template</title> <style> .title { display: flex; position: absolute; height: 100vh; width: 100vw; flex-direction: column; align-items: center; justify-content: center; z-index: -1; } .title > div { width: 100%; margin: 10px; text-align: center; } .copy { display: flex; height: 100vh; width: 100vw; align-items: flex-end; justify-content: center; } .copy > div { width: 100%; text-align: center; } p.large { font-weight: bold; margin-top:1em; font-size: 200%; text-indent: 0em; text-align:center; } p.medium { margin-top:1em; font-weight: bold; font-size: 150%; margin-top:1.0em; text-indent: 0em; text-align:center; } p.small { font-weight: bold; margin-top:1em; font-size: 125%; text-indent: 0em; text-align:center; } </style> </head> <body> <div class="title"> <div><p class="large" id="start">Title</p></div> <div><p class="medium">The Sub-title</p></div> <div><p class="small">By <i>Author</i></p></div> </div> <div class="copy"> <div><p class="small">Publisher &#169; 2019</p></div> </div> </body> </html> and here is the javascript code I found that gets the info I want <html> <body> <p>Click the button to display this frame's height and width.</p> <button onclick="myFunction()">Try it</button> <p><strong>Note:</strong> The innerWidth and innerHeight properties are not supported in IE8 and earlier.</p> <p id="demo"></p> <script> function myFunction() { var w = window.innerWidth; var h = window.innerHeight; document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h; } </script> </body> </html> is there a way to get the innerheight and innerwidth into my css to finish this title page design?
  7. Qazi

    Toggle Switch

    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.
  8. 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!!
  9. Nad2

    Css align item

    Hi, every body I have some problem with css align item in flexbox. Like bellow images. Can anyone help me? i will happy to have your answers. thank you
  10. Hello guys, I hope I'm in the right section for these kind of problems. I have trouble linking the HTML document with the CSS. I know it's a very dumb problem, and I'm not even a newbie. It's super frustrating because I can't figure out the issue. The document I'm using is for a tutorial about Bootstrap. I downloaded the whole package from the link given by the person making the tutorial - even though the link to the CSS was already given when I opened up the HTML, nothing I write in the CSS has an effect on it. I tried everything - I looked up other people having the same problem, I changed the link several times, I changed the position of the link in the head several times (just to make sure I tried out absolutely everything) without success, I even changed from the MAC I'm working on to a Windows laptop, but nothing works. I created a new HTML and CSS on both MAC and Windows and connected them, they work just fine, so I can't be that dumb - at least I hope so. Can you guys help me? Has it maybe something to do with Bootstrap?
  11. I'd like my video to start playing automatically when the page is launched without sound just like on this page: [LINK REMOVED]. I've tried any possible jQuery/javascript/CSS option I could find online but I always end up with Google error that's blocking the video from autoplay unless there was an interaction. How did they do it in the link above?
  12. <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.
  13. 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
  14. Hi! I'm very new to CSS and have been working on editing a website for work. I've managed to add a dropdown filter list (according to to W3 tutorial - https://www.w3schools.com/howto/howto_js_filter_dropdown.asp), and format it accordingly. However, I am having problems with the width. I have set the dropbtn to 100vw, so that it blends in to an existing header on the screen. It is overhanging on any screen with a scroll bar, and any existing fixes I've found don't work. I'm not sure that I am putting them in the right place though. I'd be hugely grateful if someone could suggest a solution and where to put it please!
  15. 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.
  16. 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>
  17. 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
  18. Hello, Im quite the noob so I need your assistance. Im building a website using squarespace and im trying to modify the checkbox section of the form through css. I would like every checkbox to have a different image and the items to be in 3 columns rather than one. So far i have managed to edit the size of the checkboxes and insert the same image in all of them (see attachment) but i cannot figure out how to individually edit every single checkbox differently. Please help. Thankyou! C
  19. من میخوام وقتی خودم سایت میزنم و بقیه اون رو 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 .....
  20. W3Schools seems to be pretty consistent in the way declarations are ordered in a declaration block. What is this based off of? Do they have a style guide for this? What are recommended practices for ordering declarations? Thanks!
  21. 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
  22. 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.
  23. Hi I am in the process of replacing an old menu on a website and came across the W3Schools menu guides. I have recreated most of the menu using the example and code on the 'Drop down menu in NavBar' page (https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp) and I am really pleased with how it is coming along. However, my HTML and CSS skills are quite limited and I am stuck on two things that I am hoping someone here can help me with. I have done a few searches on these forums but not found quite what I am looking for or something that fits with what I have done so far and I cannot see an example on this site that achieves what I am trying to do. I need to add some sub-menus to the drop down items. For example, in the code given on the above page, the 'Dropdown' menu has three items, Link 1, Link 2 and Link 3. I need to find out how to have Link 1 (for example) provide access to another list of items, e.g. Link 1a, Link 1b, Link 1c etc.. Ideally, I would like this sub-menu to appear to the right of the source item. This also leads the second thing I have not been able to work out, but I think is probably a lot simpler. On the menu item that links to a sub-menu, I would like to put a right-arrow to show that a sub-menu is available. Whilst I can put the arrow on the item, I have not yet worked out how to right-align the arrow so, at the moment, it appears immediately after the menu item name. I have seen mention on some forum posts about li items and child-items but this appears to relate to different types of code for the menu in general and not what I have used so far. If it isn't possible to do this using the current method, I am happy to change to something else and any pointers, or links to example code would be much appreciated. Thanks in advance for any help anyone can offer. David
  24. Why does my polyline tag in SVG not accept style set inside defs tag but does in normal CSS? Here is my code: <html> <body> <style> .trapezoid2 { fill:beige;stroke:forestgreen;stroke-width:2; } </style> <center> <!-- I routinely use the center tag for older browsers. --> <svg height="400" width="800" style="border:5px double blue;background-color:tan;margin:0 auto;" > <defs> <polygon id="trapezoid1" style="fill:tan;stroke:blue;stroke-width:4;" /> </defs> <use xlink:href="#trapezoid1" points="100,200 150,100 350,100 400,200" /> <polygon id=".trapezoid2" points="400,300 450,200 650,200 700,300" style="fill:beige;stroke:forestgreen;stroke-width:2;" /> </svg> </center> </body> </html> The second trapezoid shows up but not the first. Thanks, PHPremote aka Patrick w3forum_polyline_defJune3.html
  25. 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
×
×
  • Create New...