Theme is working whole page in ipad jquery mobile - ipad

Hi
i am using theme="a", data-overlay-theme="a" and data-dismissible="false". But it is not working on whole page of iPad. How to apply on whole screen so that it look fine.
I also used this:
$(document).on('popupafteropen', '[data-role="popup"]', function(event, ui) {
$('body').css('overflow', 'hidden');
}).on('popupafterclose', '[data-role="popup"]', function(event, ui) {
$('body').css('overflow', 'auto');
});
Here is my code.
jquery css
.ui-popup-screen {
background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
top: 0;
left: 0;
right: 0;
bottom: 1px;
position: absolute;
filter: Alpha(Opacity=0);
opacity: 0;
z-index: 1099;
}
.ui-popup-screen.in {
opacity: 0.5;
filter: Alpha(Opacity=50);
}
.ui-popup-screen.out {
opacity: 0;
filter: Alpha(Opacity=0);
}
Structure Css**************************
.ui-popup-screen {
background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
top: 0;
left: 0;
right: 0;
bottom: 1px;
position: absolute;
filter: Alpha(Opacity=0);
opacity: 0;
z-index: 1099;
}
.ui-popup-screen.in {
opacity: 0.5;
filter: Alpha(Opacity=50);
}
.ui-popup-screen.out {
opacity: 0;
filter: Alpha(Opacity=0);
}

This should help, overlay DIV should now cover whole page, doesn't matter how much screen size is big or is content scrolled or not.
CSS:
.ui-popup-screen {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left:0 !important;
}
This CSS block has been tested in jsFiddle example so I can be 100% sure it will work. If not We will find another solution.

Related

How to theme the scrollbar in xtermjs?

How to theme the scrollbar in xtermjs? I see the theme options for the background and foreground but nothing related to the scrollbar.
If anyone is looking, this was my solution in the xterm.css addind --webkit onto the viewport selector
.xterm .xterm-viewport {
/* On OS X this is required in order for the scroll bar to appear fully opaque */
background-color: transparent;
overflow-y: scroll;
cursor: default;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
scrollbar-color: var(--highlight) var(--dark);
scrollbar-width: thin;
}
.xterm-viewport::-webkit-scrollbar {
background-color: var(--dark);
width: 5px;
}
.xterm-viewport::-webkit-scrollbar-thumb {
background: var(--highlight);
}

The best way to put a youtube video into a website and get a good score from Google Page Speed Insight

Currently, if I put into a website some video via iframe code and use autoplay mode, I always get a very bad score on Google Pages Speed Insights. I found only one way to avoid the problem. It is lazy loading a video after 4 seconds delay. However, the described method is not good for user experience.
Does somebody know a more appropriate way to fix that?
The best way to do this is to show an image instead (ideally the thumbnail but there is no reason why you couldn't show a different image) and load the video and all the related JS when the image is clicked.
The below method is just an example of how to do this, in production it would be better to actually load it properly using the YouTube API so the video plays on click instead of having to click twice, (they disabled autoplay for videos with sound using iFrame embedding) but it should give you a good starting point as your question was simply how to get around the problem!
Please note that due to restrictions on Stack Overflow the below video won't play, here is a jsFiddle here that works. with exactly the same code as below.
( function() {
var youtube = document.querySelectorAll( ".youtube" );
for (var i = 0; i < youtube.length; i++) {
var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );
youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
};
} )();
html {
background-color: #f3f3f3;
}
.wrapper {
max-width: 680px;
margin: 60px auto;
padding: 0 20px;
}
.youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -16.82%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
<div class="wrapper">
<div class="youtube" data-embed="U9t-slLl30E">
<div class="play-button"></div>
</div>
</div>
LazyLoad is kind enough to do the job. The plugin does not only apply lazy load to images, but also to embed videos and Iframes. Just set it up and apply "lazy" as a class to the YouTube iframe.
Here is a quick example:
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload#17.3.1/dist/lazyload.min.js"></script>
<script>var lazyLoadInstance = new LazyLoad();</script>
<iframe class="lazy" height="300" width="500" data-src="https://www.youtube.com/embed/YoutubeCode"></iframe>

How to use $.scrollTo with a jqm panel that has a header

This is a follow-up question to this SO question.
I have a new requirement where I need to add an input field to the top of the panel.
So I would like $.scrollTo to affect #myContent instead of #myPanel .ui-panel-inner.
Here's the fiddle. You can see that the input field scrolls off the screen.
I thought I would try adding a div around the content:
$(document).on("pagebeforeshow", "#page1", function(){
$('#myPanel').on('panelopen',PanelOpen);
});
function PanelOpen(myEvent, myUI ) {
$("#myContent").scrollTo('#ID498',1000)
}
But it doesn't work.
Update your CSS so that the content is scrollable instead of the inner panel. The inner panel is still sized to fit the screen and then myContent is sized to fill the inner panel but leaving room at the top for the new input element:
.ui-panel .ui-panel-inner {
overflow: hidden;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#myContent {
overflow: auto;
position: absolute;
top: 78px; left: 0; right: 0; bottom: 0;
-webkit-overflow-scrolling: touch;
}
Then in panel open:
$("#myContent").scrollTo('#ID498',1000);
Updated FIDDLE
Another way of doing it with css
#myHeader { position: fixed;
z-index: 9999;
background-color:white;
box-shadow: 0px 0px 0px 28px white;
}
#myContent { margin-top:35%; }
Because of the Margin above with this method you subtract 5 on your ID's to get the position below the search box
#ID493 will go to 498
Demo http://jsfiddle.net/8dJJb/

jQueryUI draggable disables mouseover/mouseout events for elements with "z-index" values < 0

If a jQuery UI draggable element (#box1) is dragged over an element (#box2) that has z-index set to -1 or below, mouseover and mouseout events won't fire. With z-index set to 0 or above they fire.
CSS:
#box1 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid blue;
}
#box2 {
position: absolute;
top: 100px;
left: 300px;
width: 100px;
height: 100px;
border: 1px solid red;
z-index: -1;
}
JavaScript:
$(function() {
$("#box1").draggable();
$("#box2").mouseover(function(e) {
$("#box2").css({
backgroundColor: "green"
});
});
$("#box2").mouseout(function(e) {
$("#box2").css({
backgroundColor: "transparent"
});
});
});
See: http://jsfiddle.net/TTwPj/11/
Without dragging mouseover and mouseout work fine with all z-index-values.
Is there a reason for this behaviour or is it a bug?
This "problem" has nothing todo with negative or positiv values of your z-index.
In this updated fiddle: http://jsfiddle.net/TTwPj/23/
#box1 {
z-index: 2;
}
#box2 {
z-index: 1;
}
you can see I set some positive values and the mousover still not firing. This is how z-index work.
If you want to achive a mouseover while dragging over the droppable element you can use the droppable event:
over: function( event, ui ) {}
to add a CSS class or style to show some visible "mouseover" effect.

jQuery combobox Styling issue

I am rendering a jQuery combobox, but the height of input element does not match the height of toggle button as shown in screen shot below. This is happening in both, IE 9 and FireFox 13.
The style being used for jQuery combobox is as below.
<style>
.ui-combobox {
position: relative;
display: inline-block;
}
.ui-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-combobox-input {
margin: 0;
padding: 0.3em;
}
.ui-autocomplete { height: 200px; overflow-y: auto; }
</style>
You should update your combo-box widget from the jqueryui page. and make sure that you use the latest jquery-ui (this issue was fixed recently).
this helped me...

Resources