Results 1 to 3 of 3

Thread: Swfobject positioning

  1. #1
    Join Date
    Oct 2008
    moreno valley, California ,usa

    Swfobject positioning

    Hi everyone,
    this is probably an easy problem. I'm using swfobject to play a swf flash file on a landing page. I know the flash player will open it's own window to present the content. I thought if I specified 'wmode', 'opaque' the file would be "forced" into the flow of the web page and I could gain control of it's positioning. I used this wmode setting and yet the file keeps "doing it's own thing" and not appearing inside the div where I want to position it.

    The following is a stripped down version of my problem; the swf and swf object files are in the same directory; the swf file plays just fine, it just doesn't want to go into my div id="target_img":

    <title>Home Page</title>
    <style type="text/css" >

    #target_img {
    width: 300px;
    top: 100px;
    border:thin solid #33CC33;


    <div id="header">
    <img src="images/newhead2.jpg" alt="company icon" />
    </div><!--end header-->

    <div id="target_img"><img src="images/land.swf" /></div>
    <br /><br />
    <script type="text/javascript" src="images/swfobject.js"></script>
    <script type="text/javascript">
    var so = new SWFObject('images/land.swf','target_img','300','240','9');
    so.addParam('wmode', 'opaque');


    I've also tried moving the closing </div> to the position right after </script> but this has had no effect.

    I welcome any suggestions.

    Last edited by captsig; 01-11-2011 at 01:11 PM.

  2. #2
    Join Date
    Feb 2008
    NW Washington State
    You may just be having positioning problems that have nothing to do with swfobject.
    For testing purposes, turn off swfobject by changing the file name in the <head> to
    <script type="text/javascript" src="swfobject_off.js"></script>
    of course edit as per your exact src path. This will allow you to see the content of the div without Flash being involved. This is a good practice with swfobject anyway... get your alt content working first and only after that, do you turn on the Flash.
    Give #target_img the exact same dimensions as the .swf and give it a background color so you can see where it's being positioned. Now get all the positioning so that it works. You may be thrown off by the positioning "Parent Rule".
    From an old post:
    the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.

    That is, if it's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
    If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
    If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

    So be sure to give a declared position to both the parent and the child <div>.
    Once you get the positioning correct then change the file name of swfobject up in the head. If you are using swfobject 1.5 (which it looks like you are) all the script as well as the alt content will go INSIDE #target_img.
    Piece of cake!
    Here's a sample page using swfobject, alt content as well as a declared position to place one .swf on top of another:
    The video player is placed on top of a different .swf.
    View the source code for more details.
    Best wishes,
    Eye for Video

  3. #3
    Join Date
    Oct 2008
    moreno valley, California ,usa
    'Eye-for-video' thanks for your response; you are always generous with your time for these postings.
    I found the problem; while trying to implement your comments I kept puzzling over the reference to the div id 'target_img' in the object statement:

    var so = new SWFObject('images/land.swf','target_img','300','240','9');

    this whole stretch of code is sitting in a div with id='target_img'; this could be the duplication I was seeing. Sure enough when I changed the object param of 'target_img' to something like 'my_img' (a div that didn't even exist) bingo, no duplication and the flash element played in the position I needed it.

    thanks again,

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.30973 seconds
  • Memory Usage 2,852KB
  • Queries Executed 13 (?)
More Information
Template Usage (34):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates