Re: Forward/backward overlay arrow

Discussion in 'HTML' started by Hot-Text, Feb 6, 2012.

  1. Hot-Text

    Hot-Text Guest

    "Alfred Molon" <> wrote in message news:...
    > I'd like to add the following feature to my site.
    >
    > When somebody is on an image page, for instance:
    > http://www.molon.de/galleries/Egypt/Siwa/Oracle/img.php?pic=2
    >
    > and hovers the mouse cursor on the right part of the image a white arrow
    > (">" shape) appears inside the image, close to the right border.
    > Moving the mouse cursor out of the right part of the image makes the
    > white arrow disappear.
    > Clicking the mouse on the right arrow brings you to the next image of
    > the gallery (in this case Nr 3).
    >
    > And the same with the left part of the image (a "<" arrow appears close
    > to the left border, click on it and you go to the previous image).
    >
    > I've seen something similar on some sites and I guess this can be done
    > with Java, but how?

    NO with CSS style sheet File.

    <link rel="stylesheet" TYPE="text/css" HREF="name.css">
    and it go in the Head.

    put this in your name.css File

    ..top-dog { color: #FFFFFF; text-decoration: none; font-size: 12px; }
    ..top-dog a:hover { color: #FFF000; text-decoration: underline; }

    Put in your File.HTML

    <a href="" class="top-dog">&lt;&lt;&nbsp;Prev</A>
    <a href="" class="top-dog">Next&nbsp;&gt;&gt;</A>




    --
    User-agent: *
    Disallow: /
    Hot-Text, Feb 6, 2012
    #1
    1. Advertising

  2. Hot-Text wrote:
    > "Alfred Molon" <> wrote in message
    > news:...
    >> I'd like to add the following feature to my site.
    >>
    >> When somebody is on an image page, for instance:
    >> http://www.molon.de/galleries/Egypt/Siwa/Oracle/img.php?pic=2
    >>
    >> and hovers the mouse cursor on the right part of the image a white
    >> arrow (">" shape) appears inside the image, close to the right border.
    >> Moving the mouse cursor out of the right part of the image makes the
    >> white arrow disappear.
    >> Clicking the mouse on the right arrow brings you to the next image of
    >> the gallery (in this case Nr 3).
    >>
    >> And the same with the left part of the image (a "<" arrow appears
    >> close to the left border, click on it and you go to the previous image).
    >>
    >> I've seen something similar on some sites and I guess this can be done
    >> with Java, but how?

    > NO with CSS style sheet File.
    >
    > <link rel="stylesheet" TYPE="text/css" HREF="name.css">
    > and it go in the Head.
    >
    > put this in your name.css File
    >
    > .top-dog { color: #FFFFFF; text-decoration: none; font-size: 12px; }
    > .top-dog a:hover { color: #FFF000; text-decoration: underline; }
    >
    > Put in your File.HTML
    >
    > <a href="" class="top-dog">&lt;&lt;&nbsp;Prev</A>
    > <a href="" class="top-dog">Next&nbsp;&gt;&gt;</A>


    Did you even bother to test your code? To OP ignore the above, it does
    nothing that you asked for.


    Most use JavaScript to overlay clickable links...so I thought I'd
    explore a CSS way to provide the overlay interface. Now the backend to
    swap the image could be done with server-side with optional JavaScript.
    I made no attempt to support <IE8 or ancient browsers but some basic
    support could be added with a little effort:

    <http://www.littleworksstudio.com/temp/usenet/slideshow>


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>

    <title>Slideshow</title>

    <style type="text/css">
    div.slideshow {
    background: #eee; padding: 20px; width: 650px;
    text-align: center; position: relative;
    }

    div.slideshow a {
    display: block; border: 2px solid #f00;
    color: #f00;
    background-color: #fff;
    font: 50px bold, sans-serif;
    text-decoration: none;
    width: 50px; height: 50px;
    border-radius: 5px;
    opacity:0.5;
    position: absolute;
    visibility: hidden;
    }

    div.slideshow a.previous { top: 50%; left: 20px; }
    div.slideshow a.next { top: 50%; right: 20px; }
    div.slideshow:hover a { visibility: visible; }

    </style>

    <script type="text/javascript">
    function demo(){
    var vwr=document.getElementById('viewer');
    var links=vwr.getElementsByTagName('a');
    for (link in links)
    {

    links[link].onclick=function(){var
    cn=this.className;alert('Clicking this link will either use JavaScript
    to load the ' + cn + ' image or with the link use server-side...')};

    }
    }
    window.onload=demo;
    </script>

    </head>
    <body>
    <h1>Test Slideshow</h1>
    <div class="slideshow" id="viewer">
    <img src="specslarge.jpg" alt="sample image">
    <a href="#" class="previous" title="View previous image">&lt;</a>
    <a href="#" class="next" title="View next image">&gt;</a>
    </div>
    </body>
    </html>




    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 6, 2012
    #2
    1. Advertising

  3. Hot-Text

    dorayme Guest

    In article <jgp4ut$bru$>,
    "Jonathan N. Little" <> wrote:

    > <http://www.littleworksstudio.com/temp/usenet/slideshow>


    Nice picture! <g>

    Boy, was I not paying attention when I read original post!

    --
    dorayme
    dorayme, Feb 6, 2012
    #3
  4. dorayme wrote:
    > In article<jgp4ut$bru$>,
    > "Jonathan N. Little"<> wrote:
    >
    >> <http://www.littleworksstudio.com/temp/usenet/slideshow>

    >
    > Nice picture!<g>


    Yes, since I never delete anything it was still laying around since that
    long ago post...I think it was about browser vs image software rescaling...

    >
    > Boy, was I not paying attention when I read original post!
    >


    Nether was Hot-Text it seems!


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 6, 2012
    #4
  5. Alfred Molon wrote:
    > Ok, many thanks for the script. I did it, here is an example:
    > http://www.molon.de/galleries/Germany/Munich/Skyline/img.php?pic=5
    >
    > Left/right arrows to go back and forth, up arrow to return to the photo
    > gallery. What do you think?


    Looks good! Now a couple of things. You do realize that it will not work
    at all with IE6 because IE6 does not recognize the hover pseudo-element
    "hover" on anything other than an A element with an HREF attribute. You
    will need some JavaScript or the htc hack:

    <public:component>
    // For MSIE use JScript to attach JS functions to compensate
    // for missing pseudo-class support
    // from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
    // updated for html4.01 jnl 3/06
    // added focus|blur jnl 5/07
    <public:component>
    // For MSIE use JScript to attach JS functions to compensate
    // for missing pseudo-class support
    // from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
    // updated for html4.01 jnl 3/06
    // added focus|blur jnl 5/07
    <public:attach event="onmouseover" onevent="DoHover()">
    <public:attach event="onmouseout" onevent="RestoreHover()">
    <public:attach event="onmousedown" onevent="DoActive()">
    <public:attach event="onmouseup" onevent="RestoreActive()">
    <public:attach event="onfocus" onevent="DoFocus()">
    <public:attach event="onblur" onevent="RestoreFocus()">
    <script type="text/jscript">
    function DoHover(){
    element.className += ' hover';
    }
    function DoActive(){
    element.className += ' active';
    }
    function DoFocus(){
    element.className += ' focus';
    }
    function RestoreHover(){
    element.className = element.className.replace(/\shover\b/,'');
    }
    function RestoreActive(){
    element.className = element.className.replace(/\sactive\b/,'');
    }
    function RestoreFocus(){
    element.className = element.className.replace(/\sfocus\b/,'');
    }
    </script>
    </public:component>


    And the second thing is you don't need the demo() JavaScript function.
    That was just to give you the alert box in the demonstration page to
    show you what the clinks did.

    I may use the concept for my site where I if the user has JavaScript
    enabled I will stack several images of a piece and then use the links
    just to rotate among them and not traverse to another page. Of course if
    they don't have JavaScript enabled the images would just be laid out in
    a column...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 6, 2012
    #5
  6. Alfred Molon wrote:
    > Ok, many thanks for the script. I did it, here is an example:
    > http://www.molon.de/galleries/Germany/Munich/Skyline/img.php?pic=5
    >
    > Left/right arrows to go back and forth, up arrow to return to the photo
    > gallery. What do you think?


    Did a little more tweaking that enhances it a bit, for the browsers that
    support CSS3


    <http://www.littleworksstudio.com/temp/usenet/slideshow>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 7, 2012
    #6
  7. Hot-Text

    Hot-Text Guest

    "Jonathan N. Little" <> wrote in message news:jgp4ut$bru$...
    > Hot-Text wrote:
    >> "Alfred Molon" <> wrote in message
    >> news:...
    >>> I'd like to add the following feature to my site.
    >>>
    >>> When somebody is on an image page, for instance:
    >>> http://www.molon.de/galleries/Egypt/Siwa/Oracle/img.php?pic=2
    >>>
    >>> and hovers the mouse cursor on the right part of the image a white
    >>> arrow (">" shape) appears inside the image, close to the right border.
    >>> Moving the mouse cursor out of the right part of the image makes the
    >>> white arrow disappear.
    >>> Clicking the mouse on the right arrow brings you to the next image of
    >>> the gallery (in this case Nr 3).
    >>>
    >>> And the same with the left part of the image (a "<" arrow appears
    >>> close to the left border, click on it and you go to the previous image).
    >>>
    >>> I've seen something similar on some sites and I guess this can be done
    >>> with Java, but how?

    >> NO with CSS style sheet File.
    >>
    >> <link rel="stylesheet" TYPE="text/css" HREF="name.css">
    >> and it go in the Head.
    >>
    >> put this in your name.css File
    >>
    >> .top-dog { color: #FFFFFF; text-decoration: none; font-size: 12px; }
    >> .top-dog a:hover { color: #FFF000; text-decoration: underline; }
    >>
    >> Put in your File.HTML
    >>
    >> <a href="" class="top-dog">&lt;&lt;&nbsp;Prev</A>
    >> <a href="" class="top-dog">Next&nbsp;&gt;&gt;</A>

    >
    > Did you even bother to test your code? To OP ignore the above, it does nothing that you asked for.
    >


    It works all you need was a background-color
    and the code came from the link the OP gave..
    but for you Mr. Little I clean it up....

    Try it you may buy it....... not as big

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>top-dog is name.css</title>
    <link rel="stylesheet" TYPE="text/css" HREF="http://mynews.ath.cx:81/name.css">
    </head>
    <body>
    <!-- 3 TD -->

    <table summary="" border="1" bgcolor="#0000ff">
    <tr>
    <td><a href="" class="top-dog" style=" background-color: #0000ff;"> &lt; &lt; &nbsp; Prev </A></td>
    <td style="color: #ffffff;">My Dog home</td>
    <td><a href="" class="top-dog" style="background-color: #0000ff;"> Next &nbsp; &gt; &gt; </A></td>
    </tr>
    </table>

    <br />
    <!-- 2 TD -->

    <table summary="" border="1" bgcolor="#0000ff">
    <tr>
    <td><div align='center'>
    <a href="" class="top-dog" style=" background-color: #0000ff;"> &lt; &lt; &nbsp; Prev </A><a href="" class="top-dog"
    style="background-color: #0000ff;"> Next &nbsp; &gt; &gt; </A>
    </div></td>
    </tr>
    </table>

    <br />
    <!-- One TD and Two onClick buttons-->

    <table summary="" border="1" bgcolor="#0000ff">
    <tr>
    <form class='top-dog'>
    <td><input class='top-dog' type='button' style='background-color: #0000ff;' value='&lt; &lt; &nbsp; Prev'
    onClick='history.go(-1)'></td>
    <td><input class='top-dog' type='button' style='background-color: #0000ff;' value='Next &nbsp; &gt; &gt;'
    onClick='history.go(1)'></td>
    </form>
    </tr>
    </table>
    </body>
    </html>



    --
    User-agent: *
    Disallow: /
    Hot-Text, Feb 7, 2012
    #7
  8. Alfred Molon wrote:
    > Thanks but I won't bother about IE6, because almost nobody is using it
    > anymore (< 1% in the USA for instance). And you can navigate the site
    > also without Java.


    Just a nitpick here the technology is *JavaScript* not Java. Java is a
    different beast all together.

    >
    > I took out the demo function and the new script is
    >
    > <script type="text/javascript">
    > window.onload;
    > </script>
    >
    > Is this correct?


    No, you don't need any of it. No JavaScript was need to do the effect it
    is all CSS.

    >
    > If I want to replace the cursors and the white boxes with images
    > (transparent gif or png) how do I do that?


    <http://www.w3.org/TR/CSS2/ui.html#propdef-cursor>

    I use it here if you want to peek.

    <http://littleworksstudio.lws.lan/ak2007.php>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 7, 2012
    #8
  9. Alfred Molon wrote:
    > In article<jgrun5$oko$>, Jonathan N. Little says...
    >
    >> No, you don't need any of it. No JavaScript was need to do the effect it
    >> is all CSS.

    >
    > Oh... I'm impressed. CSS is so mighty?
    >
    >>> If I want to replace the cursors and the white boxes with images
    >>> (transparent gif or png) how do I do that?

    >>
    >> <http://www.w3.org/TR/CSS2/ui.html#propdef-cursor>
    >>
    >> I use it here if you want to peek.
    >>
    >> <http://littleworksstudio.lws.lan/ak2007.php>

    >
    > The link doesn't work. But I made the changes already, see for instance:
    > http://www.molon.de/galleries/Spain/Barcelona/Montjuic/img.php?pic=8


    Doh! As it shouldn't that is the development mirror on the wrong site of
    the firewall! Try the public server!

    <http://www.littleworksstudio.com/ak2007.php

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 7, 2012
    #9
  10. Hot-Text

    123Jim Guest

    On 06/02/2012 23:14, Jonathan N. Little wrote:
    > Alfred Molon wrote:
    >> Ok, many thanks for the script. I did it, here is an example:
    >> http://www.molon.de/galleries/Germany/Munich/Skyline/img.php?pic=5
    >>
    >> Left/right arrows to go back and forth, up arrow to return to the photo
    >> gallery. What do you think?

    >
    > Looks good! Now a couple of things. You do realize that it will not work
    > at all with IE6 because IE6 does not recognize the hover pseudo-element
    > "hover" on anything other than an A element with an HREF attribute. You
    > will need some JavaScript or the htc hack:
    >


    We can forget about IE6
    http://windowsteamblog.com/ie/b/ie/archive/2012/01/03/the-us-says-goodbye-to-ie6.aspx

    surely
    123Jim, Feb 8, 2012
    #10
  11. 123Jim wrote:
    > On 06/02/2012 23:14, Jonathan N. Little wrote:
    >> Alfred Molon wrote:
    >>> Ok, many thanks for the script. I did it, here is an example:
    >>> http://www.molon.de/galleries/Germany/Munich/Skyline/img.php?pic=5
    >>>
    >>> Left/right arrows to go back and forth, up arrow to return to the photo
    >>> gallery. What do you think?

    >>
    >> Looks good! Now a couple of things. You do realize that it will not work
    >> at all with IE6 because IE6 does not recognize the hover pseudo-element
    >> "hover" on anything other than an A element with an HREF attribute. You
    >> will need some JavaScript or the htc hack:
    >>

    >
    > We can forget about IE6
    > http://windowsteamblog.com/ie/b/ie/archive/2012/01/03/the-us-says-goodbye-to-ie6.aspx
    >
    >


    If only it were true...I'd like to throw IE7 & 8 on the funeral pyre as
    well, but in reality some large businesses drank the MS Kool-aid and
    locked their infrastructure on the IE-only crap for their intranets.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 8, 2012
    #11
  12. Hot-Text

    dorayme Guest

    In article <jgtuf6$g85$>,
    123Jim <> wrote:

    > We can forget about IE6
    > http://windowsteamblog.com/ie/b/ie/archive/2012/01/03/the-us-says-goodbye-to-i
    > e6.aspx


    If folk would just let IE6 lead a quiet death instead of fanfaring it,
    those developers who earn significant percentages of their incomes
    charging for making their sites look good in it would not suffer so
    abruptly and brutally. Now where will they get their petrol money
    from? Where the root canal treatment fee? Where the bucks to pay the
    office cleaner or the classy secretary or the long business lunches?
    Children may have to be moved to public schools.

    --
    dorayme
    dorayme, Feb 8, 2012
    #12
  13. Hot-Text wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:jgp4ut$bru$...
    >> Hot-Text wrote:
    >>> "Alfred Molon" <> wrote in message
    >>> news:...
    >>>> I'd like to add the following feature to my site.
    >>>>
    >>>> When somebody is on an image page, for instance:
    >>>> http://www.molon.de/galleries/Egypt/Siwa/Oracle/img.php?pic=2
    >>>>
    >>>> and hovers the mouse cursor on the right part of the image a white
    >>>> arrow (">" shape) appears inside the image, close to the right border.
    >>>> Moving the mouse cursor out of the right part of the image makes the
    >>>> white arrow disappear.
    >>>> Clicking the mouse on the right arrow brings you to the next image of
    >>>> the gallery (in this case Nr 3).
    >>>>
    >>>> And the same with the left part of the image (a "<" arrow appears
    >>>> close to the left border, click on it and you go to the previous
    >>>> image).
    >>>>
    >>>> I've seen something similar on some sites and I guess this can be done
    >>>> with Java, but how?
    >>> NO with CSS style sheet File.
    >>>
    >>> <link rel="stylesheet" TYPE="text/css" HREF="name.css">
    >>> and it go in the Head.
    >>>
    >>> put this in your name.css File
    >>>
    >>> .top-dog { color: #FFFFFF; text-decoration: none; font-size: 12px; }
    >>> .top-dog a:hover { color: #FFF000; text-decoration: underline; }
    >>>
    >>> Put in your File.HTML
    >>>
    >>> <a href="" class="top-dog">&lt;&lt;&nbsp;Prev</A>
    >>> <a href="" class="top-dog">Next&nbsp;&gt;&gt;</A>

    >>
    >> Did you even bother to test your code? To OP ignore the above, it does
    >> nothing that you asked for.
    >>

    >
    > It works all you need was a background-color
    > and the code came from the link the OP gave..
    > but for you Mr. Little I clean it up....
    >
    > Try it you may buy it....... not as big
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > <html>
    > <head>
    > <title>top-dog is name.css</title>
    > <link rel="stylesheet" TYPE="text/css"
    > HREF="http://mynews.ath.cx:81/name.css">
    > </head>
    > <body>
    > <!-- 3 TD -->
    >
    > <table summary="" border="1" bgcolor="#0000ff">
    > <tr>
    > <td><a href="" class="top-dog" style=" background-color: #0000ff;"> &lt;
    > &lt; &nbsp; Prev </A></td>
    > <td style="color: #ffffff;">My Dog home</td>
    > <td><a href="" class="top-dog" style="background-color: #0000ff;"> Next
    > &nbsp; &gt; &gt; </A></td>
    > </tr>
    > </table>
    >
    > <br />
    > <!-- 2 TD -->
    >
    > <table summary="" border="1" bgcolor="#0000ff">
    > <tr>
    > <td><div align='center'>
    > <a href="" class="top-dog" style=" background-color: #0000ff;"> &lt;
    > &lt; &nbsp; Prev </A><a href="" class="top-dog" style="background-color:
    > #0000ff;"> Next &nbsp; &gt; &gt; </A>
    > </div></td>
    > </tr>
    > </table>
    >
    > <br />
    > <!-- One TD and Two onClick buttons-->
    >
    > <table summary="" border="1" bgcolor="#0000ff">
    > <tr>
    > <form class='top-dog'>
    > <td><input class='top-dog' type='button' style='background-color:
    > #0000ff;' value='&lt; &lt; &nbsp; Prev' onClick='history.go(-1)'></td>
    > <td><input class='top-dog' type='button' style='background-color:
    > #0000ff;' value='Next &nbsp; &gt; &gt;' onClick='history.go(1)'></td>
    > </form>
    > </tr>
    > </table>
    > </body>
    > </html>


    1) It does not do what the OP requested...'overlaid' navigation controls.

    2) It may be simple, but for a small snippet of code it it riddled with
    errors.

    3) "onClick='history.go(1)'" does not do what you think it does. It
    will *not* get you to the next page unless you already visited it.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 9, 2012
    #13
  14. Hot-Text

    Hot-Text Guest

    "Jonathan N. Little" <> wrote in message news:jgv4df$s5o$...
    > Hot-Text wrote:
    >> "Jonathan N. Little" <> wrote in message
    >> news:jgp4ut$bru$...
    >>> Hot-Text wrote:
    >>>> "Alfred Molon" <> wrote in message
    >>> Did you even bother to test your code? To OP ignore the above, it does
    >>> nothing that you asked for.
    >>>

    >>
    >> It works all you need was a background-color
    >> and the code came from the link the OP gave..
    >> but for you Mr. Little I clean it up....
    >>
    >> Try it you may buy it....... not as big
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >>
    >> <html>
    >> <head>
    >> <title>top-dog is name.css</title>
    >> <link rel="stylesheet" TYPE="text/css"
    >> HREF="http://mynews.ath.cx:81/name.css">
    >> </head>
    >> <body>
    >> <!-- 3 TD -->
    >>
    >> <table summary="" border="1" bgcolor="#0000ff">
    >> <tr>
    >> <td><a href="" class="top-dog" style=" background-color: #0000ff;"> &lt;
    >> &lt; &nbsp; Prev </A></td>
    >> <td style="color: #ffffff;">My Dog home</td>
    >> <td><a href="" class="top-dog" style="background-color: #0000ff;"> Next
    >> &nbsp; &gt; &gt; </A></td>
    >> </tr>
    >> </table>
    >>
    >> <br />
    >> <!-- 2 TD -->
    >>
    >> <table summary="" border="1" bgcolor="#0000ff">
    >> <tr>
    >> <td><div align='center'>
    >> <a href="" class="top-dog" style=" background-color: #0000ff;"> &lt;
    >> &lt; &nbsp; Prev </A><a href="" class="top-dog" style="background-color:
    >> #0000ff;"> Next &nbsp; &gt; &gt; </A>
    >> </div></td>
    >> </tr>
    >> </table>
    >>
    >> <br />
    >> <!-- One TD and Two onClick buttons-->
    >>
    >> <table summary="" border="1" bgcolor="#0000ff">
    >> <tr>
    >> <form class='top-dog'>
    >> <td><input class='top-dog' type='button' style='background-color:
    >> #0000ff;' value='&lt; &lt; &nbsp; Prev' onClick='history.go(-1)'></td>
    >> <td><input class='top-dog' type='button' style='background-color:
    >> #0000ff;' value='Next &nbsp; &gt; &gt;' onClick='history.go(1)'></td>
    >> </form>
    >> </tr>
    >> </table>
    >> </body>
    >> </html>

    >
    > 1) It does not do what the OP requested...'overlaid' navigation controls.
    >
    > 2) It may be simple, but for a small snippet of code it it riddled with
    > errors.
    >
    > 3) "onClick='history.go(1)'" does not do what you think it does. It
    > will *not* get you to the next page unless you already visited it.
    >


    Jonathan are you here to gave free help,

    your to get Client for LITTLE WORKS STUDIO

    1)To say that is not do what the OP requested,
    we I getting the code from the link he give..
    2)works with not Errors if it had, there would be
    two or more Groupie who would say so and who us the Errors of your ways
    3)
    you have to Start same where to go back too,
    and I all hope it back to my page
    http://mynews.ath.cx:81/776/index.html
    Show that 776 is no 777

    --
    User-agent: *
    Disallow: /
    Hot-Text, Feb 9, 2012
    #14
  15. Hot-Text wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:jgv4df$s5o$...
    >> Hot-Text wrote:
    >>> "Jonathan N. Little" <> wrote in message
    >>> news:jgp4ut$bru$...
    >>>> Hot-Text wrote:
    >>>>> "Alfred Molon" <> wrote in message
    >>>> Did you even bother to test your code? To OP ignore the above, it does
    >>>> nothing that you asked for.
    >>>>
    >>>
    >>> It works all you need was a background-color
    >>> and the code came from the link the OP gave..
    >>> but for you Mr. Little I clean it up....
    >>>
    >>> Try it you may buy it....... not as big
    >>>
    >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >>> "http://www.w3.org/TR/html4/strict.dtd">
    >>>
    >>> <html>
    >>> <head>
    >>> <title>top-dog is name.css</title>
    >>> <link rel="stylesheet" TYPE="text/css"
    >>> HREF="http://mynews.ath.cx:81/name.css">
    >>> </head>
    >>> <body>
    >>> <!-- 3 TD -->
    >>>
    >>> <table summary="" border="1" bgcolor="#0000ff">
    >>> <tr>
    >>> <td><a href="" class="top-dog" style=" background-color: #0000ff;"> &lt;
    >>> &lt; &nbsp; Prev </A></td>
    >>> <td style="color: #ffffff;">My Dog home</td>
    >>> <td><a href="" class="top-dog" style="background-color: #0000ff;"> Next
    >>> &nbsp; &gt; &gt; </A></td>
    >>> </tr>
    >>> </table>
    >>>
    >>> <br />
    >>> <!-- 2 TD -->
    >>>
    >>> <table summary="" border="1" bgcolor="#0000ff">
    >>> <tr>
    >>> <td><div align='center'>
    >>> <a href="" class="top-dog" style=" background-color: #0000ff;"> &lt;
    >>> &lt; &nbsp; Prev </A><a href="" class="top-dog" style="background-color:
    >>> #0000ff;"> Next &nbsp; &gt; &gt; </A>
    >>> </div></td>
    >>> </tr>
    >>> </table>
    >>>
    >>> <br />
    >>> <!-- One TD and Two onClick buttons-->
    >>>
    >>> <table summary="" border="1" bgcolor="#0000ff">
    >>> <tr>
    >>> <form class='top-dog'>
    >>> <td><input class='top-dog' type='button' style='background-color:
    >>> #0000ff;' value='&lt; &lt; &nbsp; Prev' onClick='history.go(-1)'></td>
    >>> <td><input class='top-dog' type='button' style='background-color:
    >>> #0000ff;' value='Next &nbsp; &gt; &gt;' onClick='history.go(1)'></td>
    >>> </form>
    >>> </tr>
    >>> </table>
    >>> </body>
    >>> </html>

    >>
    >> 1) It does not do what the OP requested...'overlaid' navigation controls.
    >>
    >> 2) It may be simple, but for a small snippet of code it it riddled
    >> with errors.
    >>
    >> 3) "onClick='history.go(1)'" does not do what you think it does. It
    >> will *not* get you to the next page unless you already visited it.
    >>

    >
    > Jonathan are you here to gave free help,
    >
    > your to get Client for LITTLE WORKS STUDIO


    Not sure I grok. I offered a *working* and *valid* example that
    addressed the OP's request.

    >
    > 1)To say that is not do what the OP requested,
    > we I getting the code from the link he give..


    But if you reread the OP you will discover he was not asking for an
    example of that he was already doing, (i.e., static navigation link
    below his images), but for the overlayed one seen on sites like Facebook.


    > 2)works with not Errors if it had, there would be
    > two or more Groupie who would say so and who us the Errors of your ways


    Obviously you never used a validator.

    <http://validator.w3.org/>

    You markup is a hodge-podge HTML 3.2, 4.01 and XHTML and some just plain
    invalid.


    > 3)
    > you have to Start same where to go back too,
    > and I all hope it back to my page
    > http://mynews.ath.cx:81/776/index.html
    > Show that 776 is no 777
    >


    I have no ides what you are saying here, nor what that has to do with
    the current topic. I am confident that I am not alone either.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 9, 2012
    #15
  16. Hot-Text

    dorayme Guest

    In article <jh0j8q$5s2$>,
    "Jonathan N. Little" <> wrote:

    > Hot-Text wrote:
    > >
    > > Jonathan are you here to gave free help,
    > >
    > > your to get Client for LITTLE WORKS STUDIO

    >
    > Not sure I grok. I offered a *working* and *valid* example that
    > addressed the OP's request.


    This hot bit of text is insulting you! It is insinuating that you are
    posting to tout for business.

    --
    dorayme
    dorayme, Feb 9, 2012
    #16
  17. Hot-Text

    Hot-Text Guest

    "dorayme" <> wrote in message news:...
    > In article <jh0j8q$5s2$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> Hot-Text wrote:
    >> >
    >> > Jonathan are you here to gave free help,
    >> >
    >> > your to get Client for LITTLE WORKS STUDIO

    >>
    >> Not sure I grok. I offered a *working* and *valid* example that
    >> addressed the OP's request.

    >
    > This hot bit of text is insulting you! It is insinuating that you are
    > posting to tout for business.
    >


    Look I like Jonathan he give good info,
    and a 99.99% right at times,
    for we all are out to get some business,
    Free good info, show that Jonathan can do the work for the right Clients....

    But you dorayme, is the insulting one..
    you know they have a name for guys like you,
    and I have no more to say on that subject..

    --
    User-agent: *
    Disallow: /
    Hot-Text, Feb 10, 2012
    #17
  18. Hot-Text

    Hot-Text Guest

    "Jonathan N. Little" <> wrote in message news:jh0j8q$5s2$...
    > Hot-Text wrote:
    >> "Jonathan N. Little" <> wrote in message
    >> news:jgv4df$s5o$...
    >>> Hot-Text wrote:
    >>>> "Jonathan N. Little" <> wrote in message
    >>>> news:jgp4ut$bru$...
    >>>>> Hot-Text wrote:
    >>>>>> "Alfred Molon" <> wrote in message
    >>>>> Did you even bother to test your code? To OP ignore the above, it does
    >>>>> nothing that you asked for.
    >>>>>
    >>>>
    >>>> It works all you need was a background-color
    >>>> and the code came from the link the OP gave..
    >>>> but for you Mr. Little I clean it up....
    >>>>
    >>>> Try it you may buy it....... not as big
    >>>>
    >>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >>>> "http://www.w3.org/TR/html4/strict.dtd">
    >>>>
    >>>> <html>
    >>>> <head>
    >>>> <title>top-dog is name.css</title>
    >>>> <link rel="stylesheet" TYPE="text/css"
    >>>> HREF="http://mynews.ath.cx:81/name.css">
    >>>> </head>
    >>>> <body>
    >>>> <!-- 3 TD -->
    >>>>
    >>>> <table summary="" border="1" bgcolor="#0000ff">
    >>>> <tr>
    >>>> <td><a href="" class="top-dog" style=" background-color: #0000ff;"> &lt;
    >>>> &lt; &nbsp; Prev </A></td>
    >>>> <td style="color: #ffffff;">My Dog home</td>
    >>>> <td><a href="" class="top-dog" style="background-color: #0000ff;"> Next
    >>>> &nbsp; &gt; &gt; </A></td>
    >>>> </tr>
    >>>> </table>
    >>>>
    >>>> <br />
    >>>> <!-- 2 TD -->
    >>>>
    >>>> <table summary="" border="1" bgcolor="#0000ff">
    >>>> <tr>
    >>>> <td><div align='center'>
    >>>> <a href="" class="top-dog" style=" background-color: #0000ff;"> &lt;
    >>>> &lt; &nbsp; Prev </A><a href="" class="top-dog" style="background-color:
    >>>> #0000ff;"> Next &nbsp; &gt; &gt; </A>
    >>>> </div></td>
    >>>> </tr>
    >>>> </table>
    >>>>
    >>>> <br />
    >>>> <!-- One TD and Two onClick buttons-->
    >>>>
    >>>> <table summary="" border="1" bgcolor="#0000ff">
    >>>> <tr>
    >>>> <form class='top-dog'>
    >>>> <td><input class='top-dog' type='button' style='background-color:
    >>>> #0000ff;' value='&lt; &lt; &nbsp; Prev' onClick='history.go(-1)'></td>
    >>>> <td><input class='top-dog' type='button' style='background-color:
    >>>> #0000ff;' value='Next &nbsp; &gt; &gt;' onClick='history.go(1)'></td>
    >>>> </form>
    >>>> </tr>
    >>>> </table>
    >>>> </body>
    >>>> </html>
    >>>
    >>> 1) It does not do what the OP requested...'overlaid' navigation controls.
    >>>
    >>> 2) It may be simple, but for a small snippet of code it it riddled
    >>> with errors.
    >>>
    >>> 3) "onClick='history.go(1)'" does not do what you think it does. It
    >>> will *not* get you to the next page unless you already visited it.
    >>>

    >>
    >> Jonathan are you here to gave free help,
    >>
    >> your to get Client for LITTLE WORKS STUDIO

    >
    > Not sure I grok. I offered a *working* and *valid* example that
    > addressed the OP's request.
    >


    true

    >>
    >> 1)To say that is not do what the OP requested,
    >> we I getting the code from the link he give..

    >
    > But if you reread the OP you will discover he was not asking for an
    > example of that he was already doing, (i.e., static navigation link
    > below his images), but for the overlayed one seen on sites like Facebook.
    >


    true I review and you right...

    >
    >> 2)works with not Errors if it had, there would be
    >> two or more Groupie who would say so and who us the Errors of your ways

    >
    > Obviously you never used a validator.
    >
    > <http://validator.w3.org/>
    >
    > You markup is a hodge-podge HTML 3.2, 4.01 and XHTML and some just plain
    > invalid.
    >


    I look LOOL you right it suck.
    more like a HTML 2.0

    >
    >> 3)
    >> you have to Start same where to go back too,
    >> and I all hope it back to my page
    >> http://mynews.ath.cx:81/776/index.html
    >> Show that 776 is no 777
    >>

    >
    > I have no ides what you are saying here, nor what that has to do with
    > the current topic. I am confident that I am not alone either.
    >


    I was just say if you came from my webpage by a link,
    to his you'll history.go(-1), back to my webpage true...


    --
    User-agent: *
    Disallow: /
    Hot-Text, Feb 10, 2012
    #18
  19. Hot-Text wrote:
    >
    > I was just say if you came from my webpage by a link,
    > to his you'll history.go(-1), back to my webpage true...




    But your markup:

    <input class='top-dog' type='button' style='background-color:
    #0000ff;' value='Next &nbsp; &gt; &gt;' onClick='history.go(1)'>

    Does *not* go to the next page as you have labeled. You cannot use
    *history* to go to the "future": a page that the user has not visited yet.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 10, 2012
    #19
  20. Hot-Text

    dorayme Guest

    In article <jh34to$fkt$>,
    "Jonathan N. Little" <> wrote:

    > You cannot use
    > *history* to go to the "future": a page that the user has not visited yet.


    O yeah? No wonder the world is doomed, you earthlings never learn.

    --
    dorayme
    dorayme, Feb 10, 2012
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Garamond
    Replies:
    2
    Views:
    116
    David Garamond
    Dec 18, 2005
  2. MG
    Replies:
    0
    Views:
    415
  3. Otto Wyss

    Backward/forward through history

    Otto Wyss, Feb 15, 2007, in forum: Javascript
    Replies:
    6
    Views:
    101
    Otto Wyss
    Feb 20, 2007
  4. Virgil Stokes

    Fast forward-backward (write-read)

    Virgil Stokes, Oct 23, 2012, in forum: Python
    Replies:
    7
    Views:
    142
    Virgil Stokes
    Oct 25, 2012
  5. Tim Chase
    Replies:
    0
    Views:
    171
    Tim Chase
    Oct 23, 2012
Loading...

Share This Page