Example usage for com.google.gwt.query.client.css CSS POSITION

Introduction

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

Prototype

PositionProperty POSITION

To view the source code for com.google.gwt.query.client.css CSS POSITION.

Click Source Link

Document

The position property determines which of the CSS2 positioning algorithms is used to calculate the position of a box.

Usage

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;
        }/*from w w  w.ja  va 2  s .  co m*/
    });
    $(".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();
        }
    });

}