Wow a brand New Editor in Blogspot, I love the way Blogspot is giving flexibility to the blooger, by this blog Template Editor we can Edit HTML code very easily unlike in previous days it was a simple text editor but now with Line number and color code for each code it is quit easy to Modify as like .
I love this change, thanks Google I love this Editor , guy’s have a look once, below is the Screen shot for Perusal:
I am sure you too goanna like this.
Cheers…..
Anand Tiwari
Hi guys today I have faced a requirement where I need to Scroll the content of one div to show all the content in it. Actually we had a Modal Popup which was displaying some sort of information based on link click by the user.
When ever we are going to show another html (web page) in modal popup we are facing this type of challenge as there in modal popup if you are scrolling by mouse the Parent page will get started scrolling. And hence here our JavaScript is helping as to achieve this functionality.
Lets say you have a div with lots of content (text and images or video) and your modal popup size is small to show them at once so in this case you need to do like below .
Here I have used a html table control for Demo purpose you can as you like just we need is the id of the div control which we are going to scroll. Like here ‘’dvcontainer” .
<table width="175px">
<tr>
<td>
<div style="position: relative; width: 175px; height: 160px;
border: 1px solid black;
overflow: hidden">
<div id="dvcontainer" style="position: absolute;
width: 170px; left: 0; top: 0">
<!--INSERT CONTENT HERE-->
<p>
Anand Mani Tiwari holds an Engineering degree in
Computer Science from BPUT and
has previously worked at NCPL Inc. and now working
at Orion Systems Integrators
Inc for a Client which is worlds Biggest Auditing
Company KPMG. He is a Software
Engineer and working on different Microsoft
Technologies like ASP.Net, WPF, Silverlight,
WCF... He is a Microsoft Certified Professional.
And recently Passed Microsoft Technology
Specialist Exam in HTML 5 with a Excellent
Score of 920/ 1000.
</p>
<p>
- <a href="http://www.2bexpert.com/p/about-me.html">
Click here to see his complete profile</a>
</p>
<!--END CONTENT-->
</div>
</div>
</td>
<td>
<a href="#" onmouseover="move('dvcontainer',1)"
onmouseout="clearTimeout(move.to)">
<img alt="Page Up" src="images/up.gif" border="0"></a>
<div style="height: 145px; display: block;
background: url(images/);">
</div>
<a href="#" onmouseover="move('dvcontainer',-1)"
onmouseout="clearTimeout(move.to)">
<img alt="Page Down" src="images/down.gif" border="0"></a>
</td>
</tr>
</table>
After this we need to write the code for Scroll the “dvcontainer” content. So here we go with JavaScript ….
<script type="text/javascript" language="javascript">
function move(id, spd) {
var obj = document.getElementById(id), max = -obj.offsetHeight +
obj.parentNode.offsetHeight, top = parseInt(obj.style.top);
if ((spd > 0 && top <= 0) || (spd < 0 && top >= max)) {
obj.style.top = top + spd + "px";
move.to = setTimeout(function () { move(id, spd); }, 20);
}
else {
obj.style.top = (spd > 0 ? 0 : max) + "px";
}
}
</script>
That’s it now you can see the div content is getting scroll on mouse hover of Up and Down image.
Required Images for this demo : 
I hope this post has helped you, please comment. Thanks
Hi Guys today I am going to show you how you can generate Thumbnail’s of any selected image dynamically by a C# class. This class is very handy in admin area development, where admin has to upload the images.
By this class you can generate not only Thumbnail but the real resource will also get saved in Servers folder which is handy to show the related big image as well.
We can use this Thumbnail Generator class by just calling the function GenerateThumbNail() and passing the required signatures (Parameters), we need to initiate the class first by Creating the instance first for that below is the code block:
public Helper hlp { get; set; } Let say we are having a ASP FileUpload control and ASP Button control to select desired file and send the same to server for making thumbnail of selected image.
Below is the *.aspx code:
<fieldset>
<legend>Thumbnail Generator</legend>
<asp:FileUpload ID="flUpload" runat="server" /><asp:Button ID="btnUpload"
runat="server" Text="Upload" onclick="btnUpload_Click" />
</fieldset>
it will generate a html page like below:
Now our Fileupload control having the Sorce file after selecting Image file from local Server (User Computer).
On Upload Button Click by user below mentioned code required:
protected void btnUpload_Click(object sender, EventArgs e)
{
hlp = new Helper();
hlp.GenerateThumbNail(flUpload.PostedFile, "thumbFile",300);
}
Below is the required Class for Generating Thumbnail:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
using System.Drawing.Drawing2D;
/// <summary>
/// Summary description for Helper
/// </summary>
public class Helper
{
public Helper()
{
//
// TODO: Add constructor logic here
//
}
public void GenerateThumbNail(HttpPostedFile srcFile,string thumbNailFolder,int width)
{
HttpPostedFile myFile = srcFile;
string filename = srcFile.FileName;
int oFileLength = myFile.ContentLength;
if (oFileLength != 0)
{
int i = filename.LastIndexOf("\\");
filename = filename.Substring(i + 1);
filename = DateTime.Now.Hour + "-" + DateTime.Now.Minute + "-" + DateTime.Now.Second + "-" + filename;
string thumb_filename = "thumb_"+DateTime.Now.Hour + "-" + DateTime.Now.Minute + "-" + DateTime.Now.Second + "-" + filename;
byte[] myData = new Byte[oFileLength];
myFile.InputStream.Read(myData, 0, oFileLength);
System.IO.FileStream newFile
= new System.IO.FileStream(HttpContext.Current.Server.MapPath("~/images/") + filename,
System.IO.FileMode.Create);
newFile.Write(myData, 0, myData.Length);
newFile.Close();
System.Drawing.Image image =
System.Drawing.Image.FromFile(newFile.Name);
int srcWidth = image.Width;
int srcHeight = image.Height;
int thumbWidth = width;
int thumbHeight;
Bitmap bmp;
if (srcHeight > srcWidth)
{
thumbHeight = (srcHeight / srcWidth) * thumbWidth;
bmp = new Bitmap(thumbWidth, thumbHeight);
}
else
{
thumbHeight = thumbWidth;
thumbWidth = (srcWidth / srcHeight) * thumbHeight;
bmp = new Bitmap(thumbWidth, thumbHeight);
}
System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
System.Drawing.Rectangle rectDestination =
new System.Drawing.Rectangle(0, 0, thumbWidth, thumbHeight);
gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, GraphicsUnit.Pixel);
bmp.Save(HttpContext.Current.Server.MapPath("~/"+thumbNailFolder + "/" + thumb_filename));
bmp.Dispose();
image.Dispose();
}
}
}
And that’s it, now be sure to make two folders in you solution (Project). One for original Picture Upload and another one for Thumbnail file.
I am pasting Overall screen shot of Project which will help you :
Cheers…..
Regards,
Anand Tiwari
