1

I have script that performs from DOM manipulation to change the way a div looks. The way the application is, when the page loads, the div is rendered in its original state, the function manipulates the DIV. The problem is it renders the original div before rendering the changed div.

I tried:

//Make div invisible

//Call function to change the DIV

//Make div visible

This does not work

Improve this question
3
  • Are you looking to have the DIV change immediately when your page loads in the browser, or do you not want to see the changes happening incrementally? Commented Feb 18, 2009 at 23:11
  • I dont want to see the changes happen incrementally Commented Feb 18, 2009 at 23:18
  • what kind of changes are we talking about? If it's simple enough don't do it with JS at all, get the JS to change the element class instead - the effect will be instantaneous. Commented Feb 19, 2009 at 8:33

4 Answers 4

Reset to default
1

Are you using the visibility attribute?

<div id="divy" style="display:none;">Wee</div>

or set the style in a .css file

$(document).ready(function(){
   $("#divy").css("color", "#424242");
   $("#divy").show();
});
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

as already mentioned above in comments, never hide content by default
says who? If an html objects default state is hidden then this is necessary. THIS comment item is hidden by default!
@Hunter - That's because it relies on AJAX to retrieve comments and therefore is not enabled if JavaScript is disabled and makes logical sense in this scenario to hide by default. I did state in my comment that under certain circumstances it is bad practice
but my original comment with that in has been deleted
I didn't read anywhere in Bob Smith's post that he was considering browsers without javascript enabled. I just started using this StackOverflow and I didn't want to start making "what-if" statements. This was a jQuery question and I gave a jQuery answer. noscript could include another .css to fix.
|
0 
$('div').hide(function(){
 $(this).css('font-size', '5em');
 $(this).find('h1').css('color','red');
 $(this).show();
})

This MUST work ;)

Improve this answer

4 Comments

Can't you chain that? $(this).css('font-size', '5em').find('h1').css('color', 'red').show();
@Solberg: if you chain it like that the show() would only be on the h1, not the entire div.
i can chain, but i wanted to show how to do many stuff there :) Can be font size or can be content or anything else, more important is how is done ;)
@paolo: $(this).css('font-size', '5em').find('h1').css('color', 'red').end().show(); will do the one-line trick :)
0

If you don't want it showing right away, you should just hide it with CSS (rather than JS). Then you run your change function and display it.

Improve this answer

Comments

0

Are you just trying to keep the div visible while preventing the changes from being seen? You could probably make it happen by cloning the div, making your changes on the cloned div, then replacing the original div with the cloned, changed div. Something like:

var changed_cloned_div = make_changes( $('#original_div').clone() );
$('#original_div').replaceWith( changed_cloned_div );
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.