I've built a really simple drag and drop activity.
When an answer is dropped on the drop area, its id is stored in a variable called 'answer'.
When the submit button is hit it runs a function called validate which checks if the variable answer has an id of 'correct' stored inside of it.
The problem is, when I hit the submit button it doesn't run the validate function because it says 'the variable answer is not defined'.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yay for drap and drops!</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style> div {
height: 100px;
width: 100px;
border: solid 2px #000;
margin: 10px;
}
</style>
<script>
$(document).ready(function() {
$("#correct").draggable(); //I have drag capability now!
$("#wrong").draggable(); //I have drag capability now!
$("#dropArea1").droppable({
drop: function(event,ui) {
var answer = ui.draggable.attr("id");
console.log(answer);
}
});
});
</script>
</head>
<body>
<div id="correct">
<p>CORRECT ANSWER</p>
</div>
<div id="wrong">
<p>WRONG ANSWER</p>
</div>
<div id="dropArea1">
<p>I'm the drop area</p>
</div>
<script>
function validate() {
if (answer == ("#correct")) {
window.location.replace("www.google.com") //correct! redirect web page to next activity
}
else {
window.alert("Incorrect, try again") //incorrect, try again
}
}
</script>
<button onclick="validate()">Submit</button>
</body>
</html>
One option to fix this is to define the variable answer outside of the $(document).ready() scope, like this:
var answer = null;
$(document).ready(function() {
$("#correct").draggable(); //I have drag capability now!
$("#wrong").draggable(); //I have drag capability now!
$("#dropArea1").droppable({
drop: function(event,ui) {
answer = ui.draggable.attr("id");
console.log(answer);
}
});
Related
I'm working on a drag and drop project where items can be added to a work area and dragged to be positioned. I am trying to use a key code to create multiple of the same kind of element, all of which can be dragged. The jQuery function works as long as the draggable element is created when the page loads, but if it's created using a function, the draggable() method isn't working on it. Is there a way to get the function to recognize the element created with a function?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Draggable Div Test</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.test {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="area" style="border: 1px solid black; width: 500px; height: 500px;"> </div>
<script>
var area = document.getElementById("area");
function duplicate(e) {
switch(e.keyCode) {
case 49:
var test = document.createElement("div");
test.classList.add("test");
test.classList.add("draggable");
console.log(test.classList)
test.style.backgroundColor = "blue";
area.appendChild(test);
break
}
}
document.addEventListener("keydown", duplicate)
$( function() {
$( ".test" ).draggable();
} );
</script>
</body>
</html>
Thanks
jQuery draggable has a function called clone:
$(function() {
i = 0
$("#draggable").draggable({
helper: 'clone',
appendTo: "#droppable",
});
$("#droppable").droppable({
accept: "#draggable",
});
i++;
var $obj = ui.helper.clone().attr( 'data-name', 'newelementdropped' +i).draggable({
stop : function (event, ui) {
YOUR CODE
});
}
See this answer: Jquery draggable(), clone() to append div...Pls Fiddle my jsfiddle
Just re-initalize the plugin after you insert the element.
Something like:
$(".test").draggable("destroy").draggable();
This question already has an answer here:
Disable right click on specific <div> or class="" [closed]
(1 answer)
Closed 5 years ago.
I am looking for a solution to disable right click over a specific div. I have this code that does this, but it also display an alert (i fixed this) and it works on the whole page.
<script language="JavaScript">
<!--
//Disable right mouse click Script
//By Oscar Frank
//For full source code, visit http://www.oscarmini.com
var message="";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("return false")
// -->
</script>
Can someone help me make this work only one or more specific divs? Thanks! I am a noob.
On the div that you are trying to disable right click events, you can just add this:
oncontextmenu="return false;"
Example:
<div oncontextmenu="return false;">This div won't have the right click menu</div>
You have to add an event on the specific div ( you can get the div by id document.getElementById ) and add an event listener for contextmenu.
Example:
document.getElementById("divId").addEventListener("contextmenu ", function(){
console.log("Right Click");
return false;
});
All you want to do is disable right mouse click in specific div as I understand.
You can use the jQuery plugin for that. Here is the code that you can refer.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
border: 2px solid black;
height: 100px;
}
</style>
</head>
<body>
<div id="demo">
This is the Phone and NO ONE SHOULD RIGHT CLICK THIS! >:)
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('#demo').bind('contextmenu', function(e) {
return false;
});
</script>
</body>
</html>
I've been trying to use JqueryUIs resizable to create resizable divs like on jsfiddle for example. Jsfiddle makes use of JqueryUI resizable with handles so that you can expand the code editor or the output area displaying the dhtml results (a design etc). I've just about tried every solution given to others who experience problems working with jquery ui's resizble. Is there a way to create a resizable div with CSS only and have a custom handle? I've tried this as well and it's not working either http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/ but it's what I'm looking for; two divs, one containing the main content and the other containing sidebar stuff. I made a fiddle quickly of that solution given here: http://jsfiddle.net/asx4M/1/ I would appreciate it if someone could tell me what it is I'm doing wrong or provide me with another solution for what I'm trying to do.
here's the code as well:
<!DOCTYPE html>
<html>
<head>
<style>
#sidebar {
width: 49%;
}
#content {
width: 49%;
float: left;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery- ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$( "#sidebar" ).resizable({
});
$("#sidebar").bind("resize", function (event, ui) {
var setWidth = $("#sidebar").width();
$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);
});
});
</script>
</head>
<div id="sidebar">
<div class="sidebar-menu">
<!-- all your sidebar/navigational items go here -->
</div>
</div>
<div id="content">
<!-- all your main content goes here -->
</div>
$('#content).width(1224-setWidth);
$('.menu).width(setWidth-6);
Should be
$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);
The problem is with the quotes that you have not closed. for menu class and content id
$(document).ready(function() {
$( "#sidebar" ).resizable({
});
$("#sidebar ").bind("resize", function (event, ui) {
var setWidth = $("#sidebar").width();
$('#content').width(1224-setWidth);
$('.sidebar-menu').width(setWidth-6);
});
});
I'd like that somebody could give me an heads-up with the code to achieve this events:
User clicks a button;
Button disappears;
Text fades in saying "Saved!" in the SAME POSITION of the button;
Text fades out;
Button (from 2nd step) reappears.
Here's the code of the button:
<input type="submit" name="gravarpalp" value="Save" />
Thanks in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#saveme').click(function() {
$('#saveme').fadeOut('slow', function() {
$('#saved').fadeIn('slow', function() {
$('#saved').fadeOut('slow', function() {
$('#saveme').fadeIn('slow', function() {
});
});
});
});
});
});
</script>
</head>
<body>
<div id="saved" style="position:absolute;top:10px;left:10px;display:none">Saved</div>
<input type="submit" name="gravarpalp" value="Save" id="saveme" style="position:absolute;top:10px;left:10px;"/>
</body>
</html>
I would use jquery to accomplish this.
First, put the controls inside of a div with the following css properties set
<div>
<span id="fadeSpan" style='position: relative; display: none;>Saved!</span>
<input id="fadeButton" type="submit" name="gravarpalp" value="Save" style='position: relative;' onclick='fadeEffect();' />
</div>
Then add the following function in a script tag. This isn't tested though, it's just to get you started.
function() fadeEffect(){
$('#fadeButton').fadeToggle();
$('#fadeSpan').fadeToggle();
setTimeout(function(){
$('#fadeButton').fadeToggle();
$('#fadeSpan').fadeToggle();
}, 3000);
}
Check out this link. Looks like you should just be able to set the ForeColor of a Label to a color value that has a different alpha value.
button1.Visible = false;
//make label fade in (alpha value++)
//once opacity reaches 255, make it fade out (alpha value--)
button1.Visible = true;
I think you will need some sort of timer so the fade in and out isn't so instant. I'll try explaining better if you need.
EDIT: Sorry, I assumed this was a WinForms app... This won't work for a web application. Try using jQuery or javascript.
http://jsfiddle.net/TDmRv/1/
What I want to do: I want the div with the id "theDiv" to be wrapped around the text that gets inputted onto the page. I want this so the text will appear in multiple divs that are created.
Explained more:
Okay, so what I am trying to do is type some input in and have it display with in a div- that works fine, but I want the div to wrap around it when I click input. So every time I click "add" the text gets wrapped into a div and is displayed. BUT I am also trying to make this appear multiple times, so every time I add input the div is wrapped around the text. Finally I am trying to have those two buttons placed into there, I assume those would have to be inserted when "add" is clicked with jQuery. I just need some guidance because I am struggling to comprehend how this will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#edit").click(function(){
$("#theDiv").css("background-color","red");
});
});
$(document).ready(function(){
$("#delete").click(function(){
$("#theDiv").remove();
});
});
$(document).ready(function(){
$("#add").click(function(){
$('#edit').wrap('<div class="theDiv" />');
});
});
</script>
<style>
#theDiv {
border: 1px solid rgb(204, 204, 204);
margin: 5px 0pt;
padding: 5px;
background-color: blue;
height:50px;
}
button {
float:right;
}
</style>
</head>
<body>
<div id="hold">
<button id="edit">Edit</button><button id="delete">Delete</button>
</div>
<form>
<div><textarea class="textI" id="textI2" style="width: 400px; height: 50px;"></textarea></div>
<div><input type="button" id="add"value="add" onclick="theDiv_append()" /></div>
</form>
<script language="javascript">
$('.textI').each(function() {
var default_value = this.value;
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
}
});
});
function theDiv_append() {
$('#theDiv').append($('#textI2').val());
}
</script>
</body>
</html>
try this , change #add click to this , it works in jsfiddle, just add the text, I didn't do that , but you will see how to add new blue div
$("#add").click(function(){
var newRow = $('#theDiv').clone();
$('#hold').append(newRow);
$('#edit').wrap('<div class="theDiv" />');
});
});