SitePoint Sponsor

User Tag List

Results 1 to 25 of 32

Hybrid View

  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,789
    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,088
    Mentioned
    256 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,684
    Mentioned
    100 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,684
    Mentioned
    100 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
    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

  11. #11
    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

  12. #12
    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

  13. #13
    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.

  14. #14
    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?

  15. #15
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 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

  16. #16
    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

  17. #17
    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

  18. #18
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so do you think there is no way to do this with opening the popup window a specific size for each of the images in my scroller?

    thanks

  19. #19
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh, there totally is. There just isn't really any way to do it directly in the HTML. You'll need to use straight-up JavaScript for it, which is the code you had yesterday, before I piped in and said anything. All you need to add to it is...

    • listening for a link to be clicked
    • open the appropriate window
    • prevent the default action


    (In order for this to work, you'll need to change each link's href back to the real URL.)
    I'm the web overlord for Graphic Business Systems

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    All you need to add to it is...

    • listening for a link to be clicked
    • open the appropriate window
    • prevent the default action


    (In order for this to work, you'll need to change each link's href back to the real URL.)
    Post #6 from this thread provides a good example of how to do that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well I added what was in post 6 but now the scroller won't even load?

    www.meadowlarkco.com/services.php

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rrmcguire View Post
    well I added what was in post 6 but now the scroller won't even load?
    I took a quick look and it seems that you have mixed in HTML code amidst your JavaScript code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I moved around my div and the initial image loads and then once you click on it opens the image in a new page, but the scroller doesn't work and isn't showing?


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
  •