CODEWITHSUNDEEP
javascripthtmlcss
John Kim
John Kim

Reputation: 43

Is their a way to add separate CSS and JS files for a particular part of web page

Is there any way to add separate CSS and Javascript files those work for only particular section of a page and don't affect any other part of the page?

I am attempting to add the following to my web page:

http://codecanyon.net/item/sliderjs-js-framework-for-slider-development/full_screen_preview/1617841

When I used it, the CSS and JS files affect my whole web page.

I don't want this to be happened. I want to add a slider without changing my site totally.

Is there any way to get it working without adding all of the slider's CSS and JS code to my webpage?

Upvotes: 1

Views: 174

Answers (3)

Siddharth Nagar
Siddharth Nagar

Reputation: 412

You can use iframes for this. Create a new page with your CSS and JS file included in it and call that page from iframe.

Upvotes: 0

James LeClair
James LeClair

Reputation: 1294

Its possible to do this using an iframe as a sort of sandbox. But it begs the question, what are you trying to "protect" the page from? If you have name conflicts, you're best fixing those rather than sandboxing the slider.

Upvotes: 1

Coomie
Coomie

Reputation: 4868

If you want to have JS and CSS specific to a certain part of a page, and you don't know JS and CSS, the only way is through iframes.

If you've made the CSS yourself, you can just add a prefix to apply it to on certain sections. Not like this:

p {color:pink}

instead, add a prefix, like this:

#menu p {color:pink}
#content p {color:black}

Your JS should only apply to elements based on id, unless your using something like jQuery. If you're using jQuery you can apply changes only to certain elements in the same way as CSS. eg.

Not like this:

jQuery('p').slider();

instead, add a prefix, like this:

jQuery('#content p').slider();

Upvotes: 0

Related Questions