I came across a defualt class called 'x-btn-over' on Extjs which is triggered on a mouse hover. I wanted to ask what the default properties of this class is? Also where can I find all the list of these built-in classes. The docs doesn't seem to cover these properties. Thanks
These css classes are generated when the application is built. It's not documented because it is not recommended to use them for styling ExtJS apps (though you can guess them by using an inspector tool like "Inspect Element" in Chrome dev tools). Although nothing would stop you to use these css classes in scss files and manually created stylesheets, and personally I use it sometimes when I want to do a quick and dirty solution, it should be avoided because chances are these values could be changed or removed in a new version of the framework.
The ExtJS framework has its own theming system.
The scss variables are usually documented in the "Theme Variables" section of a component. For example: Button theme variables
To find "over" related scss variables filter the properties with "over" and scroll down to the "Theme variable" section:
Firefox add-on. Facing some padding problems for some XUL elements in mac os (windows, linux are okay). I wish to know if there are any css tricks to identify the OS platform and apply a style to an element only for that OS ?
From a search, some of the possible options I found are :
Create a separate stylesheet file for the OS and modify chrome.manifest to point to that.
Use some external js library and use css selectors.
Identify platform from the add-on code, and load and register a second style sheet using the style sheet service
First option requires me to duplicate everything in stylesheets. Second one brings in dependency on other libraries. Third option might work, but I want to know if there are any simpler, elegant solutions ?
Thank you!
Those three options are pretty much it. For the first option you should put all of the common css in to one css file, and load that on all platforms.
What is the best way to choose the stylesheet that will be shown depending on the useragent?
Example, i want to show a css style for Android and a different one for IPhone.
Is it possible with css only?
Can i use something like media queries?
Thanks in advance
With Internet Explorer you can use conditional comments (http://msdn.microsoft.com/en-us/library/ms537512.aspx) to include stylesheets in a specific browser. This technique does not work in other browsers, and I believe it does not work in the latest version of Internet Explorer.
To my knowledge, the only way to accomplish this is with Javascript. The simplest method is to add a class to the HTML tag of the page (i.e. ".android" or ".iphone") with Javascript based on the user agent string. In the CSS simply reference .android or .iphone in your stylesheet to specifically target one or the other.
However, the best approach is to avoid doing specific browser detection whenever possible. Feature detection is the preferred approach (http://www.joezimjs.com/javascript/feature-detection-vs-browser-detection/). This is an exception as your intentions are to have a different theme based on the device.
See the isMobile Javascript library (https://github.com/kaimallea/isMobile) to easily detect an Apple or Android device. As long as the stylesheet isn't huge for each theme, I would recommend merging the Android and Apple stylesheets into one. Than use isMobile library with a little custom Javascript to add the necessary CSS class to the HTML tag.
How can I simply get in this little popup (code completion) all possible methods/functions given when I type window.(blablabla).
Because if I type window. there is no "event" method for example.
In NuSphere there are all methods been listed.
Please differentiate between JavaScript and DOM code assist. There are many questions/answers here about this but it's ambiguous which of these two they refer to. None, I've seen, particularly claims to have found a solution for DOM and most mentions Aptana as standalone IDE or Eclipse plugin for solution.
For reasons outside the scope of this question I use Eclipse Indigo (3.7.2) and got this working w/o Aptana. This solution probably depends on the JavaScript Development Tools plugin.
First in the Navigator pane right click the project and hover the Configure option. Select Convert to JavaScript project or Add JavaScript Support.
Open project properties and a JavaScript item should appear in the left hand side list of configuration options. Expand and select Include Path. In the Libraries tab on the right you will see ECMA Script and ECMA 3 Browser Support. Switch to the Global Supertype tab and tick the ECAM 3 Browser Support checkbox. Restart Eclipse.
--
However in my case this last option didn't seem to work (when selected 'window' as global supertype, below the list got 'Window() null') and window. didn't bring results but document. and all other JS globals did. (So I could say for e.g. var w = document.defaultVeiw; and w. did bring up desired list.)
I've created a page with CSS. Now I must change from my editor to my browser and refresh the full page, just to have a look at every little change. But I don't want to refresh the page, because I have some animations.
So is there anything which I can use that my site updates automatically after a CSS update?
Maybe with JavaScript, jQuery, Ajax or something?
Here you are: http://cssrefresh.frebsite.nl/
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
Just insert the javascript file and it works!
But note: It only works when you have the files on a server!
Edit: LiveStyle
If you develop with Sublime Text and Google Chrome or Apple Safari, then you should use Emmet LiveStyle. This is a more powerful Live CSS-Reloader.
Now I use it instead of CSS Refresh.
If you want more information about this awesome plugin, please read the Post by Smashing Magazine
With jQuery you can create a function that reloads external stylesheets.
/**
* Forces a reload of all stylesheets by appending a unique query string
* to each stylesheet URL.
*/
function reloadStylesheets() {
var queryString = '?reload=' + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
Have a look at http://livereload.com/.
It works as a browser plugin for OS X and windows. I like it because I do not have to embed additional javascript which I could accidentally commit in my versioning control.
I find browser plugins/extensions to be the easiest solution. They don't require any code changes to your individual sites. And they can be used for any site on the web — which is useful if I modify something in-memory real quick to hide a toolbar or fix a bug temporarily; once finished mucking with it, I can press a key and all the CSS is back to normal.
Once installed, (most) CSS reloaded plugins/extensions don't reload the CSS automatically. But usually work with something as simple as a toolbar button, a context menu item, and/or a simple key press to reload the CSS. I find this method is less error prone anyway, and is much less complicated then some of the automated solutions out there.
Some examples (feel free to suggest some others):
Chrome:
tin.cr (includes automatic reload, and can persist in-browser changes to source files)
CSS Refresh
Firefox:
CSS Reloaded
CSS Refresh
Here is my little Project. Please give it a try
CSS Auto reload on Github
Yes you can manipulate the CSS via jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
You could also use the toggleClass method.
http://api.jquery.com/toggleClass/
http://jqueryui.com/demos/switchClass/
Firebug for FireFox.
It's a plugin in an attached/separate window. Changes to HTML/CSS appear instantly, elements are highlighted.
Advantage over JS hacks is that you can't copy this accidentally to your production instance.
You are looking for Live Reload:
It's available as a browser extension and easy to implement
http://livereload.com/
The new open-source code editor, brackets, has a Live Development feature where you can edit CSS in the editor and it will immediately be reflected in the chrome browser. It currently only works for CSS editing, but HTML editing is coming soon!
Firebug for Firefox is my prefered method:
https://addons.mozilla.org/de/firefox/addon/firebug/
You can edit HTML and CSS on the fly, quickly deactivate CSS rules (without deleting them), add or remove HTML and so on. If you wan't to tweak your design this is your choice. You can even save changes to a local copy, but I hardly ever use that feature.
If you are using Firefox then you can install Web Developer Toolbar 1.2.2 from Add-on of Firefox which has option of Reload Linked Stylesheets.
Try using CSS Brush, a chrome plugin for creating CSS live. You needn't have to write all CSS in a text editor, come back to browser and reload it, rather write the CSS live as if you were doing it in a text editor. You will have more features than a text editor here like context-sensitive-menu, use duplicate properties, select complete CSS path or a filtered path of a element directly from the page.
This might help -> chaicode
Its a live CSS, Javascript and HTML editor that is opensource and a wip.
github