ASP.NET CLOUD: February 2014

Wednesday, 26 February 2014

Flex Slider With Animation "slide" and "Fade" Effect

FlexSlider 2 is the most powerful slider available. Fully responsive; Retina display support (image slider types only) (New); Easing effects (New) and more. The plugin requires jQuery 1.4.2 and above.

Flex Slider with Animation "Slide" Effect

Screen 1

Flex Slider with Animation "Fade" Effect

Screen 2

To Add Flex Slider you need to add this file in head tag :
1. flexslider.css
2. jquery-1.7.2.min
3. jquery.flexslider.js

Script :

HTML :

//Place this html code inside div tag
<h1>
                Flex Slider</h1>
            <div>
                //Place somewhere in the <body> of your page                 <h2 align="left" style="border-bottom: solid 1px white;">
                    Flex Slider Animation "slide" Effect
                </h2>
                <div id="flexSlide" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="Images/Screen 1.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 2.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 3.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 4.jpg" />
                        </li>
                    </ul>
                </div>
            </div>
            <div>
            <h2 align="left" style="border-bottom: solid 1px white;">
                    Flex Slider Animation "Fade" Effect
                </h2>
                <div id="flexsliderFade" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="Images/Screen 1.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 2.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 3.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 4.jpg" />
                        </li>
                    </ul>
                </div>
            </div>

General Notes

Two new methods are available for adding/removing slides, slider.addSlide() and slider.removeSlide(). More details about this coming soon.

slider.addSlide(obj, pos) accepts two parameters, a string/jQuery object and an index.
slider.removeSlide(obj) accepts one parameter, either an object to be removed, or an index.

For more details and properties visit : FlexSlider 2.2.2 Updates, General Notes, Examples, Properties

Download Link :

Download Complete Project Link

If you have any query feel free to comment it will be appreciated :)

Saturday, 22 February 2014

Tooltip on div Hover using onmouseover and onmouseout events

Here i am showing you how to create your own style tooltip in jquery. Its very simple to create different type of tooltip by changing it design style.

Screen 1

Here we are calling a jquery function on hover of div and call another function after hover out to hide that div.
We are using two event to call jquery function:

onmouseover
onmouseout

OnMouseOver - The onmouseover event fires when the mouse pointer go to the boundaries of the target object.

OnMouseOut - The onmouseout event fires when the mouse pointer leaves the boundaries of the target object.

Screen 2

CSS:

//CSS for hover div style
<style type="text/css">
        .hoverContiner
        {
            width: 215px;
            height: auto;
            margin-top: 20px;
            position: absolute;
            display: none;
            z-index: 10000;
            font-family: Arial;
        }
        .hoverDivSyle
        {
            float: left;
            width: 11px;
            height: 50px;
            background-image: url('Images/txt-corner.png');
            background-repeat: no-repeat;
            background-position: left 12px;
            position: absolute;
            left: -10px;
        }
        .hoverTextStyle
        {
            float: left;
            width: 180px;
            height: auto;
            background-color: #FFFFFF;
            border: solid 1px #cbcbcb;
            padding: 15px 10px 15px 10px;
            font-family: Arial;
            font-size: 12px;
            color: #222222;
            overflow: hidden;
        }
    </style>

HTML:

<div align="center">
        <h1 style="font-family: Arial; margin-bottom: 80px;">
            Tooltip On div Hover using onmouseover and onmouseout events</h1>
        //Calling function onmouseover and onmouseout
       // HoverDetails is the function which we need to pass current div id and message that you want to display in tooltip
        <div class="QuestionImg" id="divRoleDetails" onmouseover="HoverDetails(this.id,'Lorem ipsum dolor sit amet, cons ectet uer adipiscing elit. Lorem ipsum dolor sit amet, co nsect tuer adipiscing elit.');"
            onmouseout="HideHoverDetails();" style="background-color: rgb(152, 0, 0); height: 30px;
            padding-top: 10px; width: 150px; text-align: center; cursor:pointer; font-family: Arial; color: White;">
            Hover Me
        </div>
        //Hover Details div
        <div id="divHoverDetails" class="hoverContiner">
            <div class="hoverDivSyle">
            </div>
            <div id="divHoverDetailsText" class="hoverTextStyle">
            </div>
        </div>

Script:

you need to add jquery.min file.
Jquery CDN: http://code.jquery.com/jquery-1.10.2.min.js

<script type="text/javascript">

            function HoverDetails(divID, text) {
                debugger;
                var dvMouseover = $('#divHoverDetails');
                var offset = $('#' + divID).offset();
                var leftValue = offset.left;
                var topValue = offset.top;
                dvMouseover.css({ "top": (topValue - 25) + "px" });
                dvMouseover.css({ "left": (leftValue - -158) + "px" });
                $('#divHoverDetailsText').text(text);
                $(dvMouseover).stop().fadeIn(400); //Show tooltip
            }

            function HideHoverDetails() {
                document.getElementById('divHoverDetails').style.display = "none";
//Hide tooltip            }

        </script>

Download Link:

Download From Here

If you have any query feel free to comment it will be appreciated :)

Friday, 14 February 2014

How to Upload/Display Image in Picture Box using OpenFileDialog in c# .net

Introduction:

Browsing and displaying an image in picture box tool using Windows Forms application is a very simple task. In this application, we use the following classes/controls to do the b.

- OpenFileDialog
- PictureBox
- TextBox
- Button

Main Functions:

This functions simply perform the following steps:
1. Open a file dialog box so that a user can select an image from his/her machine
2. Browse the image
3. Display selected image in a picture box on a Form
4. Display image file path in text box

Screen Shot:

Screen 1

Screen 2

Screen 3

Source Code:

            //Initialize Componets
        public ImageUploadAndPreview()
        {
            InitializeComponent();
        }

        //When Button Click
        private void button1_Click(object sender, EventArgs e)
        {
            // open file dialog
            OpenFileDialog open = new OpenFileDialog();

            // Filter Image
            open.Filter = "Image Files(*.jpg; *.jpeg; *.gif;     *.bmp)|*.jpg; *.jpeg; *.gif; *.bmp";
            if (open.ShowDialog() == DialogResult.OK)
            {
                pbImage.Image = new Bitmap(open.FileName);
                pbImage.SizeMode = PictureBoxSizeMode.StretchImage;
                txtImage.Text = open.FileName;
            }
        }

What is an image filter?

Image filter is basically a filter that restrict user to select only valid image file. You can remove image filter.

Download Link

https://drive.google.com/file/d/0B7XVDU9gdC-lZGRjdENjMGpiNWs/edit?usp=sharing

If you have any query feel free to comment it will be appreciated :)