In the homepage I want a “div” to appear and also I want to disappear “div” on all other pages. I attempted to do with jquery remove and hide div id. This does not complete my job. Can anybody tell me how to do this?

You want to use Jquery to add a class to the element you wish to hide, and remove the class for the element you want to display.

 

In your stylesheet should set the display property for the class to be none: This will have the desired effect

 

HTML

<div id="div1"> <!-- div to hide on event -->

Content

</div>

 

<div id="div2" class="hide"> <!-- div to display on event-->

Content

</div>

 

CSS

[dot] hide {

display:none;

}

 

JQuery

 

$[ EVENT ], function() {

$('#div1') [dot ] addClass('hide');

$('#div2') [dot] removeClass('hide');

};

Hi.

It's quite easy to do even without jquery. I've recently posted a video tutorial covering how to show and hide content with raw JavaScript.

The video can be found here

http://www.webdesignerforum.co.uk/topic/67771-video-tutorials-learn-javascript/

 

EDIT: It's the first video in the series

Edited April 17, 201313 yr by Nillervision

That's a better method Nillervision - I all too often jump to JQuery for a simple task when it could be solved with raw Js. Defiantly something worth considering if we are trying to keep page load down.

That's a better method Nillervision - I all too often jump to JQuery for a simple task when it could be solved with raw Js. Defiantly something worth considering if we are trying to keep page load down.

Thanks Robert. It all depends I guess. If you've allready got jquery running for some more advanced stuff you might as well be using it for simpler tasks. You also made a good point in your example by letting the code change class rather than changing display properties. That will also enhance the performance.

Edited April 17, 201313 yr by Nillervision

Thanks Robert. It all depends I guess. If you've allready got jquery running for some more advanced stuff you might as well be using it for simpler tasks. You also made a good point in your example by letting the code change class rather than changing display properties. That will also enhance the performance.

I tend to go by the method of CSS for anything visual and Javascript to add things to the DOM or other stuff such as validation, I didn't know that performance would be increased, just assumed it was good coding practice going off the developers I've been following. Thanks for the useful nugget of info!

I’ve got the info from a seminar by Nicholas Zakas from youtube. I can’t seem to find the link but he has done a lot of JS performance test in various browsers. One of his conclusions was that assigning classes to objects was faster than changing properties. A few other optimization tricks could be:

-Avoid using to many global variables – nest your vars in the functions that needs them. The further up the scope js has to look for data the longer it takes.

-When you need to access a DOM element several times store in in a variable so js only have to look for the element once.

-If you got large scripts remove all all comments and formatting (linebreaks and white space) and compress the files

@OP Sorry for changing the subject

I've heard minify is a great way to compress files - js css and I believe html also? I've also read that you should G-Zip the documents too although I've not yet done any of those myself yet - It's clearly essential on larger projects with high traffic.