Develop Reference

How to Change Form Field Width in Sharepoint?

I am new to coding and really new to javascript and have been left with the task of trying to maintain a SharePoint form that was created by someone else. I am not too familiar with SharePoint Designer or Javascript.
All I need to do is change the width of a form field in a SharePoint List. Here is the code I tried to come up with...pretty sure it's not even close.
$('select[id^="Metric_x0020_Name"')("<style>=width: 602px;");

Using jQuery
$('#Metric_x0020_Name').css('width', '602px');
Maybe try using CSS to adjust the styling? It would look like this
#Metric_x0020_Name{
width: 602px;
}
Put this after the SharePoint specific styling. You may need to increase the specificity of the CSS if this isn't overwriting what currently exists. In Google Chrome you can check to see what styling is used by right clicking the element and then inspect.

Dom element change notification

I am having the weirdest of problems. In chrome browser alone, one of my html divs get an additional inline css tag added to it. This tag is style="overflow:hidden", this was causing the layout to break and we quick found out this was the problem.
However there is no place in the codebase that we could search which lets us know how this tag is getting added. is there a way to debug this? I tried the chrome javascript debugger but it did not help me find the issue. In all other browsers the tag does not appear. In chrome it appends itself to a div element. We tried searching on the div element assuming that jquery/javascript is doing a late manipulation of the element but still cannot find where it is happening.
Is there a watch we can set on an element to see when it is changing or who is manipulating it?

As I said in the comment you can override the class controlin your css file.
.control{
overflow:auto !important;
}

Hmm! Obviously you could step through the javascript that is on your page.
To rule out javascript you could try disabling javascript totally. Or add an inline style with
overflow: auto!important
to the div element

Hard to help with the information provided but what you can do is add overflow: visible !important; to that .control. Check this out in the console and you will see this overrides the inline hidden style
JSFIDDLE

Anchor tag display full link issue

I found some really awesome link detection regex that works unbelievably great. It takes only the main part of a link and displays it as the body of the anchor tag and the whole link as the href. In example http://somesite.com/index.php?some=var will simply look like somesite.com. Which is just pure awesomeness, but then again it has its down side as well because someone might pass some variables that you might not necessarily want to send for some reason and I figured I need to display the whole url in the anchor body. Sadly I don't want to just give up on beautiful anchors and I decided I should display full link upon some event and thus came the trouble.
First I thought I should go for mouse hover (jquery's mouseenter) to display full link and then use mouseleave to make it beautiful again. Unfortunately that was unsuccessful due to short site names at the end of a line with a bunch of parameters. Example: If there is an anchor with body site.com and href http://site.com/some/params at the end of a line, after expanding it will go to the next line which would trigger the mouse leave and thus compressing it, which would by it self return the link to the original line and trigger the expand function creating an infinite loop.
Second idea was to have a right-click expand the link. Obviously the context menu on links that are to be expanded has to be disabled. Unfortunately, again, having the same link at the end of a line would cause a context menu to show up because after expanding the right click is also triggered at the blank space where the short link used to be.
I seem to have run out of ideas, does anyone have any?

Without breaking layout, you can use the native title property to display the full URL or, for something more customizable, a plugin such as jQuery UI's tooltip widget.
<a href="http://www.shorturl.com/?param=notSoShortUrl"
title="http://www.shorturl.com/?param=notSoShortUrl">shorturl.com</a>
Provided the title attribute is outputted in the initial markup, this solution works even with JS disabled. And if you feel like, jQuery UI tooltip may help customizing it for JS-enabled users.
If anyone is interested in how to patch the line-breaking issue described in the OP, here's my original solution to achieve non-line-breaking extensible links:
aaaaaaaaaaaaaaaaaa.com
$('a').hover(function(e) {
$(this).text(e.type == 'mouseenter' ? this.href : $(this).data('shorturl'));
}).each(function() {
$(this).css({
width: this.offsetWidth,
whiteSpace: 'nowrap',
display: 'inline-block'
}).data('shorturl', $(this).text());
});
Demo
Though, this is mostly a CSS hack and link text may leak outside of the container (and obviously, won't work if the container has overflow:hidden), so it is not very good for layout purposes. Better stick with title or the tooltip plugin.

Using multiple 'click' on a website

I'm using smoothscroll.js on my website, that uses the 'click' function.
It works great, problem is - it translates ALL links to toggle with the smooth scroll. This is problematic as I'm implemented small jQuery tabbed areas within a few of the vertical viewports.
Is there another function that acts similar to click that I can use interchangeably?
This is the smoothscroll.js I'm loading on my site

Why not use my smoothScroll plugin? It allows you to define in which elements the links should scroll smoothly:
$('#smooth').smoothScroll(); // will only affect links in #smooth
You can also define the animation speed:
$('#smooth').smoothScroll(400); // scrolling takes 400ms
Here’s a demo: http://mathiasbynens.be/demo/smooth-scrolling

I see in your question that you've added the JQuery tag. The script you use doesn't seem to use JQuery, I've not read each line, but it looks pure JavaScript.
In the javascript file, replace the line:
var allLinks = document.getElementsByTagName('a');
By this JQuery selector:
var allLinks = $('a.fooClass');
And add class="fooClass" to all the a tag you want to activate smooth scroll.
BTW: I found unacceptable that you have to edit the script to do so. If I was you I would look for a more solid JQuery plugin.
You might be interested by theses links:
http://www.sycha.com/jquery-smooth-scrolling-internal-anchor-links
http://www.devirtuoso.com/2011/11/smooth-scrolling-in-jquery/

If you don't want all of the links in your page to have this behavior, then you need to modify and narrow down your selector. I'm guessing you're doing something like:
$('a').click(...
Instead, use a CSS class, or if it's only one item then use an id. Say you assign a CSS class to the tabbed areas links, then you'd do something like:
$('a.YourNewClass').click(...
I hope I am understanding your question correctly. If not, please let me know.

Is there a cross-browser way I can fire an event after printing using javascript?

I need to be able to print a jQuery UI dialog. My solution thus far has led me to create a "Print" button that creates a new <iframe> filled with the contents of the dialog and then prints it.
I'd like to be able to remove the <iframe> as soon as the printing has completed. Is there any way I can do this? I know there is an onAfterPrint event in IE, but I need this to work in all browsers.
Edit: I appreciate the alternative suggestions, however I ran into all kinds of problems trying to use CSS rules to print jQuery dialogs. On pages with a lot of content and multiple dialogs, the structure of the overlay and other elements would cause extra blank pages to be printed. I've tried many combinations of { visibility: hidden; } and { display: none; } but couldn't find a solution.

Have you considered making a special stylesheet with the media="print" attribute? Make this stylesheet hide everything else on the page that you don't want to print and reset any formatting as needed. (For example, reset the positioning on the box from absolute to static)