The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Multiple HTML Buttons, Three Buttons on Same page Conflicting with eath other
Mirza Ali
post 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 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 28 2022, 09:34 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
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. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2022, 06:58 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Jan 28 2022, 03:34 PM) *


Please don't use underlining on the code, it makes it almost unreadable. blink.gif


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!

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2022, 06:59 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



biggrin.gif

Color didn't work though. I wanted it to be red. And font didn't work all the way. Boo-hoo! 😭
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:28 AM