ROZWIĄZANY: jQuery na forum

**Amfidiusz** · 21 Grudnia 2010

Hej,

Próbuję umieścić zewnętrzny skrypt jquery w headerze forum, jednak gryzie się on z prototype. Kod, który powinienem wstawić na stronę wygląda następująco:

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  type="text/javascript"></script>
<script src="http://forum.pl/public/js/3rd_party/clickable/clickable.js" type="text/javascript"></script>

Doczytałem, że powinienem użyć funkcji noConflict:

<style type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function($){

// jQuery code goes here

});
</script>

Jednak nie za bardzo wiem, jak powinienem jej użyć w tym przypadku. Pomożecie?

**wareczek** · 22 Grudnia 2010

Przykładowo:

var j = jQuery.noConflict();

j(document).ready(function()
{
j("ul.topnav li a").hover(function()
{
	j(this).parent().find("ul.subnav").slideDown(200).show();

	j(this).parent().hover(function(){}, function()
	{
		j(this).parent().find("ul.subnav").slideUp(200);
	});
});
});

BTW najnowsza wersja biblioteki jQuery to 1.4.4, czyli:

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

**Amfidiusz** · 22 Grudnia 2010

OK, ładnie, ale w ten kod co podałeś mogę wstawić jedynie prostą funkcję. Jest jakiś sposób, żeby wstawić do niego kilkaset linii z zewnętrznego pliku, w moim przypadku clickable.js?

**wareczek** · 22 Grudnia 2010

Nie. Musisz wszystkie dolary przerobić na (w tym przypadku) znaki "j".

**Amfidiusz** · 22 Grudnia 2010

Nadal mi coś nie śmiga... Mam obecnie trzy funkcje, które wkleiłem wg poniższego przykładu:

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

<script type="text/javascript">

jQuery.fn.textNodes = function() {

 //kod funkcji

}

jQuery.fn.hfautolink = function() {

 //kod funkcji

}

var j = jQuery.noConflict();

j(document).ready(function()
{
  j(function() {
      j("div").hfautolink();
  });
});

  </script>

Konfliktu nie ma, ale też skrypt nie jest wykonywany. Nadal coś robię źle?

**wareczek** · 22 Grudnia 2010

a tak:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();

j.fn.textNodes = function(){
//kod funkcji
}

j.fn.hfautolink = function(){
//kod funkcji
}

j(document).ready(function(){
j(function() {
	j("div").hfautolink();
});
});
</script>

?

**Amfidiusz** · 22 Grudnia 2010

Nadal to samo, czyli żadnej zmiany w stosunku do oryginalnego bita.

Jedna z tych funkcji ma takie odwołanie:

newNode.innerHTML=text.replace(re_link4, '<a href="$1" target="_blank">$1</a>');

Te dolary też należałoby zmienić?

**wareczek** · 22 Grudnia 2010

Nie, bo to masz wpisanie zmiennych.

A gdzie ten skrypt działa? Gdzie mogę się przyjrzeć kodowi?

**Amfidiusz** · 22 Grudnia 2010

Kod poszedł na PW

24 Stycznia 2011

A jak mozna zamienic taki kod:

//Inline HTML Tooltip script: By JavaScript Kit: http://www.javascriptkit.com
//Created: July 10th, 08'

var j = jQuery.noConflict();
var htmltooltip={
tipclass: 'htmltooltip',
fadeeffect: [true, 500],
anchors: [],
tooltips: [], //array to contain references to all tooltip DIVs on the page

positiontip:function($, tipindex, e){
	var anchor=this.anchors[tipindex]
	var tooltip=this.tooltips[tipindex]
	var scrollLeft=window.pageXOffset? window.pageXOffset : this.iebody.scrollLeft
	var scrollTop=window.pageYOffset? window.pageYOffset : this.iebody.scrollTop
	var docwidth=(window.innerWidth)? window.innerWidth-15 : htmltooltip.iebody.clientWidth-15
	var docheight=(window.innerHeight)? window.innerHeight-18 : htmltooltip.iebody.clientHeight-15
	var tipx=anchor.dimensions.offsetx
	var tipy=anchor.dimensions.offsety+anchor.dimensions.h
	tipx=(tipx+tooltip.dimensions.w-scrollLeft>docwidth)? tipx-tooltip.dimensions.w : tipx //account for right edge
	tipy=(tipy+tooltip.dimensions.h-scrollTop>docheight)? tipy-tooltip.dimensions.h-anchor.dimensions.h : tipy //account for bottom edge
	$(tooltip).css({left: tipx, top: tipy})
},

showtip:function($, tipindex, e){
	var tooltip=this.tooltips[tipindex]
	if (this.fadeeffect[0])
		$(tooltip).hide().fadeIn(this.fadeeffect[1])
	else
		$(tooltip).show()
},

hidetip:function($, tipindex, e){
	var tooltip=this.tooltips[tipindex]
	if (this.fadeeffect[0])
		$(tooltip).fadeOut(this.fadeeffect[1])
	else
		$(tooltip).hide()	
},

updateanchordimensions:function($){
	var $anchors=$('*[@rel="'+htmltooltip.tipclass+'"]')
	$anchors.each(function(index){
		this.dimensions={w:this.offsetWidth, h:this.offsetHeight, offsetx:$(this).offset().left, offsety:$(this).offset().top}
	})
},

render:function(){
	jQuery(document).ready(function($){
		htmltooltip.iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
		var $anchors=$('*[@rel="'+htmltooltip.tipclass+'"]')
		var $tooltips=$('div[@class="'+htmltooltip.tipclass+'"]')
		$anchors.each(function(index){ //find all links with "title=htmltooltip" declaration
			this.dimensions={w:this.offsetWidth, h:this.offsetHeight, offsetx:$(this).offset().left, offsety:$(this).offset().top} //store anchor dimensions
			this.tippos=index+' pos' //store index of corresponding tooltip
			var tooltip=$tooltips.eq(index).get(0) //ref corresponding tooltip
			if (tooltip==null) //if no corresponding tooltip found
				return //exist
			tooltip.dimensions={w:tooltip.offsetWidth, h:tooltip.offsetHeight}
			$(tooltip).remove().appendTo('body') //add tooltip to end of BODY for easier positioning
			htmltooltip.tooltips.push(tooltip) //store reference to each tooltip
			htmltooltip.anchors.push(this) //store reference to each anchor
			var $anchor=$(this)
			$anchor.hover(
				function(e){ //onMouseover element
					htmltooltip.positiontip($, parseInt(this.tippos), e)
					htmltooltip.showtip($, parseInt(this.tippos), e)
				},
				function(e){ //onMouseout element
					htmltooltip.hidetip($, parseInt(this.tippos), e)
				}
			)
			$(window).bind("resize", function(){htmltooltip.updateanchordimensions($)})
		})
	})
}
}

htmltooltip.render()

Edytowane 24 Stycznia 2011 przez berto1289779920

24 Stycznia 2011

Dodalem to w ten sposob:

jQuery(document).ready(function($){

=>

j(document).ready(function($){

nie wiem czy tak powinna byc, ale konflikt ciagle istnieje.

24 Stycznia 2011

Problem solved. Thanks wareczek.

**groverr** · 17 Marca 2011

Posiadam owy kod

<script type="text/javascript" src="images/dock/js/jquery.js"></script>
<script type="text/javascript" src="images/dock/js/interface.js"></script>

<link href="images/dock/style.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>

czy może mi ktoś podać gdzie wstawić jQuery.noConflict();

Ja nie daje rady..

**wareczek** · 17 Marca 2011

W podanym przez Ciebie kodzie nie ma konfliktu. Pewno jest w pliku interface.js

**groverr** · 22 Marca 2011

Czy może mi ktoś powiedzieć jak wstawić jQuery.noConflict w tym kodzie ?

<link type="text/css" href="./css/style.css" rel="stylesheet" />
<script src="./js/libs/jquery-1.5.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>
<script src="./js/jquery.roundabout.min.js"></script>
<script src="./js/script.js"></script>
<body class="home-page">
   <div id="container">
       <header>
<div class="roundabout-row">

Edytowane 22 Marca 2011 przez groverr

**wareczek** · 22 Marca 2011

W tym kodzie też nie ma konfliktu

Korzystalibyście z Prototype, a nie jQuery na siłę...

**groverr** · 22 Marca 2011

Hmm jak nie ma jak ma , a Prototype hmm jakoś nie mogę znaleźć ..

**wareczek** · 11 Kwietnia 2011

Amfidiusz, znalazłem rozwiązanie

jQuery.noConflict();
jQuery(document).ready(function($)
{
   // jakiś kod z dolarami
});

Zmienna dolara w funkcji przejmuje działanie dolara z jQuery, czyli brak zmian w kodzie.

edit: lol! teraz widzę, że to samo masz w 1 poście a ja tego dziś długo szukałem...

Edytowane 11 Kwietnia 2011 przez Wareczek

**Amfidiusz** · 11 Kwietnia 2011

Hah, mi się udało już wprowadzić to, co chciałem. Z tymże ja ładuję z pliku, a nie z bitów stylu. Jeśli będziesz chciał rzucić okiem na ten kod, to odezwij się na PW

DawPi · 12 Kwietnia 2011

Problem ROZWIĄZANY. Jeśli są jakiekolwiek wątpliwości, pytania proszę o założenie nowego tematu.

Wszelkie uzasadnione reklamacje/pretensje/sugestie/rady przyjmuje ekipa forum.

Zaloguj się

ROZWIĄZANY: jQuery na forum

Rekomendowane odpowiedzi

Amfidiusz

wareczek

Amfidiusz

wareczek

Amfidiusz

wareczek

Amfidiusz

wareczek

Amfidiusz

Gość berto

Gość berto

Gość berto

groverr

wareczek

groverr

wareczek

groverr

wareczek

Amfidiusz

DawPi

Ostatnio przeglądający 0 użytkowników

Pliki

Cała aktywność

Przeglądaj

Powiadomienie o plikach cookie