Question

First off I’m self taught.

I’m using fancybox to show a hidden div and it works fine.
My problem is I cannot get it in my head how to call the stylesheet for the hidden div.

Can someone tell me the proper way to do this?

<script type="text/javascript">
   $(document).ready(function(){
      $(".fancybox").fancybox({padding : 0, openEffect  : 'elastic'});       
   });
</script>

My hidden div:

<div id="contact" class="contact item">

Answer 1

You could style the div using a stylesheet, e.g.

site.css (or any stylesheet, not sure what yours is called)

.contact { padding: 0px; }

Or alternatively if you want to use Javascript to set the style, do it anytime before or after you apply fancybox:

<script type="text/javascript">
   $(document).ready(function(){
      $("#contact").css("padding", "0px");
      $(".fancybox").fancybox({openEffect  : 'elastic'});
   });
</script>

Note that, if you’re showing the contents of your example div, fancybox takes the contents of the hidden div and displays it, not the outer div itself, which would break your css selectors. In this case, a better example would be:

<style type="text/css">
.contact { border: 1px solid pink; }
</style>

<script type="text/javascript">
   $(document).ready(function(){
      $("#fancyBoxContents").fancybox();
   });
</script>

<div id="fancyBoxContents"><div class="contact">will be displayed</div></div>