Jump to content

ike

Members
  • Posts

    16
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

ike's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Can someone help me understand why the padding isn't applied equally to the top and bottom of my banners div? The top has the 50px padding but the bottom does not. However, when you resize the browser window then the padding seems to be applied equally. <style> /* -------------------- START BANNERS CSS STYLE-------------------- */ div.banners { padding: 50px 0px; margin: 0px 0px; background-color: #f60; } div.banners-third { width: 30%; margin-right: 5%; float: left; text-align: center; } div.banners-third-last { margin: 0px; } /* -------------------- END BANNERS CSS STYLE-------------------- */ /* -------------------- MEDIA QUERIES ---------------------- */ @media screen and (max-width: 820px) { div.banners-third { width: 47.5%; } div.banners-third-second { margin: 0px; } div.banners-third-last { padding: 20px 0px 0px; width: auto; clear: both; float: none; } } @media screen and (max-width:720px) { div.banners-third { width: 33%; margin-top: 25px; } div.banners-third-last { padding: 0px 0px 0px; width: auto; clear: both; float: none; } div.banners-mobile-collapse { width: auto; margin-right: 0px; float: none; } } </style> </HEAD> <body> <!-------------------- START BANNERS HTML --------------------> <!-- banners- --> <DIV class="banners"> <!-- one-third --> <DIV class="banners-third banners-mobile-collapse"> <h2>Banner 1</h2> </DIV><!--/banners-third--> <!-- banners-one-third --> <DIV class="banners-third banners-third-second banners-mobile-collapse"> <h2>Banner 2</h2> </DIV><!--/banners-third--> <!-- banners-one-third --> <DIV class="banners-third banners-third-last"> <h2>Banner 3</h2> </DIV><!--/banners-third--> </DIV><!--/banners--> <!-------------------- END BANNERS HTML --------------------> </BODY> </HTML>
  2. Anyway to stop the expanded dropdown from jumping to the top of the screen? On mobile devices as soon as you try to scroll the screen it jumps to the top. Desktop Internet browser if you shrink the browser for the responsive to kick in and then expand the dropdown then if you maximize the browser it jumps to the top.
  3. Thanks a bunch, as that is exactly what I was looking for. I know beggars shouldn’t be choosy but if the dropdown is expanded on a mobile device and you scroll the screen, Link 1 of the dropdown is displayed next to the Home link on the menu bar. If the sub dropdown is expanded, and you scroll the screen, Link 1 and the sub dropdown button is displayed next to the Home link on the menu bar. You can get a similar result if you just shrink your browser window expand one of the dropdowns and then maximize your browser window. The dropdowns stay expanded and can not be closed unless you shrink the browser window and collapse the dropdown. Now I’m begging some as I know just enough to realize I don’t know enough. I tried to create a sub dropdown by just copying all the CSS and adding sub to the dropdowns and dropbtns. It works to some degree, but the submenu content only displays the first sub item on mobile devices. I’m sure very few if anyone will be shrinking their browser window on a computer to view the website so this may not matter. If you make your browser window smaller when the responsive kicks in the sub dropdown is a hover not a click. However, if you click on the sub dropdown then it becomes clickable and the hover is disabled, unless, the page is reloaded or refreshed. Also, if you make your browser window smaller so the responsive kicks in if you select one of the dropdowns when you expand the browser window the dropdown you click on no longer works. I totally understand if you don’t have the time or just don’t want to help. Here’s what I got going. https://www.w3schools.com/code/tryit.asp?filename=G2ASBQ3MSKFL
  4. Is there anyway to make this dropdown menu use onclick instead of hover on small screens. I'm creating a menubar with several dropdowns and a couple sub-dropdowns with-in them and as it is on small screes the menu is too hard to navigate with the hover. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown Thanks!
  5. Not really sure what any of that means but I'll do a search on sessionStorage and see what I can come up with. Thanks!
  6. Is there any way to have a radio button be active by default on page refresh? I have two radio buttons that call up two different login scripts. Login script one for retail customers does not require a token to authenticate, where login script two for business customers has a token to authenticate. When script two is activated it provides a link to retrieve a lost or damaged token. The problem I’m running into is that once radio button two is checked and the page is refreshed radio button two stays checked. However, it is calling up login script one without the link to retrieve a lost or damaged token. I've tried using autocomplete="off", checked="false", checked="unchecked" and various javascripts and jQuery + javascripts and nothing seems to work for IE and some other browsers. Chrome everything works as it’s supposed to. Here is what I have found. Chrome everything works as it should. If you check radio button two and do a page refresh or page load it defaults back to radio button one. Internet Explorer nothing works unless I delete browsing history after selecting radio button two or highlight the address bar contents and hit enter which I consider a page load rather than page refresh. Firefox works like Internet Explorer, page refresh does nothing, page load puts the tick back on radio button one. Microsoft Edge works a little differently. On page refresh, the tick is on radio button one for a split second then disappears leaving both radio buttons unchecked. Page load puts the tick back on radio button one. Here is my code if it helps. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <html> <head> </head> <body> <label><input type="radio" name="app" checked onclick="divVisibility('Div1');"/>Retail Online</label> <label><input type="radio" name="app" onclick="divVisibility('Div2');"/>Business Online</label> <br> <br> <div class="inner_div"> <div id="Div1"> <!--------------- START RETAIL ONLINE BANKING LOGIN ---------------> <form method="POST" action="https://web9.secureinternetbank.com"> <label alt="Enter User Name" autocomplete="off" name="Enter User Name" style="position: absolute; z-index: -1;" for="username"></label> <input type="text" width="100px" placeholder="User Name" alt="User Name Field" name="username" id="username"> <br> <br> <label style="position: absolute; z-index: -1;" for="password"></label><input type="password" width="100px" placeholder="Password" name="password" id="password" > <br> <br> <input type="submit" value="Login"> </form> </div> </div> <script> var divs = ["Div1", "Div2"]; var visibleDivId = null; function divVisibility(divId) { if(visibleDivId === divId) { visibleDivId = null; } else { visibleDivId = divId; hideNonVisibleDivs(); } } function hideNonVisibleDivs() { var i, divId, div; for(i = 0; i < divs.length; i++) { divId = divs; div = document.getElementById(divId); if(visibleDivId === divId) { div.style.display = ""; } else { div.style.display = "none"; } } } </script> </DIV> <!--------------- START BUSINESS ONLINE BANKING LOGIN ---------------> <div id="Div2" style="display: none;"> <form method="POST" action="https://web9.secureinternetbank.com" id="ebc-form"> <input type="text" placeholder="User Name" name="username" id="ebc-username"> <br> <br> <input type="password" placeholder="Password" name="password" id="ebc-password"> <br> <br> <input type="submit" value="Login" id="ebcsubmit"> </form> <a href='https://web9.secureinternetbank.com/' style="text-decoration: none"> <p>Lost or Damaged Token</p></a> <script type="text/javascript" src="https://web9.secureinternetbank.com/"></script> <script> var submitCallback = function() { console.log("submit"); } var errorCallback = function() { console.log("error"); } </script> </body> </html>
  7. I have a sticky navbar which works fine until I add an image to my image box which at that point the sticky doesn't kick in until you scroll past the image. Any ideas as to what could be the cause of this it's driving me crazy? At least it's a short trip for me! <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-size: 28px; font-family: Arial, Helvetica, sans-serif; } .header { background-color: #f1f1f1; padding: 30px; text-align: center; } #navbar { overflow: hidden; background-color: #333; } #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } #navbar a:hover { background-color: #ddd; color: black; } #navbar a.active { background-color: #4CAF50; color: white; } .content { padding: 16px; min-height: 1000px; } .sticky { position: fixed; top: 0; width: 100%; } .sticky + .content { padding-top: 60px; } .imagebox{ position: relative; width: 100%; height: auto; padding: 0px auto; margin: 0px auto; } .loginbox{ position: absolute; float: right; top: 25px; right: 25px; width: 200px; height: 200px; padding: 15px; background-color: rgba(0, 0, 0, 0.25); } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div id="navbar"> <a class="active" href="javascript:void(0)">Home</a> <a href="javascript:void(0)">News</a> <a href="javascript:void(0)">Contact</a> </div> <div class="imagebox"> <div class="loginbox "></div> </div> <div class="content"> <h3>Sticky Navigation Example</h3> <p>The navbar will stick to the top when you reach its scroll position.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> <script> window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script> </body> </html>
  8. I've got it working to some degree but not sure it is best practice. Just curious Is what I've done suitable? I added position: static; to the login div on screen resize and gave it enough top margin to move below the image div. It was overlapping the body-content div so I gave the body-content div enough top margin to move below the login div. Here is my new code. <style> *{ padding: 0px auto; margin: 0px auto; } img { max-width: 100%; height: auto; } div.image-box { position: relative; border: 1px solid black; width: 100%; height: 500px; padding: 0px auto; margin: 0px auto; } div.login { position: absolute; float: right; top: 25px; right: 25px; width: 175px; height: 175px; padding: 15px; background-color: white; border: 2px solid red; background-color: rgba(0, 0, 0, 0.25); } div.body-content{ width: 100%; height: 500px; background-color: #333; } @media screen and (max-width: 640px) { div.body-content{ margin-top: 275px; width: 100%; height: 500px; background-color: #333; } div.mobile-collapse { width: auto; margin-right: 0px; float: none; } div.image-box { border: 1px solid black; width: 100%; height: 250px; padding: 0px auto; margin: 0px auto; } div.login { position: static; right: 25px; width: 175px; height: 175px; padding: 15px; margin: 275px auto 0px auto; background-color: white; border: 2px solid red; background-color: rgba(0, 0, 0, 0.25); } } </style> </head> <body> <div class="image-box"> <div class="login mobile-collapse">This is my div</div> </div> <div class="body-content"></div> </body> </html>
  9. I have a login script I want to place over an image which I believe I have done. However, I would like to move the login script div below the image div on small screens. I can accomplish this with separate divs using mobile-collapse but can seem to make it work with the div inside the other div. Any suggestions would be great! Thanks!! <!doctype html> <html> <head> <META content="IE=11.0000"> <META http-equiv="X-UA-Compatible"> <META charset="utf-8"> <META http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <META name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <TITLE>DIV TEST</TITLE> <style> *{ padding: 0px auto; margin: 0px auto; } img { max-width: 100%; height: auto; } div.image-box { position: relative; border: 1px solid black; width: 95%; height: 500px; padding: 0px auto; margin: 0px auto; } div.login { position: absolute; float: right; top: 25px; right: 25px; width: 175px; height: 175px; padding: 15px; background-color: white; border: 2px solid red; background-color: rgba(0, 0, 0, 0.25); } @media screen and (max-width: 780px) { div.mobile-collapse { width: auto; margin-right: 0px; float: none; } div.image-box { position: relative; border: 1px solid black; width: 90%; height: 250px; padding: 0px auto; margin: 0px auto; } } </style> </head> <body> <div class="image-box"> <div class="login mobile-collapse">Login Div</div> </div> </body> </html>
  10. I could have sworn I tried that but must have mucked it up somehow as it working now along with the right arrow. Many thanks! I see most navigation menus are made up of unordered lists and list items. Are there benefits of creating it that way opposed to the div structure I used?
  11. I created a sub menu on one of my dropdowns which seems to be working. However, i'm struggling on how the get the Sub Menu Text aligned to the left. Currently it's centered and I'd like it to line up with the other links. Also, is there a way to have an arrow pointing to the right on the Sub Menu? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title></title> <style> body { margin:0; font-family: Arial; } .header{ width: 100%; height: 125px; background-color: #999; } .body-content{ width: 100%; min-height: 1025px; background-color: #fff; } .footer{ width: 100%; height: 175px; background-color: #000; } .topnav { background-color: #333; overflow: ; } .topnav::after { clear: both; content: ""; display: block; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: ; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: ; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: #333; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .subdropdown .subdropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: #555 ; font-family: inherit; width: 160px; } .subdropdown-content { display: none; position: absolute; height: 0px; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .subdropdown-content a { float: none; color: black; padding: 14px 16px; text-decoration: none; display: block; text-align: left; position: relative; top: -48px; left: 160px; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .subdropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } .subdropdown:hover .subdropdown-content { display: block; } /* Page content */ .content { padding: 16px; } /* The sticky class is added to the navbar with JS when it reaches its scroll position */ .sticky,.topnav.responsive.sticky { position: fixed; top: 0; width: 100%; } /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */ .sticky + .content { padding-top: 60px; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } </style> </head> <body> <div class="header"></div> <div class="topnav" id="myTopnav"> <a href="home2.html" class="active">Home</a> <a href="a2.html">About</a> <div class="dropdown"> <button class="dropbtn">Products <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="plone.html">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Services <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="slone.html">Link 1</a> <a href="#">Link 2</a> <div class="subdropdown"> <button class="subdropbtn">Sub Menu <i class="fa fa-caret-down"></i> </button> <div class="subdropdown-content"> <a href="smlone.html">Sub Menu Link 1</a> <a href="#">Sub Menu Link 2</a> <a href="#">Sub Menu Link 3</a> </div> </div> </div> </div> <a href="news2.html">News</a> <a href="c2.html">Contact</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> <div class="body-content"> <div style="padding-left:16px"> <h2>Home</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div> </div> <div class="footer"></div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (!x.classList.contains("responsive")) { x.classList.add("responsive"); } else { x.classList.remove("responsive"); } } </script> <script> // When the user scrolls the page, execute myFunction window.onscroll = function() {myFunctionSticky()}; // Get the topnav var topnav = document.getElementById("myTopnav"); // Get the offset position of the navbar var sticky = topnav.offsetTop; // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunctionSticky() { if (window.pageYOffset >= sticky) { topnav.classList.add("sticky") } else { topnav.classList.remove("sticky"); } } </script> </body> </html>
  12. Your suggestion has things working properly now. Thank you very much! I hope I can understand things better someday, as the smallest changes can make such a dramatic impact. Forgot we are going to need a sub menu on one of the dropdowns. Any chance of creating a sub menu with in the current dropdown menu? Seems like I might have to switch to a different menu type using unordered list & li's to accomplish this which will probably blow everything apart.
  13. I finally got it working by giving the .topnav a fixed height and removing the overflow: hidden;. .topnav { background-color: #333; overflow: ; height: 48px; } However, now if you reduce the screen size when you click the menu icon the bottom three menu items do not have the dark background color.
  14. Thanks a bunch. I understand this change, /* The sticky class is added to the navbar with JS when it reaches its scroll position */ .sticky,.topnav.responsive.sticky { position: fixed; top: 0; width: 100%; } but would never have figured out the changes you made to the first script. The dropdowns still will not work once the navbar gets stuck unless you reduce the screen size so the responsive kicks in. I thought it was the overflow: hidden; on the .dropdown but I removed that and it still does not work. Any suggestions on that? Thanks again for all your help!
  15. Thanks for the replay. I made the suggested changes and it kind of works. If reduce the page width and scroll all the way to the bottom the navbar moves to the top of the page however, when I click the menu icon, the menu disappears or jumps out of view now. If I reduce the width but do not scroll all the way to the bottom of the page and click on the menu icon the dropdown works.
×
×
  • Create New...