Jump to content

Can you help me put this JS together please?


PicnicTutorials

Recommended Posts

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/browse_thread/thread/fe6f9cad7b42df79'>http://groups.google.com/group/fancybox/browse_thread/thread/fe6f9cad7b42df79 but I can't seem to put the pieces together. Can you help me???

 

Here is the Custom Select JS

<br />$.fn.SelectCustomizer = function(){<br />    // Select Customizer jQuery plug-in<br />    // based on customselect by Ace Web Design http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/<br />    // modified by David Vian http://www.ildavid.com/dblog<br />    return this.each(function(){<br />        var obj = $(this);<br />        var name = obj.attr('id');<br />        var id_slc_options = name+'_options';<br />        var id_icn_select = name+'_iconselect';<br />        var id_holder = name+'_holder';<br />        var custom_select = name+'_customselect';<br />        obj.after("<div id=\""+id_slc_options+"\"> ");
       obj.find('option').each(function(i){
           $("#"+id_slc_options).append("" + $(this).html() + "");
       });
       obj.before("" + this.title + " ").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(); 
})

 

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/browse_thread/thread/fe6f9cad7b42df79

 

Thanks!

Link to comment
Share on other sites

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

 

This should do it :)

 

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.

Edited by BeeDev
Link to comment
Share on other sites

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? :)

 

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.

Link to comment
Share on other sites

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!

Edited by Eric
Link to comment
Share on other sites

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! :)

 

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.

Edited by Eric
Link to comment
Share on other sites

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

 

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...