Real-time CSS editing with jQuery - javascript

Is there a plugin for jQuery or generally a method to have a textarea containing CSS code of the currently open web page which will be automatically updated during edit (without page reload)?

It's not exactly a general solution you're asking for, so just throwing this out there in case it's what you're ultimately after. If your goal is to edit and play with your styles there's Firebug, or Chrome's built-in developer tools.
The JavaScript version is Firebug Lite.

Thank you guys – most of all thanks to takeshin (who posted a comment to my original question).
takeshin's comment helped me quite a bit: With jQuery, I inserted the edited CSS code from a code highlighter called Codemirror into the head of the page. It's as simple as that. :)

There are now several services out there. I personally use codr.io. For not-quite real-time I use jsfiddle.net.

Related

Modifying Form Elements in CKEditor

I apologize in advance for the generality of the question. There is a surprising lack of documentation or discussion about this. If someone can point me to some source on this topic it would be much appreciated.
I'm trying to create a CMS page where users can edit custom forms. I'm using CKEditor in a pretty simple HTML/JavaScript setup like the demo on their website http://ckeditor.com/demo#full
My problem is this - Form elements can be resized (and drag-and-dropped) in IE but not in Chrome or FireFox.
If anyone has any information on editing form elements in CKEditor please let me know about it.
Thanks
It's not related to CKEditor but to contenteditable in general, which, quite frankly, is not consistent in terms of implementation because it lacks standarisation. There's nothing you can do about it unless you implement that feature from scratch, which is not a good idea really, especially because I'm not quite sure that default behavior can be disabled.
The form elements resizing feature may be supported by the browser (e.g. IE) not by javascript code. So it's hard to make the feature available in Chrome or FireFox.

Filter Builder in Javascript

Anyone knows a javascript alternative to something like:
http://demos.devexpress.com/ASPxGridViewDemos/Filtering/FilterBuilder.aspx
-> click on the condition in the footer of the grid to see the filter
Can be a jquery plugin, jqGrid plugin or anything.
Any suggestion appreciated, thanks.
There is an open source project in Google Code, which meets your requirement. Checkout the demo here:
http://expbuilder.googlecode.com/hg/src/cb/condition-builder.html
Edit: Google Code is no longer active but if you're really interested in trying this old answer, you can download the source code here: https://code.google.com/archive/p/expbuilder/source/default/source
I checked Paramesh solution and found it good enough for me.
However while integrating with project, I found js is rather lacking more modern jQuery features, as well as it can be simplified. So I did.
My alternative solution:
https://github.com/Drachenfels/sql-like-query-builder-for-js
With demo:
https://dl.dropboxusercontent.com/u/196245/condition-builder/condition-builder.html
Maybe someone will find it useful some day.
Feel free to copy/paste/change/suggest fixes/suggest features. ;)
DevExtreme recently released js Filter Builder widget, and it works in different approaches and jQuery also supported. You can see Filter Builder Demo

What is the code behind this javascript?

I'm trying to find out how they were able to create this site. http://www.cpeople.ru, i am trying to build my portfolio to look something like it. Particularly, I want the slider effect of the menu. Please help me out. Thanks. :)
Look at the source code, it's quite open. They're using jQuery with the jCarousel and Mousewheel plugins. On top they have two custom scripts called f.js and portfolio.js, which are plainly readable as is.
Look into free JavaScript frameworks, particularly jQuery UI. jQuery can do plenty of special effects, and it's quite easy to use.
If you look at the source of the linked webpage, you can see it uses jQuery and two jQuery plugins, jCarousel and mousewheel.
Be sure not to copy swathes of code from existing websites (unless it is expressly permitted, as is the case with jQuery), as that would be copyright infringement.
Try chrome sniffer if you use google chrome.

firefox plugin inorder to get the data from textbox

my problem is that, i what to develop a firefox plugin that extract data from the textbox and it has to be stored in some temporary memory.
i didn't have any idea about plugin's So please give the solution in a detailed manner
thank u.......!
Try reading the extension documentation, and then asking specific questions about things you still don't understand. It sounds like you are asking someone to write the whole extension for you, which isn't really the purpose of SO.
You could also look for open-source extensions that interact with text fields (like one of the ones that allows editing a text field in an external editor) and see how they work.
Have you seen the "It's all text" plugin? It allows you to edit a textarea in your editor of choice. After saving, the textarea is updated. I'm sure there's some code in that plugin that you could use.
Also, what you're describing sounds really simple. Are you sure a plugin is the right solution? Maybe a Greasemonkey script would be easier.

PopupWindow in jQuery

I am in need of a popupwindow with the option of a radio button. I have tested with Impromtu. Is any easy made Popupwindow plugin available?
My plugin should work in Internet Explorer, Mozilla and Google Chrome. What would some sample code be?
jqModal is great and easy-to-use for building Modal Popups and the like.
If you want a tutorial on how to build one yourself without jQuery, check out this tutorial.
Check out Thickbox! You can use a div or so on your page as content (see inline content demo).
Here's a list of lightbox like plugins depending on your need:
http://www.fortysomething.ca/mt/etc/archives/006978.php
If you're not absolutely bent on using jQuery, there is another library available that uses the Prototype library that is rather handy. The popup windows are very easy to implement, and the modal dialog boxes are even easier.
On a side note, I have used thickbox before and was rather impressed, but the URL parsing structure that it uses were kind of limiting me for what I needed to do (I was using a ComponentArt object that didn't use anchors).
Anyway, definitely check out this tool. It's probably more than you need, but who knows maybe you'll get inspired to find other uses for it. It's a pretty fun tool:
http://prototype-window.xilinus.com/documentation.html
FaceBox is another option to check out.

Categories

Resources