http://bowser.effectgames.com/~jhuckaby/zeroclipboard/multiple.html
is there a way to add a tipbox when the mouse hover on the copied text.the tip box say"the text has been copied" thank you.
HTML:code
<body>
<div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
</div>
</body>
yeah it is:
clip.addEventListener('complete', run_my_tipbox);
this will call the function run_my_tipbox when the text has been copied to the clipboard :)
so you will do something like that:
<script language="JavaScript">
var clip = null;
function run_my_tipbox(){ alert('Text has been copied to the clipboard!'); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.addEventListener('load', my_load);
clip.addEventListener('mouseOver', my_mouse_over);
clip.addEventListener('complete', run_my_tipbox);
clip.glue( 'd_clip_button' );
}
</script>
hopefully this makes it a bit more clear ;)
this is a fully working html file.. you can look what it does, it's pretty simple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>h4kr.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />
<style type="text/css">
body {
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.error-msg {
font-size: 12px;
margin: 10px;
padding: 10px;
color: #ffffff;
border: 1px solid #000000;
background-color: #990000;
font-weight: bold;
}
textarea {
width: 450px;
height: 200px;
border: 1px solid #669966;
padding: 5px;
}
#output {
height: 200px;
width: 99%;
border: 1px solid #669966;
padding: 5px;
overflow: auto;
}
#outputContent {
font-size: 13px;
}
button {
width: 450px;
height: 40px;
}
span.label {
width: 140px;
display: block;
float: left;
}
span.hidden {
display: none;
}
div#clipboardcontent{
display:none;
}
div#copyclipboardsuccess{
position: absolute;
top: 400px;
left: 20px;
border: 1px solid #000000;
background-color: #009900;
color: #ffffff;
font-weight: bold;
font-size: 18px;
padding: 20px;
width: 300px;
height: 60px;
text-align: center;
opacity: 0.5;
z-index: 9999;
}
div#errormsg{
position: absolute;
top: 150px;
left: 20px;
border: 1px solid #000000;
background-color: #990000;
color: #ffffff;
font-weight: bold;
font-size: 18px;
padding: 20px;
width: 300px;
height: 60px;
text-align: center;
opacity: 0.5;
z-index: 9999;
}
</style>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );
var clip = null;
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.addEventListener('load', function (client) {
});
clip.addEventListener('mouseOver', function (client) {
// update the text on mouse over
clip.setText( document.getElementById('clipboardcontent').innerHTML );
});
clip.addEventListener('onComplete', function (client) {
copyclipboardsuccess();
});
clip.glue( 'd_clip_button','d_clip_container');
}
function copyclipboardsuccess()
{
var o = document.getElementById('copyclipboardsuccess');
if(o.style.display == 'none')
{
o.style.display = 'block';
setTimeout(copyclipboardsuccess,1000);
}
else
{
o.style.display = 'none';
}
}
function errormsg()
{
var o = document.getElementById('errormsg');
if(o.style.display == 'none')
{
o.style.display = 'block';
setTimeout(errormsg,2500);
}
else
{
o.style.display = 'none';
}
}
</script>
</head>
<body onload="init();">
<h1>h4kr.com</h1><div id="errormsg" style="display:none">Error!</div><div id="copyclipboardsuccess" style="display:none">Copied to clipboard!</div><form id="form_cid" method="POST" target="output"><h2>Input</h2><textarea id="input_list" name="input_list"></textarea><br/><button type="submit" value="go">Go</button></form> <h2>Output</h2>
<iframe src="about:blank" name="output" id="output"></iframe>
<div id="d_clip_container" style="position:relative">
<button id="d_clip_button">Copy to clipboard</button>
</div>
<div id="clipboardcontent"></div>
</body>
Related
When writing something in “input” it’s real-time visible in div. It’s necessary that when B button is pressed the selected text in div turns bold and then it becomes unbold when pressed again. But I don't need any library or framework. I need to use only JavaScript. I tried getSelection methods and execCommand but they did not help․
const textArea = document.getElementById("textArea");
const input = document.getElementById("input");
const bold = document.getElementById("bold");
let span = document.createElement("span");
input.addEventListener("input", e => {
span.textContent = e.target.value;
textArea.appendChild(span);
});
#textArea {
width: 360px;
height: 350px;
padding: 5px;
font-size: 15pt;
word-wrap: break-word;
overflow: scroll;
border: 2px solid #ccc;
}
button {
width: 150px;
height: 50px;
border: none;
cursor: pointer;
}
.inputDiv {
margin-top: 5px;
}
#input {
width: 370px;
height: 50px;
border: none;
outline: none;
background-color: #ccc;
font-size: 15pt;
}
#workspace button {
width: 50px;
margin: 5px auto;
background-color: #d9d9d9;
}
#workspace button:hover {
width: 50px;
margin: 5px auto;
background-color: #999999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="myDiv">
<div id="workspace">
<button id="bold">B</button>
<div id="textArea"></div>
</div>
<div class="inputDiv">
<input type="text" name="text" id="input" placeholder="type something...">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I'm trying to create that every time that the image is clicked, it will decrease in size until it completely disappears. But I can't do this, help me!
HTML code:
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="D:\MATEUS\Programação\Stupid project\images\levi.png" alt="Levi" id="image">
</body>
</html>
<script type="main/javascript" src="jquery-3.3.1.js"></script>
CSS code:
#import "variables.css";
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
}
Assuming you want to scale the image down in size on each click we can do this:
set the inital scale of the image to 1 (through a CSS variable --scale)
set up an event listener on the image
when the image is clicked read the current value of --scale, decrease it by 0.1, say, (as long as it hasn't already hit 0)
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title><style>
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
transform: scale(var(--scale));
}
</style>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="https://picsum.photos/id/1016/1024/768" alt="test picture" id="image">
<script>
const image = document.getElementById("image");
image.style.setProperty('--scale', 1);
image.addEventListener("click", function () {
const curScale = image.style.getPropertyValue('--scale');
if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }
});
</script>
</body>
</html>
I found the solution to the problem, here's the example code:
HTML:
<button type="button" id="button" onclick="zoomout()">Click Me!</button>
<img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">
CSS:
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 0px; /* 90px */
margin-bottom: 10px;
border-radius: 20px;
transition: all 1s;
}
#button
{
color: white;
margin-left: 570px;
margin-top: 39px;
margin-bottom: 0%;
padding: 15px 32px;
background-color: var(--button-color);
}
JavaScript:
function zoomout() {
var GFG = document.getElementById("image");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth - 100) + "px"
}
You can just reduce the image width one by one (or with whatever rate you wish), and to visualize this change have some transition set on the image.
const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')
document.querySelector("button").addEventListener("click", () => {
for (let i = parseInt(imgWidth); i >= 0; i--) {
img.style.width = `${i}px`
}
})
img {
display: block;
width: 200px;
transition: all 1s;
}
button {
margin-bottom: 5px;
}
<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
I want to make input tag(currently height=0) popup when I press the plus button,and remove it when I press it again.
How can I remove the gap between the "to do list" div and "dfsdfs" li without removing any html tags?
If I remove the input tag id = "searchBox" (currently height = 0) the problem get solved, but I need the input tag.
Just cant find the problem why I cant fit them whithout any space.
$("ul").on("click","span",function (){
$(this).parent().fadeOut(500,function () {
$(this).remove();
});
})
$("ul").on("click","li",function (){
$(this).toggleClass("lineThrough");
})
$("#plusBtn").on("click",function(){
})
$("#searchBox").on("keypress",function(k){
if(k.which == 13){
var newTodo = $("#searchBox").val();
var newTodo = "<li><span><i class='far fa-trash-alt'></i></span>"+newTodo+"</li>"
if($("#searchBox").val() != ""){
$("#toDos").append(newTodo);
$(this).val("");
}
}
})
body{
background-image:linear-gradient(to right, #076585 ,#fff); ;
}
#table{
width: 350px;
margin: 100px auto;
box-shadow: 5px 5px 20px #79777767;
}
#todoTitle{
background: rgb(88, 88, 214);
height: 45px;
line-height: 50px;
padding-left: 10px;
color: whitesmoke;
font-size: 25px;
}
#plusBtn{
background: transparent;
border: 0;
color: white;
font-weight: bold;
font-size: 45px;
float: right;
line-height: 45px;
outline: none;
}
#searchBox{
width: 100%;
border: 0;
padding: 0;
height: 0;
font-size: 20px;
padding-left: 10px;
color: gray;
box-sizing: border-box;
}
#toDos{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
padding: 0;
width: 100%;
background: rgb(240, 240, 240);
box-sizing: border-box;
height: 45px;
line-height: 45px;
font-size: 25px;
color: gray;
}
li:nth-child(2n){
background: white;
}
.lineThrough{
text-decoration: line-through;
color: rgb(182, 179, 179);
}
span{
text-align: center;
color: white;
width: 0;
height: 45px;
display: inline-block;
background: rgb(248, 46, 46);
margin-right:12px;
border: 0;
opacity: 0;
}
li:hover span{
width: 45px;
transition:.2s linear ;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TO DO LIST</title>
<link rel="stylesheet" type="text/css" href="tdl_css.css">
<script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
<link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div id = "table">
<div id = "todoTitle">TO-DO LIST
<button id= "plusBtn">+</button>
</div>
<input type="text" id = "searchBox" placeholder="Add New Todo"></input>
<ul id="toDos">
<li>dsfsdfs</li>
</ul>
</div>
<script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>
Instead of setting the input's width or height to 0, use display: none to remove it from the layout flow entirely.
Have you tried executing a script to manipulate the display:
if( element.style.display === 'block') {
document.getElementById("searchBox").style.display = 'none';
}
else {
document.getElementById("searchBox").style.display = 'block';
}
I'm working on a form validation for a uni project and I can't seem to get it right.
I'm using if statements inside a function and I get no reaction from the first-name input.
I also tried to change the 'href'-link of the form element and no reaction, thank you in advance!
JsFiddle : https://jsfiddle.net/gcdb2nj3/2/
var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');
// Prevent-Default Funktion
function preventtDefault(e) {
e.preventDefault();
};
formularValidierung();
function formularValidierung() {
form.addEventListener('submit', function(e) {
if(firstName.value === "") {
warning.style.display="block"
firstName.classList.add('input-invalid')
e.preventDefault();
} else {
warning.style.display="none"
e.preventDefault();
}
});
};
You have to pass the event object to your preventDefault function to prevent the default action. Note that the code you provided should work fine as you are calling event.preventDefault if the form validation does not pass whereas in your JSFiddle you are calling the preventDefault function without any arguments.
// Burger Menu Section
var mySideNav = document.getElementById('mySidenav');
var burgerLines = document.querySelector('.burger-lines');
var closeBtn = document.querySelector('.closebtn');
var logo = document.querySelector('.logo');
var what = $('.what');
$(burgerLines).on('click', function openNav() {
mySideNav.style.width="100%";
mySideNav.style.opacity="1";
burgerLines.style.opacity="0"
closeBtn.style.color="white"
closeBtn.style.fontSize="66px"
closeBtn.style.top="-29px"
});
$(closeBtn).on('click', function closeNav() {
mySideNav.style.width="0";
mySideNav.style.opacity = ".00775";
burgerLines.style.opacity="1"
});
// Form validation begins here
var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');
// Prevent-Default Funktion
function preventDefault(e) {
e.preventDefault();
};
formularValidierung();
function formularValidierung() {
form.addEventListener('submit', function(e) {
if(firstName.value === "") {
warning.style.display="block"
firstName.classList.add('input-invalid')
preventDefault(e);
} else {
warning.style.display="none"
preventDefault(e);
}
});
};
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #FCFCFC;
}
.sidenav {
font-family: 'Cormorant Garamond';
font-weight: bold;
width: 0px;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
overflow-x: hidden;
padding-top: 65px;
margin-left: 0px;
text-align: center;
transition: .7s;
}
.sidenav a {
padding: 45px 8px 20px 32px;
text-decoration: none;
font-size: 28px;
color: white;
display: block;
transition: 0.7s;
}
.sidenav a:hover {
color: rgb(155, 155, 155);
}
.burger-lines {
font-size:30px;
cursor:pointer;
position: fixed;
top: 44px;
right: 70px;
}
.logo {
font-family: 'Oswald', sans-serif;
padding: 40px 0px 0px 40px;
text-decoration: none;
font-size: 26px;
color: black;
display: block;
position: fixed;
z-index: 1;
top: 5px;
}
.sidenav .closebtn {
color: black;
cursor:pointer;
position: absolute;
top: -5px;
right: 60px;
font-size: 46px;
}
.headline-2 {
text-transform: uppercase;
text-align: center;
position: relative;
top: 9.5rem;
right: 15rem;
font-size: 18px;
}
.form-wrap {
text-align: center;
margin-top: 10rem;
}
.form-wrap > input {
font-family: 'Cormorant Garamond';
margin-top: 20px;
padding: 5px;
font-size: 16px;
border: 1px solid lightgray;
background: #FCFCFC;
}
#first-name, #last-name, #e-mail, #phone-number {
width: 350px;
height: 40px;
}
#custom-text-area {
font-family: 'Cormorant Garamond';
padding: 10px;
margin-top: 1rem;
width: 707px;
height: 230px;
font-size: 16px;
background: #FCFCFC;
border: 1px solid lightgray;
}
#submit {
background: black;
border: 1px solid black;
font-size: 19px;
text-align: left;
color: white;
width: 120px;
height: 45px;
margin-right: 29.3rem;
margin-top: 25px;
}
#submit:hover {
background: rgb(53, 53, 53);
transition: .5s;
}
/*input:hover, #custom-text-area:hover {
border: 1px solid red;
color: red;
transition: .5s ease-in;
}*/
.input-invalid {
border: 1px solid red;
color: red;
transition: .5s ease-in;
}
.warning {
font-family: 'Cormorant Garamond';
color: red;
position: relative;
top: -36px;
left: -3rem;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Styx Somnus || Contact</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<header>
<nav>
<a class="logo" href="index.html">STYX SOMNUS</a>
<div class="sidenav" id="mySidenav">
<a href="javascript:void(0)" class="closebtn" >×</a>
Home
About
Projects
Contact
</div>
<span class="burger-lines">☰</span>
</nav>
</header>
<main>
<p class="headline-2">Contact Form</p>
<form action="#" class="form-wrap">
<input type="text" id="first-name" placeholder="First Name*">
<input type="text" id="last-name" placeholder="Last Name*"><br>
<input type="email" id="e-mail" placeholder="Your E-Mail*">
<input type="text" id="phone-number" placeholder="Phone Number"><br>
<textarea id="custom-text-area" cols="40" rows="7" placeholder="Your Message..."></textarea><br>
<input type="submit" id="submit" value="Submit →">
<p class="warning">All fields with * must be filled in.</p>
</form>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should call preventDefault immediately upon submission, run your validation, then if validation passes, continue on with submission: https://jsfiddle.net/gcdb2nj3/4/
function formularValidierung() {
form.addEventListener('submit', function(e) {
e.preventDefault();
if (firstName.value === "") {
warning.style.display = "block"
firstName.classList.add('input-invalid')
} else {
warning.style.display = "none"
// submit form here
}
});
};
formularValidierung();
Every part of the following code player works fine expect the CSS part of it.
It can display HTML and JS without problem. I've tried to fix it but I couldn't. even Chrome console is not pointing to any error. I think the problem is here:
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
And here is all of the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sadegh's code player</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#menubar {
width: 100%;
height: 40px;
background-color: #6C4141;
}
#logo {
padding: 10px 0 0 15px;
font-weight: bold;
font-size: 1.15em;
float: left;
color: white;
text-shadow: 1px 1px 3px gray;
}
#button {
float: right;
padding: 5px 20px 0 0;
}
#runButton {
font-size: 1.15em;
font-weight: bold;
height: 30px;
width: 60px;
border-radius: 4px;
color: #875D5D;
border: 1px solid #8E7272;
background-color: white;
text-shadow: 1px 1px black;
}
#runButton:hover {
background-color: #8E7272;
color: white;
border: 1px solid white;
}
#toggles {
width: 400px;
margin: 0px auto;
height: 100%;
}
#toggles ul {
list-style-type: none;
}
.toggleLi {
display: inline-block;
padding: 7px 5px 5px 5px;
border: 1px solid white;
border-radius: 5px 5px 0 0;
background-color: #8E7272;
height:30px;
margin-top: 10px;
width: 95px;
text-align: center;
border-bottom: 0;
color: white;
font-weight: bold;
}
.selected {
background-color: white;
color: #875D5D;
border: 1px solid gray;
}
.clear {
clear: both;
}
.codeContainer {
width: 25%;
float:left;
height: 100%;
position: relative;
}
.codeContainer textarea {
width: 100%;
height: 100%;
border: none;
border-right: 1px ridge #875D5D;
padding: 15px;
font-family: Console, Lucida, monospace;
font-size: 18px;
}
.codeLable {
position: absolute; top: 10px; right: 10px;
border-bottom: 1px solid #875D5D;
padding: 0 2px 2px 2px;
}
#resultFrame {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menubar">
<div id="logo">Code Player</div>
<div id="button">
<button type="button" id="runButton">Run</button>
</div>
<div id="toggles">
<ul>
<li class="toggleLi selected">HTML</li>
<li class="toggleLi selected">CSS</li>
<li class="toggleLi selected">JS</li>
<li class="toggleLi selected">Result</li>
</ul>
</div>
<div class="clear"></div>
<!-- html container -->
<div class="codeContainer" id="HTMLContainer">
<div class="codeLable">HTML</div>
<textarea name="textarea" id="html">Some text</textarea>
</div>
<!-- css container -->
<div class="codeContainer" id="CSSContainer">
<div class="codeLable">CSS</div>
<textarea name="textarea" id="css">body {
background-color: red;
}
</textarea>
</div>
<!-- javascript container -->
<div class="codeContainer" id="JSContainer">
<div class="codeLable">JavaScript</div>
<textarea name="textarea" id="js">alert('Thatsit')</textarea>
</div>
<!-- result iframe -->
<div class="codeContainer" id="ResultContainer">
<div class="codeLable">Result</div>
<iframe id="resultFrame"></iframe>
</div>
</div><!-- end of #menubar -->
</div><!-- end of page wrapper -->
<script type="text/javascript">
var windowHeight = $(window).height();
var menubarHeight = $("#menubar").height();
var codeContainerHeight = windowHeight - menubarHeight;
$(".codeContainer").height(codeContainerHeight + "px");
$(".toggleLi").click(function(){
$(this).toggleClass("selected");
var activeDiv = $(this).html();
$("#"+activeDiv+"Container").toggle();
var showingDivs = $(".codeContainer").filter(function() {
return $(this).css("display") !== "none";
}).length;
var width = 100 / showingDivs;
$(".codeContainer").css("width",width + "%");
});
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
</script>
</body>
</html>
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
The $("#html").val() will return only text not include tags,so when user input something in <textarea name="textarea" id="html">Some text</textarea>
you need to wrap into a tag,for example:user input(Some text),wrap to <p>Some text</p>or wrap inside a body tag.Hope this help you.