Recently, I have been aseked this question and found bit of good solution as below:

I have a simple script that selects a class's and adds a class of selected to it and remove it from all other 's with the similar class. It all works perfectly, but I know that there has to be a better way to write this out, I just can't figure it out.. Does it involve something like this?

$('.adv-option-set a').click(function()
{
    // if clicked item is selected then do nothing
    if ($(this).hasClass('selected')){}

    // otherwise deselect all and select just this one
    else
    {
        $('.adv-option-set a').removeClass('selected');
        $(this).addClass('selected');
    }
});

$('.adv-option-set2 a').click(function()
{
    // if clicked item is selected then do nothing
    if ($(this).hasClass('selected')){}

    // otherwise deselect all and select just this one
    else
    {
        $('.adv-option-set2 a').removeClass('selected');
        $(this).addClass('selected');
    }
});

And below is HTML that has been provided

     <article id="filter">
        <ul id="filter-nav" class="option-set">
          <li>Filter: </li>
          <li><a data-categories="*" data-subid="all" class="selected">All</a></li>
          <li><a data-categories="tubs-and-showers" data-subid="tubs-and-showers">Tubs &amp; Showers</a></li>
          <li><a data-categories="countertops" data-subid="countertops">Countertops</a></li>
          <li><a data-categories="faucets" data-subid="faucets"><s>Faucets</s></a></li>
          <li><a data-categories="cabinetry" data-subid="cabinetry"><s>Cabinetry</s></a></li>
          <li><a data-categories="flooring" data-subid="flooring"><s>Flooring</s></a></li>
          <li><a data-categories="toilets" data-subid="toilets"><s>Toilets</s></a></li>
          <li><a data-categories="accessories" data-subid="accessories"><s>Accessories</s></a></li>
        </ul>
        <div id="advfilter" class="advfilter filter-nav hidden">
          <ul id="tubs-and-showers" class="adv-option-set1">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="modular">Modular</a></li>
            <li><a data-categories="custom">Custom</a></li>
          </ul>
          <ul id="countertops" class="adv-option-set2">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="marble">Marble</a></li>
            <li><a data-categories="solid-surface">Solid Surface</a></li>
            <li><a data-categories="laminate"><s>Laminate</s></a></li>
            <li><a data-categories="granite"><s>Granite</s></a></li>
          </ul>
          <ul id="faucets" class="adv-option-set3">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="">Coming Soon</a></li>
            <li><a data-categories="">Coming Soon</a></li>
          </ul>
          <ul id="cabinetry" class="adv-option-set4">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="">Coming Soon</a></li>
            <li><a data-categories="">Coming Soon</a></li>
          </ul>
        </div>
      </article>

Here is the solution:

$('[class^=adv-option-set] a').click(
    function()
    {
       $(this).addClass('selected');
       $('[class^=adv-option-set] a').not(this).removeClass('selected');
    }
);

It is very simple but most effective and reduce code redundancy as well.

Generate PDF in C# including Background Image and HTML Tags, I have been through many blogs but there are very few blogs that they have explained to include background image while generating PDFs, so though it's worth creating C# Program and writing blog.

Step 1:

Once you have created your solution, then you have to download iTextSharp in this zip file you will have DLLs so Add Reference to your solution.

Step 2:

Now add following line of code to to reference the code

using iTextSharp.text;
using iTextSharp.text.pdf;

Step 3:

Following is code for it: 

        void PDF_Generation_With_HTML_And_Background_Image()
        {

            //setting ContentType
            Response.ContentType = "application/pdf";

            //setting up PDF header and filename
            Response.AddHeader("content-disposition", "attachment;filename=filename.pdf");

            Response.Cache.SetCacheability(HttpCacheability.NoCache);

            //getting image & it's path from server
            string imageFilePath = Server.MapPath(".") + "/images/imagename.jpg";

            //creating Image object
            Image imageFile = Image.GetInstance(imageFilePath);

            //Page site and margin left, right, top, bottom is defined
            var pdfDocument = new Document(PageSize.A4, 20f, 0f, 20f, 0f);

            //Resize image depend upon your need
            //here I had Landscape Image
            imageFile.ScaleToFit(800, 800);

            //If you want to choose image as background then,
            imageFile.Alignment = Image.UNDERLYING;

            //Scale Percent of image. 
            //Here we have 50% in float is 50f
            imageFile.ScalePercent(50f);

            //pdf writer will get instance of document
            PdfWriter.GetInstance(pdfDocument, Response.OutputStream);

            pdfDocument.Open();

            pdfDocument.NewPage();

            //html p tag or Pragraph tag
            Paragraph paragraph = new Paragraph("Lorem Ipsum is simply dummy text of the printing and typesetting " + 
                "industry.\n\n 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.");

            pdfDocument.Add(imageFile);

            pdfDocument.Add(paragraph);

            pdfDocument.Close();

            Response.Write(pdfDocument);

            Response.End();
        }

Thank you for going through

Get or set #hash value in URL using Javascript or jQuery, we can change URL without refreshing page using Javascript or jQuery by changing #hash value, like below:

• example.com/page.html#example
• example.com/page.html#example-page

Javascript or jQuery

// get #hash value
var hashValue = window.location.hash

// set #hash value, it will change URL to example.com/page.html#example-page
window.location.hash = "example-page"

If you have question don't forget to ask.

Thank you for going through

Good afternoon,

Today, I was working on some of the design with HTML5 and CSS3, and I had to deal with gradient. The situation was that I had to do two gradients without using background image, so I have looked into W3C standard and found out that we can have two, not two but as many gradients we wanted, it wasn't complicated but it was quite useful.

I have setup that into normal div and placed gradient as following:

Below is HTML div with id="db" and I are going to place gradient into it.

<div id="db"></div>

Now, do some CSS3 code which would generate multiple gradients inside div tag as following: 

#db {

    /* IE6-9/Chrome < 10 */
    background-color: #E0DFDE;

    /* IE10 */
    background-image: -ms-linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);
    /* Opera */
    background-image: -o-linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.15, #E0DFDE), color-stop(0.45, #3D668F), color-stop(0.85, #E0DFDE));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);
    /* Proposed W3C Markup */
    background-image: linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);

    height: 300px;
    width: 300px;

}

The reson behind I have wrote this codes because all the browsers dones't support the way W3C markup works because it is just proposed mark-up they haven't started implemeted it yet and because of that we have to add for all the browsers and also we can do something for non-supported CSS3 browsers like IE6-9, Chrome before 10, should write background-color, above I have #E0DFDE color in case of non-supported browser it will not fall apart. this example only works for supported browsers.

Result of above example is as following:

If you think that helped you please don't forget to rate and share via Facebook, Twitter, LinkedIn, etc.

Enjoy your day and have nice easter weekends.