In one of my views, I have an Ext.Component that shows an iframe.
It is defined like this:
Ext.define('MyApp.view.MyView',
extend: 'Ext.Component',
alias: 'widget.myview',
id: 'myView',
config: {
style: '-webkit-overflow-scrolling: touch; height: 100%; overflow: auto;',
href: false
},
template: [
{
reference: 'iframeElement',
tag: 'iframe',
style: 'height: 100%; width: 100%; border: 0;'
}
],
updateHref: function(href){
this.iframeElement.set({ src: href });
}
});
When I render the component, I load the iframe content using updateHref('http://');
The problem is, on iPhone, when I scroll the iframe content down and the scrolling is ended,
the document is scrolled back up automatically to the beginning.
How can I solve this?
OK, I found a workaround for this issue.
The solution is to set the height of the iframe to a high value, such as 2000px. Then, the content won't jump back to the beginning if you scroll less than 2000 px from the top.
Related
I have a case where I am using a jquery ui dialog and I have any html table in the dialog where the dialog is fixed height:
$("#modalDialogContainer").dialog({
resizable: false,
height: 700,
autoOpen: false,
width: 1050,
modal: true,
I call an AJAX query from a button click and I want to use jquery UI blockUI plugin to show a "loading" message. Something like this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
The issue I have is that the content in the dialog is longer than the height of the dialog
and I given the dialog is FIXED height so that causes the dialog to have a vertical scroll bar.
Having the scroll bar is fine (that's actually what I want) but the knock on effect is that
because of that depending if the user has scrolled down or not, the blockUI message is not centered (or even visible on the screen) vertically.
Question: Is there anyway I can detect what is visible areas inside a dialog that has a vertical scroll bar to vertically align the block message properly?
Above as you can see its hard coded to be 200px from the top so it works great if the user hasn't scrolled down but you can't see the message if the user has scrolled down the whole way
In short, if i am at the top of the scroll, then i would have this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
if i am at the bottom of the scroll, then i would want this:
$("#myTableInsideDialog").block({
css: {
top: '',
bottom: "200px",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
I wouldn't alternate between top AND bottom properties:
For a window sized 1000px, top:800 == bottom:200
The important question, is how you can find out your scroll distance from the top. For that lets use a function:
function calcTopLocal() {
var s = $('#modalDialogContainer').scrollTop() + 'px';
return s;
}
Now, to apply it to your block:
$("#myTableInsideDialog").block({
css: {
top: calcTopLocal()
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
This can be refactored many ways. The significant detail is using scrollTop() and applying styling.
response to MKaama:
My proposed answer has no loops, no timers, and no suggestions of repeated action. There is no
Repeatedly calling a js function just to keep the position fixed is an overkill, a waste of CPU
If you want to add an loading message when the ajax is requesting the data, you can append a <div> on the dialog containing the message you want to display. Then you can apply a relative position to the dialog and an absolute position to the <div> and with margin:auto the div remains in the center of dialog always, even if you scroll the dialog.
jsFiddle demo
$("#modalDialogContainer").dialog({
resizable: true,
height: 300,
autoOpen: true,
width: 300,
modal: true,
buttons: {
'call ajax': function(){
// insert the loading div to the dialog
$(this).parent().append("<div class='loading' />");
$.ajax({
type: 'json',
url: 'jsonRequest.php',
complete: function(){
// remove the loading div
$('.loading').remove();
},
success: function(){
//do what you want
}
});
}
}
});
the CSS file should be something like this
#modalDialogContainer{
position: relative;
}
#myTableInsideDialog{
height: 1000px;
width: 100%;
}
.loading{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
...
}
there is a useful plugin that can tell if an element is visile on screen or not ( scrolled to ) , you may simply use it , the function returns true for visible areas on screen :
Here is a quick demo:
http://opensource.teamdf.com/visible/examples/demo-basic.html
Here is the source page :
http://www.teamdf.com/web/194/jquery-element-onscreen-visibility
usage as simple as:
$('#element').visible()
Use
$('#modalDialogContainer').scrollTop()
to find the amount of user's scroll.
You can then show your message with
{ top: $('#modalDialogContainer').scrollTop()+'px' }
And it will always be visible for them, and appear at the top of what they are looking at :)
Why bother with the height of the content at all?
I mean, isn't an easier solution to the problem possible by putting a "BlockUI" on the JQuery Dialog. Since you have a fixed height there, your block UI would most certainly be fixed as well. There is no way the scroll can now affect your message.
A crude example is hosted here in fiddle. It gives you both experiences so you can see how it behaves.
For example, you can put the block UI on the following class.
var container = ".ui-dialog";
$(container).block({
message: '<h1>Processing</h1>'
});
$.ajax({
url: "/echo/json/",
data: {
json: {},
delay: 5
}
}).done(function() {
console.log("Done with ajax");
$(container).unblock();
});
I'm using this javascript/jQuery to open a dialog, however when I scroll down on the page and open another window after closing the first one, the window will open at my selection position, plus the position I scrolled down. When I try to move it around, it will keep jumping down, causing a very annoying result.
function showDialog(url) {
dialogFrame = $('<iframe style="width:100% !important;" frameborder="0" id="Dialog" src="' + url + '" />').dialog({
autoOpen: true,
height: 500,
width: 1000,
title: 'myWindow',
resizable: false,
modal: true,
position: {
my: "center",
at: "center",
of: window
}
});
}
How can I prevent this behavior? It's probably the position : { } but what should it be?
I had the same issues with a jQuery UI dialog when the body had the CSS property position:relative;. You might want to check if that is the case.
In my case I could not remove the position:relative; so I decided to override the top value and use a fixed positioning:
$(".dialogFrame").dialog({
// ...
open: function(event, ui) {
$(event.target).parent().css('position', 'fixed');
$(event.target).parent().css('top', '20px');
}
// ...
});
The script could be optimized by calculating the effective center of the screen.
I'm wondering how to bring attention to a section that has more information than is showed on the screen. Essentially, the way it currently looks, it might only appear that there is one piece of data in the table, but in reality there is a scroll window. I'd like to bring attention to the fact that there is more data, you just need to scroll. I added the border and that at least started to help.
http://jsfiddle.net/xG3uc/
How would you highlight that there is more data but you just need to scroll to see it?
.but_there_is_more {
max-height: 50px;
overflow-y: auto;
border: 1px dotted #ccc;
}
Maybe if the div expands over the max-height, have some javascript to show a link to "expand" the rest?
Want to try qTip2? Check DEMO http://jsfiddle.net/yeyene/xG3uc/10/
JQUERY
$(document).ready(function(){
$('.a')
.qtip({
content: {
text: 'Scroll for more data!'
},
position: {
my: 'bottom right',
at: 'bottom right'
},
show: {
event: 'mouseover',
ready: true // show the tooltip when ready
},
hide: {
event: 'click unfocus' // click anywhere to hide
},
style: {
classes: 'ui-tooltip-red'
}
});
});
Source and Doc of qTip2 http://craigsworks.com/projects/qtip2/demos/
I am having trouble figuring out how to put some additional content into an iframe I am displaying with fancybox.
My basic setup:
$('.fancybox').fancybox({
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'padding': 0,
'closeClick': false,
helpers: {
overlay: {
closeClick: false
}
}
<a class="fancybox" href ="http://my-iframe.example"/><img src="myimage.jpg" width="x" height="y" /></a>
So I need to put a couple of custom buttons and another javascript widget in under the iframe but on top of the background overlay.
I am just having trouble grasping what might be the best way to do this. I suppose I could put this content in a div and then display that div once the fancybox has completed loading? I am having trouble with the callback function though, so I just need some general direction on the best way to do this.
if using fancybox v2.x try with the call back afterShow to append the additional content to the .fancybox-inner selector like :
afterShow: function(){
var customContent = "<div class='customHTML'>My custom content</div>"
$('.fancybox-inner').append(customContent);
}
use CSS to style and position such additional content, e.g.
.customHTML {
position: absolute;
z-index: 99999; /* this place the content over the fancybox */
bottom: 0px;
right: 0;
background: #f2f2f2;
width: 200px;
height: 100px;
display: block;
}
If the iframe is from same domain then you can access the contents with contents()
$('#fancybox-frame').contents().find('h1').prepend('<a>Button</a>');
This will not be possible for cross domain cases.
If your case also require javascript widgets to be injected, that might be hard for you with injecting into DOM, you can better go for a different div shown along with iframe.
For that just make the div show up on onComplete event or onStart event, and then position it according to fancybox position, height etc.
To make it above overlay, give it some positioning, you should obviously, and give a higher z-index that overlay.
#fancybox-overlay {
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1100;
}
#mydiv{
position:absolute;
z-index:1101;
}
You can try data attributes (data-fancybox-title) and initialize fancybox to place it to the top like this:
$(".fancybox-video").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
}
});
You can find more info here: Fancybox Instructions
I needed a solution for FancyBox 1.3 and in my case I used the onComplete event to update the contents
<a class="iframe" id="fancybox-preview-card" href="about:blank"></a>
$("#fancybox-preview-card").fancybox({
'height': screen.availHeight * 0.9,
'width' : 600,
'onComplete' : updatePreviewContent,
'overlayShow': false
});
...
var contentUpdated = false;
function previewEcardTemplate() {
contentUpdated = false;
$("#fancybox-preview-card").attr("href", "about:blank").trigger("click");
}
function updatePreviewContent() {
// if content has already been updated then back out
if (contentUpdated)
return;
contentUpdated = true;
$.get('/template/mytemplate.htm', function (data) {
// Any mods to the html can go here
var ifrm = document.getElementById('fancybox-frame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write(data);
ifrm.document.close();
})
}
I am returning data via ajax to populate a jquery dialog. The ajax is basically an html table with a variable amount of rows.
I'd like the dialog to expand to show the rows, up to a certain vertical size (350px), at which point it should show a vertical scrollbar.
So, this seems to work fine - the dialog resizes correctly depending on the number of rows. But, I never get the vertical scrollbar - so if I have 20 rows, then I only get to see the last 9.
How do I force the vertical scrollbar if the height would have been more than 350px?
$.ajax({
type: 'POST',
url: 'myurl',
data: postdata,
dataType: 'json',
success: function (result) {
if (result.success && result.data) {
var $dialog = $('<div></div>').html(result.data).dialog({
autoOpen: false,
title: 'History',
modal: true,
height: Math.min((result.rows * 25) + 150, 350),
width: 800
});
$dialog.dialog('open');
}
event.preventDefault();
}
});
You should add css property overflow:auto for content div.
$("<div></div>").css({height:"350px", overflow:"auto"});
If you need ONLY vertical scroll overflow-y:auto and overflow-x:hidden
use css max-height: 350px; and overflow:auto; .. should be fine
I know this is kind of old but none of these worked for me. Here is what is working as of jQuery UI 1.10.
$("#helptext").dialog({
title: 'Blog Help',
autoOpen: false,
width: '90%',
height: ($(window).height() - 200),
modal: true
});
Adjust Height and width as you like. I have allot of text in my dialog and didn't want to scroll the whole page.
I didn't want to give a fixed px height so I found a solution giving the model the following css rules.
.modal {
display: inline-block !important;
max-height: 90%;
overflow: auto;/* Or scroll, depending on your needs*/}
I hope it works for you.
For me worked:
.jconfirm-holder {
overflow-y: auto;
}