combining jquery functions ready and live

Question

$(document).ready(function(){
        $("a[rel='box']").colorbox();
                });

and

jQuery('a[href*=#]').live('click',function() { ...etc...

total NOOB question: I have these two functions in JQuery...

How do I combine them ?

a[href*=#] is a slideshow presentation and a[rel='box'] is for a colorbox to open... one or the other works but not both together.

That is what I get for trying to "cut and paste" code...

the Jquery is loaded

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">    </script>
<script type='text/javascript' src='scripts/jquery.colorbox-min.js'></script>

in the HEAD section

I even tried to add:

 jQuery(function(){
 if(jQuery.isFunction(jQuery.fn.colorbox)) {
    jQuery("a").live('click',function(){
         jQuery(this).colorbox();
     });
 }
 });

but this didn't work either...

This is where I got the slideshow... www.pixedelic.com/plugins/camera/ colorbox is loaded, but doesn't work on individual pictures...

Any help would be GREATLY appreciated and thanks!

If you're new to jQuery you shouldn't be using `live`. It's been deprecated since 1.7. — Barmar, Apr 23 '13 at 02:43
thanks for your patience... http://www.edparton.com/hope/demo.html is the page — user2309534, Apr 23 '13 at 06:54
http://haitioneyear.org/ is the effect I am trying to achieve — user2309534, Apr 23 '13 at 06:57
for the haitioneyear.org it is one of the pics below the slideshow — user2309534, Apr 23 '13 at 07:00
I think you have a conflict with jQuery, there's an error in the console on the `$(document).ready()` line, because `$` is undefined. — Barmar, Apr 23 '13 at 07:00
I copied that colorbox code from a working installation of mine... but the custom.js is where the conflict is coming from — user2309534, Apr 23 '13 at 07:05
I think your copy of `jquery.min.js` is corrupted, it doesn't define `$`. — Barmar, Apr 23 '13 at 07:06
It ends with `jQuery.noConflict();`, that prevents defining `$`. So you have to write `jQuery(document).ready()` instead of `$(document).ready()`. — Barmar, Apr 23 '13 at 07:08
that is interesting, there is also a jquery.noconflict in the custom.js file?? — user2309534, Apr 23 '13 at 07:11
You can write `jQuery(document).ready(function($) { ... });`. Then you can use `$` inside the function. — Barmar, Apr 23 '13 at 07:14
$.noConflict(); jquery(document).ready(function($){ $("a[rel='box']").colorbox(); }); this doesn't work either — user2309534, Apr 23 '13 at 07:19
`jQuery` not `jquery`. It should be wherever you need to define your document.ready code, that's usually the main page. — Barmar, Apr 23 '13 at 07:22
Do you know how to see errors in the JS console? You really need to learn how to debug, you can't depend on someone to hold your hand through all this. — Barmar, Apr 23 '13 at 07:23
I did not notice the jQuery... ha! but I changed it and the colorbox still does not work — user2309534, Apr 23 '13 at 07:25
you are perfectly right... how do I see errors in the JS console? — user2309534, Apr 23 '13 at 07:26
You can't write `$.noConflict()` after you already have `jQuery.noConflict()` in jquery.min.js. How many times do I have to tell you that this prevents using the `$` abbreviation? — Barmar, Apr 23 '13 at 07:29
What browser are you using? There should be a developer menu to let you get into the web inspector. — Barmar, Apr 23 '13 at 07:30
thanks, I found the CONSOLE to help debug in chrome ctrl shft j — user2309534, Apr 23 '13 at 07:30
GENIUS ! I found the $ no.Conflict() and took it out, Now IT Works! — user2309534, Apr 23 '13 at 07:32
really! thank you SO MUCH for sticking with a noob ... you have been an excellent teacher — user2309534, Apr 23 '13 at 07:33
Looks like some minor style glitches in the colorbox, the X button is cut off. — Barmar, Apr 23 '13 at 07:35
thanks again... that little X button is easy to fix... thanks — user2309534, Apr 23 '13 at 07:36
Can you please add your solution as an answer below so we can get this off the unanswered list of questions? Thanks. — Bill the Lizard, Apr 23 '13 at 11:03

score 0 · Answer 1 · answered Apr 23 '13 at 18:34

The problem was defining $ in jQuery NOT an A conflict with READY and LIVE...

I think your copy of jquery.min.js is corrupted, it doesn't define $.

Your jQuery script ends with jQuery.noConflict();, that prevents defining $.

So you have to write jQuery(document).ready() instead of $(document).ready()

You can't write $.noConflict() after you already have jQuery.noConflict() in jquery.min.js.

SOLUTION:

 jQuery(document).ready(function($){            
        $("a[rel='box']").colorbox();
                });

NOT:

// cannot below use if have jQuery.noConflict(); !  use above notice large Q //
    $(document).ready(function(){
        $("a[rel='box']").colorbox();
        });

THANKS! Barmar!

combining jquery functions ready and live

1 Answers1