Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Friday 25 September 2015

How to clear File Input

You can just clone it and replace it with itself, with all events still attached:'

<input type="file" id="control">

and

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};

Wednesday 16 October 2013

jQuery check if element is visible or hidden

Useful jQuery toggle visibility methods.

Or you may check if element is visible or hidden with jQuery. Hide or show it according to its visibility.
Test code:
html:
<div class="wrap-js-action"><span class="click js-action">click to show or hide (display:block|none;)</span></div>
<div class="target">target</div>
 
<div class="wrap-js-action"><span class="click-toggle js-action">click to show or hide by toggle (display:block|none;)</span></div>
<div class="target-toggle">target-toggle</div>
 
<div class="wrap-js-action"><span class="click-visibility js-action">click to show or hide (visibility:hidden|visible)</span></div>
<div class="target-visibility">target visibility</div>
 
<div class="wrap-js-action"><span class="click-opacity js-action">click to show or hide (opacity:0|1)</span></div>
<div class="target-opacity">target opacity</div>
 
<div>last line</div>
jQuery:
$('.click').click(function() {
    if ($('.target').is(':hidden')) {
        $('.target').show();
    } else {
        $('.target').hide();
    }
});
 
 
$('.click-toggle').click(function() {
    $('.target-toggle').toggle();
});
 
$('.click-visibility').click(function() {
    if ($('.target-visibility').css('visibility') == 'hidden'){
        $('.target-visibility').css({'visibility': 'visible', display: ''});
    }else{
        $('.target-visibility').css({'visibility': 'hidden', display: ''});
    }
});
 
$('.click-opacity').click(function() {
    if ($('.target-opacity').css('opacity') == '0'){
        $('.target-opacity').css({'opacity': '1', display: ''});
    }else{
        $('.target-opacity').css({'opacity': '0', display: ''});
    }
});
​​
.js-action {
    cursor: pointer;
    border-bottom:1px dashed #555;
}

.wrap-js-action {
    margin:15px 0 0 0;
}
Difference between "display:none", "visibility:hidden" and "opacity:0":
  • display:none hides the element and it does not take up any space;
  • visibility:hidden hides the element, but it still takes up space in the layout;
  • opacity:0 hides the element as "visibility:hidden" and it still takes up space in the layout; the only difference is that opacity let to do element partly transparent;
Another difference between visibility:hidden and opacity:0 is that the element will still respond to events (like clicks) with opacity:0.

Friday 16 August 2013

Argo - Themeforest Modern OnePage Metro UI Wordpress Theme






ARGO is a unique and creative Wordpress Theme with clean and modern design. It is perfect choice for your corporate agency, creative studio or for portfolio. It can be customized easily to suit your wishes.

Demo: http://themeforest.net/item/argo-modern-onepage-metro-ui-wordpress-theme/4589714

http://www.hotfiles.ro/download/argo112.rar/918760
http://www.mirrorcreator.com/files/RNDNWKKC/argo112.rar_links
http://dfiles.eu/files/xs301nq3m
http://www.myuplbox.com/file/download/858280
http://www10.zippyshare.com/v/62427134/file.html
http://www.share-byte.net/9fUMHI
http://www.nowdownload.eu/dl/7ahbqynryu2bh
http://www.upl.me/oAo7rn
http://ul.to/h7mq2xnr

Start – Metro UI Themeforest Responsive Admin Template

Start is a new responsive admin template based on latest Windows 8 interface. This one, called Metro UI, has its roots in the design principles of classic Swiss graphic design – minimal, bold, high contrast and flat colors are some of its great features.

http://www.hotfiles.ro/download/startmetro.rar/823962
http://www.mirrorcreator.com/files/L8ID7ZA3/startmetro.rar_links
http://dfiles.eu/files/gr19dol9r
http://www.myUplBox.com/file/download/751843
http://www72.zippyshare.com/v/76904331/file.html
http://www.upl.me/T3pnwy
http://www.share-byte.net/xxM1xC

Tuesday 7 May 2013

What does “event bubbling” mean? [In context of CSS]

“Delegation” and “bubbling” are terms that gets thrown round a lot in JavaScript; but what exactly do these terms mean?

Event Bubbling

In JavaScript, events bubble. This means that an event propagates through the ancestors of the element the event fired on. Lets show what this means using the HTML markup below;
<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>
Lets assume we click the span, which causes a click event to be fired on the span; nothing revolutionary so far. However, the event then propagates (or bubbles) to the parent of the span (the <a>), and a click event is fired on that. This process repeats for the next parent (or ancestor) up to the document element.
You can see this in action here. Click “Hello” and see the events as they get fired.
That’s all event bubbling is; an event fired on an element bubbles through its ancestor chain (i.e. the event is also fired on those elements). It’s important to note that this isn’t a jQuery feature, nor is it something that a developer must turn on; it’s a fundamental part of JavaScript that has always existed.
Ok, that’s a little bit of a lie… sort of.
By default, not all events bubble. For instance submit does not normally bubble, nor does change. However, jQuery masks this in the event handling code using all sorts of voodoo, so it will seem that they do bubble when using jQuery.