CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Snorlax
Snorlax

Reputation: 4765

How to find out what Javascript is resizing element

When I look at Chrome Dev Tools, it says one of my div's has an element style:

element.style {
    height: 300px;
    opacity: 1;
}

To me, this means that some javascript, or jquery is causing this. But how do I find what is making this change to it if I'm correct assuming that it's a script that causes that.

For more detail, if you go to zhang-jason.com (my portfolio), right click on one of the large div's (article or projects), you'll see the above style to <div class="bottom-section hide-me-until-december vegas-container">.

I copied the HTML it's affecting when I click on it:

<div class="bottom-section hide-me-until-december vegas-container" id="articles" style="height: 300px; opacity: 1;">
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
        <div class="vegas-slide-inner vegas-animation-kenburnsUpLeft" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/4.jpg&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
    </div>
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
        <div class="vegas-slide-inner vegas-animation-kenburnsRight" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/5.png&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
    </div>
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
    <div class="vegas-slide-inner vegas-animation-kenburnsDownLeft" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/6.jpg&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
    </div>
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
        <div class="vegas-slide-inner vegas-animation-kenburns" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/6.png&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
    </div>
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in" style="transition: all 4000ms;">
        <div class="vegas-slide-inner vegas-animation-kenburnsRight" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/ramen.jpg&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>    
    </div>
    <div class="vegas-overlay"></div>
    <div class="vegas-wrapper" style="overflow: hidden; padding: 0px;">
        <div class="bottom-wrap">
            <h2>Articles</h2>
            <div class="line">__</div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 101

Answers (2)

g.e.manor
g.e.manor

Reputation: 526

To know which function is resizing element in chrome you have to right click on the element and choose Break on > Attribute modified, it's will break you when the css is modified, then you can look on sources tab to detect the functionenter image description here

Upvotes: 2

Tim Ogilvy
Tim Ogilvy

Reputation: 1973

So you are using the vegas slideshow plugin, and I would imagine that it's applying a size to the div due to it having the class 'vegas-container'. Try either placing your div inside the vegas-container div, or the vegas container div inside your div. Otherwise the plugin will keep resizing it.

Upvotes: 0

Related Questions