JQuery Live Preview example?

error77
error77 used Ask the Experts™
on
Hi all,

I am looking for an example on how to change some html code and have a live preview or on refresh - preview show up but cannot find anything so I'm asking here.

So for example ... on the left side of the page I have the controls or something that will trigger the html code change and on the right div ..is the preview area that reflects / shows the changes ... Can anyone provide a basic example or direct me to somewhere where I can get some example please?

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Hi

You mean update a preview area with a click of a button or something?

you can set content of a div with $('#your div id').html('your content');

http://jsbin.com/adubuw

sorry if this not what you were expect....

Author

Commented:
Well, it's kind of but I'm looking for something a bit different.

Suppose you have 2 blocks ... you do your design on the left bock and you can see how it's going on the right (preview) area.

Suppose I have a page o the left and I change the css color to blue ... then I refresh and it shows on the preview...

I don't mind if the page needs to save first and then the preview is loaded via iframe ...

I just need a way to do this...

Hope this helps

THanks

Author

Commented:
OK, what about a different approach.

We have a html page.

On the left are buttons that when press save changes ....

On the right is an iframe which reads from a page that is reloaded with new changes.

Is that more possible?

Commented:
>>  We have a html page.

>>  On the left are buttons that when press save changes ....

>>  On the right is an iframe which reads from a page that is reloaded with new changes.

>>  Is that more possible?

Yes, this is possible by using PHP.  Open the page showing the content, use:

http://php.net/manual/en/function.file-get-contents.php

When they click save on that page, use this:

http://php.net/manual/en/function.fwrite.php

Then, simply display that page in the iFrame.  This way, you could also create several versions of a specific page, if you wanted.
Multitechnician
Top Expert 2014
Commented:
for me you don't need a preview, just need to apply your change to a duplicated zone if needed WITHOUT applying your change to the server side
So your button have no effect of the original but directly on the cloned/duplicated content/zone
Once the user like the preview he submit the change/form to the server to record

How to do a clone or duplicate? With server side, should be easy if your put the content in a string before echo or with client side $("#clone").html( $("#original").html() );

Additionaly check this : http://haacked.com/archive/2009/12/15/live-preview-jquery-plugin.aspx

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial