resize detect within a resize detect?
kk. Here we go. It's foggy for me, so let me try to explain my issue. Bare with me, and more important: I need your awesomeness!
Situation
solved part: I have two different iframes from different locations with different proportional heights/widths which need to be responsive.
unsolved: I want to let those iframes have a different size @ screenwidth < 480px.
The working part (without the <480px detection)
- <script>
$(function() {
var $allVideos = $("iframe[src^='firsturl']"),
$fluidEl = $(".embed-container");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
});</script>
<script>
$(function() {
var $allVideoss = $("iframe[src^='secondurl']"),
$fluidEll = $(".embedd-container");
$allVideoss.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidthl = $fluidEll.width();
$allVideoss.each(function() {
var $ell = $(this);
$ell
.width(newWidthl)
.height(newWidthl * $ell.attr('data-aspectRatio'));
});
}).resize();
});</script>
First thing to go with this code: feels a bit nooby. 2x the same function ... the only way I could get it working, but heck, this can be improved for sure.
But now:
if ($(window).width() < 960) { alert('Less than 960'); } else {} $(window).on('resize', function() { if (!eventFired) { if ($(window).width() < 960) { } else { } } });
And *poooof* fog. I can insert my functions with this snippet but that makes no sense at all to me. Resize detection within resize dectection?
Hope you understand where I'm aiming for and throw me some delicious code!