www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: **** Penny for a thought ****

  1. #1
    Join Date
    Mar 2009
    Posts
    48

    FIREFOX PROBLEMS with JAVASCRIPT

    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
    "word-wrap:break-word" but FF 3.06 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 Back Button 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
    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>
    thats left in the cache.
    I have tried clearing the cache with meta tags on loading but without results.(dont forget that the prob only happens in FF)



    I've written Two small HTMLs so that you can see the problem directly here:-


    1st url:- http://www.nigels.de/ff.html =script attempt with refresh onload


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

    THE PROBLEM ONLY OCCURS IN FIREFOX
    I am beginner with Javascript(please bear this in mind when answering)
    Last edited by dododidi; 03-05-2009 at 12:59 PM.

  2. #2
    Join Date
    Mar 2009
    Posts
    48
    Hmmmmm...

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb Not a real problem to me ...

    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 ...

  4. #4
    Join Date
    Mar 2009
    Posts
    48
    Quote Originally Posted by JMRKER View Post
    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?
    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!
    the word(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.
    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 ...
    in my pocket...
    Last edited by dododidi; 03-05-2009 at 07:05 PM.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Arrow

    the word would not be rubbish, rather it could be a long url and where it breaks, is(in this case) irrelevant
    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.
    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.
    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.
    Again, not trying to argue,
    just 2 cents more ...

  6. #6
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    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/s...d.php?t=190287
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  7. #7
    Join Date
    Mar 2009
    Posts
    48
    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

  8. #8
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    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.
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  9. #9
    Join Date
    Mar 2009
    Posts
    48
    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

  10. #10
    Join Date
    Mar 2009
    Posts
    48
    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.
    Last edited by dododidi; 03-06-2009 at 06:54 AM.

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    Why not make the URL 'pop-up' in a div that is in a different layer?

    Seems like that might solve 'your problem'.

  12. #12
    Join Date
    Mar 2009
    Posts
    48
    scragar, thx I habd a look at the url u gave me and saw this:

    Code:
    <div class="name">getElements<wbr>ByTagName()</div>
    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

  13. #13
    Join Date
    Mar 2009
    Posts
    48
    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
    Last edited by dododidi; 03-06-2009 at 08:16 AM.

  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Easiest way is this, but you can get fancier with more CSS
    Hold the mouse cursor over the <div> box to see the effect.

    Code:
    <html>
    <head>
    <title>Title Attribute</title>
    </head>
    <body>
    <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')">
     Hover to display URL</div>
     
    <!-- alerts just used for testing purposes -->
    
     <p>Alternate method:
     <a href="#" onclick="alert('Would to go URL specified')"
     title="URL_information_to_display_as_a_very_long_entry">
     Hover to display URL</div>
     
    </body>
    </html>
    Could also use JS to dynamically change the display if necessary.
    Or use in an anchor link to go to URL displayed

  15. #15
    Join Date
    Mar 2009
    Posts
    48
    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
    this could be interresting, do you know where I could see some examples?
    Last edited by dododidi; 03-06-2009 at 10:51 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles