Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy ZeroClipboard (jQuery version) semi-working and not working

    Hi All,

    I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things.

    On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below.

    *working* link
    http://pics.boasbysatyra.com/access/spiders.php
    This one only works in FF, and the clip area is offset badly.

    Here is the template for the zc code:

    Code:
    <div class="photo" style="float: left; padding: 4px;">
    <div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
               <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                    <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
                </a>
     <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
           <script language="JavaScript">
               var clip = new ZeroClipboard.Client();
               clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
               clip.glue( 'd_clip_button[+filename+]' );
               clip.addEventListener( 'onComplete', my_complete );
    
            function my_complete( client, text ) {
                    $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
            }
           </script>
    </div>
    </div>
    And the JS for the page:

    Code:
    var needRef;
    //flag for page reload
    function pEdit(){
    needRef = 1;
    }
    
    Shadowbox.init({
        handleOversize: "resize",
        modal: true,
        initialHeight: 32,
        initialWidth: 400,
        overlayOpacity: 0.85,
            onClose: function(){//check for reload flag and reload
    if (needRef == 1){window.location.href=window.location.href;}
    }
    });
    ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
    function initMenu() {
        $('#menu ul').hide();
        $('#menu ul:first').show();
        $('#menu li a').click(function() {
            var checkElement = $(this).next();
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                //return false;
                }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#menu ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
                return false;
            }
        });
    }
    $(document).ready(function() {
        initMenu();
    });
    Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area!

    http://jb.boasbysatyra.com/forum-pic...cs/nature.html

    Code:
    div class="photo" style="float: left; margin: 4px;">
    <div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
               <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                    <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
                </a>
    <div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
     <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
           <script language="JavaScript">
               var clip = new ZeroClipboard.Client();
               clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
               clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
               clip.addEventListener( 'onComplete', my_complete );
    
            function my_complete( client, text ) {
                    $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
            }
           </script>
    </div>
    </div>
    </div>
    On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking...

    Here is the JS:

    Code:
    var needRef;
    //flag for page reload
    function pEdit(){
    needRef = 1;
    }
    Shadowbox.init({
        handleOversize: "resize",
        modal: true,
        initialHeight: 32,
        initialWidth: 400,
        overlayOpacity: 0.85,
            onClose: function(){//check for reload flag and reload
    if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
    }
    });
    ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
    
    $(document).ready(function() {
    $(".dim img").fadeTo("slow", 0.65);
    $(".dim img").hover(function(){
    $(this).fadeTo("slow", 1.0);
    },function(){
    $(this).fadeTo("slow", 0.65);
    });
    $('#mainContent').hide().fadeIn(1200);
            //When page loads...
            $(".tab_content").hide(); //Hide all content
    //      $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    //      $(".tab_content:first").show(); //Show first tab content
    
            //On Click Event
            $("ul.tabs li").click(function() {
    
                    $("ul.tabs li").removeClass("active"); //Remove any "active" class
                    $(this).addClass("active"); //Add "active" class to selected tab
                    $(".tab_content").hide(); //Hide all tab content
    
                    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                    $(activeTab).fadeIn(); //Fade in the active ID content
                    return false;
            });
    
    });
    (function($) {
       $(document).ready(function(){
     $('.menu1').ptMenu();
           $('.menu2').ptMenu({vertical:true});
       });
    })(jQuery);
    I have taken a look at this for a few days and tried many things with no luck, any help is appreciated.

    Thanks!
    Last edited by fruitwerks; 12-16-2010 at 01:45 PM.

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    The issue is with ZC itself, the glue function is not very great and the dev suggested to use the getHTML method.

    Thansk!


  •  

    Posting Permissions

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