Jump to content

Search the Community

Showing results for tags 'button'.

  • 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 48 results

  1. partimenerd
    Can someone explain to me what's wrong with this choose your own adventure code? I asked Claude (AI), to write me the HTML for a choose your own adventure site, this is that it came up with: <html><head> <title>Choose Your Own Adventure</title> <style> body { font-family: Arial, sans-serif; text-align: center; } button { padding: 10px 20px; font-size: 16px; margin: 10px; } </style> </head> <body> <h1>Choose Your Own Adventure</h1> <div id="storyBox"> <p>You wake up in a dark forest. It's nighttime, and you can barely see anything around you. What do you do?</p> <button onclick="choiceA()">Look for a way out of the forest</button> <button onclick="choiceB()">Stay put and wait for daylight</button> </div> <script> function choiceA() { document.getElementById("storyBox").innerHTML = "<p>You start walking through the forest, trying to find a way out. After a while, you come across a small cabin. Do you:</p><button onclick='endA()'>Investigate the cabin</button><button onclick='endB()'>Keep moving through the forest</button>"; } function choiceB() { document.getElementById("storyBox").innerHTML = "<p>You decide to wait for daylight. As the sun rises, you realize you're not far from a small town. Do you:</p><button onclick='endC()'>Head towards the town</button><button onclick='endD()'>Stay in the forest</button>"; } function endA() { document.getElementById("storyBox").innerHTML = "<p>You approach the cabin and peek through the window. Inside, you see a group of people sitting around a table, playing cards. They seem friendly enough. You decide to knock on the door and introduce yourself.</p><p>The End</p>"; } function endB() { document.getElementById("storyBox").innerHTML = "<p>You continue walking through the forest, hoping to find a way out. After a few hours, you come across a small stream. You decide to follow the stream, which eventually leads you out of the forest and back to civilization.</p><p>The End</p>"; } function endC() { document.getElementById("storyBox").innerHTML = "<p>You head towards the town, hoping to find help or directions. As you enter the town, you realize it's abandoned and in ruins. You decide to keep moving, hoping to find a more prosperous settlement.</p><p>The End</p>"; } function endD() { document.getElementById("storyBox").innerHTML = "<p>You decide to stay in the forest, feeling more at home in the wilderness than in civilization. You build a small shelter and start foraging for food, living off the land.</p><p>The End</p>"; } </script> </body></html> The button functions don't work, but I see the results are coded in. Do any of you guys know how to fix it? If you could plug it in yourself and edit it for me I would really appreciate it. I've learned a bit about HTML but I am still an amateur. Thank you!
  2. BrianGNE
    Hello, Currently, we have a button with a specific CTA that applies to all brands on our website. What we would like to do is change what this CTA says along with the link destination but only for one specific brand. All others should remain how they are currently. We are working with Razor and partials which makes this a little more complicated. I have the two buttons set up: <div class="GNEPdpCTAButtonWrapper"> <div> <div class="GNEPdpCTAButtonsB"> <a class="btnPri" href="/dealerlocator@(brandParam)" target="_self">Where to Buy</a> </div> </div> <div> <div class="GNEPdpCTAButtonCEI"> <a class="btnPri" href="https://www.ceisupply.com/" target="_blank">Buy Direct on CEISupply.com</a> </div> </div> </div> But targeting the brand and tying that to which button shows is a little beyond me. There are several areas within the code where "brandName" is present. Before I add more code to this ticket I wanted to know if I am posting the code properly so as not to overly annoy anyone. [{ 'id': '@Model.Sku', 'name': '@Model.Name', 'price': '@Model.ProductPrice.PriceValue', 'brand': '@brandName', 'category': '@categoryName' }] Essentially I am looking for: if brand = CEI show this and display none to the original button I can provide more code information if someone is interested in helping me solve this. Thanks in advance for any assistance
  3. ddonuts
    Hi there, I am not usually a coder, but I have a Wordpress site with a Mailchimp form that I have been customizing. I want the Submit button to zoom on hover. I've looked at examples of this on the web, but have been unsuccessful in making it work. I have a CSS plugin in which I have entered the following code. So far, it all works. Can anyone tell me how to add the zoom on hover code? /* Add a Border Around the Form*/ #mc_embed_signup { border-color: #000000; border-width: 1px; border-style: solid; } /* Add Padding Around the Mailchimp Form*/ #mc_embed_signup { padding: 20px; } /* Customize the Header*/ #mc_embed_signup h2 { font-size: 24px; text-transform: uppercase; margin-bottom: 30px; color: #000000; text-align: center; } /* Customize the Subscribe Button*/ #mc_embed_signup .subscribe-button { background-color: #0EAD69; padding: 12px 50px; border-radius: 50px; border-color: #738DFF; color: #ffffff; font-size: 16px; display: block; margin-right: auto; margin-left: auto; } /* Change Colour of Subscribe Button on Hover*/ #mc_embed_signup .subscribe-button:hover { background-color: #738DFF; color: #ffffff; display: inline-block; display: block; margin-right: auto; margin-left: auto; } #mc_embed_signup .required-email { color: #A8A3A2; font-style: italic; background-color: #fff; border-color: #000000; } #mc_embed_signup .first-name { color : #A8A3A2; font-style: italic; background-color: #fff; border-color: #000000; margin-bottom: 10px; }
  4. danighooli
    Hi all, I am using collections to categorize a ton of images since each photo needs to have its own link. links are now like this: example.com/collectionA/1 example.com/collectionA/2 example.com/collectionA/3 Is there a way I can have a button that changes the number? I want the visitor to be able to go to the next and previous image of the same collection without exiting to the main page.
  5. StMartinsIsland
    I read, with great interest, about using a button to show and hide text here. However, I have several blocks of text for which I would like a button to toggle show/hide but would prefer not to duplicate the same function several times. I would like to pass the div ID as a parameter so that multiple buttons may use the same function to show/hide the text associated with each button. I tried the following code but it does not work. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } </style> </head> <body> <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p> <button onclick="myFunction('myDIV')">Try it</button> <div id="myDIV"> This is my DIV element. </div> <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> <script> function myFunction(myDiv) { var x = document.getElementById(myDIV); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> </body> </html>
  6. Pravin Kumar Raja
    I had 2 INPUT boxes and one BUTTON. I want to take the control back to the current INPUT after BUTTON is clicked. That part is working fine with the HTML file shown below: <!DOCTYPE html> <html> <head> <script> var last; function Focus(input) { last = input; } function Blur(input) { } function Click(button) { if (typeof last != "undefined") last.focus(); } </script> </head> <body> <input id="I1" onfocus="Focus(this)" onblur="Blur(this)"> </input> <input id="I2" onfocus="Focus(this)" onblur="Blur(this)"> </input> <button id="B" onclick="Click(this)"> Click </button> <script> </script> </body> </html> But I wanted to code onblur function Blur to incorporate check whether the input is exited with a blank string and to return control to the blank INPUT field after displaying an alert to that effect. This displays the alert box continuously. Can you suggest how this can be avoided. Here is my code: function Focus(input) { if (typeof last != "undefined") if (last.value.length == 0) alert("Blank!"); last = input; }
  7. GuardianAngel02
    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? 🙂
  8. vmars316
    Hello & Thanks , In the code below , I am getting an extraneous "_" underscore after each "Button" . Pls , how can I avoid this ? Thanks <!DOCTYPE html> <html> <head> <title>Previous-Next-Buttons-NoCss</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Previous-Next-Buttons-NoCss-W3invision.html</h2> <p style="text-align:center"> <br> <br> <a href="Previous-Next-Buttons-NoCss-01.html"> <input type="button" value="Previous-Next-Buttons-NoCss-01.html" /> </a> &nbsp; &nbsp <a href="Previous-Next-Buttons-NoCss-02.html"> <input type="button" value="Previous-Next-Buttons-NoCss-02.html" /> </a> &nbsp; &nbsp <a href="Previous-Next-Buttons-NoCss-03.html"> <input type="button" value="Previous-Next-Buttons-NoCss-03.html" /> </a> <br> <br> </p> </body> </html>
  9. iwato
    BACKGROUND I have created two functions both of which have been tested and function as expected -- so well, in fact, that one of them can be used to enhance the output of the other. The problem arises when I seek to call these functions with separate button alerts provided below in the order given. Both functions are defined in a jQuery ready statement. BUTTON ALERTS <script> var num = 5; </script> <button onclick="alert(num.annotate('sec'));">Alert!</button> <script> var sec_num = 59039; </script> <button onclick="alert(secTranslate(sec_num));">Alert!</button> DILEMMA: Although the first button-alert works, the second fails with the following error message: "ReferenceError: secTranslate is not defined." with a reference to the onclick attribute. QUESTION: How does one explain this phenomenon? Roddy
  10. iwato
    The following script was found on StackOverflow. It is suppose to simulate a button click with the up-tick of an Enter key. $("#id_of_textbox").keyup(function(event) { if (event.keyCode === 13) { $("#id_of_button").click(); } }); Now, I am not using it for a textbox, but for a search box. In order to get it to work I have tried the following: Used the <form> element as the selector for the keyup() function. Used the <input> element of the search box as the selector for the keyup() function Entered the code in various places within my script including the html and the called javascript documents that make the search engine work. To no avail. Now, it is true that I have not been entirely methodological in my selection of HTML elements and code placement. Still, ss many times as I have tried, however, you would think that Lady Luck would be on my side. Any hints? Please advise. Roddy
  11. harry_ord
    Hello, this is my site: https://www.centrovision.com.gt/#contactanos I have a contact form here with a blue submit button. Actually, only if you are using Chrome the button is blue, if you are using Firefox or Internet Explorer, you just get a default no-style html button. Why doesn't Firefox comply with my css?(i don't care about i.e). Here's my css for the button: input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button { color: #ffffff !important; background: #014780; border-width: 1px !important; border-color: rgba(93,182,46,0.03); letter-spacing: 0px; font-size: 16px; font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif !important; padding-left: 0.7em; padding-right: 2em; padding: 0.3em 1em !important; display: inline-block; margin: 0 0 0 15px; font-family: inherit; cursor: pointer; float: right; padding: 0.3em 1em; border: 2px solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 20px; font-weight: 500; line-height: 1.7em !important; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; }
  12. phn221181
    hey specialists, i spent 2 days on a small java-calulating script for my 7 year old son, to "play on the tablet" :-). At the moment he is not allowed to play games, so he can practice math a little bit... i don't use an app, because i like the "challange" and want to learn something too. thats why i startet to try coding. Now i cant go on, the check-button in my script doesn't do anything. My script shows tasks an Operators, but the entered solution is not going to be compared with the result. Can someone help me to find the error? Script in action is here: http://holland-nell.net/php/java-rechnen.html the Code was written easily in "german". i translated the comments in english... Thanks :-) <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=2.0"> <title>Titel</title> <style> #box { width:400px; } </style> <script> var min = 5, max = 10; var richtig = 0, falsch = 0; function hilfe() { /* show result in red */ document.getElementById("erg-output").style.color = "red"; /* Using Help Button is like a not solved task*/ falsch++; document.getElementById("falsch").innerHTML = falsch; /* Reset Inputfield */ document.ergebnis.ergebnis_eingabe.value =""; /* neue Aufgabe nach 1,5 Sekunden */ sleep(1500); aufgabe_erstellen(min,max); } function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){ break; } } } function compare () { /* compare entered and calculated value */ var erg_eingabe = (document.ergebnis.ergebnis_eingabe.value); var erg =(document.getElementById("erg-output").value); console.log('Ergebnis Eingabe: ' + erg_eingabe + ' berechnetes Ergebnis: ' + erg); if (erg == erg_eingabe) { alert("richtig"); document.ergebnis.ergebnis_eingabe.value =""; richtig++; document.getElementById("richtig").innerHTML = richtig; } else { alert("falsch"); falsch++; document.getElementById("falsch").innerHTML = falsch; } } function aufgabe_erstellen(min, max) { /* show result in white */ document.getElementById("erg-output").style.color = "white"; /* if input empty create new task */ if(document.ergebnis.ergebnis_eingabe.value == '') { zahl1 = Math.floor(Math.random() * (max - min +1)) + min; zahl2 = Math.floor(Math.random() * (max - min +1)) + min; /* check which operation is activeted */ var op =''; for (var i = 0; i < 4; i++) { if(document.operatoren.op[i].checked) { op = (document.operatoren.op[i].value); break; } } /* Create a String to show in div-element */ var aufgabe = zahl1 + ' ' + op + ' ' + zahl2; eval(aufgabe); /* Calc results */ switch (op) { case '+': var erg = zahl1 + zahl2; break; case '-': erg = zahl1 - zahl2; break; case '*': erg = zahl1 * zahl2; break; case '/': erg = zahl1 / zahl2; break; default: erg = ''; } /* Show task and result (in white) */ document.getElementById("aufgabe").innerHTML = aufgabe + " = "; document.getElementById("erg-output").innerHTML = erg; /* if inputfield not empty call function "compare" */ } else { compare(); } } </script> </head> <body> <div id="box"> <div class=""> <form name="operatoren" onchange="aufgabe_erstellen(min,max)"> <input type="radio" name="op" value="-">Minus</input> <input type="radio" name="op" value="+">Plus</input> <input type="radio" name="op" value="*">Multiplikation</input> <input type="radio" name="op" value="/">Division</input> </form> <div id="aufgabe"></div><div id="erg-output"></div> </div> <div class=""> <form name="ergebnis"> <input type="number" name="ergebnis_eingabe" /> </form> <button onklick="compare()">Check</button> </div> <div> <button onclick="hilfe()">Hilfe?</button><br> Richtig: <div id="richtig">0</div> Falsch: <div id="falsch">0</div> </div> </div> </body> </html>
  13. Sergio
    Hi there, I’m a newbie in coding HTML, CSS (very poor in JS) and I would like to make a responsive navbar like that: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp (here the code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav). My question is, when the navbar is in “responsive mode” and when clicking the menu button (right side in the example), is it possible to produce a "fade in/out" effects in order to display the menu items? Thank you in advance for your time and for any help you can provide. Sergio
  14. sabhan
    hi, I hv a problem. i want make such a web app such as if I Click button in my website then as result button1 in website1 and button2 in website2 will be clicked at the same time. any1 plz help. suggest something
  15. Michael_1900
    Hello, I am very new in the field coding and especially with CSS. This is a basic question about how to write the code for a page for two rows of buttons (preferably with photographs as backgrounds) that when hovered over a menu with multiple links drops down and retracts when the cursor is moved off the button. I have gotten the hover menu drop down menu figured out, but the two things I have not figured out are 1) how to divide the buttons in to two rows and 2) how to have a photograph as the button image. I have attached a simple digram of what I am attempting to build - the grey square represent images If there is anyone that can assist, I would be really appreciative. Thanks!
  16. Akanda
    Hi everyone, I am a newbe and would like to ask for help with the following task: I am designing a website with a vertical accordion-menu on the left side that should stay fixed. So far no problem, an example I found on the w3school site. Now I would like the buttons that do not have sub-menu items to link to the index-, kontakt- pages directly. The recommended description to link a button is to include it into <form> tag and assign a «formaction» to it. When I do this the accordion looses the ability to spring open. Do I have to adapt anything in the Java-script or is there another way to solve this. Ideally I would like the accordion menu to behave like this: when clicking one menu item the corresponding page should be shown with the submenu items opened. when choosing anothe menu item that page should be opened and the previous sub-menu items closed. my coding attempt looks like that: ————————————————————————————— <!DOCTYPE html> <html><!-- InstanceBegin template="/Templates/acc_template.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My Accordion Menu Website</title> <style> button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; display: none; background-color: white; } </style> </head> <body> <!--Anfang Seiten-Menu Accordeon DIV--> <nav> <div class="accnavleft"> <!--Anfang Buttons--> <form><button class="accordion" formaction="/index.html">Homepage</button></form> <form> <button class="accordion" formaction="//page_one.html">Page one</button></form> <div class="panel"> <ul> <li><a href="#navb">first paragraph page one</a></li> <li><a href="#navc">2nd paragraph page one/a></li> <li><a href="#navd">3rd paragraph page one</a></li> <li><a href="#nave">4th paragraph page one/a></li> </ul> </div> <form> <button class="accordion" formaction="/page_two.html">Page two</button></form> <div class="panel"> <ul> <li><a href="#navf">first paragraph page two</a></li> <li><a href="#navg">2nd paragraph page two/a></li> <li><a href="#navh">3rd paragraph page two</a></li> <li><a href="#navi">4th paragraph page two/a></li> </ul> </div> <form> <button class="accordion" formaction="/page_three.html">Page three</button></form> <div class="panel"> <ul> <li><a href="#navj">first paragraph page three</a></li> <li><a href="#navk">2nd paragraph page three/a></li> <li><a href="#navl">3rd paragraph page three</a></li> <li><a href="#navm">4th paragraph page three/a></li> </ul> </div> <form> <button class="accordion" formaction="/kontakt.html">Kontakt</button></form> <div class="panel"> <ul> </ul> </div> <form> <button class="accordion" formaction="/impressum.html">Impressum</button></form> <div class="panel"> <ul> </ul> </div> </div> </nav> <!--end Seiten Menu DIV accordeon --> <!--Java Script of Accordion --> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc.onclick = function(){ this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } } } </script> <!--end of Accordion --> <!-- "Content" --> <main> <div style="margin-left:25%;padding:1px 16px;height:100%;"> <h1>first paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navb"></a> <h1>2nd paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navc"></a> <h1>3rd paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navd"></a> <h1>4th paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="nave"></a> <h1>5th paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navf"></a> </div> </main> <!-- End Content --> </body> </html> Accord_Menu_Button_link.html
  17. DarkxPunk
    Hey everyone, I made a cool little pure css hamburger button with a transition to a cross or x. Thought I would share it and open it up for improvements you guys can make. (If anyone thinks using borders is better, it is not, it displays incorrectly in Firefox.)
  18. Chrex
    Hi there, can you just use a button to "submit" and "delete" something? Im planing to have a "link"-button. Is there a tutorial for buttons? I want to learn how to create and design buttons. Thanks for your help, Chrex
  19. Tio777
    I have modified this script to include a call-to-action button when a video ends. What I'm trying to do is get the button to work on mouse rollover and click. The button works and comes up after the video ends but I can't seem to place the attributes in a logical place to get them to work. It's a little advanced for me so I'm hoping that someone can do this and explain what they did so I can learn. I've spent hours on this! LOL Here's the whole script... <div id="player"></div> <script type="text/javascript"> jwplayer("player").setup({ playlist: [{ image: "http://disc.maximumimpact.ca/videos/DISC-Title.png", sources: [{ file: "http://disc.maximumimpact.ca/videos/DISC Assessment Intro.m4v" },{ file: "http://disc.maximumimpact.ca/videos/DISC Assessment Intro.webm" }] }], width: 853, height: 480, stretching: "fill" }); jwplayer().onComplete(function() { var el = document.createElement("div"); var el2 = document.createElement("div"); var el3 = document.createElement("div"); var el4 = document.createElement("div"); var txt = document.createElement('a'); if (jwplayer().getRenderingMode() == "html5"){ var theBody = document.getElementById(player.id); } else { var theBody = document.getElementById(player.id+"_wrapper"); } var playerWidthPX2 = theBody.style.width; var playerWidthPX = parseFloat(playerWidthPX2); var playerHeightPX2 = theBody.style.height; var playerHeightPX = parseFloat(playerHeightPX2); el3.setAttribute('id', 'bg'); el3.style.height = playerHeightPX + "px"; el3.style.width = playerWidthPX2; el3.style.background = "#ffffff"; el3.style.opacity = "0.70"; el3.style.position = "absolute"; el3.style.backgroundImage="url('background.png')"; el.setAttribute('src', 'background.png'); if (jwplayer().getRenderingMode() == "html5"){ } else { el3.style.top = playerHeightPX-playerHeightPX+"px"; } el3.style.zIndex = "999"; el3.width = playerWidthPX; el3.height = playerHeightPX; el2.setAttribute('id', 'bg2'); el2.style.height = playerHeightPX + "px"; el2.style.width = playerWidthPX2; el2.style.position = "absolute"; el2.style.zIndex = "999"; el2.width = playerWidthPX; el2.height = playerHeightPX; theBody.appendChild(el3); theBody.appendChild(el2); el2.style.textAlign = "center"; el2.style.left = "center"; el2.style.top = ((playerHeightPX*3)/6) -"40" + "px"; el.setAttribute('id', 'hyperlink'); el.style.height = "30px"; el.style.width = "30px"; el2.width = "30"; el2.height = "30"; el.style.position = "relative"; el.setAttribute('frameBorder', '0'); el.style.top = "11px"; el.style.left = "202px"; el.style.textAlign = "center"; el.style.marginBottom = "-16px"; el.style.marginRight = "8px"; el4.setAttribute('id', 'replay'); el4.style.height = "20px"; el4.style.width = "20px"; el4.height = "20"; el4.width = "20"; el4.style.position = "absolute"; el4.style.top = "-" + playerHeightPX/2 + "px"; el4.style.marginTop = "50px"; el4.style.left = playerWidthPX/2 + "px"; el4.style.marginLeft = "50px"; el4.style.backgroundImage="url('replay.png')"; el4.setAttribute('src', 'replay.png'); el2.appendChild(txt); txt.outerHTML = '<a href="http://google.com" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"><img name="jsbutton" src="http://disc.maximumimpact.ca/button/ClickHere-Normal.png" width="402" height="127" border="0" alt="javascript button"></a>'; el2.appendChild(el); el2.appendChild(el4); el.style.backgroundImage="url('hyperlink.png')"; el.setAttribute('src', 'hyperlink.png'); el.style.cursor = "pointer"; el.style.display = "table"; el2.style.display = "table"; el3.style.display = "table"; el4.style.display = "table"; txt.style.display = "table"; el.onmouseup = function(){ window.open("http://google.com"); } el4.style.cursor = "pointer"; el4.onmouseup = function(){ el.style.display = "none"; el2.style.display = "none"; el3.style.display = "none"; el4.style.display = "none"; txt.style.display = "none"; jwplayer().play(); } }); </script> Here is a complete script of the button that works... <a href="http://www.google.com" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()" ><img name="jsbutton" src="http://disc.maximumimpact.ca/button/ClickHere-Normal.png" width="402" height="127" border="0" alt="javascript button"></a> <script language="JavaScript"> upImage = new Image(); upImage.src = "http://disc.maximumimpact.ca/button/ClickHere-Rollover.png"; downImage = new Image(); downImage.src = "http://disc.maximumimpact.ca/button/ClickHere-Click.png" normalImage = new Image(); normalImage.src = "http://disc.maximumimpact.ca/button/ClickHere-Normal.png"; function changeImage() { document.images["jsbutton"].src= upImage.src; return true; } function changeImageBack() { document.images["jsbutton"].src = normalImage.src; return true; } function handleMDown() { document.images["jsbutton"].src = downImage.src; return true; } function handleMUp() { changeImage(); return true; } </script> I'm trying to put them together!
  20. OllieD
    I have st up a form on my website for contacting my company. It has some required fields for name, email and message but when you click the submit button, an alert pops up to confirm the form being submitted even when the required fields haven't been filled out. How can I solve this? This is the code for the form: <form name="Contact" method="put" id="contact"> First Name: <input type="type" name="First" id="first" maxlength="20" required placeholder="First Name"> <br> Last Name: <input type="type" name="Last" id="last" maxlength="25" required placeholder="Last Name"> <br> Email: <input type="email" name="Email" id="email" maxlength="25" required placeholder="Email"> <br> Message <input type="type" name="Message" id="message" maxlength="1000" required placeholder="Message"> <br> <input type="reset"> <input type="submit" onClick="alert('Thank you for contacting us. We will process it as soon as possible')"> </form>
  21. DoyleChris98
    What i am trying to do is create 3 items 2 are radio buttons and the other is a check box. I would like to give the 3 of them CSS styles and have them change the background and text color when selected or checked. below is the code and examples. first in the pictures are the layout of the Buttons and Checkbox. then below is the css style i want them to look like when done. pay no attention to the label of the css boxes i did that to give a example of selected and unselected. unselected is black background and green text and selected is the reverse. <!doctype html><html><head><meta charset="utf-8"><link href="Button.css" rel="stylesheet" type="text/css"></head><body><input type="radio" id="COM1TX" name="COMTX">COM 1 Tx<br><input type="checkbox" id="COMRX" name="COMRX">COM 1,2 Rx<br><input type="radio" id="COM2TX" name="COMTX">COM 2 Tx<br><div><input class="TEST" id="COM" type="button" name="COM" value="COM"><input class="TEST" id="COM2" type="button" name="COM2" value="COM2"></div><div><input class="TEST" id="COM3" type="button" name="COM3" value="COM3"><input class="TEST" id="COM4" type="button" name="COM4" value="COM4"></div> </body></html> @charset "utf-8";/* CSS Document */#COM{ width: 150px; height: 100px; position: absolute; top: 100px; left: 0px; cursor: crosshair;}#COM2{ width: 150px; height: 100px; position: absolute; top: 200px; left: 0px; cursor: crosshair;}#COM3{ width: 150px; height: 100px; position: absolute; top: 100px; left: 150px; cursor: crosshair;}#COM4{ width: 150px; height: 100px; position: absolute; top: 200px; left: 150px; cursor: crosshair; color: #000000; background-color: #00F349;}.TEST{ background-color: #000000; color: #00F349; text-align: center; border: thin solid #00F349; line-height: 100px; vertical-align: middle; font-size: 50px; cursor:crosshair;}.TEST:active{ background-color: #00F349; color: #000000; text-align: center; border: thin solid #00F349; line-height: 100px; vertical-align: middle; cursor:crosshair;}
  22. EmeraldX
    Hello world! I am new to programming, and I need help with an assignment. I do not think my professor left us intentionally in the dust, but I believe he just hasn't covered this yet. Anyways, we are creating a text adventure with html5/javascript and one of the objectives is to keep score when you click on an option. My options are go north, south, east, and west. On the first click to these areas you get 5 points, otherwise you only get 1 point. So far I only have this part of the code for score done: function displayScore() { alert ("Score"); } document.write('<span id="score">Your score is '+score+'</span>'); This was in thanks to a fellow classmate, but I want to know how to finalize the code and know what each of these lines do. I do not necessarily need a popup to show the score, it could even be in a text field tag. I'm sorry if I'm not using correct terminology, but the help would be greatly appreciated! Thanks!
  23. DoyleChris98
    What i am trying to do is create a text box to enter in a Frequency (122.25mhz). Then on a button press have it call a function to store as a variable, drop the 2 decimal places and convert the number. And return another variable after it is all done. I can figure out how to move the decimal, and convert it. My testing is that I want to display the number to see if the conversions are working right but i cant get it to display. Here is the code. Here is the jsfiddle for it. http://jsfiddle.net/2xz6un9b/ Example 122.25 FREQE = 122.25 FREQE1 = 12225 FREQE2 = 2225 FREQE3 = 4261 FREQO = FREQE3 html <input type="text" id="FREQB"> <button onclick="FREQ()">Frequency</button><p id="FREQO"></p> Javascript function freq(){ //get value from entery var FREQE = document.getElementById("FREQB").value; //dropping 2 decimal places var FREQE1 = FREQE*100; //removing the 1 from the front var FREQE2 = FREQE1 - 10000; //converting to oct var FREQE3 = FREQE2.toString(8); document.getElementById("FREQO").innerHTML = FREQE3;}
  24. travd93
    Hi All, I posted a thread previously which was answered pretty well so thought I would try my luck again, I am creating a logon page for my company, the logon page will be mostly used by mobiles and ipads so I have had to learn alot (imo) about mobile sites, so excuse me if I have failed in some respects haha. The website below is my test site and what I am hoping to have achieved is to have the logon keypad dynamically shape depending on browser window, i.e a mobile is smaller than an ipad. The goal then is to have the buttons also become larger and smaller. Is this even possible? If it is not possible can someone let me know how I can actually make the keypad larger so at least it will look the part on an ipad. Any help is appreciated, thanks. http://mrt.guardian1.com.au:57005/test/patrols.html
  25. Loss
    Hello everyone. I just created a WordPress website. To let you know, it's a site about WallPapers. I make a post for every image. But I want to have a download button in the post, so the image can be downloaded by clicking on the button. Can someone help me please? The WordPress plugins doesn't work. Thanks in advance!
×
×
  • Create New...