반응형
반응형

scroll event - 스크롤 이벤트 scroll start, scrolling, scroll stop


스크롤시 사라졌다가 스크롤 끝나면 다시 나오는 스크립트


https://gist.github.com/RubaXa/5569075


 jquery.event.scroll.js



-- Page 배너 삽입, 모바일 하단에 위치고정


<div id="bottomrollbanner" style="position:fixed; bottom:0; height:49px; width:100%;background-color:bisque;">

                          배너 위치

</div>




<script type="text/javascript">
<!--


$(window).bind('scrollstart scrollend', function (evt){
    if( evt.type == 'scrollstart' ){
        // logic
        console.log("scroll Start");
        jQuery("#bottomrollbanner").fadeOut("fast");
    }
    if( evt.type == 'scrollend' ){
        // logic
        console.log("scroll End");
    jQuery("#bottomrollbanner").fadeIn("slow");
    }
});


var currentScrollTop, temporalScroll = 0;

$(window).scroll(function(){


    currentScrollTop = $(this).scrollTop();
    console.log('Previous value: ' + temporalScroll);
    if (currentScrollTop > temporalScroll) {
        console.log('scroll down - Current value: ' + currentScrollTop);
    }
    else {
        console.log('scroll up - Current value: ' + currentScrollTop);
    }
    temporalScroll = currentScrollTop;



});


//-->

</script>






반응형
반응형

NoUiSlider: A tiny range slider

 

 

jQuery UI slider

NoUiSlider is a range slider without the bloat, but with a ton of features. It’s lightweight and as minimal as possible, so it’s compatible on a wide range of devices.

nouislider

 

https://github.com/leongersen/noUiSlider/

 

 

 

 

 

 

반응형
반응형


<br><br>
*** 시작페이지로 지정하기 ***
<br><br>

<script type="text/javascript" src="/common/js/jquery-latest_header.js"></script>
<div id="homepage-link">
    <a href="javascript:addashomepage()"> Make this your homepage  </a>
    <span id="homepagePopup">
        <section class="text">
        </section>
        <br /><a href="javascript:void(0);" class="close">close</a>
    </span>
        Set as your home page
</div>





 
 <script type="text/javascript">

     /* Add as home page script - Dave Goodman goodmangraphics.co.uk */
     function addashomepage() {

         // makes jQuery differentiate between Chrome and Safari - thanks to Vikrant Chaudhary
         $.browser.chrome = $.browser.webkit && !!window.chrome;
         $.browser.safari = $.browser.webkit && !window.chrome;

         if ($.browser.msie) { // IE
             if ($.browser.msie && parseInt($.browser.version, 10) < 8) { // IE is v7 or lower - use ye olde homepage code
                 document.body.style.behavior = 'url(#default#homepage)';
                 document.body.setHomePage(window.location.href);
             } else { // IE v8 or higher
                 var homesettext = "<p><strong>Internet Explorer</strong><br /><br />To set your homepage in Internet Explorer 6 or later on Microsoft Windows:</p><ol><li>Select <strong>Tools |&nbsp;Internet Options</strong>.</li><li>On the &quot;General&quot; tab, in the &quot;Home page&quot; text box, type: <em>http://www.garagewire.co.uk/&nbsp; </em></li></ol><p><strong>Note: </strong>The &quot;Home page&quot; box can contain multiple URLs. If you want Garage Wire to be the first tab when your browser opens, make sure<em> http://garagewire.co.uk/ </em>is the first URL in this box.</p><ol start='3'><li>Click <strong>Apply</strong></li><li>Click<strong> OK</strong>.</li></ol>";
             };

         } else if ($.browser.safari) { // safari
             var homesettext = "<p><strong>Safari</strong><br /><br />To set your homepage in Safari 1 or later for Mac OS X or Microsoft Windows:</p><ol><li>Select <strong>Edit | </strong> <strong>Preferences</strong> or click the cog icon in the upper-right and select <strong>Preferences</strong>. The &quot;Preferences&quot; window appears.</li><li>Select the <strong>General</strong> tab.</li><li>Enter <em>http://www.garagewire.co.uk/ </em>in the&quot;Homepage&quot; text box.<em> </em></li><li>Click <strong>Close</strong>.</li></ol>";

         } else if ($.browser.webkit) { // chrome
             var homesettext = "<p><strong>Chrome</strong><br /><br />To set your homepage in Chrome 18 or later for Mac OS X or Microsoft Windows:</p><ol><li>Sign in to Chrome if you have not already done so.</li><li>Select the&nbsp;Customize and control Google Chrome icon (the icon with three bars to the right of the URL&nbsp;box).</li><li>Select <strong>Settings</strong>.</li><li>Under &quot;On startup&quot;, select the <strong>Open a specific page or set of pages</strong> button.</li><li>Click <strong>Set Pages</strong>.</li><li>Enter <em>http://www.garagewire.co.uk/ </em>in the field provided.<em> </em></li><li>Click <strong>OK</strong> to save your settings.</li></ol>";

         } else if ($.browser.mozilla) { // firefox
             var homesettext = "<p><strong>Mozilla Firefox</strong><br /><br />To set your homepage in Mozilla Firefox 16 or later on Microsoft Windows or Mac OS X:</p><ol><li>Select <strong>Firefox |</strong> <strong>Options</strong>. The <strong>Options</strong> dialog box appears.</li><li>Click the <strong>General</strong><em> </em>tab if not already selected.</li><li>Choose <strong>Show my home page</strong> in the drop-down to the right of &quot;When Firefox starts:&quot;.</li><li>Enter <em>http://www.garagewire.co.uk/</em> in the &quot;Home Page&quot; text box.</li><li>Click <strong>OK</strong>.</li></ol>";

         } else if ($.browser.opera) { // opera
             var homesettext = "<p><strong>Opera</strong><br /><br />To set your homepage in Opera on Microsoft Windows:</p><ol><li>Navigate to and click on the 'Preferences' link from the drop-down menu at the top of the Opera browser. The Preferences box will open. Select the 'General' tab.</li><li>Click on 'Set current page as home page'.</li><li>Click <strong>OK</strong>.</li></ol>To set your homepage in Opera on Mac OS X:</p><ol><li>Click on the top menu option 'Opera,' and then click on the 'Preferences' option. The Preferences box will open with the General tab already selected.</li><li>click 'Use Current.' Then utilize the drop-down menu to choose the desired navigation option.</li><li>Click <strong>OK</strong>.</li></ol>";

         } else { // unknown browser
             var homesettext = "<p><strong>Unknown browser type</strong><br /><br />To set your homepage please refer to your browser's help</a>";
         };

         if (homesettext) {
             $("#homepagePopup .text").html(homesettext);
             $("#homepagePopup").fadeIn();
             //alert(homesettext);
         };

     };

     jQuery(document).ready(function ($) {

         $("#homepagePopup .close").click(function (event) {
             $("#homepagePopup").fadeOut();
         });

         $("#bookmarkPopup .close").click(function (event) {
             $("#bookmarkPopup").fadeOut();
         });

     });
 
</script>







<style>
#homepagePopup {
    position: absolute;
    float: left;
    text-align: left;
    padding: 15px;
    background: #000;
    color: #fff;
    font-size: 1.2em;
    line-height: 1.2em;
    border: #ccc 2px solid;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    top:0;
    left:20px;
    z-index: 100;
    -moz-box-shadow: 0 0 15px #888;
    -webkit-box-shadow: 0 0 15px#888;
    box-shadow: 0 0 15px #888;
    display: none;
}
 
#homepagePopup ol li {
    list-style: decimal;
    padding: 4px 0 4px 0px;
    margin-left: 20px;
}

</style>

반응형
반응형

[jQuery] like Pintrest. 핀트레스트 같은 그리드(Grid)

 

Amazing jQuery Plugins to design Pinterest like Dynamic Grid Layout

 

1. Masonry

This is the most widely used dynamic grid layout plugin for jQuery. This works as opposite to CSS floats, because floating arranges elements horizontally while this Masonry arranges elements vertically.


2. Isotope

Its an exquisite jQuery plugin for intelligent and dynamic layouts that can't be achieved with CSS alone. It allows jQuery selectors and sorting the elements.


3. BlocksIt

BlocksIt.js is a jQuery plugin to create dynamic grid layout. It manages to convert HTML elements into 'Blocks' and position them in well-arranged grid layout like Pinterest. 


4. Wookmark

Wookmark is a website to bookmark Images and videos, and has a Pinterest like interface. This website has made this simple jQuery plugin which is available for free download on Github.


5. Pinterest Clone Layout

If you are a Ruby Developer and wish to create the Pinterest style layout in a short period of time, then this layout is for you. This layout uses the jQuery Masonyn plugin and is already styled and ready to use. You can also see the Demo interface here.


6. Flex

Flex is a fluid asymmetrical animated grid plugin for jQuery. It also has a feature of expanding the tiles on mouse hover.


 

 

 

 

 

 

반응형
반응형

S Gallery: Responsive jQuery gallery plugin

 

S Gallery is a responsive jQuery gallery plugin that includes CSS3 animations inspired by Sony’s products gallery. It supports touch/swipe functions, too.

s gallery

 

반응형
반응형

S Gallery: Responsive jQuery gallery plugin

S Gallery is a responsive jQuery gallery plugin that includes CSS3 animations inspired by Sony’s products gallery. It supports touch/swipe functions, too.

s gallery

 

Licensed under Creative Commons Attribution Non-Commercial (CC BY-NC 4.0)

 

 

반응형

+ Recent posts