I have a website where I use an Eventbrite Widget to checkout a page on my website.
It turns out that when running the script, the iframe, especially on cell phones, does not show the entire checkout. Scrollsbar appears to scroll and see some information.
It turns out that I would like to remove these scrollsbars, because some users don't bother to scroll them down 😱 and end up not filling in some data and not being able to proceed with the purchase.
The code I have is this:
I tried a height on the div, but it didn't work.
type her<div id="eventbrite-widget-container-489731288460" style="display: block; height: 100%;"></div>
<p>
<script src="https://www.eventbrite.com.br/static/widgets/eb_widgets.js"></script>
<script type="text/javascript">
var exampleCallback = function() {
console.log('Order complete!');
};
window.EBWidgets.createWidget({
// Required
widgetType: 'checkout',
eventId: '489731288460',
iframeContainerId: 'eventbrite-widget-container-489731288460',
// Optional
iframeContainerHeight: 900, // Widget height in pixels. Defaults to a minimum of 425px if not provided
onOrderComplete: exampleCallback // Method called when an order has successfully completed
});
</script>e
I also put the iframeContainerHeight: 900, but on the cell phone the scrollbar continues to appear
If anyone knows how to solve it, I'm grateful.
Remove eventbrite iframe scrollbar
Related
I'm working with PrimeFaces and BootsFaces libraries. I have a little form inside bootsfaces modal. The form is used to change system parameters, and for one specific parameter has a <p:keyboard /> to change its value. My problem is that in extra-small devices, the bootstrap modal doesn't allow horizontal scroll, and the keyboard is not showing complete:
The keyboard is not responsive by default when the viewport with is less than 510px, so I have adjusted it to 436px by default in extra small screens. I want to make horizontal scroll on the modal just to see the complete keyboard, but only when I open the modal.
This is my javascript function to adjust the keyboard depending on screen size:
$(document).on('click', '.inpKeyboard', function() {//- The input text has a class called 'inpKeyboard'
if ($(window).width() <= 505) {//- Small screen
$('#keypad-div').css('width', '436px');
$('#keypad-div').css('left', '0px');
//$('.modal-open').css('overflow-x', 'auto');
}
$('#keypad-div').css('z-index', '2000');
});
Any help would be appreciated. Thanks.
What a nice puzzle! :) PrimeFaces calculate the size of the keypad window in JavaScript and stores it as an inline-style. So the clue to solving this is to add a timeout, like so:
<script>
$(document).on('click', '.hasKeypad', () => {
$('#keypad-div').css('z-index', '2000');
if (!(window.width > 505)) { // JSF (i.e. XML) doesn't accept the less-than-operator
// add a timeout to make sure the code is executed after PrimeFaces did its magic
setTimeout(() => {
// set a fixed with
$('#keypad-div').css('width', '436px');
// add the horizontal scrollbar
$('#keypad-div').css('overflow-x', 'auto');
// increase the height to make space for the scrollbar
$('#keypad-div').css('height', '180px');}
,1);
}
});
</script>
<!-- set a minimum width for the keyboard rows -->
<!-- (otherwise the key overflow to the next row) -->
<style>
#media screen and (max-width: 504px) {
.keypad-row {
min-width:470px;
}
}
</style>
I am using Masonry (and imagesLoaded) with Wordpress:
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
and my site includes a number of images that ranges between 1 to 8 MB. I have noticed that the loading times are very long (I am using no pagination on Wordpress, so the page loads all content) and the grid keeps resizing until all images are loaded.
Is there a way to fix this?
This is my custom js:
$(document).ready(function() {
let $masonryGrid = $('.masonry-grid');
$masonryGrid.imagesLoaded(() => {
$masonryGrid.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
gutter: 0,
percentPosition: true,
transitionDuration: 0
});
});
});
You can create a preview version for all of your images - same dimensions, but drastically downscaled quality. Maybe with a "Loading" text or symbol over them.
Those previews should have the same filename with a suffix. You will have pairs of images like this
image001.jpg
image001_thumb.jpg
Then the individual image elements will then automatically start loading the full version :
<img src="image001_thumb.jpg" onload="this.src=this.src.replace('_thumb','');" />
And if you cannot directly influence image elements like this, add this to your custom .ready function (this is an example that would affect all images, just to give you an idea, you have to filter out only the images that are inside the grid)
var images = document.getElementsByTagName('img');
for(var i=0;i<images.length;i++){
// If the image is already loaded, change it immediately
if(images[i].naturalWidth != 0) images[i].src = images[i].src.replace('_thumb','');
else // If not, give it an onLoad function to change after it does
images[i].onload = function(){
this.src = this.src.replace('_thumb','');
}
}
For a better experience, maybe you can try to reveal each item after its image has loaded.
See the extra exemples section on Masonry docs
Iteratively reveal items after each image is loaded. See explanation on issue #501
When embedding a Bootstrap app in an iframe, modal dialogs always open at the top of the iframe, not the top of the screen. As an example, go to http://getbootstrap.com/javascript/ and open an example modal on the page. Then using the sample code below which places the same bootstrap page in an iframe, find a modal and open it:
<html>
<head>
</head>
<body>
<table width="100%">
<tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr>
<tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here's some sidebar content I don't control either</td>
<td valign="top">
<iframe width="100%" height="10000px"
scrolling="no" src="http://getbootstrap.com/javascript/">
</iframe>
</td>
</tr>
</table>
</body>
</html>
Demo in fiddle
How do I go about positioning the modal on the screen in this scenario?
UPDATE: Unfortunately, my iFrame cannot fill the screen, nor can I make it fixed since it needs to blend into the rest of the page and the page itself has enough content to scroll. This is not my design and I ultimately intend to rework the whole thing, but this is what I have to work around for now. As a temporary option, I'm using javascript to tell the iframe parent to scroll to the top where the modal dialog pops up. While this is acceptable, this isn't the desired behavior.
I'm using angularjs and the ui-bootstrap library in my code but as you can see above, it's a bootstrap issue.
If your iframe has the same document.domain as the parent window or it is a sub domain, you can use the code below inside the iframe:
$('#myModal').on('show.bs.modal', function (e) {
if (window.top.document.querySelector('iframe')) {
$('#myModal').css('top', window.top.scrollY); //set modal position
}
});
show.bs.modal will fire after you call $('#myModal').show()
window.top.scrollY will get the scrollY position from the parent window
In case your document.domain differs from the parent, you can hack it getting the onmousedown position inside the iframe. For example:
$('#htmlElement').on('mousedown', function (event) {
event.preventDefault();
$('#myModal').data('y', event.pageY); // store the mouseY position
$('#myModal').modal('show');
});
$('#myModal').on('show.bs.modal', function (e) {
var y = $('#myModal').data('y'); // gets the mouseY position
$('#myModal').css('top', y);
});
Quite old question but I don't see the solution/workaround I've found. It might be helpful for someone in the future.
I had the same issue - my iFrame doesn't fill the entire screen, it displays bootstrap's modal and it is loading content from different domain than the parent page.
TL;DR
Use window.postMessage() API - Documentation here. for communication between parent and iframe (cross-domain)
pass message with currentScrollPosition and Y position of your iframe
Reveive message and update modal's padding from the top
In my case the workaround was to use window.postMessage() API - Documentation here.
It requires to add some extra code to the parent and handle message in an iFrame.
You can add EventListener and listen to 'scroll' event. Each time the event handling function is invoked you can get currentScrollPosition like document.scrollingElement.scrollTop.
Keep in mind that your iframe can have some margin from the top in the parent page so you should also get its 'offset'.
After that you can post these two values to your iframe e.g. ncp_iframe.contentWindow.postMessage(message, '*');
Note that the message has to be a String value
After that in your iFrame you need to add EventListener and listen to 'message' event.
The event handling function will pass your 'message' in event.data property. Having that you can update modal padding. (Looks much better if you don't use animations e.g. fade, in classes);
Quick Example:
Parent:
window.addEventListener('scroll', function(event){
var myIframe = document.querySelector('#myIframe');
var topOffset = myIframe.getBoundingClientRect().top + window.scrollY;
var currentScroll = document.scrollingElement.scrollTop;
myIframe.contentWindow.postMessage(topOffset + ':' + currentScroll, '*');
});
iFrame:
window.addEventListener('message', function(event) {
var messageContent = event.data.split(':');
var topOffset = messageContent[0];
var currentScroll = messageContent[1];
//calculate padding value and update the modal top-padding
}, false);
This is a bug in most browsers (IE appears fine) where the elements are fixed to the iframe, not the window. Typically, if you need something to be relative to the main document, it has to be in the main document.
A workaround is to wrap your iframe in a fixed position div that takes up the whole width of the screen and then maximize the iframe within that. This appears to resolve the issue
HTML:
<div class="fixframe">
<iframe src="http://getbootstrap.com/javascript/"></iframe>
</div>
CSS:
.fixframe {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.fixframe iframe {
height: 100%;
width: 100%;
}
Working Demo in fiddle
See Also:
position:fixed inside of an iframe
iframe with a css fixed position : possible?
position fixed div in iframe not working
It is because the class .modal has position: fixed attribute. Try position: relative instead.
I have used the following code to have equal height for rightpos, leftpos and middlepos divs:
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
// Find the greatest height:
maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
maxHeight = Math.max(maxHeight, $('#leftpos').height());
// Set height:
$('#rightpos').height(maxHeight);
$('#middlepos').height(maxHeight);
$('#leftpos').height(maxHeight);
})
</script>
Determining of the tallest div using this way for the main page of http://yaskawa.ir/ works well in Firefox, but has problems in Chrome.
UPDATE 1 after Sparky672's answer:
I can see that with this code,the alert('test here'); at the end doesn't work.
<script>
jQuery.noConflict();
//jQuery(document).ready(function($){});
jQuery(window).load(function($){
// Find the greatest height:
maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
maxHeight = Math.max(maxHeight, $('#leftpos').height());
// Set height:
$('#rightpos').height(maxHeight);
$('#middlepos').height(maxHeight);
$('#leftpos').height(maxHeight);
alert('test here');
})
</script>
Try window.load() in place of document.ready() to ensure that all assets are loaded before your heights are calculated.
jQuery(window).load(function($){
Documentation:
The load event is sent to an element when it and all sub-elements have
been completely loaded. This event can be sent to any element
associated with a URL: images, scripts, frames, iframes, and the
window object.
http://api.jquery.com/load-event/
See DEMO:
http://jsfiddle.net/snBLP/3/
$(document).ready() isn't suitable for calculating heights. $(document).ready() doesn't wait for images to load, etc.
I'd suggest trying
$(window).ready()
instead...
Seeking a solution to my problem...
I partially found an answer from another thread on here, using this script
$(function () {
$(".myclass").hover(function ()
{}, function ()
{
$(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
$(this).attr("id", "current");
$(this).siblings().fadeTo(200, .6);
$(this).fadeTo(300, 1)
}, function ()
{
$(".myclass>li").removeAttr("id");
$(this).fadeTo(200, 1)
})})
When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe
This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".
When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?
Thanks in advance
----EDIT
Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.
I'm trying to guess how your code work, for what I understand you should do something like this:
// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
// fade all the thumbnails to op 1.0
$('#li.item').css('opacity', '.6');
// let the active thumbnail to 1.0
$(this).css('opacity', 1);
//show your hidden div
});
Then, when you close the hidden div:
$('div#hiddenDiv').onClose(function()
// about to close
$(this).fadeTo('fast', 1);
});
You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6
$('.zetaThumbs li').click(function(){
$(this).css({'opacity':1}).siblings().css({'opacity':.6});
})