How to convert Jquery drag and drop functions to angular directive - javascript

I am working on project like floor plan. The project is working 100% with JQuery but know i wanted to integrate with angularjs, for that i need to convert jquery functions to angularjs directive.
below i have posted my jquery code please can anyone help me to convert.
Thanks in advance...
.JS
$(document).ready(function(){
//Counter
counter = 0;
//Make element draggable
$(".drag").draggable({
helper:'clone',
containment: 'frame',
//When first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter
$(objName).css({"left":pos.left,"top":pos.top});
$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");
//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)
$("#clonediv"+counter).addClass(itemDragged);
}
}
});
});
function readURL(event){
var getImagePath = URL.createObjectURL(event.target.files[0]);
$('#frame').css('background-image', 'url(' + getImagePath + ')');
}
.CSS
body {
text-align: center;
z-index: 1;
}
#wrapper {
text-align: left;
width: 720px;
margin-left: auto;
margin-right: auto;
}
#options{
width: 700px;
height: 90px;
border: 1px solid black;
}
#frame{
margin-top: 25px;
width: 700px;
height: 550px;
background-image: url('');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid black;
margin-left: 0px;
position: relative;
z-index: 10;
}
#tbldevs{
border:1px solid black;
width:80%;
margin-left:50px;
margin-top:10px;
}
#tbldevs th{
text-align:center;
height:50px;
width:50px;
}
#tbldevs td{
height:50px;
}
#drag1 {
margin-left: 15px;
margin-top: 15px;
/* background-image: url("../images/cf_32x32.png"); */
width: 32px;
height: 32px;
border: 2px solid black;
border-radius: 50%;
float: left;
z-index: 25;
}
#drag2 {
margin-left: 79px;
margin-top: 15px;
/* background-image: url("../images/cf_32x32.png"); */
width: 60px;
height: 32px;
border: 2px solid black;
z-index: 25;
}
.ui-draggable-helperMoving {
border: 1px dotted #000;
padding: 6px;
background: #fff;
font-size: 1.2em;
width:100px;
height:100px;
}
.ui-draggable-helperStoped {
border: 1px solid #000;
width:5px;
height:5px;
}
/* classes for dragged stuff */
.dragged1 {
position: fixed;
/* background-image: url("../images/cf_32x32.png"); */
width: 32px;
height: 32px;
border: 2px solid black;
border-radius: 50%;
}
.dragged2 {
position: fixed;
/* background-image: url("../images/cf_32x32.png"); */
width: 60px;
height: 32px;
border: 2px solid black;
}
/*.dragged3 {
position:absolute;
background-image: url("../images/fla_32x32.png");
width:32px;
height:32px;
}
.dragged4 {
position:absolute;
background-image: url("../images/flex_32x32.png");
width:32px;
height:32px;
}
.dragged5 {
position:absolute;
background-image: url("../images/pdf_32x32.png");
width:32px;
height:32px;
}
.dragged6 {
position:absolute;
background-image: url("../images/ps_32x32.png");
width:32px;
height:32px;
}
#element{
border:1px solid red
}*/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<title>Where have I been? - Demo</title>
<meta name="description" content="Where have I been?" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />
<script src="js/script.js"></script>
</head>
<body>
<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div id="wrapper">
<div id="options">
<div id="drag1" class="drag"></div> <!-- end of drag1 -->
<div id="drag2" class="drag"></div> <!-- end of drag2 -->
</div><!-- end of options -->
<div id="frame">
</div><!-- end of frame -->
</div><!-- end of wrapper -->
</body>
</html>

Related

How to Open Iframe On Button Click Without jQuery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
How to open iframe only on when the button is clicked without using jquery <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'></script>
here when we open a website the iframe should not load it should load only when the button is clicked
My present code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
it is my present code if I add the above-mentioned jquery its works fine but here I removed it now it's not working
so I want to work it without jquery
That sticky sidebar should auto-scroll with the main content but when I used to frame the sidebar not scrolling down. It also block my comment frame
Check this, Is this what do you need?
const btn = document.querySelector("button.openIframe");
const frame = document.getElementById("frame");
btn.addEventListener("click", toggleIframe);
function toggleIframe(){
var src = "https://www.jqueryscript.net/";
frame.classList.toggle("d-none");
btn.classList.toggle("opened");
if(btn.classList.contains("opened")){
btn.innerHTML = "Close IFrame";
src = prompt("Enter a Source :", "https://www.jqueryscript.net/");
}
else{
btn.innerHTML = "Open IFrame";
}
frame.src = src;
}
.d-none{ display:none; }
<button class="openIframe">Open IFrame</button>
<iframe id=frame class="d-none" width="100%" height="60%">
</iframe>
Or Same in a Better Way ( Update )
const btn = document.querySelector("#load");
const src = document.querySelector("#src");
const frame = document.querySelector("#frame");
btn.addEventListener("click", toggleFrame);
function toggleFrame(){
frame.src = "about:blank";
if(src.value !== null){
src.classList.toggle("d-none");
btn.classList.toggle("opened");
frame.src = src.value;
frame.classList.toggle("d-none");
if(btn.classList.contains("opened"))
btn.innerHTML = "Close";
else
btn.innerHTML = "Load";
}
}
.d-none{ display:none; }
<input id=src placeholder="Enter a SRC" value="https://www.jqueryscript.net/"><button id=load>Load</button>
<iframe id=frame class=d-none width="100%"></iframe>
iFrame

How I can remove this white spaces ? (html, css)

I'm beginner in web development and I don't understand why there is white space here (check screen capture), I would remove them...
PS:I use electron framework to make an desktop app
* {
border: 2px solid black;
}
#Icon {
height: 30px;
width: 30px;
}
.Minimize {
height: 30px;
width: 30px;
}
.Close {
height: 30px;
width: 30px;
}
#Triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #20272F;
margin: auto;
}
#Titre {
vertical-align: middle;
text-align: center;
}
<header>
<img id="Icon" src="Images/icon.png">
<input type="image" class="Minimize" src="Images/minimize_window_96px.png"></input>
<input type="image" class="Close" src="Images/close_window_96px.png"></input>
</header>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<h1 id="Titre">Triangle des equations</h1>
<div id="Triangle"></div>
<div id="PartiEquation"></div>
<script src="code.js"></script>
</body>
You can reset browser margin by use :
* { margin:0; padding:0; box-sizing:border-box; }
Try This...
* {
border: 2px solid black;
margin:0;
}
#Icon {
height: 30px;
width: 30px;
}
.Minimize {
height: 30px;
width: 30px;
}
.Close {
height: 30px;
width: 30px;
}
#Triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #20272F;
margin: auto;
}
#Titre {
vertical-align: middle;
text-align: center;
}
<header>
<img id="Icon" src="Images/icon.png">
<input type="image" class="Minimize" src="Images/minimize_window_96px.png"></input>
<input type="image" class="Close" src="Images/close_window_96px.png"></input>
</header>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<h1 id="Titre">Triangle des equations</h1>
<div id="Triangle"></div>
<div id="PartiEquation"></div>
<script src="code.js"></script>
</body>
Every element has certain rules applied by default by browsers. Try using a css reset script in order to "equalize" them.
This one for example.
https://meyerweb.com/eric/tools/css/reset/
My strong advice is to use:
header img,
header input {
float: left;
}
This will fix the box model problems and you will avoid generic selector like "*" which has performance implications!

how to replace an image with another onclick

I have these characteristics of these two images
#image1{
position:absolute;
left:29%;
top:40%;
background-image: url("../imgdrag/activity1.png");
width:63px;
height:38px;
}
#image2{
position:absolute;
left:29%;
top:40%;
background-image: url("../imgdrag/activity1red.png");
width:63px;
height:38px;
}
How can I replace the image1 with the image2 when I click on a button using a function
Example of switching state with jQuery
$('.replace').click(function(){
$('.image-holder').toggleClass('active');
})
#image1{
position:absolute;
left:29%;
top:40%;
background-image: url("../imgdrag/activity1.png");
width:63px;
height:38px;
z-index: 2;
background-color: blue;
}
#image2{
position:absolute;
left:29%;
top:40%;
background-image: url("../imgdrag/activity1red.png");
width:63px;
height:38px;
z-index: 1;
background-color: red;
}
.image-holder {
position: relative;
}
.image-holder.active #image2{
z-index: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="replace">Replace</button>
<div class="image-holder">
<div id="image1"></div>
<div id="image2"></div>
</div>
What I would recommend is to change your css to
#image1 {
position:absolute;
left:29%;
top:40%;
background-image: url("../imgdrag/activity1.png");
width:63px;
height:38px;
}
#image1.active {
background-image: url("../imgdrag/activity1red.png");
}
then if you are using jquery just add the new 'active' class, and remember to check first if it already has it.
$('button').on('click', function(e) {
var img = $('#image1');
if (!img.hasClass('active')) {
img.addClass('active');
}
});
// this with jQuery
$("#button").click(function() {
$('#image1').attr('id', '#image2');
});
or
function change(){
document.getElementById('#image1').setAttribute('id', '#image2');
}
You can use addEventListner Like the below code:
// Tempory you can use an hard coded to
const replaceImageSrc = "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80"
// Replace Image
const image = document.getElementById('image');
// Replace button
const replaceBtn = document.getElementById('replace-img-btn');
const imagesReplace = (img) =>{
if(img != ""){
image.src=`${img}`
}else{
image.src=""
}
}
replaceBtn.addEventListener('click', ()=>{
imagesReplace(replaceImageSrc)
})
/* Fonts */
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap");
:root {
--primary-color: rgb(26, 26, 26);
--secondary-color: rgb(245, 245, 245);
--font-family: Nunito, sans-serif;
--box-shadow: rgb(0, 0, 0) 1px 1px 3px 0px inset, rgba(48, 48, 48, 0.5) -1px -1px 3px 1px inset;;
--all-transition: transform ease-in-out 0.3s 0s;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: var(--font-family);
}
.main-content{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
width: 550px;
height: 250px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
border-radius: 10px;
background-color: var(--primary-color);
}
.img-container{
width: 100%;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.img-container>img{
width: 100px;
border-radius: 10px;
}
.container>button{
width: 200px;
height: 35px;
border-radius: 5px;
border: none;
font-weight: bold;
margin-bottom: 15px;
box-shadow: var(--box-shadow);
background-color: var(--primary-color);
color: var(--secondary-color);
cursor: pointer;
transition: var(--all-transition);
}
/* Animation */
.container>button:hover{
transform: scale(1.08);
}
.container>button:active{
background-color: var(--secondary-color);
color: var(--primary-color);
box-shadow: none;
border: 1px solid var(--secondary-color);
}
<!doctype HTML>
<html>
<head>
<title>codedamn HTML Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="main-content">
<div class="container">
<div class="img-container">
<img src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" id="image" alt="">
</div>
<button type="button" name="replace-img-btn" id="replace-img-btn">Replace Image</button>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>

Content expanding beyond div but no scroll bar

I'm using JQuery to load the contents of a text file into a div however when the content goes beyond the div no scroll bar appears.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/common.css">
<script src="JS/common.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>The Circuit</li>
<li>Gallery</li>
<li>Further Reading</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
<div id="tabContent5"></div>
</div>
</body>
</html>
CSS:
body {
background-color: #EEEEEE;
font-family: Arial,Helvetica;
font-size: small;
height: 100%;
margin: 100px auto 0;
width: 100%;
}
#tabs {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: -98px;
width: 100%;
}
#tabs li {
float: left;
margin: 0 -15px 0 0;
}
#tabs a {
border-bottom: 30px solid #3D3D3D;
border-right: 30px solid transparent;
color: #FFFFFF;
float: left;
height: 0;
line-height: 30px;
opacity: 0.3;
padding: 0 40px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
#tabs a:hover {
border-bottom-color: #2AC7E1;
opacity: 1;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em;
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
.activeTab {
border-bottom-color: #3D3D3D !important;
opacity: 1 !important;
}
.img {
}
JQuery:
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$("#tab5").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
$("#tabContent5").hide();
});
How can I get the scroll bar to appear?
#tabs {
overflow: scroll;
}
overflow controls how content is hidden. If set to hidden it will be hidden with no scroll bars. You want scroll to add the appropriate scroll bar.
Overflow is visible but just it overflowed by padding:
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em 0 0 2em; /*<--change to this*/
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
Try to use the famous micro clearfix instead of overflow: auto;
/*The famous micro clearfix*/
.group:before,
.group:after,
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after,
.group:after {
clear: both;
}
.group,
.group {
*zoom: 1;
}
And for your jQuery, that can be a lot shorter and, arguable, more readable like this:
$('a[name="#tabContent2"]').click(function () {
$(this).parent().parent().find("a").removeClass("activeTab");
$(this).addClass('activeTab');
$("#content > div").hide();
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
});

how to add tipbox when mouse hover on the text

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>

Categories

Resources