2

Final product: Web page that is filled in by data on a word document which is fed into a recurring HTML structure.

Problem: When ran, the HTML elements are created, but the CSS classes are not applied until the window is resized.

Javascrip:

    for (i=0; i<=timeline_data.length; i++){
        var newParent = document.getElementById('wgt-timeline-bdy-wrap-id');
        var newItem = document.createElement('div');
        newParent.appendChild(newItem);
        newItem.setAttribute('class','wgt-timeline-bdy-item');

        var newText = document.createElement('p');
        newItem.appendChild(newText);
        newText.setAttribute('class','timeline-new-text');
        newText.id="timeline-" + timeline_data[i].id + "-text";

    }

CSS:

.wgt-timeline-bdy-item {
    display: inline-block;
    font-size: 20px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.timeline-new-text{
    font-size: 30px;
    position: relative;
    top:40px;
}

Nothing unexpected in the HTML, wgt-timeline-bdy-wrap-id is a div.

Thank you in advance for your help

Lucas Bullen
  • 87
  • 1
  • 8
  • Where exactly in your code is that `for` loop located? Can you post the entire script? – Harry Aug 08 '14 at 16:39
  • Are you putting the CSS in the body instead of the head? That may not be it but I have seen that happen before like that. – Jeff Clayton Aug 08 '14 at 16:40
  • Can you make a jsfiddle that demonstrates the problem? CSS should work just as well with dynamic content as static. – Barmar Aug 08 '14 at 16:46
  • In fact, that's one of the points of CSS. Many applications change the style of elements by dynamically changing their classes. – Barmar Aug 08 '14 at 16:46
  • Unless 'i' is defined elsewhere you may want to change 'i=0' to be 'var i=0'; After adding that the code ran fine for me. Is the css included in the file (link or style block)? And what browsers have you tried? – amethystdragon Aug 08 '14 at 16:46
  • I suspect the problem is that there's a typo somewhere, so the classes don't match. – Barmar Aug 08 '14 at 16:47
  • @Barmar The only reason I could think of without seeing the entire code is that the for loop is probably present within a `window.resize` function because OP says the classes get applied when resized. – Harry Aug 08 '14 at 16:47
  • For loop located in a function called onload of the body, CSS is located is a separate functioning .css file (other elements are working from it therefore I know thats not the problem) I shall go find out what jsfiddle is now. Thanks for the quick response – Lucas Bullen Aug 08 '14 at 16:49
  • there is no window.resize function – Lucas Bullen Aug 08 '14 at 16:49
  • there is no type because it would not have functioned once i resized the page – Lucas Bullen Aug 08 '14 at 16:50
  • 1
    @Harry But the loop is also where the new elements get created. If it were inside a particular event handler, the elements wouldn't show up at all until that event. – Barmar Aug 08 '14 at 18:06
  • @Barmar: Yes that is correct. – Harry Aug 08 '14 at 18:54

2 Answers2

0

try appending to the DOM as the last thing you do in the loop (i.e after you have set the class). Also, most places I've done this through element.className = 'xxx' rather than using the setAttribute() function; not sure that matters, though.

Paul
  • 35,689
  • 11
  • 93
  • 122
0

Try writing a jQuery function to apply the CSS styles once the for loop is done executing. Something like this:

for{...}
styleelements();

function styleelements(){
$(".wgt-timeline-bdy-item").css({...});
$(".timeline-new-text").css({...});
}
colinmcp
  • 446
  • 2
  • 5
  • 19
  • 1
    Why exactly is jQuery required for this case? – Harry Aug 08 '14 at 16:41
  • Well, you could use javascripts .style function, but I find jQuery to usually be faster and easier. – colinmcp Aug 08 '14 at 16:43
  • It's not; folks just like to use it b/c they don't have to know the browser specific stuff. – Paul Aug 08 '14 at 16:43
  • Having to copy all your CSS into your script is an onerous requirement. That means that every time they update the CSS file they'll have to make the same changes to the jQuery. There's no reason this should be necessary. – Barmar Aug 08 '14 at 16:45
  • @colinmcp: If the user was trying to do something complex then using a library which handles all possible browsers etc is understandable. But you don't really need jQuery to add/remove classes. – Harry Aug 08 '14 at 16:45
  • @Harry Fair, I didn't think of that. Maybe instead of applying the CSS directly after the for loop executes, you could load the stylesheet after the for loop executes? Something like [this](http://stackoverflow.com/questions/2126238/can-i-load-external-stylesheets-on-request) – colinmcp Aug 08 '14 at 16:47