Javascript scroller

Hello,

For my image scroller located at www.meadowlarkco.com/services3.php, you can click on each image so that it directs you to another page. How do I write it so that the window opens up in its own window at a specific size

Here is where the images are set at:

leftrightslide[0]=‘<a href=“http://www.meadowlarkco.com/flatbedimage.htm”><img src=“/images/flatbedscroller.bmp” border=1 alt=“flatbedscroller”></a>’
leftrightslide[1]=‘<a href=“http://www.meadowlarkco.com/vanimage.htm”><img src=“/images/vanscroller.bmp” border=1 alt=“vanscroller”></a>’
leftrightslide[2]=‘<a href=“http://www.meadowlarkco.com/heavyhaulimage.htm”><img src=“/images/heavyhaulscroller.bmp” border=1 alt=“heavyhaulscroller”></a>’
leftrightslide[3]=‘<a href=“http://www.meadowlarkco.com/ltlimage.htm”><img src=“/images/ltlscroller.bmp” border=1 alt=“ltlscroller”></a>’
leftrightslide[4]=‘<a href=“http://www.meadowlarkco.com/intermodalimage.htm”><img src=“/images/intermodalscroller.bmp” border=1 alt=“intermodalscroller”></a>’
leftrightslide[5]=‘<a href=“http://www.meadowlarkco.com/intermodalimage.htm”><img src=“/images/energyscroller.bmp” border=1 alt=“energyscroller”></a>’

You have no control over where your visitors open the links. Most will open them in a new tab of the same window as the existing one with whatever size that has. many of those who do allow it to open in a new window will not allow it to specify a size.

You can suggest a size in the third parameter of the window.open() call.

could I do something like this:

<!–
window.open (‘titlepage.html’, ‘newwindow’, config=‘height=100,
width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,
location=no, directories=no, status=no’)
–>

how would I write that within this:

‘<a href=“http://www.meadowlarkco.com/flatbedimage.htm” target=“_blank”><img src=“/images/flatbedscroller.bmp” border=1 alt=“flatbedscroller”></a>’

The “window.open” part is JavaScript, not HTML. So the only way to do it in HTML is to cheat and use JS anyway, replacing the <a> element’s href attribute:


<a href="javascript:window.open('http://www.meadowlarkco.com/flatbedimage.htm', 'newwindow', 'height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')">
    <img src="/images/flatbedscroller.bmp" border=1 alt="flatbedscroller">
</a>

But then the link would be totally broken for visitors who have disabled JS…

It is anyway. Without Javascript, the scroller isn’t visible and there is no alternative content.

So, provide a normal link for non-js users, and override that when js is available.

<div id="test2">
    ...
    <a href="http://www.meadowlarkco.com/flatbedimage.htm">
        <img src="/images/flatbedscroller.bmp" border=1 alt="flatbedscroller">
    </a>
    ...
</div>


var linksContainer = document.getElementById('test2');
linksContainer.onclick = function (evt) {
    evt = evt || window;
    targ = evt.target || evt.srcElement;
    if (targ.nodeType === 1 && targ.nodeName === 'A') {
        window.open(targ.href, 'newwindow', 'height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
    }
    return false;
}

You really should use a more appropriately expressive name than “test2” for it though.

at www.meadowlarkco.com/services.php when I add in the javascript code for my first slide as below:

//Specify the slider’s images
var leftrightslide=new Array()
var finalslide=‘’
leftrightslide[0]=‘<a href=“javascript:window.open(‘http://www.meadowlarkco.com/flatbedimage.htm’, ‘newwindow’, ‘height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no’)”><img src=“/images/flatbedscroller.bmp” border=1 alt=“flatbedscroller”></a>’
leftrightslide[1]=‘<a href=“http://www.meadowlarkco.com/vanimage.htm” target=“_blank”><img src=“/images/vanscroller.bmp” border=1 alt=“vanscroller”></a>’
leftrightslide[2]=‘<a href=“http://www.meadowlarkco.com/heavyhaulimage.htm” target=“_blank”><img src=“/images/heavyhaulscroller.bmp” border=1 alt=“heavyhaulscroller”></a>’
leftrightslide[3]=‘<a href=“http://www.meadowlarkco.com/ltlimage.htm” target=“_blank”><img src=“/images/ltlscroller.bmp” border=1 alt=“ltlscroller”></a>’
leftrightslide[4]=‘<a href=“http://www.meadowlarkco.com/intermodalimage.htm” target=“_blank”><img src=“/images/intermodalscroller.bmp” border=1 alt=“intermodalscroller”></a>’
leftrightslide[5]=‘<a href=“http://www.meadowlarkco.com/intermodalimage.htm”><img src=“/images/energyscroller.bmp” border=1 alt=“energyscroller”></a>’

I get an error that Im missing a ;

Every statement should end with a semicolon.

where at as when I add this after my statement

‘<a href=“javascript:window.open(‘http://www.meadowlarkco.com/flatbedimage.htm’, ‘newwindow’, ‘height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no’)”><img src=“/images/flatbedscroller.bmp” border=1 alt=“flatbedscroller”></a>’;

it still gives me the error

JavaScript is getting confused by the multiple levels of quotes. See how the string starts with a single quote, and you then use a single quote again at the start of http?

Try escapeing those internal quotes, by placing a backslash just before the quotes that are inside of the parenthesis, so that it ends up being:

(\‘…\’)

well the page loaded now but when clicking on the image, the link which opens up is:

javascript:window.open('http://www.meadowlarkco.com/flatbedimage.htm <a href=

Let’s break it up in to separate parts then.

var windowopen = “window.open(‘http://www.meadowlarkco.com/flatbedimage.htm’, ‘newwindow’, ‘height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no’)”;

So that you can then use:
‘<a href="javascript:’ + windowopen + ‘><img src=“/images/flatbedscroller.bmp” border=1 alt=“flatbedscroller”></a>’;

that didn’t seem to work as I have:

//Specify the slider’s images
var leftrightslide=new Array()
var finalslide=‘’
var windowopen = “window.open(‘http://www.meadowlarkco.com/flatbedimage.htm’, ‘newwindow’, ‘height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no’)”;

leftrightslide[0]=‘<a href="javascript:’ + windowopen + ‘><img src=“/images/flatbedscroller.bmp” border=1 alt=“flatbedscroller”></a>’;

it doesn’t display the flatbedscroller.bmp at all

I’m guessing here, but I think you might be missing a closing quote. Try

leftrightslide[0]='<a href="javascript:' + windowopen + ' [COLOR="#FF0000"]"[/COLOR]><img src="/images/flatbedscroller.bmp" border=1 alt="flatbedscroller"></a>';

that opens the popup correctly, but then the services.php doesn’t stay open it shows [object]

In that case I’m afraid you need more expert help. Javascript isn’t my forte. :frowning:

if someone could tell me why it displays [object] after my popup opens and how to have it keep the services.php page open I would really appreciate it…thanks

Can you post a link to a live example?

then when you click on the first flatbed truck image

thanks

It seemed to work for me, in Chrome15/Win7. A popup… popped… up with a picture of the truck and a label. It stayed open and everything. What browser are you using?