Link to home
Create AccountLog in
Avatar of error77
error77

asked on

JQuery Live Preview example?

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
Avatar of 3xtr3m3d
3xtr3m3d

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....
Avatar of error77

ASKER

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
Avatar of error77

ASKER

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?
>>  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.
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account