oli22 Posted March 1, 2011 Share Posted March 1, 2011 HI I am installing a code from a jquery pop up light box containg an iframe, only the first link opens a pop up and works good, all the other links simply open the linked page,and not the pop up, why??? This is the troublesome part of the code: <script type="text/javascript"> $(document).ready(function() { $("a#various1").fancybox ({ 'transitionIn' : 'none', 'transitionOut' : 'none' }); $("#various1").fancybox({ 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); }); </script> </head> <body> <div> <a id="various1" href="play.html">Iframe</a> <a id="various1" href="play.html">Iframe</a> <a id="various1" href="play.html">Iframe</a> </div> </body> </html> Why does the pop up only occur on first link, can anyone see know why? If not, i figured i could create a lesser solution by adding a regular expression something like[0-9]to include all links, but not sure how <script type="text/javascript"> $(document).ready(function() { $("a#various[0-9]").fancybox ({ 'transitionIn' : 'none', 'transitionOut' : 'none' }); $("#various[0-9]").fancybox({ 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); }); </script> </head> <body> <div> <a id="various1" href="play.html">Iframe</a> <a id="various2" href="play.html">Iframe</a> <a id="various3" href="play.html">Iframe</a> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
RussellReal Posted March 1, 2011 Share Posted March 1, 2011 try making the class="various1" and then using the jQuery selector to catch all elements with the className = 'various1' You cannot have more than 1 element with the same id Quote Link to comment Share on other sites More sharing options...
Adam Posted March 2, 2011 Share Posted March 2, 2011 To my knowledge you can't use regular expressions within a selector. Use the 'attribute starts with' selector to match all IDs starting with various: $('a[id=^"various"]')... Of course there may be problems if you have other IDs starting with various, but I shouldn't imagine that's hard to avoid. If so as RusselReal suggested, you'd be better off assigning a class, and using $(this).attr('id') to get the element's ID (if needed) - which to be honest may be the better option anyway. Quote Link to comment Share on other sites More sharing options...
.josh Posted March 2, 2011 Share Posted March 2, 2011 To my knowledge you can't use regular expressions within a selector. That is correct, there currently is no official regex based selector (though why not is kind of beyond me...). However, there are some neat hacks out there that do it. For instance this regex selector code. Just drop it in your jquery file or wherever you keep your plugins (or on page if you want, I guess) and follow the syntax instructions in the link. Also, you can do this with native jquery by making use of .filter() : $('a').filter(function() { return this.id.match(/various[0-9]/); }).fancybox({ // fancybox stuff }); Quote Link to comment Share on other sites More sharing options...
oli22 Posted March 2, 2011 Author Share Posted March 2, 2011 Even more replies... The class instead of id fixed it already but thanks so much. You guys are amazing and all those extra answers are extra like candy! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.