JavaScript - Verticle Content Scroller Script

Hello,
Well I have script that claims that it loads the flash content while it is showing seconds or advertisement. So as I don't know about scripts I have no Idea if it actually do that or not as What I visually see is that it let flash content load once the seconds of disappears. So that's why I want an expert advice on it.
And how the seconds of this script works Only if this script actually do what It claims, then I would like to know when does it send alert to load the content (as I would like to put the alert from the start) and how to show it for more or less seconds.

Relevant Markup:
Live Demo http://files.cryoffalcon.com/MyFootP...%20Loader.html

What is the live demo made up of:

Code:

  <div class="colorchooser">
    <!--more-->
    <div class="displaygame_part">
    <center>
    <div id="ads" class="ads">
    <h1>
    ADVERTISEMENT</h1>
    <center>
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0726197409084548";
    /* bloghutsgame */
    google_ad_slot = "5324930917";
    google_ad_width = 336;
    google_ad_height = 280;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></center>
    To skip it click <a href="javascript:ShowHide();">here</a>
    <script type="text/javascript">
    window.onload = function() {
    startCountDown(8, 1000);
    }
    
    function startCountDown(i, p, f) {
    // store parameters
    var pause = p;
    var fn = f;
    // make reference to div
    var countDownObj = document.getElementById("countDown");
    if (countDownObj == null) {
    return;
    }
    countDownObj.count = function(i) {
    // write out count
    countDownObj.innerHTML = i;
    if (i == 0) {
    // execute function
    fn();
    // stop
    return;
    }
    setTimeout(function() {
    // repeat
    countDownObj.count(i - 1);
    },
    pause
    );
    }
    // set it going
    countDownObj.count(i);
    }
    </script>
    <center>
    <img border="0" height="117" width="201" src="@---put the link of the image of fancy pants(its the loader)---@" />
    </center>
    <div id="countDown" style="display: inline;">
    </div>
    seconds for the game to load...
    </div>
    <div id="gamecontent" style="visibility:hidden; display:none">
    <div class="gofulldear">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="100%">   <param name="movie" value="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf">
    <param name="quality" value="high">
    <param name="allowNetworking" value="internal">
    <embed src="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf" width="100%" height="100%" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allownetworking="internal"></embed> </object>
    </div>
    </div>
    <script type="text/javascript">
        function turn_vis_on(id) {
            if (document.getElementById) { // DOM3 = IE5, NS6
                document.getElementById(id).style.display = 'inline';
                obj = document.getElementById(id);
                obj.style.visibility = "visible";
                }
        }
        function turn_vis_off(id){
            if (document.getElementById) { // DOM3 = IE5, NS6
                document.getElementById(id).style.display = 'none';
                obj = document.getElementById(id);
                obj.style.visibility = "hidden";
            }
        }
        function ShowHide()
        {
            turn_vis_off("ads");
            turn_vis_on("gamecontent");
            // alert('4sec!');
        }
        document.getElementById("ads").style.zIndex = 100;
        timeoutID = setTimeout(ShowHide, 15000);
    
        </script>
    </center></div>
    </div>

Note: It is game so there can be sound or music in it./ For any more information requirement please let me know I will edit it, so to make it as relevant as possible^^.

Hi I am a new user to JS, and I have a problem he

I have some JS code to work on a data set with file name "data.txt" in the header section of an HTML page.
Code:

<script type="text/javascript" src="data.txt"></script>

What I am trying to do is to ask a user to input a different file name, then update the file name in the <script> tag, for example, to

Code:

<script type="text/javascript" src="new_data.txt"></script>

But I don't know how to update the file name. Any help will be appreciated.

Hello Friend,

I am using a javascript code installed with Dreamweaver for this page:

http://www.alpinelakesair.com/newsite/charters.php

When you open the page, (the script element is on the right), the first tab is already open.

I would like none of the tabs to be open, so that you have to first click on a tab to open it. Also, when you start clicking on the tabs, a blue focus ring surrounds the active elements. I do not like the blue focus ring. Finally, you may notice that when you click on the tabs there is a slight jumping action that takes place among the tabs, a slight skip before the tab starts sliding up.

So my questions a

1. how to not have any tabs open from the start.

2. how to get rid of the blue focus ring. (if you are seeing it)

3. not a big deal, but it would be nice to get rid of that skipping action so the sliding elements moved smoothly.


My HTML is:
Code:

<div id="Accordion1" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
                <div class="AccordionPanelTab">DHC-3 Turbo Otter Charter Rate</div>
                <div class="AccordionPanelContent">

                	<ul>
                    	<li>Fuel included</li>
                        <li>Rate based out of Smithers, B.C.</li>
                        <li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
                    </ul>

                </div>
            </div>
            <div class="AccordionPanel">
                <div class="AccordionPanelTab">EADS Wilga 2000 Charter Rate</div>
                <div class="AccordionPanelContent">
                	<ul>
                    	<li>Fuel included</li>
                        <li>Rate based out of Smithers, B.C.</li>
                        <li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
                    </ul>
                </div>
            </div>
            <div class="AccordionPanel">
                <div class="AccordionPanelTab">Cessna 185 Charter Rate</div>
                <div class="AccordionPanelContent">
                	<ul>
                    	<li>Fuel included</li>
                        <li>Rate based out of Smithers, B.C.</li>
                        <li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
                    </ul>
                </div>
            </div>
        </div>

My CSS is:
Code:

.Accordion {
	overflow: hidden;
	width: 250px;
	height: 250px;
}

.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

.AccordionPanelTab {
	background-color: #000;
	border: thin solid #363535;
	margin: 0px;
	margin-bottom: 5px;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 0.9em;
	text-transform: uppercase;
	-moz-user-select: none;
	-khtml-user-select: none;
}

.AccordionPanelContent {
	overflow: auto;
	margin: 0px;
	margin-bottom: 5px;
	padding: 5px 10px;
	border: thin solid #363535;
}

.AccordionPanelOpen .AccordionPanelTab {
	background-color: #7f0202;
	margin-bottom: 0;
}

.AccordionPanelTabHover {
	background-color: #7f0202;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #555555;
}

.AccordionFocused .AccordionPanelTab {
}

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
}

And my JS is:
Code:

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.Accordion = function(element, opts)
{
	this.element = this.getElement(element);
	this.defaultPanel = 0;
	this.hoverClass = "AccordionPanelTabHover";
	this.openClass = "AccordionPanelOpen";
	this.closedClass = "AccordionPanelClosed";
	this.focusedClass = "AccordionFocused";
	this.enableAnimation = true;
	this.enableKeyboardNavigation = true;
	this.currentPanel = null;
	this.animator = null;
	this.hasFocus = null;

	this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
	this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

	this.useFixedPanelHeights = true;
	this.fixedPanelHeight = 0;

	Spry.Widget.Accordion.setOptions(this, opts, true);

	this.attachBehaviors();
};

Spry.Widget.Accordion.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};

Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
		return;
	ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
	if (!optionsObj)
		return;
	for (var optionName in optionsObj)
	{
		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
{
	if (panel)
		this.addClassName(this.getPanelTab(panel), this.hoverClass);
	return false;
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
{
	if (panel)
		this.removeClassName(this.getPanelTab(panel), this.hoverClass);
	return false;
};

Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
	var panelA = this.currentPanel;
	var panelB;

	if (typeof elementOrIndex == "number")
		panelB = this.getPanels()[elementOrIndex];
	else
		panelB = this.getElement(elementOrIndex);
	
	if (!panelB || panelA == panelB)	
		return null;

	var contentA = panelA ? this.getPanelContent(panelA) : null;
	var contentB = this.getPanelContent(panelB);

	if (!contentB)
		return null;

	if (this.useFixedPanelHeights && !this.fixedPanelHeight)
		this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;

	if (this.enableAnimation)
	{
		if (this.animator)
			this.animator.stop();
		this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
		this.animator.start();
	}
	else
	{
		if(contentA)
		{
			contentA.style.display = "none";
			contentA.style.height = "0px";
		}
		contentB.style.display = "block";
		contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
	}

	if(panelA)
	{
		this.removeClassName(panelA, this.openClass);
		this.addClassName(panelA, this.closedClass);
	}

	this.removeClassName(panelB, this.closedClass);
	this.addClassName(panelB, this.openClass);

	this.currentPanel = panelB;

	return panelB;
};

Spry.Widget.Accordion.prototype.closePanel = function()
{
	// The accordion can only ever have one panel open at any
	// give time, so this method only closes the current panel.
	// If the accordion is in fixed panel heights mode, this
	// method does nothing.

	if (!this.useFixedPanelHeights && this.currentPanel)
	{
		var panel = this.currentPanel;
		var content = this.getPanelContent(panel);
		if (content)
		{
			if (this.enableAnimation)
			{
				if (this.animator)
					this.animator.stop();
				this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
				this.animator.start();
			}
			else
			{
				content.style.display = "none";
				content.style.height = "0px";
			}
		}		
		this.removeClassName(panel, this.openClass);
		this.addClassName(panel, this.closedClass);
		this.currentPanel = null;
	}
};

Spry.Widget.Accordion.prototype.openNextPanel = function()
{
	return this.openPanel(this.getCurrentPanelIndex() + 1);
};

Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
	return this.openPanel(this.getCurrentPanelIndex() - 1);
};

Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
	return this.openPanel(0);
};

Spry.Widget.Accordion.prototype.openLastPanel = function()
{
	var panels = this.getPanels();
	return this.openPanel(panels[panels.length - 1]);
};

Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
{
	if (panel != this.currentPanel)
		this.openPanel(panel);
	else
		this.closePanel();

	if (this.enableKeyboardNavigation)
		this.focus();

	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;
	if (e.stopPropagation) e.stopPropagation();
	else e.cancelBubble = true;

	return false;
};

Spry.Widget.Accordion.prototype.onFocus = function(e)
{
	this.hasFocus = true;
	this.addClassName(this.element, this.focusedClass);
	return false;
};

Spry.Widget.Accordion.prototype.onBlur = function(e)
{
	this.hasFocus = false;
	this.removeClassName(this.element, this.focusedClass);
	return false;
};

Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;

Spry.Widget.Accordion.prototype.onKeyDown = function(e)
{
	var key = e.keyCode;
	if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
		return true;
	
	var panels = this.getPanels();
	if (!panels || panels.length < 1)
		return false;
	var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
	var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;

	while (nextPanel)
	{
		if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
			break;
		nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
	}

	if (nextPanel && currentPanel != nextPanel)
		this.openPanel(nextPanel);

	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;
	if (e.stopPropagation) e.stopPropagation();
	else e.cancelBubble = true;

	return false;
};

Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
{
	if (!panel)
		return;

	var tab = this.getPanelTab(panel);

	if (tab)
	{
		var self = this;
		Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
		Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
		Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
	}
};

Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
			element.addEventListener(eventType, handler, capture);
		else if (element.attachEvent)
			element.attachEvent("on" + eventType, handler);
	}
	catch (e) {}
};

Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
{
	var content = this.getPanelContent(panel);
	if (isDefault)
	{
		this.currentPanel = panel;
		this.removeClassName(panel, this.closedClass);
		this.addClassName(panel, this.openClass);

		// Attempt to set up the height of the default panel. We don't want to
		// do any dynamic panel height calculations here because our accordion
		// or one of its parent containers may be display:none.

		if (content)
		{
			if (this.useFixedPanelHeights)
			{
				// We are in fixed panel height mode and the user passed in
				// a panel height for us to use.
	
				if (this.fixedPanelHeight)
					content.style.height = this.fixedPanelHeight + "px";
			}
			else
			{
				// We are in variable panel height mode, but since we can't
				// calculate the panel height here, we just set the height to
				// auto so that it expands to show all of its content.
	
				content.style.height = "auto";
			}
		}
	}
	else
	{
		this.removeClassName(panel, this.openClass);
		this.addClassName(panel, this.closedClass);

		if (content)
		{
			content.style.height = "0px";
			content.style.display = "none";
		}
	}
	
	this.attachPanelHandlers(panel);
};

Spry.Widget.Accordion.prototype.attachBehaviors = function()
{
	var panels = this.getPanels();
	for (var i = 0; i < panels.length; i++)
		this.initPanel(panels[i], i == this.defaultPanel);

	// Advanced keyboard navigation requires the tabindex attribute
	// on the top-level element.

	this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
	if (this.enableKeyboardNavigation)
	{
		var self = this;
		Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
		Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
		Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
	}
};

Spry.Widget.Accordion.prototype.getPanels = function()
{
	return this.getElementChildren(this.element);
};

Spry.Widget.Accordion.prototype.getCurrentPanel = function()
{
	return this.currentPanel;
};

Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
{
	var panels = this.getPanels();
	for( var i = 0 ; i < panels.length; i++ )
	{
		if( panel == panels[i] )
			return i;
	}
	return -1;
};

Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
{
	return this.getPanelIndex(this.currentPanel);
};

Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
{
	if (!panel)
		return null;
	return this.getElementChildren(panel)[0];
};

Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
{
	if (!panel)
		return null;
	return this.getElementChildren(panel)[1];
};

Spry.Widget.Accordion.prototype.getElementChildren = function(element)
{
	var children = [];
	var child = element.firstChild;
	while (child)
	{
		if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
			children.push(child);
		child = child.nextSibling;
	}
	return children;
};

Spry.Widget.Accordion.prototype.focus = function()
{
	if (this.element && this.element.focus)
		this.element.focus();
};

Spry.Widget.Accordion.prototype.blur = function()
{
	if (this.element && this.element.blur)
		this.element.blur();
};

/////////////////////////////////////////////////////

Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
	this.timer = null;
	this.interval = 0;

	this.fps = 60;
	this.duration = 500;
	this.startTime = 0;

	this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;

	this.onComplete = null;

	this.panel = panel;
	this.panelToOpen = accordion.getElement(panel);
	this.panelData = [];
	this.useFixedPanelHeights = accordion.useFixedPanelHeights;

	Spry.Widget.Accordion.setOptions(this, opts, true);

	this.interval = Math.floor(1000 / this.fps);

	// Set up the array of panels we want to animate.

	var panels = accordion.getPanels();
	for (var i = 0; i < panels.length; i++)
	{
		var p = panels[i];
		var c = accordion.getPanelContent(p);
		if (c)
		{
			var h = c.offsetHeight;
			if (h == undefined)
				h = 0;

			if (p == panel && h == 0)
				c.style.display = "block";

			if (p == panel || h > 0)
			{
				var obj = new Object;
				obj.panel = p;
				obj.content = c;
				obj.fromHeight = h;
				obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
				obj.distance = obj.toHeight - obj.fromHeight;
				obj.overflow = c.style.overflow;
				this.panelData.push(obj);

				c.style.overflow = "hidden";
				c.style.height = h + "px";
			}
		}
	}
};

Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
	var self = this;
	this.startTime = (new Date).getTime();
	this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
	if (this.timer)
	{
		clearTimeout(this.timer);

		// If we're killing the timer, restore the overflow
		// properties on the panels we were animating!

		for (i = 0; i < this.panelData.length; i++)
		{
			obj = this.panelData[i];
			obj.content.style.overflow = obj.overflow;
		}
	}

	this.timer = null;
};

Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
	var curTime = (new Date).getTime();
	var elapsedTime = curTime - this.startTime;

	var i, obj;

	if (elapsedTime >= this.duration)
	{
		for (i = 0; i < this.panelData.length; i++)
		{
			obj = this.panelData[i];
			if (obj.panel != this.panel)
			{
				obj.content.style.display = "none";
				obj.content.style.height = "0px";
			}
			obj.content.style.overflow = obj.overflow;
			obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
		}
		if (this.onComplete)
			this.onComplete();
		return;
	}

	for (i = 0; i < this.panelData.length; i++)
	{
		obj = this.panelData[i];
		var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
		obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
	}
	
	var self = this;
	this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Thank you very much to whomever can help. and by the way I have no knowledge in javascript.

Alex

Hi,

Im new to javascript. I want to add a similar function on my blog like on http://techcrunch.com/2011/08/04/gro...tartup-obtiva/ when you press on author. It is a drop down made with javascript. Anybody can help with a similar javascript as I was trying different implementations for the whole night with no luck.

Maybe, anybody know a similar javascript online which I could modify?

Thanks in advance!

Hello,

I'm creating a section for a school website that will list over 9,000 book titles in four different categories (by Title, by Author, by Book Level, and by Points).

The content is shown in a div and called and loaded via Ajax.

Here is the test page: http://www.gilchrist.leon.k12.fl.us/ar/artest.htmlAfter you click "Go" when the drop down menu is displaying By Book Title, the content loads in the div in a few moments.

Here is the content page that appears in the div after you click "Go":
http://www.gilchrist.leon.k12.fl.us/...tByAuthor.html

If possible, I need a "page loading..." script that will appear only after you click "Go" while the list of books is being loaded.

I've been testing different ones I've found online, but can't get any to work. Of course, I'm not even sure if the script would be added to artest.html, 1112-QuistListByTitle.html, or a combination of both...

Any help with this would be greatly appreciated.

Thank you,
Deborah

If you want preload images on several pages of your site do you need to preload all images of your whole site on each page or only the images of the actual page?

Hi, I'm new to Javascript, so bear with me.

I'm trying to use a script that replaces the contents of a div, based on div id's. I've gotten it to work how I want he

http://www.sixnations.be/home1.html

But can't get it to work here, and I'm not sure why:
http://www.sixnations.be/menu.html

Relevent code, Javascript:

Code:

function changeMenu(obj) {

    if (obj == 'food') {
        //alert('food');
        var fd = document.getElementById('food');
        fd.style.display = 'inline';
        var fdi = document.getElementById('foodImages');
        fdi.style.display = 'inline';
        var dr = document.getElementById('drink');
        dr.style.display = 'none';
        var dri = document.getElementById('drinkImages');
        dri.style.display = 'none';
    }
    else if (obj == 'drink') {
        //alert('drink');
        var fd = document.getElementById('food');
        fd.style.display = 'none';
        var fdi = document.getElementById('foodImages');
        fdi.style.display = 'none';
        var dr = document.getElementById('drink');
        dr.style.display = 'inline';
        var dri = document.getElementById('drinkImages');
        dri.style.display = 'inline';
    }
}

HTML (the data's tabular, hence the tables):

CSS:

Code:

/*-- MAIN CONTENT --*/

.maincont {
	width: 930px;
	margin: auto;
	margin-top: 10px;
	overflow: auto;
}

.backcont {
	position: relative;
	width: 620px;
	margin-right: 296px;
}

.backrightcont {
	float: right;
	width: 296px;
}

.backtop,
#info_En,
#info_Fr,
#info_It,
#drink,
#food,
.backrighttop {		
	background-image: url(../sixnations_images/backtop.png);
	background-repeat: repeat-x;
	background-position: bottom;
	border-right: 1px solid #21201C;
	border-left: 1px solid #21201C;	
	width: 100%;
	height: 57px;
	text-align: center;
}

.backbottom {
	background-image: url(../sixnations_images/backbottom.png);
}


#info_En,
#info_Fr,
#info_It,
#food,
#drink {
	background-image: url(../sixnations_images/contentback4.png);
	background-repeat: repeat;
	padding-bottom: 30px;
	text-align: left;
	height: auto;	
}

.backright,
.backrighttop,
.backrightbottom {
	width: 100%;
}

.backright {
	background-image: url(../sixnations_images/backright.png);		
}

.backrighttop {
	background-image: url(../sixnations_images/backtop2.png);
	background-position: top;
	border: 0;	
}	

.backrightbottom {
	height: 50px;
	background-image: url(../sixnations_images/backrightbottom.png);
	border: 0;
}

.backrighttop h1,
.backright h1 {
	font-family: 'Cambria', Palatino, Georgia, serif;
	font-size: 1.6em;
	color: #eee;
	line-height: 70px;
	text-align: center;	
}

.backright h1 {
	width: 95%;
	line-height: normal;
	border-top:1px dashed #333;
	padding-top: 15px;
}

#noborder {
	border:0;
}

.twitter {
	margin-left: 15px;
}

#info_Fr,
#info_It,
#drink
{
    display: none;
}

.lang,
#info_En p,
#info_En h1,
#info_Fr p,
#info_Fr h1,
#info_It p,
#info_It h1,
#food h1,
#food p,
#drink h1,
#drink p {
	width: 71%;
	margin: auto;
}

#info_En h1,
#info_Fr h1,
#info_It h1,
#food h1,
#drink h1 {
	font-family: 'GothamBook','Cambria', Georgia, serif;
	font-size: 2.5em;
	color: #000;
	padding-bottom: 10px;
	padding-top: 20px;
	margin-bottom: 15px;
	font-variant: small-caps;
	letter-spacing:.1em;
	text-align: center;
	border-bottom: 1px dashed #777;
}

.lang {
    margin-top: 35px;   
    padding-top: 5px; 
	border-top: 1px dashed #777;
    font-size: 1em;
	font-variant: small-caps;
    text-align: right;
    color: #777;
}
 
.lang a:hover {
	background-color: #777;
	color: #eee;
} 

/*-- MAIN CONTENT -- SPORTS ON TV / FOOD & DRINK --*/

table.sports,
table.menu1 {
	width: 90%;
	margin: auto;
}

table.sports thead td,
table.menu1 thead td {
	font-size: 1.3em;
	font-variant: small-caps;
	color: #777;
	border-bottom: 1px dotted #999;
	width: 100%; 
	padding-top: 20px;
}

table.sports tr,
table.menu1 tr {
	border-bottom: 1px dotted #999;
}

table.menu1 tr {
	border: 0;
}

table.sports td {
	padding: 7px;
}

table.menu1 td {
	border:0;
	padding: 8px;
}

table.sports td.foot,
table.sports td.rugby  {
	background-image: url(../sixnations_images/ball1.png);
	background-repeat: no-repeat;
	background-position: bottom left;
	padding-left: 35px;
}

table.sports td.foot {
	background-image: url(../sixnations_images/ball2.png);
}

table.menu1 td.desc {
	color: #888;
	font-style: italic;
	padding-top: 0px;
	font-size: .9em;
}

Any ideas?

I am new to Java/AJAX and I am trying to create a script that will change content of a div.

My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in.

I have looked at several tutorials on AJAX to do this, but they always call a static html page. Since I am not using a static html page I do not think this solution would work for me.

How my list.php script works is as follows:

PHP Code:
// generate and execute query
$query = "SELECT id, title, timestamp FROM news ORDER BY timestamp DESC LIMIT 0, 8";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// if records present
if (mysql_num_rows($result) > 0)
{
// iterate through resultset
// print news titles
while($row = mysql_fetch_object($result))
{
?>
<b><font size="+2"><a href="story.php?id=<? echo $row->id; ?>"><? echo $row->title; ?></a></b></font>
<br>
<font size="-2"><center><? echo formatDate($row->timestamp); ?></center></font>
<p>
<?
}
}
// if no records present
// display message
else
{
?>
<font size="-1">No news is bad news</font>
<?
}

How my story.php script works is as follows:

PHP Code:
// generate and execute query
$query = "SELECT title, content, contact, timestamp FROM news WHERE id = '$id'";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// get resultset as object
$row = mysql_fetch_object($result);

// Show me the news
if ($row)
{
?>
<p>
<b><? echo $row->title; ?></b>
<p>
<font size="-1"><? echo nl2br($row->content); ?></font>
<p>
<font size="-2">Posted on <? echo formatDate($row->timestamp); ?>. By <? echo $row->contact; ?></font>
<?
}
else
{
?>
<p>
<font size="-1">That news post could is not found.</font>
<?
}

If you need more information for this I will provide whatever you need.

when someone selects a date it shows ok in the field but the checker script can not view it for some reason, i have an alert show the content, if i place the alert before everything it unblurs and the tick shows, but i have to click the alert off for the tick to show. The alert show nothing on the first run.

just a thought, but would the DOM not be updating quick enough for the next line to read the content ?

reason i ask is that with the alert line in the code it shows the previous state of the field when i change the date to something else.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type='text/javascript'>
function checkValidFormInput() {
redX = '<img alt="Invalid" src="images/redX.png" style="width: 18px;">';
greenTick = '<img alt="Valid" src="images/icongreentick.png">';


alert('.' + document.getElementsByName('j1date')[0].value + '.');

document.getElementsByName('j1date').blur();



		if (document.getElementsByName('j1date')[0].value == '') {
		document.getElementById('j1dateImg').innerHTML = redX;//
		} else {
		document.getElementById('j1dateImg').innerHTML = greenTick;//
		}

	}
</script>

</head>

<body>

<? // for some strange reason the following lines need to be here for the date picker to work! ?>
<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
    <tr><td id="ds_calclass"></td></tr>
</table>
<script type="text/javascript" src="datetimepicker.js"></script>
<? // end of date picker storage ?>


<form method="POST" action="index.php">

<li class="value"> <input type="text" autocomplete="off" name="j1date" id="j1date" value="<?=$j1date;?>" style="width: 200px; float: left;" onClick="ds_sh(this);" onBlur="checkValidFormInput();"> <div style="float: left;" id="j1dateImg"></div><br style="clear:both"> </li>

</form>

</body>
</html>

attached is the datetimepicker.js
you will need to remove the last part .txt from the above file name

I'd like to place an AJAX call to load another SELECT menu in my form, and I'm having trouble finding a tutorial.
Can someone point me to a good tute, or provide some guidance/examples here?

For your Copying/Pasting pleasure , here's an example button for which I'd include the onclick():
Code:

<button type="button" >Add</button>

And here's an example SELECT menu:
Code:

<select id="idNumber" name="weekday_1['workPeriod_new'][] >
	<option value="1" >one</option>
	<option value="2" >2</option>
</select>

Thanks-a-bunch,
~ Mo

NOTE: Overall, I'm pretty green in JS.

Hi

I have a javascript scroller on my site which was added automatically by the web design progam Web Page Maker.

It works well..... but..... does anybody know how to make the scrolling faster on mousedown. Its painfully slow at the moment.

I dont know ANYTHING about javascripting really.

heres the code:

<div id="g_iFrame1div" style="position:absolute; left:68px; top:273px; z-index:29">
<table border="0" cellpadding="0" cellspacing="0" width=628>
<tr><td>
<iframe src="iframes/news_latest.htm" name="g_iFrame1" width="606" height="487" src="" scrolling="no" frameborder="0"></iframe>

</td><td align="center" valign="middle" width="22"><img src="arrow_up.gif" alt="up" border=0 vspace="5" hspace="3"
onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(-3,2)"
onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(-1,20)"
onMouseOver="bsh_g_iFrame1(-1,20)"
onMouseOut="esh_g_iFrame1()"><br>
<img src="arrow_down.gif" alt="down" border=0 vspace="5" hspace="3"
onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(3,2)"
onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(1,20)"
onMouseOver="bsh_g_iFrame1(1,20)"
onMouseOut="esh_g_iFrame1()">

<script type="text/javascript" language="javascript">
function bsh_g_iFrame1(step,time){hs_g_iFrame1=setInterval("sh_g_iFrame1("+step+")",time)}
function esh_g_iFrame1(){clearInterval(hs_g_iFrame1)}
function sh_g_iFrame1(step)
{
scrollx=g_iFrame1.document.body.scrollLeft
scrolly=g_iFrame1.document.body.scrollTop
scrolly=scrolly+step
g_iFrame1.window.scroll(scrollx,scrolly)
}
</script>

thanks

Stuey

I've got a code. I've listed it below. The only question I have which I am sure I'm just overlooking it, but I need to find a way to squeeze this to the top of the screen and to the left. Where can I modify this on this code? The first section is the whole file. Thanks!

Edit: I'm trying to remove the awkward gap on top and to the left. I merged the .js file since this will only be a file that is updated with new news.

Code:

<html>
<head>
<script type="text/javascript">

/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   updated: 4/2011 for random order option, more (see below)
   */

/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
   Fixes browser crash from empty crawlers, ad and image blocking software/routines.
   Fixes behavior in some IE of breaking script if an image is missing.
   Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
   images. This may be disabled with the new optional noAddedAlt property set to true.
   Internal workings enhanced for greater speed of execution, less memory usage.
   */

///////////////// No Need to Edit - Configuration is Done in the On Page Call(s) /////////////////


function marqueeInit(config){
 if(!document.createElement) return;
 marqueeInit.ar.push(config);
 marqueeInit.run(config.uniqueid);
}

(function(){

 if(!document.createElement) return;

 marqueeInit.ar = [];

 document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
 '#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
 var c = 0, tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
 req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
  style: { //default style object for marquee containers without configured style
	'margin': '0 auto'
  },
  direction: 'left',
  inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
  mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
 }, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
 
 /*@cc_on @*/
 /*@if(@_jscript_version >= 5)
 ie = true;
 try{document.documentMode = 2000}catch(e){};
 iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
 if(iever < 6)
  oldie = 1;
 if(iever < 5.5){
  Array.prototype.push = function(el){this[this.length] = el;};
  ie5 = true;
  dash = /(-(.))/;
  String.prototype.encamel = function(s, m){
   s = this;
   while((m = dash.exec(s)))
    s = s.replace(m[1], m[2].toUpperCase());
   return s;
  };
 }
 @end @*/

 if(!ie5){
  dash = /-(.)/g;
  function toHump(a, b){return b.toUpperCase();};
  String.prototype.encamel = function(){return this.replace(dash, toHump);};
 }

 if(ie && iever < 8){
  marqueeInit.table = [];
  window.attachEvent('onload', function(){
   marqueeInit.OK = true;
   for(var i = 0; i < marqueeInit.table.length; ++i)
   marqueeInit.run(marqueeInit.table[i]);
  });
 }
 
 function intable(el){
  while((el = el.parentNode))
   if(el.tagName && el.tagName.toLowerCase() === 'table')
    return true;
   return false;
 };

 marqueeInit.run = function(id){
   if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
    marqueeInit.table.push(id);
    return;
   }
   if(!document.getElementById(id))
    setTimeout(function(){marqueeInit.run(id);}, 300);
   else
    new Marq(c++, document.getElementById(id));
 }

 function trimTags(tag){
  var r = [], i = 0, e;
  while((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
   tag.removeChild(e);
  while((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
   tag.removeChild(e);
  if((e = tag.firstChild) && e.nodeType === 3)
   e.nodeValue = e.nodeValue.replace(tTRE[1], '');
  if((e = tag.lastChild) && e.nodeType === 3)
   e.nodeValue = e.nodeValue.replace(tTRE[2], '');
  while((e = tag.firstChild))
   r[i++] = tag.removeChild(e);
  return r;
 }

 function randthem(tag){
  var els = oldie? tag.all : tag.getElementsByTagName('*'), i = els.length - 1, childels = [], newels = [];
  for (i; i > -1; --i){
   if(els[i].parentNode === tag){
    childels.push(els[i]);
    newels.push(els[i].cloneNode(true));
   }
  }
  newels.sort(function(){return 0.5 - Math.random();});
  i = childels.length - 1;
  for (i; i > -1; --i){
   tag.replaceChild(newels[i], childels[i]);
  }
 }

 function Marq(c, tag){
  var p, u, s, a, ims, ic, i, marqContent, cObj = this;
  this.mq = marqueeInit.ar[c];
  if(this.mq.random){
   randthem(tag);
  }
  for (p in defaultconfig)
   if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
    this.mq[p] = defaultconfig[p];
  this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
  if(!tag.getElementsByTagName('img')[0])
   this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
  else
   this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
  u = this.mq.style.width.split(/\d/);
  this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
  marqContent = trimTags(tag);
  tag.className = tag.id = '';
  tag.removeAttribute('class', 0);
  tag.removeAttribute('id', 0);
  if(ie)
   tag.removeAttribute('className', 0);
  tag.appendChild(tag.cloneNode(false));
  tag.className = ['marquee', c].join('');
  tag.style.overflow = 'hidden';
  this.c = tag.firstChild;
  this.c.appendChild(this.c.cloneNode(false));
  this.c.style.visibility = 'hidden';
  a = [[req1, this.c.style], [this.mq.style, this.c.style]];
  for (i = a.length - 1; i > -1; --i)
   for (p in a[i][0])
    if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
     a[i][1][p.encamel()] = a[i][0][p];
  this.m = this.c.firstChild;
  if(this.mq.mouse === 'pause'){
   this.c.onmouseover = function(){cObj.mq.stopped = true;};
   this.c.onmouseout = function(){cObj.mq.stopped = false;};
  }
  this.m.style.position = 'absolute';
  this.m.style.left = '-10000000px';
  this.m.style.whiteSpace = 'nowrap';
  if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
  if(!this.mq.noAddedSpace)
   this.m.appendChild(document.createTextNode('\xa0'));
  for(i = 0; marqContent[i]; ++i)
   this.m.appendChild(marqContent[i]);
  if(ie5) this.m = this.c.firstChild;
  ims = this.m.getElementsByTagName('img');
  if(ims.length){
   for(ic = 0, i = 0; i < ims.length; ++i){
    ims[i].style.display = 'inline';
    if(!ims[i].alt && !this.mq.noAddedAlt){
     ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
     if(!ims[i].title){ims[i].title = '';}
    }
    ims[i].style.display = 'inline';
    ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
    if(typeof ims[i].complete === 'boolean' && ims[i].complete)
     ic++;
    else {
     ims[i].onload = ims[i].onerror = function(){
       if(++ic === ims.length)
        cObj.setup(c);
      };
    }
     if(ic === ims.length)
      this.setup(c);
   }
  }
   else this.setup(c)
 }

  Marq.prototype.setup = function(c){
  if(this.mq.setup) return;
  this.mq.setup = this;
  var s, w, cObj = this, exit = 10000;
  if(this.c.style.height === 'auto')
   this.c.style.height = this.m.offsetHeight + 4 + 'px';
  this.c.appendChild(this.m.cloneNode(true));
  this.m = [this.m, this.m.nextSibling];
  if(this.mq.mouse === 'cursor driven'){
   this.r = this.mq.neutral || 16;
   this.sinc = this.mq.inc;
   this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
   if(this.mq.moveatleast){
    this.mq.inc = this.mq.moveatleast;
    if(this.mq.savedirection){
     if(this.mq.savedirection === 'reverse'){
      this.c.onmouseout = function(e){
       if(cObj.contains(e)) return;
       cObj.mq.inc = cObj.mq.moveatleast;
       cObj.mq.direction = cObj.mq.direction === 'right'? 'left' : 'right';};     
     } else {
      this.mq.savedirection = this.mq.direction;
      this.c.onmouseout = function(e){
       if(cObj.contains(e)) return;
       cObj.mq.inc = cObj.mq.moveatleast;
       cObj.mq.direction = cObj.mq.savedirection;};     
    }
    } else
     this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
   }
   else
    this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
  }
  this.w = this.m[0].offsetWidth;
  this.m[0].style.left = 0;
  this.c.id = 'marq_kill_marg_bord';
  this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
  this.c.id = '';
  this.c.removeAttribute('id', 0);
  this.m[1].style.left = this.w + 'px';
  s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
  while(this.c.offsetWidth > this.w - s && --exit){
   w = isNaN(this.cw[0])? this.w - s : --this.cw[0];
   if(w < 1 || this.w < Math.max(1, s)){break;}
   this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
  }
  this.c.style.visibility = 'visible';
  this.runit();
  }
  
 Marq.prototype.slowdeath = function(){
  var cObj = this;
  if(this.mq.inc){
   this.mq.inc -= 1;
   this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
  }
 }

 Marq.prototype.runit = function(){
  var cObj = this, d = this.mq.direction === 'right'? 1 : -1;
  if(this.mq.stopped || this.mq.stopMarquee){
   setTimeout(function(){cObj.runit();}, 300);
   return;
  }
  if(this.mq.mouse != 'cursor driven')
   this.mq.inc = Math.max(1, this.mq.inc);
  if(d * parseInt(this.m[0].style.left) >= this.w)
   this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
  if(d * parseInt(this.m[1].style.left) >= this.w)
   this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
  this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
  this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
  setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
 }

 Marq.prototype.directspeed = function(e){
  e = e || window.event;
  if(this.timer) clearTimeout(this.timer);
  var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX === 'number'?
   e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
  lb = (w - this.r) / 2, rb = (w + this.r) / 2;
  while((c = c.offsetParent)) mp -= c.offsetLeft;
  this.mq.direction = mp > rb? 'left' : 'right';
  this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
 }

 Marq.prototype.contains = function(e){
  if(e && e.relatedTarget){var c = e.relatedTarget; if(c === this.c) return true;
   while ((c = c.parentNode)) if(c === this.c) return true;}
  return false;
 }

 function resize(){
  for(var s, w, m, i = 0; i < marqueeInit.ar.length; ++i){
   if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
    m = marqueeInit.ar[i].setup;
    s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
    m.c.style.width = m.mq.style.width;
    m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
    while(m.c.offsetWidth > m.w - s){
     w = isNaN(m.cw[0])? m.w - s : --m.cw[0];
     if(w < 1){break;}
     m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
    }
   }
  }
 }

 if (window.addEventListener)
  window.addEventListener('resize', resize, false);
 else if (window.attachEvent)
  window.attachEvent('onresize', resize);

})();

/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   updated: 4/2011 for random order option, more (see below)
*/

</script>
</head>
<body>

<font color="white" face="arial" size="2" background="#0066CC">
<div class="marquee" id="mycrawler" align="left">
2/21/12 Today is testing the marquee. This will be used for announcements. Stay tuned!!!&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
</div></font>

<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler',
	style: {
		'padding': '1px',
		'width': '1000px', //change to 1000 for normal, change to 0 for off
		'background': '#0066CC',
		'border': '0px solid black'
	},
	inc: 1, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'false', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 1,
	neutral: 150,
	savedirection: true
});
</script>

</body>
</html>

I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down.

Thanks

Hi All,

I am trying to introduce a vertical scroller to my site, I got the code from a tutorial and slightly tweaked the html to meet my needs but now the content doesn't scroll.

Would someone be willing to take a quick look and see if they can spot anything?

None of this code has been altered!

Code:

<script type="text/javascript">
$(document).ready(function(){
	$(".newsticker-jcarousellite").jCarouselLite({
		vertical: true,
		hoverPause:true,
		visible:10,
		auto:500,
		speed:1000
	});
});
</script>

This is the HTML and PHP part:

Code:

<div id="newsticker-demo"> 
<div class="newsticker-jcarousellite">
<br/>
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
?>
<div>
<div>
<div class="thumbnail">
<div align="center"><a href="company.php?companyname=<?php echo $string ?>">
<img src="<?=$fullurl?>/thumbnail.php?gd=2&amp;src=employers/logo/big/<?=$aqm[image]?>&amp;maxw=<?=$a18[width]?>" alt="<?=$aqm[companyname]?>" title="<?=$aqm[companyname]?>" class="noborder" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<br/>
<br/>
<?php
if($i==5){
echo '</div><div>';
}
$i++;
}
echo '</div>';
?>
</div>
</div>

Hey fellow coders. I've been searching for a script, but I'm coming up empty. The script will display products in a single row full screen left to right. To slide the products there is a pull bar. You can see how the exact script works on http://www.logitech.com/en-us/keyboards/keyboards. Does anybody know of a complete script, or at least one that is close enough to alter. Thanks much.