Is it possible to block the UI when using $.mobile.pageLoading(false)?
This feature isn't implemented in jQueryMobile Alpha 1.0a4.1.
I solved the problem adding a overlay div with high enough z-index.
JS:
$(document).ready(function () {
$('body').append('<div id="block-ui"></div>');
$('#ajax_request').click(function(){
$('#block-ui').show();
$.mobile.pageLoading(false);
});
});
CSS:
#block-ui {
display: none;
cursor: wait;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 9;
background-color: #CCCCCC;
opacity: 0.5;
}
If you're using using fixed-bars you need to override z-index value:
.ui-header-fixed, .ui-footer-fixed {
z-index: 8 !important;
}
Related
I've been looking through the slick-theme.css and I can't figure out how to hide the numbers inserted after the dots.
Can anyone enlighten me?
The official solution is this according to slick.css
.slick-dots li button {
font-size: 0;
}
The best way would it be to create your own dots on a pseudo element, since the dots you see come from the list-item.
That's how slick is doing it for their own theme:
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:before {
content: '•';
font-size: 22px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
text-align: center;
opacity: .25;
color: black;
}
Adding this worked for me
.slick-dots li button {
display: none;
}
Numbers can be removed by using the text-indent property.
.slick-dots li button {
text-indent: -9999px;
}
You can remove text of the button with javascript like this:
var dotNums = document.querySelectorAll(".slick-dots button");
function removeText(item) {
item.innerHTML = ""; // or put the text you need inside quotes
}
dotNums.forEach(removeText);
This is what I did to remove the numbers from the dots.
solution 1
setTimeout(function(){ const dots = document.querySelectorAll('.slick-dots li button') dots.forEach(dot=>dot.innerHTML="") },1000)
.slick-dots li button doesn't happen to be part of the DOM when the page loads. it's is added after the slider start sliding.
Recommended solution
.slick-dots li button {
text-indent:-1000
}
you can use jquery to remove the dots
Docs
$('.your-slider').slick({
dots: false
});
I'm trying to show a gif during an Ajax call; it works fine if the div is at the body level but won't appear in a tab panel. I've tried putting the div at the tab-pane, container, row and column levels but it won't show.
Simple html:
<div id="loading">
<img id="loading-image" src="images/page-loader.gif" alt="waiting..." />
</div>
jquery:
$('#loading').hide(); $('#loading').show(); // as required
css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 10px;
left: 24px;
z-index: 100;
}
Try this:
$(document).ajaxStart(function() {
$('<div id="loading"><img id="loading-image" src="images/page-loader.gif" alt="waiting..." /></img></div>')
.prependTo('.tabClass'); });
$(document).ajaxStop(function() {
$('#loading').remove();
});
replacing 'tabClass' with the class of whatever container you want the gif animation to attach to.
I've found this solution to be cleaner & work well.
I'm trying to show a popup when someone clicks on a youtube thumbnail. This works fine in Chrome but the click event isn't firing in Firefox.
I've managed to cut the problem down to what I've got below (Fiddle here)
<div class="Youtube">
<img class="Thumb" src="http://img.youtube.com/vi/RsYlGFBEpM4/mqdefault.jpg" alt="Marrakech"/>
<img class="PlayButton" src="http://ec2-54-229-110-227.eu-west-1.compute.amazonaws.com/Content/images/VideoPlay.png" alt="Play button"/>
</div>
The attach is happening fine but the handler doesn't get called in Firefox
$(".Youtube").click(function () {
alert('clicked');
return false;
});
I suspect it's something to do with the positioning/layout of the div or images
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
}
div.Youtube img.Thumb {
position:relative;
z-index:-1;
}
.Youtube img.PlayButton {
height: auto;
width: 160px;
position:relative;
left:20px;
top:-160px;
z-index:-1;
opacity: .7;
}
Can someone point out my mistake? (I've just noticed the border of the div catches clicks are appropriate, just not any content)
Try : This updated jsFiddle - removed superfluous use of z-index property.
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
}
div.Youtube img.Thumb {
position:relative;
}
.Youtube img.PlayButton {
height: auto;
width: 160px;
position:relative;
left:20px;
top:-160px;
opacity: .7;
}
With a positive z-index set on .Youtube class works fine on FF too.
Code:
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
z-index: 1;
}
I'm searching for the reason on the net...
Demo: http://jsfiddle.net/IrvinDominin/6Zkua/
EDIT
I think the reason why is that we are defining all the elements in the same stacking context relative, but firefox in this context assume undefined if the z-index is not set so the element will be always at lower index.
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Explicitly adding z-index to Div makes it work on firefox
z-index:0
http://jsfiddle.net/LsqAq/3/
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).
http://jsfiddle.net/wX6eU/
The rotation eases in and out even though I don't specify the out parameter. How can I make it stay at 360 or just go back to 0 without any animation?
div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: blue;
-webkit-transition:-webkit-transform 0.5s ease-in;
}
div:hover {
-webkit-transform:rotate(360deg);
}
Just place the transition within the :hover pseudo-selector:
div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: blue;
}
div:hover {
-webkit-transform:rotate(360deg);
-webkit-transition:-webkit-transform 0.5s ease-in;
}
http://jsfiddle.net/DgBDt/
I don't believe it's possible to set the timing on the "out" differently than the "in". The ease-in option is the timing function. Other options are default, linear, ease-out, ease-in-out, and cubic-bezier. You can read more about them here, but there isn't any information on setting the transition-out to zero seconds, unfortunately.
An alternate option might be to use JS to get the functionality you want and still use the CSS animation:
$(function(){
var timer;
$('.animated').hover(function(){
timer = setTimeout(function(){ $('.animated').removeClass('animated') }, 500)
}, function(){
clearTimeout(timer);
$(this).addClass('animated');
});
});