CharnyHealingCenter Posted July 22, 2020 Share Posted July 22, 2020 Hello! I'm working on a page where the main content is custom html + css + java. The code generates a magnifying glass search button that becomes a dropdown list (highlighted in green below). The script works in an external editor I've used to debug, but when I insert into Squarespace it's messing up the shopping cart in the header (red highlight). Is there a way to override these changes to the shopping cart in the header with something like: ".cart-button <some command> !important"? Or is there a bug in my code I'm not noticing? Code is also below. Any suggestions are welcome. Thanks in advance! Code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /*animated search bar*/ .search { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.5); border-radius: 4px; transition: width 0.5s; overflow: hidden; } .search.active { width: 400px; } .search input { position: absolute; top: 10px; left: 10px; width: calc(100%-90px); height: 60px; border: none; outline: none; font-family: arial; font-size: 36px; padding: 0 4px; color: #666; } .icon { position: absolute; width: 60px; height: 60px; top: 15px; right: 4px; background: white; cursor: pointer; transition: 0.5s; border-radius: 4px; } .search.active .icon { background: rgba(100,100,100,0.3); top: 10px; } .icon:before { content: ''; position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; background: transparent; border: 2px solid #262626; border-radius: 50%; transition: 0.5s; } .search.active .icon:before { content: ''; position: absolute; top: 7px; left: 13px; width: 18px; height: 30px; background: transparent; border: none; border-right: 2px solid #fff; border-radius: 0; transition: 0.5s; transform: rotate(45deg); } .search.active .icon:after { content: ''; position: absolute; top: 20px; left: 13px; width: 18px; height: 30px; background: transparent; border: none; border-right: 2px solid #fff; border-radius: 0; transition: 0.5s; transform: rotate(-45deg); } .icon:after { content: ''; position: absolute; top: 25px; left: 35px; width: 18px; height: 18px; background: transparent; border-left: 2px solid #262626; border-radius: 0; transform: rotate(-45deg); transition: 0.5s; } /*dropdown*/ /*dropdown search bar*/ .dropbtn { background-color:transparent; border: none; color: white; text-color: white; position: absolute; top: 42%; left: 20.7%; margin: 24px; font-size: 36px; font-family:arial; cursor: pointer; height: 60px; } #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-repeat: no-repeat; font-size: 36px; font-family:arial; color: #666; padding: 19px; border: none; border-bottom: 1px solid #ddd; border-radius: 4px; } #myInput:focus {outline: 3px solid #ddd;} .dropdown { float:right; display: inline-block; } .dropdown-content { display: none; position: absolute; top: 43.5%; left: 24.1%; background-color: #f6f6f6; min-width: 200px; overflow: scroll; height: 400px; width: 325px; border: 1px solid #ddd; border-radius: 4px; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="search"> <div class="icon"></div> </div> <div> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()" autocomplete="off"> <a href="allergy-research-group-products">Allergy Research Group</a> </div> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.icon').click(function(){ $('.search').toggleClass('active') document.getElementById("myDropdown").classList.toggle("show"); }) }); /* 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.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a.style.display = ""; } else { a.style.display = "none"; } } } </script> </body> </html> Link to comment
tuanphan Posted July 22, 2020 Share Posted July 22, 2020 Can you share link to your site? We can check easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
CharnyHealingCenter Posted July 24, 2020 Author Share Posted July 24, 2020 Hi tuanphan! The site is still under construction (updating from 7.0 to 7.1) but here's the info: url: https://daffodil-lizard-tb7t.squarespace.com/testsearch pw: PAMttJt8Y3RZ The page is called ~TestSearch. Many thanks! Link to comment
tuanphan Posted September 7, 2020 Share Posted September 7, 2020 On 7/24/2020 at 10:15 PM, CharnyHealingCenter said: Hi tuanphan! The site is still under construction (updating from 7.0 to 7.1) but here's the info: url: https://daffodil-lizard-tb7t.squarespace.com/testsearch pw: PAMttJt8Y3RZ The page is called ~TestSearch. Many thanks! Hi. Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.