• Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Topic: Can you help me put this JS together please?

I came across this great script that customizes selects. http://www.ildavid.com/dblog/selectcustomizer/ This custom select is going into Fancybox. The select is inline within a hidden div. Fancybox calls it, and it pops up! Each are working perfect, but I can't get the custom select to work within fancybox. Common theme with me lately.

I have found the solution here http://groups.google.com/group/fancybox … ad7b42df79 but I can't seem to put the pieces together. Can you help me???

Here is the Custom Select JS 

<script type="text/javascript">
$.fn.SelectCustomizer = function(){
    // Select Customizer jQuery plug-in
    // based on customselect by Ace Web Design http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/
    // modified by David Vian http://www.ildavid.com/dblog
    return this.each(function(){
        var obj = $(this);
        var name = obj.attr('id');
        var id_slc_options = name+'_options';
        var id_icn_select = name+'_iconselect';
        var id_holder = name+'_holder';
        var custom_select = name+'_customselect';
        obj.after("<div id=\""+id_slc_options+"\"> </div>");
        obj.find('option').each(function(i){
            $("#"+id_slc_options).append("<div id=\"" + $(this).attr("value") + "\" class=\"selectitems\"><span>" + $(this).html() + "</span></div>");
        });
        obj.before("<input type=\"hidden\" value =\"\" name=\"" + this.name + "\" id=\""+custom_select+"\"/><div id=\""+id_icn_select+"\">" + this.title + "</div><div id=\""+id_holder+"\"> </div>").remove();
        $("#"+id_icn_select).click(function(){
            $("#"+id_holder).toggle(700);
        });
        $("#"+id_holder).append($("#"+id_slc_options)[0]);
        $("#"+id_holder+ " .selectitems").mouseover(function(){
            $(this).addClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").mouseout(function(){
            $(this).removeClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").click(function(){
            $("#"+id_holder+" .selectedclass").removeClass("selectedclass");
            $(this).addClass("selectedclass");
            var thisselection = $(this).html();
            $("#"+custom_select).val(this.id);
            $("#"+id_icn_select).html(thisselection);
            $("#"+id_holder).toggle(700)
        });
    });
}

$(document).ready(function() { $('#demoselect, #loginselect').SelectCustomizer(); 
})
</script>

Here is what fires Fancybox 

$(document).ready(function() {
        $("a#contact").fancybox({
            'frameWidth': 300,
            'frameHeight': 300
        });
  });

And here is the solution that puts them together...
http://groups.google.com/group/fancybox … ad7b42df79

Thanks!

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: Can you help me put this JS together please?

Or I just tried this http://stackoverflow.com/questions/9104 … d-callback and it works - but I can't combin it with mine - ARgggg!

  • Registered: 2009-04-30
  • Posts: 102

Re: Can you help me put this JS together please?

$(document).ready(function() {
        $("a#contact").fancybox({
            'frameWidth': 300,
            'frameHeight': 300,
            'callbackOnShow': function(){ $('#demoselect, #loginselect').SelectCustomizer(); }
        });
  });

This should do it smile

The idea is that, hidden or display:none elements are not really affected by Javascript functions. So the idea is to call those functions when those elements are shown.

Last edited by BeeDev (2009-10-26 05:17:41)

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: Can you help me put this JS together please?

Maaan! Tried it, but didn't work. I tried the same before (although I was probably missing a closing semicolon or something). It still wont fire in Fancybox. The same select works while in the hidden div, but not when it's poped up in fancybox. Thanks a lot for looking into it though. Any other ideas? smile

I think I'll have to setup a small test page. Or I may just abandon the idea all together. It's just, inline content is better for SEO (because the site is a one page site). And this cool effect I'm after only works with inline content.

  • Registered: 2009-04-30
  • Posts: 102

Re: Can you help me put this JS together please?

Do you see any JS errors? Can't really pinpoint the problem like this, when there's no error messages or test page tongue

Maybe try another form plugin? There's one called jqTransform, it's open source:

http://www.dfc-e.com/metiers/multimedia … transform/

  • Registered: 2009-04-30
  • Posts: 102

Re: Can you help me put this JS together please?

Ok i found your problem. The problem was with this Fancybox plugin you were using. It (stupidly) duplicates the content div and appends it to it's own div with id fancy_div (Which is not very Valid, as it creates 2 items with same ID on one page...)

So the trick is to:

$(document).ready(function() {
        $("a#contact").fancybox({
            'frameWidth': 300,
            'frameHeight': 300,
            'callbackOnShow': function(){ $('#fancy_div #demoselect,#fancy_div #loginselect').SelectCustomizer(); }
        });
  });

I just tried the code below with jqTransform plugin, and it works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox</title>
    <link rel="stylesheet" type="text/css" href="../jquery.fancybox/jquery.fancybox.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="../jqtransform.css">
    <script type="text/javascript" src="../jquery.fancybox/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../jquery.fancybox/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="../jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>
    <script type="text/javascript" src="../jquery.jqtransform.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a").fancybox({
                'hideOnContentClick': false,
                'callbackOnShow': function(){ $("#fancy_div #contactform").jqTransform(); }
            });
        });
    </script>
    <style>
        html, body {
            font: normal 11px Tahoma;
            color: #333;
        }
        
        a {
            outline: none;    
        }
        
        div#wrap {
            width: 500px;
            margin: 50px auto;    
        }

        img {
            border: 1px solid #CCC;
            padding: 2px;    
            margin: 10px 5px 10px 0;
        }
    </style>
</head>
<body>
<div id="wrap">
    <h1>FancyBox - sample page</h1>
    <p>
        Inline <br />
    
        <a title="Sample title" id="contact" href="#contact-content"><img src="1_s.jpg" /></a>        
    </p>
</div>
<div id="contact-content" style="display:none;">
    <form action="" method="post" name="contactform" id="contactform">
        <select name="test">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </form>
</div>
</body>
</html>

extract the fancybox zip into a www folder. Then extract jqtransform.css, .js and img/ folders into the root folder. And finally replace the code in the example.html of fancybox with the above to make the example work roll

Good luck,
B.

Last edited by BeeDev (2009-10-26 07:42:34)

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: Can you help me put this JS together please?

Thanks a lot for taking the time to look into for me - I owe you one! That looks like it should work. But, I just tried (with my select plugin) and it didn't work. I tried the Transform plugin a few days ago, but it did not give me enough control over the look I'm after. This plugin let's me use my own images and etc. It works fine if I put it into a seperate page and pop that up in fancybox. I'll put together slimmed down test page and put it up this afternoon for us to play with.

Once I figure this out, I have to do same with the forms inline validation and submit/confirmation within fancybox. Maybe getting this issue working will help shed some light on that.

With inline content, I also perfer how it performs with JS off. It all just lays out on the page and links take you directly to them. Verses linking to exterior pages, with JS off the links now go to these unstyled pages - not as nice in my opinion. I'll post the test page this afternoon - thanks!

Last edited by Eric (2009-10-26 10:45:18)

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: Can you help me put this JS together please?

YES!!! It works! I must of had the order wrong or something. Very cool of you BeeDev, I know that wasn't the easiest thing to figure out (for me at least). Two questions though... Do you see anyway to speed up the running of the Custom Select? It doesn't change the select until the window is mostly opened.  Here is the test page... http://tinyurl.com/yzrp5xo

You seem to really know your stuff with this! And, before I spin my wheels forever, do you think it's possible to have a inline contact form popup in the fancybox, and work, and do inline validation, and confirmation?

It's a one page site. There are four main nav links done with jQuery tabs. And then there are three links up top that open with fancybox. So id prefer to have the functionality of each link be the same. Thanks! smile

Edit - oops, I may of spoken too soon. It still won't fire in IE6/7. Do you have a clue about that? I wouldn't even know where to start there.

Last edited by Eric (2009-10-26 16:02:29)

  • Registered: 2009-04-30
  • Posts: 102

Re: Can you help me put this JS together please?

I always forget to test on IE hmm I'm trying to figure out the problem in IE, but no luck so far sad

In terms of having a form that validates & opens in fancybox, I think it's possible BUT there's always Internet Explorer 6 & 7 that can stop you due to its unpredictable behavior.

In your case, I think the plugins that you chose are not the best ones, especially that Fancybox which creates duplicate elements with same ID on a page, which just might be your IE problem. I'm going to try a different plugin called jQuery.Tools from Flowplayer guys (flowplayer[dot]org) instead of that fancybox and let you know of the results. Could be a while since it's quite busy at work as well.

B.

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: Can you help me put this JS together please?

No worries, I'm just going to put it in an outside page and be done with it. We gave it a good try, I'm tired, and I want to be finished with this. I figured out how to get my effect and have it as an outside page. Thanks again for all your help!