I have code(thanks to roosteronacid) which removes web page elements when user click on them. I need to add additional functionality to undo action - revert removed elements. Any idea how to do element.remove undo with jQuery?
Regards,
Tomas
You can store a reference to removed elements by assigning the return value of remove() to a variable:
// Remove the element and save it in a variable
var removed = $('#myElement').remove();
Later, providing the variable is in scope, we can add the element back using various DOM insertion methods:
// Insert the removed element back into the body
removed.insertAfter('#anotherElement');
Looking at the code provided by roosteronacid, it doesn't save the reference so you would have to modify that code accordingly.
There is another method for this: .detach: http://api.jquery.com/detach/ that removes an element without destroying it.
You still have to "save" the element though (look at the example provided in the docs.)
You could take the approach many apps take for undo and save the complete body state before each remove, I've reworked #roosteronacid's code thus:
index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="index_files/jquery-1.js" type="text/javascript"></script>
<script src="index_files/index.js" type="text/javascript"></script>
<title>index</title>
<script type="text/javascript">var stack = Array();</script>
</head><body>
<h1>Test</h1>
<p>Test</p>
<div>Test</div>
Test
<span>Test</span>
Undo
</body></html>
index.js
$(function ()
{
initialise();
});
function initialise() {
$("* :not(body,a)").mouseenter(function ()
{
var that = $(this);
var offset = that.offset();
var div = $("<a />",
{
"title": "Click to remove this element",
css: {
"position": "absolute",
"background-color": "#898989",
"border": "solid 2px #000000",
"cursor": "crosshair",
width: that.width() + 6,
height: that.height() + 2
},
offset: {
top: offset.top - 4,
left: offset.left - 4
},
click: function ()
{
div.remove();
var state = $("body *");
stack.push(state);
that.remove();
},
mouseleave: function ()
{
div.fadeTo(200, 0, function ()
{
div.remove();
});
}
});
that.after(div.fadeTo(200, 0.5));
});
};
Well instead of removing them, you can do jQuery("#someElement").hide(); and then after if you want to get them back jQuery("#someElememt").show(); would be nice solution. Since its alters it display property.
Related
I'm having a problem getting my code to work when it's incororated into a live site. The fiddle works just fine, but when I include the identical code in a webpage, I can't get the function to load/work at all.
<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Drag and Drop Assignment</title>
<!doctype html>
<link rel="stylesheet" href="styles/style1.css"/>
<style>
.drop{
float: left;
width: 350px;
height: 400px;
border: 3px solid blue;
background-image: url("http://debsiepalmer.com/images/tardis 2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#right{float: left;
width: 350px;
height: 400px;
border: 3px solid red;
}
</style>
<script src="draganddrop.js" ></script>
<script src="http://code.jquery.com/jquery-2.0.2.js" ></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$ (init);
function image(id, image1) {
this.id = id;
this.image1 = image1;
}
$('#deal').click(function () {dealAll(
dealCard(randomCard()));
});
$(function() {
$( "#draggable" ).draggable({ containment: "#left"});
});
function init() {
$('.drop').droppable( {
drop: handleDropEvent
} );
$("img").draggable();
}
// global variables
var cardsInDeck = new Array();
var numberOfCardsInDeck = 15;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";
var cardsDealt = new Array();
function dealAll(){
var z=0;
for (z=0;z<5;z++) {
cardsDealt[z] = new Image(z,dealCard(randomCard()));
}
}
function dealCard(i) {
if (numberOfCardsInDeck == 0) return false;
var $img = new Image();
$img.src = "images/Companions/" + cardsInDeck[i] + ".jpg";
// Here I set the ID of the object
$img.id=cardsInDeck[i];
$img.class='drag';
document.body.appendChild($img);
$('#'+$img.id).draggable();
removeCard(i);
return $img;
}
// deal randomly - works
function randomCard() {
return Math.floor(Math.random() * numberOfCardsInDeck);
}
function removeCard(c)
{
for (j=c; j <= numberOfCardsInDeck - 2; j++)
{
cardsInDeck[j] = cardsInDeck[j+1];
}
numberOfCardsInDeck--;
numberOfCardsInDeck--;
numberOfCardsInDeck--;
}
function handleDropEvent( event, ui ) {
alert("Fantastic! You chose " + ui.draggable.attr("id") + " to be your companion.");
// Here I want the id of the dropped object
}
</script>
</head>
<body>
<div id="container" div style="width:750px; margin:0 auto;">
<div id="page_content" style="left: 0px; top: 0px; width: 750px" class="auto-style8">
<!--Begin Assignment 10 --->
<div id="left" class="drop">
<img id="tardis" ></img>
</div>
<input type="button" value="Get Companions" id="deal" />
<div id="content" style="left: 0px; top: 0px; width: 750px">
</div>
</div>
</div>
</body>
</html>
It's supposed to generate 5 images, one of which can be selected to be dropped onto the target and generate an alert with the id of the image being dropped. Like I said, it works just fine in the fiddle - and the code is identical on the web page, so I don't understand what I'm doing wrong.
fiddle: http://jsfiddle.net/reaglin/FUvT8/6/
I ordered some code...and for me it worked
// global variables
var cardsInDeck = [],
numberOfCardsInDeck = 5;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";
//load "init" when document it's ready
$(document).on('ready',init);
function init() {
$( "#draggable" ).draggable({ containment: "#left"});
$('.drop').droppable( {drop: handleDropEvent});
}
$('#deal').click(function () {
dealAll();
});
$('#reset-pictures').click(function(){
$('img.drag').remove();
numberOfCardsInDeck = 5;
});
// deal 5 cards at once - works
function dealAll(){
// 5 cards max, no repeat cards
while(numberOfCardsInDeck){
var rand = randomCard();
dealCard(rand);
}
}
//deal cards - works
function dealCard(i) {
//create id, remove space id
var id_picture = (cardsInDeck[i] +'-'+i).replace(/\s/g, '');
//validate not exist image
if (!!$('img#'+id_picture).length) {
return;
}
var $img = $('<img/>', { src : "http://debsiepalmer.com/images/companions/" + cardsInDeck[i] + ".jpg", id : id_picture, class : 'drag', 'data-info': cardsInDeck[i]
})
$('body').append($img);
$('img.drag').draggable();
numberOfCardsInDeck--;
}
// deal randomly - works
function randomCard() {
return Math.floor(Math.random() * cardsInDeck.length);
}
// this is what to do when card drops in tardis
function handleDropEvent( event, ui ) {
alert(ui.draggable.attr("data-info"));
}
DEMO
JSFinddle
Are you linking to JQuery correctly in the live version? Sometimes when moving from a development area to a live system the references mess up, you can find out if a reference is working or not by viewing the source code and entering in the link into the URL.
This is how you fix it: Take all the javascript (from $ (init) to the alert()) and place it at the bottom of the loaded page, inside the body, after all the elements. This ensures that the javascript knows what named elements you are talking about.
I would like to emphasise that this is not a tip for writing good javascript. The problem arises because it's bad javascript to begin with. Well written pages do not rely on the position of the code within the page, rather the opposite in fact.
Postscript: I literally did the following: I came here after googling "drag and drop"; I didn't fully read the actual question; I went to the jfiddle; I copied all the code for my own purposes; I couldn't get it to work; I fixed it (just trial and error really); I fixed the bug which is still present even on the jfiddle page; and then I came back here to find out what the original query had been!
The other bug is the fact that you can't drag the images of "Romana I", "Romana II" and "Sarah Jane". As the code makes the array values the id of the image elements, maybe others can instantly spot what causes that problem.
I've created HTML and JavaScript files to display bulletgraphs, using the 'canvas' HTML5 tag. I've tried it in Chrome and it works nicely and changes width along with the size of the browser. I have to have this working in IE8, too, so I've used Excanvas, which is working in all except one way: when I resize the browser I get remnants of the valueIndicator. This only happens on IE8.
I've tried looking round for information on redrawing the canvas but I don't think this is the issue. Can anyone see where I'm going wrong, please?
EDIT
I'm keeping the complete code at the bottom, however, following advice I've cut my code down somewhat.
In IE8 it looks like this:
In Chrome it looks like this:
When I refresh the IE8 page it looks OK again.
Cut-down Bulletgraph.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bulletgraph</title>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>
<body>
<canvas id="graph1"></canvas>
<script src="Scripts.js"></script>
<script>
drawGraphs();
window.onresize=function() { drawGraphs() };
function drawGraphs() {
drawBulletGraph(getScreenWidth(),300,1000,350,"graph1");
}
</script>
</body>
</html>
Complete code:
Cut-down Scripts.js:
function drawBulletGraph (cwidth, left, right, loValue, id) {
var canvas=document.getElementById(id);
var cheight=30;
var multiplier=cwidth/(right-left);
canvas.width=cwidth;
canvas.height=cheight;
var valueIndicator=canvas.getContext("2d");
valueIndicator.lineWidth="1";
valueIndicator.moveTo((loValue-left)*multiplier,0);
valueIndicator.lineTo((loValue-left)*multiplier,cheight);
valueIndicator.fill();
valueIndicator.stroke();
}
function getScreenWidth () {
return (window.innerWidth || document.documentElement.clientWidth)/7;
}
Bulletgraph.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bulletgraph</title>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>
<body>
<canvas id="graph1"></canvas><br>
<canvas id="graph2"></canvas>
<script src="Scripts.js"></script>
<script>
drawGraphs();
window.onresize=function() { drawGraphs() };
function drawGraphs() {
drawBulletGraph(bgWidth(getScreenWidth()),300,400,450,600,700,1000,800,350,850,"graph1");
drawBulletGraph(bgWidth(getScreenWidth()),250,450,500,650,700,1200,600,350,850,"graph2");
}
</script>
</body>
</html>
Scripts.js:
function drawBulletGraph (cwidth, left, loRed, loAmber, hiAmber, hiRed, right, value, loValue, hiValue, id) {
var canvas=document.getElementById(id);
var cheight=16;
var colour="#008000";
if (value <= loRed || value >= hiRed)
{
colour="#FF0000";
}
else if (value <= loAmber || value >= hiAmber)
{
colour="#FFA500";
}
var multiplier=cwidth/(right-left);
canvas.width=cwidth;
canvas.height=cheight;
var red=canvas.getContext("2d");
red.fillStyle="#F4C3C6";
red.fillRect(0,0,cwidth,cheight);
var amber=canvas.getContext("2d");
amber.fillStyle="#F4F6C6";
amber.fillRect((loRed-left)*multiplier,0,(hiRed-loRed)*multiplier,cheight);
var green=canvas.getContext("2d");
green.fillStyle="#CCE5CC";
green.fillRect((loAmber-left)*multiplier,0,(hiAmber-loAmber)*multiplier,cheight);
var valueIndicator=canvas.getContext("2d");
valueIndicator.fillStyle=colour;
valueIndicator.strokeStyle=colour;
valueIndicator.lineWidth="2";
valueIndicator.moveTo((loValue-left)*multiplier,0);
valueIndicator.lineTo((loValue-left)*multiplier,cheight);
valueIndicator.moveTo((loValue-left)*multiplier,cheight/2);
valueIndicator.lineTo((hiValue-left)*multiplier,cheight/2);
valueIndicator.moveTo((hiValue-left)*multiplier,0);
valueIndicator.lineTo((hiValue-left)*multiplier,cheight);
valueIndicator.moveTo(((value-left)*multiplier)-(cheight/2),cheight/2);
valueIndicator.stroke();
valueIndicator.lineWidth="1";
valueIndicator.lineTo((value-left)*multiplier,cheight);
valueIndicator.lineTo(((value-left)*multiplier)+(cheight/2),cheight/2);
valueIndicator.lineTo((value-left)*multiplier,0);
valueIndicator.lineTo(((value-left)*multiplier)-(cheight/2),cheight/2);
valueIndicator.fill();
valueIndicator.stroke();
}
function getScreenWidth () {
return window.innerWidth || document.documentElement.clientWidth;
}
function bgWidth (screenWidth) {
var graphWidth=screenWidth/7;
if (graphWidth<70) {graphWidth=70;}
if (graphWidth>260) {graphWidth=260;}
return graphWidth;
}
I've managed to get a solution. It feels like a bit of a hack but it does the trick. Basically it involves drawing a white line round the canvas and filling it each time it's drawn again. The following code goes between the var valueIndicator=canvas.getContext("2d"); and the valueIndicator.lineWidth="1"; lines:
valueIndicator.fillStyle="#FFFFFF";
valueIndicator.strokeStyle="#FFFFFF";
valueIndicator.moveTo(0,0);
valueIndicator.beginPath();
valueIndicator.lineTo(0,cheight);
valueIndicator.lineTo(cwidth,cheight);
valueIndicator.lineTo(cwidth,0);
valueIndicator.closePath();
valueIndicator.fill();
valueIndicator.stroke();
valueIndicator.strokeStyle="#000000";
I've tried it in the full code and it works. If anyone has a more elegant solution, and I'm sure there must be many, I would still love to see them.
When I run the app on the device I get no error (well nothing occurs at all) as there is no debug console but when I run the app in the browser I get "Titanium is not defined"
Is there a js file I need to include?
I got the camera code from here:
http://www.mindfiresolutions.com/Capture-Image-with-device-camera-in-IPhoneAndroid-application-using-Titanium-1912.php
I call it from an html file from webview.
I created a new project from scratch and I get he same error. This is so frustrating:
in html:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0 maximum-scale=1.0; user scalable=0;">
<title>Notes</title>
<script language="JavaScript" type="text/javascript">
function play(locid) {
Ti.App.fireEvent('play', {
locid : locid
});
}
</script>
</head>
<body>
<a id="Home" onclick ="play(125)" title = "" > hello </a>
</body>
</html>
in app.js:
Ti.App.addEventListener('play', function(e)
{
alert(e.locid);
});
Uncaught ReferenceError: Ti is not defined in the HTML file!!!
That code has a number of things preventing it from working as a standalone app.js. I want to address a couple of the concerns brought up by it, and then I'll directly address the app.js so you can get on your way.
First, "Ti.UI.currentWindow" is how you get a reference to a window in a situation like this:
In the file "app.js", you have:
var win = Ti.UI.createWindow({
url: 'win.js'
});
win.open();
And in "win.js", you have:
var win = Ti.UI.currentWindow;
win.add(Ti.UI.createLabel({
text: 'Hello, world!', textAlign: 'center',
color: '#000'
}));
But structuring your apps like that isn't the recommended approach anymore. If you're starting fresh, start right -- with Alloy. http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Quick_Start
If all you really care about is getting the example to work, below is the code updated to work:
//Define the current window
var myWin = Ti.UI.createWindow({
backgroundColor: 'white'
});
//Define the button to activate camera
var cameraBtn = Ti.UI.createButton({
title: 'Click to activate Camera',
top: 10 //Set the button position on the screen
});
cameraBtn.addEventListener('click', function () {
//Activate camera
Ti.Media.showCamera({
success: function (event) {
//Holds the captured image
var capturedImg = event.media;
// Condition to check the selected media
if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
//Define an image view with captured image
var imgView = Ti.UI.createImageView({
left: 10,
width: 250,
height: 250,
image: capturedImg //Set captured image
});
//Add the image to window for displaying
myWin.add(imgView);
}
},
cancel: function () {
//While cancellation of the process
},
error: function (error) {
// If any error occurs during the process
}
});
});
myWin.add(cameraBtn);
myWin.open();
use "Titanium" instead of "Ti" in WebView HTML code.
i need some tweaking advice since i'm not familiar with javascript and jquery. i want to add a notification on top of my page when it loads. for example when i load my home page (index.html) i want the notification to appear.
the current example only pop up the notification when i click the button. i want it to appear when i load the page. can someone help me out? im kinda interested in this notification bar.
i got it from http://tympanus.net/Development/jbar/
my current code is like this (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery Plugin jBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
</head>
<body>
<div class="content">
<a id="msgup" class="button">Demo Top</a>
</div>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.bar.js" type="text/javascript"></script>
<script>
$("#msgup").bar({
color : '#1E90FF',
background_color : '#FFFFFF',
removebutton : false,
message : 'Your profile customization has been saved!',
time : 4000
});
</script>
</body>
</html>
and the jquery.bar.js file :
(function($) {
$.fn.bar = function(options) {
var opts = $.extend({}, $.fn.bar.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
$this.click(function(e){
if(!$('.jbar').length){
timeout = setTimeout('$.fn.bar.removebar()',o.time);
var _message_span = $(document.createElement('span')).addClass('jbar-content').html(o.message);
_message_span.css({"color" : o.color});
var _wrap_bar;
(o.position == 'bottom') ?
_wrap_bar = $(document.createElement('div')).addClass('jbar jbar-bottom'):
_wrap_bar = $(document.createElement('div')).addClass('jbar jbar-top') ;
_wrap_bar.css({"background-color" : o.background_color});
if(o.removebutton){
var _remove_cross = $(document.createElement('a')).addClass('jbar-cross');
_remove_cross.click(function(e){$.fn.bar.removebar();})
}
else{
_wrap_bar.css({"cursor" : "pointer"});
_wrap_bar.click(function(e){$.fn.bar.removebar();})
}
_wrap_bar.append(_message_span).append(_remove_cross).hide().insertBefore($('.content')).fadeIn('fast');
}
})
});
};
var timeout;
$.fn.bar.removebar = function(txt) {
if($('.jbar').length){
clearTimeout(timeout);
$('.jbar').fadeOut('fast',function(){
$(this).remove();
});
}
};
$.fn.bar.defaults = {
background_color : '#FFFFFF',
color : '#000',
position : 'top',
removebutton : true,
time : 5000
};
})(jQuery);
Im certain the index.html is in need of change as to how it loads the notification. but i dont know what to edit. please help as i want to learn this.
The quick and dirty way would be to call
$("#msgup").click();
right after you do all of your
$("#msgup").bar({
...
});
stuff.
I see the plugin only adds a click event listener. So you can fake a click in index.html, add this code immediately before </head>:
<script> $(document).ready(function(){ $("#msgup").trigger('click') }); </script>
And it will work.
$(document).ready(function(){
$("#msgup").bar({
color : '#1E90FF',
background_color : '#FFFFFF',
removebutton : false,
message : 'Your profile customization has been saved!',
time : 4000
});
});
I have a simple html page with some javascript where if i click a link, it will show a flash video in a div using the swfobject.embedSWF function.
I did a test:
Uninstalled flash from my machine, then reloaded the page and clicked the link...I correctly saw no video.
I then installed flash and came back to the same page (no reload) and the embed still won't work.
I know in swfobject 1.5 (I'm now using 2.2), I would be able to embed the swf after the user installs flash, but now the user needs to reload the page in order to get the flash to appear. This is not good for my current situation, anyone know what is going on here?
Here is sample code using a youtube video:
<!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="en" lang="en">
<head>
<title>SWFOBJECT TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' type='text/javascript'></script>
<style>
#link{
display:block;
margin-bottom:10px;
}
#videoContainer{
width:610px;
height:360px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#link").click(function(){
var flashVars = {};
var params = {};
flashVars["lang"] = "en";
params["menu"] = "false";
params["wmode"] = "opaque";
params["allowScriptAccess"] = "always";
params["allowFullScreen"] = "true";
params["bgcolor"] = "#fff";
//add video
swfobject.embedSWF("http://www.youtube.com/v/uZ0LL1SJ-6U?enablejsapi=1&playerapiid=ytplayer", "videoContainer",640, 480, "9.0.0", null, flashVars, params,{});
});
});
</script>
</head>
<body>
Click me
<div id="videoContainer"></div>
</body>
</html>
If you take your swfEmbed call out of the jquery, it works. I didn't really delve in to far, but I did this:
Click me
I made a new function called replaceDiv, which basically just does everything you are already doing in your jquery click function.
function replaceDiv () {
var flashVars = {};
var params = {};
flashVars["lang"] = "en";
params["menu"] = "false";
params["wmode"] = "opaque";
params["allowScriptAccess"] = "always";
params["allowFullScreen"] = "true";
params["bgcolor"] = "#fff";
//add video
swfobject.embedSWF("http://www.youtube.com/v/uZ0LL1SJ-6U?enablejsapi=1&playerapiid=ytplayer", "videoContainer",640, 480, "9.0.0", null, flashVars, params,{})
}
I then removed all of your existing JS and VOILA- works every time.
Let me know if you want me to actually try to debug your JQuery; I might add that it looks perfectly fine. You may be needing something else, I don't know.
-A
ps. Squarepusher is a BEAST. :P