JavaScript - Problems Duplicating This Script, To Display On Single Page

I'm using LavaLamp for the main navigation on a site I'm building, for a subtle animated effect.

The site itself is a single-page portfolio site with 3 sections organized vertically, "Home," "About," and "Work."

The problem I'm having is that the clicked navigation does not return to its original position on each panel if I double back on it.

For example, if I'm on the Home panel, and I want to get to About, I'll want to select "About." The LavaLamp animation will ease over to the "About" link on hover, and I'll click it, then the page will scroll to the About panel, where "About" in the navigation is being shown as selected (LavaLamp has a "current" class you can apply to whatever you want to start off as being selected)...

And that's great, BUT, say I want to get back to the Home panel. I click "Home" in the nav, and I'm transported back to the Home panel - but when I was there before, I'd selected "About", and since it's all on the same page, the link is focused on "About," even though I'm on the Home panel. Make sense?

I'm not good enough at JS or jQuery to figure out how to fix this. I think what I want to happen is for every link on each panel to STAY where it was originally assigned ("Home" link will stay on Home, "About" link will stay on About, etc.), but animate on hover only.

Is there a way to write something into the LavaLamp JS to make it so the animation works only on hover, and not on active, focus, or visited?

Thanks for any help, I've been working on this for days and haven't made much progress except to actually identify the problem, which eluded me for a while. Where'd my weekend go?! :P

Here's the code, sorry I can't provide a demo page, I don't have anywhere to upload it at the moment...

index.htm with an example of what each panel looks like:

Code:

<!-- home -->
    <div class="section" id="section1">
        <div class="panel-container">
            <div class="transparency">&nbsp;</div>
            
            <div style="position:relative;">
            
                <div class="nav-container">
                    <ul class="lava" id="1">
                        <li class="current"><a href="#section1" class="selected">Home</a></li>
                        <li><a href="#section2">About</a></li>
                        <li><a href="#section3">Work</a></li>
                    </ul>
                </div>
                
                <h1>home (1)</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui risus, volutpat sit amet ultricies quis, ullamcorper vulputate nunc. Quisque eget quam ac tortor ornare condimentum. Cras imperdiet nibh id urna scelerisque in aliquam dui dapibus. Vestibulum ut massa quis massa rhoncus vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus elementum blandit semper. Vivamus rutrum condimentum ante, eu semper sapien suscipit a. Integer a massa feugiat dolor mattis ultrices. Sed sed tempus mauris. Quisque interdum neque a arcu pulvinar bibendum. Mauris ac ligula dui. Vivamus sit amet eros erat, vitae porta orci. Curabitur et tellus a urna consectetur dapibus eu accumsan felis. Sed pulvinar ante eget turpis tincidunt eget faucibus urna ultrices. Pellentesque pharetra mauris lacus. Phasellus eu enim eget eros commodo lacinia. Suspendissa vehicula placerat augue eu lacinia.</p>
                
            </div>
        </div>
    </div>

jquery.lavalamp.js:

Code:

/**
 * LavaLamp - A menu plugin for jQuery with cool hover effects.
 * @requires jQuery v1.1.3.1 or above
 *
 * http://gmarwaha.com/blog/?p=7
 *
 * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Version: 0.2.0
 * Requires Jquery 1.2.1 from version 0.2.0 onwards. 
 * For jquery 1.1.x, use version 0.1.0 of lavalamp
 */

/**
 * Creates a menu with an unordered list of menu-items. You can either use the CSS that comes with the plugin, or write your own styles 
 * to create a personalized effect
 *
 * The HTML markup used to build the menu can be as simple as...
 *
 *       <ul class="lavaLamp">
 *           <li><a href="#">Home</a></li>
 *           <li><a href="#">Plant a tree</a></li>
 *           <li><a href="#">Travel</a></li>
 *           <li><a href="#">Ride an elephant</a></li>
 *       </ul>
 *
 * Once you have included the style sheet that comes with the plugin, you will have to include 
 * a reference to jquery library, easing plugin(optional) and the LavaLamp(this) plugin.
 *
 * Use the following snippet to initialize the menu.
 *   $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700}) });
 *
 * Thats it. Now you should have a working lavalamp menu. 
 *
 * @param an options object - You can specify all the options shown below as an options object param.
 *
 * @option fx - default is "linear"
 * @example
 * $(".lavaLamp").lavaLamp({ fx: "backout" });
 * @desc Creates a menu with "backout" easing effect. You need to include the easing plugin for this to work.
 *
 * @option speed - default is 500 ms
 * @example
 * $(".lavaLamp").lavaLamp({ speed: 500 });
 * @desc Creates a menu with an animation speed of 500 ms.
 *
 * @option click - no defaults
 * @example
 * $(".lavaLamp").lavaLamp({ click: function(event, menuItem) { return false; } });
 * @desc You can supply a callback to be executed when the menu item is clicked. 
 * The event object and the menu-item that was clicked will be passed in as arguments.
 */
(function($) {
$.fn.lavaLamp = function(o) {
    o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});

    return this.each(function() {
        var me = $(this), noop = function(){},
            $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
            $li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

        $li.not(".back").hover(function() {
            move(this);
        }, noop);

        $(this).hover(noop, function() {
            move(curr);
        });

        $li.click(function(e) {
            setCurr(this);
            return o.click.apply(this, [e, this]);
        });

        setCurr(curr);

        function setCurr(el) {
            $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
            curr = el;
        };

        function move(el) {
            $back.each(function() {
                $(this).dequeue(); }
            ).animate({
                width: el.offsetWidth,
                left: el.offsetLeft
            }, o.speed, o.fx);
        };

    });
};
})(jQuery);

jquery.lavalamp.min.js:

Code:

(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);

And last but not least, the LavaLamp CSS:

Code:

.lava {
	position: relative;
	height: auto;
	width: 100%;
	background-color: none;
	margin:  0;
	overflow: hidden;}

.lava li {
	margin: 0 10px 0 0;
	float: left;
	list-style: none;}
	
.lava li a.selected {color: #fff;}

.lava li.back {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	background-color: none;
	width: 9px;
	height: 30px;
	z-index: 8;
	position: absolute;}

.lava li a {
	text-decoration: none;
	color: #000;
	outline: none;
	text-align: center;
	top: 7px;
	text-transform: uppercase;
	letter-spacing: 0;
	z-index: 10;
	display: block;
	float: left;
	height: 30px;
	position: relative;
	overflow: hidden;
	margin: auto 0;}

.lava li a:hover, .lava li a:active, .lava li a:visited {border: none;}

If there's any other info you need from me, please let me know and I'll post it asap. Thanks again for any help.

EDITED TO ADD: Oops, forgot to add the page js:

Code:

$(function() {
	$("#1, #2, #3").lavaLamp({
		fx: "backout",
		speed: 700,
		click: function(event, menuItem) {
			return false;
		}
	});
});

EDITED ALSO TO ADD: Could it have something to do with this:

Code:

$(this).hover(noop, function() {
            move(curr);
        });

?

Im trying to duplicate an image multiple times here is what I have

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>


<script type="text/javascript">
var totalNumber = 1000;
function insert(num) {
	var cont = document.getElementById("cont");
	var img = document.createElement("img");
	var percent = num/totalNumber;
	var result = cont.offsetWidth * percent;
	var dup = result/100*2;
	img.src = "guy.jpg";
	cont.appendChild(img);
}
</script>

<style type="text/css">
#cont {height:100px; width:500px;}  
</style>

</head>
<body>

<div id="cont"></div>

</body>

<script type="text/javascript">
    insert(3000);
</script>

</html>

So Im trying to get img to repeat the variable "dup"
so you would see <img src="guy.jpg"> 30 times.

I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks

the code is

var quotations = new Array()
quotations[0]= "germaine arnold"
quotations[1]= "endearing moral"
quotations[2]= "analog reminder"
quotations[3]= "regained normal"
quotations[4]= "renaming ordeal"
quotations[5]= "nominal regrade"
quotations[6]= "arraigned lemon"
quotations[7]= "ringleader moan"
quotations[8]= "mineral groaned"
function display()
{
a=Math.floor(Math.random()*quotations.length)
document.getElementById('quotation').innerHTML=quotations[a]
setTimeout("display()",5000)
}


and i'm calling the function using:

<div id="quotation">
<SCRIPT type="text/javascript">display()</SCRIPT>
</div>

Okay, so I've created a JavaScript form which allows the user to enter their name into the form and display it within the sentence, "Welcome to the site ______". It works on one page, but, problem is, I'd like it to be displayed on every page. I'm aware you cannot do this with getElementbyId (can only be used once), which is what I've used. I've tried using getElementsbyClass, but from my understanding, it's not as simple as that.

Here's my code so far anyway:

Code:

<script type="text/javascript">
function inputname(){
	var userInput = document.getElementById('userInput').value;
	document.getElementById('welcome').innerHTML = userInput;
}
</script>

Code:

<p>Welcome to the site <b id='welcome'></b> </p> 
<input type='text' id='userInput' />
<input type='button' onclick='inputname()' value='Enter Name'/>

Dear all,

Below are my current script. I need another few more sets of the triple drop down menu same as the below script... (Scenario: creating like a online shopping order form, where customers can have multiple orders.) Please guide me how to do so.. Thank you in advance.



<script type="text/javascript">

/*
Triple Combo Script Credit
By Philip M: http://www.codingforums.com/member.php?u=186
Visit http://javascriptkit.com for this and over 400+ other scripts
*/

var categories = [];
categories["startList"] = ["Wearing Apparel","Books"]
categories["Wearing Apparel"] = ["Men","Women","Children"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
categories["Men"] = ["Shirts","Ties","Belts","Hats"];
categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

var nLists = 3; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
}

function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<form name="tripleplay" action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List3' onchange="getValue(this.value, this.form['List2'].value,
this.form['List1'].value)">
<option selected >Make a selection</option>
</select>
</form>
</body>
</html>

I'm having to write a program in javascript that appends a html table to show numerical values... Here is my code which I'm stuck at...

Code:

<!DOCYTYPE html>
<html>
<head><title>Numeric Bases</title>
<style type="text/css">
    body { padding: 2em; margin: 0px auto; background-color: white; color: #222; font-family: "Helvetica", "Arial", sans-serif;}
    h1 {border-bottom: 1px solid #aaa; text-align: center; }
    p#countdown { font-size: 150px; text-align: center; margin: 0; padding: 0;}
    table { width: 50%; margin: 0 auto; }
    caption { font-size: xx-large; font-weight: bold; }
    thead > tr {background-color: #aaa; }
    td, th { text-align: center; padding: 1em; border: 1px solid #ccc; }
    tr.alternate { background-color: #eee; }
</style>
<script type="text/javascript" src="num-bases1.js"></script>
</head>


<table>
    <caption>Numerical values in various bases</caption>
    <thead><tr><th>Dec</th><th>Binary</th><th>Octal</th><th>Hex</th></tr></thead>
    <tbody></tbody>
</table>


</body></html>

Code:

 /*
 * The following function should generate table cells
 * that contain an integer (in base 10), and its equivalent
 * in Binary (base 2), Octal (base 8), and Hexidecimal (base 16).
 */
var num_bases = function(max_number) {
    
     output = '';
    
    for ( var count = 1; count <= max_number; count++){
        var binary = count.toString(2);
        var octal = count.toString(8);
        var hex = count.toString(16);
    
     output += '<tr><td>' + count + '</td><td>' + binary + '</td><td>' + octal + '</td><td>' +
        hex + '</td></tr><tr class="alternate"><td colspan="4"></td></tr>'; 
    }    
    // TODO: 
    // Write a for loop that appends HTML for the 
    // table row and cells to the output. 
    //
    // The following is an example of a table row:
    //
    //      <tr> <td>4</td> <td>100</td> <td>4</td> <td>4</td> </tr>
    //
    // Every other row should have an "alternate" class:
    //       
    //      <tr class="alternate">
        
    document.getElementById('num-bases').innerHTML = output;

}
window.onload = function() {
    num_bases(50);
    
    }

I was having some problems getting my function to only perform when I click the shoot button. Right now I have it where if you click the buttons and it plays the whole game. I was wondering if there is some way to maybe hide it and then just print the results only when I press the shoot button.



I posted my game here its the front page.

http://mmoloot4u.com/

I am trying to find out so things so far i thought about doing this, but im not sure the best way.

Could i remove assignments from document.getElementByIf('whatever').value from the onclick code for rock, paper, and scissors. Instead define corresponding variables in your <script> area and assign to those variables. Then in 'shoot' you can assign those variables to the corresponding element values?

// JavaScript Document
function open_tab(el){

if(document.getElementById(el).style.display == "none"){
document.getElementById(el).style.display = "block";
}
}

function close_tab(el){

if(document.getElementById(el).style.display == "block"){
document.getElementById(el).style.display = "none";
}
}

Pretty basic code, works great in FireFox and Chrome in both HTML and ASPX pages. However in IE it only works properly in the .aspx pages.

There are a series of links so when you click it hides the div's which are set to display:"block", except for one "div" which won't change to display"none" and I don't know why.

Hi,

I am Aditya. I am explaining below the exact scenario where I need the help:

I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text.
Now, I need help for the below issues:
1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages.
2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page.

I am new to web development, so may be that these questions are too simple.
But, I need some help from you.

Waiting for your reply,

Thanks,
Aditya

Hi,

I am just a noob and this is my first go at javascript and html

I am trying to figure out how to display info from an array in the <textarea>, I have tried a number of things nothings worked and I know it must be something simply but have tried a number of things

I also have to clear the <textarea> after it displays the info mentioned above and I think I have that sorted but I also have to have the <textarea> display all signup info stored in the array when a user clicks on a button

Here's the code

Code:

function show()
{
var myArray = new Array(); 
myArray[0] = document.getElementById('fullname').value; 	myArray[1] = document.getElementById('Address').value;	myArray[2] = document.getElementById('Phone').value;	

document.writeln('Thank you for signingup,' + ' ' + myArray[0] + '. Your details will be confirmed by E-mail to ' + myArray[2] );
	
document.writeln("<br>")
document.writeln('Details:')	
document.writeln("<br>")
	
for (var i=0; i<myArray.length; i++)
{document.write(myArray[i] + "<br />");	} 
}

Thanks

Hi there!
I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image.

Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up.

So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position.

Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen.

Here is an example: http://synaxis.pcriot.com/

When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there.
And this does happen on every browser that I have tested, Firefox, IE, and Chrome.

So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful.

Thank You



Here is a link to the original code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

And modified code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

The modified code is at the very bottom of the script.

Original Code:
Code:

/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Modified Code

Code:

/** 
* @private 
*/
var removeElement = function(id) {
	var Node = document.getElementById(id);
	Node.parentNode.removeChild(Node);
}

/** 
* @private 
*/
var getDocHeight = function() {
	var db = document.body;
	var ddE = document.documentElement;
    return Math.max(
        db.scrollHeight, db.offsetHeight, db.clientHeight, 
        ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight
    );
}
/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Hi All,
Im new to this forum...need some of your help and advice.

I have a js code like this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

what it does is that it hide and show a panel by slidint it to the left.

But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
var autoTimer = null;
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos });
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos = -856 });
}, 2000);
},1000);

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

But when the panel finished showing the button to open it again doesn't work...any help please..really urgent.
thks

//Sam

Hello all,

I'm back with more silly newbie questions.

I'm building a website that includes 3 javascript codes:
1. Onmouseover image switch for the nav bar.
2. On a specific page, onmouseover display of hidden divs.
3. Particletree's Dynamic Resolution Dependent Layout script
(http://particletree.com/features/dyn...ndent-layouts/)

All three scripts work fine in firefox, but the 2nd script doesn't work in safari and chrome, and the 3rd one doesn't work in safari, chrome and IE(8). Since the 1st one works fine in all browsers, I'm guessing this isn't a problem with my javascript link or anything like that.

The website is:
www.sheket.co.il/index4.html

The specific page that runs the 2nd code is:
www.sheket.co.il/services.html

My javascript is:
http://www.sheket.co.il/javascript.js

And my default stylesheet is:
http://www.sheket.co.il/style.css

(I apologize for possible jibrish- the website is in Hebrew...)

Any help with these two problems would be greatly appreciated!

Hey all,

I am trying to get a code instead of php to display a image from a questionaire results page;

Say the url returns;
http://localhost/Myoka2/myokaTestResults.php?img=7

the 7 will show score2.png... this works fine with php, here is the code

<?php
$total = $_GET['img'];
if ($total < 7)
$total = 1;
elseif ($total < 13)
$total = 2;
elseif ($total < 18)
$total = 3;
elseif ($total < 20)
$total = 4;
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Form</title>
<script src="rollover.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/25307673/myoka/myokaStyle.css" type="text/css" media="screen" />
</head>

<body>
<span style="color:#6A1E67;font: normal bold 12pt/14pt Arial, Helvetica, sans-serif;margin-left:140px;">
How stressed are you?
<h3>SCORES</h3>
</span>

<img src="http://dl.dropbox.com/u/25307673/myoka/myokaStress/score<?php echo $total; ?>.png" alt="" /><br />

<a href="http://www.facebook.com/myoka.spas?sk=app_128953167177144" target="_blank">
<img src="http://dl.dropbox.com/u/25307673/myoka/myokaFanPage//lastMin.jpg" style="padding-left:0px; padding-top:5px; border:0px" alt="" />
</a>
<br/>
</body>
</html>


What i need is this in javascript so that it will work in a iframe :-)