JavaScript - Making Another Div Appear Above The Menu Bar.
Hello, I'm un-sure on what I should have called this topic so sorry for the possibly mis-leading topic name.
Firstly, my menu bar is attached to the top of the clients screen as seen here. Secondly, I've been wondering how could I make it so when a button is pressed another div around 40px in height would appear above it(that div is also attached to the clients screen). For example I saw http://9gag.com/, when you click on search button in the top right hand corner the search bar appears ontop of the menu bar. My JavaScript knowledge is very limited, I know how to make a div appear with the click of a button, but how can I make it be attached to the top of the clients browser and the menu bar in under it? Codes Menu bar Code: <ul id="menu"> <li><a href="index.php">Home</a></li> <li><a href="Online.php">Server</a> <ul> <li><a href="Online.php">Server</a></li> <li><a href="Bans.php">Bans</a></li> <li><a href="Search.php">Search</a></li> <li><a href="rules.php">Rules</a></li> </ul> </li> <li><a href="http://thepilotslife.com/forums">Forums</a></li> <li><a href="Donate.php">Support Us</a> <ul> <li><a href="Donate.php">Support Us</a></li> <li><a href="Donate.php">Donate</a></li> <li><a href="Ad.php">Advertising</a></li> </ul> </li> <li><a href="Highscores.php">Highscores</a></li> <li><a href="Airlines.php">Airlines</a></li> <li><a href="Forms.php">Forms</a> <ul> <li><a href="">Forms</a></li> <li><a href="">Report Player</a></li> <li><a href="BanAppeals.php">Appeal Ban</a></li> </ul> </li> <?php echo "<li><a href='Help.php'>Help</a>"; echo "<ul>"; echo "<li><a href='Help.php'>Help</a></li>"; echo "<li><a href='Help.php'>Topics</a></li>"; echo "<li><a href='Help.php?submit=1'>Submit</a></li>"; if(isset($_SESSION['username'])) { if($_SESSION['Admin'] == 5) { echo "<li><a href='ViewHelp.php'>New Topics</a></li>"; } } echo "</ul>"; echo "</li>"; if(isset($_SESSION['username'])) { echo "<li><a href='user.php?user=$_SESSION[username]'>$_SESSION[username]</a>"; echo "<ul>"; echo "<li><a href='user.php?user=$_SESSION[username]'>$_SESSION[username]</a></li>"; echo "<li><a href='logout.php'>Logout</a></li>"; echo "</ul>"; } else { $path = $_SERVER['SCRIPT_NAME']; echo "<li><a href='login.php?path=$path'>Login</a></li>\n"; } ?> </ul> Menu bar CSS code. Code: #menu { height: 34px; position: fixed; width: 100%; z-index: 15; top: 0; } #menubar { color: #B4B4B4; border-top: 1px solid #363636; border-bottom: 1px solid #363636; background: #292929; background-image: -moz-linear-gradient(top, #292929, #333, #232323); background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#232323), color-stop(0.5, #333)); background-repeat: repeat; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#292929, endColorStr=#232323); } #menubarcont { width: 900px; height: 34px; } #menubarcont ul { margin: 0; padding: 0; list-style: none; } #menubarcont ul li { display: block; position: relative; float: left; } #menubarcont li ul { display: none; } #menubarcont ul li a { display: block; text-decoration: none; white-space: nowrap; } #menubarcont li:hover ul { display: block; position: absolute; } #menubarcont li:hover li { float: none; font-size: 11px; } #menubar ul li { display: inline; } #menubar ul li a { float:left; line-height: 34px; font-size: 12px; width: 100px; margin: 0 0 0 0px; text-decoration: none; font-family: 0.75em/1.5 'Lucida Grande', sans-serif; color: #B4B4B4; background: #292929; background-image: -moz-linear-gradient(top, #292929, #333, #232323); background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#232323), color-stop(0.5, #333)); background-repeat: repeat; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#292929, endColorStr=#232323); } #menubar ul li a:hover { color: #FFFFFF; background: #222; } Thanks for reading and hopefully somebody can point me in the right direction. Similar TutorialsHi there, I am looking to make a javascript hover menu. Like the main hover menus at websites like... http://www.godaddy.com and http://www.mediatemple.com How can i do this? Are there any tutorials? And is javascript the best language to do this in, or ajax or web2.0 ? Hey guys! First of all I dont want anyone to do it all for me, tho if u want to sure! "Else please help me out with just saying where I should start." I have done some simple dice games etc with JS and thats about it. Anyways, Im trying to do a DHTML menu/form with JS, if u click on one option only the menu it self should change so u dont get into another HTML file coz I wanna put it all on the same file ( exept for the "SEND" link ). (Check the pictures I uploaded) If u press "contact" the menu it self should get larger with the contact adress bellow, And if u press SEND u should get into another contact form where u have to fill out ur information. And when u filled out ur name the contact form should get even bigger with more questions to fill out. - Once again check the pictures I uploaded if u dont know what im talking about pic1: http://i403.photobucket.com/albums/pp115/kyth1/send.jpg pic2: http://i403.photobucket.com/albums/p...yth1/send2.jpg Thx - / Jul Hi Exprts, I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS. Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all. Please suggest me any solutions for this. Thank you in advance. Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.
I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours. this is the html: Code: <ul> <li><a href="1.php">Things</a></li> <li><a href="2.php">Animals</a> <ul> <li><a href="2-1.php">Cani</a> <ul> <li><a href="2-1-1.php">Domestic dogs</a></li> <li><a href="2-1-2.php">Wolves</a></li> </ul> </li> <li><a href="2-2.php">Felidae</a> <ul> <li><a href="2-2-1.php">Domestic cats</a></li> <li><a href="2-2-2.php">Wild cats</a></li> </ul> </li> </ul> </li> <li><a href="3.php">Humans</a></li> </ul> the css is as follows: Code: div#s1 { width: 200px; /* menu width */ } div#s1 ul { background-color: #036; list-style-type: none; /* get rid of the bullets */ padding:0; /* no padding */ margin:0; /* no margin for IE either */ } div#s1 ul li { margin: 0; padding: 0; background-color: #036; display:block; border-top: 1px solid white; /* lines */ } div#s1 ul li a { display: block; /* lines extend to right, make area clickable */ color: white; background-color: #036; padding: 3px 3px 3px 23px; margin:0; text-decoration: none; height:15px; /* hint for IE, alternatively remove whitespace from HTML */ } div#s1 ul ul li a { margin-left: 20px; /* indent level 1 */ } div#s1 ul ul ul li a { margin-left: 40px; /* indent level 2 */ } div#s1 ul ul ul ul li a { margin-left: 60px; /* indent level 3 */ } div#s1 li ul, div#s1 li.open li.closed ul { display: none; /* collapse */ } div#s1 li.open ul { display: block; /* expand */ } div#s1 ul li.open a { background-image: url(bullet_open.gif); background-repeat: no-repeat; } div#s1 ul li.closed a { background-image: url(bullet_closed.gif); background-repeat: no-repeat; } div#s1 ul li.leaf a { background-image: url(bullet_leaf.gif); background-repeat: no-repeat; } div#s1 li.active a { background-position: 0px -20px; color: red; /* highlight text */ } div#s1 li.active li a { background-position: 0px 0px; color: white; /* fix lower levels */ } div#s1 ul li a:hover { color: red; background-color: #06C; /* rollover effect */ } and finally the javascript: Code: var menu_active_class = "active"; var menu_leaf_class = "leaf"; var menu_open_class = "open"; var menu_closed_class = "closed"; //the default page that is displayed if URL ends in / var menu_default_page = "index.php"; var menu_url; //main function //menu_id : id of the element containing the navigation function menu_main(menu_id) { var url = location.href; if (url.lastIndexOf("/") == (url.length-1)) { url = url+menu_default_page; } if (url.lastIndexOf("?") >= 0) { url = url.substring(0, url.lastIndexOf("?")); } if (url.lastIndexOf("#") >= 0) { url = url.substring(0, url.lastIndexOf("#")); } menu_url = url; var main = document.getElementById(menu_id); if (!main) alert("No element with id '"+ menu_id +"' found"); menu_traverse(main); } /* Walks down the subtree and on the way back sets properties. returns bit set 1: set = element is a node, unset = element is a leaf 2: set = element contains the active node 4: set = element is the active A node */ function menu_traverse(element) { var props = 0; // walk down for (var i=0; i<element.childNodes.length; i++) { var child = element.childNodes[i]; props |= menu_traverse(child); // aggregate bits } // on the way back now switch (element.tagName) { case "UL": props |= 1; break; case "LI": var c1 = (props & 1) ? ((props & (2|4)) ? menu_open_class : menu_closed_class) : menu_leaf_class; element.className = element.className ? element.className+" "+c1 : c1; if (props & 4) { if (!(props & 2)) element.className += " "+menu_active_class; props |= 2; props &= 1 | 2; // reset bit 4 } break; case "A": if (props & 2) break; // once is enough var href = element.getAttribute("href"); if (menu_isSameUrl(menu_url, href)) props |= 4; break; } return props; } //matches two URIs when href is the last part of url //.. and . are correctly resolved function menu_isSameUrl(url, href) { var a = url.split(/[?\/]/i); var b = href.split(/[?\/]/i); var i = a.length - 1; var j = b.length - 1; while ((i >= 0) && (j >= 0)) { if (b[j] == "..") { j-=2; continue; } if (a[i] == "..") { i-=2; continue; } if ((b[j] == ".") || (b[j] == "")) { j--; continue; } if ((a[i] == ".") || (a[i] == "")) { i--; continue; } if (! (a[i] == b[j])) return false; i--; j--; } return true; } New to this forum but hope this will explain my problem, any help is much appreciated! thanks!! Jesper I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code: var NoOffFirstLineMenus=7; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='white'; // Background color when mouse is not over on subs var HighBgColor='black'; // Background color when mouse is over var HighSubBgColor='black'; // Background color when mouse is over on subs var FontLowColor='black'; // Font color when mouse is not over var FontSubLowColor='black'; // Font color subs when mouse is not over var FontHighColor='white'; // Font color when mouse is over var FontSubHighColor='white'; // Font color subs when mouse is over var BorderColor='black'; // Border color var BorderSubColor='black'; // Border color for subs var BorderWidth=1; // Border width var BorderBtwnElmnts=1; // Border between elements 1 or 0 var FontFamily="arial,comic sans ms,technical" // Font family menu items var FontSize=9; // Font size menu items var FontBold=1; // Bold menu items 1 or 0 var FontItalic=0; // Italic menu items 1 or 0 var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right' var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right' var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static var ChildOverlap=.2; // horizontal overlap child/ parent var ChildVerticalOverlap=.2; // vertical overlap child/ parent var StartTop=05; // Menu offset x coordinate var StartLeft=05; // Menu offset y coordinate var VerCorrect=0; // Multiple frames y correction var HorCorrect=0; // Multiple frames x correction var LeftPaddng=3; // Left padding var TopPaddng=2; // Top padding var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL var MenuFramesVertical=1; // Frames in cols or rows 1 or 0 var DissapearDelay=1000; // delay before menu folds in var TakeOverBgColor=1; // Menu frame takes over background color subitem frame var FirstLineFrame='navig'; // Frame where first level appears var SecLineFrame='space'; // Frame where sub levels appear var DocTargetFrame='space'; // Frame where target documents appear var TargetLoc=''; // span id for relative positioning var HideTop=0; // Hide first level when loading new document 1 or 0 var MenuWrap=1; // enables/ disables menu wrap 1 or 0 var RightToLeft=0; // enables/ disables right to left unfold 1 or 0 var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover var WebMasterCheck=0; // menu tree checking on or off 1 or 0 var ShowArrow=1; // Uses arrow gifs when 1 var KeepHilite=1; // Keep selected path highligthed var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} // Menu tree // MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width); // For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg" Menu1=new Array("Home","","",3); Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150); Menu1_2=new Array("Acknow","Acknowledgement.htm","",0); Menu1_3=new Array("Prayer","Prayer.htm","",0); Menu2=new Array("About Us","","",4); Menu2_1=new Array("Debra","bio.htm","",0,20,150); Menu2_2=new Array("Seamus","Seamus.htm","",0); Menu2_3=new Array("Locations","location.htm","",0); Menu2_4=new Array("Contact Us","contact.htm","",0); Menu3=new Array("Services","","",7); Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150); Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0); Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0); Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0); Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0); Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0); Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0); Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0); Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0); Menu6=new Array("Articles","","",3); Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150); Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0); Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0); Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0); Okay so to be short, I'm trying to make a script similar to a link checker but instead of having to input each link in one by one and click a button (A button saying Validate, for instance), I was looking for something that would do it automatically? Example - 1. First I input the link http://www.example.com/posts.php?do=1000000000 and click Start or Validate. 2. After clicking Start or Validate, the validator or script would begin checking links, modifying the http://www.example.com/posts.php?do=1000000000 to http://www.example.com/posts.php?do=1000000001 and so on and so on, until it reached all 9's. 3. After the scanning, every existent link (Meaning links that didn't give the 404, or re-direct to another page) would be displayed in the page below or a log file. I really appreciate the help everyone, since I'm still into learning about Javascript. Thanks in advance! I'm working on making a searchable javascript and DOM reference...A chm like what php has. I mainly need it for myself because I don't always have access to the net. I was wondering if anyone would like to contribute? Hi all, I have a client who wants a gallery of images to pop up on her enter page similar to this site, http://bit.ly/mUscmo . It won't be identical, but she likes the way the images all pop up and then just stay there. I know how to function JavaScript, but I don't know how to write it from scratch. Is there any where I could find a code that does something similar to this? Or, does anyone know the basic coding that I'd need for this? Thanks! Q Right now I am using the following method to show/hide divs containing videos. html Code: <div class="vidPop" id="vidPop"> <div class="vidFrame" id="vidFrame"> <iframe id="Iframe1" src="http://player.vimeo.com/video/xxxxxxx1" width="640" height="360" frameborder="0"></iframe> <div class="vidClose"><a href="#" onclick="vidPopdown()"><img src="images/closeban.png" width="52" height="52" alt="close" /></a></div> </div> </div> <div class="vidPop2" id="vidPop2"> <div class="vidFrame2" id="vidFrame2"> <iframe id="Iframe2" src="http://player.vimeo.com/video/xxxxxxx2" width="640" height="360" frameborder="0"></iframe> <div class="vidClose"><a href="#" onclick="vidPopdown2()"><img src="images/closeban.png" width="52" height="52" alt="close" /></a></div> </div> </div> js Code: function vidPopup() { var o = document.getElementById('vidPop'); o.style.visibility = 'visible'; o = document.getElementById('vidFrame'); o.style.visibility = 'visible'; } function vidPopdown() { var o = document.getElementById('vidPop'); o.style.visibility = 'hidden'; o = document.getElementById('vidFrame'); o.style.visibility = 'hidden'; document.getElementById('Iframe1').src = document.getElementById('Iframe1').src } function vidPopup2() { var o = document.getElementById('vidPop2'); o.style.visibility = 'visible'; o = document.getElementById('vidFrame2'); o.style.visibility = 'visible'; } function vidPopdown2() { var o = document.getElementById('vidPop2'); o.style.visibility = 'hidden'; o = document.getElementById('vidFrame2'); o.style.visibility = 'hidden'; document.getElementById('Iframe2').src = document.getElementById('Iframe2').src } all of this works just fine, but now I am adding yet another video, and I know that this isn't the best way to go about doing this. I ought to be able to use 1 function and tell it which iframe to load, however I dont really know javascript. Any and all help on this would be greatly appreciated. I'm decent at JavaScript but I have no idea how I should go about making a calculator. So far I'll drop a bunch of buttons down that all onclick to a function (a,b) and then it will add or w/e then return. How would I incorporate multiple methods such as subtraction or multiplication though? Basically I'm confident I the ability to code or learn to make this calculator, just have no idea how to set this up, thanks. ? how would i make it for a menu so you could press it and it would go down to click on a link.
I have an assignment for a class that I am not sure how to approach. A string, a noun, is input and the program is supposed to make it plural based on the ending. If it ends in a double consonant then I add one ending, if it ends in a vowel I add a different one and then if it ends in two vowels or two consonants I add a third, different ending. I am supposed to do this using string methods. For the project the vowels are A, C, L, and S. I have to read the data in using the string tokenizer. I am not sure how to approach making the loops I need to use to make the words plural. Can anyone help?? EDIT: I have to use if statements to do this. OK Once again not out to spam . I am confused on this assignment? this is what i need to do The Sieve of Eratosthenes An integer is a prime number if it is evenly divisible by only itself and 1. There are several ways to find all prime numbers within a given range of integers, and the Sieve of Eratosthenes is an algorithm for to do just that. It operates as follows: Create an array with all elements initialized to 1 (true). Array elements with prime subscripts will remain as 1. All other array elements will eventually be set to zero. Starting with array subscript 2 (subscript 1 must be prime), every time an array element is found whose value is 1, loop through the remainder of the array and set to zero every element whose subscript is a multiple of the subscript for the element with value 1. For array subscript 2, all elements beyond 2 in the array that are multiples of 2 will be set to zero (subscripts 4, 6, 8, 10, etc.); for array subscript 3, all elements beyond 3 in the array that are multiples of 3 will be set to zero (subscripts 6, 9, 12, 15, etc.); and so on. When this process is complete, the array elements that are still set to 1 indicate that the subscript is a prime number. These subscripts can then be printed. Write a script that uses an array of 1000 elements to determine and print the prime numbers between 1 and 999. Ignore element 0 of the array. Ok for anyone who may understand, what am i supposed to create as output? Am i supposed to get a one big chart of numbers? or do i get a forever flow of numbers? suggestions please I am not really looking for code, just want some idea of what am i supposed to make as output? thanks can u like make games like pong wikth javascript? my friend said he did, but i dont think u can.
hey guys, new to the forum here but i think i may be staying here for the long haul i've lurked around here a while but recently i havent been able to find a solution to something i'm having trouble with. i need to create a script that allows me to take an image and a button and apply it to the page the button will have a value of "Start" and when the "onClick" event is triggered the image will begin to reposition itself towards the right side of the page (as if it were panning towards the right, like if it were on wheels). once it reaches the end of the window i have get it to come back to the starting position and just keep on looping. the trickiest part (imo) is getting the value of the button to change to "stop" and onClick it needs to reset everything back to neutral. now i am a HUGE javascript "nub" and i dont want someone to do the code for me, i just want some help. i need to learn this. i'll post what i have so far in post #2. if anyone can help with this ASAP i would love you forever. thanks! I need to set javascript so that if the time is: Less than 11. More than 11.15 but less than 12.50. More than 13.45 but less than 15.30. it will redirect the user to a choosen URL. Here is my general idea: Code: var d = new Date(); var hours = d.getHours(); var minutes = d.getMinutes(); if (hours > ect............) { alert("Alert Here") window.location = "URL HERE"; } So can anyone help me here I would REALLY appreciate it thanks So simply put. You are redirected away from the page UNLESS it is 11.00 -> 11.15 OR 12.55 -> 13.45 OR past 15.30 Hi, just a quick question. Is it possible to make an array lowercase at all? or can you only do this with a string? Thanks. Hi all, I'll get it out their early, I am somewhat of a javascript novice. Here is the code I am working with: Code: <script type="application/javascript"> $(document).ready(function() { var numitems = $("#foo6 > li").length; var secondstartpoint = numitems -3; }); </script> <script type="text/javascript" language="javascript"> $(function() { $("#foo6").carouFredSel({ width : 136, height: 822, scroll : { items:1 }, items : { visible: 6, start: secondstartpoint }, easing:"swing", auto : false, prev : "#next3", next : "#prev4", direction:"down", align:"left" }); }); </script> As you can probably see I am trying to set the start point of a jquery carousel to equal a variable that I have created. You can see I have tried " start: secondstartpoint", but this isn't working. I think possibly because the way the plugin is formatted so that the "start" option can only equal a number. Can anyone shed some light on this issue and perhaps even suggest a solution? Thanks in advance guys Dan dear all i have some read only text box which i want to get in write mode the code i am trying is.. function f2(txt1,txt2,txt3) { document.form1.txt1.readOnly=false; document.form1.txt2.readOnly=false; document.form1.txt3.readOnly=false; } <input type="text" value="<%=rset.getString(1)%>" readonly id="tex" class="tb2" name="u_name_0"></td> <td><input type="text" value="<%=rset.getString(2)%>" readonly class="tb2" name="u_pass_0"></td> <td><input type="text" value="<%=rset.getString(3)%>" readonly class="tb2" name="u_role_0"></td> <td><input type="submit" value="delete" name="submit_<%= i%>" class="tb3"></td> <td><input type="button" value="update" onClick="f2('u_name_0','u_pass_0','u_role_0')"></td> but its not working.. some body help me out.. |