xoops forums

nachenko

Quite a regular
Posted on: 2007/10/15 14:11
nachenko
nachenko (Show more)
Quite a regular
Posts: 356
Since: 2005/1/18
#1

JQuery, XOOPS and Internet Explorer 6

OK, IE is a dick, but it's the dick most people use.

I'm using JQuery to make some tabs in a bunch of blocks. A more eye-candy interface and all this. OK, everything is going fine... except on IE 6.

I've used JQuery before in non-XOOPS sites and it works fine, but I build my XOOPS sites using the more complex default theme. I think the problem is that IE is selecting nothing when I write something like:

$('div#example ul').tabs();


I don't even know how to learn what's worng. I've spent this morning looking for known issues regarding IE 6 and Jquery, but did not find anything useful.

This is the site:

http://www.anince.es

Help needed. Thank you.

aph3x

Theme Designer
Posted on: 2007/10/15 14:24
aph3x
aph3x (Show more)
Theme Designer
Posts: 834
Since: 2004/12/26
#2

Re: JQuery, XOOPS and Internet Explorer 6

jquery is my favorite script of its class simply because it has minimum of code and does more then those using prototype or whatever else.

So far i successfully used it in xmspotlight module and regular XOOPS blocks an example can be seen at http://test.pierdtimp.ro/xblock/
..which later was placed by david in a dummy module and works with no problems in XOOPS

What particular jquery plugin you try to insert in xoops?
Everything I'm not made me everything I am
The Themes

nachenko

Quite a regular
Posted on: 2007/10/15 14:44
nachenko
nachenko (Show more)
Quite a regular
Posts: 356
Since: 2005/1/18
#3

Re: JQuery, XOOPS and Internet Explorer 6

I'm using Tabs.

It works flawlesly on Firefox, but it fails on IE and Opera (!). This last is more surprising.

Opera error console reads:

Quote:
Inline script thread
Error:
name: TypeError
message: Statement on line 11: Type mismatch (usually a non-object value used where an object is required)
Backtrace:
Line 11 of inline#2 script in http://anince.es/
$(document).ready((function ()
{
$("div.round-container").corner("round 15px");
$("div#bottomCcolumn.tabs > ul").tabs({fxFade : true, fxShowSpeed : "fast"});
$("div#bottomCcolumn > ul").css({backgroundColor : "#990000", color : "#005500"});
}
));


BTW, I'm also using the round plugin, and as usual, it works on FireFox, but not on IE.

nachenko

Quite a regular
Posted on: 2007/10/15 14:48
nachenko
nachenko (Show more)
Quite a regular
Posts: 356
Since: 2005/1/18
#4

Re: JQuery, XOOPS and Internet Explorer 6

I can't believe it.

This line also makes it fail on IE and Opera:

$(document).ready();

This is the simplest function, the initialization of all stuff. I just updated JQuery two hours ago and haven't modified it.

How is it possible?

nachenko

Quite a regular
Posted on: 2007/10/15 16:33
nachenko
nachenko (Show more)
Quite a regular
Posts: 356
Since: 2005/1/18
#5

Re: JQuery, XOOPS and Internet Explorer 6

FOrget it, I found a solution. When calling jQuery, don't use $, but simply "jQuery" like this:

jQuery(document).ready();

The problem is that XOOPS own javascript defines a function named $, just like jQuery. One overwrites the other.

kris_fr

Theme Designer
Posted on: 2007/10/15 17:23
kris_fr
kris_fr (Show more)
Theme Designer
Posts: 1009
Since: 2005/12/31
#6

Re: JQuery, XOOPS and Internet Explorer 6

hi,

example in "head" :
<{$xoops_module_header}>

<!-- 
Css du thème -->
<
link rel="stylesheet" type="text/css" media="screen" href="<{xoAppUrl xoops.css}>" />
<
link rel="stylesheet" type="text/css" media="screen,projection,print" href="<{xoImgUrl css/layout-soup.css}>" />
<
link rel="stylesheet" type="text/css" media="screen" title="Color" href="<{xoImgUrl css/style.css}>" />
<
script type="text/javascript" src="<{xoAppUrl /jseffects/jquery/jquery.js}>"></script>
<
script type="text/javascript">
    
JQ = $;  //rename $ function
</script>
<
script type="text/javascript" src="<{xoAppUrl /jseffects/jquery/pluginpage.js}>"></script>
<
script type="text/javascript" src="<{xoAppUrl /jseffects/jquery/toggleElements/jquery.toggleElements.pack.js}>"></script>
<!-- 
Css des scripts -->
<
link rel="stylesheet" type="text/css" media="screen" href="<{xoAppUrl /jseffects/jquery/toggleElements/toggleElements.css}>" />
<
link rel="stylesheet" type="text/css" media="screen" href="<{xoAppUrl /jseffects/jquery/toggleElements/toggleElements2.css}>" />


In the plugins “.js”, to think of rename the “$” by “JQ”

@++

nachenko

Quite a regular
Posted on: 2007/10/16 10:15
nachenko
nachenko (Show more)
Quite a regular
Posts: 356
Since: 2005/1/18
#7

Re: JQuery, XOOPS and Internet Explorer 6

Thanks, Kris.

OK, we have two solutions that seem to work. I'd like some feedback about both.

suico

Friend of XOOPS
Posted on: 2007/11/15 14:13
suico
suico (Show more)
Friend of XOOPS
Posts: 374
Since: 2003/7/24
#8

Re: JQuery, XOOPS and Internet Explorer 6

I use jquery a lot and in my module yogurt it is very used

Just had a look at xoops.js and yes it uses a function called $

I can change my calls to the function $ to jquery or JS as kris suggested yes but I hadn t any problems till now of compability, maybe cause I declared my js through $xoTheme->addScript ?

Is there a cascade system like css for javascript ? Or will I have problems in all cases just for redeclaring the function with the same name?

A sad day :(

And please XOOPS core developers think about changing the core function $ to anything else but we can t have an incompability with such a great script library as jquery is.

Would like to hear more about it.
Yogurt Social Network Service
Visit: http://www.marcellobrandao.eti.br/

phppp

XOOPS Contributor
Posted on: 2007/11/15 14:30
phppp
phppp (Show more)
XOOPS Contributor
Posts: 2857
Since: 2004/1/25
#9

Re: JQuery, XOOPS and Internet Explorer 6

Before it is officially changed to xoops$, please use it as a hack.

nachenko

Quite a regular
Posted on: 2007/11/15 17:07
nachenko
nachenko (Show more)
Quite a regular
Posts: 356
Since: 2005/1/18
#10

Re: JQuery, XOOPS and Internet Explorer 6

I found a very nice workaround. Put it in the wiki.

In jQuery, the $ function is just an alias. Just use the original jQuery function. So, instead of...

$(document).ready(...

write...

jQuery(document).ready(

That easy.