|
HTML - Slow Down Vertical Navigation Onmouseover
Hello All,
With building a nested vertical navigation element, I am using "onmouseover" and "onmouseout" behaviors with some CSS. The problem I have is that, for people who have a hard time clicking quickly on the left side vertical navigation submenu elements, sometimes they mouse out before they click when the mouse is over the element. I made the onmouseover area larger than the actual sub-entries, which helps, but is not good enough. What I want to do: Somehow prolong the onmouseover event to allow maybe 1.25 seconds of onmouseout before the submenu disappears, or slow down the onmouseout for the same reason. Anyone have any ideas? Thank you, edsager P.S. I include some of the relevant code below. HTML stuff: Code: <ul> <li onmouseover="this.firstChild.style.display="block"" onmouseout="this.firstChild.style.display="none""><ul class="popout"> <li class="popout"><a class="popout" href="orig_flood.html">Stuff111111111</a></li> <li class="popout"><a class="popout" href="title.html">Stuff11111111</a></li> <li class="popout"><a class="popout" href="appraisal.html">Stuff1111111</a></li> <li class="popout"><a class="popout" href="AVM.html">Stuff111111</a></li> <li class="popout"><a class="popout" href="BPO.html">Stuff11111</a></li> <li class="popout"><a class="popout" href="orig_fraud.html">Stuff1111</a></li> <li class="popout"><a class="popout" href="lien.html">Stuff111</a></li> <li class="popout"><a class="popout" href="orig_tax.html">Stuff111</a></li> </ul><a>Home</a></li> CSS stuff: Code: @charset "utf-8";
/* CSS Document */
#services a
{
display: block;
height: 100%;
cursor: default;
}
#services li:hover
{
color: #999;
border: 1px solid RGB(179, 179, 179);
background-color: RGB(230, 230, 230);
}
#services a:hover
{
color: #666;
}
#services ul.popout
{
white-space: nowrap;
width: auto;
position: absolute;
left: 180px;
background-color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
z-index: 5;
display: none;
border: 1px solid RGB(179, 179, 179);
}
#services li.popout
{
margin: 0px;
padding: 0px;
height: auto;
font-size: 10pt;
font-weight: normal;
color: #666;
}
#services a.popout
{
padding: 5px;
padding-left: 15px;
padding-right: 15px;
display: block;
height: 100%;
}
#services a.popout:hover
{
color: #333;
background-color: RGB(230, 230, 230);
cursor: pointer;
}
Similar TutorialsHi all, Graphic designer here hell bent on learning web design with a question probably asinine for all those viewing but vexing to me for the last week. I have a site beautifully designed (can be seen here as a static jpeg) and seemingly straight forward and basic but making it functional on the web as I designed is proving to be quite the arduous task. I have many questions concerning this project but I'll keep this thread focused on the code for positioning images on the navbar. I have the buttons (67px by 14px) and sidebar (36px by 594px) all measured out and have tried a few different semantics to accomplish this but all for not. The images always end up stacking in the top left corner. HTML Code: <body>
<div id="butttons">
</div>
<div id="nav">
<img src="images/layout/images/Side_nav.png"/>
</div>
<div id="butttons">
<div id="nav_Home">
<img src="images/layout/images/Home.png"/>
<div id="nav_Portfolio">
<img src="images/layout/images/Portfolio.png"/>
<div id="nav_Contact">
<img src="images/layout/images/Contact.png"/>
</div>
</body>
And then this is the Refferenced style sheet HTML Code: #nav {
position: absolute;
top: 0px;
left: 0px;
}
div.nav_side {
background-image: url(images\layout\Side_nav.gif);
background-repeat: no-repeat;
background-position: top center;
width: 36px;
height: 594px;
}
#buttons {
position: absolute;
background-repeat: no-repeat;
background-position: top center;
top: 500px;
left: 36px;
}
.nav_home {
background-image: url(images\layout\Home.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 552; left: 35;
width: 67px;
height: 14px;
}
.nav_Portfolio {
background-image: url(images\layout\Portfolio.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 566; left: 35
width: 67px;
height: 14px;
}
.nav_Contact {
background-image: url(images\layout\contact.gif);
background-repeat: no-repeat;
background-position: top center;
style="position: absolute; top: 580; left: 35;"/>
width: 67px;
height: 14px;
}
I literally just started learning Html /CSS / Java a month ago; spare no details! ANY help with ANY (text formatting, background gradient that adjusts relative to a screen size, rollovers on the nav etc...) part of putting this site together will be more appreciated then most can fathom. I'd be willing to exchange some graphic work if any of you stuck this out to the end with me. Hi, I recently taught my self HTML and CSS so i'm still a bit shaky i started making a website to practice. i made a website with a top nav bar and a side nav bar. i can't seem to get my text to sit in the corner of both like in most websites it just seems to sit in the middle of the vertical side bar here is my HTML code and CSS code HTML Code: <!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>Testing... 1 2 3</title> <link rel="stylesheet" type"text/css" href="CSS1.css" /> </head> <body> <h1> Testing Website </h1> <ul id="nav-list"> <li><A href=Home>Home</A></li> <li><A href=HTML>HTML</A></li> <li><A href=CSS>CSS</A></li> <li><A href=JavaScript>JavaScript</A></li> <li><A href=XML>XML</A></li> <li><A href=PHP>PHP</A></li> <li><A href=SQL>SQL</A></li> </ul> <ul id="side-bar"> <li><b>HTML Intro</b></li> <li><A href=SQL>HTML Home</A></li> <li><A href=SQL>Intro</A></li> <li><A href=SQL>Getting Started</A></li> <li><b>Basics</b></li> <li><A href=SQL>Basics</A></li> <li><A href=SQL>Elements</A></li> <li><a href=SQL>Attributes</a></li> </ul> <p> lets have a look </p> </body> </html> HTML Code: @charset "utf-8";
/* CSS Document */
body {
background-color:black;
color:white;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align:center;
}
ul#nav-list {
list-style: none;
margin: 0;
padding: 0;
width: 750px;
height: 20px;
}
ul#nav-list li {
display:inline;
}
ul#nav-list li a {
text-decoration:none;
padding:5px 0;
width:100px;
background: #999;
color:#fff;
float:left;
text-align:center;
border-left:1px solid #000;
}
ul#nav-list li a:hover {
background-color:#666;
}
ul#side-bar {
list-style: none;
margin:0;
padding:0;
width: 100px;
}
ul#side-bar li a {
text-decoration:none;
padding:5px 5px;
background:#999;
color:#FFF;
float:left;
width: 90px;
text-align: center;
margin-right: 20px;
}
ul#side-bar li a:hover {
background:#666;
}
p {
color:#FFF;
}
If I have many PHP includes, will this slow down the loading of the page? I may have around 6 at a time on a single page. <? $path = $_SERVER['DOCUMENT_ROOT']; $path .= "/item.php"; include_once($path); ?> I usually have around 6 of these on a page at a time, will this slow down the loading of my website. I use this for updating my website, since all the includes come from the same sources, e.g. navbar on all pages comes from /include/navbar.php then I will have to edit navbar.php to edit the navbar on all pages. Am I using the correct method for website updating, or is there a more efficient way? Hi , I've been wondering why my simple HTML website has slower drop down menu's at the top at LaptopBackpacks.com It takes a moment for the menu to drop down at the top ..Mens | Womens | Youth Compared to my competitor who's drop down menu's drop now instantly after hovering over them. What causes this slower speed? Suggestions? Hi There, First post Ive just redesigned my site in HTML and uploaded it to www.sibarber.co.uk Occasionally I find the front page (index) taking nearly a minute to load which is obviously far too long. Im at a loss to understand why. I use a fowarding source (Freeparking) to redirect visitors to my 'true' web address which is http://www.users.globalnet.co.uk/~sibarber/ . Maybe this is part of the problem but my previous site at this was fine. Im not particularly HTML savvy, so if anyone can throw some light on the issue I would appreciate it. S Hi, I've just put some of the finishing touches to www.oisinmcgann.com which works just fine in IE7, Firefox, Safari and every other browser I've checked. Except IE6 (of course), where some of the pages just hang loading one of the background images. There's a lot of CSS and some transparent PNGs involved, but I've followed tutorials and tips on-line and think everything should be technically alright. More annoying is that there are three layouts involved. The one on the home page seems to work fine, while if you check out the books>Mad Grandad or books>Forbidden Files IE6 just gives up after putting in the CSS menus and the text. Could any give me some pointers on what I can do here? (Aside from ask everyone visiting the site to upgrade...) Cheers, M Hi, adding rows with the clear:both; attribute causes a huge slow-down and I need an alternative or a solution. I'm composing a friend's resume in html. I'm using nested divs to create a two column format. Each row is a div block that contains two smaller divs--one for each column. Each row uses the attribute clear:both; so that the next row will form cleanly beneath it. I am getting the desired format, but as I add more and more rows, the web browser becomes dramatically slower. 20 rows will make the page un-loadable and the browser crashes. Am I doing something wrong or is there another way to do this? Hi people, hopefully you can help. I've made a website for a artist-run collective here in Edinburgh, Scotland and everything is getting under way. I had a few questions with some issues I have been encountering and perhaps you could send me some information on if there is anyway to fix this. http://www.modular9.co.uk/ That's the site. Some things aren't up yet but you get the idea. The main issue is with the index page anyway. I have used a collection of image paths and rollovers and if you take a look at the source you'll see my very basic, yet required, html/css. One of the issues is the delay in rollover. I understand it is because it is loading a whole image each time you rollover the tally marks, but is there any way to speed this up? Or use a script that isn't as ineffective as javascript? I don't mind the delay but I know that the rollover is meant to exist so I give it a second or two, but people coming to the site for the first time might not notice the navigation and leave :/ Also, on some of my friend's computers at college, when they click on, artists, or the about section, or contact, for example, the background doesn't show up as the colours I put down. Is this because I used css to do so? Are there actually some browsers that can't take css yet? I know it's a bit vague and a general query but any tips and things would be great to make the site more effective and smooth running. Hope you are all well. Rich Hello, I have a simple html form drop down list as a quick reference and link to pages on my site. It is not nested with subcategories, however there are still hundreds of options in the list, and it is causing the page load time to slow considerably. When the list is created dynamically it is painfully slow. I tried to speed things up by making a static html file of the code and using INSERTFILE on my pages. This helped a little, but not enough to suit me. Is there a way to cache this code snippet, or something like that, to speed up the load time? Thanks! Greetings, I have a script that needs to load a ~250Mb file from an FTP server in order to function. During this 20+ minute process, the connection between the server and client is lost; is there a header I can use to make sure the connection does not timeout? Thank you and Godspeed! Hi! I've something like that:: <body> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1"> <tr> <td width="36%">Contact</td> <td width="26%"> <p align="center"> <img border="0" src="IMAGE URL ..."></td> <td width="38%"> </td> </tr> </table> </body> How can i make to when i pass mouse in Contact display another image in middle colunm? Can you help me? Any good onmouseover tutorials? Thanks. Hi All, I would like to create a little message box when the user puts the mouse cursor on a text entry in a table. The message box would contain text only. Can someone point me in the right direction for the code to do this? What I have found so far calls another webpage. Is that the only way to do it? Thanks!!! I have created an image map using a map of the USA. In this map it displays our home office and branch locations. I would like for a small box to appear (and stick) that displays the office address when/if the star or other icons are passed over. I have not done this since college and have no clue what to script. LOL, can anyone help an old fart? It won't work.... HTML Code: <a href="index.html"
onmouseover="window.status='home'; changeImages('home', 'images/home-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('home', 'images/home.jpg'); return true;"
onmousedown="changeImages('home', 'images/home-over.jpg'); return true;"
onmouseup="changeImages('home', 'images/home-over.jpg'); return true;">
<img name="home" src="images/home.jpg" width="109" height="100" border="0" alt="home"></a>
any help? hi everyone, I have a small problem. I want to implent the facebook (like), twitter (tweet) and Hyves (respect) buttons on my website. However, I dont like the styles of either one. Because they are using an iFrame, Im not able (or my skills limit me..) to change their looks. So I was thinking about creating an onmouseover event. A picture at first and when onmouseover it changes to the actual button. (IF there is a better way of hiding the button but still keep its functionallity, please tell me) The problem starts when I want to code it. I have no clue what so ever how to get this to work. Perhaps someone here can help me out? Because I have never worked with events in Expression Web 4. Thanks in advance! Ferdri3 PS. Behavior -> swap image (+ editting second img url doesnt work) Im using expression web 4 Hi Colls, I have a task such this: At onmouseover, i need to swap the jpg with marquee text. I have tried a lot of things but probably i think in wrong direction. Coudl you help about it? Thank you in advance. Hi Guys/Girls, Im in a sticky situation i have been searching the web and forums for a tutorial or example on how to create a popup box when the mouse cursor glides over it. what i want to achieve is something like this if you can please browse to http://www.uncle-buck.co.uk/Need-Mon...ncle-Buck.htm# if you hover over "See representative example >" you will see a popup box appear i want to achieve just that im not fussed on the color etc at the moment i ideally would like to get the functionality working correctly and then make it look nice later. if someone can help me i really would appreciate or even better if you know of or have seen a tutorial based on this then please do share it with me. Hope to hear from someone soon. Thanks Hello, I have a site with a big picture that use <area> and <map> tags. How can I replace piece of the big picture, by other image using OnMouseOver or by other way? (The image is defined by coords) Thank You! Big Image, and the image that I need to replace. I have a table on my page in which I have overridden the onmouseover and onmouseout event handlers. Those event handlers get called just fine when the mouse enters or leaves any of the objects contained within the table, but they do not get called when entering or leaving the table itself. Is that the expected behavior? I would have thought that those handlers would also get called for the table itself. Do I need to attach those event handlers to a higher level object (containing the table) in order for them to get called upon entry and exit of the table? Interestingly, the event handlers get called when entering or leaving a cell (a td item) of the table, but they do not get called when entering or leaving a row (a tr item) of the table. I would be happy if I could make it call the event handlers for the row as well, but so far have had no luck doing that. |
|||||||