0
Welcome Guest! Login
0 items Join Now

SOLVED Jquery conflict in joomla

Last Post
Search Topic

  • SOLVED Jquery conflict in joomla

    Posted 11 years 11 months ago
    • Hi there,

      Does anybody know how to implement externel jquery into joomla?
      I am trying to add a scroller into an article just by entering the code I found here:http://www.htmldrive.net/items/show/244/Amazon-style-image-and-title-scroller-with-jQuery
      Then trying to implement this script codecanyon.net/item/jquery-speedo-popup/3630933as a popup on pageload gave me the same problem with other extensions like widgetkit or revolution slider. The developers could not help me out.

      But this line just breaks up other slideshow components...
      <head>
      <script type="text/javascript" src=" ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>
      </head>

      Any idea how to implement those things into an module, or article?

      I searched know for some days it seem to be a problem with this selector $ perhaps.
      And I could not schieve to run the code in no conflict mode with this code.
      <script type="text/javascript">var $j = jQuery.noConflict();</script>
      or this one
      jQuery.noConflict();
      (function($) {
      //jquery code goes here.
      })(jQuery);

      Thank you in advance
    • http://www.desert-greening.com
      http://www.dellys-life.com/
      http://www.emcs-cqb.com
      http://mesotherapie-berlin.de/
    #966759

  • Re: SOLVED Jquery conflict in joomla

    Posted 11 years 11 months ago
    • Thanks for replying and the help (Wenn du willst das etwas getan wird, tue es selbst.)

      Problem resolved.

      Here is the solution for anybody suffering from the same problem.

      Directly to insert in any article:
      The problem is that the jQuery is in conflict mode, this means that the $ is not available and you should use jQuery instead.

      Try to change the following:
      <script type="text/javascript">
    $(document).ready(function()
    {
        $(this).speedoPopup(
        {
            width: 853,
            height: 480,
            theme: 'blueglass',
            effectIn: "fade",
            effectOut:  "fade",
            css3Effects: "random",
            href: 'http://www.youtube.com/watch?v=53rtfdLTtTw',
            useFrame: true,
            unload: true
        });
    });
</script>
 
      In the following:
       
<script type="text/javascript">
    jQuery(function ()
    {
        jQuery(this).speedoPopup(
        {
            width: 853,
            height: 480,
            theme: 'blueglass',
            effectIn: "fade",
            effectOut:  "fade",
            css3Effects: "random",
            href: 'http://www.youtube.com/watch?v=53rtfdLTtTw',
            useFrame: true,
            unload: true
        });
    });
    
    </script>


      Than the Stylesheets are added to the head of your page. To do that in Joomla you need to go and edit 'templates\themename\index.php', note the themename should be the folder with the name of your theme.

      In this file you should find the head tag it should look something like:
      <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
    ....
</head>

      Here you need to add the following in the head tag:
       
<script type="text/javascript" src="/speedopopup/speedo.popup.min.js"></script>
 
<!-- Load CSS3 Effects -->
<link rel="stylesheet" type="text/css" href="/speedopopup/skins/default/default.css" />
<link rel="stylesheet" type="text/css" href="/speedopopup/skins/blueglass/blueglass.css" />
<link rel="stylesheet" type="text/css" href="/speedopopup/skins/darkglass/darkglass.css" />
 

      Note that the default skin should always be included, we don't add the jquery because it is already loaded. It is very important to put this code right before the closing </head> tag.

      Thats it.
      It was about implementing an beautifull autopoup on pageload without conflict from here
      http://codecanyon.net/item/jquery-speedo-popup/3630933?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=ArtflowTeam

      The problem was multiple Jquery loads.
      You schuold be able to add any script to your joomla site. As a lot of extensions lack in usability and features, search here
      http://tympanus.net/codrops/
      http://www.htmldrive.net/
      http://codecanyon.net/
      for good mostly free scripts and implement them into joomla, beeing able to modify as much and as deep as you want. 100%flexibility, real open Source.

      Thank you
    • http://www.desert-greening.com
      http://www.dellys-life.com/
      http://www.emcs-cqb.com
      http://mesotherapie-berlin.de/
    #968579
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 217

    Re: SOLVED Jquery conflict in joomla

    Posted 11 years 11 months ago
    • I just wanted to thank you for such a detailed answer :)
    • Please reply with a direct link to the issue & create a new thread for each new issue.

      A template is only as good as the content that goes into it ;) - DanG
    #968797
    • Azalee's Avatar
    • Azalee
    • Newbie
    • Posts: 7
    • Thanks: 0

    Re: SOLVED Jquery conflict in joomla

    Posted 11 years 10 months ago
    • You are awesome! Thank you sooooo much!
    #974402

Time to create page: 0.047 seconds