www.webdeveloper.com
Results 1 to 8 of 8

Thread: changing multiple z-indexes

  1. #1
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    230

    Lightbulb changing multiple z-indexes

    The problem, in brief:

    30+ small images, layered on top of eachother... old photos, in chronological order, starting from the earliest:earliest photo has highest z-index.

    With jQuery, 2 functions are bound to each image: click, the image enlarges and is draggable; doubleclick, it fades out.

    Watching people try it, they like keeping the screen full of images-- 5-6 take up most of the screen space, and they like the way images slide around under eachother.

    But: what's really wanted is a way to make the latest enlarged image the topmost layer, rather than the bottom-most... apart from individually assigning z-indexes in 30+ individual functions.

    Suggestions very welcome: my vocab is pretty limited, this looks like an opportunity, as they say.

    Cheers.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,290
    I am not sure to understand the question. With 30 z-indexes, one function is enough to determine the z-index min or max and to attribute its value (more or less one) to the latest enlarged image...

  3. #3
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    230
    Hi,

    just to clarify:

    Photo1 is z-index:50;
    photo2 starts as z:49, and needs to be z:51 when enlarged;
    photo3 starts as z:48 and needs to be z:52 when enlarged;
    photo4 starts as z:47 and need to go to z:53 ...etc.
    The increase in z-index needs to be incremental.

    I'm not sure how to make this happen in one function.

    I did think of starting with the z-indexes going from 0 to -1, -2,-3 etc, and finding a way to change them to positive: but haven't tried it yet.

    Can you suggest a different way?

    cheers.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,290
    It is not even necessary to recalculate the zMax !
    Define one variables zMax with the initial max value and increment its value before affecting it to the enlarged images

    Code:
    var zMax=50;
    //...
    // Then in the function to enlarge the image
    Object.style.zIndex=++zMax; 
    // Or with jQuery something like
    $(... ).css('z-index',++zMax);

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,863
    Hi there ctoz,

    instead of "zIndex" you could just change the src of the top image in the stack...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    #images {
        position:relative;
     }
    #images img {
        position:absolute;
        cursor:pointer;
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
    
      ims=document.getElementById('images').getElementsByTagName('img');
      ary=[];
    
    for(c=0;c<ims.length;c++) {
      ary.push(ims[c].src);
      ims[c].number=c-1
     }
    
    ims[ims.length-1].onclick=function(){
    
    if(this.number==-1){
       this.number=ims.length-1;
     }
       this.src=ary[this.number--]; 
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    
    </script>
    
    </head>
    <body>
    
    <div id="images">
     <img src="anim.gif" alt="">
     <img src="anim1.gif" alt="">
     <img src="anim2.gif" alt="">
     <img src="anim3.gif" alt="">
     <img src="anim4.gif" alt="">
     <img src="anim5.gif" alt="">
    </div>
    
    </body>
    </html>
    
    coothead

  6. #6
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    230

    resolved many thanks

    Hi, and thankyou: two economical and elegant solutions.

    The more you know, the easier it gets?

    Cheers, and thanks again.

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,863
    No problem, you're very welcome.


    coothead

  8. #8
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    230
    Been playing with 007Julien's solution, and can bind the function to a mousdown to go with the enlarging, and with a click to bring the image to the top, from wherever.

    But I'm going to suss out your way of doubledealing with the img tag, I think it's got possibilities.

    cheers.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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.11792 seconds
  • Memory Usage 2,913KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (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
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (8)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (8)postbit
  • (8)postbit_onlinestatus
  • (8)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 (73):
  • 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_postinfo_query
  • fetch_postinfo
  • 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
  • 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