JavaScript - Simple Controls Noobslide -- Help Me!!

Hi guys,

I am able to create some of the dynamic controls but having trouble to order them in one column..

i have this view :

field1 field2 field3


what i want is :

field1
field2
field3

below is my code :



function AddLevel2()

{

//var mainContainer2 = document.getElementById('mainContainer2');
var newDiv = document.createElement('div')
newDiv.style.width = "560px";
newDiv.style.backgroundColor= projbgGr;
newDiv.style.position = "relative";
newDiv.style.left = "245px";



var BUDDL = document.createElement('select');

// size lenght of the DDL for both IE or Firefox
BUDDL.setAttribute("style","width:100px");

//firefox
BUDDL.setAttribute("width","100px");
BUDDL.style.width = "100px";
BUDDL.id = 'BU' + b ;
BUDDL.setAttribute('name','BU' + b);

BUDDL.style.position = "relative";
BUDDL.style.left = "5px";

BUDDL.onchange=show;


// filling the DDL by ITEM array Elements
var i=0;
for (i=0;i<=4;i++)
{
objOption = document.createElement('option')
objOption.text = "BU" + i;
//objOption.value=ITEM1[i];
BUDDL.options.add(objOption);
}




var j =1;
var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e";


//add Description Unit
Description = document.createElement( 'INPUT' );
Description.id = 'D' + b ;
Description.setAttribute('name','D' + b);
Description.size=2;
// size lenght of the Comment for both IE or Firefox
Description.setAttribute("style","width:300px");
//firefox
Description.setAttribute("width","300px");
Description.style.width = "300px";
Description.onblur = show;
//Description.style.backgroundColor= bgc;


//end Description
//number of testers

NumberTesters = document.createElement( 'INPUT' );
NumberTesters.id = 'T' + b;
NumberTesters.setAttribute('name','T' + b );
NumberTesters.size=2;
// size lenght of the Comment for both IE or Firefox
NumberTesters.setAttribute("style","width:40px");
//firefox
NumberTesters.setAttribute("width","40px");
NumberTesters.style.width = "40px";
NumberTesters.onblur=show;
//NumberTesters.style.backgroundColor= bgc;



//number of testers

// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";

var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";
newDelButton.style.position = "relative";
newDelButton.style.left = "7px";





// Append new text input to the newDiv

newDiv.appendChild(BUDDL);
newDiv.appendChild(Description);
newDiv.appendChild(NumberTesters);
newDiv.appendChild(newDelButton);

//newDiv.appendChild(newAddButton2);

//Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);

//Add a handler to button for deleting the newDiv from the mainContainer
newAddButton.onclick = AddLevel22;
//newAddButton.onclick = AddNewRecord;

//newAddButton2.onclick = AddLevel3;

newDelButton.onclick = function()
{
var answer = confirm ("You have to delete all UATs under this BU first\n \tIs this done ?\t")
if (answer)
{alert ("Now you can delete it");
mainContainer.removeChild(newDiv);}
else
alert ("Then please check all UATs under this BU first and delete them");


}

b++;
document.form1.NumberOfBU.value = parseInt(b-1);

//alert(document.form1.NumberOfBU.value);
//AddLevel3;

for (UATCounter = 1 ; UATCounter<=limit; UATCounter++)


{


//var newDiv = document.createElement('div')
//
// newDiv.style.width = "250px";
// newDiv.style.backgroundColor= projbgVi;
// newDiv.style.position = "relative";
// newDiv.style.left = "350px";


var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e";

newMDate = document.createElement( 'INPUT' );
newMDate.id = 'M'+ (b-1) + '_' + UATCounter ;
newMDate.setAttribute('name','M'+ (b-1) + '_' + UATCounter);
newMDate.setAttribute('type', 'Date');
newMDate.size=7;
newMDate.style.backgroundColor= bgc;
//newMDate.onfocus=Calend;
// function Calend ()
// {
// fnInitCalendar(this, this.getAttribute('id'), 'style=calendar.css,close=true');
// }

newMDate.onblur = show;



//Frontline Hours
FLHours = document.createElement( 'INPUT' );
FLHours.id = 'FL'+ (b-1) + '_' + UATCounter ;
FLHours.setAttribute('name', 'FL'+ (b-1) + '_' + UATCounter);
FLHours.size=2;
// size lenght of the Comment for both IE or Firefox
FLHours.setAttribute("style","width:40px");
//firefox
FLHours.setAttribute("width","40px");
FLHours.style.width = "40px";
//NumberTesters.style.backgroundColor= bgc;



//Frontline Hours
MGRHours = document.createElement( 'INPUT' );
MGRHours.id = 'MG'+ (b-1) + '_' + UATCounter ;
MGRHours.setAttribute('name', 'MG'+ (b-1) + '_' + UATCounter);
MGRHours.size=2;
// size lenght of the Comment for both IE or Firefox
MGRHours.setAttribute("style","width:40px");
//firefox
MGRHours.setAttribute("width","40px");
MGRHours.style.width = "40px";

//NumberTesters.style.backgroundColor= bgc;
//Frontlne Hours


//Create buttons for creating and removing inputs

var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";

var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";
newDelButton.style.position = "relative";
newDelButton.style.left = "7px";


//newDiv.appendChild(ProjDDL3);
newDiv.appendChild(newMDate);
newDiv.appendChild(FLHours);
newDiv.appendChild(MGRHours);

mainContainer.appendChild(newDiv);


}





}

I am brand new to Javascript, have been studying on Lynda.com for almost a week trying to get the hang. I found a cool scrolling effect with controls here at the very bottom of the page, and have built a page just trying to duplicate the html and js below. Unfortunately, it doesn't work. The CSS seems to be there, however no scrolling, any help would be greatly appreciated.

PHP Code:
<title>Untitled Document</title>
<style type="text/css"> 
#footersponsors ul {
list-style-type:none;
}
#footersponsors {
float:left;
padding-top:5px;
position:relative;
width:980px;
}
#footersponsors #buttons {
border:1px solid #777777;
margin-bottom:5px;
width:955px;
}
#footersponsors #buttons a {
color:#6699CC;
margin:10px;
}
#footersponsors .prev {
float:left;
}
#footersponsors .next {
float:right;
}
#footersponsors .prev img {
border:0 none;
padding-top:30px;
text-decoration:none;
}
#footersponsors .next img {
border:0 none;
padding-top:30px;
text-decoration:none;
}
#footersponsorsitems {
float:left;
margin-left:9px;
overflow:hidden;
width:895px;
}
#footersponsorsitems ul {
padding-left:2px;
width:3900px;
}
#footersponsorsitems li {
float:left;
height:90px;
line-height:90px;
margin:0 2px;
width:179px;
}
</style>
</head>
        <script type="text/javascript" language="javascript">

        <!--

            jQuery.easing.easeOutQuart = function (x, t, b, c, d)

            {

                return -c * ((t=t/d-1)*t*t*t - 1) + b;

            };



            jQuery().ready(function()

            {

 

    var intval = 2600;//how often to autoscroll (in milliseconds) - This is set with a var to enable trigger functions below

 

                jQuery('#footersponsorsitems').serialScroll(

                {

                    items:'li',

                    prev:'#footersponsors a.prev',

                    next:'#footersponsors a.next',

                    start:0,

                    duration:700,

                    force:true,

                    stop:true,

                    lock:false,

                    interval:intval, //autoscroll set here

                    cycle:true, //pull back once you reach the end

                    easing:'easeOutQuart', //use this easing equation for a funny effect

                    jump: false, //click on the images to scroll to them

                    exclude: 4 //stop scrolling when there are 4 items left as not to pull the others off the screen

                });



    $('#footersponsorsitems').hover(function(){

     $(this).trigger('stop');

    },function(){

     $(this).trigger('start');

    });

    $('#footersponsorsitems li').hover(

    function(){

     $(this)

     .stop()

     .fadeTo(250, 1.0)

     .siblings()

     .stop()

     .fadeTo(500, 0.15);

    }, function(){

     $('#footersponsorsitems li')

     .stop()

     .fadeTo(500, 1.0);

    });

            });

        // -->

        </script>

        <div id="footersponsors">

            <input type="hidden" name="ctl26$hfCurrentPage" id="ctl26_hfCurrentPage" value="0" />

            <a class="prev" href="#"><img src="/images/buttons/sponsor_select_left_off.gif" alt="<"></a>

            <div id="footersponsorsitems">

                <ul id="ctl26_ulFooterSponsors" style="width:13725px;">                        

                

                        <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li>

                    

                        <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li>

                    

                        <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li>

                    

                        <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li>

                    

                        <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li>

                    

                        <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li>

                    

                        <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li>

                    

                        <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li>

                    

                        <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li>

                    

                        <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li>

                    

                        <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li>

                    

                        <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li>

                    

                        <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li>

                    

                        <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li>

                    

                        <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li>

                    

                        <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li>

                    

                        <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li>

                    

                        <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li>

                    

                        <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li>

                    

                        <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li>

                    

                        <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li>

                    

                        <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li>

                    

                        <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li>

                    

                        <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li>

                    

                        <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li>

                    

                        <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li>

                    

                        <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li>

                    

                        <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li>

                    

                        <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li>

                    

                        <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li>

                    

                        <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li>

                    

                        <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li>

                    

                        <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li>

                    

                        <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li>

                    

                        <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li>

                    

                        <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li>

                    

                        <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li>

                    

                        <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li>

                    

                        <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li>

                    

                        <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li>

                    

                        <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li>

                    

                        <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li>

                    

                        <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li>

                    

                        <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li>

                    

                        <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li>

                    

                        <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li>

                    

                        <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li>

                    

                        <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li>

                    

                        <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li>

                    

                        <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li>

                    

                        <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li>

                    

                        <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li>

                    

                        <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li>

                    

                        <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li>

                    

                        <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li>

                    

                        <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li>

                    

                        <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li>

                    

                        <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li>

                    

                        <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li>

                    

                        <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li>

                    

                        <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li>

                    

                </ul>

            </div>

            <a class="next" href="#"><img src="/images/buttons/sponsor_select_right_off.gif" alt=" />"></a>

         </div>

    

</div>
</body>
</html> 

Hey everyone,

I've looked around quite a bit and can't seem to find anything but I was wondering if there is some open source software offering a text editor/input field similar to the one used on this forum when submitting a comment or thread?
Where you can click a bold button or Italic button or URL button to structure it?

Thanks

Josh

I have just about every thing all set up on my blog now just the way I like it but a few bits of code are not working exactly like I'd want them to.

I have a blog:
http://thezombiesurvivalist.tumblr.com/
which is using this js:
http://static.tumblr.com/ur6r7hb/FoY...ider-jquery.js
to allow the mousewheel to scroll the screen right and left rather than up and down. I think the mouse wheel code would all just be in this part:
Code:

	(function($) {
		var types = ['DOMMouseScroll', 'mousewheel'];
		$.event.special.mousewheel = {
			setup: function() {
				if (this.addEventListener){for(var i=types.length;i;){this.addEventListener(types[--i], handler, false );}}
				else {this.onmousewheel = handler;}
			},
			teardown: function() {
				if (this.removeEventListener )
					for ( var i=types.length; i; ){{this.removeEventListener(types[--i],handler,false);}}
				else{this.onmousewheel = null;}
			}
		};
		$.fn.extend({
			mousewheel: function(fn) {return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");},
			unmousewheel: function(fn) {return this.unbind("mousewheel", fn);}
		});
		function handler(event) {
			var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
			
			event = $.event.fix(event || window.event);
			event.type = "mousewheel";
			
			if ( event.wheelDelta ) delta = event.wheelDelta/120;
			if ( event.detail     ) delta = -event.detail/3;
			// Add events and delta to the front of the arguments
			args.unshift(event, delta);
			return $.event.handle.apply(this, args);
		}
	})(jQuery);

I would like the js to force vertical scrolling to be default first, then if then is no vertical scrolling or if it runs out then the horizontal scrolling takes over. Currently it seems to occur in reverse order. For example if you go to one of the posts individual pages that are long:
http://thezombiesurvivalist.tumblr.c...esh-in-n-y-l-a
then it will scroll left and right before scrolling up and down. I'd rather it be the other way around.

Is this code able to be changed to accommodate my desires?

Hello all,

I am currently working on a site for a friend and have reached a navigational problem I cannot figure out how to achieve...

He has a list of products that link to relevant individual pages which also have next and previous buttons to browse all the product pages on the site (only 10 so no big deal).

However, he wants to add additional lists that recommend products by category preference? So for example; 4 products may appeal to a particular category, but when you click the link to view one of the products shown the next and previous buttons scroll through the entire products pages! and not only the ones recommended?? IS it possible using Javascript to define which pages are linked to as next previous without having to create lots more html copies of content pages?

I have a basic knowledge of Javascript but cannot find a workable answer or example using google. Any help would be much appreciated.

Thanks in advance...

Hi,
Im having a weird issue...
I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable...

And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float

[it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...]

Code:

<script language="javascript" type="text/javascript">
        var floating_header = function() {

            this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];

            this.getXY = function(o) {
                var y = 0;
                var x = 0;
                while (o != null) {
                    y += o.offsetTop;
                    x += o.offsetLeft;
                    o = o.offsetParent;
                }
                return { "x": x, "y": y };
            }

            this.setheader = function() {
                if (window.header == undefined) {
                    floating_header();
                }
                var screenpos = this.scrollTop;
                var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
                if (screenpos > window.theady - 100 && screenpos < theady_max) {
                    window.header.style.position = 'absolute';
                    window.header.style.top = this.offsetTop;
                    window.header.style.display = 'block';
                    window.headerOffsetTop = this.offsetTop;
                }
                else {
                    if (screenpos != undefined && window.header != undefined) {
                        window.header.style.position = '';
                        window.header.style.top = '';
                        window.headerOffsetTop = undefined;
                        window.header = undefined;
                    }
                    else {
                        if (window.headerOffsetTop) {
                            window.header.style.position = 'absolute';
                            window.header.style.top = window.headerOffsetTop;
                            window.header.style.display = 'block';
                        }
                    }
                }
            }
            document.getElementById("divcn").onscroll = this.setheader;
            this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
            this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
        };
        floating_header();        
    </script>

Hello,

Is there any way I can prevent IE from displaying the "active X controls and script prevention message" when I load my web page into the browser. Firefox, Safari and Chrome, allow my scripts to run without displaying the message when the page is loaded into the respective browsers.
Any tips would be really useful.
Many thanks
Nonye

Hello,

I'm trying to make a slide show for a website that has simple controls on it.

I've attached this example so you can see what i mean....

http://www.bigw.com.au/bigw/home.jsp

As you can see they use 3 images, and they have controls to go between images easily.

Can someone please help me with this code urgently??

Thanks,
S.

Can anyone please help integrating these two javascripts?

http://milesich.com/ and http://javascript.internet.com/forms...-controls.html

I want to allow visitors too choose as many dates as they want but when I try to integrate these two script timepicker stops working...

Can anyone please help?

Thanks in advance

I imagine this would be very simple for someone who knows javascript.

I want to have three fields.

First field is "posted speed limit", second field is "actual speed" and third field will be the output field.

All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however.

So, 5 miles over the speed limit would be $100 (minimum value)
15 miles over the speed limit would be $150 (add a zero)
35 miles over the speed limit would be $350.
etc.

I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean

Hi,

Im trying to make an imacro/javascript script that checks a webpage for names, and if either of the names are found, i want the script to alert me, if not, continue looping/reloading the page.

Im not at all good with javascript, imacro is more sort of my thing, however what i do have, doesnt seem to do anything.

var links = document.getElementsByTagName('a');
for (var i in links){
if (links[i].value == "Simon" || links[i].value == "James"){
alert("ATTENTION");
}
}


i dont know if its something simple i'm missing, or whether im nowhere near, but ive spent all day trying to do this, and lost all patience.

Any suggestion/fixes?

Hi Folks,

I've been trying to learn Javascript, I'm fluent with CSS, HTML and not to bad with jQuery and PHP. But I've been trying to learn the core fundamentals of JavaScript.

Basically, I have a friend who has a strange take on the English language, so I wanted to make him a translator, so that you could input one of his misspellings and it would bring up the proper word.

<html>
<head>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript">

// Mox spellings

function checkMox ()
{

var bm = document.forms["transMox"]["mox"].value;

if

(bm == "wid") {
document.write("wid = with");

}
else
{
document.write("Please enter a Moxism");
}
};

</script>
</head>
<body>
<header>
<div id="title">
<h1>I drink!</h1>
<h2>Therefor I am...</h2>
</div>
<nav>
<ul>
<li>The history of Moxisms</li>
<li>Examples of Moxisms</li>
<li>The man himself...</li>
</ul>
</nav>
</header>


<h3>Welcome to the Big Mox translator</h3>


<form id="transMox" action="#output" method="post" onsubmit="return checkMox()">
<input type="text" id="mox">Enter a Moxism</input>
<br />
<input type="submit" id="submit" onSubmit="checkMox();">G0!</input>
</form>

<div id="output">

</div>

</body>

</html>

Obviously that's just for one word, so I wondered how to structure more words into an array or something?

Anyway, cheers in advance for the help guys!

Hello,
Below is my Javascript, CSS and HTML code for the navigation menu on http://033691f.netsolhost.com/stnew/ -- a test site for my company. Note: I did not write the Javascript code nor do I know how to write javascript. I take no credit.

When the page first opens, the navigation shows fully expanded for a second, then collapses all. I would like to cut out the expanded view if possible and have the page load with the menu fully collapsed. Is there any way that would work?

Thank you in advance for any input!

Code:

function initMenus() {
	$('ul.menu ul').hide();
	$.each($('ul.menu'), function(){
		var cookie = $.cookie(this.id);
		if(cookie === null || String(cookie).length < 1) {
			$('#' + this.id + '.expandfirst ul:first').show();
		}
		else {			
			$('#' + this.id + ' .' + cookie).next().show();
		}
	});
	$('ul.menu li a').click(
		function() {

			var checkElement = $(this).next();
			var parent = this.parentNode.parentNode.id;

			if($('#' + parent).hasClass('noaccordion')) {
				if((String(parent).length > 0) && (String(this.className).length > 0)) {
					if($(this).next().is(':visible')) {
						$.cookie(parent, null);
					}
					else {
						$.cookie(parent, this.className);
					}
					$(this).next().slideToggle('normal');
				}				
			}
			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if($('#' + parent).hasClass('collapsible')) {
					$('#' + parent + ' ul:visible').slideUp('normal');
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				$('#' + parent + ' ul:visible').slideUp('normal');
				if((String(parent).length > 0) && (String(this.className).length > 0)) {
					$.cookie(parent, this.className);
				}
				checkElement.slideDown('normal');
				return false;
			}
		}
	);
}
$(document).ready(function() {initMenus();});

Code:

			<ul id="menu1" class="menu" style="margin-top:20px;">
			<li><a class="m0" href="index.php" style="background-color:#222; color:#fff;">HOME</a></li>
			<li><a class="m1" href="">WHO WE ARE ...</a>
				<ul><li><a href="">Company Overview</a></li>
					<li><a href="">Clientele</a></li>
					<li><a href="">Multimedia</a></li>
					<li><a href="">Careers</a></li>
					<li><a href="">Contact Us</a></li>
				</ul>
			</li>
			<li><a class="m1" href="">WHAT WE DO ...</a>
				<ul><li><a href="">Promotional Products</a></li>
					<li><a href="">Screen Printing</a></li>
					<li><a href="">Embroidery</a></li>
					<li><a href="">Signage</a></li>
					<li><a href="">Web Design</a></li>
				</ul>
			</li>
			<li><a class="m3" href="">FIND PRODUCTS ...</a>
				<ul><li><a href="">Web Search</a></li>
					<li><a href="">Online Catalogs</a></li>
				</ul>
			</li>
			<li><a class="m4" href="">SUPPORT TOPICS ...</a>
				<ul><li><a href="">General Information</a></li>
					<li><a href="">Available Brands</a></li>
					<li><a href="">Artwork Submissions</a></li>
					<li><a href="">Color & Substrate Charts</a></li>
					<li><a href="">Dartman Game</a></li>
				</ul>
			</li>
			<li><a class="m5" href="http://www.screentek.net/blog">READ OUR BLOG</a></li>
			</ul>

Code:

ul.menu { border-bottom:1px solid #ccc; }

ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 240px;
}

ul.menu a {
  display: block;
  text-decoration: none;	
}

ul.menu li {
  margin-top: 0px;
  border-top:1px solid #ccc;
  font-size:10pt;
  font-family: Segoe-B;
}

ul.menu li a {
  background: #fff;
  color: #333;	
  padding: 3px 20px;
}

ul.menu li a:hover {
  background: #2b76b7;
  color:#fff;
}

ul.menu li ul li a {
  background: #fff;
  color: #2b76b7;
  padding-left: 35px;
  font-size:10pt;
  font-family: Segoe-R;
}

ul.menu li ul li a:hover {
  background: #eee;
  border-left: 5px #000 solid;
  padding-left: 25px;
  color:#333;
}

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }

For the first program I am trying to have the user input the password "stamp" to advance to the next page which is a pizza menu. The first program is supposed to give the user 3 tries and if they do not get it correct an alert is to pop up and tell them how many tries they have left. If they do not get it correct the input field for the riddle is to be locked. However if they have it correct they should be forwarded to the pizza menu.




Code:

<html>
<body>
<FORM name= "myForm">


<h3> What goes around the world but stays in a corner?</h3>
<br>
<INPUT type="password" name="passPhrase" id="pass">
<script language= "javaScript">

alert("Enter the correct password to proceed");

function checkpass(form)
{
if(form.passPhrase.value == "stamp")

{

alert("page unlocked!");
form.compute.disabled = false;
form.authenticate.disabled = true;

}
else 

alert("that is not the correct response!");
</form>
}















</script>
</body>
</html>

For the second program I am having a few small problems, I need to make a button that updates and clears the order. The updated order is supposed to be displayed in the text box that I have at the bottom. Also I am trying to make a function that computes the total cost for the order.

Code:

</head>
<body>
<body bgcolor="Silver">

<p>

<center>
<form method="post" >
<p><font size="+4"><strong><font color="#000000">Lance's Pizza <br></font><font size="+4"><strong><font color="#000000"><img src="pizza.jpg" width="163" height="134"></font></strong></font></strong></font></p>
<center>


<p><strong> Pizza Size:</strong></p>
<p>
<input type="radio" name="size" value="mini" id="Size_mini"> Mini 14in [$9.99]

<input type="radio" name="size" value"=medium" id="Size_Medium"> Medium 16in [$12.99]

<input type="radio" name="size" value="large" id="Size_Large"> Large 18in [$15.99] </p>

<p><strong>Toppings:</strong>:



<center>
<input name="toppings" type="checkbox" id="Pepperoni"> Pepperoni [$0.50]
<input name="toppings" type="checkbox" id="Suasage"> Sausage [$1.00]
<input name="toppings" type="checkbox" id="Greenpeppers"> Green peppers [$0.25]
<input name="toppings" type="checkbox" id="Onions"> Onions [$0.25] </p>


<input name="toppings" type="checkbox" id="Mushrooms">
Mushrooms [$0.50]
<input name="toppings" type="checkbox" id="Olives"> Olives [$0.25]



<p> 


<TEXTAREA NAME="" ROWS="10" COLS="40" onBlur="blurHandlerRouting">

</TEXTAREA> 


<br><input name="clear" type="button" value="Clear" onClick="Reset();">

</p>
</form>
</p>
</body>
</html>