Develop Reference

Can I link an external javascript within my CSS stylesheet?

I'm trying to set something up where my background would scale depending on the user's browser width, but I'm tied to a background set in the external stylesheet under a certain element. I can change the background, I can modify its attributes, but I cannot replace it with a html background.
I've been researching solutions for this and most of them don't seem to work. I even tried linking (in the html) an external JS that detects screen resolution and chooses a bg file accordingly, which is exactly what I need, only the browser doesn't detect it at all, whether I nest the script within the html or just link it. So I'm looking for a way to link it under the bg setting in CSS. From what I read, this is "possible but risky", with no real instructions on how it's done.
I'm willing to try it despite the risk, but I'm also open to alternative suggestions. All I need is to be able to set two different image files (same image, just scaled differently) for small phones vs everything else. I've already looked at srcset but that requires embedding in html, so it's no go for me, although I was excited about it. I don't mind actually editing the images myself.

I'm not sure what you mean by link javascript in bg settings in the css.
But you should be able to set different backgrounds using media queries within CSS. Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

It sounds as though you're looking for media queries. You can set specific CSS based on media features.
See W3Schools for a description and examples on media queries.

How to Create a HTML animatation

If you look at the Google Docs landing page, as you scroll down, you can see that there are animations such as this computer's screen is animated:
I would like to do something similar. There are other solutions such as an animated SVG, a GIF or a video however I would like to understand how this solution is done.
I'm aware I could use Javascript to create something like this, however surely there must be a library I haven't come across which would automate this process?
Thanks.

In the particular example you bring up - I believe they are using a handful of .png images inside of carefully sized divs which are being powered by pure CSS animations - I concluded this by just looking through the inspect element tool which comes with Google Chrome's developer tools. To see for yourself, just right click on the page and select 'inspect element'.

jquery iframe resize only works in firefox

I have been desperately trying to find a way to resize my iframe according to its content. I have a working script I found here but chrome still won't work. The frame does become bigger but it won't become smaller. I've tried so many codes but to no avail. (iframes are not my choice btw) I'm no expert in js and jquery so please guide me if you can. thanks

In Chrome, the body height is defined by the height of its container, there is a circular definition if you define the size of the container by the size of the iframe body. The solution that I've found is to set the position of the iframe's body as absolute.
You can see a demo here: http://webapps.so/labs/iframe/page.html

similar to lightbox plugin that also fits (shrinks) the image to the screen

I tried with the various lightbox plugins for wordpress but they don't resize the image to fit the screen.. is there any that do?

You could try Fancybox. I use it on my own site and it definitely gets the job done.
http://wordpress.org/extend/plugins/fancybox-for-wordpress/

Resize images to be fullscreen with javascript?

Can you resize images to be fullscreen with javascript in the same way you can with flash?
Ive found this link but its for an entire plugin with slideshow, etc not just the feature I need for a more custom design:
http://buildinternet.com/project/supersized/
And this plugin seems to only with with background images:
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
Ideally id like to do this with jQuery.
Thanks

Here's an example of a basic implementation. It accounts for resizing of the window, but doesn't account for any focus point of the image and so the focus point could fall out of view for oddly-sized windows.
http://jsbin.com/okizi5
Edit: I forgot to point that that the width/height attributes on the image are necessary in this version for all browsers (notably Safari) to calculate the aspect ratio of the image. If your image is to be dynamic and the dimensions are not available then these could be calculated within the 'load' function bound to the window.

Yes. I don't see why you can't, really. You can use JavaScript, and its DOM interface, to modify the style properties of an image to resize an image. You don't even need a heavy library like jQuery; it's all native.

How about this:
$(window).resize(function() {
$('#myImgId').width($(window).width());
$('#myImgId').height($(window).height());
});
It will not maintain the aspect ratio...