javascript - HTML Editor With iFrame Not Working -

- 

* {      padding: 0;      margin: 0;  }  body {      font-family: sans-serif;  }    .grid {      width: 50%;      float: left;      padding: 30px 50px;    }    .container {      background: #e3e3e3;  }      textarea {      width: 100%;      height: 200px;      resize: none;      margin-top: 20px;      margin-bottom: 50px;  }    iframe {      border-style: solid;      border-color: aqua;      height: 1000px;      width: 100%;      display: block;  }
<!doctype html>  <hmtl>      <head>          <link rel = "stylesheet" type = "text/css" href = "style.css">          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>                   <script>              (function() {  $('grid').height($(window).height() );    var frame = $('iframe');  var contents = frame.contents();  var body = contents.find('body')  var styletag = contents.find('head').append('<style></style>').children('style');    $('textarea').focus(function() {  var $this = $(this);  $this.keyup(function() {  if ($this.attr('id') == 'html') {  body.html($this.val() );  }  else  {  styletag.text($this.val() );  }  });  });  });                </script>      </head>            <body>          <div class = "container grid">              <form>                  <h2>html</h2>                  <textarea id = "html"></textarea>                                    <h2>css</h2>                  <textarea id = "css"></textarea>              </form>          </div>                    <div class = "output grid">              <iframe></iframe>          </div>      </body>  </hmtl>

i'm trying make simple online html editor (like codepen) and, result not showing up. have tried solve problem more hour! please help! problem bugging me, , internet won't help! i'm suspecting jquery has issues, doesn't seem it

first off script in head tags instead of closing body tag. meaning script run before content added.

if you're intension keep script in head tag need put function inside of domcontentloaded event listener.

document.addeventlistener('domcontentloaded', function() {   // script })

the jquery equivalent...

$(document).ready(function() {   // script })

and that's need editor working.

if want integrate advanced code editor extensive api recommend looking codemirror or ace editor.

i developed kodeweave , use on tablet both online , offline. has few demos such code editor (codemirror), splitter (from jqxsplitter , more.

these additional tips started making code playground.

i made video if want understand more how make own coding playground.


Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more