Rss Feed Like Us on facebook Google Plus
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

June 19, 2014

Accordion with Jquery Toggle

Accordion Displays Collapsible Content on very less space. I am going to give a demo of  accordion using JQuery Toggle.

You can achieve this also by using bootstrap. to see an advance version you can checkout CSS Tricks Website.

DEMO
Lorem Ipsum 1+
Lorem Ipsum 2+
Lorem Ipsum 3+

Code
<html>
<head>
<style>
.accordion_container {
    width: 500px;
}
.accordion_head
{
    background: linear-gradient(0deg, #F79711, #DC7E03) repeat scroll 0 0 #D07906;
    color: white;
    cursor: pointer;
    font-family: segoe ui;
    font-size: 15px;
    margin: 0 0 1px 0;
    padding: 7px 11px;
    font-weight: bold;
    background-color: #D07906;
}
 
.accordion_body h3
{
    background-color: #CCCCCC;
    font-size: 20px;
    font-variant: small-caps;
    margin: 0;
    padding: 5px;
}
.accordion_body a.anchorButton
{
    font-size: 14px;
    padding: 2px 15px;
    float: right;
    width: auto;
    height: auto;
}
.accordion_body
{
    background: #f1f1f1;
}
.accordion_body p
{
    padding: 8px;
    margin: 0px;
}
.plusminus
{
    float: right;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    //toggle the componenet with class accordion_body
    $(".accordion_head").click(function(){
        if ($('.accordion_body').is(':visible')) {
            $(".accordion_body").slideUp(600);
            $(".plusminus").text('+');
        }
        $(this).next(".accordion_body").slideDown(600);
        $(this).children(".plusminus").text('-');
    });
});
</script>
</head>
    <div class="accordion_container">
        <div class="accordion_head">Lorem Ipsum 1<span class="plusminus">+</span></div>
            <div class="accordion_body" style="display: none;">
            <p>Lorem Ipsum 1 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
            </div>
        <div class="accordion_head">Lorem Ipsum 2<span class="plusminus">+</span></div>
            <div class="accordion_body" style="display: none;">
            <p>Lorem Ipsum 2 .It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        <div class="accordion_head">Lorem Ipsum 3<span class="plusminus">+</span></div>
            <div class="accordion_body" style="display: none;">
            <p>Lorem Ipsum 3 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.   </p>
            </div>
 
    </div>
</html>


Read More

June 16, 2014

Remove HTML Tags from a String of HTML using C#

When a String contains HTML tags (may be using CKEditor) and want to display HTML string as Plain Text. You can achieve by using Regular Expression..

string noHTML = Regex.Replace(inputHTML, @"<[^>]+>|&nbsp;", "").Trim();
string noHTMLNormalised = Regex.Replace(noHTML, @"\s{2,}", " ");

 Note : A Regex cannot handle all HTML documents. An iterative solution, with a for-loop, may be best in many cases: always test methods.

 Alternative

    public static class HtmlRemoval
    {
        /// <summary>
        /// Remove HTML from string with Regex.
        /// </summary>
        public static string StripTagsRegex(string source)
        {
            return Regex.Replace(source, "<.*?>", string.Empty);
        }
 
        /// <summary>
        /// Compiled regular expression for performance.
        /// </summary>
        static Regex _htmlRegex = new Regex("<.*?>", RegexOptions.Compiled);
 
        /// <summary>
        /// Remove HTML from string with compiled Regex.
        /// </summary>
        public static string StripTagsRegexCompiled(string source)
        {
            return _htmlRegex.Replace(source, string.Empty);
        }
 
        /// <summary>
        /// Remove HTML tags from string using char array.
        /// </summary>
        public static string StripTagsCharArray(string source)
        {
            char[] array = new char[source.Length];
            int arrayIndex = 0;
            bool inside = false;
 
            for (int i = 0; i < source.Length; i++)
            {
                char let = source[i];
                if (let == '<')
                {
                    inside = true;
                    continue;
                }
                if (let == '>')
                {
                    inside = false;
                    continue;
                }
                if (!inside)
                {
                    array[arrayIndex] = let;
                    arrayIndex++;
                }
            }
            return new string(array, 0, arrayIndex);
        }
    }
Read More

May 10, 2014

Call WebService using JQuery and HTML : Asp.Net

This article is all about Calling a WebService (asmx) in HTML Page using jquery. to call a webservice first thing to know about a webservice
  • Web services are application components
  • Web services communicate using open protocols
  • Web services are self-contained and self-describing
  • Web services can be discovered using UDDI
  • Web services can be used by other applications
  • HTTP and XML is the basis for Web services

Webservices transfers data to application in XML, JSON and Text Format as well as JSON object.

One important distinction is what I mean by a JSON object and JSON format.  A JSON object is an object that can be used by javascript
var o = {data: 'value'};
alert (o.data); // this works as o is an object
JSON format is simply a literal string that can be turned into a JSON object if we parse it
var f = "{data: 'value'}";
alert (f.data); // this won't work as f is just a string and string doesn't have a data property
EXAMPLE

WEB SERVICE
[WebMethod]
public string SayHello(string firstName, string lastName)
{
    return "Hello " + firstName + " " + lastName;
}

[WebMethod]
public string SayHelloJson(string firstName, string lastName)
{
    var data = new { Greeting = "Hello", Name = firstName + " " + lastName };

    // We are using an anonymous object above, but we could use a typed one too (SayHello class is defined below)
    // SayHello data = new SayHello { Greeting = "Hello", Name = firstName + " " + lastName };

    System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

    return js.Serialize(data);
}

[WebMethod]
public SayHello SayHelloObject(string firstName, string lastName)
{
    SayHello o = new SayHello();
    o.Greeting = "Hello";
    o.Name = firstName + " " + lastName;

    return o;
}

"SayHello" returns a string
"SayHelloJson" returns a string that is an object in JSON format
"SayHelloObject" returns an object.  The SayHello class is here


public class SayHello
{
    public string Greeting { get; set; }
    public string Name { get; set; }
}
HTML

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello World</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div><br />Example A</div>
    <div id="searchresultsA"></div>
    <div><br />Example B</div>
    <div id="searchresultsB"></div>
    <div><br />Example C</div>
    <div id="searchresultsC"></div>
    <div><br />Example D</div>
    <div id="searchresultsD"></div>
    <div><br />Example E</div>
    <div id="searchresultsE"></div>

    <script type="text/javascript">
              // Example A - call a function that returns a string.
              // Params are sent as form-encoded, data that comes back is text
              $(document).ready(function () {
              $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHello",
                data: "firstName=Aidy&lastName=F", 
                dataType: "text", 
                success: function (data) {
                    $("#searchresultsA").html(data);
                }
            });

            // Example B - call a function that returns a string.
            // Params are sent in JSON format, data that comes back is JSON
            $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHello",
                data: "{firstName:'Aidy', lastName:'F'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json", 
                success: function (data) {
                    $("#searchresultsB").html(data.d);
                }
            });

            // Example C - call a function that returns a string.
            // Params are sent as a JSON object, data that comes back is text
            $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHello",
                data: { firstName: 'Aidy', lastName: 'F' },
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                dataType: "text",
                success: function (data) {
                    $("#searchresultsC").html(data); 
                }
            });

            // Example D - call a function that returns a string that is an object in JSON format.
            // Params are sent in JSON format, data that comes back is a string that represents an object in JSON format
            $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHelloJson",
                data: "{ firstName: 'Aidy', lastName: 'F' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var myData = JSON.parse(data.d); 
                    $("#searchresultsD").html(myData.Greeting + " " + myData.Name);
                }
            });

            // Example E - call a function that returns an object.  .net will serialise the object as JSON for us.
            // Params are sent in JSON format, data that comes back is a JSON object
            $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHelloObject",
                data: "{ firstName: 'Aidy', lastName: 'F' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var myData = data.d; 
                    $("#searchresultsE").html(myData.Greeting + " " + myData.Name);
                }
            });
        });
    </script>

    </form>
</body>
</html>
Read More
Subscribe to: Posts (Atom)

© 2011-2016 Techimpulsion All Rights Reserved.


The content is copyrighted to Tech Impulsion and may not be reproduced on other websites.