Link to home
Start Free TrialLog in
Avatar of cyborama
cyboramaFlag for United States of America

asked on

issue with custom jquery

Hello There:

I had a similar thread opened about this topic but it became deserted so I am hoping that I can try again with a new thread.  My question is I am trying to implement a jquery plugin within wordpress.  I am not trying to use a plugin but just looking for a couple pieces of functionality one of which is image map shading which is using a jquery plugin called maphilight.

I couldn't get this plug in to work so I tested a pure jquery plugin called qtip.  When I had wired up wither one of these jquery plugins within the header.php file of wordpress it would break down my slider which is also run by jquery and I think is actually adversely reacting to any place in wordpress where Jquery is used.

I was working on this issue with someone in another thread and what they suggested was that I needed to reform my jquery to play better with wordpress and gave me this snippet of code

------------------------------------------------------------------------

(function($) {
    $(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            jQuery('#squidhead').mouseover();
        }).mouseout(function(e) {
            jQuery('#squidhead').mouseout();
        }).click(function(e) {
            e.preventDefault(); });
        });
    });
})(jQuery);

---------------------------------------------------------------------------

This was a sampling from my map.highlight jquery plugin but while I couldn't get that one specifically to work I did get the qtip plugin to function as I would expect it would without any tweaks but the side effect was destroying the functionality of my fslider and slider pro plugin both came through purchase of either theme or special plugin.

So I am trying to understand how I can make use of ordinary jquery plugins within wordpress without having to create, download, or purchase a specific wordpress plugin since I don't need the user interface to be that intuitive for this piece of the project but rather just need something functional and don't mind manually changing it at the code level if needed since this approach wouldn't allow for a wordpress gui approach.

So knowing this could you take a look at the following domain

www.cyboplus.net

When you go there you will notice that the home page has no working slider though it should.  Also if you hover over available properties and click on site 3 you will notice that their is no workable slider on this page either though their should be.

If you look at the source you will note that I have inserted or instantiated some custom jquery code for the maphilight and qtip plugins.  If you could rid of one or the other than you will see pieces of the slider but it is still non functional rather all the iamges of the slider are thrown one under the other.  If both installments of these custom jquery's are removed from the header.php file all is good or if both are in the header.php file as is the case right now their is no visible evidence that any slider should even be there.

So any insight you can give me on this would be very helpful.  If you could a look at things that would be ideal.  If you need any information to work with the issue I would be happy to give it as this site is used only for testing purposes is and is not the one that will ultimately go live.  That is on a different domain.

Thanks,

Bo
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Firefox gives this error message in the Error console.

Timestamp: 11/4/2012 10:49:34 PM
Error: TypeError: $(".map").maphilight is not a function
Source File: http://www.cyboplus.net/
Line: 45

It also says that a bunch of the images are corrupted.
What script file is this loaded in?

Also you have a syntax error in your snippet of code, it should read:

(function($) { 
    $(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            jQuery('#squidhead').mouseover();
        }).mouseout(function(e) {
            jQuery('#squidhead').mouseout();
        }).click(function(e) {
            e.preventDefault();
        });
    });
})(jQuery);

Open in new window

Try using the jquery noConfilct() method and put jquery in a variable like so:

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Open in new window


Taken from here: jquery noconflict
check if your slider and the code above doesn't have the same id or variable which would overwrite the one in your slider.
Avatar of cyborama

ASKER

Hello there:

maphilight.js is responsible for the maphilight and

qtip-min.js is responsible for the tooltip this is the one that seems to function but like maphilight interupts the slider functionality.

The structure in the header.php file is the following
------------------------------------------------------------------------------------------------------

<?php if (is_page('AVAILABLE PROPERTIES') ) { ?>
<!--home page custom JS-->
    <script type='text/javascript' src="<?php bloginfo('template_directory'); ?>_child/js/maphilight.js"></script>
   
    <?php } ?
-------------------------------------------------------------------------------------------------------

 <?php if (is_page('AVAILABLE PROPERTIES') ) { ?>
<!--home page custom JS-->
    <script type='text/javascript' src="<?php bloginfo('template_directory'); ?>_child/js/qtip-min.js"></script>  
 
   

<?php } ?>
----------------------------------------------------------------------------------------

Attached are the two javascript files that those lines of code are calling out to.  I will look into this no conflict piece of code to see if I can get that to work.  If you have any other insites based on this information please let me know

Thanks,

Bo
jquery-qtip.js
maphilight.js
Hello Dave Baldwin:  I am not surprised about the image corruption issue as I realized upon uploading a bunch of files that my transfer type was set to ascii instead of auto so all those images was not rendered as binary.  I have fixed a bunch of them but I am sure I missed a bunch as well.

For some reason my filezilla has defaulted to ascii transfer type when I open the program but I'll have to look into why that is the case.

Anyway was anything detected in regards to qtip.  The maphighlight plugin I wasn't getting to hilight as I anticipated anyway and found out it was do to the fact I needed to tweak the canvas tag or something.  Not sure fully on that one though.  What I do know is on the qtip side of things that one is working but sacrificing slider functionality.  I figure if I can get just one jquery plugin to work nicely with the slider and other wordpress jqueries than I should be able to get any to do so.  Once I know that jquery plugins are playing nice with wordpress than I can work out the kinks of various plugins to find out why it might not be behaving properly on a plugin by plugin basis but at least I know query seems to function so that tells me at least that plugin is installed in wordpress to the point it seems to generate tooltips but why it is in the process breaking other jquery is what I am trying to figure out now.
hello I also noticed that on the homepage of my site where I have a snapshot with a play button on it that it will no longer function as it once did when the custom jquery plugin was not installed.  Before I installed or instantiated the plugin when you clicked on the image it would popup a lightbox and play the movie in it.  Now when you click on it you will just be redirected to youtube where the video will play.

Again a jquery clash.  So basically these two scripts I have put in have clashed with three wordpress plugins or objects one being fslider, the other being slider pro and the other being youtubevideo plugin.

So I will check for possible conflicts in the id of the slider vs the new ones but I kind of not thinking that is the problem given that without this code their is no problem with sliders or the lightbox effect of the youtube plugin bu when the custom jquery is installed their is a problem with both sliders plus the lightbox effect suggesting to me the problem is something else otherwise I wouldn't think it should effect the functionality of both the lightbox effect and both slider functionality all of which use jquery.  So this seems to be a hit more or less on the jquery engine of wordpress opposed to a specific plugin using jquery
Here is the script for the slider that broke once the custom plugin was installed in the header.php file. This script is also in the header right after the custom plugin

------------------------------------------------------------------


<script type="text/javascript">
      jQuery(document).ready(function(){
            
            jQuery(window).load(function() {
              jQuery('.flexslider').flexslider({
                  slideshow: <?php if (of_get_option('fslider_onoff') == "no") { echo "false"; } else { echo "true"; }?>, //Boolean: Animate slider automatically
                  animation: "<?php if (of_get_option('fslider_animation_type')) { echo of_get_option('fslider_animation_type'); } else { echo "fade"; }?>", //String: Select your animation type, "fade" or "slide"
                  slideshowSpeed: <?php if (of_get_option('fslider_duration')) { echo of_get_option('fslider_duration'); } else { echo "6000"; }?>, //Integer: Set the speed of the slideshow cycling, in milliseconds
                  animationDuration: <?php if (of_get_option('fslider_animation')) { echo of_get_option('fslider_animation'); } else { echo "1000"; }?>, //Integer: Set the speed of animations, in milliseconds
                  pauseOnAction: false, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
                  controlNav: false //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage                        
              });
            });
            
      });
</script>
------------------------------------------------------------------------------
Try to be consistent on how you call jquery. So wether you use $(...) or jQuery(...). Maybe this is the cause.
ASKER CERTIFIED SOLUTION
Avatar of mcnute
mcnute
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
May be worth mentioning this on the lines of SSL,

I modified lines 96,97 in the ipn class to this:
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);

as the curl system checks for a certificate on the host server, and will fail if its not in order, these two lines above gets curl to ignore this.
Thanks so much everyone for your help.  You all deserve a piece of the puzzle but the problem was what mcnute discovered and that is that qtip.was not in the head.  I knew this was the case on the home page.  I had designed it to only showup in the head section when you were on the available properties page and that is exactly what it does.  What I neglected to realize was that by having qtip instantiated on every page it caused not only the qtip plugin to fail but caused pretty much all jquery functionality in the site to fail.  

So from believing that having the qtip.js file in the header on all pages but one would just cause the qtip to only work on the one page I learned that if you are going to call qtip and it is not their it will infact reck havoc with jquery that does exist.

Again I can't thank you guys enough
great catch.  Mcnute helped me to see why my code was breaking.  Also it helped see to how important it is to ensure that if you are going to instantiate some code you better ensure the main file is in the head section even if you don't plan on ever using it on a certain page because calling it and not using it can and most likely will cause mahem to other jquery on your page that otherwise would work properly