HTML - Html Help - Hover-scrolling Menu Display
Hello All.
I have been attempting a hover-scrolling menu display for my online art portfolio, however I seem to be unable to 1) put the hover-scrolling menu display into a tab-panel 2) have a second scrolling menu display with different content, underneath the first one, which works separately (at the moment they scroll together when either one of them has the mouse-hovering on) Here are my codes = ---------------------------------------------------------------- Code: body { } div.sc_menu { /* Set it so we could calculate the offsetLeft */ position: relative; height: 280px; width: 500px; overflow: auto; } ul.sc_menu { display: block; height: 230px; /* max width here, for users without javascript */ width: 4915px; padding: 15px 0 0 15px; /* removing default styling */ margin: 0; background: url('navigation.png'); list-style: none; } .sc_menu li { display: block; float: left; padding: 0 4px; } .sc_menu a { display: block; text-decoration: none; } .sc_menu span { display: none; margin-top: 3px; text-align: center; font-size: 12px; color: #fff; } .sc_menu a:hover span { display: block; } .sc_menu img { border: 3px #fff solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; } /* Here are styles for the back button, don't look at them */ #back { display: block; width: 500px; text-align: center; color: #003469; font-size: 16px; } </style> <script type= "text/javascript">/*<![CDATA[*/ $(function(){ //Get our elements for faster access and set overlay width var div = $('div.sc_menu'), ul = $('ul.sc_menu'), ulPadding = 15; //Get menu width var divWidth = div.width(); //Remove scrollbars div.css({overflow: 'hidden'}); //Find last image container var lastLi = ul.find('li:last-child'); //When user move mouse over menu div.mousemove(function(e){ //As images are loaded ul width increases, //so we recalculate it each time var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth; div.scrollLeft(left); }); }); /*]]>*/</script> </head> <body> <div class="sc_menu"> <ul class="sc_menu"> <li><a href="javascript:popitup('attachments/Image/art1-large.jpg')"><img src="attachments/Image/art1.jpg" alt=""/><span>IMAGE 1</span></a></li> <li><a href="#"><img src="attachments/Image/art2.jpg" alt=""/><span>IMAGE 2</span></a></li> <li><a href="#"><img src="attachments/Image/art3.jpg" alt=""/><span>IMAGE 3</span></a></li> </ul> </div> </body> </html> Code: <HTML> <HEAD> <TITLE>Java Popup Window Example</TITLE> <SCRIPT language="JavaScript" type="text/javascript"> <!-- ; var newwindow = '' function popitup(url) { if (newwindow.location && !newwindow.closed) { newwindow.location.href = url; newwindow.focus(); } else { newwindow=window.open(url,'htmlname','width=404,height=316,resizable=1');} } function tidy() { if (newwindow.location && !newwindow.closed) { newwindow.close(); } } ---------------------------------------------------------------------- Code: <div class="tab-pane" id="tabPane1"> <script type="text/javascript"> tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) ); //tp1.setClassNameTag( "dynamic-tab-pane-control-luna" ); //alert( 0 ) </script> <div class="tab-page" id="tabPage1"> <h2 class="tab">TERM ONE</h2> <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script> <<<attempt to insert scroll-menu 1 >>> <<<attempt to insert scroll-menu 2 >>> </div> <div class="tab-page" id="tabPage2"> <h2 class="tab">TERM TWO</h2> <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</script> <<<attempt to insert scroll-menu here>>> </div> </div> <script type="text/javascript"> //<![CDATA[ setupAllTabs(); //]]> </script> </body> </html> ------------------------------------------------------------ Any suggestions or tips would be very much appreciated Similar TutorialsHi, I am trying to create a scrollable menu for my website and I am looking for either code for what I am trying to do, or the url of any website with a similar type of menu implemented. i have looked around quite a bit and I can't find a site with what I am trying to create. part 1: I want to customize the appearance of my scroll bar so that it uses one small Jpeg for the scroll bar and another one for the scroll handle. part 2: as different titles and sub titles on the menu are clicked the menu expands to reveal new sub categories. I need the scroll handle to only show up once the list has reached the limits of the box. the attached image is a mock up of what i am trying to create to give you a better idea. thank you very much to anyone who can help. Hello everybody! First timer here. I'm a total noob here that somehow got assigned to design our company's website. My company is very understanding about my lack of experience and is willing to send me to any training I need. So, here's my question: Go to www.whitehouse.gov. I think the pretty scrolling menu at the top is exactly the kind of thing I want on my new website. How do I make something like that? I guess this breaks down into several separate ideas: I look at the source and I see that the menu is all set on a background image file called bg-main-one.jpg. How do you design these kinds of images? I love how you can right-click the submenu and open in a new tab. A lot of these menus I've seen you can't do that. I also love how the hyperlink appears on the status bar. Why isn't it like that everywhere? Hovering the mouse over each menu's title launches a separate menu. Is that just your basic ul li list-item HTML accompaned by extremely complex CSS? So how do I create something like that? What groovy technologies do I need to know? I have a Flash menu in a top frame, with a bottom frame that holds the content. Some of the content is large and needs to be scrolled. I would like the site to appear frameless, so the menu scrolls along with the content (so if you scrolled all the way down, you wouldn't see the menu). I initially tried putting it all into another frame, but didn't have much luck with that. I'm open to any suggestions. Let me know if I need to clarify anything. Thanks. So i am startet at a webpage and wanted a cool menu to it and found one but i cant find any tutorials on how to make it the menu look like this: As U can see the "HOME" bottom is longer because of the hover effect and that what i want to hear how that i can make that... all the tuts i have found is where the images is the same size, but when i try that its not working... Plzz help me fast Ok, well I got it working perfectly on Firefox 2... I checked it on IE and the second drop down list is way off track... I put in the javascript hack given in the tutorial... but I had to tweak the code they gave a bit... basically to work with my layout. http://www.htmldog.com/articles/suckerfish/dropdowns/ Any advice on how to fix any cross browser difficulties would be great, thanks! http://www.runescapeemporium.com/newlayout I want to have a menu at the top of the screen and then when you mouse over a section a drop down menu appears with links. EDIT: how can I position the menu so it's at a specific part of the screen? Hi, I'm working on a movie database for a device that supports html. It only supports basic html though. For my index page I the characters A-Z (as well as genres) to select movies starting with that certain letter. The movie covers display in a row underneath. I want to find a way keep the characters A-Z centered in the top of the screen so when I browse further right (or left) of the screen it stays there similar to the way the background stays in place. At the moment when I browse left and right the A-Z moves with it (so it ends up moving off the screen). Does anyone know a way to keep it in place like the background. The files I'm editing are in .xsl format. They are used inconjunction with movie collectorz to make html pages. Anyhelp would be greatly appreciated. Remeber it only supports basic html, no javascript. Thanks. Hi all, I want to change the look of my blog, and am interested in the overlapping style shown in this example: http://etsytreasuryteam.blogspot.com...ingcolors.html I need to know how to have a main background and then the overlapping image shown in the example (the leaves and colored dots/berries(?)) Hope this makes sense! I know basic HTML, but am stumped with this one. I am still working on creating the images I am going to use. Any help with this would be MUCH appreciated. Thanks! So I have a page that is split into 2 columns. The left column there are expandable forms that are quite long to ask the user optional product preferences. On the right side of the page there is a much shorter, 'contact details' form. The contact details form is mandatory. The behaviour idea is that as the user scrolls down to complete the left column optional forms, the page will only scroll the left column - the contact details forms displayed in the right column stays in place to avoid a big gaping white space where the right column is empty. I'm having trouble implementing this and I haven't found a solution yet or any examples of pages with this split column behaviour online. Any advice / suggestions / examples online? Thanks! I kinda know how to add a scrolling box function to a post, but there's this problem I have with putting certain things inside of the box. So i somehow managed to get another post in scroll before when it was long .. but I CANNOT get this one to work! i mean. it only puts one part of the post inside of the scroll box. . Help greatly appreciated! Code: [align=center]TO BE ADDED TO CONTACTS.[/align] [doHTML]<center><img src='http://i39.tinypic.com/i5oscx.jpg'> <br><font color="#ddc48e" face="arial" size="2"><I>KYLER EMERY COLLINS. 8532 980 2236. THREE.</I></font> <p><div style="width: 300px; text-align:justify;"> ------------------------------------------------------------ <br><font color="#ddc48e" face="arial" size="2"><I>YOU AND I , ANARBOR.</I></font> without you, there's no reason for my story and when i'm with you i can always act the same forever, yeah if we're together we can make it better you and i we never get to sleep we're up all day we're overworked and underpaid you and i we're always stuck in repeat day by day watching time drift away as we burn away without you, there's no reason for my story and when i'm with you i can always act the same forever, yeah if we're together we can make it better ------------------------------------------------------------ </div></div></center>[/dohtml] [CODE*][CODE*][doHTML]<center><img src='300x150 image here'> <br><font color="#group color" face="arial" size="2"><I>FIRST MIDDLE LAST. #### ### ####. SPEEDIAL NUMBER.</I></font> <p><div style="width: 300px; text-align:justify;"> ------------------------------------------------------------ <br><font color="group color" face="arial" size="2"><I>RINGTONE , ARTIST.</I></font> a few lines of lyrics from ringtone. don't have to make it aligned. ------------------------------------------------------------ </div></div></center>[/dohtml] [/CODE*][/CODE*] [align=center]TO SEND A TEXT[/align] [doHTML]<center><img src='http://i39.tinypic.com/i5oscx.jpg'> <br><font color="#ddc48e" face="arial" size="2"><I>KYLER EMERY COLLINS. SENT ON MARCH 12TH.</I></font> <p><div style="width: 300px; text-align:justify;"> ------------------------------------------------------------ <br><font color="#ddc48e" face="arial" size="2"><I>NINE OH FIVE PM.</I></font> dayum. why aren't you picking up your phone? at least text me back? ------------------------------------------------------------ </div></div></center>[/dohtml] [CODE*][doHTML]<center><img src='300x150 image'> <br><font color="#group color" face="arial" size="2"><I>FIRST MIDDLE LAST. SENT ON MONTH #</I></font> <p><div style="width: 300px; text-align:justify;"> ------------------------------------------------------------ <br><font color="#group color" face="arial" size="2"><I>TIME SPELT OUT AM/PM.</I></font> message. don't block your text. ------------------------------------------------------------ </div></div></center>[/dohtml] [/CODE*] [align=center]TO CALL.[/align] [doHTML]<center><img src='http://i39.tinypic.com/i5oscx.jpg'> <br><font color="#ddc48e" face="arial" size="2"><I>INCOMING CALL FROM KYLER EMERY COLLINS...</I></font> <p><div style="width: 300px; text-align:justify;"> ------------------------------------------------------------ <br><font color="#ddc48e" face="arial" size="2"><I>NINE FORTY FIVE PM.</I></font> without you, there's no reason for my story and when i'm with you i can always act the same forever, yeah if we're together we can make it better you and i we never get to sleep we're up all day we're overworked and underpaid you and i we're always stuck in repeat day by day watching time drift away as we burn away without you, there's no reason for my story and when i'm with you i can always act the same forever, yeah if we're together we can make it better ------------------------------------------------------------ </div></div></center>[/dohtml] [CODE*][doHTML]<center><img src='300x150 image'> <br><font color="group color" face="arial" size="2"><I>INCOMING CALL/ONGOING/CALL ENDED FROM/WITH FIRST MIDDLE LAST...</I></font> <p><div style="width: 300px; text-align:justify;"> ------------------------------------------------------------ <br><font color="group color" face="arial" size="2"><I>TIME SPELT OUT AM/PM.</I></font> if you're the first to post, use the lyrics from your ringtone. if not, just do what your character is saying. do not block text. ------------------------------------------------------------ </div></div></center>[/dohtml][/CODE*] [align=center][/align] I added this at the beginning of the post: Code: [dohtml]<center>><div style="width: 430px; height: 100px; overflow: auto"> because somehow, that worked for the other post i did. i did use closing tags. So when I added that code to the original post, all that happened, was that the first part of the post was able to get inside of the box and everything else was left out. I know somewhere in there, there's conflicting tags .. or something! lol not sure. Help gladly appreciated! Or Javascript if it's the only way http://www.kirupa.com/developer/mx/captions.htm http://www.jorycordy.com/lifestyle/ Hi, I was wondering if I could include some flash animation within the html on hover, Basically I needed to make the earth spin on http://www.aroundtheworldin80dishes.net only when the mouse is hovering over it thanks I'm hoping for some help with the code to solve my problem. My site has a page devoted to a series of products. I have the names of the products running down a set of cells on the left side of a table. The product names will be linked to html pages dedicated to each of those products. I've got that under control, no problem. I'm trying to add the extra spiff of a common image area in a large merged cell just the to the right of the navigation cells and I'd like for an image of the specific product to come up in the image area when a user mouses-over the navigation cell. For example, the first nav cell is for "Lathes," so when a user mouses over the word Lathes I want a picture of a lathe to appear in the image area. When they mouse over the nav for bandsaws, I want an image of a bandsaw to come up in the same image area, etc. Is anyone willing to suggest some code to accomplish this little trick? It would be a great help. Thanks. hi all, Is there Any way to display dorpdown menu over quick time player in Dynamic HTML page like the flash parameters wmode transparent....The menu and quick time is different Td's Thanks Edit/Delete Message Help!!!! I have been looking at this for almost 6 hours and I still can't explain why my horizontal menu wrapped using Firefox and not IE. I have firefox 3 installed and some of the categories (on the same tree) wrapped and some doesn't. But if i refresh it a few times, it become normal again. This make no sense. Maybe I need to get some fresh air because i am starting to see spots on the screen. http://208.84.114.15 How to create explorer like menu in Html or java script? eg + Game(inside this Cricket and Football) when click on + sign it become like-- - Game -Cricket -Football Can anybody suggest me, by which command I can do it? Commercial Removals || Removals and Storage||Specialist Removals First off let me say I am completely new at this! I seem to be having the most basic problem you can. I wrote this in wordpad: <html> <Head> <title>first attempt</title> </head> <body> <h1>first attempt</h1> <p>First attempt. </p> </body> </html> And saved it as an Open Document Text. When I open this using Internet Explorer I noticed I could save it as an HTML document. So I did and I opened it AGAIN in internet explorer...and this comes up: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <META content="text/html; charset=windows-1252" http-equiv=Content-Type></HEAD> <BODY><PRE><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <META content="text/html; charset=windows-1252" http-equiv=Content-Type> <META name=GENERATOR content="MSHTML 8.00.7600.16853"></HEAD> <BODY><PRE>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt;&lt;HEAD&gt; &lt;META content="text/html; charset=windows-1252" http-equiv=Content-Type&gt;&lt;/HEAD&gt; &lt;BODY&gt;&lt;PRE&gt;&amp;lt;html&amp;gt; &amp;lt;Head&amp;gt; &amp;lt;title&amp;gt;first attempt&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;h1&amp;gt;and so begins my genisus&amp;lt;/h1&amp;gt; &amp;lt;p&amp;gt;a new path for my life. &amp;lt;/p&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;/html&amp;gt;&lt;/PRE&gt;&lt;/BODY&gt;&lt;/HTML&gt; </PRE></BODY></HTML> </PRE></BODY></HTML> What am I doing wrong if I just want it displayed as an offline website on my computer? I appolagize but The Missing Manual book I'm reading "Creating Web Sites" doesn't come up with this problem and says I should be able to view HTML as a website if it's on my computer using a web browser. This has probably been asked before, but while the answer is so elusive it's darned frustrating. How do I display my own code in my own browser? I'm using Expression Web 4 and Textpad. Neither of which will display my HTML code that has passed the 3WC validity process. So presumably it's a Windows 7 thing with a setting somewhere that needs to be ticked? Good day I need some help. I created a website in adobe dreamworks a while ago. I have added another link to a html file hosted on my website, but it doesn't work in IE and works fine in Chrome and Firefox. the link works, but not the whole page loads any suggestions? So here's my problem: I had to create an HTML newsletter for a client to send on a monthly basis. I've tested it in several browsers and everything seemed to be working fine, until she received a reply from one of her subscribers, (from an AOL account) with a screenshot of what the newsletter looked liked on her screen. Everything was wrong! The newsletter didn't display pictures at all, some HTML comments were showing up and extra characters and no spaces had been placed between the text. I'm pretty new to HTML and CSS, so I tried to keep it as simple as possible to not compromise browser compatibility. And in different computers and browsers it was working perfectly fine. But now with this, I've no clue how to fix it! Help?? to view the source code: www.offinterarts.org/newsletter.html |