Alternatives to Iframes?

Discussion in 'HTML' started by osman, Sep 21, 2005.

  1. osman

    osman Guest

    Hi all, I'm working on a site where I need to have a gallery.
    I've been given a few pictures to start off with and I'd like to show
    it all on one page.
    My one works, but there are issues.
    It has little code (unordered list) and works(?) in all browsers :

    http://chameleonmoments.com/station13/art.html
    (not tested in ie)

    On one side I've used an iframe with a target name (name="picture").
    On the other side there are the thumbnail links with target
    destinations (target="picture").

    I know that the use of iframes is a real no-no, I want to know what the
    alternatives are.
    Something simple and obvious, surely.

    Javascript is not an option and neither is php. Its a static 5 page
    site.

    --
    i
     
    osman, Sep 21, 2005
    #1
    1. Advertising

  2. osman

    Dr Clue Guest

    osman wrote:
    > Hi all, I'm working on a site where I need to have a gallery.
    > I've been given a few pictures to start off with and I'd like to show
    > it all on one page.
    > My one works, but there are issues.
    > It has little code (unordered list) and works(?) in all browsers :
    >
    > http://chameleonmoments.com/station13/art.html
    > (not tested in ie)
    >
    > On one side I've used an iframe with a target name (name="picture").
    > On the other side there are the thumbnail links with target
    > destinations (target="picture").
    >
    > I know that the use of iframes is a real no-no, I want to know what the
    > alternatives are.
    > Something simple and obvious, surely.
    >
    > Javascript is not an option and neither is php. Its a static 5 page
    > site.
    >


    Something like this could work with a div in the page
    <div id="DIVpicture"></div>


    document.getElementById("DIVpicture").innerHTML='<img src="my.gif">')

    --
    --.
    --=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
    --=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
    --=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
    --.
     
    Dr Clue, Sep 21, 2005
    #2
    1. Advertising

  3. Dr Clue wrote:
    <snip>
    > Something like this could work with a div in the page
    > <div id="DIVpicture"></div>
    >
    >
    > document.getElementById("DIVpicture").innerHTML='<img src="my.gif">')
    >

    Ah, OP said:

    >> Javascript is not an option and neither is php. Its a static 5 page
    >> site.


    And that is JavaScript....

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 21, 2005
    #3
  4. osman

    Dr Clue Guest

    Jonathan N. Little wrote:
    > Dr Clue wrote:
    > <snip>
    > Ah, OP said:
    >
    > >> Javascript is not an option and neither is php. Its a static 5 page
    > >> site.

    >


    Oops , did not see that. Bound to miss-read one now and again,
    thaks for pointing it out.





    --
    --.
    --=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
    --=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
    --=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
    --.
     
    Dr Clue, Sep 21, 2005
    #4
  5. osman

    Dr Clue Guest

    osman wrote:
    > Hi all, I'm working on a site where I need to have a gallery.
    > I've been given a few pictures to start off with and I'd like to show
    > it all on one page.
    > My one works, but there are issues.
    > It has little code (unordered list) and works(?) in all browsers :
    >
    > http://chameleonmoments.com/station13/art.html
    > (not tested in ie)
    >
    > On one side I've used an iframe with a target name (name="picture").
    > On the other side there are the thumbnail links with target
    > destinations (target="picture").
    >
    > I know that the use of iframes is a real no-no, I want to know what the
    > alternatives are.
    > Something simple and obvious, surely.
    >
    > Javascript is not an option and neither is php. Its a static 5 page
    > site.



    I mis-posted before , as I had missed the part ruling out javascript,
    but someone mentioned it so I thought I'd re-visit the question.

    How about changing the link to

    <a href="#pictureOne>" title="click to view creature design">creature
    <span>Image one, by Redstar Studio</span></a>

    place the images spread down the page with
    <a name="pictureOne">[pictureone]</a> underneath each image

    <a name="pictureTwo">[pictureone]</a> underneath each image
    .....
    .....

    Then you can put the rest of the screen elements as position:fixed

    Appearancewise it should look the same as your iframe solution


    --
    --.
    --=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
    --=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
    --=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
    --.
     
    Dr Clue, Sep 21, 2005
    #5
  6. osman

    osman Guest

    Dr Clue wrote
    > so I thought I'd re-visit the question.


    Thanks for having another go at it.
    Interesting method.
    You're suggesting having all the images load on the page and making the
    links to them as anchors.
    So the anchors take you to the pictures 'down' the page.
    I really need to keep it all inside the 600px high design.
    Maybe having the images stacked on top of each other will work.
    Though I can't see how this will change the z-index, width/height or
    any other style attribute of the images.

    I'm working on it.
    http://cssplay.co.uk/menu/gallery4.html#nogo has some great examples,
    but none that work 100% for me.

    This is so easy with flash, but I'm determined to do it in xhtml.
    Haven't looked at xframes or xml. Is that an easy option?

    --
    i
     
    osman, Sep 21, 2005
    #6
  7. osman

    Dr Clue Guest

    osman wrote:
    > Dr Clue wrote
    >
    >>so I thought I'd re-visit the question.

    >
    >
    > Thanks for having another go at it.
    > Interesting method.
    > You're suggesting having all the images load on the page and making the
    > links to them as anchors.
    > So the anchors take you to the pictures 'down' the page.
    > I really need to keep it all inside the 600px high design.


    Well , if done well , the person viewing the page would have an
    itentical user experiance either way, so I'm not sure what the objection is

    > Maybe having the images stacked on top of each other will work.
    > Though I can't see how this will change the z-index, width/height or
    > any other style attribute of the images.


    I piddled with that thought too, and the nearest it would resolve in
    my mind was an ugly piece of soup where the 500x500 display iframe
    was replaced with divs/spans that were actually inside each of the links
    and a variation on the css rule you are using did the trick trading out
    the span portion of the rule for an id and having two spans
    to talk to and two rules ending in id's instead of elements
    As that thought went on , z-indexing indeed came into the proces, as I
    pondered how I would actually click on these huge <a></a> constructs.

    > I'm working on it.
    > http://cssplay.co.uk/menu/gallery4.html#nogo has some great examples,
    > but none that work 100% for me.
    >
    > This is so easy with flash, but I'm determined to do it in xhtml.
    > Haven't looked at xframes or xml. Is that an easy option?
    >


    I like flash about as much as I like microsoft, I'd much rather do
    it in VEML. :)


    --
    --.
    --=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
    --=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
    --=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
    --.
     
    Dr Clue, Sep 21, 2005
    #7
  8. osman

    Rossz Guest

    osman wrote:
    > Hi all, I'm working on a site where I need to have a gallery.
    > I've been given a few pictures to start off with and I'd like to show
    > it all on one page.
    > My one works, but there are issues.
    > It has little code (unordered list) and works(?) in all browsers :
    >
    > http://chameleonmoments.com/station13/art.html
    > (not tested in ie)
    >
    > On one side I've used an iframe with a target name (name="picture").
    > On the other side there are the thumbnail links with target
    > destinations (target="picture").
    >
    > I know that the use of iframes is a real no-no, I want to know what the
    > alternatives are.
    > Something simple and obvious, surely.
    >
    > Javascript is not an option and neither is php. Its a static 5 page
    > site.



    http://www.meyerweb.com/eric/css/edge/popups/demo2.html

    --
    Rossz
    God kills a kitten every time someone uses Internet Explorer
     
    Rossz, Sep 22, 2005
    #8
  9. osman

    osman Guest

    > Rossz wrote :
    > http://www.meyerweb.com/eric/css/edge/popups/demo2.html


    Thanks Rossz. Thats something that got me into this whole css thing a
    year ago. I'm using a similar technique to show the rollovers in the
    menu. They only show on rollover, not on click, so can't be used to
    load the large image.

    --
    i
     
    osman, Sep 23, 2005
    #9
  10. osman

    rossz Guest

    osman wrote:
    >>Rossz wrote :
    >>http://www.meyerweb.com/eric/css/edge/popups/demo2.html

    >
    >
    > Thanks Rossz. Thats something that got me into this whole css thing a
    > year ago. I'm using a similar technique to show the rollovers in the
    > menu. They only show on rollover, not on click, so can't be used to
    > load the large image.
    >


    I'm sure it would be feasible to get it to do something on the click
    like passing an image code back to itself, but that would require
    something like PHP, Perl, or Javascript to process it.

    --
    Rossz
    God kills a kitten each time someone uses Internet Explorer
     
    rossz, Sep 24, 2005
    #10
  11. osman

    osman Guest

    > Rossz wrote:
    > get it do something on the click ...


    Thanks for the help. I did it with a simple trick :
    The big images are stacked ontop of each other with style display:none.
    The image links are anchors and the :target css3 attribute is used.
    Pro is it works like a charm, con is that all images load up and its
    non ie6.

    http://chameleonmoments.com/station13/art.html
     
    osman, Oct 6, 2005
    #11
  12. osman

    Toby Inkster Guest

    osman wrote:

    > :target css3 attribute is used. Pro is it works like a charm, con is
    > that all images load up and its non ie6.


    Con is that the :target CSS3 pseudo-class (it's a "pseudo-class", not an
    "attribute") has not been standardised yet, so relying on any support for
    it is extremely iffy and likely to break things in the future.

    AFAIK, only Gecko- and KHTML-family browers offer experimental support for
    it.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Oct 6, 2005
    #12
  13. osman

    osman Guest

    Toby wrote:
    > relying on any support for it is extremely iffy...


    I knew there would be something to add to the cons.
    IE7 will support :target
    (http://dean.edwards.name/IE7/compatibility/index.html) I think.
    I may have to use javascript if not.
    Any other ideas?

    --
    i
     
    osman, Oct 6, 2005
    #13
  14. osman

    Toby Inkster Guest

    Toby Inkster, Oct 7, 2005
    #14
  15. osman

    osman Guest

    Toby wrote:
    > I find it unlikely that the latter will support :target.


    Yeah...
    I used javascript for the iframe like behavior. I still prefer the css
    method.
    Thanks to all who helped and who just corrected me.

    On viewing this site in explorer I see that there are far greater
    issues than :target support. The content scrolling doesn't behave
    correctly thanks to IE6 and its bugs. Opera has a hard time with the
    menu, the image gallery and the footer.
    The beat goes on...
     
    osman, Oct 8, 2005
    #15
    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. Marina

    OT: SSL issues with IFRAMES

    Marina, Aug 11, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    404
    Marina
    Aug 11, 2003
  2. Ashish

    Problem with iframes

    Ashish, Feb 27, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    4,672
    Ashish
    Feb 27, 2004
  3. Ashish

    problem with iframes

    Ashish, Feb 27, 2004, in forum: ASP .Net
    Replies:
    8
    Views:
    521
    Marina
    Feb 27, 2004
  4. JezB

    styles & iFrames

    JezB, Jun 28, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    357
    Eliyahu Goldin
    Jun 28, 2004
  5. =?Utf-8?B?VmFuIFN0ZWVuYmVyZ2VuIEphbg==?=

    Iframes and session variables--HELP requested

    =?Utf-8?B?VmFuIFN0ZWVuYmVyZ2VuIEphbg==?=, Jul 1, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    835
    =?Utf-8?B?VmFuIFN0ZWVuYmVyZ2VuIEphbg==?=
    Jul 1, 2004
Loading...

Share This Page