|
JavaScript - Simple Horizontal Menu Move
I am trying to get the menu bar to also have a "<" on the other side, so i can control the menu to the left also, Thanks in advance
Code: <style>
#hmenu {position:absolute; overflow: hidden; left: -275px; width:350px; height:30px; border: solid 1px #339900; padding: 5px; font-family: arial, sans-serif;}
#harrow {position: absolute; left: 325px; top: 5px; border: solid 1px #339900; font-weight: bold; width:20px; height: 18px; text-align:center; background-color:#336600; }
a {text-decoration: none;}
#harrow a {color: white}
</style>
<script>
function move(menu_id,mTop,mLeft){
var obj = document.getElementById(menu_id);
obj.style.top = obj.offsetTop+mTop +"px";
obj.style.left = obj.offsetLeft+mLeft+"px";
}
</script>
</HEAD>
<BODY>
<div id=hmenu>
<a href=#>Link 1</a> | <a href=#>Link 2</a> | <a href=#>Link 3</a> | <a href=#>Link 4</a> | <a href=#>Link 5</a>
<div id=harrow><a href="#" onclick="move('hmenu',0,295)"> > </a></div>
Similar TutorialsI need the image to move horizontal instead of vertical. Here is the code. Code: //##########################################################################//
// Scrolling background Tutorial Code by http://www.kudoswebsolutions.com
// Original Source code: http://youlove.us/
// Modified and extended by Kudos Web Solutions
// copyright 2009 kudoswebsolutions.com
//##########################################################################//
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 2000;
//The image to overlay
var backgroundheight_two = 1000;
// Create a random offset for both images' starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container3').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
}, 100
);
}
function scrollbackground2() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container2').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground2();
}, 100
);
}
// Initiate the scroll
scrollbackground();
scrollbackground2();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css("background-position", "50% " + offset2 + "px");
$('#overlay2').css("background-position", "50% " + offset2 + "px");
});
I've ran the entire code through a javascript debugger a few times and I believe I weeded out the obvious errors. Also I believe I fixed some of the more hidden errors that one can't find with even the best debuggers.. Still it doesn't perform like it should? I found other scripts that do the same thing, but it defeats the purpose of me fixing it if I just write up a new code, even if it's easier. What make it hard for me to digest is it is somewhat complex compared to other codes that do the exact same thing. Any help? Also attached a zip file for those who want to see it externally.. Code section Code: <script type="text/javascript">
/* <![CDATA[ */
var sortItems = 1;
function move(sourceList,targetList) {
for(var i=0; i<sourceList.options.length; i++) {
if(sourceList.options[i].selected && sourceList.options[i].value != "") {
var no = new Option();
no.value = sourceList.options[i].value;
no.text = sourceList.options[i].text;
targetList.options[targetList.options.length] = yes;
sourceList.options[i].value = "";
sourceList.options[i].text = "";
}
}
moveUp(sourceList);
if (sortItems)
doSort(targetList);
}
function moveUp(curOptionList) {
for(var i=0; i<curOptionList.options.length; i++) {
if(curOptionList.options[i].value == "") {
for(var j=i; j<curOptionList.options.length-1; j++) {
curOptionList.options[j].value = curOptionList.options[j+1].value;
curOptionList.options[j].text = curOptionList.options[j+1].text;
}
var curLine = 0;
break;
}
}
if(curLine < curOptionList.options.length) {
curOptionList.options.length -= 1;
moveUp(curOptionList);
}
}
function doSort(curOptionList) {
var newOptions = new Array();
var tempOptions = new Object();
for(var i=0; i<curOptionList.options.length; i++) {
newoptions[0] = curOptionList.options[0];
}
for(var x=0; x<newOptions.length-1; x++) {
for(var y=(x+1); y<newOptions.length; y++) {
if(newOptions[x].text > newOptions[y].text) {
tempOptions = newOptions[x].text;
newOptions[x].text = newOptions[y].text;
newOptions[y].text = tempOptions;
tempOptions = newOptions[x].value;
newOptions[x].value = newOptions[y].value;
newOptions[y].value = tempOptions;
}
}
}
for(var i=0; i<curOptionList.options.length; i++) {
curOptionList.options[i].value = newoptions[i].value;
curOptionList.options[i].text = newoptions[i].text;
}
}
/* ]]> */
</script>
Form section Code: <body> <form action="" method="get" enctype="application/x-www-form-urlencoded"> <table border="0"> <tr> <td><select multiple="multiple" size="5" name="list1"> <option value="11">iPod Nano</option> <option value="12">iPod Shuffle</option> <option value="13">iPod Classic</option> </select></td> <td> <input type="button" value=" ›› " onclick="move(list1,list2)" name="B1" /> <br /> <input type="button" value=" ‹‹ " onclick="move(list2,list1)" name="B2" /> </td> <td><select multiple="multiple" size="5" name="list2"> <option value="21">MacBook</option> <option value="22">MacBook Pro</option> <option value="23">MacBook Air</option> </select></td> </tr> </table> </form> </body> </html> Hello there ppl, I am trying to use the menu HERE is the css horizontal stop menu. I am trying to get this thing centered on the page and am having no success. Can any one tell me what i need to edit or insert so it will be centered in the page. The entire menu not just the text on within the menu. Let me know if i need to post the code, the only reason why i didn't is because there are a few different elements and i'm not sure which one i need to edit. Thanks I have a working code of 2 level horizontal tab menu....it is now onmouse over ,I want to convert it to onclick....can anyone help in this regard.. I have taken from.... http://www.javascriptkit.com/script/...leveltab.shtml The javascript.... Code: var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}
function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}
function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}
function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}
function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}
Hi all, I am having problems with a script 'Cut & Paste CSS Horizontal List Menu' from http://www.javascriptkit.com/script/...stopmenu.shtml It works on my site with Firefox but not IE 8. My site url is http://www.bridgepoint-llp.co.uk/ I would be grateful for any help anyone could supply I am trying to do what I thought was a very simple animated menu. I have a heading at the top of a website - which is just a png. I have a menu that is simply a div with a few options on it arranged horizontally. There's no submenus, it's just a very simple horizontal list. All I am trying to do is to hide the menu and then when you mouseover the heading, it will drop down. When you mouseout, it will move back up. It would be great if it faded in as it moved down too. Am sure it's probably very simple, but I've looked all over Google and I can't find a simple solution that doesn't do X, Y and Z that I don't want or need in this project. I just need a very simple script that I stand half a hope of understanding! I found a menu I really like at the top of the page at www-dot-sachscreative-dot-com but can't figure out how it works from the source code. Can someone tell me how to make something like it which is browser independent and uses javascript and/or CSS? It's been years since I did javascript work and I've forgotten must of what I used to know. Thanks.
I am very new to Javascript and I have been able to get the menu to close and open, but I can't figure out how to start it up automatically closed at first. I've tried setting ids and values, but nothing seems to work! Please help me out! Code: <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Lab 5_3</title>
<script type="text/javascript">
function collapseItem(whichitem)
{
if (document.getElementById(whichitem).style.display == "none")
{
document.getElementById(whichitem).style.display = "block";
}
else
{
document.getElementById(whichitem).style.display = "none";
}
}
</script>
</head>
<body>
<p><a href="#" onClick="collapseItem('category1')">Menu 1</a></p>
<div id="category1">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</body>
</html>
I have the perfect form for a client - but its missing one thing. She sells hair clips in various colors. A user can select a hair clip color and quantity quite easily (as seen in the code below). My issue is that she wants to be able to give the user a 'special price' based on the quantity ordered by the user. Contrary to simply adding the default price of $7 over and over again based on the quantity selected. To Reiterate The way I want it to work... 1 clip is $7 2 clips are $12 3 clips are $22 5 clips are....etc. ...however, with the way that the javascript is set up now I'm only able to select one default price. This means that whatever quantity is selected -- it's simply multiplied by the number 7 to provide a total. 1 clip is $7 2 clips are $14 3 clips are $21 5 clips are....etc. If some kind soul can give their advice or point me in the right direction I would appreciate it. Code: <script type="text/javascript" src="_inc/orderform04.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Black Hair Clips
$<span id="txtPrice0">10</span>
<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Red Hair Clips
$<span id="txtPrice1">10</span>
<select id="sel1">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>
orderform04.js is located he http://www.mredkj.com/javascript/orderform04.js So if the user enters a serial number in the "Serial_Number" field and hits enter I would like the cursor to move DOWN to the next "Serial_Number" field. Is this possible?? Tracy Code: <table>
<tr>
<td>
Serial Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Serial_Number"
class = "textfield"
id = "Serial_Number.4853" >
</td>
<td>Cat Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Cat_Number"
class = "textfield"
id = "Cat_Number.4853" >
</td>
</tr>
<tr>
<td>
Serial Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Serial_Number"
class = "textfield"
id = "Serial_Number.4854" >
</td>
<td> Cat Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Cat_Number"
class = "textfield"
id = "Cat_Number.4854" >
</td>
</tr>
<tr>
<td>
Serial Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Serial_Number"
class = "textfield"
id = "Serial_Number.4855" >
</td>
<td>Cat Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Cat_Number"
class = "textfield"
id = "Cat_Number.4855" >
</td>
</tr>
</table>
Hello. Could you guys point me in the right direction. I have a DIV that I woul like to move along with the users vertical scrollbar. So when the user scrolls down on the page the DIV will follow. Where can I find information on how I can do this.
Hey all im getting used to using .js still and I am trying to figure out how to create a button to move a selected field within a box of fields to the top, instead of just moving it one-by-one to the top. Here is what I currently have that moves the selected just up one. Can someone expand on this and make it so it will move to the top instead of just one? SearchFieldsWindow.prototype.cmdMoveUp_OnClick = function() { var searchFields = this.__searchFields; var items = this.__lstSelected.get_Items(); var selectedIndices = this.__lstSelected.get_SelectedIndices(); var count = selectedIndices.get_Count(); for (var i = 0; i < count; i++) { var selectedIndex = selectedIndices.get_Item(i); // Don't allow when first item selected if (selectedIndex == 0) break; var uniqueID = items.get_ItemValue(selectedIndex); var label = items.get_ItemLabel(selectedIndex); searchFields.MoveUp(uniqueID); items.RemoveAt(selectedIndex); items.Insert(selectedIndex - 1, uniqueID, label); this.__lstSelected.SetSelected(selectedIndex - 1, true); this.__lstSelected.SetSelected(selectedIndex, false); } }; Hi Guys. First off i'd like to say Hi as i'm new to the forums. But am looking forward to spending a lot of time here. I am currently studying Javascript to help create a bit more user interaction with my websites which I use CSS/XHTML and PHP5 to design. Ok with that said I was hoping someone might be able to lend a slight hand. I am trying to create an Image menu for a site I'm working on that is rather simple in essence. When the user hovers over a button I have the menu will move left or right depending. I have not got a great deal into it yet as I have become stuck, as I'm new I figured it would be easier to troubleshoot if I build up the program bit by bit. ----> menupic variable is being passed by php into javascript Code: function moveImagesLeft() {
for (i=0; i<=100; i++) {
setPixels = (i + 2);
for (L=1; L<=menuPic; L++){ /* this loop makes sure that all the pictures move together */
indexpic = "menupic"+L;
document.getElementById(indexpic).style.left="-"+setPixels+"px";
}
}
}
Ok, very simple. I have a DIV container that holds my images and the overflow is hidden, php works out how many images there are and feeds that into javascript. This all works fantastically however it seems that once I reach the bottom of my second for loop Code: document.getElementById(indexpic).style.left="-"+setPixels+"px"; Nothing else happens, the pictures all shift left 2pixels as they should but nothing else. The top loop is not going again (excuse the poor use of terminology) I dont know if it makes a different but where the images are they are declared as so. Code: <a href="#"><img class="menupic" id="menupic1,2,3,4,5 (etc)" src="_image" border="0" height="50" width="60"></a> Code: .menupic {position:relative; display:block; width:60px, height:40px}
and the Id class is there so that my javascript can control it. I hope that I have worded this in a way that is easily understandable. Any help would be greatly appreciated. I try not to ask for too much help because working things out is part of the learning curve but in this instance I have spent a lot of time and not found a solution. Kindest Regards Oli Hey, I have a script which uses an array of numbers to represent their position in a div. its 5 by 5 like so: Code: tileMap = [ [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], ]; images = new Array(); images[1] = "no block"; images[3] = "brick.PNG"; Image[1] means you can move on the tile, 3 means you cannot (aka a collision). Now this is fine but i have issues regarding my movement of the image. I want to use WASD keyboard buttons which i can do using a CASE statement. But how do you make the image move Regarding Left/Right/Up/Down (also so that it stops moving when you stop holding down one of the keyboard buttons. I use this to detect the key button pressed: Code: function handleKeyMovement(keyValueDown)
{
switch(keyValueDown)
{
case 97: //A Move Left
//move it left
break;
case 100: //D Move Right
//move it right
break;
case 119: //W Move Up
//move it up
break;
case 115: //S Move Down
//move it down
break; }
}
p.s ideally i would like to move the said image by certain pixel amounts so it looks more smooth in movement. Is it possible? Hope you can help ! I have a html form that uses AJAX to display an XML file for a live search box to appear underneath the search box while the user is typing. I want to be able to click on the links and for the data to be entered into the search box, kinda like on Google's main page. Someone mentioned to be about moving the text using javascript onclick, can anyone help with this?
Right. I'm trying to create a little game (If you can call it that) where every time the user hovers over a <div> which contains a button, said <div> moves to a random point on the page. I've tried a way of moving the item and Googled extensively but have not yet come up with a way of doing it. This is my current code: Code: if(document.getElementById)
{
var carrier = document.getElementById(btnarea);
carrier.style.top = randomHeight + "px";
}
if(document.getElementById)
{
var carrier = document.getElementById(btnarea);
carrier.style.left = randomWidth + "px";
}
Which does not work. I hover over the <div> and the button, yet nothing happens. I can click the button, which seems to be the only thing working right now. I have a feeling the issue could be with another part of the code, but I wanted to see what you people thought first. Any ideas? You can see it working (Or not) at http://zeroerror.co.uk/public/clickme.php. Thanks in advance. I am working on a ajax chat system right now and I've ran into a little problem. I have no idea how to go about doing this but I know there has to be a way of doing this because I've seen it done before on other ajax chats I've seen. How do I ago about moving the scrollbar of a div to the bottom so that it shows the last that has been entered into the chat. If you need me to explain more then just let me know. But basically I'm wanting the scrollbar when it overflows in the window of a div to go and to the bottom when someone enters something new to the chat. Hi, I am trying to write a script to get my sprite to move to the next row once it reaches the last frame on it's current row. Here's my attempt so far; in the code below I want bird2 when it reaches frame 3 and spState(1) - this means first row - to switch to spState (2) second row. Code: if ($('#bird2'['current_frame']) == 3 && $('#bird2').spState(1)) {
$('#bird2').spState(2);
} else {
$('#bird2').spState(1);
}
Here's the code regarding the spState() Code: spState: function(n) {
$(this).each(function() {
// change state of a sprite, where state is the vertical
// position of the background image (e.g. frames row)
var yPos = ((n - 1) * $(this).height()) + 'px';
var xPos = $._spritely.getBgX($(this));
var bp = xPos + ' -' + yPos;
$(this).css('background-position', bp);
});
return this;
this is from http://www.spritely.net/ you will notice on this site that if you drag the slider to the left the bird sprites change direction, in fact they play the second row of frames. The reason I want my bird sprite to go automatically to the next row is because I am using video turned into individual frames and a png strip, and I am limited by the max width of png (8192px). see http://www.cranihum.com/ scroll down to see the bird on the rooftop. Each frame in that bird sprite is 80px wide and there are 93 frames. So I would like to include multiple rows to allow me to increase the number of frames. Up to 15 rows will be needed and after the last row it should go back to the first row. Perhaps a switch statement would be better than what I currently have. I am new to JavaScript and have been trying to pick up clues from http://www.w3schools.com I am very happy to learn and I hope to be prompted and pushed in the right direction. I hope my request is clear, please ask questions if not. Thank you Will How do I change the <br /> tags in the follow code to javascript code that performs the same function. I need new lines where you see the <br /> tags and I can't use <br /> since my javascript is within the header section of my HTML file and the W3C validator doesn't like it. Therefore, how do I change the following code to pure javascript with no <br />'s. I tried using \n and \r\n but maybe I didn't use this right as it didn't work. Please help, I am new to javascript txt="Name: "+name+"Sex: "+sex+"<br />Ethnicity: "+ethnicity+"<br />Region: "+region+"<br />Profession: "+profession+"<br />Membership_status: "+membership_status+"<br />Seeking: "+seeking+"<br />Education: "+education+"<br />Body Type: "+body_type+"<br />Eye Colour: "+eye_colour+"<br />Smoker: "+smoker+"<br />Drinker: "+drinker ; |
|||||||