Search the Community

Showing results for tags 'buttons'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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


  • Community Calendar




Website URL








Found 13 results

  1. Hello everyone, I am trying to make my first website and have been going through some javascript examples on W3S to learn how to make a website more interactive. I have been looking at the code for modal login and signup forms found here: and here: The HTML and CSS are easy enough to understand I think, but I seem to be having some trouble with the JS aspect of the tutorials. What I have done is simply add both forms to an HTML document, linked to the styling and that seems to be working fine. The problem is when I click outside of the form the display for the modal forms should be set to none by the javascript code but this only works for one button. I have been able to rearrange some of the code so the second button works but then the first button wouldn't work. I have the code listed below. I've been trying this for a few days and would really like some help. Thanks in advance. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website3</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="login.css"> </head> <body> <div id="outerMain"> <div id="main"> <header> <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button> <button onclick="document.getElementById('id02').style.display='block'" style="width:auto;">Sign Up</button> <div id="id01" class="modal"> <form class="modal-content animate" action="/action_page.php"> <div class="imgcontainer"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span> <img src="logo.png" alt="Avatar" class="avatar"> </div> <div class="container"> <label><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <input type="checkbox" checked="checked"> Remember me </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> </div> </form> </div> <div id="id02" class="modal"> <form class="modal-content animate" action="/action_page.php"> <div class="imgcontainer"> <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span> </div> <div class="container"> <label><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <label><b>Repeat Password</b></label> <input type="password" placeholder="Repeat Password" name="psw-repeat" required> <input type="checkbox" checked="checked"> Remember me <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p> <div class="clearfix"> <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button> <button type="submit" class="signupbtn">Sign Up</button> </div> </div> </form> </div> <script src="scripts.js"> </script> </header> <section> <center><img src="centerimg.png" alt=""></center> </section> </div> </div> <footer> <center>HERE IS THE FOOTER!!</center> </footer> </body> </html> Javascript: var login = document.getElementById('id01'); var modal = document.getElementById('id02'); console.log(login); console.log(modal); if(login == document.getElementById('id01')){ console.log(login); window.onclick = function(event) { if ( == login) { = "none"; } }; } window.onclick = function(event) { if ( == modal) { = "none"; } }; CSS: html,body{ height: 100%; } #outerMain { min-height: 100%; } #main{ overflow: auto; padding-bottom: 100px; background-color: green; } header{ background-color: blue; } /* Full-width input fields */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* Set a style for all buttons */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } /* Extra styles for the cancel button */ .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /* Center the image and position the close button */ .imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } .container { padding: 16px; } span.psw { float: right; padding-top: 16px; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button (x) */ .close { position: absolute; right: 25px; top: 0; color: #000; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: red; cursor: pointer; } /* Add Zoom Animation */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } }
  2. <p><strong>My first Javascript</strong></p> <button type="button" on-click="myfunction()">Click here</button> <script> function myfunction() {document.getElementById("demo").innerHTML = "Hello its Wednesday";}</script> <p id="demo">Hello its Tuesday</p> Any assistance would be much appreciated. I am learning the W3Schools tutorials and I can't seem to move forward. The results dont's show its a "Wednesday"! <script> function light(sw) {var pic; if (sw == 0) {pic = "gifs/pic_bulboff.gif"} else {pic = "gifs/pic_bulbon.gif"} document.getElementById('myImage').src = pic;</script> <img id="myImage" src="gifs/pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button></p> I can't quite make the light bulb to go on.
  3. Hello, I would like to have two button bars on the same page, each playing a different song. My problem is, that both bars play the song of the second bar. What am I doing wrong? /********** 1 instance *********/ <button onclick="play()" type="button" class="play"></button> <button onclick="pause()" type="button" class="pause"></button> <button onclick="load()" type="button" class="load"></button><br> <audio id="myAudio" width="200" height="70"> <source src="assets/sing.mp3" type="audio/mp3"> </audio> <script> var aud = document.getElementById("myAudio"); function play() {; } function pause() { myAudio.pause(); } function load() { myAudio.load(); } </script> /********** 2 instance *********/ <button onclick="play()" type="button" class="play"></button> <button onclick="pause()" type="button" class="pause"></button> <button onclick="load()" type="button" class="load"></button><br> <audio id="myAudio2" width="200" height="70"> <source src="assets/song.mp3" type="audio/mp3"> </audio> <script> var aud = document.getElementById("myAudio2"); function play() {; } function pause() { myAudio.pause(); } function load() { myAudio.load(); } </script> /********** css *********/ <style type="text/css"> .play { background-image: url("assets/buttonplay60x60.jpg"); width: 60px; height: 60px; } .pause { background-image: url("assets/buttonpause60x60.jpg"); width: 60px; height: 60px; } .load { background-image: url("assets/buttonload60x60.jpg"); width: 60px; height: 60px; } </style>
  4. Hello, I have a problem in my website. Recently, I'm using tabs to show my information but this is changing the place of some elements in my web. I would like to know how I can solve this. I've created and attached a little .html with .css where I show what happens with my tabs. You will see two tabs with information and two buttons (imbornales and tramos). Both buttons should be under the tabs, but imbornales appears on the right side. And when I open some tab, both buttons are hidden. I think it's a problem with the position: absolute; I've tried to change it but the tabs behaviour is not the same. Any ideas? Thank you very much! pestanias.css pestanas.html
  5. I am new to W3Schools Forum and JavaScript. I have used a function toggleDiv(divId) for the next and previous buttons that show a table in 5 different divs on a PHP page. The buttons work. The problem is that at first all the div's show up on the page then switch to one at a time once the next button is pressed. How do I just call the first div id with a next button to the rest? Do I set up each div as a variable to be called from an array? I saw something about style="visibility: visible" or "hidden", but I don't know to make that work either. Here is some of what I have: <script type="text/javascript"> function toggleDiv(divId){ for(var i = 1; i < 6; i++) { var tempDivId = "graffiti" + i; document.getElementById(tempDivId).style.display='none'; } document.getElementById(divId).style.display='block'; return false; }</script> <div id="graffiti1"> <table id="tbl"> <tr> <td><img alt="..." src=".._Web.jpg" /><br >...</td> <td><img alt="..." s rc="A.._Web.jpg"><br >...</td> </tr> <tr> <td colspan="2"> <input type="button" id="btnnext1" value="Next" onclick="toggleDiv('graffiti2');" /> </td> </tr> </table> </div><div id="graffiti2"> <table id="tbl"> <tr> <td><img alt="..." src=".._Web.jpg"><br >...</td> <td><img alt="..." src=".._Web.jpg"><br >...</td> </tr> <tr> <td colspan="2"> <input type="button" id="btnnext2" value="Next" onclick="toggleDiv('graffiti3');" /></td> <td colspan="2"> <input type="button" id="btnprev1" value="Previous" onclick="toggleDiv('graffiti1');" /> </td> </tr> </table> </div> <div id="graffiti3"> <table id="tbl"> <tr> <td><img alt="..." src=".._Web.jpg"><br >...</td> <td><img alt="..." src=".._Web.jpg"><br >...</td> </tr> <tr> <td colspan="2"> <input type="button" id="btnnext3" value="Next" onclick="toggleDiv('graffiti4');" /></td> <td colspan="2"> <input type="button" id="btnprev2" value="Previous" onclick="toggleDiv('graffiti2');" /> </td> </tr> </table> </div>Thanks for any help.
  6. Hi, Tumblr's current 'Share on Tumblr' button is made to share PAGES, not posts. I want visitors of my wordpress blog to be able to share pictures. Tumblr is, after all, a picture blog. A post to tumblr should therefor be a picture post, using a posts 'Feature image' as the picture. This post should include the source, title, click-through, and the text from within the post (the later will only be visible on tumblr if you choose to view the whole post). Anyone out there skilled enough to modify this? A friend of mine told me to put the ID Number from the object in html elements ID-field. But I have no idea what that means, or how to do it. Following is the code I use so far. It does what I want, but the click-through and title does not work. <!--Add this code to your page right before the </body> tag. -->(I've been putting this in the index.php after the </body> tag).<script src=""></script> <!-- Put this tag wherever you want your button to appear -->(I've been putting this inside the posts).<span id="tumblr_button_abc123"></span> <!-- Set these variables wherever convenient -->(I've been putting this inside the posts).<script type="text/javascript"> var tumblr_photo_source = "The 'Feature Image'"; var tumblr_photo_caption = "The post title"; var tumblr_photo_click_thru = "The post URL";</script> <!-- Put this code at the bottom of your page -->(I've been putting this inside the posts)<script type="text/javascript"> var tumblr_button = document.createElement("a"); tumblr_button.setAttribute("href", "" + encodeURIComponent(tumblr_photo_source) + "&caption=" + encodeURIComponent(tumblr_photo_caption) + "&clickthru=" + encodeURIComponent(tumblr_photo_click_thru)); tumblr_button.setAttribute("title", "Share on Tumblr"); tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:129px; height:20px; background:url('') top left no-repeat transparent;"); tumblr_button.innerHTML = "Share on Tumblr"; document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);</script>
  7. Hello, I'm new to html but have been put in charge of updating my companies website. I need to change the header and page marker on the site from blue to orange. After discovering the stylesheet I was able to see that these were actually .jpg and .gif files which is why I wasn't able to just insert the colour name (#FF7519) I wanted. I am not sure how to go about making these and do not seem to be using the correct terminology to find the answer through google. Can anybody assist? I'm using a Mac but do not have photoshop. Header file name: top_bg.jpg Page marker file name: button_on.gif I would like them exactly the same, just with a colour change. Thank you in advance. I apologise if this is posted in completely the wrong area.
  8. Hello, I'm having trouble getting my back and next buttons in my lightbox to work! Any help will be greatly appreciated! http://imd.edumedia....term/index.html
  9. I am trying to figure out the best way to display a button on a page that will open a new page on clicking. I have a function set up using JS that once the button is clicked will call the function and then I can enter the code there to do the redirection. I just need to find some documentation on writing this code. Is it also possible to make the button itself a link so that by clicking on the button you would effectively be clicking on a link as well? (I've already done redirection this way) Thanks
  10. Hello Internet. I have been doing some looking around and there are some really complicated ways of doing mouseover events but I really don't think I need anything all that complicated. I would like to simply highlight a button when you place the mouse over the button. I know I have to use a mouseover event but everything seems like more than I need and I can't find ANYTHING that simply highlights a single button. Please help.
  11. Hello internet - what I am trying to do is that I have two different regular buttons (preview and submit) and I also have two functions I named checkit and checkit2 - but now I would like checkit to post different information than checkit2 when the forms are sent to m m_post_process_4.php to be processed. How do I accomplish this? My form text is:<form name=tourney action="m m_post_process_4.php" method="post" target="_blank">My button text is:<input type="button" name="Preview" value="Preview"; onclick="checkit();" /><input type="button" name="Submit" value="Submit"; onclick="checkit2();" />
  12. Hello internet.I would like my page to be able to open up with button values preloaded by an external javascript file. Reason is that I have a lot of buttons in my form whose values I would like to have centralized in an external file and then have those values loaded to the form. How can I do this?
  13. I am an experienced programmer but new to web apps including Javascript. An instructor gave our class the code needed to create rollover button effects: In the PAGE HEADER: <head> | | <!-- Following script required for Navigation Bar --> <script type="text/javascript"> <!-- navImage0 = newImage(); navImage1 = newImage(); navImage2 = newImage(); navImage3 = newImage(); navImage4 = newImage(); navImage5 = newImage(); navImage6 = newImage(); //--> </script> | |</head> On the IMAGE/LINK: <body> | | <a href="../services.shtml" title="Go to: Services at Specific Computer Systems" onmouseover="navImage1.src='../img/buttonServicesOver.png';" onmouseout="navImage1.src='../img/buttonServicesNormal.png';" onclick="navImage1.src='../img/buttonServicesDown.png';" onmousedown="navImage1.src='../img/buttonServicesDown.png';" onmouseup="navImage1.src='../img/buttonServicesOver.png';" > <img id="navImage1" src="../img/buttonServicesNormal.png" alt="Button: Go to Services Page"> </img> </a> | |</body> That is ALL of it! This Code Works but I don’t understand why. This became an issue because this code causes an “Object expected” error at the first character of “navImage0 = …” in the header. This error does NOT appear to have any affect on the function of the page including the rollovers. This error appears to occurs only in IE. In trying to diagnose this error I discovered several different (but similar) methods for implementing rollovers. I understand them fine, but they exposed just how much seams to be missing from the solution demonstrated by our instructor. The function “newImage” is NOT defined in any place that I can find. Please can someone tell me why/how does this simple solution work? ThanksRoss