www.webdeveloper.com
Results 1 to 10 of 10

Thread: simulate frameset with resizability

  1. #1
    Join Date
    Dec 2005
    Posts
    8

    Question simulate frameset with resizability

    Hi everyone! I've searched through the net and through this forum for ways to do this, but the proper search words have eluded me, as have the results.

    I'm trying to simulate a frameset in every way, including having resizability. Draggable, resizable divs are available in many places, but they only resize one object and do not take other objects into account. As you know, when you resize a frame in a frameset, the others snap to fill up the gap or shrink accordingly.

    Something else I need is a way to put a visual cue into the resize bar. In framesets, you can't touch anything in the bar, except (nonstandardly, and not cross-browserly) changing the color. This doesn't tell the user that they can do anything with the interface to change the sizes.

    I did find this page here helpful: http://siter.com.au/dmitry/divs.html
    Unfortunately, it doesn't nest horizontal and vertical frames in the same section and it gave me problems when I tried to throw a vertical split inside a horizontal one.

    There's a demo here: http://rialto.application-servers.com/demoRialto.jsp
    It's incredible, but the documentation is focused on the AJAX and JSP, whereas I'm more interested in how they've managed to simulate frames so smoothly, with usable resize triggers. I really need those, too! Frames are resizable but the user is given no cues that clicking and dragging the borders will be a benefit to them.

    Does anyone have any information where I can not have to reinvent the wheel? This has to have been done prior to Rialto.

    Thanks so much!
    JennHi

  2. #2
    Join Date
    Dec 2004
    Posts
    8,637
    Quote Originally Posted by jennhi
    Something else I need is a way to put a visual cue into the resize bar. In framesets, you can't touch anything in the bar, except (nonstandardly, and not cross-browserly) changing the color. This doesn't tell the user that they can do anything with the interface to change the sizes.
    You can use onmouseover code to detect when the mouse is over the borders of your DIVs and change the mouse cursor style to col-resize or row-resize.
    Last edited by phpnovice; 04-20-2006 at 01:12 PM.

  3. #3
    Join Date
    Dec 2005
    Posts
    8
    phpnovice, do you have a code that will just detect when the mouse is over the border of an object and not on the object itself?

    Thanks for your help!
    Last edited by jennhi; 04-20-2006 at 01:04 PM. Reason: edited for tone, responding to something that was also edited

  4. #4
    Join Date
    Dec 2004
    Posts
    8,637
    No, I do not. However, the same code which detects the mouse is over the object itself is the code you use for this task. The difference is that you account for the dimensions of the object and the size of the border. This, of course, means that you must show the user a border in the first place.

    As for what else you said, don't take offense at something which is only included as an "in case" situation. If it doesn't apply to you, then just ignore it. Cheers.

  5. #5
    Join Date
    Dec 2005
    Posts
    8
    I'm afraid that doesn't make much sense. To detect if the mouse is over an object, you code:
    Code:
    obj.onmouseover = function() { this.style.cursor = "col-resize"; }
    So how do you define an area inside the object, minus the borders, where the cursor would be default? Or how do you define an area, minus the borders, then take the inverse of that area (just the borders) and define a mouseover capture?

  6. #6
    Join Date
    Dec 2004
    Posts
    8,637
    Yes, and you would also use onmouseout to set the cursor back to the default. Of course, this would only apply to that object, so this would not actually be a requirement.

  7. #7
    Join Date
    Dec 2005
    Posts
    8
    Sorry, I should have been more clear: how do you define that area?

  8. #8
    Join Date
    Dec 2004
    Posts
    8,637
    You mean, what are the properties for the dimensions of the current object and the properties for its border?

  9. #9
    Join Date
    Dec 2004
    Posts
    8,637
    I now have code to do this which works in both IE and Mozilla -- so, yes, it is very possible -- but just the code to properly detect the borders and change the mouse cursor for eight different directions of movement is worth $200 to me, so I'm not just going to hand it out. (I'm still adding the code to actually resize the DIV -- another $100.) However, I'll give you the same tools I had to work with:

    MS DIV Object
    MS Event Object
    MS Style Object
    MS Client Dimensions
    and the old NS JavaScript 1.3 Reference Manuls which are on my computer.

    I apologize that all of these on-line references are for IE. But I cannot find as nice a non-IE reference as the MSDN site. And, lastly, I used the following HTML as my model:
    HTML Code:
    <div style="border-style:ridge; border-width:10px; padding:2px 5px; width:100px; height:100px;"
     onmouseover="return CheckResize(event)"
     onmousemove="return CheckResize(event)"
     onmousedown="return BeginResize(event)"
     onmouseup="return EndResize(event)"
     onmouseout="return ResetResize(event)">
      This DIV is Resizable By the User
    </div>
    Otherwise, I'd be glad to help with any specific problems you run into -- and which you care to ask about here. Cheers.

  10. #10
    Join Date
    Dec 2005
    Posts
    8
    Thanks for the help!

    For anyone else, if you come across a liquid resizable frameset simulator with a tutorial, I'd appreciate it. RIALTO appears to have added a sort-of-tutorial to their site but it doesn't explain how to make your own, just how to use their libraries.

    Thanks!
    J

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.26192 seconds
  • Memory Usage 2,937KB
  • Queries Executed 13 (?)
More Information
Template Usage (35):
  • (1)SHOWTHREAD
  • (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_html
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (10)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (10)postbit
  • (10)postbit_onlinestatus
  • (10)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