Jump to content

Search the Community

Showing results for tags 'javacript'.



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

  1. Hello, I am trying to make website with inclusive design for my homework and I have three functions that are changing the text size, text style and site color theme, but I can not save the changes after I reload the page. This is my code for changing the text size: localStorage.setItem('z', '1'); function size() { if (localStorage.getItem('z')=="1"){ txt = document.getElementById("a").style.fontSize = "25px"; localStorage.removeItem("z"); localStorage.setItem('z', '2'); } else if (localStorage.getItem('z')=="2") { txt = document.getElementById("a").style.fontSize = "30px"; localStorage.removeItem("z"); localStorage.setItem('z', '3'); } else { txt = document.getElementById("a").style.fontSize = "20px"; localStorage.removeItem("z"); localStorage.setItem('z', '1'); } } The code in my html is this: <body onload="size()"> <button type="button" " onclick="size();">Change Text Size</button> <div id='a'>Some text</div> </body> I believe I can make the other two function save their changes If I see how to make this one. Thank you !
  2. Write a web page that will ask the user whether they like apple. the web page will provide feedback through the use of an alert box. The feedback will indicate "that is great" when the user says yes, "that is bad " when the user says no, and "invalid input" for any other answer. USE ONLY FUNCTIONS WITH THIS
  3. Hi, i'm creating my private webpage with my own styling by css in some forms i need. For the design i used several examples of the HowTo-section of w3schools. On the custom select item i need a scroll element, because the select element has many options hat i should be able to sroll through. How can i add this function? Thanks for your help Harald style.css orange.css Spieler.php helpfile.js
  4. Hello, I have different overlay images on iframe vimeo videos. As I have several embeded vimeo videos and overlay images, I would like to add a script so that when I click on one overlay image it doesn't apply to all the overlay images on the page. Here's the code, thanks <!DOCTYPE html> <html> <head> <style> #vid { display: none; margin-top: -365px; z-index:1; } #vid2 { display: none; margin-top: -365px; z-index:1; } #iframe_id { pointer-events: none; } </style> </head> <body> <img src="https://www.ebnerfilm.com/wp-content/uploads/2019/08/LV_INTERVIEW_GIF_PLAY.gif" class="gliphy" onclick="myFunction()"> <div id="vid"> <iframe src="https://player.vimeo.com/video/353777739" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> </div> <img src="https://www.ebnerfilm.com/wp-content/uploads/2019/08/LOIS_LANE_GIF_PLAY.gif" class="gliphy" onclick="myFunction()"> <div id="vid2"> <iframe src="https://player.vimeo.com/video/196409842" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> </div> <script> function myFunction() { document.getElementById("vid").style.display = "block"; document.getElementById("vid2").style.display = "block"; } $('#iframe_id_wrapper').click(function() { //run function that records clicks }); </script> </body> </html>
  5. alexdelrio

    HTML/CSS Help

    Hi, I am new to coding and I am working on creating a new nav bar for my company site. So far, it's coming out decently well but I am running into an issue and was hoping someone could help me. I can't seem to center my dropdown portion of the nav bar on mobile. Any help would be greatly appreciated! HTML: <html> <head> <link href="[https://fonts.googleapis.com/css?family=Montserrat:600&display=swap](https://fonts.googleapis.com/css?family=Montserrat:600&display=swap)" rel="stylesheet"> </head> <body> <span class="navbar-toggle" id="js-navbar-toggle"> <i class="fas fa-bars"></i> </span> <a href="[https://theretirementinstructor.com](https://theretirementinstructor.com)"><img src="[https://i.imgur.com/MNW22YI.png](https://i.imgur.com/MNW22YI.png)" class="logo" alt="AFF-Logo"></a> <ul class="main-nav" id="js-menu"> <li> <a href="[https://theretirementinstructor.com/about/](https://theretirementinstructor.com/about/)" class="nav-links">About</a> </li> <li> <a href="[https://theretirementinstructor.com/attend-an-event/](https://theretirementinstructor.com/attend-an-event/)" class="nav-links">Events</a> </li> <li> <a href="[https://theretirementinstructor.com/resources/](https://theretirementinstructor.com/resources/)" class="nav-links">Resources</a> </li> <a href="[https://theretirementinstructor.com/financial-services/](https://theretirementinstructor.com/financial-services/)" class="nav-links">Financial Services</a> </li> <a href="#" class="nav-links">Client Access</a> <ul> <li> <a href="[https://www.rightcapital.com/login?cobrand=soCBPCxAN09bwRUnzkT-Sg&type=client](https://www.rightcapital.com/login?cobrand=soCBPCxAN09bwRUnzkT-Sg&type=client)">Retirement Plan</a></li> <li> <a href="[https://www.advisorclient.com/login](https://www.advisorclient.com/login)">TD Ameritrade</a></li> <li> <a href="[https://login.orionadvisor.com/](https://login.orionadvisor.com/)">Orion</a></li> </ul> </li> <li> <a href="[https://theretirementinstructor.com/blog/](https://theretirementinstructor.com/blog/)" class="nav-links">Blog</a> </li> <a href="[https://theretirementinstructor.com/schedule-a-meeting/](https://theretirementinstructor.com/schedule-a-meeting/)" class="nav-links">Contact</a> </li> </ul> </nav> </body> </html> CSS: @charset "UTF-8"; /* CSS Document */ /* Reset CSS */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { } body { } ol, ul { } blockquote, q { } blockquote:before, blockquote:after, q:before, q:after { } table { } * { box-sizing: border-box; padding: 0; margin: 0; } .navbar { font-family: 'Montserrat', sans-serif; letter-spacing: 0.05em; font-size: 16px; background-color:#FFFFFF; } .main-nav { list-style-type: none; display: none; } .nav-links,.nav-link-main { text-decoration: none; color: #000000; position: relative; } .main-nav li { text-align: center; margin: 20px auto; padding-left: 10px; } nav ul li ul { display: none; position: absolute; background-color: #e8e8e8; border-radius: 0px 0px 4px 4px; } nav ul li:hover ul { display:block; } nav ul li ul li{ width: 180px; padding: 4px; border-radius: 4px; } nav ul li ul li a { padding: 2px; } nav ul li ul li a:hover { background-color: #f3f3f3; } .logo { display: inline-block; margin-top: 10px; width: 210px; } .navbar-toggle { position: absolute; top: 10px; right: 20px; cursor: pointer; color: #b44438; font-size: 24px; } .active { display: block; background-color: #F2F2F2; } @media screen and (min-width: 768px) { .navbar { display: flex; justify-content: space-between; padding-bottom: 0; height: 70px; align-items: center; } .main-nav { display: flex; margin-right: 30px; flex-direction: row; justify-content: flex-end; } .main-nav li { margin: 0; } .nav-links { margin-left: 20px; } .logo { margin-top: 0; } .navbar-toggle { display: none; } .logo:hover, .nav-links:hover { color: #b44438; } } JS: // JavaScript Document let mainNav = document.getElementById("js-menu"); let navBarToggle = document.getElementById("js-navbar-toggle"); navBarToggle.addEventListener("click", function() { mainNav.classList.toggle("active"); });
  6. Dear all, Using a small webpage for my app, I am confused because I don't how to stop the function I did. I am using a C++ program which grab pictures in a file. I read the file and update it each 2 seconds. The functions I used are: <script language="javascript"> function updateImage() { obj = document.imagename; obj.src = obj.src + "?" + Math.random(); setTimeout("updateImage()",2000); } </script> <script language="javascript"> function showPicture() { var sourceOfPicture = "/home/tux/Prog/Medias/Images/calib1.png"; var img = document.getElementById('bigpic') img.src = sourceOfPicture.replace('90x90', '225x225'); img.style.display = "block"; } </script> And I call them like this: <h1>Camera Preview</h1> <button onclick="showPicture()">Start Preview</button><br><br> <body onload="updateImage()"> <img style="display:block;" id="bigpic" src="bigpic" name="imagename" width="340" height="240"> Can you tell me how can I do to add a "stop" button to stop the update, and conserving the last image on screen ? Thank you for your help and support. Best regards,
  7. BACKGROUND: I recently installed chart.js using npm but had much trouble in do doing and would like now to verify that it is working properly. Accordingly, I ran the following two pieces of code followed by console.log(typeof myChart) in my browser's console. var Chart = require('chart.js'); var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, {}); and var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, {}); only to discover that the results were the same -- namely, object QUESTION: Is this telling me that the require statement is unnecessary, or is it telling me that no matter how you use the new expression it will always produce an object? OBSERVATION: Indeed, when I enter the chart.js sample code, the <canvas> item does not fill with the intended chart. Please advise. Roddy
  8. hello I make a hotkey for aplication Webpleas Chek my code... <!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=Edge" ><style type="text/css">body{background:green;} #over{ background: rgba(0,0,0,0.8); width: 100%; height: 100%; top: 0; bottom: 0;left: 0;right: 0; border: 0px solid blue; position: fixed; } #data{border:3px solid white; width: 300px; margin:100px auto;background: white; color:blue; font:2em 'Agency FB';text-align: center;} a{cursor: pointer;}</style><script type="text/javascript">window.onload = dokeyHot(); var KeyHot = []; function dokeyHot () { if (window.event) { document.captureEvents(event.KEYPRESS); } document.onkeydown = function(e){ var charCode = (e.which) ? e.which : e.keyCode; KeyHot[charCode] = true; if (KeyHot[27]) { // ESC Button document.getElementById("box").innerHTML = ""; } } } function tekan () { var dawal = "<div id='over'>"; var dakhir = "</div>"; var data = "<div id='data'>Pleas Turn Button ESC</div>" document.getElementById("box").innerHTML=dawal+data+dakhir; }</script></head><body><div id="box"></div><button onclick="tekan();">Tekan</button></body><html> if press button tekan will display a dialogbox and if press ESC in keyboard dialogbox will lost but that just run very well just for first time.. if I press again tekan dialogbox will lost with all button in keyboard ... ??? I want dialogbox lost just if press button ESC keyboard.. thnks for correct
×
×
  • Create New...