www.webdeveloper.com
Results 1 to 4 of 4

Thread: Setting up a function with Ctrl+Click and passing a value

  1. #1
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,832

    Setting up a function with Ctrl+Click and passing a value

    My code thus far:


    PHP Code:
    function addBreak(e){
        
    $el = {
            
    orig_el_nm:'To Be Added',
            
    selector:'Not yet set'
        
    }
        if(
    e.ctrlKey){
            
    alert('Clicked Element: ' $el.orig_el_nm '\r\n\r\n Selector: ' $el.selector ',');
        }
    }

    var 
    $el_names = new Array(
        
    'img',
        
    'div',
        
    'h2',
        
    'h3',
        
    'h4',
        
    'h5',
        
    'h6',
        
    'p',
        
    'li',
        
    'dt',
        
    'tr',
        
    'caption'
    );
    var 
    $break_els = new Array();

    for(var 
    $i 0$i $el_names.length$i++){
        var 
    $el_list document.getElementsByTagName($el_names[$i]);
        for(var 
    $ii 0$ii $el_list.length$ii++){
            if(
                (
    $el_list[$ii].nodeName != 'DIV') ||
                (
                    (
    $el_list[$ii].nodeName == 'DIV') && 
                    (
    $el_list[$ii].hasAttribute('class')) && 
                    (
                        (/
    ln[0-9][0-9]/.test(SlctrClass($el_list[$ii])))||
                        (/
    samp[0-9]/.test(SlctrClass($el_list[$ii])))||
                        (
    SlctrClass($el_list[$ii]) == 'code_header')||
                        (
    SlctrClass($el_list[$ii]) == 'code_subheader')
                    )
                )
            ){
                
    $break_els.push(GetSelector($el_list[$ii]));
            }
        }
    }

    for(var 
    $i 0$i $break_els.length$i++){
          
    $break_els[$i].orig_el.addEventListener('click',addBreak,false);

    So, how do I pass on both the event AND the value of $break_els[$i] to the function of addBreak?

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Code:
    for(var $i = 0; $i < $break_els.length; $i++){ 
          (function(num) { //need to create a closure otherwise we'll be referencing the same i every time when the event listener is executed
             $break_els[num].orig_el.addEventListener('click',function(e) { addBreak(e,$break_els[num]); } ,false); 
          }($i));
    }
    Just curious, is there a reason you use a $ in front of all your variables?
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,832
    Quote Originally Posted by aj_nsc View Post
    Just curious, is there a reason you use a $ in front of all your variables?
    PHP habit.

  4. #4
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,832
    My finished page-break-controlling script!

    PHP Code:
    var $curr_el;
    var 
    $breaklist = new Array();
    function 
    Styling($el$stl){
        for(var 
    $p in $stl){
            
    $el.style[$p] = $stl[$p]
        }
    }

    /*  Page Menu */
    var $pagemenu document.createElement('j_div');
    Styling($pagemenu,{
        
    position:'fixed',
        
    width:'500px',
        
    height:'500px',
        
    top:'0',
        
    right:'0',
        
    border:'3px double black',
        
    background:'white',
        
    display:'none'
    });

    var 
    $pageoptions document.createElement('j_div');
    $pagemenu.appendChild($pageoptions);
    Styling($pageoptions,{
        
    display:'block'
    });

    $pageoptions.opt1 document.createElement('j_p');
    $pageoptions.appendChild($pageoptions.opt1);
    $pageoptions.opt1.appendChild(document.createTextNode('Add page break'));
    $pageoptions.opt1.onclick = function(){
        var 
    $found false;
        var 
    $i 0;
        while(
    $i $breaklist.length && !$found){
            
    $found = ($breaklist[$i] == $curr_el.selector)
            
    $i++;
        }
        if(!
    $found){
            
    $breaklist.push($curr_el.selector);
            
    Styling($curr_el.brk_el, {
                
    borderTop:'1px dashed #888',
                
    pageBreakBefore:'always'
            
    });
        }
        
    HideBrkMenu();
    }
    Styling($pageoptions.opt1,{
        
    display:'block'
    });

    $pageoptions.opt2 document.createElement('j_p');
    $pageoptions.appendChild($pageoptions.opt2);
    $pageoptions.opt2.appendChild(document.createTextNode('Remove page break'));
    $pageoptions.opt2.onclick = function(){
        var 
    $check;
        var 
    $keep = new Array();
        while(
    $breaklist.length 0){
            
    $check $breaklist.shift();
            if(
    $check != $curr_el.selector){
                
    $keep.push($check);
            }
        }
        for(var 
    $i 0$i $keep.length$i++){
            
    $breaklist.push($keep[$i]);
        }
        
    Styling($curr_el.brk_el, {
            
    pageBreakBefore:'auto'
        
    });
        
    HideBrkMenu();
    }
    Styling($pageoptions.opt2,{
        
    display:'block'
    });

    $pageoptions.opt3 document.createElement('j_p');
    $pageoptions.appendChild($pageoptions.opt3);
    $pageoptions.opt3.appendChild(document.createTextNode('Show page break'));
    $pageoptions.opt3.onclick = function(){
        
    $pageoptions.style.display 'none'
        
    showBreaks();
    }
    Styling($pageoptions.opt3,{
        
    display:'block'
    });

    var 
    $pagebreaks document.createElement('j_div');

    Styling($pagebreaks,{
        
    overflow:'auto',
        
    whiteSpace:'pre',
        
    display:'none',
        
    background:'white',
        
    color:'black',
        
    fontSize:'8pt'
    });

    $pagebreaks.brks document.createTextNode(' ');
    $pagebreaks.appendChild($pagebreaks.brks);


    function 
    showBreaks(){
        
    $pagebreaks.brks.data '';
        for(var 
    $i 0$i $breaklist.length$i++){
            
    $pagebreaks.brks.data += ($breaklist[$i] + ',\r\n');
        }
        
    $pagebreaks.style.display 'block';
        
    $pageoptions.style.display 'none';
    }
    $pagemenu.appendChild($pagebreaks);

    $pagemenu.ondblclick = function(){HideBrkMenu();}


    document.lastChild.lastChild.appendChild($pagemenu);

    function 
    HideBrkMenu(){
        
    $pagemenu.style.display='none';
        
    $pagebreaks.style.display 'none';
        
    $pageoptions.style.display='block';
    }

    /*  Set Up Click Events  */

    function SlctrClass($elem){
        var 
    $cls $elem.getAttribute('class');
        var 
    $class;
        if(
    $cls.indexOf(' ') > -1){
            
    $class $cls.substr(0$cls.indexOf(' '));
        } else {
            
    $class $cls;
        }
        return 
    $class;
    }
    function 
    GetSelector($elem){
        var 
    $el $elem;
        while(
            (
    $el.getAttribute('class')) &&
            (
                (
    $el.getAttribute('class')==($el.nodeName.toLowerCase() + '1')) ||
                (
    $el.getAttribute('class')==($el.nodeName.toLowerCase() + '01')) ||
                (
    $el.getAttribute('class')==($el.nodeName.toLowerCase() + '001'))
            ) &&
            (
    $el.nodeName != 'UL') &&
            (
    $el.nodeName != 'OL') &&
            (
    $el.nodeName != 'DL') &&
            (
    $el.nodeName != 'P')
        ){
    $el $el.parentNode;}
        if(
            (
    $el.nodeName == 'H2') ||
            (
    $el.nodeName == 'H3') ||
            (
    $el.nodeName == 'H4') ||
            (
    $el.nodeName == 'H5') ||
            (
    $el.nodeName == 'H6') ||
            (
    $el.nodeName == 'IMG') ||
            (
    $el.nodeName == 'THEAD')||
            (
    $el.nodeName == 'TBODY')||
            (
    $el.nodeName == 'CAPTION') ||
            ((
    $el.nodeName == 'DIV') && ($el.getAttribute('class') == 'code_header'))||
            ((
    $el.nodeName == 'DIV') && ($el.getAttribute('class').indexOf('sample') === 0))
        ){
    $el $el.parentNode;}
        if(
            ((
    $el.nodeName == 'DIV') && ($el.parentNode.hasAttribute('class')) && ($el.parentNode.getAttribute('class').indexOf('sample') === 0) && ($el.getAttribute('class') == 'ln01'))||
            ((
    $el.nodeName == 'DIV') && ($el.parentNode.hasAttribute('class')) && ($el.parentNode.getAttribute('class').indexOf('samp01') > -1) && ($el.getAttribute('class') == 'ln01'))
        ){
    $el $el.parentNode.parentNode;}
        var 
    $selector;
        var 
    $ret_el $el;
        
        if(
    $el.getAttribute('id')){
            
    $selector '#' $el.getAttribute('id');
        }else if(
    $el.parentNode.nodeName=='THEAD'){
            
    $selector '#' $el.parentNode.parentNode.getAttribute('id');
        }else{
            
    $selector $el.nodeName.toLowerCase()+'.'SlctrClass($el);
            while(!
    $el.getAttribute('id')){
                
    $el $el.parentNode;
                if(
    $el.hasAttribute('class')  && !($el.hasAttribute('id'))){
                    
    $selector $el.nodeName.toLowerCase() + '.' SlctrClass($el) + ' > ' $selector;
                }else if(
    $el.parentNode.nodeName == 'TABLE'){
                    
    $selector  $el.nodeName.toLowerCase() + ' > ' $selector;
                }
            }
            
    $selector '#' $el.getAttribute('id') + ' > ' $selector;
        }
        var 
    $orig_el_name $elem.nodeName.toLowerCase() + (($elem.hasAttribute('class'))?('.' $elem.getAttribute('class').replace(/\s/g,'.')):'');
        var 
    $ret_el_name $ret_el.nodeName.toLowerCase() + 
            ((
    $ret_el.hasAttribute('id'))?('#' $ret_el.getAttribute('id')):'') +
            ((
    $ret_el.hasAttribute('class'))?('.' $ret_el.getAttribute('class').replace(/\s/g,'.')):'') +
        
    '';
        return {
            
    selector:$selector,
            
    brk_el:$ret_el,
            
    orig_el:$elem,
            
    brk_el_nm:$ret_el_name,
            
    orig_el_nm:$orig_el_name,
        };
    }



    function 
    addBreak($ev$el){if($ev.ctrlKey){
        
    $curr_el $el;
        
    $pagemenu.style.display 'block';
    }}

    var 
    $el_names = new Array(
        
    'img',
        
    'div',
        
    'h2',
        
    'h3',
        
    'h4',
        
    'h5',
        
    'h6',
        
    'p',
        
    'li',
        
    'dt',
        
    'tr',
        
    'caption'
    );
    var 
    $break_els = new Array();

    for(var 
    $i 0$i $el_names.length$i++){
        var 
    $el_list document.getElementsByTagName($el_names[$i]);
        for(var 
    $ii 0$ii $el_list.length$ii++){
            if(
                (
    $el_list[$ii].nodeName != 'DIV') ||
                (
                    (
    $el_list[$ii].nodeName == 'DIV') && 
                    (
    $el_list[$ii].hasAttribute('class')) && 
                    (
                        (/
    ln[0-9][0-9]/.test(SlctrClass($el_list[$ii])))||
                        (/
    samp[0-9]/.test(SlctrClass($el_list[$ii])))||
                        (
    SlctrClass($el_list[$ii]) == 'code_header')||
                        (
    SlctrClass($el_list[$ii]) == 'code_subheader')
                    )
                )
            ){
                
    $break_els.push(GetSelector($el_list[$ii]));
            }
        }
    }

    for(var 
    $i 0$i $break_els.length$i++){
        (function(
    num) {
            
    $break_els[num].orig_el.addEventListener('click',function(e) { addBreak(e,$break_els[num]); } ,false); 
        }(
    $i));

    Now if only I could make head or tail of my own script...

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.18883 seconds
  • Memory Usage 3,085KB
  • Queries Executed 15 (?)
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
  • (2)bbcode_php
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)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
  • bbcode_parse_start
  • postbit_imicons
  • 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