SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>'

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>'

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <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...
    Last edited by sdleihssirhc; Nov 16, 2011 at 13:26. Reason: fixed typo
    I'm the web overlord for Graphic Business Systems

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    269 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    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.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    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:

    HTML Code:
    <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.

    HTML Code:
    <div id="test2">
        ...
        <a href="http://www.meadowlarkco.com/flatbedimage.htm">
            <img src="/images/flatbedscroller.bmp" border=1 alt="flatbedscroller">
        </a>
        ...
    </div>
    Code javascript:
    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.
    Last edited by paul_wilkins; Nov 17, 2011 at 15:33.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    So, provide a normal link for non-js users, and override that when js is available.

    HTML Code:
    <div id="test2">
        ...
        <a href="http://www.meadowlarkco.com/flatbedimage.htm">
            <img src="/images/flatbedscroller.bmp" border=1 alt="flatbedscroller">
        </a>
        ...
    </div>
    Code javascript:
    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 ;

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rrmcguire View Post
    I get an error that Im missing a ;
    Every statement should end with a semicolon.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rrmcguire View Post
    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:

    (\'...\')
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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=

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rrmcguire View Post
    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>';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    269 Post(s)
    Tagged
    5 Thread(s)
    I'm guessing here, but I think you might be missing a closing quote. Try
    Code:
    leftrightslide[0]='<a href="javascript:' + windowopen + ' "><img src="/images/flatbedscroller.bmp" border=1 alt="flatbedscroller"></a>';

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that opens the popup correctly, but then the services.php doesn't stay open it shows [object]

  16. #16
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    269 Post(s)
    Tagged
    5 Thread(s)
    In that case I'm afraid you need more expert help. Javascript isn't my forte.

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  18. #18
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to a live example?
    I'm the web overlord for Graphic Business Systems

  19. #19
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    www.meadowlarkco.com/services.php

    then when you click on the first flatbed truck image

    thanks

  20. #20
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    I'm the web overlord for Graphic Business Systems

  21. #21
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, the popup comes up but the page www.meadowlarkco.com/services.php then shows [object], not its actual content.

  22. #22
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this must be an IE setting, any idea what?

  23. #23
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see it now.

    Here's the problem. When you have a "javascript:" href, my understanding was that the browser would execute that JavaScript, but stay on the same page. IE apparently ignores that. It actually goes to a new page, whose URL is the "javascript:" href.

    The short answer is, it ain't gonna work. You'll have to move the code back into an actual <script> tag.
    I'm the web overlord for Graphic Business Systems

  24. #24
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    269 Post(s)
    Tagged
    5 Thread(s)
    It's not IE - I'm seeing the same thing in Firefox, but it's fine in Chromium (both Linux).
    Attachment 58162

  25. #25
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perhaps it's because window.open returns an object? :P I don't know, I actually have very little experience with "javascript:" hrefs.

    And really, I'm okay with that.
    I'm the web overlord for Graphic Business Systems


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •