1

When someone opens the page a <div> gets full width (1200px+). If I reload the page, the width is changed to the right one (550px). The browsers have their cache cleared, so this isn't a cache issue.

First visit: first visit

After refresh: After refresh

This is a "custom HTML code" module in a Joomla 2.5 site. This is the code of divs that have their widths swapped:

<div class="art-nostyle">
<div class="custom">
<div id="script_nn_tabs54bfa417561de" class="script_nn_tabs" style="display:none;"></div>
<div id="nn_tabs_container_1____685___" class="nn_tabs_container outline_handles outline_content align_left nn_tabs_container_1_">
<div class="nn_tabs_nav" style="display: block;"></div>

At first sight I thought that the div id="nn_tabs_container_1____685___" was the problem, so I added this jQuery script at the end of the module :

var j = jQuery.noConflict();
j(document).ready(function () {
 j("div[id^='nn_tabs_content_1____']" ).css("width","550px");
});

After it failed to fix it, I noticed that the problem was at the <div class="art-nostyle">. That div has no style at all! I can't use the above script for the art-nostyle div because it is added before every single module in the site. Could someone explain how it is possible when this probably isn't a cache issue - an element getting fixed width after a page refresh? I tried it on 5 different PCs that never visited the url before.

P.S. I can't recreate the problem in JSFiddle: that's why I didn't post a fiddle link.

Edit: Link of the site if someone want to check with his own eyes. Its the in middle of the index. Edit2: I noticed that if i disable cookies the div wont change width after refresh. It will keep the full width.

Maximillian Laumeister
  • 18,162
  • 7
  • 50
  • 70
IseNgaRt
  • 571
  • 3
  • 20
  • sorry I misread your questions. but can you tell what change in the output css? from the 1st and 2nd refresh. – aahhaa Jan 21 '15 at 14:34
  • the width of
    from 1200px to 550px after refresh.
     – IseNgaRt Jan 21 '15 at 14:35
  • Which div is supposedly having its width changed after page refresh? Is it `.art-nostyle` or `#nn_tabs_content_1____`? Can you post a little more HTML? – alex Jan 21 '15 at 14:38
  • `.art-nostyle` is changing . Im sure it wouldnt help if i posted more code, as it would be even more complex and the rest elements have the right dimensions. – IseNgaRt Jan 21 '15 at 14:44
  • I think the right way to find out a solution for this one , is to find an explanation on how could someone recreate a situation like this. – IseNgaRt Jan 21 '15 at 14:46
  • the only thing i can think of, is to check your @media query, some time the window is too close to the breakpoint. why don't you change your browser size, and try it again see if it happen. – aahhaa Jan 21 '15 at 14:59
  • I changed the size but nothing changed. I tested it on 5 different PCs and every single browser so i couldnt miss it if it was a browser size issue. – IseNgaRt Jan 21 '15 at 15:02
  • 1
    I see the link, i think i would start by commenting out each .js file see which one is the issue, maybe it could be one is not loaded in `.ready()`? – aahhaa Jan 21 '15 at 15:06
  • since the width of the table is declared inline, it should be a .js issue. – aahhaa Jan 21 '15 at 15:09
  • im gonna check it tommorow as soon as i go to work and i will keep you informed on my findings – IseNgaRt Jan 21 '15 at 16:39
  • I used a lame temporary solution. I check if the cookies are set, that means that its the first time someone opens the site and width would be full and if not i refresh the page, so the cookies are getting set and the div gets the right width – IseNgaRt Jan 22 '15 at 12:57

2 Answers2

0

If you're using jQuery, maybe you could remove the ".art-nostyle" class that may be inheriting weird styles from Joomla. You could give the one <div class="art-nostyle"> a unique ID (e.g. id="navigationLinks"), and then use this:

$(function() {
    $("#navigationLinks").removeClass("art-nostyle");
    $("#navigationLinks").css("width","550px");
});

You could also check to see if there's any other Javascript that references this div, because it seems weird that the problematic div would inherit the strange behavior just from HTML/CSS.

alex
  • 4,689
  • 8
  • 43
  • 83
  • That was a really clever idea. Altough even if i removed the class, now i have a `
    ` with 1200px width on first visit and a `
    ` with 550 px width after refresh.
     – IseNgaRt Jan 21 '15 at 14:48
  • I updated my answer to reflect that you want the div to have the `width:550px` style instead of `width:1200px` regardless of how many times the user has refreshed the browser. Please let me know if this works for you. – alex Jan 21 '15 at 14:53
  • That didnt work also. I added the link of the site so you could see with your own what is happening. – IseNgaRt Jan 21 '15 at 14:59
0

I had the same issue. However, I have found the answer. Use $(window).load() out instead of $(document).ready().

See also: window.onload vs $(document).ready()

Swordfish
  • 1
  • 3
  • 17
  • 42
Tomasz
  • 111
  • 1
  • 4