1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    36
    Answers
    4
    Vote Rating
    2
    bjudson is on a distinguished road

      0  

    Default Unanswered: Applying styles with DomHelper & DomQuery

    Unanswered: Applying styles with DomHelper & DomQuery


    I'm trying to do some simple style application with Sencha Touch. Specifically, I would think that this would make the image with id = "piece-5" opaque:

    Ext.DomHelper.applyStyles(Ext.DomQuery.selectNode('img#piece-5'),'opacity: 1');

    But it doesn't. DomQuery seems to be passing in an object that is not connected to the actual DOM element.

    What am I doing wrong here?

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    I think that the main problem with this is that you are trying to get an element that has still not be rendered on the page.
    Are you trying to get that image just after showing the container view?
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    36
    Answers
    4
    Vote Rating
    2
    bjudson is on a distinguished road

      0  

    Default


    Thanks for your response. I have already manipulated the image (making it transparent in the first place) by the time I'm calling this line, so it has already been rendered. Here's some more context.

    I have a panel with some images in <li> elements. The <li>s have background images set on them, so making the contained img transparent (opacity: 0) reveals the background image. This is working fine. Now I'm trying to 'hide' the background image by setting the opacity of the img element back to 1.
    The panel has this listener:

    Code:
        listeners: {
            el: {
                tap: this.imgFlip,
                delegate: 'img'
            }
        }
    

    Which calls this function:

    Code:
        imgFlip: function (item) {
            if(typeof this.flipped == 'undefined'){
                this.flipped = new Array();
            }
            
            Ext.DomHelper.applyStyles(item.target, 'opacity: 0');
            
            this.flipped.push(item.target.id);
            
            if(this.flipped.length > 1){
                console.log(this.flipped);
                for(var i=0; i<this.flipped.length; i++){
                    var el = Ext.DomQuery.selectNode('img#' + this.flipped[i]);
                    Ext.DomHelper.applyStyles(el, 'opacity: 1');
                    console.log(el);
                }
                this.flipped = [];
            }
        },

    At this point, the idea is just to allow the user to tap one image to 'reveal' what is under it, and then when they tap another image it briefly hides the second one and then shows both again.
    After clicking 2 items, I see this in the console:

    Code:
    ["piece-6","piece-5"]
    <img src=​"img/​jadelogo.jpg" style=​"width:​ 80px;​ opacity:​ 1;​ " id=​"piece-6"class=​"artifact-2">​
    <img src=​"img/​jadelogo.jpg" style=​"width:​ 80px;​ opacity:​ 1;​ " id=​"piece-5"class=​"artifact-1">​
    
    But the images remain transparent, and I if I view them in the DOM, I see:

    Code:
    <img src="img/jadelogo.jpg" style="width:80px;opacity:0;" id="piece-6" class="artifact-2">
    


    I hope this clarifies the question.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi