Javascript/jquery : only update content inside div (not outside) - including html and css with live preview

Question

I'm not sure if this is possible, but basically I am making a live preview of html and css entered into textarea's and displaying it inside a div (#previewStyle). I am showing this via javascript/jquery using .keyup

$(function(){ 
$(".updatepreview").keyup(function(){
$.post( "<?php echo http() . $websitedomain .'/.../.../styles.php'; ?>", $("#styles_form").serialize(), function(result_data){ $("#previewStyle").html(result_data); /*  use result data here */ }  );
});

Here is the problem: When it loads the css, it updates everything on page (even outside of the div). Is there any way to limit this using jquery to JUST the div? I can go in and change all my id's and classes for everything outside of the div if necessary to make sure there is no conflict; however, wanted to check on here for a solution first. One textarea contains css, one contains html and it serializes them and loads them via the following:

<?php echo "
<html>
<head>
<style> ".$_POST['style']."</style>
</head>
<body>".$_POST['html']."</body>
</html>"; 
?>

Update:

The preview div does display correctly; however, the css inside preview div updates and overrides css outside of preview div. I'm trying to determine if there is a way to limit the css inside preview div to ONLY the preview div and not have it override my main stylesheet for the page around the preview div.

Use an iframe to keep everything separate from the main document. That's how jsfiddle does it, for example. — Barmar, Jan 18 '14 at 09:12
I will try that. I will post on here if it works/doesn't work correctly. — kdjernigan, Jan 18 '14 at 09:14
but is there any other way to do it with div's? Just curious. I'd prefer to use div's if possible over iframe. — kdjernigan, Jan 18 '14 at 09:15
You could change all the CSS selectors to begin with `#divid`, so the effects would be limited to that DIV. — Barmar, Jan 18 '14 at 09:16
I changed my div to `` to test it, but the above code isn't loading into the iframe? I've never done this with iframes...am I missing something? — kdjernigan, Jan 18 '14 at 09:21
http://stackoverflow.com/questions/16292253/jquery-loading-content-of-textarea-into-iframe — Barmar, Jan 18 '14 at 09:24
Can you post this as an answer (the iframe comment) and I can accept it. — kdjernigan, Jan 18 '14 at 10:38

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

Put the contents into an iframe so that it will be processed independently of the main document.

See JQuery Loading Content of textarea into IFrame for details on loading HTML and CSS into an iframe.

edited May 23 '17 at 12:20

Community

1
1

answered Jan 18 '14 at 10:45

Barmar

741,623
53
500
612

Thanks. I ended up switching to iframes; however, now facing resizing iframe. Got it resizing bigger, but not smaller. If you know anything about that, can you see this question: http://stackoverflow.com/questions/21202935/javascript-jquery-auto-adjust-height-of-iframe-how-to-make-iframe-smaller-when – kdjernigan Jan 18 '14 at 10:49

Javascript/jquery : only update content inside div (not outside) - including html and css with live preview

Update:

1 Answers1