How do I wrap these jquery functions for WordPress?

1 Views

I am a jquery newbie, long time working with WordPress. I cannot manage to get these two scripts to work; regardless of where I am including them.

After having read about this issue on the Codex , I am aware that I need to change these scripts in order to work with WordPress’ no-conflict mode, but I am not sure what exactly do I have to do.

Read More

Could anyone help me and explain me how to do this for any further time, as well? Thank you. 

 function adjustIframes()
{
  $('iframe').each(function(){
    var
    $this       = $(this),
    proportion  = $this.data( 'proportion' ),
    w           = $this.attr('width'),
    actual_w    = $this.width();

    if ( ! proportion )
    {
        proportion = $this.attr('height') / w;
        $this.data( 'proportion', proportion );
    }

    if ( actual_w != w )
    {
        $this.css( 'height', Math.round( actual_w * proportion ) + 'px' );
    }
  });
}
$(window).on('resize load',adjustIframes);

// DOM ready
     $(function() {

      // Create the dropdown base
      $("<select />").appendTo("nav");

      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to..."
      }).appendTo("nav select");

      // Populate dropdown with menu items
      $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });

       // To make dropdown actually work
       // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });

     });

if( document.createTouch ) {
    this.addEvent(c[j],'tap',this.tipOver,false);
} else {
    this.addEvent(c[j],'mouseover',this.tipOver,false);
    this.addEvent(c[j],'mouseout',this.tipOut,false);
}
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Enclose your jquery code within a .ready function. Below is the code amended for jQuery noConflict mode.

    jQuery(document).ready(function($) {
    function adjustIframes()
    {
      $('iframe').each(function(){
        var
        $this       = $(this),
        proportion  = $this.data( 'proportion' ),
        w           = $this.attr('width'),
        actual_w    = $this.width();

        if ( ! proportion )
        {
            proportion = $this.attr('height') / w;
            $this.data( 'proportion', proportion );
        }

        if ( actual_w != w )
        {
            $this.css( 'height', Math.round( actual_w * proportion ) + 'px' );
        }
      });
    }
    $(window).on('resize load',adjustIframes);

    // DOM ready
         $(function() {

          // Create the dropdown base
          $("<select />").appendTo("nav");

          // Create default option "Go to..."
          $("<option />", {
             "selected": "selected",
             "value"   : "",
             "text"    : "Go to..."
          }).appendTo("nav select");

          // Populate dropdown with menu items
          $("nav a").each(function() {
           var el = $(this);
           $("<option />", {
               "value"   : el.attr("href"),
               "text"    : el.text()
           }).appendTo("nav select");
          });

           // To make dropdown actually work
           // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
          $("nav select").change(function() {
            window.location = $(this).find("option:selected").val();
          });

         });

    if( document.createTouch ) {
        this.addEvent(c[j],'tap',this.tipOver,false);
    } else {
        this.addEvent(c[j],'mouseover',this.tipOver,false);
        this.addEvent(c[j],'mouseout',this.tipOut,false);
    }
});

    Also please make sure you have included the jQuery file in the header of your wordpress theme.