add class to php generated element with jquery

Question

I need some help. I am bringing in a string from a custom field in wordpress. This string is an iframe embed code for both youtube and vimeo. I need to add a class to this iframe in order for fancybox to do its thing.

<?php
$videoLinks=get_post_meta($post->ID, "iframe video embed code", true);
echo $videoLinks;?>
<script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>

When testing by inserting an iframe embed code in the custom field I get this. (no class added)

<iframe src="http://player.vimeo.com/video/33039612?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"    webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a   href="http://vimeo.com/33039612">HG Skis: Trillinton..</a> from <a   href="http://vimeo.com/hgskis">HG Skis</a> on <a href="http://vimeo.com">Vimeo</a>.</p>  <script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>

Relatively new to jquery, fancybox works on images manually tagged with fancybox class. Will adding class based on a certain event fix my issue?

Thats really not how fancybox is going to work. Look at http://fancybox.net/blog and you can see youtube example. I know there is a vimeo on on there some where too. — Matt, Mar 17 '12 at 03:09
Matt has a good point. My answer makes too many assumptions: that you're using fancybox as a plugin, that the plugin author is handling the fancybox call, and that the plugin expects to find elements with the class "fancybox" in order to call it on them in a preconfigured way. If even one of those assumptions is wrong, then we need more information and my answer is no good. — Greg Pettit, Mar 17 '12 at 03:19
@Matt the op seems to be using fancybox v2.x. The link to fancybox.net is for v1.3.x — JFK, Mar 17 '12 at 05:16
I've set up my page according to this page on fancybox's site: http://fancyapps.com/fancybox/#instructions @GregPettit your assumptions seem valid. — Zach Lincoln, Mar 17 '12 at 19:13

score 0 · Answer 1 · answered Mar 17 '12 at 03:16

0

It's possibly about timing. If fancybox is operating via a script that fires automatically on DOM ready, looking for "fancybox" elements to attach event handlers to, it might have already done its job by the time your addClass script fires. Something tells me this isn't necessarily the problem, though; the document ready function will actually be LATER than scripts running before the page is fully built.

There's also a syntax issue: 'fancybox fancybox.iframe' is not valid. You can add space separated classes if you want to add multiple, but "fancybox.iframe" is not a valid class. I believe JavaScript will let you add it, but you can't style it and there might be problems selecting it.

Don't you simply need $('iframe').addClass('fancybox')?

I'd make sure that your addClass is succeeding first, and if it is, are the classes required all present and accounted for. Then, debug timing issues.

answered Mar 17 '12 at 03:16

Greg Pettit

10,749
5
53
72

petit: the syntax 'fancybox fancybox.iframe' is perfectly valid for fancybox v2.x – JFK Mar 17 '12 at 05:19
_The HTML 4.01 spec states that ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores_ (\_) _colons (:), and periods (.). _For the class attribute, there is no such limitation. Classnames can contain any character, and they don’t have to start with a letter to be valid_. From http://mathiasbynens.be/notes/html5-id-class – JFK Mar 18 '12 at 00:45
As a wrap up I created this http://picssel.com/playground/jquery/validClassNames_17mar12.html I guess your comment "_The authors of fancybox encourage you to use a classname that's invalid? Odd_" is inaccurate. BTW you can style a `class="uno.dos"` "escaping" the period like `.uno\.dos { background-color: #f2f2f2; }` – JFK Mar 18 '12 at 07:15
Wow, just wow. You did far too much work to prove you're right-- I'm a much easier sell than that! I did this: http://jsfiddle.net/ecBgx/ and it didn't work (nor did I expect it to). One further reply with one solid counter-argument would have been all you needed to get me to bow my head in shame, my friend! ;-) – Greg Pettit Mar 18 '12 at 23:48

qitch · Answer 2 · 2012-03-17T04:36:40.007

The code you have shown works fine. That is, when I open a file with this it works:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<iframe>sfdfsf</iframe>
<script>
    $('iframe').addClass('fancybox fancybox.iframe');
</script>

What does your fancybox code look like?

You can turn youtube links into embedded videos with something like this:

 $(document).ready(function() {

       $("a.youtube").click(function() {
             $.fancybox({
              'padding'             : 0,
              'autoScale'       : false,
              'transitionIn'        : 'none',
              'transitionOut'       : 'none',
              'title'               : this.title,
              'width'               : 680,
              'height'              : 495,
              'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
              'type'                : 'swf',    // <--add a comma here
             'swf'                 : {'allowfullscreen':'true','wmode':'opaque'}
              });
             return false;

        });

Same thing can be done with Vimeo urls.

score 0 · Accepted Answer · answered Mar 17 '12 at 05:41

0

try

<script>
 $(document).ready(function(){
  $('iframe').addClass('fancybox fancybox.iframe');
 });
</script>

it should play the trick... of course, I assume you are using fancybox v2.x

answered Mar 17 '12 at 05:41

JFK

40,963
31
133
306

Thank you, an amateur oversight on my part. Fancybox was looking for elements with class 'fancybox' on DOM ready, well before my script had added the class. – Zach Lincoln Feb 13 '13 at 03:07

add class to php generated element with jquery

3 Answers3