jQuery Conflict

<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
 
$j(document).ready(function() {
    $j( "div" ).hide(); //for example
});
 
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
    var mainDiv = $( "main" );
}
</script>

in your pins code you now would use $j instead of $

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

https://api.jquery.com/jquery.noconflict/

Hi,
Thanks for that. I have read and tried what you sent but I don't quite understand it and couldn't get it to work, jQuery is not my strong point. Is there a way of getting the plugins working with these pins?

Many Thanks,
Andrew

What have u tried that didn't work?

I put the script above in my header file and when I refreshed, it loaded then went blank screen?

Do you mean the above script that I posted?
That is just an example of how you'd go about it - not actual code for you to use.

There is nothing at the website link that you posted above so I am just saying for example - not actual ...

<script src="your other libraries"></script>
AFTER your other libraries are called place your jQuery file
<script src="jquery.js"></script>I realize your jquery file isn't named jquery.js - put the actual filename and path
Then here is the no conflict bit
<script>
var $j = jQuery.noConflict();
</script>

Then here is more for example code
Here is an example of what you can now do with it
Note that you are now calling jquery with a $j instead of just $
That's what you were setting up with var $j = jQuery.noConflict();
<script>
$(function() {
    $j( "#pindiv" ).hide(); //for example only - this will hide an element with an id of pindiv
});
</script>

Important - I don't know what you are actually doing so I am just posting for example code
Once again - post some code showing what you are doing

Link seems broken.
If you are adding another jQuery library to make your pins work then you need to fix that. If the pins don't work on the new library then fix the pins code.

Did you write the pins code yourself or did you include a plugin?

Can you post the code here so we can see what is causing it not to work on the later versions of the jQuery library

Apologises, yes that link is incorrect, can you please try www.forsservices.co.uk.gridhosted.co.uk

The pins code I wrote myself in the header.php file

Thanks
Andrew

Can you post that code.

Hi Julian,


This is all the script that controls the pins.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($){

      
      //Add bounce effect on Click of the DIV
      jQuery('#search-submit').mouseenter(function ($) {
              jQuery(this).effect("bounce", { distance: 10, times:2 }, 1000);
      });
      //Add bounce effect on Click of the DIV
      jQuery('.play-pin-icon').mouseenter(function ($) {
              jQuery(this).effect("bounce", { distance: 10, times:2 }, 1000);
      });
      //Add bounce effect on Click of the DIV
      jQuery('.news-pin-icon').mouseenter(function ($) {
              jQuery(this).effect("bounce", { distance: 10, times:2 }, 1000);
      });
      //Add bounce effect on Click of the DIV
      jQuery('.nav-pin-icon').mouseenter(function ($) {
              jQuery(this).effect("bounce", { distance: 10, times:2 }, 1000);
      });

});
</script>

<script type="text/javascript">
jQuery(document).ready(function($) {    
    $('#search-submit').hover(function(){    
        $('#masthead input.s').addClass('search-peakaboo stay');    
    },    
    function(){    
        $('#masthead input.s').removeClass('search-peakaboo');    
    });
});  
</script>

<script type="text/javascript">
jQuery(document).ready(function($) {    
    $('#news-pin').hover(function(){    
        $('.news-contents').addClass('news-peakaboo stay');    
    },    
    function(){    
        $('.news-contents').removeClass('news-peakaboo');    
    });
});  
</script>

<script type="text/javascript">
jQuery(document).ready(function($) {    
    $('.nav-pin-icon').toggle(function(){    
        $('#site-navigation').addClass('nav-peakaboo stay');    
    },    
    function(){    
        $('#site-navigation').removeClass('nav-peakaboo');    
    });
});  
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {    
    $('.play-pin-icon').hover(function(){    
        $('.play-pin-button').addClass('play-peakaboo stay');    
    },    
    function(){    
        $('.play-pin-button').removeClass('play-peakaboo');    
    });
});  
</script>


Thanks,

Andrew

Ok that's a start
Question: why so many document ready blocks?
Why not consolidate all in one?

Lack of experience I guess :) I only really dabble in jQuery so still learning. Would be great to get a solution for this as we are going live on Monday

Many Thanks,
Andrew

Ok I am going to do a mockup of this and see if I can isolate the problem - will endeavor to post back before Monday.

I have had a look and to tell the truth your main problem here is WP Plugin hell. To track anything on that page is going to be a lot of work.

I tried the pins code with several versions of jQuery - they seemed to work fine - I could not get the map to work with code copied from the site. I tried going through the markup to track down the problem but it is really far too much work for this type of question - You might consider setting up a Gig for this.

The problem with WP is that from the admin side adding plugins might seem seamless and easy but when you look at the code generated under the hood - that's when things start getting scary.

There is nothing obvious in the PIN's code that should either break across versions or disrupt the WPGMAPS plugin - the latter is throwing this error though

TypeError: MYMAP.map is null
...lat,wpgmaps_localize[0].map_start_lng);MYMAP.map.setCenter(a)}),MYMAP.placeMarke...

Select allOpen in new window

So I would start there

There is another error on the contact page in http://www.forsservices.co.uk.gridhosted.co.uk/wp-content/plugins/xl-testimonial-carousel/assets/js/xl-plugins.js

TypeError: d[c[(c.length - 1)]] is undefined

Select allOpen in new window

As the .js file is a minified tracking the above is going to take time.

Hi Julian,

I know there is alot of plugins there but even if I deactivate all apart from the google maps plugin, it still clashes with my script in the header. Am I using the wrong library?

Many Thanks,

Andrew

Can you be more explicit about what you mean be clashes - how is this manifesting?

Can you build a small test case that demonstrates the problem?

For example, I updated to a more up to date library by changing the version here

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($){


The google maps plugin worked but the pins stopped working, I can seem to get one or the other working.

Thanks,

Andrew

I have updated to a more recent library so you can see the map works fine here

http://www.forsservices.co.uk.gridhosted.co.uk/contact-us/

But the pins now dont behave as they should. Does my script look incorrect that operates the pins?

<script type="text/javascript">
jQuery(function($){

      
      //Add bounce effect on Click of the DIV
      jQuery('#search-submit').mouseenter(function ($) {
              jQuery(this).effect("bounce", { distance: 10, times:2 }, 1000);
      });
      //Add bounce effect on Click of the DIV
      jQuery('.play-pin-icon').mouseenter(function ($) {
              jQuery(this).effect("bounce", { distance: 10, times:2 }, 1000);
      });
      //Add bounce effect on Click of the DIV
      jQuery('.news-pin-icon').mouseenter(function ($) {
              jQuery(this).effect("bounce", { distance: 10, times:2 }, 1000);
      });
      //Add bounce effect on Click of the DIV
      jQuery('.nav-pin-icon').mouseenter(function ($) {
              jQuery(this).effect("bounce", { distance: 10, times:2 }, 1000);
      });

});
</script>

<script type="text/javascript">
jQuery(document).ready(function($) {    
    $('#search-submit').hover(function(){    
        $('#masthead input.s').addClass('search-peakaboo stay');    
    },    
    function(){    
        $('#masthead input.s').removeClass('search-peakaboo');    
    });
});  
</script>

<script type="text/javascript">
jQuery(document).ready(function($) {    
    $('#news-pin').hover(function(){    
        $('.news-contents').addClass('news-peakaboo stay');    
    },    
    function(){    
        $('.news-contents').removeClass('news-peakaboo');    
    });
});  
</script>

<script type="text/javascript">
jQuery(document).ready(function($) {    
    $('.nav-pin-icon').toggle(function(){    
        $('#site-navigation').addClass('nav-peakaboo stay');    
    },    
    function(){    
        $('#site-navigation').removeClass('nav-peakaboo');    
    });
});  
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {    
    $('.play-pin-icon').hover(function(){    
        $('.play-pin-button').addClass('play-peakaboo stay');    
    },    
    function(){    
        $('.play-pin-button').removeClass('play-peakaboo');    
    });
});  
</script>

Have you considered using CSS animations for the bounce effect.

Consider this sample
CSS

<style type="text/css">
.imgbounce:hover {
  animation: 1s ease-out 0s normal none 1 running bounce;
}
@keyframes bounce {
  0% {
    transform: translateY(5px);
  }
  9.090909% {
    transform: translateY(0);
  }
  18.181818% {
    transform: translateY(-5px);
  }
  27.272727% {
    transform: translateY(0);
  }
  36.363636% {
    transform: translateY(-5px);
  }
  45.454545% {
    transform: translateY(0);
  }
  54.545454% {
    transform: translateY(5px);
  }
  63.636363% {
    transform: translateY(0);
  }
  72.727272% {
    transform: translateY(5px);
  }
  81.818181% {
    transform: translateY(-5px);
  }
  90.909090% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

Select allOpen in new window

HTML

<img class="imgbounce" src="images/foreground1.png" />

Select allOpen in new window

BTW pins seem to be behaving themselves on the link you sent through.

Thanks for that. I made a few changes to which library I was adding in. I have managed to get the pins to bounce apart from the navigation pin disappears after you load the page which is strange, also the xl testimonials seems to get effected. But im little closer, just these few bits.

Which pin is disappearing - all looks good to me?

Its the one to the right of the menu bar. If you refresh the page you can see it disappear and shrink as if the command is incorrect

Thanks for that. I just want to clear up the testimonials issue then Im there I think.

I just want to clear up the testimonials issue then Im there I think

Do you need assistance - if so can you give details?

Its ok, I think I've sorted it. Thank you for all your help :) been great!

You are welcome