1. Уважаемые пользователи, прежде чем ответить в теме или создать новую,
    внимательно ознакомьтесь с правилами раздела

    Кому лень работать или руки не оттуда - пользуйтесь услугами специалистов
  2. Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.."

    Есть JED!!! Ищите там!!!

конфликт JavaScript

Тема в разделе "Joomla", создана пользователем ufaclub, 9 июл 2009.

Информация :
  • Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с правилами раздела
  • Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.." Есть JED!!! Ищите там!!!
  • Аналоги ищите там же - на JED!!!
  • Новая версия? - У кого будет - тот выложит!
Статус темы:
Закрыта.
Модераторы: arman29, DMS, NightHunter
  1. ufaclub

    ufaclub

    Регистр.:
    1 май 2007
    Сообщения:
    395
    Симпатии:
    17
    при внедрении JavaScript jQuery
    почему то блокируются Lightbox и Mootools.
    пример внедрения кода в модуль
    PHP:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    body {
        padding: 50px 0 0 50px;
    }
    div.sc_menu {
        position: relative;
        height: 145px;
        width: 500px;
        overflow: auto;
    }
    ul.sc_menu {
        display: block;
        height: 110px;
        width: 1500px;    
        padding: 15px 0 0 15px; 
        margin: 0;
        background: url('navigation.png');        
        list-style: none;
    }
    .sc_menu li {
        display: block;
        float: left;    
        padding: 0 4px;
    }
    .sc_menu a {
        display: block;
        text-decoration: none;
    }
    .sc_menu span {
        display: none;
        margin-top: 3px;
        text-align: center;
        font-size: 12px;    
        color: #fff;
    }
    .sc_menu a:hover span {
        display: block;
    }
    .sc_menu img {
        border: 3px #fff solid;    
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
    }
    .sc_menu a:hover img {
        filter:alpha(opacity=50);    
        opacity: 0.5;
    }
    #back {
        display: block;
        width: 500px;
        text-align: center;
        color: #003469;
        font-size: 16px;
    }
    </style>
    <script type= "text/javascript">
    $(function(){
        //Get our elements for faster access and set overlay width
        var div = $('div.sc_menu'),
            ul = $('ul.sc_menu'),
            ulPadding = 15;
        //Get menu width
        var divWidth = div.width();
        //Remove scrollbars    
        div.css({overflow: 'hidden'});
        //Find last image container
        var lastLi = ul.find('li:last-child');
        //When user move mouse over menu
        div.mousemove(function(e){
            //As images are loaded ul width increases,
            //so we recalculate it each time
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;    
            var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
            div.scrollLeft(left);
        });
    });
    </script>
    </head>
    <body>
    <div class="sc_menu">
        <ul class="sc_menu">
            <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li>
            <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li>
            <li><a href="#"><img src="img/3.jpg" alt="Javascript"/><span>jQuery</span></a></li>
            <li><a href="#"><img src="img/4.jpg" alt="CSS"/><span>Scroll</span></a></li>
            <li><a href="#"><img src="img/5.jpg" alt="Horizontal"/><span>Horizontal</span></a></li>
            <li><a href="#"><img src="img/6.jpg" alt="jQuery"/><span>jQuery</span></a></li>
            <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li>
            <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li>
            <li><a href="#"><img src="img/3.jpg" alt="Graceful"/><span>Graceful</span></a></li>
            <li><a href="#"><img src="img/4.jpg" alt="Degradation"/><span>Degradation</span></a></li>
            <li><a href="#"><img src="img/5.jpg" alt="Progressive"/><span>Progressive</span></a></li>
            <li><a href="#"><img src="img/6.jpg" alt="Enhancement"/><span>Enhancement</span></a></li>    
        </ul>
    </div>
    </body>
    модуль работает а вот остальные элементы сайта использующии библиотеки Lightbox и Mootools - НЕТ.
    Можно ли как нить изолировать этот модуль? :) чтоб не влиял на весь сайт
     
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    если на сайте используются другие библиотеки тогда jquery можно запустить без конфликтов с другими js библиотеками
    HTML:
    
     <html>
     <head>
       <script src="prototype.js"></script>
       <script src="jquery.js"></script>
       <script>
         jQuery.noConflict();
         
         // используем jquery через jQuery(...)
         jQuery(document).ready(function(){
           jQuery("div").hide();
         });
    //или с $, чтоб код не менять
    jQuery(document).ready(function($){
    $("div").hide();
    });
    
    
         
         // другие библиотеки с $(...), и т. д..
         $('someid').hide();
       </script>
     </head>
     <body></body>
     </html>
    
    подробнее

    http://docs.jquery.com/Using_jQuery_with_Other_Libraries
     
  3. ufaclub

    ufaclub

    Регистр.:
    1 май 2007
    Сообщения:
    395
    Симпатии:
    17
    <script language="javascript" type="text/javascript" src="http://www.00000000.ru/templates/ja_opal/js/ja.script.js"></script>


    <script src="www.00000000.ru/templates/ja_opal/ja_menus/ja_moomenu/ja.moomenu.js" language="javascript" type="text/javascript" ></script>



    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>



    как совместить эти две библиотеки через данный скрипт ?
     
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    да тут целый симбиоз библиотек
    ja_script.js - prototype
    ja.moomenu.js - mootools
    jquery.min.js - jquery

    так надо чтоб заработал jquery скрипт? этот:
    Код:
    <script type= "text/javascript">
    $(function(){
        //Get our elements for faster access and set overlay width
        var div = $('div.sc_menu'),
            ul = $('ul.sc_menu'),
            ulPadding = 15;
        //Get menu width
        var divWidth = div.width();
        //Remove scrollbars    
        div.css({overflow: 'hidden'});
        //Find last image container
        var lastLi = ul.find('li:last-child');
        //When user move mouse over menu
        div.mousemove(function(e){
            //As images are loaded ul width increases,
            //so we recalculate it each time
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;    
            var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
            div.scrollLeft(left);
        });
    });
    </script> 
    
    тогда попробуй заменить этот кусок кода на:
    Код:
    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($){
    
        $(function(){
            //Get our elements for faster access and set overlay width
            var div = $('div.sc_menu'),
                ul = $('ul.sc_menu'),
                ulPadding = 15;
            
            //Get menu width
            var divWidth = div.width();
        
            //Remove scrollbars    
            div.css({overflow: 'hidden'});
            
            //Find last image container
            var lastLi = ul.find('li:last-child');
            
            //When user move mouse over menu
            div.mousemove(function(e){
                //As images are loaded ul width increases,
                //so we recalculate it each time
                var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;    
                var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
                div.scrollLeft(left);
            });
        });
    
    });
    </script>
    
     
    ufaclub нравится это.
  5. ufaclub

    ufaclub

    Регистр.:
    1 май 2007
    Сообщения:
    395
    Симпатии:
    17
  6. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    попробуй ещё раз заменить, там ошибки были исправил
     
    ufaclub нравится это.
  7. ufaclub

    ufaclub

    Регистр.:
    1 май 2007
    Сообщения:
    395
    Симпатии:
    17
    ааааа


    спасиб чувак ) все заработало:yahoo:
     
  8. ufaclub

    ufaclub

    Регистр.:
    1 май 2007
    Сообщения:
    395
    Симпатии:
    17
    + движения

    а как сделать так чтоб двигаться они начали сами (прокрутка)
    например с лева на право :)
     
  9. Firstlinehero

    Firstlinehero Постоялец

    Регистр.:
    14 дек 2009
    Сообщения:
    101
    Симпатии:
    25
    Помогите пожалуйста и мне тоже! Третий день бьюсь но не могу внятного ничего найти в сети по этом поводу.
    Шаблон юзает библиотеку
    mootools-1.2.1-core-nc.js

    в virtuemart ( если эта библиотека включена в шаблоне ) не работает лайтбокс
    при этом если отключу ее в шаблоне, он перестанет адекватно отображаться...
    я так понимаю что лайтбокс это jQUERY и тоже конфликтуют они.. как же решить эту проблему?
     
  10. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    может там не lightbox а slimbox - клон lightbox только для mootools, наверное там скрипты не загружаются, по ссылке видел проблему решили добавлением скриптов в шаблон напрямую

    http://forum.virtuemart.net/index.php?topic=48685.15
     
Статус темы:
Закрыта.