Example usage for com.google.gwt.query.client.css Length px

Introduction

In this page you can find the example usage for com.google.gwt.query.client.css Length px.

Prototype

public static Length px(int amt) 

Source Link

Document

Size in pixels.

Usage

From source file:gwtquery.samples.client.AnimationsSample.java

License:Apache License

public void onModuleLoad() {
    doMoveAnimation();//from ww w . j  av a  2s  . c  o  m
    doColorAnimation();

    $("#stopMove").click(new Function() {
        public void f() {
            $(".foo").clearQueue().stop();

        }
    });

    $("#stopColor").click(new Function() {
        public void f() {
            $(".foo").clearQueue("colorQueue");
        }
    });

    $("#startMove").click(new Function() {
        public void f() {
            $(".foo").css(CSS.LEFT.with(Length.px(0)));
            doMoveAnimation();
        }
    });

    $("#startColor").click(new Function() {
        public void f() {
            doColorAnimation();
        }
    });

}

---

From source file:gwtquery.samples.client.GwtQueryEffectsModule.java

License:Apache License

public void onModuleLoad() {
    $("div > div").css(CSS.COLOR.with(RGBColor.BLUE)).hover(lazy().css(CSS.COLOR.with(RGBColor.RED)).done(),
            lazy().css(CSS.COLOR.with(RGBColor.BLUE)).done());

    $("div.outer > div").css(CSS.POSITION.with(Position.RELATIVE)).dblclick(new Function() {
        public boolean f(Event e) {
            $("div.outer > div").as(Effects.Effects).animate($$("left: '+=100'"), 400, Easing.LINEAR)
                    .animate($$("top: '+=100'"), 400, Easing.LINEAR)
                    .animate($$("left: '-=100'"), 400, Easing.LINEAR)
                    .animate($$("top: '-=100'"), 400, Easing.LINEAR);
            return true;
        }/* ww  w . j  a  va2 s .  c om*/
    });
    $(".note").click(lazy().fadeOut().done());
    $(".note").append(" Hello");

    final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects);
    final Effects b = $(".b > div:nth-child(odd)").as(Effects.Effects);

    $("#b0").width(150).css(CSS.FONT_SIZE.with(Length.px(10))).toggle(new Function() {
        public void f(Element e) {
            $("#b0").as(Effects.Effects)
                    .animate(" width: '400', opacity: '0.4', marginLeft: '0.6in', fontSize: '24px'");
        }
    }, new Function() {
        public void f(Element e) {
            $("#b0").as(Effects.Effects)
                    .animate(" width: '150', opacity: '1', marginLeft: '0', fontSize: '10px'");
        }
    });

    $("#b1").toggle(new Function() {
        public void f(Element e) {
            $(".a").toggle();
        }
    }, new Function() {
        public void f(Element e) {
            a.fadeOut();
        }
    }, new Function() {
        public void f(Element e) {
            a.fadeIn();
        }
    }, new Function() {
        public void f(Element e) {
            a.slideUp();
        }
    }, new Function() {
        public void f(Element e) {
            a.slideDown();
        }
    }, new Function() {
        public void f(Element e) {
            a.slideLeft();
        }
    }, new Function() {
        public void f(Element e) {
            a.slideRight();
        }
    }, new Function() {
        public void f(Element e) {
            a.animate("left: '+=300', width: 'hide'");
        }
    }, new Function() {
        public void f(Element e) {
            a.animate("left: '-=300', width: 'show'");
        }
    });

    $("#b2").toggle(new Function() {
        public void f(Element e) {
            b.as(Effects.Effects).clipUp();
        }
    }, new Function() {
        public void f(Element e) {
            b.as(Effects.Effects).clipDown();
        }
    }, new Function() {
        public void f(Element e) {
            b.as(Effects.Effects).clipDisappear();
        }
    }, new Function() {
        public void f(Element e) {
            b.as(Effects.Effects).clipAppear();
        }
    });

}

---

From source file:gwtquery.samples.client.HomePageSample.java

License:Apache License

public void onModuleLoad() {
    //Hide the text and set the width and append an h1 element
    $("#text").hide().css(CSS.WIDTH.with(Length.px(400))).prepend("<h1>GwtQuery Rocks !</h1>");

    //add a click handler on the button
    $("button").click(new Function() {

        public void f() {
            //display the text with effects and animate its background color
            $("#text").as(Effects).clipDown(1000).animate("backgroundColor: 'yellow'", 1000).delay(1000)
                    .animate("backgroundColor: '#fff'", 1500);
        }/*from   ww w .  jav a  2  s.  c o m*/

    });
}

---