javascript - I have 3 issues revolving around the styling of divs -
i have 3 issues with.
issue 1.
i have navigation bar numerous elements inside of it. div id shopcartbar display the div id shoppingtab once hovered over. did set onmouseout on shopcartbar div when tried move cursor on shoppingtab div, disappear. able keep shoppingtab div visible whilst hovering on either of these divs , onmouseout work on either of these well, or @ least able hover shopcartbar div on shoppingtab div keep visible because right disappears there tiny gap between 2 when used css close, didn't fix problem. before read code , have set fixed on page, intentionally set have no onmouseout event otherwise vanish moved cursor therefore debugging purposes, made appear permanently forcing me refresh page every time wanted gone.
issue 2
when set height of shoppingtab div 100%, covers span tags within , not 9 divs underneath tags, leaving content overflowing out of div. want shoppingtab div extend of content , not stop after span tags. please note: amount of content changes can't fixed pixel height or percentage.
issue 3
i have cookie places user's name in topnavbar div placed before shopcartbar div. when hover on shopcartbar div show shoppingtab div, makes persons name disappear whilst leaving text inside shopcartbar div. text topnavbar div remain when shoppingtab div displayed upon hover. please note: persons name must placed before shopcartbardiv.
here html contains needed solve 3 issues.
@charset "utf-8"; /* css document */ body{ /* applies <body> tag */ margin:0px; /* sets margin on sides 0px */ } .container{ /* container class */ width:100%; /* sets width */ height:100%; /* sets height */ background-color:black; /* sets background colour */ font-family:"myriad pro"; /* sets font family */ } .header{ /* header class */ width:100%; background-color:#323232; color:white; /* sets colour of font */ } .body{ width:100%; height:1100px; background-color:white; color:black; text-align:center; /* determines positioning of text alignment */ } .footer{ width:100%; height:50px; background-color:#323232; color:white; text-align:center; } div{ display: inline-block; /* sets display type */ float:left; /* sets float position */ } #one, #two, #three, #four{ background-color:#323232; height:90px; color:white; text-align:center; font-size:25px; } #slider{ background-color:#ed1c24; height:10px; width:100px; position: absolute; /* sets position specific type */ left: 0; /* sets number of pixels left object placed */ bottom:0; /* sets number of pixels bottom object placed */ } .inside{ margin-left:30px; /* specifies margin left side */ margin-right:30px; /* specifies margin right side */ padding-top:7px; /* specifies padding top side */ pointer-events:none; /* specifies cursor events */ margin-top:25px; /* specifies margin top side */ } .button{ display: inline-block; border-radius: 4px; /* specifies radius of each corner */ background-color: #ed1c24; border:none; /* specifies border type */ color: #ffffff; text-align: center; font-size: 28px; padding: 10px; width: 200px; transition: 0.5s; /* specifies the interval on animation occurs */ cursor: pointer; /* specifies cursor type */ margin: 5px; height:60px; } .button span{ cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after{ content: '»'; /* specifies content of div */ position: absolute; opacity: 0; /* specifies opacity or transparency level */ top: 0; /* specifies distance top */ right: -20px; /* specifies distance right */ transition: 0.5s; } .button:hover span{ padding-right: 25px; } .button:hover span:after{ opacity: 1; right: 0; } #cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:block; } #loginscreen{ height:300px; width:400px; z-index:10; background-color:white; no-repeat; border:7px solid #cccccc; border-radius:10px; margin-left:35%; margin-top:12%; position:relative; padding-top:10px; font-family:"myriad pro"; font-size:18px; } .cancel{ display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:32px; width:32px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; border-radius:36px; cursor: pointer; } p1{ font-style: italic; overflow: hidden; text-align: center; } p1:before, p1:after{ background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 40%; } p1:before{ right: 0.5em; margin-left: -50%; } p1:after{ left: 0.5em; margin-right: -50%; } #searchbar{ background:url(../images/searchbarbg.png) no-repeat scroll; padding-left:30px; height:24px; width:180px; border-radius:36px; } .product{ height:290px; width:200px; float:left; border: 5px solid black; border-radius:10px; margin-left:3%; margin-top:3%; font-size:16px; text-align:center; cursor:pointer; } .product:hover{ border:5px solid #ed1c24; } table{ border-collapse: collapse; } table, td, th{ border: 0px solid black; } #shoppingtab{ display:none; height:670px; width:400px; background-color:white; color:black; position:relative; margin-top:-2px; border-radius:10px; color:black; border:1px solid #323232; padding:10px; float:right; z-index:50; } .plusbutton{ height:25px; width:25px; border:1px solid black; background-color:#323232; float:left; border-radius:5px 0px 0px 5px; color:white; cursor:pointer; } .minusbutton{ height:25px; width:25px; border:1px solid black; background-color:#323232; float:left; border-radius:0px 5px 5px 0px; color:white; cursor:pointer; } .quantitybox{ height:23px; width:25px; border-top:1px solid black; border-bottom:1px solid black; background-color:white; float:left; text-align:center; line-height:24px; } .smallproduct{ height:50px; width:390px; float:left; border: 5px solid black; border-radius:10px; font-size:16px; cursor:pointer; margin-bottom:10px; overflow:hidden; } .smallproduct:hover{ border:5px solid #ed1c24; } /* #ed1c24 red, #323232 grey */ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div style="float:right; font-family:'myriad pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px"> <div onmouseover="document.getelementbyid('shoppingtab').style.display='block';" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px"> <img src="images/shoppingcart.png" height="30px"/> shopping cart (<span id="numberofitems">0</span>) </div> <div id="shoppingtab"> shopping cart<br /> <div class="smallproduct" style="margin-top:5px" id="thmbproduct0"></div> <div class="smallproduct" id="thmbproduct1"></div> <div class="smallproduct" id="thmbproduct2"></div> <div class="smallproduct" id="thmbproduct3"></div> <div class="smallproduct" id="thmbproduct4"></div> <div class="smallproduct" id="thmbproduct5"></div> <div class="smallproduct" id="thmbproduct6"></div> <div class="smallproduct" id="thmbproduct7"></div> <div class="smallproduct" id="thmbproduct8"></div> total: $<span id="totalprice">00</span>.00 </div> <span id="topnavbar" style="float:right; font-size:24px; margin-top:5.5px"> </span> </div> <div style="float:right; clear:right"> <!-- navigation menu --> <div style="position:relative"> <!-- container of navigation menu --> <div id="slider"></div> <!-- slider bar --> <a href="index.html"><div id="one" class="item"><div class="inside">home</div></div></a> <!-- 1 of buttons --> <a href="about.html"><div id="two" class="item"><div class="inside">about us</div></div></a> <a href="shop.html"><div id="three" class="item"><div class="inside">shop</div></div></a> <a href="contact.html"><div id="four" class="item"><div class="inside">contact</div></div></a> </div> </div> </div> <div class="body"> <!-- body --><br /> <span style="font-size:50px">welcome store.</span><br /> <table width="90%" style="margin-left:5%; margin-bottom:2%"> <tr> <td style="width:20%; border-right:solid black 1px; border-bottom:solid black 1px"><b>search tools</b></td> <td style="border-bottom:solid black 1px"><b>products</b></td> <td style="border-bottom:solid black 1px"><span style="float:right; margin-bottom:1%">search products... <span style="color:#666"><i>(e.g. mirage sedan)</i></span> <input type="text" id="searchbar" onkeyup="searchproducts(this.value)"/></span></td> </tr> <tr> <td style="border-right:solid black 1px; padding-top:3%" valign="top"> <b>sort type:</b><br /><br /> <select id="sorttype"> <option value="atoz">a z</option> <option value="ztoa">z a</option> <option value="lowtohigh">price (low high)</option> <option value="hightolow">price (high low)</option> </select> <br /><br /><form><b>price range:</b><br /><br /><input id="pricerange" step="100" value="42000" min="12000" max="42000" type="range"/><div id="rangeval">0</div><br /><br /><b>model type:</b><br /><br /><input type="radio" name="model"/>car<br /><input type="radio" name="model"/>suv</form></td> <td colspan="2"> <div class="product" id="product0"></div> <div class="product" id="product1"></div> <div class="product" id="product2"></div> <div class="product" id="product3"></div> <div class="product" id="product4"></div> <div class="product" id="product5"></div> <div class="product" id="product6"></div> <div class="product" id="product7"></div> <div class="product" id="product8"></div> </td> </tr> </table> </div> <div class="footer"> <!-- footer --> <br />this footer</span> </div> </div> <div id="cover"> <div id="loginscreen"> <center id="content"><br /> <span style="font-size:45px" id="popuptitle">welcome!</span><br /> <span id="popupdescription">please log in or sign up.</span><br /> <button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="loginmenu()"><span>log in</span></button><br /><p1>or</p1><br /> <button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="signupmenu()"><span>sign up</span></button> </center> <a onclick="document.getelementbyid('cover').style.display = 'none'" class="cancel">×</a> </div> </div> desired functionality issue 1
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style> .container{ width:960px; margin:auto; } .header{ width:960px; height:100px; background-color:#06f; float:left; } .trolley{ width:150px; height:30px; background-color:white; float:right; border-radius:10px; color:black; border:1px solid black; line-height:30px; font-family:"calibri"; cursor: pointer; } .shop{ width:960px; height:700px; background-color:white; float:left; font-family:"calibri light"; padding:20px; } #shoppingtab{ display:none; height:400px; width:400px; background-color:#ccc; color:black; position:relative; margin-top:1px; border-radius:10px; color:black; border:1px solid black; padding-left:10px; float:right; } html{ background-color:#00f; } .product{ height:200px; width:150px; float:left; border: 1px solid black; border-radius:10px; margin-right:20px; font-size:16px; text-align:center; cursor:pointer; } .product:hover{ border:1px solid blue; } </style> </head> <body> <div class="container"> <div class="header"> <span id="name"></span><div class="trolley" onmouseover="tabdisplay('block')" onmouseout="tabdisplay('none')"><center>shopping cart <span style='font-family:webdings'>¤</span> <span id="noi" style="background-color:red; border-radius:360px; color:white; padding-left:5px;padding-right:5px">0</span></center> <div id="shoppingtab">you have selected <span id="noi2">0</span> items. total $<span id="totalprice">0</span><br/><span id="itemslist"></span></div> </div> </div> <div class="shop" style="font-size:28px">welcome, <span id="name2"></span>.<hr /><br/>products<br/><hr /> <div class="product" onclick="addtocart('sunglasses', 0, 70)">pair of sunglasses ($70)<br /><br /><span onclick="change(1)">click add cart</span></div> <div class="product" onclick="addtocart('shoes', 1, 180)">pair of shoes ($180)<br /><br /><span onclick="change(3)">click add cart</span></div> <div class="product" onclick="addtocart('belt', 2, 20)">a belt ($20)<br /><br /><span onclick="change(3)">click add cart</span></div> </div> </div> </body> </html> <script> var customername = ""; var numberofitems = 0; var total = 0; var items = []; var stat = [] for(var = 1; <= 3; a++){ stat[a] = false; } function update(){ document.getelementbyid("noi").innerhtml = numberofitems; document.getelementbyid("noi2").innerhtml = numberofitems; document.getelementbyid("totalprice").innerhtml = total; document.getelementbyid("itemslist").innerhtml = items.join("<br />"); } function tabdisplay(displaystatus){ shoppingtab.style.display = displaystatus; } function addtocart(productname, productid, price){ items[productid] = productname; total += price; numberofitems++; update(); } function removefromcart(productname, productid, price){ items.splice(productid, 1); total -= price; if(stat[productid]){ numberofitems--; } update(); } function change(i){ if(stat[i] == false){ stat[i] = true; }else{ stat[i] = false; } } function setcookie(cname,cvalue,exdays) { var d = new date(); d.settime(d.gettime() + (exdays*24*60*60*1000)); var expires = "expires=" + d.togmtstring(); document.cookie = cname+"="+cvalue+"; "+expires; } function getcookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charat(0)==' ') c = c.substring(1); if (c.indexof(name) == 0) { return c.substring(name.length, c.length); } } return ""; } function checkcookie() { var user = getcookie("customer"); if (user != "") { customername = getcookie("customer"); document.getelementbyid("name").innerhtml = customername; alert("welcome again, " + user + "."); } else { document.getelementbyid("name").innerhtml = "please set account"; user = prompt("please enter name:",""); if (user != "" && user != null) { setcookie("customer", user, 30); document.getelementbyid("name").innerhtml = user; } } } function changecookie(){ var user = getcookie("customer"); user = prompt("please enter name:",""); if (user != "" && user != null) { setcookie("customer", user, 30); } document.getelementbyid("name").innerhtml = user; } checkcookie(); </script>
for issue 1, try settimeout() function in onmouseout() function linking actual code (to make disappear) delay (in milliseconds e.g: 500)
https://developer.mozilla.org/en-us/docs/web/api/windowtimers/settimeout
if doesn't work, try putting both shoppingtab , shopcartbar in single div , use onmouseover of div display , hide shoppingtab
Comments
Post a Comment