jQuery virtual tour - an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour! FREE - released under the GPL licence.
No need for Flash, Quicktime ou Java. Your visitors will not have to install any software to experiment your virtual tour.
Advanced Panorama
This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated - navigation uses the standard html tags <map> and <area> in accordance with w3c.
jQuery virtual tour DEMO / jQuery virtual tour Article
Simple Pandora Viewer
This small plugin for jQuery offers display as an interactive panorama, all images of your page containing the class 'panorama'
simple pandora viewer DEMO / simple pandora viewer Article
Well, both article sample had there image on a page none of them show how to do it in a pop-up/lightbox image where you can do like this:
So how to do it? Take these simple steps.
1.) Choose what viewer to used. In this case we will just used Simple Pandora Viewer.
2.) Follow the Installation on how to used pandora viewer on this article
3.) Create a pop-up div where you can place your image. See this sample.
Place your image inside <div class="divTextHolder">. Just adjust the css of class divTextHolder to fit the image.
As you try to test your application it works well in Firefox and other browsers but in IE the image won't appear and u will be having trouble in your jquery.js or jquery-1.3.2.js
The following error will occur:
Ln 32 Col 4414 Invalid Argument
fx.elem.style[fx.prop]=fx.now+fx.unit
Ln 24 Col 1337 Invalid Argument
elem[name]=value
To resolve those ERROR you need to do the ff:
on the css of #light need to comment/remove display:none and write this scripts
In this scenario you have to display the div that holds image after the page is ready, coz when you have to display none on div the scripts can't fine the current position of image, but well you know this error will only appeared in IE. IE sucks.
-
Read More...
Problem in Jquery Virtual Tour when place inside a pop-up div.
CrossSlide image a Jquery plugin
CrossSlide is a neat plugin for JQuery that allows you to fade in from one image to the next, and even using some cool visual effects like panning. So I thought I would see how hard it is to set up and what sort of limitations is has (if any).
CrossSlide can do a few different things, depending on how it's called:
Slide + cross-fade
This is the kind of animation from which the plugin takes its name. Here is the jQuery code to set it up:
$(function() {
$('#test1').crossSlide({
speed: 45,
fade: 1
}, [
{ src: 'lib/sand-castle.jpeg', dir: 'up' },
{ src: 'lib/sunflower.jpeg', dir: 'down' },
{ src: 'lib/flip-flops.jpeg', dir: 'up' },
{ src: 'lib/rubber-ring.jpeg', dir: 'down' }
]);
});
Static cross-fade
Pretty simple effect, whose invocation is just as simple:
Notice how the sleep parameter has taken the place of speed, as there can be no speed in an image that's not moving. fade is still expressed in seconds and is additional to the sleep time. You cannot use both speed and sleep at the same time, because they mean different effects.
$(function() {
$('#test2').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: 'lib/sand-castle.jpeg' },
{ src: 'lib/sunflower.jpeg' },
{ src: 'lib/flip-flops.jpeg' },
{ src: 'lib/rubber-ring.jpeg' }
]);
});
Ken Burns effect
Finally, CrossSlide can be brought up to the full visual power of a Ken Burns effect: panning, zooming and fading to specific points, to guide the eye of the viewer and convey meaning:
$(function() {
$('#test3').crossSlide({
fade: 1
}, [
{
src: 'lib/sand-castle.jpeg',
href: 'http://flickr.com/photos/spacetrucker/94209642/',
from: '100% 80% 1x',
to: '100% 0% 1.7x',
time: 3
}, {
src: 'lib/sunflower.jpeg',
href: 'http://flickr.com/photos/hichako/1125341449/',
from: 'top left',
to: 'bottom right 1.5x',
time: 2
}, {
src: 'lib/flip-flops.jpeg',
href: 'http://flickr.com/photos/jayniebell/1125216143/',
from: '100% 80% 1.5x',
to: '80% 0% 1.1x',
time: 2
}, {
src: 'lib/rubber-ring.jpeg',
href: 'http://flickr.com/photos/ruminatrix/1125292682/',
from: '100% 50%',
to: '30% 50% 1.5x',
time: 2
}
]);
});
jquery.cross-slide.js(size: 11K; license: GPL; last updated on 14 May 2009)
See the jQuery documentation for more info.
Also visit gruppo4 for a nice sample demo.
Read More...
Email to Friend script and design for Asp.net
It's obviously important to give your readers a way to tell their friends and colleagues about your site - it's free advertising after all. That's why it is important to put the Email to Friends or Tell your Friends link at the top of every page of the site.
What we have here is just a link Email to Friend which open a pop-up div where user can enter their email address, the email addresses of his friends and a note(optional).
First thing we will do is to create the div.
<body>
<%--the link that will appear in the page--%>
<%--the div that will pop-up--%>
</body>
Second is to put a css for the div that pop-up.
#popUpDivEmail
{
border: 8px solid #5E5E5E;
font-size:12px;
left:50%;
margin:-185px auto 0 -155px;
padding:10px;
position:absolute;
top:50%;
width:300px;
z-index:10000001;
display:none;
}
.emailPopUp
{
color:#333333;
font-family:arial,helvetica,tahoma,verdana,sans-serif;
font-size:11px;
}
#EmailContainer
{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #CCCCCC;
height:370px;
position:static;
text-align:left;
width:298px;
}
#EmailTitleContainer
{
background:#F2F2F2 none repeat scroll 0 0;
height:13px;
padding:5px 10px;
position:relative;
}
#EmailTitleContainer a
{
color:#4C4C4C;
position:absolute;
right:10px;
text-decoration:none;
top:5px;
}
#the_form input, #the_form textarea
{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #BBBBBB;
color:#333333;
font-family:arial,helvetica,tahoma,verdana,sans-serif;
font-size:11px;
font-weight:normal;
line-height:1.4em;
margin:0 0 8px;
padding:3px;
width:272px;
}
.btn
{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #B5B5B5;
color:#333333;
cursor:pointer;
font-size:11px ;
font-weight:bold;
margin:0 2px;
padding:2px 4px;
width:60px;
}
#addthis-pop-email-btns .btn:hover
{
color:#41BBFF;
border: 1px solid #ececec;
}
#errorEmail
{
background:#F26D7D none repeat scroll 0 0;
border-bottom:1px solid #DF5666;
color:#FFFFFF;
padding:5px 10px;
display:none;
}
So have this script in the header
To get the latest js that we exported on the header just copy and paste this latest.js and create a new js file and save it as jquery.js.
The function openThis() and closeThis() are for opening and closing the pop-up div respectively.
In the sendThis() function notice the variable emailRegex, its a regular expression for email. We check first the email enter before we call the server side function EmailToFriend. Another thing is the variable emails = Toemail.split(/[;?,?]/) in function GetAllEmail() this variable will split all the Email To either the user input semicolon ; or comma , to separate the multiple emails. The last function will limit the user number of character inputed on the notes to 255 only.
Basically the form will look like this:
And last part is the sever side function EmailToFriend where sending of email will take place. This is just a simple asp.net C# code, you can have your own code in here depending on your scope and limitation on how you will have it.
public JsonResult EmailToFriend(string[] To_Email, string From_Email, string msg)
{
for (int i = 0; i < To_Email.Count(); i++)
{
MailMessage message = new MailMessage();
//subject
message.Subject = From_Email + " has shared something with you at Chenz101Tutorials";
string url = HttpContext.Request.UrlReferrer.ToString();
string body = msg + " " + url;
body += "P.S. This message was sent by" + From_Email + "via chenz101tutorials.blogspot.com";
//body
message.Body = body;
message.IsBodyHtml = true;
//from
message.From = new MailAddress(From_Email);
try
{
message.To.Add(To_Email[i]);
//Set SMTP Client
SmtpClient SmtpHost = new SmtpClient();
SmtpHost.EnableSsl = true;
SmtpHost.Host = "smtp.gmail.com";
SmtpHost.Port = 587;
NetworkCredential netCred = new NetworkCredential("username", "password");
SmtpHost.Credentials = netCred;
//Send Email
SmtpHost.Send(message);
}
catch (Exception ex)
{
return Json(false);
}
}
return Json(true);
}
Read More...
Customize lightbox for div element
Lots of thread i read about Lightbox says it wont work on the div element only on images. So i tried to customize some of the lighbox jqueries and its css, and ending up creating a new lightbox.js that adopts div element. This is the main content. To display a lightbox click here
To have a customize lighbox for div element simply:
1. Create the css file for the lightbox [ lightbox.css ].
2. Create the js file[ gsp_lightbox.js ].
3. Import the two file in your page header.
4. Have your html body. And on your hyperlink event ONCLICK add "showLightBox(); return false;" which will open the div lightbox. The div id="light" will contains all the information inside the popup div. Refer html body.
Below contains all the code you will be needed. { copy and paste }
lightbox.css
#fade
{
display: none;
background-color:#3E3E3E;
position: absolute;
top: 0%;
left: 0%;
z-index: 90;
width: 100%;
height: 500px;
-moz-opacity: 0.8;
opacity: 0.8;
filter : alpha(opacity=80);
}
#light
{
display: none;
position: absolute;
top: 0%;
left: 0%;
z-index: 100;
text-align: left;
width:100%;
}
.white_innerContent
{
background-color: #fff;
position: relative;
width: 560px;
height: 500px;
margin: 0 auto;
color:#333333;
}
.lightfoot
{
font-family:Arial,Helvetica,sans-serif;
background-color:#AD7032;
height:32px;
color:#fff;
font-weight:bold;
font-size:12px;
}
.divTextHolder
{
border: 15px solid #B2AD94;
overflow:auto;
width: 510px;
height: 440px;
padding:10px;
}
gsp_lightbox.js
/**
* customized lightbox for div element
* GSP
* http://chenz101tutorials.blogspot.com/
*/
function showLightbox() {
// Get page sizes
var arrPageSizes = currentPageSize();
// Get page scroll
var arrPageScroll = currentPageScroll();
// Style overlay and show it
$('#fade').css({
width: arrPageSizes[0] + 'px',
height: (arrPageSizes[1] + 100) + 'px'
}).fadeIn();
// calculate top and left offset for the jquery-lightbox div object and show it
$('#light').css({
top: (arrPageScroll[1] + (arrPageSizes[3] / 10)) + 'px',
left: arrPageScroll[0] + 'px'
}).show();
$(window).resize(function() {
// Get page sizes
var arrPageSizes = currentPageSize();
// Get page scroll
var arrPageScroll = currentPageScroll();
// Style overlay and show it
$('#fade').css({
width: arrPageSizes[0] + 'px',
height: (arrPageSizes[1] + 100) + 'px'
});
// Calculate top and left offset for the jquery-lightbox div object and show it
$('#light').css({
top: (arrPageScroll[1] + (arrPageSizes[3] / 10)) + 'px',
left: arrPageScroll[0] + 'px'
});
});
//Enable a support to keyboard navigation
$(document).keydown(function(objEvent) {
_keyboard_action(objEvent);
});
}
//get PageSize
function currentPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
};
function currentPageScroll() {
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScroll, yScroll);
return arrayPageScroll;
};
//close LightBox
function closeLightbox() {
$('#light').css('display','none');
$('#fade').fadeOut(function() { $('#fade').css('display', 'none'); });
// Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
$('embed, object, select').css({ 'visibility': 'visible' });
}
/**
* Perform the keyboard actions
*
*/
function _keyboard_action(objEvent) {
// To ie
if (objEvent == null) {
keycode = event.keyCode;
escapeKey = 27;
// To Mozilla
} else {
keycode = objEvent.keyCode;
escapeKey = objEvent.DOM_VK_ESCAPE;
}
// Get the key in lower case form
key = String.fromCharCode(keycode).toLowerCase();
// Verify the keys to close the ligthBox
if ((key == 'c') || (key == 'x') || (keycode == escapeKey)) {
closeLightbox();
}
}
html body
<body>
<%-- overlay --%>
<%-- the pop-up div starts here. --%>
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
<%-- the pop-up div ends here. --%>
</body>
well, it looks like this after.
Read More...
Hover effect over a div tag, Jquery
A hover effect will be applied usually on an image. Others have an image inside a div, its still an image which will be resize every mouse in and mouse out. What i have in here in this post will be a div with different element inside of it. It will expand the div and each element inside of it every mouse in and out.
First thing we need to have a html form which will serves our main page for this example.
What i have here is a div inside a div. The div id=card is the main container. Take a look of the styles i have in every div that holds my card information. It is so important to have that positioning of every element, you will know it on the later part of this post.
Next, we need to have the the latest jQuery library. And this AnimateMyDiv.js that i have below:
/*
-------------------------------------------------
FileName:AnimateMyDiv.js
Author: http://chenz101tutorials.blogspot.com/
-------------------------------------------------
*/
$(document).ready(function() {
DivSmall($(this).find('div.innercontainer').children());
$('ul.thumb li').hover(function() {
$(this).css({ 'z-index': '10' }); /*Add a higher z-index value so this image stays on top*/
DivBig($(this).find('div.innercontainer').children()); // this function call when mouse in
$(this).find('div.container').addClass('hover').stop()
.animate({
width: '500px', /* Set new width */
height: '300px', /* Set new height */
padding: '10px'
}, 100); /* this value of "200" is the speed of how fast/slow this hover animates */
}, function() {
$(this).css({ 'z-index': '0' }); /* Set z-index back to 0 */
$(this).find('div.container').removeClass('hover').stop()
.animate({
width: '250px', /* Set width back to default */
height: '150px', /* Set height back to default */
padding: '5px'
}, 200);
DivSmall($(this).find('div.innercontainer').children()); // this function called when mouse out
});
function DivBig(content) {
for (var i = 0; i < content.length; i++) {
var fontSize = parseFloat($(content[i]).css("font-size"));
var posTop = parseFloat($(content[i]).css("top"));
var posLeft = parseFloat($(content[i]).css("left"));
$(content[i]).css({ 'font-size': fontSize * 2 + 'px', 'top': posTop * 2 + 'px', 'left': posLeft * 2 + 'px' });
}
var contW = parseFloat($('div.innercontainer').width());
var contH = parseFloat($('div.innercontainer').height());
}
function DivSmall(content) {
for (var i = 0; i < content.length; i++) {
var fontSize = parseFloat($(content[i]).css("font-size"));
var posTop = parseFloat($(content[i]).css("top"));
var posLeft = parseFloat($(content[i]).css("left"));
$(content[i]).css({ 'font-size': fontSize / 2 + 'px', 'top': posTop / 2 + 'px', 'left': posLeft / 2 + 'px' });
}
var contW = parseFloat($('div.innercontainer').width());
var contH = parseFloat($('div.innercontainer').height());
$('div.innercontainer').css({ 'width': contW / 2 + 'px', 'height': contH / 2 + 'px' });
}
});
Copy the codes above and paste it in a js templates name the file AnimateMyDiv.js.
Import both JS in the <head> of the Info.aspx.
Take a look on the function DivBig() and function DivSmall(), see how important the positioning of each element. It may be tricky but thats the real score, it makes every element go small and big.
To make it complete heres the CSS:
Read More...
A fancy style for search suggestion
Apple is known to create beautiful products (next to the needed functionality of course).
The website from Apple isn't less: The layout is simple yet beautiful. Yet, one of the most awesome things about the website is the search functionality. It gives you suggestions (with images) about the several products they offer, making it really user-friendly.
Today, we're trying to recreate the effect from that website by creating a fancy apple.com-style search suggestion. Make sure you check out the demo (or visit Apple.com) to see this awesome effect work.
This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.
So here`s the nice and originally design search suggestion from Marcofolio.net
Type rest of the post here
Read More...
Redirecting Page using Jquery Timer
First and foremost, you might wondering whats the use of having these when we can use the predefine Response.Redirect([url]) method. Well, the main purpose of having this in Jquery is to allows you to set timer that fire an event after a certain amount of time. Asp.net equivalent has 'Application_BeginRequest' event where you can record the url path of the page and a Meta refesh TAG where you can set a time. But i feel more comfortable using this jquery timer, since i can also use this when im working on MVC. I will be creating a very simple example of how i do Jquery timer in redirecting page.
To begin with we need to have the the latest jQuery [compressed, 19kB] and Jquery timer inorder to work on timer.
We will be having two pages a Home.aspx and Info.aspx. The most common way in redirecting page with timer happens when you need to notify user and redirect her/him to a particular page. Or when an error occur while doing something you need to redirect the user.
Import both JS in the <head> of the Info.aspx.
Info.aspx page will hold the notification for the user. After 3 seconds it will be redirected to Home.aspx.
Here's the scripts how to use timer in redirecting a page.
On the form of Info.aspx, we just have the notification.
87
Read More...
Add and Remove a element dynamically in jQuery
What i have in here is a very simple add and remove textfield element. One has to click on the Add link and another textfield will be added. You can also use these if you need to add another element like a button or a dropdownlist at the same time remove it dynamically.
So first thing we need to have these files to begin:
- the latest jQuery [compressed, 19kB]
- jQuery Plugin: highlightFade [8kB] this is optional just to give a little highlight effect when adding elements)
Now we gonna import both JS in the <head> of my html doc.
Then, create a table with a <div> nested inside the <td> . Also create an <a> tag that will be used to generate the form. The <input type=”hidden”> is required in order to ensure a unique id is assigned to every newly generated form elements.
<table>
<tr>
<td/>
<td colspan="3">
Add
</td>
</tr>
<tr>
<td> Blog(s): </td>
<td>
//target div were blog dynamic fields added
</td>
</tr>
<tr>
<td/>
<td colspan="3">
Add
</td>
</tr>
<tr>
<td> Social Network(s): </td>
<td>
//target div were social dynamic fields added
</td>
</tr>
</table>
Next, the JS code for adding the form. The form element being added is wrapped inside a <p> with an id corresponding each row. Actually we can use <td> and create a table inside a <div>, but right now we just stick on the <p>.
The simple jQuery function used here is $().append(). At the same time, we also create a ‘Remove’ anchor right next to the elements we added. These anchor will be used to invoke the function to remove the particular row. Next, a nice little highlight effect is added to the <p> using highlightFade jQuery plugin and finally the value of <input type=”hidden” id=”id”> is incremented. I had an IF statment to check if that field is for the blog or for the social network.
function addFormField(type) {
var id = document.getElementById("id").value;
if (type == "blog") {
$("#divTxt").append("");
}
else {
$("#divSocial").append("");
}
$("#brow" + id).highlightFade({
speed: 1000
});
$("#srow" + id).highlightFade({
speed: 1000
});
id = (id-1) + 2;
document.getElementById("id").value = id;
}
Finally, the JS code for removing form elements. Basically, what this function does is remove the
that wrapped the form elements, using jQuery function $().remove(). As a result, everything will be removed safely (not hidden) from the form. This can be seen when you submit the form; only values from the visible text fields are sent to the browser.
function removeFormField(id) {
$(id).remove();
}
-87
Read More...
Drag and Drop in javascript, and Save persisting position using ASP.net
Drag and Drop are one of the few jQuery's UI Library. jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
To make use of Draggables, you need to download the UI library and then use the ui.core and ui.draggable files along with jquery:
<script src="script/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="script/ui.core.min.js" type="text/javascript"></script>
<script src="script/ui.draggable.min.js" type="text/javascript"></script>
There are lots of demos you can see in some site about this drag and drop interactions of the elements but i think only few can give on how to save the persisting position of the dragged item across Postbacks, or even sessions.
So we need to have a simple example of asp.net form.
<form id="form1" runat="server">
<div id="div1" style="border: 1px solid blue; text-align: center; width: 100px; height: 20px;">
Move this text
</div>
</form>
Basically it looks like this:
The Javascript that makes the div draggable:
<script type="text/javascript">
$(function() {
$("#div1").draggable({
drag: function(event, ui) {
$("#div1").css("opacity", "0.6"); // Additional css. Transparency when drag.
},
stop: function(event, ui) {
saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, ui.helper.attr('id'));
$("#div1").css("opacity", "1.0"); // Additional css. Full opacity when stopped
},
cursor: "move"
});
});
</script>
Take a look on the stop callback event a saveCoords() function will be called with 3 arguments are supplied: the x coordinate, y coordinate and the id of the current draggable - ui.helper.attr('id'). And here what that function does:
function saveCoords(x, y, el, id) {
$.ajax({
type: "POST",
url: "Coordinates.asmx/SaveCoords", // the function inside the handler
data: "{x: '" + x + "', y: '" + y + "', element: '" + el + "', userid: '1'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (response.d != '1') {
alert('Not Saved!');
}
},
error: function(response) {
alert(response.responseText);
}
});
}
This function makes a call to a Web Service called Coordinates, invoking its method, [url:]SaveCoords(). It passes [data:] in the x and y coordinates, the id of the element and a user ID (hardcoded for thos example, bit could be provided by a session variable, for instance). Here's the Web Service:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Data.SqlClient;
using System.Data;
///
/// Summary description for Coordinates
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
[ScriptService]
public class Coordinates : WebService
{
private String conString = System.Configuration.ConfigurationManager.ConnectionStrings["dragCon"].ConnectionString;
[WebMethod]
public int SaveCoords(int x, int y, string element, int userid)
{
int result = 0;
using (SqlConnection conn = new SqlConnection(conString))
{
string query = "UPDATE Coords SET xPos = @xPos, yPos = @yPos WHERE Element = @Element AND UserID = @UserID";
using (SqlCommand cmd = new SqlCommand(query, conn))
{
cmd.Parameters.AddWithValue("xPos", x);
cmd.Parameters.AddWithValue("yPos", y);
cmd.Parameters.AddWithValue("Element", element);
cmd.Parameters.AddWithValue("UserID", userid);
conn.Open();
result = (int)cmd.ExecuteNonQuery();
}
}
return result;
}
Note: in this sample i already had a database Drag in my server and a table name Coords with four fields xPos, yPos, Element and a UserID.
The WebMethod simply takes the arguments passed to it and saves them to the database. It returns the number of rows affected for error checking. Great. So the position of the element is saved. How does that get translated to a draggable being positioned where it was left when the page is next requested by the user with the ID of 1? We need another Web Method:
[WebMethod]
public DataSet GetSavedCoords(int userid)
{
DataSet dt = new DataSet();
string query = "SELECT xPos, yPos, Element FROM Coords WHERE UserID = '" + userid + "'";
SqlConnection con = new SqlConnection(conString);
SqlCommand cmd = new SqlCommand(query, con);
con.Open();
SqlDataAdapter sda = new SqlDataAdapter(cmd);
sda.Fill(dt);
return dt;
}
Taking the User ID as an argument, this method returns a DataSet filled with the positions of all elements saved against the user, and it is invoked in the Page_Load() event in the Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
Coordinates coords = new Coordinates();
DataSet dt = coords.GetSavedCoords(1);
using(DataTableReader reader = dt.CreateDataReader())
{
while (reader.Read())
{
HtmlGenericControl ctl = (HtmlGenericControl)this.FindControl(reader["element"].ToString());
if (ctl != null)
{
ctl.Style.Add("left", reader["xPos"].ToString() + "px");
ctl.Style.Add("top", reader["yPos"].ToString() + "px");
}
}
}
}
The Web Service class is instantiated and its GetSavedCoords() method is called. For each row in the returned DataSet, an element on the page is sought with the same id as one saved in the database. If it is found, it has a dash of CSS applied to it through Attributes.Add(). These set the CSS top and left values. When the page is rendered again, the text is exactly where it was left last time.
- Read More...