Floating/static menus

Question

Level 2

164 points

Floating/static menus

I've added various code as snippets to try to gat a floating or static menu or image, but none seem to work.

Any ideas what I'm doing wrong?

Here are two I tried:

http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

http://www.quackit.com/css/codes/cssfloatingmenu.cfm

Thanks!

Several MacBook Pros and an iPhone 3GS (how did I ever manage before iPhones?), Mac OS X (10.6.2), An Apple user since my 1982 Europlus ll - lovely!

Posted on Feb 22, 2010 12:50 AM

Reply

Answer 1

Wyodor

Level 6

19,930 points

Feb 22, 2010 1:21 AM in response to Jagmurcredrea

Here's a static menu :

http://dl.dropbox.com/u/3563737/Lycos/Fixed.html

More about this kind of coding here :

http://www.wyodor.net/Tutorials/ImageWidget/

Don't be misled by the title. The concept is the same.

Instead of HTML Snippets, you can also use textboxes.

Here are sample pages that use textboxes and a HTML Snippet with the JavaScript.

http://www.wyodor.net/Tutorials/ImageWidget/ClickMovie.html
http://www.wyodor.net/_Demo/tmf/TMF.html
http://www.wyodor.net/_Demo/tmf/Duckmenu.html
http://www.wyodor.net/_Demo/MyHouse/

You have to study the widget-markup files, the source of the webpage to figure out the ID of each element and enable the Inspector in Safari. Or when you use Firefox you need [firebug|http://getfirebug.com>.

With some practice you can make your samples work.

Reply

Answer 2

Wyodor

Level 6

19,930 points

Feb 22, 2010 4:21 AM in response to Wyodor

Here's the first menu :

[Floating menu|http://www.wyodor.net/_Demo/FloatingMenu/Fixed.html]

And the JavaScript is in this file : [widget1_markup.html |http://www.wyodor.net/ Demo/FloatingMenu//Fixed_files/widget1markup.html]

You do the decorating of the menu.

Reply

Answer 3

Jagmurcredrea Author

Level 2

164 points

Feb 22, 2010 8:11 AM in response to Wyodor

Hi Wyodor,

Thanks for spending the time on my question. Well, I'm just in awe at what you can do, it's amazing! I wish I had 10% of your iWeb skills...

To show you what I am aiming to do, my website is here http://www.poulson.info/me/home.html

What I would like to do is make the top 50 pixels of each page static... that is my main aim. When I used your code at http://dl.dropbox.com/u/3563737/Lycos/Fixed.html it only added the black boxes to the browser background, not the page (even though iWeb showed it on the page, see http://www.poulson.info/me/wyodor.html). I'm sure I'm doing something stupid!

You've inspired me to improve my menu - I'd like to make the left menu a simple white version of your sexy top menu at http://www.wyodor.net/_Demo/tmf/TMF.html - can you advise me how, as I am almost completely non technical?

Thanks again!!!

(By the way, your link at http://www.wyodor.net/Demo/FloatingMenu//Fixed_files/widget1markup.html comes up as a blank page)

Reply

Answer 4

Wyodor

Level 6

19,930 points

Feb 22, 2010 8:35 AM in response to Jagmurcredrea

On this page :

http://www.poulson.info/me/wyodor.html

you have to show the navigation bar but hide the links in it.

It will automagically show the top bar when published.

By the way, your link at http://www.wyodor.net/Demo/FloatingMenu//Fixed_files/widget1markup.html comes up as a blank page)

The widget_markup files created by IWeb stores the stuff you paste in the HTML Snippet. I changed the HTML Snippet an hour ago.

To edit the JavaScript it's easier to have a separate JS file. Typing in the HTML Snippet is rather awkward and difficult to see. So I pasted this line of code below to embed the JS File. The result is the same. Now I can make changes without opening iWeb.

<script src="../../../duckmenu/FloatingMenu.js" type="text/javascript"></script>

BTW. This menu

http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

does not work in iWeb or any other page.

The demo page hasn't a DOCTYPE. That's why it works. iWeb pages have a DOCTYPE. Custom webpage I use also have a DOCTYPE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Reply

Answer 5

Jagmurcredrea Author

Level 2

164 points

Feb 22, 2010 9:59 AM in response to Wyodor

Hi,

I've tried and tried but the image always appears in the browser background and not the page - I've included the codeI used in the snippet in the page http://www.poulson.info/me/wyodor.html - can you see a mistake?

Not sure what's happening with http://www.wyodor.net/Demo/FloatingMenu//Fixed_files/widget1markup.html but it's still coming up blank!

Thanks,

Ian

Reply

Answer 6

Wyodor

Level 6

19,930 points

Feb 22, 2010 11:21 AM in response to Jagmurcredrea

In the inspector, display the navagation bar and hide the links.

The navigation bar should be about 60 pixels high. Then the banner will show.

Reply

Answer 7

Cyclosaurus

Level 6

12,915 points

Feb 22, 2010 6:55 PM in response to Jagmurcredrea

I've tried and tried but the image always appears in the browser background and not the page - I've included the codeI used in the snippet in the page http://www.poulson.info/me/wyodor.html - can you see a mistake?

navbar depends on two things: css line-height and feed.xml items.
you need to set navbar height with your javascript, and you need too look at css and javascript.
---------------
btw, there are other ways, here is my take:
http://www.cyclosaurus.com/iWeb3Widgets/SomeFirst_Widgets/Scrolling_NavBar.html

Reply

Answer 8

Jagmurcredrea Author

Level 2

164 points

Feb 23, 2010 4:29 AM in response to Cyclosaurus

Thanks for the info guys!

I got Wyodor's top nav bar working as a static - and then decided I didn't like it, but that's my fault.

But what I have found is this http://www.quackit.com/css/codes/cssfloatingmenu.cfm
which is very close to what I'm after - it's by far the most stable floating menu I've found, most of them shudder when scrolling but this one is rock solid.

I've tried pasting the code into an iWeb snippet, the box appears but it moves with the page - aaaarrrgggh!

Being non-technical it's SO annoying when things don't work - any ideas why this one doesn't?

Thanks again.

Reply

Answer 9

Wyodor

Level 6

19,930 points

Feb 23, 2010 9:47 AM in response to Jagmurcredrea

The css floating menu is displayed in this page :

http://www.wyodor.net/_Demo/FloatingMenu/Fixed.html

The JavaScript is here :

http://www.wyodor.net/_Demo/duckmenu/FloatingMenu.js

And this code is pasted in the HTML Snippet :

<script src="../../../duckmenu/FloatingMenu.js" type="text/javascript"></script>

The menu uses the textbox from the template where you see it. I removed the text and the decoration. The JavaScript pastes the code in the textbox.

Reply

Answer 10

Jagmurcredrea Author

Level 2

164 points

Feb 23, 2010 11:28 AM in response to Wyodor

Okay, thanks Wyodor.

I think I'm missing some skills here - if I paste <script src="../../../duckmenu/FloatingMenu.js" type="text/javascript"></script> into the snippet, what do I do with the JavaScript?

Yes, I really am that dumb.

Thanks.

Reply

Answer 11

Cyclosaurus

Level 6

12,915 points

Feb 23, 2010 4:36 PM in response to Jagmurcredrea

I think I'm missing some skills here - if I paste <script src="../../../duckmenu/FloatingMenu.js" type="text/javascript"></script> into the snippet, what do I do with the JavaScript?

you can't use wyodor's javascript as-is, because wyodor hard-coded id2 in the code.

you need to change the code, but that is not practical... because:
1) you have no control on how iweb assigns id attribute when you add an element, you can find this id after publishing - as wyodor did.
2) then you have to change the code from page to page according to the id, this is not very scalable.

I call this multi-step-processing.
-------------

that said, you can do all that with javascript... element id can be determined without post publish, but will need some nifty scheme and fancy javascript.
here is my example: http://cyclosaurus.com/iWeb3Widgets/Anchors/Anchors.html
I identify different places on the page by search thru it with javascript... look for #(some number)# and scroll to it.

everything is linked to the example.

Reply

Answer 12

Old Toad

Level 10

207,577 points

Feb 23, 2010 5:09 PM in response to Jagmurcredrea

I used Wyodor's code on these two pages:

Static Navbar

Static Background

Works for me.

Reply

Answer 13

Cyclosaurus

Level 6

12,915 points

Feb 23, 2010 5:21 PM in response to Old Toad

you need to look at the code, I know what I'm talking about.

Reply

Answer 14

Old Toad

Level 10

207,577 points

Feb 23, 2010 5:36 PM in response to Cyclosaurus

Here's the code I used and modified for my site. What is the id2 part of it? I'm not getting what you're referring to?


<script language="JavaScript" type="text/javascript">
<!--
elem = parent.document.getElementById('nav_layer');
elem.style.backgroundImage='url(<a class="jive-link-external-small" href="http://homepage.mac.com/MobileMeAccount_Name/.Pictures/StaticnavbarBG.jpg">http://homepage.mac.com/MobileMe_AccountName/.Pictures/StaticnavbarBG.jpg</a>)';
elem.style.backgroundRepeat='repeat-1';
elem.style.position='fixed';
elem.style.zIndex='100';
elem = parent.document.getElementById('body_layer');
elem.style.marginTop='150px';
// -->
</script>

Reply

Answer 15

Cyclosaurus

Level 6

12,915 points

Feb 23, 2010 5:44 PM in response to Old Toad

here is wyodor js code prodvided for ian: http://www.wyodor.net/_Demo/duckmenu/FloatingMenu.js
nothing like what you have in your static navbar code... as I say: I know what I'm talking about

Reply