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>’
felgall
November 16, 2011, 6:35pm
2
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.
sdleihssirhc:
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…
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.
paul_wilkins:
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
rrmcguire:
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.
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?