Develop Reference

How to make iron-data-table scroll document?

I understand that <iron-data-table> is based on <iron-list>, so I tried to set the attribute of the table's inner <iron-list> like this:
$('iron-list').removeAttr("on-scroll");
$('iron-list').attr("scroll-target","document");
I also tried to select the list this way document.querySelector('iron-list')
But none of them works, so what is the correct way to make it scroll the page instead of scrolling the table itself?

Try to use querySelector. Get the element by using querySelector and use setAttribute function. For example
this.querySelector('#id').setAttribute("scroll-target", 'document');
To remove attribute, use .removeAttribute()

How to use JavaScript to style the code in a pre element?

How is it possible to highlight the code inside a pre element? There is already questions about highlighting it, but the answers is all in JQuery. Is it possible to do it without the tags and it's id in JavaScript and not JQuery. I don't want the whole code block to be the same colour I want every tag-open and tag-close to be a colour, the tag value to be another colour and the attributes and it's value to be another colour.

document.getElementById("idofpre").style.color="#99999";

Have you tried this?
document.getElementById("the_id_of_pre_block").style.property="value";
The upper code will get the ID of the element and update the style. Second thing you can use TagName too:
document.getElementsByTagName("pre").style.property="value";
Or else you can use jQuery (the easier way but not your way) to style the content. Using this:
$(document).ready(function() {
$('pre').css('background-color', '#anyhexcode');
});
This will change the background-color of all the text placed inside the pre block. That's what you can do with JavaScript.
One more thing:
You are using onload=hightlight() but you are having a function as colorize() are you sure that's good? I think you need to change that!

Display CSS attribute

Is it possible to use JQuery or JavaScript to check the value of a CSS attribute? For example, suppose I have a div with id = mydiv. I want to check the value of the display attribute.
I try
$("#mydiv").display
But this does not work
Any tips?

Use the .css - $("#mydiv").css("display")

You're looking for jQuery's css method:
$(...).css('display')

Apart from css display attribute check via jQuery which is this:
$('selector').css('display')
the alternative is
$('selector').is(':visible')
This checks whether an element is actually visible and occupies space in DOM.

Using the .css()
Example: http://jsfiddle.net/5wyjW/
$("#mydiv").css("display");

You can do it : $("#mydiv").css("display")

How to reset an input type CSS

I have set a global CSS to text type inputs. Eg:
input[type=text] {
padding:10px;
width:100px;
//and many more
}
Now, I am using a plugin colorpicker on a particular div. This plugin draws some input elements for color hex inputs, and sets its own CSS properties.
.colorpicker input {
width:25px;
}
But the already set CSS properties interfere with the newly set CSS. Is there a way that I can reset these inputs and not let them use any of the previous CSS properties? I don't know what all properties are being set from behind, like border, may be border-shadow, padding, etc. I want to reset all of them and create a fresh input type. I am willing to do that by Javascript/jQuery if needed. Please help me out. Thanks!
EDIT: Suppose if something like $('.colorpicker input').resetCSS(); exists, that removes all the CSS properties from the input, it would be great! Exactly what I need.

If you don't have too many text inputs on your page, just use a class name instead of a global definition. Neater in the long run, IMO. That way, your input fields stay yours, other plugin's input fields stay with their respective classes.

depends on your code, but you could use the css3 :not selector.
div:not(.colorpicker) input[type=text]
of course this assumes you have all your inputs wrapped in divs.
http://jsfiddle.net/kudoslabs/aDJeT/

You can use .not() selector. Try this fiddle. As it's jquery selector it should support older browsers also. But in this case also, you need to edit your bootstrap css and create a class that contain styles you want to apply to all other text fields.

How to get original browser set input colors back after changing them with jQuery().css()?

Problem with jQuery:
After changing the border and background color of some input fields in a form that fail the validation i don't know how to get the previous, original colors back as i don't pre-style the inputs but use the browser settings instead. how to handle this?
thanks in advance,
clubnite

This will remove the color from the style element styles, causing the stylesheet to resume control.
$(sel).css('color', '')
Note that this will not restore the color to a value that was explicitly set before. To do that, you'd have to cache the prior values.

Set the value of your modified attributes to inherit

What you should be doing is not changing the CSS attributes, but adding a css class to the element. When the validation fails, remove that CSS class.

I would use a CSS class instead of setting individual properties with jQuery. That way, you can just add and remove the class to apply or remove the style. It's simpler, probably faster, and lets you keep all your style information together in one place. Adding a class also makes it easier to find all the fields that have errors with jQuery selector.
If, for whatever reason, you really want to use .css(), you can remove the properties by setting them to an empty string. For example, if you added a border, you would remove it with
$(selector).css("border", "");