MyBB Community Forums

Full Version: jquery slider conflict
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
http://otibii.pl/index.php


I add this : http://tympanus.net/codrops/2012/03/15/p...nd-jquery/

If I add this code, i don't writing items in new thread/reply

<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider({
autoplay: true,
bgincrement: 450,
interval: 3000
});
});
</script>






If I add tis code in headerinclude i have writing items but i jquery slider doesn't work.

<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
jQuery.noConflict(function() {
jQuery.noConflict('#da-slider').cslider({
autoplay: true,
bgincrement: 450,
interval: 3000
});
});
</script>


Code facebook slider in headerinclude

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
   jQuery.noConflict(function (){ 
        //slider widget 
       jQuery.noConflict(".slider").toggle(function(){ 
           jQuery(".slider").stop(true, false).animate({right:"0"},"medium"); 
        },function(){ 
            jQuery.noConflict(".slider").stop(true, false).animate({right:"-190"},"medium"); 
        },500); 
    }); 
</script>




My Headerinclude

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<link href='http://fonts.googleapis.com/css?family=Metamorphous' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>



<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/topbar.js"></script> 

{$stylesheets}
{$retrn['master_snippet']}


{$indeks_zmian_skrypty}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $.noConflict();
</script>
<script type="text/javascript">
$(function(){

    $("#facebook_slider").css("left","-252px");

$("#facebook_slider").hover(function(){

        $("#facebook_slider").animate({left: "0px"}, 500 );
        $(this).addClass("fb_slider_close"); 
        return false;
    },
    function(){    
        $("#facebook_slider").animate({left: "-252px"}, 500 );
        $(this).removeClass("fb_slider_close"); 
        return false;
    });

});
    </script>



<script type="text/javascript">
<!--
	var cookieDomain = "{$mybb->settings['cookiedomain']}";
	var cookiePath = "{$mybb->settings['cookiepath']}";
	var cookiePrefix = "{$mybb->settings['cookieprefix']}";
	var deleteevent_confirm = "{$lang->deleteevent_confirm}";
	var removeattach_confirm = "{$lang->removeattach_confirm}";
	var loading_text = '{$lang->ajax_loading}';
	var saving_changes = '{$lang->saving_changes}';
	var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
	var my_post_key = "{$mybb->post_code}";
	var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
/**
 * Modal Boxes JS
 *
 * @author Euan T. <[email protected]>
 * @version 1.0.0
 */

jQuery.noConflict();

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    $('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    $('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width': maskWidth, 'height': maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow", 0.8);  
        
        // Position the actual modal
        var winH = $(window).height();
        var winW = $(window).width();
        $(target).css('top',  (winH / 2) - ($(target).height() / 2));
        $(target).css('left', (winW / 2) - ($(target).width() / 2));
        $(target).fadeIn(2000); 
    });
    
    $('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        $('#mask, .modalBox').hide();
    }); 
    
    $('#mask').on('click', function ()
    {
        $(this).hide();
        $('.modalBox').hide();
    }); 
    // /Modal Boxes //
});
</script>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar.js"></script>

















<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
jQuery.noConflict(function() {
jQuery.noConflict('#da-slider').cslider({
autoplay: true,
bgincrement: 450,
interval: 3000
});
});
</script>
Same problem, again JQuery Conflict.
What is it? noConflict in every declaration?
<script type="text/javascript">
jQuery.noConflict(function (){
//slider widget
jQuery.noConflict(".slider").toggle(function(){
jQuery(".slider").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery.noConflict(".slider").stop(true, false ..................

Try this way:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){ ...................
// no more noConflict required.