Skip to main content
Jim_Palik
Jim_Palik
Inspiring
June 19, 2017
Answered

Recommended selector to replace iframe

  • June 19, 2017
  • 3 replies
  • 665 views

I am using Dreamweaver CC. I embed jalbum slideshows into my website to display my images. I have been using iframe. The jalbum developers tell me that I should not use iframe for many reasons. What CSS selector should I replace iframe with. I need to have dynamic content resizing when viewing my website on a smartphone or tablet.

Thank you in advance for your help

Jim

    This topic has been closed for replies.
    Correct answer Nancy OShea

    To make your site mobile & tablet friendly is a big project starting with your site's layout and extending to content presented with the mobile user in mind.

    For example,

    • Mobile users don't have a mouse.  They interact differently with their devices using finger taps and swipe gestures.  Links need to be bigger for easier touch access.  Same goes for forms.
    • Mobile users view in both landscape & portrait mode.  Your layout must be able to adjust accordingly.
    • Mobile users want to see less content than desktop users. 
    • Mobile users require fewer images and less bandwidth to save their data plans.
    • Then there's the challenge of making images that will be viewed on Hi-Def & hi-pixel density *Retinas* as well as average density displays.  So every image in your catalog must be optimized for viewing on multiple devices @1x, @2x, @3x. @4x  and so on...

    In other words, there is no simple fix for making your site responsive on all devices except to rebuild it.

    Nancy

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    June 19, 2017

    To make your site mobile & tablet friendly is a big project starting with your site's layout and extending to content presented with the mobile user in mind.

    For example,

    • Mobile users don't have a mouse.  They interact differently with their devices using finger taps and swipe gestures.  Links need to be bigger for easier touch access.  Same goes for forms.
    • Mobile users view in both landscape & portrait mode.  Your layout must be able to adjust accordingly.
    • Mobile users want to see less content than desktop users. 
    • Mobile users require fewer images and less bandwidth to save their data plans.
    • Then there's the challenge of making images that will be viewed on Hi-Def & hi-pixel density *Retinas* as well as average density displays.  So every image in your catalog must be optimized for viewing on multiple devices @1x, @2x, @3x. @4x  and so on...

    In other words, there is no simple fix for making your site responsive on all devices except to rebuild it.

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Jim_Palik
    Jim_PalikAuthor
    Inspiring
    July 13, 2017

    Thank you Nancy,

    It is my (your) site I was referring to. The developer of the skin I was using inside jAlbum has written a new "responsive" skin (Tiger) that appears to work inside the page you designed for me. It also supports PayPal. I am experimenting with it.

    See the two albums I posted both inside my website and outside my website, I would love your comments.

    Look at my greeting cards.

    Greeting Cards: Focus on Flowers : Photography By James Palik

    http://jpalik.com/cards/

    These use the object tag and it works. Below is my last posting using Tiger.

    Ken Dimmick's Final Service at St Catherine's Church : Photography By James Palik

    Ken Dimmicks Final Service

    Thanks for the reply, sorry to be so late getting back to you.

    Jim

    [please refrain from PII and 3rd party URLs in this area - Moderator]
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    June 19, 2017

    You won't be able to simply replace your iframe with some css. The entirety of your slideshow is being held in a separate page (the src attribute of your iframe). If you remove the iframe, you'll need to move all of the html from the iframe's source page that deals with the slideshow to your current html file along with links to scripts being used to make the slideshow function correctly.

    Without seeing the page in question, there's really no good answer as to what you'll need to do to get it running correctly within your page without the iframe.

    Could you post a link to your work in progress?

    pziecina
    pziecina
    Legend
    June 19, 2017

    Even though iframe is perfectly valid to use in html5, it is probabably not being recommended for a number of reasons, which could include problems for accessibility reasons. To find out exactly why, you would have to ask the developers of your slideshow.

    The recommended method of resizing anything so that if fits on the screen across multiple devices and viewports, is to use media-queries, and the element to use would depend on the purpouse of the slideshow, you can also just use the good old fashioned div, if you are uncertain which html5semantic element to use.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices