Tuesday, December 3, 2013

jQuery fast review

Here I have provided some jQuery properties which will give you overview & to quick learn.

While writing jQuery we need to remember two things i.e  
      #"Find element" .. and
      #"do something to it"..
Find element : find a element by selector..
i.e. $("")  --- selector
jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes.

You can select a element by using 
    "element id" using "#"                     -- eg: $("#divid")
    "class attribute" using "." (dot)        -- eg: $(".classname")
    "element tag"  using tag name         -- eg: $("table"), $("div"),..

Examples:
$("#contentid")  -- get element with id "contentid" .
$("li:first")          -- get first list item.
$("tr:odd")         -- get odd numbered table rows
$(this).hide()      -- hides the current element.
$("p").hide()      -- hides all <p> elements.
$(".test").hide()  -- hides all elements with class="test".
$("#test").hide() -- hides the element with id="test".

Properties :
Here are some of properties which are most using..

Hide all div's with jQuery :
$("div").hide( );

You can also find element by string selectors together
$("#myid, .myclass, table")

Add Class:
$("div").addclass("myclass");
here selector find element div and add class attribute "myclass" to it.

jQuery API
Chain method
$("div").addclass("myclass").fadeout();

•Moving Elements:
append(), appendTo(), before(), after(),
•Attributes
css(), attr(), html(), val(), addClass()
•Traversing
find(), is(), prevAll(), next(), hasClass()
•Events
bind(), trigger(), unbind(), live(), click()
•Ajax
get(), getJSON(), post(), ajax(), load()
•Effects
show(), fadeOut(), toggle(), animate()

...post incomplete, updating

Monday, December 2, 2013

Float div position to top when you scroll

In the below code I have explained about Maintaining div tag at top of the screen when scrolling..

IF my current position is greater or equal to the “sticker” position, give the sticker div a class of “stick”.  This changes the CSS of the div to have a FIXED position as long as the viewport is lower than the position of the sticker.





HTML - Take a div tag which contain the data which you want to float.

<div id="sticker">
    ...start scrolling..
   //Add your Code block here...
</div>

CSS 
Styles applied to div#sticker and the class “.stick
"stick" class is most important, which maintain position when you scroll.

div#sticker {
    padding:20px;
    margin:20px 0;
    background:#AAA;
    width:190px;
}
.stick {
    position:fixed;
    top:0px;

}


jQuery – Calculates the position of the sticker div and makes its position fixed if the page has scrolled that far

$(document).ready(function() {
    var s = $("#sticker");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }

    });