0

I have a little problem with conditions and its triggering. I have 2 object in my HTML (div and img), that I am trying to constantly align by JS. By constantly I mean so that when window size changes, they realign (since one is aligned to the center - and no :), I can't center-align the second one as well, because I also need to match the size, which definitely requires JS).

I made a little function that aligns them and sets proper dimensions to it and I am triggering the function on every window.onresize event (as well as on document ready). But I found out, that it does not trigger on zoom action and besides that it would be more suitable for me not to be dependent on window.onresize.

So I thought there would be a posibility to write a condition like

if (div.width() != img.widht()) { // do something to match it again }

But it turned out to only run this condition on the ready event (resp. load event, since I have a picture). So my question is, if there is any way, so that the condition would be checking its state just continuosly? I know, I can probably set Interval to take care of that, but a) I guess that like 99% of all executions would be pointless and b) unless I set it to like very quick repetition, it would not even fix the div's and img's mismatch problem immediately.

Thank you very much.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Lukáš Řádek
  • 1,273
  • 1
  • 11
  • 23
  • `if (div.width() != img.widht())` should be `if (div.width() != img.width())` – Rohan Kumar Jun 09 '13 at 12:33
  • Could you set a jsfiddle with relevant code? – A. Wolff Jun 09 '13 at 12:35
  • 2
    Binding it to the `resize` event makes the most to me. Regarding zoom, have a look at http://stackoverflow.com/q/995914/218196 and http://stackoverflow.com/q/1713771/218196. – Felix Kling Jun 09 '13 at 12:35
  • I forgot the word *sense: "makes the most *sense to me" ;) – Felix Kling Jun 09 '13 at 13:55
  • Thanks for links. Otherwise I most likely will not put a jsfiddle here (not that I would like to make it harder for you or want not to contribute to the solution, but I am partialy editing other quite long script for a web gallery and partialy creating my own little .js with addons. So it would get quite complicated and hard to orientate in it. – Lukáš Řádek Jun 09 '13 at 16:34

1 Answers1

0

You can certainly define you own custom event and execute the aligning code when it occurs, but you still need a way to fire the event at appropriate time. That can only happen during the ordinary execution flow of the program (not an option here) or in the handler for one of the existing events: if none of those events is consistently fired when the trigger condition occurs, then you're only left with timers. I'd be happy to be wrong on this, tho'.

Consider requestAnimationFrame as an alternative to setInterval.

Dek Dekku
  • 1,441
  • 11
  • 28
  • Thank you. To be honest I am pretty new to JS, so I do not have that much knowledge, so maybe one more question to make my thinking about how to do this a little bit easier? When does the JS script trigger? I understand, that it is on things like "ready, load, resize", which looks like browser based and then the other group that relies on events assigned to HTML objects like "click, hover,..." and those are event-handlers? Did I get that right and are there any other instances, when the code is triggered? – Lukáš Řádek Jun 09 '13 at 16:42
  • An event handler (or listener) is the function that you pass as a callback to be invoked when the event triggers: in your case the event handler should contain the code to aling the image and the div. There's a comprehensive list of standard and non standard events on MDN: https://developer.mozilla.org/en-US/docs/Web/Reference/Events – Dek Dekku Jun 09 '13 at 18:16