Archive for tag: jQuery

Shorten up this overly long JavaScript-jQuery function

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.

Remove events with jquery or javascript

This is the function that we have bound it as below:

$(function(){ 
    //remove click doSomething
    $("div").click(doSomething1); 
}); 

 In jQuery we can do add and remove events as we go along, there are two way that we can remove or unbind event of jQuery

$('div').off('click', doSomething); 
 
// or 
 
$('div').unbind('click', doSomething); 

 if is there any batter way then caould yo ucomment down below please,

I hope this would help.

Thanks

Get and set #hash value in URL using Javascript or jQuery

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

 

Show pound (£) sign in input field by JavaScript or jQuery

Show pound sign in input field by JavaScript or jQuery

Pound sign in input field by JavaScript or jQuery, if anyone has tried pound (£) sign (or any special character) in any input fields by JavaScript or jQuery, then you know it is not straight forward.

 

If we write code like this,

//JavaScript
document.getElementById('input_filed_id').value = '£100';

//jQuery
$('input_field_id_OR_class').val('£100');

It'll display some question mark(unrecognized character) instead of the pound sign.

So we need to put character's Unicode to display it properly. In this case, the code should look like this:

//JavaScript
document.getElementById('input_filed_id').value = '\u00A3100';

//jQuery
$('input_field_id_OR_class').val('\u00A3100');

where \u00A3 is the character code of £

Thank you and have nice day