problems with icons in internet explorer (type plugin)
705 views
Skip to first unread message
torrac
Jul 23, 2010, 9:27:55 AM7/23/10
to jsTree
hi, i have problems when using types in internet explorer.
i just tried very simple code from documentation:
$(function () {
$("#treeView").jstree({
"json_data" : {
"data" : [
{
"data" : "A node",
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : {
"id" : "li.node.id",
"rel" : "root"
},
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
"types" : {
"valid_children" : [ "root" ],
"types" : {
"root" : {
"icon" : {
"image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png"
},
"valid_children" : [ "default" ],
"max_depth" : 2,
"hover_node" : false,
"select_node" : function () {return false;}
},
"default" : {
"valid_children" : [ "default" ]
}
}
},
"plugins" : ["themes","json_data","ui","types"]
});
});
give attention to second root node, which i declined as root type.
and here the result in internet explorer 7 and firefox 3.6:
http://yfrog.com/mjjstreeieffp
any ideas how to solve the problem??
best regards,
chris
i just tried very simple code from documentation:
$(function () {
$("#treeView").jstree({
"json_data" : {
"data" : [
{
"data" : "A node",
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : {
"id" : "li.node.id",
"rel" : "root"
},
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
"types" : {
"valid_children" : [ "root" ],
"types" : {
"root" : {
"icon" : {
"image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png"
},
"valid_children" : [ "default" ],
"max_depth" : 2,
"hover_node" : false,
"select_node" : function () {return false;}
},
"default" : {
"valid_children" : [ "default" ]
}
}
},
"plugins" : ["themes","json_data","ui","types"]
});
});
give attention to second root node, which i declined as root type.
and here the result in internet explorer 7 and firefox 3.6:
http://yfrog.com/mjjstreeieffp
any ideas how to solve the problem??
best regards,
chris
vakata
Jul 26, 2010, 3:21:25 AM7/26/10
to jsTree
Sorry,
I cannot open the above demo and when trying your code with my latest
copy (latest commit) all worked fine.
Kindest regards,
Ivan
torrac
Jul 26, 2010, 5:17:22 AM7/26/10
to jsTree
hi!
same problem with latest commit r201.
the link is a screenshot with comparison of presentation of the
treeview in ie and ff. here again the url with direct link to the
image:
http://desmond.yfrog.com/Himg811/scaled.php?tn=0&server=811&filename=jstreeieff.png&xsize=640&ysize=640
same problem with latest commit r201.
the link is a screenshot with comparison of presentation of the
treeview in ie and ff. here again the url with direct link to the
image:
http://desmond.yfrog.com/Himg811/scaled.php?tn=0&server=811&filename=jstreeieff.png&xsize=640&ysize=640
there is also a little display error of the dashed line before the
parents and the first child node. there a part of the line is solid
instead of dashed.
br, chris
vakata
Jul 26, 2010, 5:44:50 AM7/26/10
to jsTree
Hi,
I still cannot view the image - sorry.
Can you upload it somewhere else?
I still cannot view the image - sorry.
Can you upload it somewhere else?
Kindest regards,
Ivan
On Jul 26, 12:17 pm, torrac <chr....@arcor.de> wrote:
> hi!
> same problem with latest commit r201.
> the link is a screenshot with comparison of presentation of the
> treeview in ie and ff. here again the url with direct link to the
> image:http://desmond.yfrog.com/Himg811/scaled.php?tn=0&server=811&filename=...
torrac
Jul 26, 2010, 6:07:49 AM7/26/10
to jsTree
vakata
Jul 26, 2010, 7:21:57 AM7/26/10
to jsTree
Ok,
now it worked :) I can see the picture but I cannot reproduce it in
IE7 ...
Can I have a look at the complete source? Maybe you have not set a
doctype?
I tested with:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
But any doctype should do - just avoid quirksmode. If this does not
help - paste the whole page here so that I can reproduce.
Cheers,
Ivan
now it worked :) I can see the picture but I cannot reproduce it in
IE7 ...
Can I have a look at the complete source? Maybe you have not set a
doctype?
I tested with:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
But any doctype should do - just avoid quirksmode. If this does not
help - paste the whole page here so that I can reproduce.
Cheers,
Ivan
torrac
Jul 26, 2010, 10:48:33 AM7/26/10
to jsTree
YEAH!!! bingo! i added "<!DOCTYPE html ..." and now it works also in
IE! thanks a lot!!
but there is another little problem now (in IE; FF works):
i use the following code for periodically update of icons, which will
be changed dependent of their status:
$("#treeView").bind("loaded.jstree", function (e, data) {
setInterval(function()
{
setTreeStatusIcons();
}, 2100);
});
this actually works, but the according (changed) icons will not be
refreshed until i do a mouse-over on the treeview or better the list
items. that means the type seems to be changed but the icon itself
doesn#t change. i also tried to disable IE caching.
the problem could be the tree object, which i get through:
treeObj = $.jstree._focused();
is there a "better" possiblity to get the according treeview object?
(there is only one treeview instance).
in FF there are no problems.
best regards,
chris
btw: thanks a lot for this great and fast support!! :)
IE! thanks a lot!!
but there is another little problem now (in IE; FF works):
i use the following code for periodically update of icons, which will
be changed dependent of their status:
$("#treeView").bind("loaded.jstree", function (e, data) {
setInterval(function()
{
setTreeStatusIcons();
}, 2100);
});
this actually works, but the according (changed) icons will not be
refreshed until i do a mouse-over on the treeview or better the list
items. that means the type seems to be changed but the icon itself
doesn#t change. i also tried to disable IE caching.
the problem could be the tree object, which i get through:
treeObj = $.jstree._focused();
is there a "better" possiblity to get the according treeview object?
(there is only one treeview instance).
in FF there are no problems.
best regards,
chris
btw: thanks a lot for this great and fast support!! :)
vakata
Jul 27, 2010, 3:55:43 AM7/27/10
to jsTree
Hi,
I am glad I could help and the fix worked.
As for the icon issue - I will lookup into that, it seems that IE
needs to redraw (which does not happen when the REL attribute is
changed obviously). You can try to force a redraw - inside the
setTreeStatusIcons function:
http://www.google.bg/#hl=en&source=hp&q=force+ie+to+redraw
There are a few ideas I found - use the container of the tree and set
container.className = container.className, or simply hide/unhide the
container (style.display), or you could scroll the page up/down, or
toggle a class on and off. I cannot recommend any of those as i have
not tested, but one of them should work :)
Kindest regards,
Ivan
I am glad I could help and the fix worked.
As for the icon issue - I will lookup into that, it seems that IE
needs to redraw (which does not happen when the REL attribute is
changed obviously). You can try to force a redraw - inside the
setTreeStatusIcons function:
http://www.google.bg/#hl=en&source=hp&q=force+ie+to+redraw
There are a few ideas I found - use the container of the tree and set
container.className = container.className, or simply hide/unhide the
container (style.display), or you could scroll the page up/down, or
toggle a class on and off. I cannot recommend any of those as i have
not tested, but one of them should work :)
Kindest regards,
Ivan
torrac
Jul 27, 2010, 12:09:14 PM7/27/10
to jsTree
hi ivan and all IE-nerved people! ;)
thanks again for the tip!!
i just tried it with the following workaround and it works with IE7.
it's not really nice, but it's for the moment. maybe someone has a
better solution which is cleaner?!
br, chris
here my working code:
$("#treeView").bind("loaded.jstree", function (e, data) {
setInterval(function()
{
setTreeStatusIcons();
//-- forcing redraw --
$("#treeView").css("display", "none"); //hide
$("#treeView").css("display", "block"); //show
//--------------------
}, 2100);
});
thanks again for the tip!!
i just tried it with the following workaround and it works with IE7.
it's not really nice, but it's for the moment. maybe someone has a
better solution which is cleaner?!
br, chris
here my working code:
$("#treeView").bind("loaded.jstree", function (e, data) {
setInterval(function()
{
setTreeStatusIcons();
$("#treeView").css("display", "none"); //hide
$("#treeView").css("display", "block"); //show
//--------------------
}, 2100);
});
Reply all
Reply to author
Forward
0 new messages