Search the Community
Showing results for tags 'buttons'.
Found 13 results
-
I want to add image in pricing table
-
Hi! I am just getting into programming websites and am using bottle. I've set up routes and templates and have a seperate CSS file. I'd like to know if it's possible to use a button i've defined in the separate CSS file (as per this example) in a template that is successfully using the CSS file with <link rel="stylesheet" type="text/css" href="/static/css/main.css" /> in the head tag. I've experimented around a bit, trying to use the button style as a reference, but I can only get the normal buttons to work. If I paste the code directly into the template, it works but I don't want to have to paste the button style into the code every time I need a button. Please help? 🙂
-
I used the guide from this link https://www.w3schools.com/howto/howto_js_tabs.asp I would like to center the buttons. I currently have 22 buttons. The second line is arranged to the left. I want them to be in the middle. I tried several ways but unfortunately to no avail. Thank you in advance for your help.
-
Hello Guys, I'm working on a website for my aunt, due to the new privacy law, she needs to update the page with a new Button in the menu. I lost the programm which I created the old .png buttons, so I can't create the new one in the same style. I want to replace the old buttons with new ones, written in css. The only problem is the size of the buttons, they keep scaling with the writting in the button, but I want them all the same size. I attached the code of the css and html, can you help me? I know, the website is written in an old style, her former programmer did all the writting and I overtook the project a while ago. CSS.css Schwarzwaldverein Ortsgruppe Achern.html
-
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: https://www.w3schools.com/howto/howto_css_login_form.asp and here: https://www.w3schools.com/howto/howto_css_signup_form.asp 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">×</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">×</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 (event.target == login) { login.style.display = "none"; } }; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "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%; } }
-
<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.
-
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() { myAudio.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() { myAudio.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>
-
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
-
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.
-
Hi, Tumblr's current 'Share on Tumblr' button http://www.tumblr.com/buttons 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="http://platform.tumblr.com/v1/share.js"></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", "http://www.tumblr.com/share/photo?source=" + 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('http://platform.tumblr.com/v1/share_3.png') top left no-repeat transparent;"); tumblr_button.innerHTML = "Share on Tumblr"; document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);</script>
-
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.
-
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 -
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
