A taste of jQuery UI with dragging

Developer
Emily K
Size
3,408 Kb
Views
26,312
  1. A taste of jQuery UI with dragging Previews
  2. A taste of jQuery UI with dragging HTML Codes
  3. A taste of jQuery UI with dragging CSS Codes
  4. A taste of jQuery UI with dragging JS Codes

How do I make an a taste of jquery ui with dragging?

What is a a taste of jquery ui with dragging? How do you make a a taste of jquery ui with dragging? This script and codes were developed by Emily K on 09 September 2022, Friday.

A taste of jQuery UI with dragging Previews
IQ Test

A taste of jQuery UI with dragging - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A taste of jQuery UI with dragging</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>
<head>	<title>Codagogy Card-o-Matic</title>	<link rel="stylesheet" href="css/main.css" type="text/css">	<link rel="stylesheet" href="css/features.css" type="text/css">	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id='wrapper'>	<h1>Codagogy Card-o-Matic</h1>	<!-- Left side with all the controls -->	<div id='controls'>	<!-- Color picker -->	<h2>Pick a color</h2>	<div class='colors' id='red'></div>	<div class='colors' id='orange'></div>	<div class='colors' id='yellow'></div>	<div class='colors' id='green'></div>	<div class='colors' id='blue'></div>	<div class='colors' id='indigo'></div>	<div class='colors' id='violet'></div>	<div class='clearfix'></div>	<!-- Texture picture -->	<h2>Pick a texture</h2>	<div class='texture' id='paper'></div>	<div class='texture' id='swirls'></div>	<div class='texture' id='circles'></div>	<div class='texture' id='cloth'></div>	<div class='clearfix' id=''></div>	<!-- Message -->	<h2>Pick a message</h2>	<!-- Group together radio buttons by giving them a shared name -->
<input type='radio' class='messages' name='message' id='happy-birthday'>
<label for='happy-birthday'>Happy Birthday</label><br>
<input type='radio' class='messages' name='message' id='thank-you'>
<label for='thank-you'>Thank You</label><br>
<input type='radio' class='messages' name='message' id='congratulations'>
<label for='congratulations'>Congratulations</label><br>
<input type='radio' class='messages' name='message' id='miss-you'>
<label for='miss-you'>I miss you</label><br>	<!-- Recipient -->	<h2>Dear...</h2>	<input type='text' id='recipient' maxlength="14"><span></span>	<div id='recipient-error'></div>	<!-- Sticker picker -->	<h2>Click a sticker to add</h2>	<img class='stickers' src='images/sticker-green-gift.png' alt='Green gift sticker'>	<img class='stickers' src='images/sticker-heart.png' alt='Heart sticker'>	<img class='stickers' src='images/sticker-yellow-gift.png' alt='Yellow gift sticker'>	<img class='stickers' src='images/sticker-star.png' alt='Star sticker'>	</div>	<!-- Right side with the live preview -->	<div id='preview'>	<div id='card-background'>	<div id='canvas'>	<div id='message-output'></div>	<div id='recipient-output'></div>	</div>	</div>	<!-- Buttons -->	<input type='button' id='refresh-btn' value='Start over'>	<input type='button' id='print-btn' value='Print'>	</div>
</div>
<script src="js/card-o-matic.js"></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

A taste of jQuery UI with dragging - Script Codes CSS Codes

.colors {	width:30px;	height:30px;	cursor:pointer;	float:left;	margin-right:5px;
}
#red{	background-color:red;
}
#orange{	background-color:orange;
}
#yellow{	background-color:yellow;
}
#green{	background-color:green;
}
#blue{	background-color:blue;
}
#indigo{	background-color:indigo;
}
#violet{	background-color:violet;
}
.texture {	width:80px;	height:35px;	cursor:pointer;	float:left;	margin-right:5px;
}
#paper{	background-image: url('../images/texture-paper.png');
}
#swirls{	background-image: url('../images/texture-swirls.png');
}
#circles{	background-image: url('../images/texture-circles.png');
}
#cloth{	background-image: url('../images/texture-cloth.png');
}
#message-output {	text-align:center;	font-size:35px;	position:absolute;	top:100px;	height:50px;	width:100%;
}
#recipient-output {	text-align: :center;	font-size:30px;	position:absolute;	top:150px;	width:100%;
}
.stickers_on_card {	cursor:move;
}

A taste of jQuery UI with dragging - Script Codes JS Codes

/*------Color-----*/
$('.colors').click(function(){ var chosen_color = $(this).css('background-color'); $('#canvas').css('background-color', chosen_color); // BONUS! Also change the texture choices: changed .texture to #texture - let's see if this works $('#textures').css('background-color', chosen_color); });
/*-----Texture---*/
$('.texture').click(function(){ var chosen_texture = $(this).css('background-image'); $('#canvas').css('background-image', chosen_texture);
});
/*---Message---*/
$('.messages').click(function() { // Which radio button was clicked? var radio_button = $(this); // What is the label next to (i.e., after) that radio var label = radio_button.next(); // Now that we know the label, grab the text inside of it (That's our message!) var message = label.html(); // Inject the message into the #message-output div on the card $('#message-output').html(message); });
/*----Recipient-----*/
//my attempts
$('#recipient').keyup(function(){ //What did the user type in for the name? var recipient = $(this).val(); //Inject what the user typed in into the #recipient-output div in the card. $('#recipient-output').html(recipient); //Find out the length of what the user has typed in (also store that in a variable). var length = recipient.length; //console.log(recipient.length); //Use an If...else statement to see if the user's recipient is at the max characters (14). if(length==14){ $('#recipient-error').html("Max characters: 14"); } else{ $('#recipient-error').html(""); }
});
/*-----Stickers-----*/
//my attempt
$('.stickers').click(function(){ // var which_sticker = $(this).attr('src'); // var new_sticker = '<img scr " '+ which_sticker +'">'; var new_sticker = $(this).clone(); $('#canvas').prepend(new_sticker); //new_sticker.draggable({containment:'#canvas'}); //$('.new_sticker').draggable({containment:'#canvas'}); });
$( ".new_sticker" ).draggable({ opacity: 0.35 });
$(".new_sticker").draggable({containment:'#canvas'});
//Promblems to look into:
//1) stickers sticking but not dragging
//2) texture and color change on the card, but the texture sample images do not change color
A taste of jQuery UI with dragging - Script Codes
A taste of jQuery UI with dragging - Script Codes
Home Page Home
Developer Emily K
Username Emnk
Uploaded September 09, 2022
Rating 3
Size 3,408 Kb
Views 26,312
Do you need developer help for A taste of jQuery UI with dragging?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emily K (Emnk) Script Codes
Name
A Pen by Emily K
BOMP Test for WCC feedback
Map for event - simple
Bonus Features
Done - Monster Mash
Boston Middle Passage Profile Gallery Beta
Practice using Wixel
Fluid layout practice
Pick a texture
PHPiggy Bank
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!