Home page display problem

jfriend · October 5, 2005

I just noticed today that my home page has a display problem. One category's name does not display next to the thumb for the category and instead displays on top of the category below it. I don't know how long it has been this way. I haven't made any recent changes to my account. This problem only occurs in Firefox and does not occur in IE (both on Windows). The category name is fairly long, but this used to work fine. I can't shorten the category name because I've already passed out the direct URL to this category which is generated from the name.

I'm wondering how I can fix this or get it fixed?

Here's a screenshot of the messed up display on Firefox:

And here's the same screen on IE:

rainforest1155 · October 5, 2005

I can confirm the bug in Firefox, but don't know what's wrong.

Sebastian

Andy · October 5, 2005

how about when you are logged out?

Allen · October 5, 2005

I would go into organize and change the position of one and see if it corrects the page. Worth a try.
AL

edit: does same in NS7.2

jfriend · October 5, 2005

Same problem when logged out

andy wrote:

how about when you are logged out?

Same problem on Firefox when I'm logged out.

The site is http://jfriend.smugmug.com if you want to see it yourself.

--john

jfriend · October 5, 2005

Unsure how to reorder categories

Allen wrote:

I would go into organize and change the position of one and see if it corrects the page. Worth a try.

I don't quite understand how I would do this. On my home page, I have 9 categories displayed. When I click the "organize" link, it takes me to a screen that displays 132 galleries and let's me order them, with no categories listed. Since I'm not interested in showing 132 galleries on my home page, I don't think this will give me what I want (or what you suggested). If there's a way to customize the order of the 9 categories, I'd be happy to try that, but I don't know how to do that (or if it's possible).

--John

{JT} · October 5, 2005

Remove the dashes in your category name, it is causing the title to go below the image.

jfriend wrote:

I don't quite understand how I would do this. On my home page, I have 9 categories displayed. When I click the "organize" link, it takes me to a screen that displays 132 galleries and let's me order them, with no categories listed. Since I'm not interested in showing 132 galleries on my home page, I don't think this will give me what I want (or what you suggested). If there's a way to customize the order of the 9 categories, I'd be happy to try that, but I don't know how to do that (or if it's possible).

--John

jfriend · October 5, 2005

Problem with changing the name

{JT} wrote:

Remove the dashes in your category name, it is causing the title to go below the image.

The problem with changing the category name at all is that I've already passed out a link directly to the category (http://jfriend.smugmug.com/Kayak-Camp-2005-first-year-scouts) and I'm under the impression that changing the category name will change that link and make the old link not work any more so people would be encountering a dead link (something I'd like to avoid). The reason I have dashes instead of spaces in the first place is that I didn't want %20's in the URL for the category.

This used to work fine. Perhaps it broke in the recent upgrade to home pages.

I remember that a few days ago, there was a suggestion for a similar problem somewhere else to add some sort of CSS setting that would cause things that don't fit to render anyway, but I can't find that posting. Would something like that be a possible solution here?

--John

jfriend · October 5, 2005

minibox style changes?

{JT} wrote:

Remove the dashes in your category name, it is causing the title to go below the image.

I found the other thread I was thinking of. It's this one: http://www.dgrin.com/showthread.php?t=19612 where the discussion is about .minibox and the fact that things that don't fit get pushed out. I don't want the particular recommendation in that thread because that just turns it off if it doesn't fit, but I wonder if there are other style changes for minibox that could fix this?

--John

{JT} · October 6, 2005

Well, yeah. You could make the page wider and then make .minibox wider to take advantage of it. The problem is that with those dashes, the gallery name will still be quite long.

How about this: you rename the category and then recreate the category with the old name. I can write you some javascript that would redirect people who went to the old link.

jfriend wrote:

I found the other thread I was thinking of. It's this one: http://www.dgrin.com/showthread.php?t=19612 where the discussion is about .minibox and the fact that things that don't fit get pushed out. I don't want the particular recommendation in that thread because that just turns it off if it doesn't fit, but I wonder if there are other style changes for minibox that could fix this?

--John

rainforest1155 · October 6, 2005

The problem is that css doesn't recognise that it can cut off a string using a dash? I always thought the dash is an international agreed sign to separate a word at the end of a line.
I wonder why the IE handles it correct in this case - is this again a violation of standards by the IE?

Concerning spaces in categories: I always thought spaces are a big no no in the www and that not all browsers would convert them into %20. The %20 itself looks pretty ugly to me.
Can't you use a dash instead of a space when creating the url for a category including spaces? That would be better to read and standard confirm - you're already doing this to connect keywords, so why not here?

Thanks,
Sebastian

jfriend · October 6, 2005

Can Javascript change the display string

{JT} wrote:

Well, yeah. You could make the page wider and then make .minibox wider to take advantage of it. The problem is that with those dashes, the gallery name will still be quite long.

How about this: you rename the category and then recreate the category with the old name. I can write you some javascript that would redirect people who went to the old link.

The Javascript idea got me thinking. Could I write Javascript that would change the display string in the page to have spaces in it? I know JavaScript well (from Photoshop scripting), but I don't know web programming that well. Is it possible for me to find that link and change it's text from some JS? If so, do I put that JS in the header? How do I get it to only operate on the home page?

flyingdutchie · October 6, 2005

I tried adding this to your co-branding (i tested in FireFox; and it does not seem to break your co-branding in IE5.5; i guess IE6 will be fine too).

It will 'kind-a' fix your problem. It will not cause a word-break, but it gets rid of the blending of the two categories (Other and the Kayak ones):

.albumTitle {
float: right;
width: 220px;
}

Note that the long text will still overflow to the right....
--Anton

jfriend · October 6, 2005

Javascript can fix this problem - have a question

jfriend wrote:

The Javascript idea got me thinking. Could I write Javascript that would change the display string in the page to have spaces in it? I know JavaScript well (from Photoshop scripting), but I don't know web programming that well. Is it possible for me to find that link and change it's text from some JS? If so, do I put that JS in the header? How do I get it to only operate on the home page?

So, it is possible to just change the dashes to spaces using JavaScript and that fixes everything in the display. I haven't put it in my smugmug page yet, but I have proven it can be done by just editing a local copy of the page.

I decided that I'd like to make this a generic function that changes any of my category names that have dashes to include spaces, but I'm having trouble telling which links are category names and which are other elements on the page. The code I have so far is below. It works, but it also changes other "nav" links besides category names. Does anyone have any idea how to tell which links are category names? They get their style from albumtitle, but I don't know how to test for that in JavaScript. Here's the code I have that works, but also converts other links of class "nav" besides just category names.

 for (var i in document.links)
 {
  	if (document.links[i].className == "nav")
   	{
  		var str = document.links[i].innerHTML;
  		if (str != undefined)
  		{
  			var newStr = str.replace(/-/g, " ");
  			if (newStr != str)
 			{
				document.links[i].innerHTML = newStr;
 			}
 		}
 	}
  }

Any ideas how to make this "safer" so it only converts category names, not other links with the class "nav"?

--John

flyingdutchie · October 6, 2005

1st: Have you tried the suggestion from my previous post (the CSS snippet)? That is a safer bet.

If you want to use 'safer' script, First do a check if you're looking at categories:

[b]if (document.getElementById("categoriesBox"))[/b]
{
for (var i in document.links)
{
	 if (document.links.className == "nav")
	 {
		 var str = document.links[ i ].innerHTML;
		 if (str != undefined)
		 {
			 var newStr = str.replace(/-/g, " ");
			 if (newStr != str)
			 {
				 document.links[ i ].innerHTML = newStr;
			 }
		 }
	 }
}
}

You can run this script only after the document has been loaded. To ensure this, use the onload event of the <body> tag
'body tag>' field:
<body id="some_body_id" onload="doOnLoad();">

And then define a function doOnLoad() that runs the above script.

You may want to see if this line of script really works:
if (document.links.className == "nav")
Because the class of each link is "albumTitle nav" and not just "nav".... Therefore, i would use this statement instead:
if (document.links.className.indexOf("albumTitle") >= 0)

-- Anton.

jfriend · October 6, 2005

It does work, thanks for the improvements

flyingdutchie wrote:

You may want to see if this line of script really works:
if (document.links.className == "nav")
Because the class of each link is "albumTitle nav" and not just "nav".... Therefore, i would use this statement instead:
if (document.links.className.indexOf("albumTitle") >= 0)

Thanks for the suggestions. I did realize that I have to constrain this to only run on the categories page - thanks for telling me how to do that. I will incorporate the test for that.

The line:
if (document.links.className == "nav")
does work in both Firefox and IE 6 (the declared class attribute of the link is only "nav"; "albumtitle" is inherited from a previous <p> tag and isn't reported in the .className for the actual ink, but I will change it use indexOf("nav") since that is safer if other styles get added in the future.

In my test page, I found that this code works by just putting it in the footer - I didn't need to put it in an onLoad handler. Am I generally OK as long as this code runs after the elements I'm interested in modifying occur in the page? Or does it have to be in an onLoad handler?

Do you know of anyway to constrain my test to only affect the actual category links? There are other links in the page with the className of "nav" and right now, this code will remove dashes from them too. There are no other attributes on that specific link, but there are inherited styles and classes that are unique to the ones I want to change. Is there a way to test for inherited styles in Javascript?

The relevant HTML arround a category is:

 <div class="miniBox">
 <div class="photo">
 <a href="http://jfriend.smugmug.com/Kayak-Camp-2005-first-year-scouts">
 <img src="smugmug_files/26219095-Ti.jpg" class="imgBorder" onmouseover="this.className='imgBorderOn';" onmouseout="this.className='imgBorder';" border="0" height="100" width="67"></a>
 </div>
 <p class="albumTitle">
 
 <!-- I want to uniquely find only the links like this next one -->
 [/font][/font][font=Courier New][font=Verdana]<!-- I am testing for className has "nav" in it, but there are [/font][/font][font=Courier New][font=Verdana] -->[/font][/font]
 [font=Courier New][font=Verdana]<!-- other "nav" links that I don't want to be changing -->
 [/font][/font]
 [font=Courier New][font=Verdana]<a href="http://jfriend.smugmug.com/Kayak-Camp-2005-first-year-scouts" class="nav">Kayak-Camp-2005-first-year-scouts</a>
 </p>
 <p class="description">11 galleries with 498 photos</p><p class="updated">updated: Jun 26, 2005 4:52pm PDT</p>
 <div class="spacer"></div>
 </div>

--John

jfriend · October 6, 2005

overflow:hidden is a work-around

flyingdutchie wrote:

1st: Have you tried the suggestion from my previous post (the CSS snippet)?

I also discovered that if I add

overflow:hidden

to the albumTitle style, Firefox then displays what fits and clips the rest. IE's behavior does not change - it still wraps on the hyphen. That would be the simplest change, though I'm enjoying playing with the other solutions.

I think it would make sense for smugmug to add that to it's default style for albumTitle so this problem doesn't happen to others. It's better to display a clipped version of the title than to display nothing in one category and two overlapping titles in the other category.

--John

flyingdutchie · October 6, 2005

jfriend wrote:

I also discovered that if I add

overflow:hidden

to the albumTitle style, Firefox then displays what fits and clips the rest. IE's behavior does not change - it still wraps on the hyphen. That would be the simplest change, though I'm enjoying playing with the other solutions.

I think it would make sense for smugmug to add that to it's default style for albumTitle so this problem doesn't happen to others. It's better to display a clipped version of the title than to display nothing in one category and two overlapping titles in the other category.

--John

"overflow:hidden"

Good find!!!!

I was looking at the CSS properties work-break, line-break, position, height, width, etc... but the overflow did the trick.
-- Anton.

flyingdutchie · October 6, 2005

In my test page, I found that this code works by just putting it in the footer - I didn't need to put it in an onLoad handler. Am I generally OK as long as this code runs after the elements I'm interested in modifying occur in the page? Or does it have to be in an onLoad handler?

It depends on the browser. It is not guaranteed that the DOM is complete if you use DOM methods/functions before the page is entirely loaded (i.e. document.getElementById(), document.getElementByName(), and lot of other methods on the document objects may not work or return bogus results).

So, it is safer to wait until the entire DOM has been constructed and layed out. This is guaranteed just before the body's 'onload' event is called.

-- Anton.

jfriend · October 6, 2005

Problem fixed

flyingdutchie wrote:

It depends on the browser. It is not guaranteed that the DOM is complete if you use DOM methods/functions before the page is entirely loaded (i.e. document.getElementById(), document.getElementByName(), and lot of other methods on the document objects may not work or return bogus results).

So, it is safer to wait until the entire DOM has been constructed and layed out. This is guaranteed just before the body's 'onload' event is called.

-- Anton.

I decided I wanted to get rid of the dashes without changing the URLs, so I added in the JavaScript to my home page that converts the dashes to spaces in the titles. Problem fixed. Thanks to those who helped me figure this out.

I didn't find a way to uniquely identify only the category titles in the document.links array from JavaScript so my script will convert other "class=nav" links too, but fortunately there aren't any other links with that class that have dashes as part of their innerHTML so I'm OK for now.

I'd love to have a unique class directly on the title links (then I could check it from JS using element.style.className) or a unique ID on each title link that I could also test from JS. I do check the className for "nav", but there are many other links in the page with that class name too so that only eliminates some.

I did find that you can get the full style of an element from JS (including inherited styles) with document.links.currentStyle on IE and with document.defaultView.getComputedStyle(document.links, null) on Firefox and Opera and Safari, but I wasn't able to find any distinct enough style parameters only on the albumTitle styles that I could use these to make a good test for whether this link was really an albumTitle or not.

--John

flyingdutchie · October 6, 2005

jfriend wrote:

I decided I wanted to get rid of the dashes without changing the URLs, so I added in the JavaScript to my home page that converts the dashes to spaces in the titles. Problem fixed. Thanks to those who helped me figure this out.

I didn't find a way to uniquely identify only the category titles in the document.links array from JavaScript so my script will convert other "class=nav" links too, but fortunately there aren't any other links with that class that have dashes as part of their innerHTML so I'm OK for now.

I'd love to have a unique class directly on the title links (then I could check it from JS using element.style.className) or a unique ID on each title link that I could also test from JS. I do check the className for "nav", but there are many other links in the page with that class name too so that only eliminates some.

I did find that you can get the full style of an element from JS (including inherited styles) with document.links.currentStyle on IE and with document.defaultView.getComputedStyle(document.links, null) on Firefox and Opera and Safari, but I wasn't able to find any distinct enough style parameters only on the albumTitle styles that I could use these to make a good test for whether this link was really an albumTitle or not.

--John

I have not run/debugged this script-snippet i'm showing you in this message, but you could have an even safer script, getting only the <a> elements within your categoriesBox:

var catBox = document.getElementById("categoriesBox");
if (catBox)
{
	// Get all links that are inside the categoriesBox.
	var documentLinks = catBox.getElementsByTagName("A"); 
	for (var i in documentLinks)
	{
		... you already have the rest :D ...
	}
}

But, the overflow: hidden did not work...? You still need the javascript?

-- Anton.

jfriend · October 7, 2005

That's cool

flyingdutchie wrote:
I have not run/debugged this script-snippet i'm showing you in this message, but you could have an even safer script, getting only the <a> elements within your categoriesBox:
 var catBox = document.getElementById("categoriesBox");
 if (catBox)
 {
 	// Get all links that are inside the categoriesBox.
 	var documentLinks = catBox.getElementsByTagName("A"); 
 	for (var i in documentLinks)
 	{
 		... you already have the rest :D ...
 	}
 }
But, the overflow: hidden did not work...? You still need the javascript?

Oh, that's cool. I didn't know you could query div containers like that to get just the links in that div container. That will be better.

I went with the JS because it's a better solution. The overflow:hidden is easier, but it just truncates on Firefox with no wrap. Adding the spaces gives me wrapping on Firefox just like on IE so you can see the whole category name, not just a truncated name.

Thanks.

--John

Home page display problem

Comments