Penny for a thought

@dododidiMar 05.2009

Hello Everyone……

hope u can help

What am I trying to achieve?:

I am trying to produce a wordwrap within a Div, in IE its no problem with
“~~[COLOR=”Blue”]~~word-wrap:break-word[/COLOR]” but ~~[COLOR=”Red”]~~~~[B]~~FF 3.06[/B][/COLOR] will not accept it, hence I inserted the “Javascript wordwrapper” (See below) which on its own does the job well.

the PROBLEM:

once having clicked on the DIV to get to the other site and then pressed the ~~[COLOR=”blue”]~~~~[B]~~Back Button[/B][/COLOR] to get back to my site, that same DIV is full of rubbish like this:-

[CODE]<WBR>u<WBR>p<WBR>u<WBR>p<WBR>u<WBR>p[/CODE]

produced by the javascript.

the only way to remove it (as far as I know) is to refresh the page ONCE onload, hence I need to combine the “Javascript wordwrapper” with a single onload page refresher which in turn deletes the cache , or,

change the “wordwrap” script(where the problem actually begins)

or do you an idea how to resolve the problem with the

[CODE]<wbr>[/CODE]

thats left in the cache.
I have tried clearing the cache with meta tags on loading but without results.(~~[COLOR=”Red”]~~dont forget that the prob only happens in FF[/COLOR])

I’ve written ~~[COLOR=”Red”]~~Two[/COLOR] small HTMLs so that you can see the problem directly here:-

~~[COLOR=”Red”]~~1st url:- [/COLOR] ~~[url]~~http://www.nigels.de/ff.html[/url] =script attempt with refresh onload

~~[COLOR=”red”]~~2nd url:-[/COLOR] ~~[url]~~http://www.nigels.de/fff.html[/url] =script ~~[COLOR=”RoyalBlue”]~~without[/COLOR] refresh on loading, but trying to delete the <wbr> in the div whilst loading the page

THE PROBLEM ONLY OCCURS IN ~~[COLOR=”red”]~~FIREFOX[/COLOR]
I am beginner with Javascript(please bear this in mind when answering)

to post a comment

JavaScript

21 Comments(s) _↴

@dododidiauthorMar 05.2009 — #Hmmmmm...

@JMRKERMar 05.2009 — #Personal opinion here.

I think the FF version is more correct!

If you have an extra long rubbish word that you are putting into a div or span area

that is smaller than the word to display, where should it break?

Why would I trust IE to break it into two (or more) lines at the correct place

when the original word has no natural breaks to begin with! If there are no breaks or

hyphens, then I would not want to the word to be split for me!

Bottom line ___ if you have a normal sequence of words to display

in the smaller div or span area, do you continue to have the problem with FF?

In this case I don't have a problem and I think you are making a problem out of nothing.

Two pennies ... ?

@dododidiauthorMar 06.2009 — #Personal opinion here.

I think the FF version is more correct!

If you have an extra long rubbish word that you are putting into a div or span area

that is smaller than the word to display, where should it break?[/QUOTE]

the word would not be rubbish, rather it could be a long url and where it breaks, is(in this case) irrelevant

Why would I trust IE to break it into two (or more) lines at the correct place

when the original word has no natural breaks to begin with! If there are no breaks or

hyphens, then I would not want to the word to be split for me![/QUOTE]

the [COLOR="Red"][B]word[/B][/COLOR](if too long) has to be broken down due to the design and plays no important roll visually(unless it is too long), but the background picture is what counts. Hence the word must fit within the boundaries.

Bottom line ___ if you have a normal sequence of words to display

in the smaller div or span area, do you continue to have the problem with FF?

In this case I don't have a problem and I think you are making a problem out of nothing.[/QUOTE]

it seems you have not looked at the urls that I posted, otherwise you wouldn't have commented that way.

The problem is that the Javascript is producing the "rubbish", but only having pressed the Back button.

Two pennies ... ?[/QUOTE]

in my pocket...?

@JMRKERMar 06.2009 — #the word would not be rubbish, rather it could be a long url and where it breaks, is(in this case) irrelevant[/QUOTE]
This wasn't specified in original post.

I was looking at normal human readable information to be displayed inside the box.

Hence the word must fit within the boundaries.[/QUOTE]
You could increase the boundaries if it is really that important to you. (Design change)

it seems you have not looked at the urls that I posted, otherwise you wouldn't have commented that way.

The problem is that the Javascript is producing the "rubbish", but only having pressed the Back button.[/QUOTE]
I did look at the problem and see more consistency with the FF version using the back button test. Other than the scripts being different, I believe that the .innerHTML assignment may be at the root of the problem as opposed to the script function you are using. There seems to be a difference of opinion as to when to use it safely (.innerHTML). Search forum for many comments about this topic.

Finally, as stated before:
Personal opinion here.[/QUOTE]
Again, not trying to argue,

just 2 cents more ... ?

@scragarMar 06.2009 — #Totally agreeing with JMRKER here, if you need to use javascript to make something look right you are doing it wrong. Javascript should be used to improve the page, not to make it work.

Anyway, there is a solution already discussed on these forums, although it is hard to find: http://www.web-developer.com/forum/showthread.php?t=190287

@dododidiauthorMar 06.2009 — #well thx for very much for your opinions, but I do believe that we are not trying to solve my problem, rather you are trying to emphasize how wonderfull FF ist and that I should orientate my design according to their way of thinking.

My site is designed in such a way that any overlarge areas produced thru URLs and/or words that are to long messes up the whole IDEA, hence I must wrap the words.

the fact that FF is not able to wrap words according to CSS, that cant be made to be MY PROBLEM.

if I dont fit in a chair then I should loose weight and not buy a larger chair ! that would be normal and the best in the long run.

longer URLs are standard and normal nowadays, hence I have to adjust to them and not vice-versa.

Sure you are in one way absolutely right, it would be much easier to simply extend the borders and this disscusion would never have taken place.

in my case a larger Div looks and works very cumberson and tends not to flow(visually) with the mouse in combination the background. whereby the background is the clou to my site.

So, this is where I NEED your help as Javascript experts(I dont really have a clue about JS).

Bottom line___The words must be able to wrap if they are too long.

Please take another serious look at the URLs and the two different scripts. Try to enhance one of them so that it works.

I appriciate your help.

Thx

Nigel

@scragarMar 06.2009 — #It doesn't work in Fx using CSS because it's not a part of the CSS2 standard, it's a proposed part of CSS3(which isn't finalised yet, let alone implemented in browsers). IE does what it always does, and makes it's own way without paying attention to standards(which sets everyone back).

Really I must ask, why are you using such a small box if you are going to be having long words in it? sounds like a really bad idea if you ask me.

@dododidiauthorMar 06.2009 — #the reason is quite simple.

Firstly :

as I mentioned above, the mouseover effect has to be conform to the background design,(believe me it looks great although I cant show you at the mo,sorry)

secondly:Google doesn't like "hidden" words,they, on the other hand are extremly nessessary.

if I had my way, I would hide the words and replace them with a pic but..c'est la vie

@dododidiauthorMar 06.2009 — #Basically I am "torn between two lovers":

1. the rules and regs of internet SEO and

2. the "perfect design"

its a psychological game between what I want the veiwer to see and/or what he would want to see combined with what possibilities can be achieved within a confined space whilst at the same time satisfying every participant.

@JMRKERMar 06.2009 — #Why not make the URL 'pop-up' in a div that is in a different layer?

Seems like that might solve 'your problem'.

@dododidiauthorMar 06.2009 — #scragar, thx I habd a look at the url u gave me and saw this:

[CODE]<div class="name">getElements<wbr>ByTagName()</div>[/CODE]

would you be so kind and intergrate this in script for me to try out, please bear in mind that I dont really understand too much about JS

Nigel

@dododidiauthorMar 06.2009 — #I am not sure what u mean JMRKER

do u mean something like this lightbox.js on one of my homepages http://www.nigels.de then click on one of the small picture of the house

@JMRKERMar 06.2009 — #Easiest way is this, but you can get fancier with more CSS

Hold the mouse cursor over the <div> box to see the effect.

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Title Attribute&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div style="height:150; width:150; border:10px solid blue;"
 title="URL_information_to_display_as_a_very_long_entry"
 onclick="alert('Could to go URL specified')"&gt;
 Hover to display URL&lt;/div&gt;
 
 &lt;!-- alerts just used for testing purposes --&gt;
 
 &lt;p&gt;Alternate method:
 &lt;a href="#" onclick="alert('Would to go URL specified')"
 title="URL_information_to_display_as_a_very_long_entry"&gt;
 Hover to display URL&lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

Could also use JS to dynamically change the display if necessary.

Or use in an anchor link to go to URL displayed

@dododidiauthorMar 06.2009 — #thx for your time JMRKER,

I have actually already considered similar to that, but how should I say it.. if I want to make you hungry, then I would probably do a meal that smells great to entice you to eat it.

Internet has no aroma, so the only thing left is the visual effect+good content and this is why I am persevering to keep my design.

Could also use JS to dynamically change the display if necessary.

Or use in an anchor link to go to URL displayed [/QUOTE]

this could be interresting, do you know where I could see some examples?

@JMRKERMar 06.2009 — #this could be interresting, do you know where I could see some examples?[/QUOTE]

Yes, but you probably would like them about as well as my other suggestions. :eek:

@dododidiauthorMar 07.2009 — #well, having waitng and waiting and waiting,

I supose there are no answeres in this forum,

Thx anyway

@JMRKERMar 07.2009 — #See: http://javascript.internet.com/miscellaneous/popup-div.html

@dododidiauthorMar 07.2009 — #thx I'll make a few thoughts about that one

@dododidiauthorMar 08.2009 — #A NEW THOUGHT...

I showed you two examples till now about what happens when one hits the back button in FF with the existing CSS and Javascripts----BUT

LOOK AT THIS:

with exactly the same intergrated script, but a different linked url on the same Div, the problem no longer occurs.

Have a look please and try to analyse the prob, its too much for my capabilities :-

http://www.nigels.de/new.html click on the box, you will go to a simple page "hb.html" produced for the forum regarding this problem and the

result is:

after Back-Button its ok in FF

and now look at this:

http://www.nigels.de/ff1.html click on the box, this time you will go to my homepage but with exactly the same script and CSS and the result

is:- after Back-Button "<WBR>blablabla<WBR>" etc... in FF

two identical scripts with two different websites, one produces rubbish in the Div (after the back-button) but the other website is ok

so now I am really confused, what the heck is happening.

@dododidiauthorMar 11.2009 — #ok

@dododidiauthorMar 14.2009 — #hI FOLKS;

having spent about two weeks and 25 hours a day in different JS forums and learnt a lot about how to boil eggs and how long a piece of string is, I have found the answer, thanks to: [COLOR="Red"]CHRISTOFF TRUTER[/COLOR]:

http://www.cstruter.com/blog/replyblog.aspx?ContentID=113

Here is the working script:

[CODE]window.onload = function()
 {
 if (window.attachEvent == undefined)
 {
 var tag = document.getElementsByTagName("span");
 for (var i = 0; i < tag.length; i++)
 { 

 if (tag.item(i).className == "wordwrap")
 {
 var text = tag.item(i).innerHTML;
 
   if ((text.indexOf('<wbr>') < 0))
   { 
   tag.item(i).innerHTML = text.replace(/(.*?)/g, "<wbr 
 />");
 }
 }
 }
 }
 }[/CODE]

thx for trying to help

wrong script: http:www.nigels.de/test.html

Right script: http:www.nigels.de/test1.html

Nigel

Also in #JavaScript _↴

Auto-Resize Preload initial data and store into localStorage?set display text of dropdownlist

Success!

Help @dododidi spread the word by sharing this article on Twitter...

Tweet This

Penny for a thought

21 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

**** Penny for a thought ****

21 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

Penny for a thought

21 Comments(s) _↴

Also in #JavaScript _↴