Translate

Tuesday, 28 April 2015

Fancy Box IN Mvc


In Controller



public ActionResult FancyBox()
 {
            return View();

 }

In View



@{
    ViewBag.Title = "FancyBox";
}


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <link href="~/Content/css/jquery.fancybox.css" rel="stylesheet" />
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="~/Content/js/jquery.fancybox.js"></script>
             
        <script type="text/javascript">
                     $(document).ready(function(){
                           $(".fancyTrigger").fancybox();
                           $(".fancyTrigger").trigger('click');
                     });
              </script>
       
</head>

<body >
<a class="fancyTrigger" href="#TheFancybox"></a>
   
<div id="TheFancybox"><a href='http://www.google.com'><img src="~/Content/images/Chrysanthemum.jpg" /></a></div>
      
</body>
</html>


OUTPUT





Custom Dailog In MVC



IN Controller


public ActionResult Dailog()
  {
            return View();

  }


IN View


@{
    ViewBag.Title = "Dailog";
}
<html>

  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
<!--for dialogue-->
<!--for dialogue-->
    <link href="~/Content/css/dialog.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>         
    <script src="~/Content/js/dialog.js"></script>
</head>
<body onload="$('#add').dialog()">
<div class="greyRounded" style="width:550px; display:none;" id="add">
<div class="whiteRounded" style="height:480px;">
              <img src="~/Content/images/closeBtn.png" width="32" height="32" alt="" onclick="$('#add').dialog('close')" style="cursor:pointer; float:right;" />
    <img src="~/Content/images/Chrysanthemum.jpg" />
</div>
 
</div>
    
</body>
</html>

OUTPUT



How to share content in Twitter and facebook using jquery




<body>
    <form id="form1" runat="server">
        <div>
            <div class="g-plus" data-action="share" data-annotation="none" data-href="http://www.c-sharpcorner.com/">
            </div>
        </div>
        <input type="text" id="Content" />
        <span><input type="button" id="shareOnTwitter" value="Share on Twitter" />
        </span>
      
     <span>
    <input type="button" id="share_button" value="Share on Facebook" />

       
</span>

    </form>

</body>



Script to share on Twitter:



<script src="~/Scripts/jquery-1.7.1.min.js"></script>


<script type="text/javascript">
    $(function () {
        function newPopup(url) {
            var tempurl = 'https://twitter.com/intent/tweet?text=' + url
            popupWindow = window.open(
            tempurl, 'popUpWindow', 'height=400,width=600,left=300,top=80,resizable=no,scrollbars=no,toolbar=yes,menubar=no,location=no,directories=no,status=no')
        }
        $('#shareOnTwitter').click(function () {
            var text = $('#Content').val();
            newPopup(text);
        });
    })
</script>


Script to share on Facebook:

<script src="https://apis.google.com/js/plusone.js"></script>

<script src='http://connect.facebook.net/en_US/all.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<div id="fb-root">
</div>
<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: '598061640299091', status: true, cookie: true,
            xfbml: true
        });
    };
    (function () {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
</script>
<script type="text/javascript">
    $(document).ready(function () {
        var texts = $('#Content').val();
        $('#share_button').click(function (e) {
            e.preventDefault();
            FB.ui({
                 method: 'feed',
    name: 'Sample Application by Kavitha reddy',
    link: 'http://localhost:49600/',
    picture: 'Image/myimage.png',
    caption: 'This article developed by kavitha reddy',
    description: 'First of all make a new website in ASP.Net and add a new stylesheet and add .js files and put images in the images folder and make a reference to the page.',
            });
        });
    });
</script>


For Facebook share You should create application Id. for reference to create application id(AppId) see below URL