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,714

    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,714
    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,714
    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



Recent Articles