Multiple HTML Buttons, Three Buttons on Same page Conflicting with eath other |
Multiple HTML Buttons, Three Buttons on Same page Conflicting with eath other |
Mirza Ali |
Jan 28 2022, 03:35 AM
Post
#1
|
Group: Members Posts: 1 Joined: 28-January 22 Member No.: 28,241 |
Hi,
I have three html button on my web page and it is conflicting with each other (Design wise and action wise) if change parameters for one then other get updated too which i dont want to happen. each button work individually as per it reference and design. below is my code for all three buttons with HTML & CSS. 1. Button Name: Sureh Al-Fatihah CODE <!DOCTYPE html> <html> <head> <meta name="viewports" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #61CE70; color: blue; margin: 1px 1px; padding: 8px; font-size: 14px; border: none; cursor: pointer; height: 10pxpx; width: 150pxpx; text-decoration: none; } .dropbtn {border-radius: 0px; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } #myInput { box-sizing: border-box; background-image: url(search.png); float:input; background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; color: #fff; background-color: #086815; padding: 10px 10px 10px 45px; border: 1px; border-radius: 15px; width: 400px; text-align-last: max-width; border-color: #086815; } #myInput:focus {outline: 3px solid #ddd;} .dropdown { position:relative; text-overflow: ellipsis; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #067B0A4A; min-width: 400px; max-height: 550px; overflow: scroll; text-align-last: left; border: 1px solid blue; border-radius: 15px; z-index: 1; } .dropdown-content a { color: #fff; padding: 12px 16px; width: 390px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #7A7A7A;} .show {display: block;} /* ADD CSS */ div#myDropdown a span { display: inline-block; float: right; } /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: grey; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #b30000; } </style> </head> <body> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">SURAH AL-FATIHAH</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()"> <a href="1-sureh-al-fatihah">1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span> </a> </div> </div> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> 2. Button Name: Verse CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> <input type="Verse" value="Slect" class="btn btn-default" name="buttonType" /> </script> <style> .Versebutton { background-color: #61CE70; color: blue; margin: 1px 1px; padding: 8px; font-size: 16px; border: none; cursor: pointer; height: 10pxpx; width: 100px; text-decoration: none; } /* Style the input field */ #myInput { padding: 20px; margin-top: -6px; border: 0; border-radius: 0px; background: #61CE70; } </style> </head> <body> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Verse 1 <span class="caret"></span></button> <ul class="dropdown-menu"> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <li><a href="#Ayat-1">Ayat-1</a></li> <li><a href="#Ayat-2">Ayat-2</a></li> <li><a href="#Ayat-3">Ayat-3</a></li> <li><a href="#Ayat-4">Ayat-4</a></li> </ul> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $(".dropdown-menu li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html> 3. Button Name: Juz CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #61CE70; color: blue; margin: 1px 1px; padding: 8px; font-size: 16px; border: none; cursor: pointer; height: 10pxpx; border-bottom-right-radius: 10px; border-top-right-radius:10px; width: 80px; text-decoration: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #053A04; min-width: 400px; max-height: 550px; overflow: scroll; text-align-last: left; border: 1px solid blue; z-index: 1; } .dropdown-content a { color: fff; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: block;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: green;} #myInput { box-sizing: border-box; background-image: url(search.png); float:input; background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; color: #fff; background-color: #086815; padding: 10px 10px 10px 45px; border: 1px; border-radius: 15px; width: 490px; text-align-last: max-width; border-color: #086815; } #myInput:focus {outline: 3px solid #ddd;} .dropdown { position:relative; text-overflow: ellipsis; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #067B0A4A; min-width: 400px; max-height: 550px; overflow: scroll; text-align-last: left; border: 1px solid blue; border-radius: 15px; z-index: 1; } .dropdown-content a { color: #fff; padding: 12px 16px; width: 490px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #7A7A7A;} .show {display: block;} /* ADD CSS */ div#myDropdown a span { display: inline-block; float: right; } /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: red; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #b30000; } </style> </head> <body> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">JUZ</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()"> <a href="Juz-1">1.JUZ Al-Fatiha (1:1) - Al-Baqarah (2:141) <span>(آلم (آ-ل-م</span> </a> <a href="Juz-2">2. JUZ Al-Baqarah (2:142) - Al-Baqarah (2:252)<span>سَيَقُولُ</span> </a> </div> </div> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> I don't know if i need to change the button names or function name etc . |
Christian J |
Jan 28 2022, 09:34 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
Hi!
Those code examples are for three separate pages, could you instead post a single page with all buttons combined? Please don't use underlining on the code, it makes it almost unreadable. |
pandy |
Feb 1 2022, 06:58 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Please don't use underlining on the code, it makes it almost unreadable. He didn't mean to. There were messed up bbCode underline markup around the headings (fixed it). Thought it was interesting though that a code section can be "styled" that way. Didn't expect that to work. Must try... CODE Hello world! |
pandy |
Feb 1 2022, 06:59 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Color didn't work though. I wanted it to be red. And font didn't work all the way. Boo-hoo! 😭 |
Lo-Fi Version | Time is now: 18th April 2024 - 06:32 AM |