I want to add id to cloned img tag as I want to store the data of cloned object to database. can anyone help please..I also want to store the x and y positions provide by the user using javascript..I just want to know how to assign different id's to the cloned img tag.
Here is my code.
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="dragndrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="include/jquery-ui.css">
<script src="include/jquery-1.10.2.js"></script>
<script src="include/jquery-ui.js"></script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:200px;
height:500px;
border:1px solid black;
}
.drag{
width:100px;
border:1px solid black;
height:40px;
position:relative;
background-color:red;
background-image:url(restaurant/8793_532242100147879_270911928_n.jpg);
}
#droppable{
width:500px;
height :500px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div class = "col" id="col1">
<img src="" id="drag1" class="drag">
</div>
<div class="col" id ="droppable">
</div>
</div>
</body>
</html>
here is dragndrop.js file.
// JavaScript Document
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function(e, ui) {
x = ui.helper.clone();
x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.appendTo('#droppable');
ui.helper.remove();
}
});
});
Related
I am trying to make a image sticker html 5 app. In which user uploads a photo and then places stickers on top of it. I am able to do it through HTML 5 canvas and Jquery library free transform to rotate and scale stickers on top of image but when i convert this into jpeg the css transaction is lost and only image with stickers on top is generated. Code is written below. Is there any other way to do it?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://greenethumb.com/github/jquery-free-transform/css/jquery.freetrans.css"/>
<script type="text/javascript" src="http://greenethumb.com/github/jquery-free-transform/js/Matrix.js"></script>
<script type="text/javascript" src="http://greenethumb.com/github/jquery-free-transform/js/jquery.freetrans.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ui.core.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.ui.resizable.css" />
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1" />
<style>
#draggable-zone {
background: #000 url(images/space.jpg) 0 0 no-repeat;
border: 3px solid #000;
height: 500px;
margin: 2em auto;
overflow: hidden;
width: 600px;
}
.ui-wrapper {
overflow: visible !important;}
.ui-resizable-handle {
background: #f5dc58;
border: 1px solid #FFF;
z-index: 2;}
.ui-rotatable-handle {
background: #f5dc58;
border: 1px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
height: 10px;
left: 50%;
margin: 0 0 0 -5px;
position: absolute;
top: -5px;
width: 10px;}
.ui-rotatable-handle.clone {
visibility: hidden;}
</style>
</head>
<body>
<div id="imagediv" style="width:400px;" >
<div style="width:400px;border:1px solid #000;position:relative" >
<img src="lordmeowington.png" width="400px">
<div id="draggable-wrapper" style="position:absolute;top:0">
<div id="resizable-wrapper">
<img src="funny_glasses.png" width="150" height="150" alt=" " id="elem-wrapper" />
</div>
</div>
</div>
</div>
<input type="button" value="saveimage" onclick="demoFromHTML()" />
<input type="button" value="remove" onclick=" Demo()" />
<input type="file" accept="image/*" capture="camera" />
<input type="text" value="" id="innerimage" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.rotatable.js"></script>
<script>
$(document).ready(function() {
var drWr = $('#draggable-wrapper'),
rsWr = $('#resizable-wrapper'),
elem = $('#elem-wrapper');
elem.resizable({
aspectRatio: true,
handles: 'ne, nw, se, sw'
});
drWr.draggable();
elem.parent().rotatable();
});
function Demo()
{
$('.ui-rotatable-handle').css('border','0px');
$('.ui-resizable-handle').css('background','none');
$('.ui-resizable-handle').css('border','none');
$('.ui-rotatable-handle').css('background','none');
html2canvas($("#imagediv"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/jpeg');
imgData.width=400;
console.log(imgData);
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(imgData);
//window.open(imgData);
}
});
}
</script>
</body>
</html>
Php Code is below
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>
I am trying to implement JQueryUI resizable. It's not working below is my tentative demo which I will implement later in actual code. Please help me to solve it. It's not working.
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script>
$(function() {
//var a = $("#resizable").html();
//alert(a);
$("#resizable").resizable();
});
</script>
</head>
<body>
<div id="demo-frame">
<meta charset="utf-8">
<div class="demo">
<div class="ui-widget-content ui-resizable" id="resizable">
<h3 class="ui-widget-header">Resizable</h3>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>
</div>
</div>
</div>
</body>
It's the divs you have inside of your div that seem to be causing an issue. I commented them on on this jsFiddle http://jsfiddle.net/ta9N4/ and it appears to be working fine.
The method resizable() comes from jQuery UI API.
And you didn't include jQueryUI in your html page.
Go here to download it (or grab a link to this file), and include it like you did for jQuery (<script> tag).
I am trying to get youtube videos to be automatically embedded into a webpage.
The webpage has keywords already passed in from the url: /view.php?id=keywords123
These are used for creating content on a template and I need it to also display a relevant video from youtube.
Is there code that will search youtube and return the embed code or the video id to be embedded?
Cheers in advance!
Check this link from IBM. It is a very old link but I wanted to do something similar earlier and helped me a lot. It has some examples about how you will perform a keyword search and parse the xml response.
Check out Youtube Player API
Youtube Player Demo:
http://code.google.com/apis/youtube/youtube_player_demo.html
Youtube Actionscript player api:
http://code.google.com/apis/youtube/flash_api_reference.html
Youtube Javascript player api:
http://code.google.com/apis/youtube/js_api_reference.html
I use jquery to get the youtube embed url:
var re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w]*(?:['"][^<>]*>|<\/a>))[?=&+%\w-]*/ig;
video_url= text.replace(re,'http://www.youtube.com/embed/$1');
html='<p><iframe width="100%" height="300" src="'+video_url+'" frameborder="0"></iframe></p>';
$("#video_place").append(html);
I would suggest you to use json api, following is the code,cheers.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
alert("");
$("#sc").attr("src","http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos2");
});
});
function loadVideo(playerUrl, autoplay) {
swfobject.embedSWF(
playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
(autoplay?1:0), 'player', '500', '400', '9.0.0', false,
false, {allowfullscreen: 'true'});
}
function showMyVideos(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul>'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t;
html.push('<li>', title, '</li>');
}
html.push('</ul>');
document.getElementById('videos').innerHTML = html.join('');
}
</script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0"
type="text/javascript"></script>
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css"/>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js"
type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videobar/gsvideobar.css"
rel="stylesheet" type="text/css"/>
<style>
pre {
background-color:#FAFAFA;
border:1px solid #BBBBBB;
font-size:9pt;
line-height:125%;
margin:1em 0pt 0pt;
overflow:auto;
padding:0.99em;
}
code, pre {
color:#007000;
font-family:monospace;
}
.titlec {
font-size: small;
}
ul.videos li {
float: left;
width: 10em;
margin-bottom: 1em;
cursor:pointer;
}
ul.videos
{
margin-bottom: 1em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
#videoBar {
width : 160px;
margin-right: 5px;
margin-left: 5px;
padding-top : 4px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 0px;
}
</style>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 400px; float: left; position:relative">
<object id="player"></object>
</div>
<br>
<div id="videos2" style="width:500px; clear:both;height:300px; overflow:auto;"></div>
<script id="sc"
type="text/javascript"
src="http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos">
</script>
When the user is hovering on a radio button/its label i want to display another radio button, that user can also select but if mouse moves the 2nd radio button hides again. i have found this last jquery snipet that shows choices while hovering on link tag
http://www.stylesfirst.com/coding/easy-show-hide-with-jquery/
<html>
<head>
<style type="text/css">
p.trigger {
padding: 0 0 0 20px;
margin: 0 0 5px 0;
background: url(plusminus.jpg) no-repeat;
height: 15px;
font-size: 14px;
font-weight: bold;
float:left;
}
p.trigger a {
color: #474747;
text-decoration: none;
display: block;
cursor:pointer;
}
p.trigger a:hover {
color: #ff4b43;
}
p.active {
background-position: left bottom;
}
.toggle_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
clear: both;
}
.toggle_container .block {
padding: 0px 0px 0px 15px;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.toggle_container').hide();
jQuery('p.trigger').hover(function(){
jQuery(this).toggleClass('active').next().toggle('slow');
});
});
</script>
</head>
<body>
<p class="trigger"><a>Click here</a></p>
<div class="toggle_container">
<div class="block">
<input id='element_1_1' name='element_1' class='element radio' type='radio' value='8'/>
<label class='choice' for='element_1_1'>Somewhere in the middle</label>
</div>
</div>
</body>
</html>
The easiest answer would be, if you could afford it, put both <input type="radio"/>s under a <div/> and control hovering behavior on that <div/>. This is commonly done with menus for the very same purpose.
Plus if you target new browsers, you can leave jQuery out of this - it can be done with any browser that understands the :hover pseudo-class on non-<a/>s.
Here's a sample page demonstrating both options.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#radios').hover(
function() { $('#radios').addClass('hover'); },
function() { $('#radios').removeClass('hover'); }
);
});
</script>
<style type="text/css">
/* option 1 - jquery + css, for older browsers */
#div-radio2 {
display: none;
}
.hover #div-radio2 {
display: block;
}
/* option 2 - no jquery, plain css, if you target only new browsers */
#radios:hover #div-radio2 {
display: block;
}
</style>
</head>
<body>
<div id="radios">
<div id="div-radio1"><input type="radio" id="radio1" /><label for="radio1">Radio 1</label></div>
<div id="div-radio2"><input type="radio" id="radio2" /><label for="radio2">Radio 2</label></div>
</div>
</body>
</html>
Are you looking for something like this
http://jsfiddle.net/HezZa/
I have this script
say index.html
<html>
<head>
<title>Ajax with jQuery Example</title>
<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$("#quote p").load("script.php");
}, 10000);
});</script>
<style type="text/css">
#wrapper {
width: 240px;
height: 80px;
margin: auto;
padding: 10px;
margin-top: 10px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="quote"><p> </p></div>
</div>
</body>
</html>
script.php
<?php
echo "Hello how are you";?>
when loading index.html it is blank for 10 seconds and then it start functioning..how do I get rid of blank and how it can show instantly when browser loads??
Your setInterval() call works as designed: It says "in 10 seconds and then every seconds, do this...."
Add a separate "load" call to do the initial filling:
$(document).ready(function(){
$("#quote p").load("script.php"); // <--- Add this
setInterval(function(){
....