We Keep Coding

dynamically add sylesheet to head using javascript

I need to have the old "resize fonts" option at the top of the site I'm building - one link that is the default size, one that makes fonts a size bigger, and one that makes them two sizes bigger. it only needs to affect some nav and body copy, so I'd like to simply make 2 extra stylesheets to just style those elements, and upon clicking one of the links, load an additional stylesheet into the header. when you click the "default" link, it will go back to the original size (with no additional stylesheets loaded).
Is there a way to do this in javascript? This is a Wordpress site.
Alternately, I could use js to add a tag to the body and target the elements that way.
What is the best way to do this?

You should just change the class of the elements. That will change their css to whatever is specified by that class in the stylesheet. Your first option is more complicated than it needs to be. If you use JQuery you can literally make this one line of code.
$("span#applicableId").each(function(){
$(this).class("theOtherClass");
});

You can dynamically add a stylesheet on the fly by using something like below:
function loadNewStyleSheet() {
var style = document.createElement('style');
style.type = 'text/css';
style.src = 'http://path/to/cssfile'
document.body.appendChild(style);
}

I would do this as an include statement in in a php tag. Then just have one php file you include on the top of each page.
php inlude info:
http://php.net/manual/en/function.include.php
then from there I bet there is some code out there you could reuse.
For example maybe this could be of some help? it is a php script that will ajust the css styling of the page and not interfer with other parts.
http://www.phpclasses.org/package/1296-PHP-Resizes-text-on-a-page-using-styles-and-sessions-.html

I guess that it is not possible to add it dynamically to head tag. Of course, you can do that, but this stylesheet won't be loaded. Maybe you should try to get it via ajax and append to a special script tag in your site. If user will choose another option, then you will load another content, clear this script tag and append new content there.

better ways to load views using jquery

OK. Let me try to explain my problem. I have three pages index, profile, contact and three links or navigation buttons in the header. When user clicks on profile button profile.html is loaded dynamically from the server using jquery load() method and place it in the div called container. Same goes for all pages. Now I also load all of my jquery plugins including jquery shadow plugin, script.js and jquery library on the index page only once. Now what I have is that on profile page I have a div tag on which I want to apply a jquery shadow plugin in my script.js which is loaded in index page. But it does not work this way(no idea why). What I have to do to make it work is to add a script tag in profile page and inside this I apply this shadow plugin to div tag which is inside profile page.
So this is what I want to ask is, Is there a better way to load pages through ajax using jquery so that whatever javascript code I am applying to all of the pages should be applied to all pages?
Thanks in advance

Preventing CSS of Jquery Dialog content from being applied to main window

In my web application, I have written a cross-domain ajax call which is fetching an HTML page from a different domain. This newly fetched page is being rendered in a jQuery dialog using the following code $('#previewDialog').html(response).dialog('open');
This renders the response properly in the dialog. However, the response (HTML page) also has some CSS styles in it. These styles (generally BODY, INPUT etc) are getting applied to my main window (parent page) and distorting the complete view of the page.
When the dialog with the HTML page opens, the view of the parent page is completely distorted because of the CSS used in the HTML page (response of AJAX call) which gets applied to all the components. And when I close the Dialog, the parent page gets back into shape.
Is there anyway, by which I can prevent the CSS of the HTML page which is being displayed in dialog, not get applied to my parent page?

Trivial answer: have everything from the page that you pull in be wrapped in a div with a class not used elsewhere. modify the .css for that page so that it only applies to elements within a div of that class.
Edit: If you cannot control the css of the origin page, things become somewhat more complicated. your problem, though, is that you're injecting the HTML (including the css link) directly into your page. Instead, try the following:
Grab the HTML for the other page. Place it into a div off to the side that you're not using for anything else using the html() command.
Go into that div using the jquery DOM commands. Grab the portion of the page inside of the troublesome links, and pull it over to the $('#previewDialog') location. Destroy the contents of the working space div. If there is javascript or css that you need to preserve, have it entered (modified, if necessary - like with div wrappers) elsewhere in the page.
Now, this only works if the pages that you're being fed don't have their css or javascript changing with any frequency.
An alternate version of the same thing - while you have it as a response (a string format) use string manipulation tools to excise the css reference, rather than using DOM commands to pull what you need out of it.
More complicated/difficult version of the same thing (though somewhat more robust): Use string commands to slice out the css references (as with the alternate version) and then make another call using that css reference to acquire the .css file. Use string commands on the .css file to add in the div-wrapper limits as initially described, then insert it elsewhere on the page as an internal style sheet.

Creating a Simple Layout/Style Editor

I am trying to create a layout/style editor similar to what is available on blogger. I noticed that they use an iframe, but the iframe has to refresh everytime you make a change. I am looking to do something more responsive. For example, if i change the width of a div I would like to see this change happening while I move the slider.
I was wondering if something like this is possible with the iframe setup using jquery/etc to modify the source of what is in the iframe, or is it better to not use an iframe?
The iframe would be used to load an existing webpage that is online.

The good thing with an iframe is that is not interfeering the rest of the page (you can use diffrent CSS, scripts, variable names and so on). TinyMCE and other editors uses iframe for its content. And yes its possible to access the iframe directly from jQuery:
See this link, http://jsbin.com/ajatix/edit#javascript,html,live

Widget CSS being interfered with by external page CSS

Just created a javascript widget that injects the content on the 3rd party site using DOM. I include a css file with the widget. However, I keep running into instances where the external pages css will interfere with the widget css and add something weird like a background image or border too my widget elements that I don't have defined in my css. Any easy way to go around this? I've already added
!important
to all the css rules. Thanks!!

As in my opinion, I, with no doubt, say that in the external css, not the widget css, have added something that would add the border or background to ALL divs. You might want to check that out.