/    Sign up×
Community /Pin to ProfileBookmark

How to do this with Javascript?

Copy linkTweet thisAlerts:
Nov 16.2009

I’m wondering if it’s possible to create a similar menu with boxes/buttons like this site:
[url]http://dreamnoir.tv[/url]

I want to create something similar to the “dreamnoir.tv” and “info” boxes (not the “prev” and “next” boxes).. and would like to have them float on top of the other content..

How can I do this with e.g. jQuery? Is there any plugins that can be used.. I’m a total n00b so any help or direction would be very very helpful!!

Can I do this with [url]http://fancybox.net?[/url]

cheers!

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangNov 16.2009 — jQuery lightbox, GreyBox, or one of the many lightbox versions
Copy linkTweet thisAlerts:
@kissgy1028Nov 16.2009 — Hello!

I'm sorry, but my english is bad, because I'm a hungarian man.

I have learn javascript for five days.

I have got a problem. I have got two html files. the names of the files alkalmazasok.html and alkalmazasok1.html. I have got a flash menu, and several link are placed on the flash. The flash is on the alkalmazasok.html. Three frames are on the alkalmazasok1.html. The frames names are _fejlec, _szovegresz, _lablec. The _fejlec frame contains the fejlec.html, the _lablec contains the lablec.html, and the _szovegresz contains the szovegresz.html. I want to do that, it I click on a link on the flash, the szovegresz.html replace to another html. On the flash the links are point to many different html files, which should open in the _szovegresz frame.

Please help me, how to solve this problem!

Thank you!

Bye!
Copy linkTweet thisAlerts:
@pookeyblowauthorNov 16.2009 — kissgy1028, you should create a new thread instead of replying here.
Copy linkTweet thisAlerts:
@kissgy1028Nov 16.2009 — kissgy1028, you should create a new thread instead of replying here.[/QUOTE]

How can I create a new thread?
Copy linkTweet thisAlerts:
@slaughtersNov 16.2009 — How can I create a new thread?[/QUOTE]Go here:

http://www.webdeveloper.com/forum/forumdisplay.php?f=3

Click on the "New Thread" button in the upper left
Copy linkTweet thisAlerts:
@jamesbcox1980Nov 16.2009 — pookeyblow, I think one thing that will help you is to know that a good solution for this case would be jQuery. jQuery has functions called slideUp() and slideDown() that will mimic that behavior.

I would create a 4 or 5 pixel tall DIV that when hover over it, (using onmouseover) it does a slideDown("fast") on the actual menu, which slides down in front of it. Then, when you leave the actual menu (using onmouseout) use slideUp() to make it go away.

Each will have a position:absolute to ensure they are on top of everything. Here is an example: (remember jQuery must be installed)

[CODE]
<style type="text/css">
body{
font-family: "Trebuchet MS", Arial;
font-size: 11pt;
}
#menu_trigger{
height: 5px;
position: absolute;
top:0;
width: 100&#37;;
cursor: pointer;
}
#menu_main{
height: 30px;
color: #eee;
font-weight: bold;
position: absolute;
top: 0px;
width: 100%;
cursor: pointer;
}
</style>
<script type="text/javascript">
//this requires jQuery to be installed
$(document).ready(
function(){
$("#menu_trigger").hover(
function(){
menu_trigger_timer=setTimeout("$('#menu_main').slideDown('fast')",100);
},
function(){
if(typeof menu_trigger_timer=='number'){
clearTimeout(menu_trigger_timer);
}
}
);
$("#menu_main").hover(
function(){
if(typeof menu_timer=="number"){
clearTimeout(menu_timer);
}
},
function(){
menu_timer=setTimeout("$('#menu_main').slideUp('fast')",500);
}
);
$("#menu_main").slideUp("fast");
}
);
</script>
<div id="menu_trigger"></div>
<div id="menu_main">
<div id="menu_content">home</div>
</div>
[/CODE]

It's not perfect, and obviously not styled in the way that flash menu is, but it's proof of concept and should be a good start for you. You'll notice I created a 5px tall clear div to sit at the top of the page to serve as a place to bring the menu down from. There are other, more advanced methods. Four things to note about the above code:

  • 1. the function $() is a selector created by Sizzle, and used in jQuery apps. To replace document.getElementById("id"), use $("#id"). To replace document.getElementsByClassName("className") (which actually doesn't exist in any browser but firefox), use $(".className"), just as you would with CSS. You might like to read over the jQuery selectors in jQuery's documentation, or simply google "jQuery selectors".


  • 2. the function hover() has 2 arguments. the first is the function to fire when the mouse moves over the element, and the second is the function to fire when the mouse moves out of the object. My method above is simply to plug anonymous functions in, instead of defining them and calling them by name. This was because I wasn't planning to reuse the functions, but you can call them by name too.


  • 3. the functions slideUp() and slideDown() also take 2 arguments. The first is the speed ("fast", "slow", or milliseconds), and the second is the function to fire upon completion, but is optional.


  • 4. the function ready() is a jQuery feature which allows you to fire functions when the DOM is loaded, rather than waiting until the entire Page is loaded, images and all, when using window.onload.
    • ×

    Success!

    Help @pookeyblow spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...