|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
June 24th, 2009, 06:48 PM
|
||||||
|
||||||
|
Need help getting IE to display the following properly...
So basically here's the problem.... I'm using a jquery folder tree. By default, there is a plus and minus sign designating expanded or collapsed. If you click the sign only, would the menu expand/collapse. However, for my needs, I need the entire name beside the sign to be clickable as well. So I adjusted certain items and it works... in Opera, Firefox, Safari, Flock, and Chrome... (All latest versions I just downloaded today). It doesn't, however, work in IE6 (yes.. I still use IE6). Have not tested in IE7 or IE8...
I posted this in the CSS forum as it seems as though it's a CSS problem as opposed to Javascript or PHP... Anyways... here's the CSS file: Code:
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview ul {
background-color: white;
margin-top: 4px;
}
.treeview .hitarea {
background: url(images/treeview-default.gif) -64px -25px no-repeat;
height: 16px;
width: 100px;
margin-left: -16px;
float: left;
cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
display: inline;
float:none;
}
.treeview li {
margin: 0;
padding: 3px 0pt 3px 16px;
}
.treeview a.selected {
background-color: #eee;
}
#treecontrol { margin: 1em 0; display: none; }
.treeview .hover { color: red; cursor: pointer; }
.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.last { background-position: 0 -176px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
.treeview-red li { background-image: url(images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); }
.treeview-black li { background-image: url(images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }
.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); }
.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); }
.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }
Here's the relevant nav menu code: Code:
if (mysql_num_rows($result) != '0') {
while($row = mysql_fetch_array($result)) {
$string5= $row['string'];
$state3 = $row['state'];
$county3 = $row['county'];
$city3 = $row['city'];
$item3 = $row['item'];
if ($state2 != $state3) {
if ($i != 1) {
$treeview .= "</ul></li></ul></li></ul></li>";
}
$i++;
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />";
$state2 = $state3;
$j = 1;
}
if ($county2 != $county3) {
if ($j != 1) {
$treeview .= "</ul></li></ul></li></ul>";
}
$j++;
$treeview .= "<ul style=\"display:none;\">";
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />";
$county2 = $county3;
}
if ($city2 != $city3) {
$treeview .= "<ul style=\"display:none;\">";
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />";
$city2 = $city3;
$treeview .= "<ul style=\"display:none;\">";
}
if ($item3) {
$treeview .= "<li>".$item3."</li>";
$item2 = $item3;
}
}
}
$treeview .= "</ul></li></ul></li></ul></li></ul>";
There are 3 lines of code that I have changed from when it works: Code:
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />"; From the above 3 lines, the only thing I did which seemed to break the code was move the </div> from in front of <a href ...> to after </a> So the original lines (where it worked) looked like: Code:
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a><br />"; EDIT: Ok... so not everything works in the other browsers either. Basically if I hit refresh with the new code, then collapse and expand seem to work in reverse.... So not sure how to correct this, but any help would be appreciated... Here is what it looks like (Screen shots): Working Properly in FF After a refresh in Firefox (This is after hitting collapse) Working Properly in IE6 (Before making the changes mentioned above) Not Working in IE6 The site is not currently accessible which is why I'm including screen shots. However, if you need to see them, let me know and I will make it live.... Heading out now, so was trying to get a post up at least before I left... Thanks.. if you need further information or additional code, let me know. Any help would, of course, be appreciated.
|
|
#2
June 24th, 2009, 08:41 PM
|
||||
|
||||
|
Ok seems like you have a multitude of problems here. I would like to see the live code on a website if you could. if you don't want to release the URL to the public then you can PM me it.
The refreshing problem seems to be a JavaScript problem, and although I am not a JS ninja, I will try to debug that too if I can. Cheers
__________________
"Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue
|
|
#3
June 24th, 2009, 09:15 PM
|
||||||
|
||||||
|
Quote:
There shouldn't be anything wrong with the Javascript as I didn't change the Javascript. This was a script I came across that was actually linked from devshed in the articles section near the bottom... All that I have messed with is CSS, HTML, and PHP. However, I've created 2 links for you to see the tree in action: Working (Ignore the fact that the states/counties/cities are linked... you must click the + or - sign for the menu to expand or collapse) Broken
|
|
#4
June 24th, 2009, 09:28 PM
|
||||
|
||||
|
Ah ok, not JavaScript...hm..I am a little confused here. Why are you trying to debug the broken link example when you have a working example already? Just seems weird, never had this request before
|
|
#5
June 24th, 2009, 09:31 PM
|
||||||
|
||||||
|
Quote:
Sorry... should have mentioned... Basically the working example only allows for a user to click the + or - sign. The broken example allows them to click the name as well. I need the name clickable as there will be banners that are displayed based on what has been clicked. Can't seem to do that just based on the + and -
|
|
#6
June 24th, 2009, 09:42 PM
|
||||
|
||||
|
Ok, sorry, just one more question so I dont waste my time, which one am I fixing The broken one right? (sorry if this seems stupid, but what exactly is wrong with the broken link example?)
edit: forgot the part about IE god I feel dumb 
|
|
#7
June 24th, 2009, 09:47 PM
|
||||||
|
||||||
|
Quote:
Well.. there's the part about IE... but also the part about refreshing the page breaks in FF, for example. Didn't try the other ones to see if refresh broke in there, but figured they did if it's broken in FF. Basically if I click on Florida --> Alachua --> Gainesville ... Then if I hit F5 to refresh the page, everything breaks...
|
|
#8
June 25th, 2009, 11:05 AM
|
||||
|
||||
|
Ok..well I got your CSS placement issues figured out. Sorry it took so long, I had to go last night
It was mainly a hasLayout issue. So many elements needed it I decided to just use the universal selector for it. Now I am going to start debugging your weird JS problem. It doesn't have the error where if you click Florida then those two links and refresh it messes up the layout. But it still reverses the Collapse and Expand buttons.[edit] OK well it doesn't do it in Firefox I think, but in my IE7 it does. :-/ another thing to debug lol[/edit] Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="http://www.hikerslair.com/um/dev/broken/" />
<title>Uncommon Marketplace</title>
<link rel="stylesheet" href="./jquery.treeview.css" />
<link rel="stylesheet" href="./red-treeview.css" />
<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="um.css" type="text/css" />
<script src="./jquery.js" type="text/javascript"></script>
<script src="./jquery.cookie.js" type="text/javascript"></script>
<script src="./jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#tree").treeview({
collapsed: true,
animated: "medium",
control:"#sidetreecontrol",
prerendered: true,
persist: "location"
});
})
</script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> -->
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
*{zoom:1;}
.treeview .hitarea{width:200px;}
</style>
</head>
<body>
<table>
<tr>
<td class="leftcol">
<div id="sidetree">
<div class="treeheader"> </div>
<div id="sidetreecontrol"> <a href="?#">Collapse All</a> | <a href="?#">Expand All</a> </div>
<ul class="treeview" id="tree"><li class="expandable"><div class="hitarea expandable-hitarea" ><a href="#" style="margin-left:20px;">Florida</a></div><br /><ul style="display:none;"><li class="expandable"><div class="hitarea expandable-hitarea"><a href="#" style="margin-left:20px;">Alachua</a></div><br /><ul style="display:none;"><li class="expandable"><div class="hitarea expandable-hitarea"><a href="#" style="margin-left:20px;">Gainesville</a></div><br /><ul style="display:none;"><li>Item 1</li><li>Item 2</li></ul></li></ul></li></ul><ul style="display:none;"><li class="expandable"><div class="hitarea expandable-hitarea"><a href="#" style="margin-left:20px;">Hillsborough</a></div><br /><ul style="display:none;"><li class="expandable"><div class="hitarea expandable-hitarea"><a href="#" style="margin-left:20px;">Tampa</a></div><br /><ul style="display:none;"><li>Item 4</li></ul></li></ul></li></ul><ul style="display:none;"><li class="expandable"><div class="hitarea expandable-hitarea"><a href="#" style="margin-left:20px;">Marion</a></div><br /><ul style="display:none;"><li class="expandable"><div class="hitarea expandable-hitarea"><a href="#" style="margin-left:20px;">Ocala</a></div><br /><ul style="display:none;"><li>Item 3</li></ul></li></ul></li></ul></li><li class="expandable"><div class="hitarea expandable-hitarea"><a href="#" style="margin-left:20px;">Georgia</a></div><br /><ul style="display:none;"><li class="expandable"><div class="hitarea expandable-hitarea"><a href="#" style="margin-left:20px;">Santa Rosa</a></div><br /><ul style="display:none;"><li class="expandable"><div class="hitarea expandable-hitarea"><a href="#" style="margin-left:20px;">Gulf Breeze</a></div><br /><ul style="display:none;"><li>Item 5</li></ul></li></ul></li></ul></li></ul></div>
</td>
</tr>
</table>
</body>
</html>
Cheers  Last edited by Skipt : June 25th, 2009 at 11:08 AM.
|
|
#9
June 25th, 2009, 11:42 AM
|
||||||
|
||||||
|
Quote:
That wasn't that long.. considering I've been working on this for about 2 weeks now... Now I looked at the code you included but couldn't see the difference... can you highlight what was changed? Basically what you're seeing is nothing like my code.... I have mysql loops running to pull the info from a db so all of my code is in PHP for the treeview... so really hard to try and find the differences between PHP and non-PHP... (at least for me)... Thanks...
|
|
#10
June 25th, 2009, 11:50 AM
|
|||||
|
|||||
|
The only thing you have to do is in your CSS add in this code:
css Code:
I just realized that it may actually work for you because I found out that it is going to your site when i keep trying to test for that bug you told me about. So I saved all your JS on my side, and your CSS, and your images, and you index.html but it keeps going to your page. I can't figure out why, but whatever. Just try out the bug and tell me if its still there :/
|
|
#12
June 25th, 2009, 12:17 PM
|
||||||
|
||||||
|
Alright.... so now IE works... at least IE6 anyways.
As far as the refresh thing, I've narrowed down when the problem persists.... Basically as of right now, all of the linked items are linked to #. When I'm at http://www.hikerslair.com/um/dev/broken/ everything seems to refresh just fine. However, when I'm at http://www.hikerslair.com/um/dev/broken/# that's when it breaks... The items that seem to be broken at this point are: 1) Collapse and Expand are reversed 2) When I hit collapse to expand, the items themselves don't drop down after the refresh.... but they do drop down if I click the menu to expand them. I've implemented the zoom change and such so you can take a look and see what the problem is... when going to the initial link, just click one of the states/counties/cities and then click refresh.... noticed this problem in both IE and FF... can test the other browsers if you need me to, but I'm assuming it's the same in all...
|
|
#13
June 25th, 2009, 12:24 PM
|
||||
|
||||
|
(By the way, it works in IE7 too, and should work in IE8..)
About your refresh issue, its weird, I can't mimic that error now. Did my code fix it? Fortunately, i can still get your Collapse and Expand buttons to show the bug..very weird indeed.....
|
|
#14
June 25th, 2009, 12:51 PM
|
||||||
|
||||||
|
Quote:
It's fortunate that you can get the collapse and expand bug? Maybe in IE7 and IE8 the refresh issue isn't there?... Now you're hitting refresh when the URL displays a # at the end, right?
|
|
#15
June 25th, 2009, 12:59 PM
|
||||||
|
||||||
|
Also.. is there a site where I can go to to emulate various browsers? I know of sites where you can see what things will look like, but was just curious as to whether I could use the site I'm working on and test in IE7 and IE8 without installing them...
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Need help getting IE to display the following properly... |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
