0

I'm making a loader for a website. The HTML is as follows:

<div class="loadingContainer">
    <div class="greyContainer">
        <img class="eggGrey" src="img/egg-grey.png">
        <p id="bluePercent">50%</p>
    </div>

    <div class="blueContainer">
        <img class="eggBlue" src="img/egg-blue.png">
        <p class="greyPercent">50%</p>
    </div>
</div>

When element blueContainer has a height of 2%, I want the text in both paragraphs to be 2%. I want the paragraph text to always show the height in percentage of blueContainer. Height values are applied through an external CSS file, I am not very well versed in the language of Javascript, and I've tried some ways but I cannot figure out how I should do this.

EDIT: Some of the things I've tried (and probably miserably failed at):

function percentages(){
     document.getElementByClassName("greyPercent, bluePercent"){
         if (document.getElementByClassName("greyContainer, blueContainer"){
        }
    }
}

This is where I'm stuck at too, because I have no idea how I could tell the javascript to run the function when the element has a certain height.

EDIT: Here is a jsfiddle to illustrate what I'm doing. I gave the containers a background colour because of a lack of images.

https://jsfiddle.net/1s5tw6es/

Toby van Kempen
  • 1,447
  • 4
  • 13
  • 20
  • we would like to know what are those things you have tried! :) – Praveen Puglia Feb 11 '15 at 09:32
  • Is a height of div varies after page shown, or defined in CSS? – unarist Feb 11 '15 at 09:34
  • the height of the div is defined in the CSS right now. This is so that the one who I'm making it for can easily implement it on his website. – Toby van Kempen Feb 11 '15 at 09:45
  • are you expecting like this? (not to handle window resize etc.) `update css -> reload page -> (update text automatically)` – unarist Feb 11 '15 at 11:23
  • 1
    basically, I need some javascript to show the height of the blueContainer in the paragraph in percentages whenever the height has been changed. Changes can occur because a different javascript has been set up to change the height of the element or by directly editing the css itself. The whole thing is going to be a preloader for a webpage. The blue part will "fill" the grey area, and at the same time the paragraphs show the progress in percentage. – Toby van Kempen Feb 11 '15 at 11:25
  • I've added the images to the fiddle to better illustrate what's happening – Toby van Kempen Feb 11 '15 at 11:30
  • In your situation, I think that creating function which change both the height and the paragraph is easy way. – unarist Feb 11 '15 at 11:46
  • Well, sure, if you truly think that's best. Should I ask a new question for that? – Toby van Kempen Feb 11 '15 at 11:49
  • `resize` event used in Dhruv's code is not good for this case because it fired when the browser window's size is changed. I found related question http://stackoverflow.com/q/9628450/2818869. – unarist Feb 11 '15 at 12:04

2 Answers2

1

This should work:

$("document").ready(function(){  //In case you didn't use this

    $(window).resize(function(){
            $('#bluePercent').html($('.blueContainer').css('height')/16.0*100); //Converting height into percentage and adding it to the p tag
        });
});
Dhruv Ramani
  • 2,633
  • 2
  • 22
  • 29
1

from https://stackoverflow.com/a/9628472/2818869.

First, There is no such css-changes event out of the box, but you can create one by your own, as onchange is for :input elements only. not for css changes.

There are two ways to track css changes.

  1. Examine the DOM element for css changes every x time(500 milliseconds in the example).
  2. Trigger an event when you change the element css.
  3. Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.

Nowadays, there are more solutions.

But in this case, I would create function like setProgress which change both the element height and the paragraph.

Example: http://jsfiddle.net/e59u3p4j/1/

Community
  • 1
  • 1
unarist
  • 616
  • 8
  • 26