Develop Reference

Containing element's width is not displayed correctly

Several images are placed into an element whose display is flex and flex-wrap set to nowrap. The images don't fit into the element's width and extend beyond the screen width.
I am trying to calculate the width of the element that includes the images. However the width of element is always equal to screen width whereas it should be much greater than screen width.
Several threads have advised to first check if all the images have been loaded. Following is the code used to check the loading of the images.
let len = allCarousalImagesList.length,
counter = 0;
[].forEach.call( allCarousalImagesList, function( img ) {
if(img.complete)
incrementCounter();
else
img.addEventListener( 'load', incrementCounter, false );
} );
function incrementCounter() {
counter++;
if ( counter === len ) {
let carousalWidth = carousalElement.offsetWidth;
let browserWidth = window.innerWidth;
console.log(browserWidth, carousalWidth);
}
}
Inspite of checking for the loading of images, the width of the element containing unwrapped images is not being displayed correctly and is equal to screen width. I am using offsetWidth to get the width. Please help with this issue.
The code has been uploaded on the codesandbox here

So I created a solution to your problem:
And make sure to add position:absolute; to your carousal class
window.addEventListener("load", function () {
let carousalElement = document.getElementsByClassName("carousal")[0];
var width_of_img_container = window.getComputedStyle(carousalElement).width;
console.log(width_of_img_container);
},false);
Hope I could help.

Right to Left Horizontal Timeline isn't working as expected

I've created a jQuery plugin to create a Horizontal Timeline. Now I'm trying to add a Right to Left (RTL) option. I've managed to swap round most of the functions so it's going right to left, but I'm struggling to get the scrolling of the timeline to work as intended. I've made a jsfiddle
The piece of code I'm stuck on is this:
Timeline.prototype._updateTimelinePosition = function (event, timelineComponents) {
if (this.settings.useRTL == false) {
// Get the css left value of the targeted event date
var eventLeft = Number(event.css('left').replace('px', '')),
// Get the width value of the .events-wrapper
timelineWidth = timelineComponents['timelineWrapper'].width(),
// Get the width value of the events (previously set)
timelineTotalWidth = timelineComponents['eventsWrapper'].width();
this._translateTimeline(timelineComponents, - eventLeft + timelineWidth/2, timelineWidth - timelineTotalWidth);
}
else {
/* RTL */
// Get the css left value of the targeted event date
var eventRight = Number(event.css('right').replace('px', '')),
// Get the width value of the .events-wrapper
timelineWidth = timelineComponents['timelineWrapper'].width(),
// Get the width value of the events (previously set)
timelineTotalWidth = timelineComponents['eventsWrapper'].width();
// This line here...
this._translateTimeline(timelineComponents, - eventRight + timelineWidth/2, timelineWidth - timelineTotalWidth);
}
}
Timeline.prototype._translateTimeline = function (timelineComponents, value, totalTranslateValue) {
// Only negative translate value
if (this.settings.useRTL == false) var value = (value > 0) ? 0 : value;
/* RTL*/
// This line here...
else var value = (value > 0) ? 0 : value;
// Do not translate more than timeline width
if (this.settings.useRTL == false)
value = (!(typeof totalTranslateValue === 'undefined') && value < totalTranslateValue ) ? totalTranslateValue : value;
/* RTL */
// This line here...
else value = (!(typeof totalTranslateValue === 'undefined') && value < totalTranslateValue ) ? totalTranslateValue : value;
this._setTransformValue(timelineComponents['eventsWrapper'], 'translateX', value+'px');
// Disable the buttons if necessary
this._buttonDisable(timelineComponents, value, totalTranslateValue);
}
Where I've commented "This line here" on the RTL part is the lines I'm stuck with. I've tried so many variations of code: swapping round all the variables, swapping round all the operands and nothing seems to work correctly.
Basically what I am wanting is the Left to right functionality flipped round for right to left, both of which can be found in the jsfiddle.
The line: this._translateTimeline(timelineComponents, - eventRight + timelineWidth/2, timelineWidth - timelineTotalWidth); in _updateTimelinePosition function, is the function call to translate/move the timeline, calculating the translate value as the second argument. The timeline uses the transform: translate() css to translate/move the timeline along. I can't get it to get calculate properly for right to left.
Expectation:
In the RTL timeline, when clicking prev/next and event buttons the timeline
should automatically scroll along to the correct selected event.
The timeline should start from the right, but sometimes calculates
this wrong.

SafeFrame force Expand from main window [duplicate]

i'm searching for solution, that can expand SafeFrame custom ad from inside of custom creative in Google DFP, is that possible somehow?

There are 2 possible solutions:
1) using SafeFrame API
pros:
u can use it "out of the box"
you can use it on any website, no custom code on website is needed
it's safe to use
cons:
it's limited to fill just visible area of website
need to wait, until ad unit is visible to the user
2) code your own API with window.postMessage() javascript method
cons:
you need to add custom code to your website
it's a possible threat, if you use some 3th party creatives
pros:
you can do almost anything with your website from your creative
1) using SafeFrame API
This API is realatively easy to use, you can see some examples in
GPT Safeframe preview tool.
First you need to update your DFP initialization script in <head> of your website
var pageConfig = {
allowOverlayExpansion: true,
allowPushExpansion: true,
sandbox: true
};
googletag.pubads().setSafeFrameConfig(pageConfig);
This will allow to expand SafeFrame ads on your website. More about this in
Control SafeFrame Container behavior through GPT.
Now you can create custom creative and serve it as SafeFrame on your website. Here is my one example. This Example can "wait" util it's visible, and then will expand to height of <div id="container"> that is inside of SafeFrame:
<div id="container">
some lines to make container height<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
</div>
<script>
// global expanded indicator variable, because API don't have any
var expanded = false;
function expand() {
var self= $sf.ext.geom().self;
var config = {
push: true, // we want to push expanded content
b: 0
};
var el = document.getElementById('container');
var containerHeight = el.offsetHeight;
// get height from bottom, that need to be expanded
var expandBottom = containerHeight - self.h;
// if container is whole inside a SafeFrame, it will not expand
if(expandBottom < 0) return;
config.b = expandBottom;
$sf.ext.expand(config);
}
function expandDelayed(forceExpand) {
// expand will run just once, or you can force it to run again
// but collapse first is needed
if(expanded && forceExpand || !expanded) {
$sf.ext.collapse();
expanded = false;
// there must be some timeout, because .collapse(); method is deplayed somehow
setTimeout(expand, 0);
}
}
$sf.ext.register(160, 150, function(status, data) {
// this code will do whole magic of "waiting" for right moment
if (status === 'geom-update') {
expandDelayed();
}
// change global expanded status
if (status === 'expanded') {
expanded = true;
}
});
// init
expandDelayed();
</script>
2. code your own API with window.postMessage() javascript method
First, you need to put this code, to your DFP initialization script in <head> of your website. This code will add an ID of Ad slot as #hash-tag to <iframe>'s src so you can get it from inside of your creative.
googletag.pubads().addEventListener('slotRenderEnded', function (event) {
var containerId = event.slot.getSlotElementId();
var containerEl = document.getElementById(containerId);
if (containerEl === null) return;
var iframeEl = containerEl.querySelectorAll('iframe')[0];
// it's delayed by 10 milliseconds, because iframe is not yet fully rendered
// and limited to max to 10 seconds to wait
var timeoutFunction = function () {
var src = "#" + containerId;
// `src` attribute is null, when iframe is FriendlyIframe, and
// when it's present, then it's SafeFrame
if (iframeEl.getAttribute('src') !== null) {
src = iframeEl.getAttribute('src').replace(/#.*/, "") + src;
} else {
var name = iframeEl.getAttribute('name') + "#" + containerId;
iframeEl.setAttribute('name', name);
}
iframeEl.setAttribute('src', src);
};
setTimeout(timeoutFunction, 10);
});
Second, you need to add this code to your website, better as separated .js file.
function onMessageReceivedGetStyle(e) {
// this will filter just setStyle commands from correct origin
if (
!(e.origin === 'http://tpc.googlesyndication.com' || e.origin === 'https://tpc.googlesyndication.com') ||
typeof e.data !== 'object' ||
typeof e.data.id !== 'string' ||
e.data.cmd !== 'setStyle' ||
typeof e.data.params !== 'object'
) {
return;
}
// remove # character from id, we don't use jquery
var elementId = e.data.id.replace(/#/, "");
var wrapperEl = document.getElementById(elementId);
if (wrapperEl === null) {
return;
}
var elements = [wrapperEl];
// you can target child elements too with query parameter
if (typeof e.data.query === 'string' && e.data.query) {
elements = wrapperEl.querySelectorAll(e.data.query);
}
elements.forEach(function (element) {
Object.keys(e.data.params).forEach(function (param) {
element.style[param] = e.data.params[param];
});
});
}
if (window.addEventListener) {
addEventListener('message', onMessageReceivedGetStyle, false);
}
else {
if (window.attachEvent) {
attachEvent('onmessage', onMessageReceivedGetStyle);
}
else {
window.onmessage = onMessageReceivedGetStyle;
}
}
And third thing is your custom code in custom type of creative in DFP. Here is example, that is similar to that in
first example, but here this script can wait until all content and image is loaded and then will expand/shrink your
iframe with creative:
<div id="container">
<a href="#" target="_blank">
<img src="%%FILE:JPG1%%">
</a>
<a href="#" target="_blank">
<img src="%%FILE:JPG2%%">
</a>
</div>
<style>
a {
display: block;
margin-bottom: .5em;
}
img {
display: block;
max-width: 100%;
}
*:last-child {
margin-bottom: 0;
}
</style>
<script>
var container = document.getElementById('container');
function resizeOutsideSafeFrame() {
if (!window.top.postMessage) {
return false;
}
// get ID of your Ad unit <div> with this creative
var divGptAdId = '%%PATTERN:url%%';
if (divGptAdId.indexOf('#') !== -1) {
divGptAdId = divGptAdId.split('#')[1];
} else {
divGptAdId = window.location.hash;
}
if(!divGptAdId) {
if (window.name.indexOf('#') !== -1) {
divGptAdId = window.name.split('#')[1];
}
}
if(!divGptAdId) {
return;
}
// set with to fullwidth, and height to height of container inside creative
var width = '100%';
var height = container.offsetHeight + 'px';
// send our request to website
window.top.postMessage({
cmd: 'setStyle',
id: divGptAdId,
query: 'div, iframe', // we want to target child div and iframe and don't change container styles
params: {
display: 'block',
height: height,
width: width
}
}, '*');
}
document.onreadystatechange = function () {
// resize iframe when all is loaded
if (document.readyState == "complete") {
resizeOutsideSafeFrame();
}
};
// first resize must occur little bit later
setTimeout(resizeOutsideSafeFrame, 100);
</script>
That's all. When you want to change anything on your website from inside of iframe, you can code your own cmd on your
website and call this command from inside of the iframe.
Edit 1:
just noticed now, that var divGptAdId = '%%PATTERN:url%%; will not return correct id of div on the page in #hash way, so now it's needed to give him a correct container div id change:
if(!divGptAdId) {
return;
}
to
if(!divGptAdId) {
divGptAdId = 'div-gpt-ad-container-div-id-1';
}

I couldn't find any solid documentation on this so the example from PayteR helped me immensely! I had to play with the new dimension to get the ad to expand the right way.
Here is some sample code I created from PayteR's example:
/* Main object for namespacing */
var Ad = function(obj) {};
/*
Register your ad with the dimensions of the current ad.
- This is basically an event handler for the the ad frame.
- 728 initial ad width
- 90 initial ad height
*/
Ad.prototype.registerExpand = function() {
$sf.ext.register(728, 90, function(status, data){});
};
/* Expand function to be called on click or load */
Ad.prototype.expandAd = function() {
/* Get the current geometry of your ad */
var self = $sf.ext.geom().self;
/*
Set the new geometry
- Increase height 315 pixels
- Expand downward by setting the bottom to the new height minus the current height
*/
$sf.ext.expand({
h: 315,
b: 315 - self.h
});
};
/* Intialize, register, and expand */
var ad = new Ad();
ad.registerExpand();
ad.expandAd();

Change element attribute when window resized (using WordPress)

I am very new to this and might be a newbie question with a so simple solution, but it is giving me a lot of headache.
I am making a WordPress site. Need to change a header image depending on a window width. Tried so many combinations that I found online, but none of them works. No idea if I should be using JS or Jquery.
This is what I got:
In my "header.php" file i have this:
<img src="<?php echo get_template_directory_uri(); ?>" alt="<?php bloginfo('name'); echo " - "; bloginfo('description');?>" id="logo" />
In my "functions.php" file i have this:
wp_enqueue_script( 'osmpg-logo', get_template_directory_uri() . '/js/logo.js', array(), '20150329', true );
This is the problem. This is my "logo.php" file:
$(document).ready(function($){
$(window).resize(function() {
var logo = $('logo');
logo.attr('src') += '/images/logo.png';
var windowsize = $(document).width();
if ((windowsize) <= 800){
logo.attr('src') = str.replace("logo", "logo1");
}
}
});
I know that the script does execute. I see it when I use debugging tools in browser. It just has no effect on my image. It is always only the result of "get_template_directory_uri();"
What I want is to add '/images/logo.png' for 800+ width, or '/images/logo1.png' for 799+ width, after the result of get_template_directory_uri(); template tag.
EDIT:
Now I have this 'error free' code. Now I need to make it do what I need to do.
jQuery(document).ready(function($){
// cache the element outside rezise handler, so that the DOM isn't searched on every resize:
var $logo = $('#logo');
$(window).resize(function() {
//declare current value of the src attribute:
var $src = $logo.attr('src');
//declare current window size:
var windowsize = $(document).width();
//check current window size and src attribute:
if ((windowsize) >= 800 && $src !== '/images/logo.png'){
//set new src value:
$logo.attr($src, '/images/logo.png');
//check current window size and src attribute again:
}else if((windowsize) < 800 && src !== '/images/logo1.png'){
//set new src value:
$logo.attr($src, '/images/logo1.png');
}
});
// update logo when page is displayed:
$(window).trigger('resize');
});
EDIT 2:
This code works, but only in IE. In Chrome, breaking point is 818px and not 801px. Any ideas? Maybe document.width includes browser scrollbar?
jQuery(document).ready(function($){
var logo = $('#logo');
$(window).resize(function() {
var src = logo.attr('src');
var logo_prefix = src.replace('/images/logo.png', '');
logo_prefix = logo_prefix.replace('/images/logo1.png', '');
var logo0 = logo_prefix + '/images/logo.png';
var logo1 = logo_prefix + '/images/logo1.png';
var windowsize = $(document).width();
if ((windowsize) > 800 && src !== logo0){
logo.attr('src', logo0);
}else if((windowsize) <= 800 && src !== logo1){
logo.attr('src', logo1);
}
});
$(window).trigger('resize');
});

First : $('logo') is not a proper selector. Selecting an element with specific id attribute, you should use # (hash) in front : $('#logo')
Next, jQuery .attr() does accept two arguments:
1 attribute name;
2 attribute value;
With logo.attr('src') you can read the value of src attribute.
To set the attribute, you have to pass the new value in second argument:
logo.attr('src', 'new_logo.png')`
Also, you should always check both conditions (window size and current logo) so that the logo isn't updated unnecessary if current window size and logo still meets conditions.
// cache the element outside rezise handler, so that the DOM isn't searched on every resize:
var logo = $('#logo');
$(window).resize(function() {
//declare current value of the src attribute:
var src = logo.attr('src');
//declare current window size:
var windowsize = $(document).width();
//check current window size and src attribute:
if ((windowsize) >= 800 && src !== '/images/logo.png'){
//set new src value:
logo.attr('src', '/images/logo.png');
//check current window size and src attribute again:
}else if((windowsize) < 800 && src !== '/images/logo1.png'){
//set new src value:
logo.attr('src', '/images/logo1.png');
}
});
// update logo when page is displayed:
$(window).trigger('resize');

See https://api.jquery.com/attr/
Here is wrong expressions logo.attr('src') = str.replace("logo", "logo1"); and logo.attr('src') += '/images/logo.png';. This expressions do nothing, method "attr" with one argument is simple attribute getter.
For setting attribute you must use two arguments, attribute name and value. In your example it some sort of logo.attr('src', "logo1"); and logo.attr('src', '/images/logo.png')
And $('logo'); selector return some list of <logo ... tags, you may need an image 'img' tag or some element with id?

Final code:
jQuery(document).ready(function($){
var logo = $('#logo');
$(window).resize(function() {
var src = logo.attr('src');
var logo_prefix = src.replace('/images/logo.png', '');
logo_prefix = logo_prefix.replace('/images/logo1.png', '');
var logo0 = logo_prefix + '/images/logo.png';
var logo1 = logo_prefix + '/images/logo1.png';
var windowsize = $('.wrapper').width();
if ((windowsize) > 600 && src !== logo0){
logo.attr('src', logo0);
}else if((windowsize) <= 600 && src !== logo1){
logo.attr('src', logo1);
}
});
$(window).trigger('resize');
});
The solution to my first problem (script not working at all) is realizing that JQuery in Wordpress works in a no-conflict mode.
more info
The solution to my last problem (CSS and JQuery calculate width of a document differently) is found here.
Solutions for most other problems provided by #Artur Filipiak. Thank you :)

iScroll 4 not scrolling on input elements

I'm building a mobile app that targets Android 2.2+, Blackberry 9+ and iOS 4+. In our stack we are using Phonegap, jQuery and iScroll (amongst others).
One of our app screens looks like this (text redacted for anonymity) - running in the iOS 5 simulator's Safari.
As you can see, this is a typical input screen with a fixed header, and multiple block-level form elements stretching the full with of the device screen, less padding.
As I mentioned, our app uses iScroll. We're initialising it on this page using the following code (taken from the iScroll 'forms' sample).
// ...
window.scroller = new iScroll(id, {
useTransform: false,
onBeforeScrollStart: function(e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if(target.tagName != 'select'
&& target.tagName != 'input'
&& target.tagName != 'textarea') {
e.preventDefault();
}
}
});
// Disable touch scrolling (Req'd for iScroll)
window.document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
// ...
On this screen, I've noticed that the content scrolls fine when the user touches any part of the background, but doesn't scroll when you begin the scroll gesture (swiping up or down) by touching one of the input elements. As you can understand this essentially makes this screen impossible to use, hence me looking for a fix.
I've since found the culprit line in iScroll;
if (nodeName == "TEXTAREA" || nodeName == "INPUT" || nodeName == "SELECT" ) return;
(179 in iscroll.js), an open issue for this bug with a claimed fix, and one pull request that claims to fix it, however the author of the bug seems to have incorrect line numbers, preventing me from attempting that fix, and the mentioned pull request doesn't work for me (tested on iOS 5.1, Android 4.0.4).
My question - is there some way to allow a user to scroll (using iScroll) when touching an input element? If not, iScroll is completely useless in cases like this. At the moment, I'm looking at either
Using the Overthrow shim that claims to have identical functionality to iScroll - however this isn't a great option due to various issues with Android - one of our key platforms.
Doing away with iScroll and loosing my fixed header.
It's 2012 - do we still not have a way to do this on Mobile browsers?!?

I realize this ticket is a bit old but I ran into it while dealing with the same issue.
I am using iScroll v4 on iOS.
I found this solution (somewhere) to add the following when setting up the iScroll object:
myScroll = new iScroll(id, {
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
e.preventDefault();
}
}
});
However I found 2 issues with this code:
a) The useTransform broke layout for a form where I was auto hiding radio buttons in order to show "pretty graphic" ones as per this page (http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/). I don't know why this would break that layout and possibly it was only a partial relationship I could have fixed another way but...I commented out the useTransform and it fixed it so...
b) For inputs that pulled up the virtual keyboard, the page stayed "scrolled up" (header off screen and footer about 1/4 up from bottom ) after the keyboard was hidden, so I added and "onBlur" event to "rescroll" the window and that seemed to work so... here is my final solution.
myScroll = new iScroll(id, {
//useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
e.preventDefault();
} else {
$(target).bind('blur', function(){
window.scrollTo(0,0);
myScroll.refresh();
});
}
}
});
Hope this helps!!!

I had exactly the same problem and used the following when I set up my iScroll:
var ISCROLL_MOVE;
var ISCROLL_MOVE_LIMIT=10;
// ... functions to include when you set up your iScroll
onScrollStart: function(e) {
ISCROLL_MOVE=0;
},
onScrollMove: function(e) {
ISCROLL_MOVE_LIMIT++;
}
Then when you have any form elements in your iScroll, e.g.:
var selectField = document.getElementById('mySelectField');
selectField.addEventListener('touchend' /*'mousedown'*/, function(e) {
if (SCROLL_MOVE<SCROLL_MOVE_LIMIT)
this.focus();
}, false);
Note the action is on a touch end event, and it allows for scrolling iScroll pages when the user touches on a form element - basically it measures the amount of scrolling ( or not ) which the user is making ( the amount of SCROLL_MOVE ). If its more than 10 ( the SCROLL_MOVE_LIMIT seems like a good number to me ) then the field won't grab focus , otherwise it will.
Let me know if you need more detail.

Remove the preventDefault():
window.scroller = new iScroll(id, {
useTransform: false,
onBeforeScrollStart: function(e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if(target.tagName != 'select'
&& target.tagName != 'input'
&& target.tagName != 'textarea') {
// remove this code right here:
e.preventDefault();
}
}
});

i'd answer about it here, without java-script and iscroll hacks
https://stackoverflow.com/a/17390516/1458628

I solved it perfectly. If you are using iscroll.js, then you can solve it easily by editing the iscroll.js file.
I edited the _move(e) function definition.
You will see the below code in the function definition of _move(e):
enter code here
that.moved = true;
that._pos(newX, newY);
that.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
that.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
if (timestamp - that.startTime > 300) {
that.startTime = timestamp;
that.startX = that.x;
that.startY = that.y;
}
if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);
//Enclose the above code in the else condition. And the if condition should be below:
enter code here
if (e.srcElement.localName == 'textarea') {
var scrollHeight = e.srcElement.scrollHeight;
var scrollTop = e.srcElement.scrollTop;
if (scrollTop >= 0 && screenTop <= scrollHeight) {
that.dirY = that.dirY * 5;
e.srcElement.scrollTop = scrollTop + that.dirY;
}
}
//Tested in IPad. Works fine for me.