I am trying to use the jquery-mobile spinner but it doesn't seem to work
From the official docs ( http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html ), i tryied running this in the chrome console and it works
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: "<i class='icon-spinner icon-4x'></i>"
});
but if i try running this, from application.html.haml or console, doesn't seem to work
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='icon-spinner icon-4x'></i>";
});
it displayes a shadow instead of my spinner :-? .
What am i missing here?
Thanks :)
Solution:
Working jsFiddle: http://jsfiddle.net/Gajotres/vdgB5/
Mobileinit event must be initialized before jQuery Mobile is initialized and after jQuery. Also some additional changes to css must be done for this to work.
First of all, we need to override default ui-loader-default class because its opacity is to low and final spinner is hard to see. Change opacity value how ever you want.
.ui-loader-default {
opacity: 1 !important;
}
And this is our spinner. Because you are using custom i tag we need to use display: block, without it spinner will be hidden.
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
display: block;
}
Here's a working example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
.ui-loader-default {
opacity: 1 !important;
}
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
opacity: 1 !important;
display: block;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
$.mobile.loading( 'show');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Related
I'm inspecting https://ionicframework.com/docs/api/alert alert..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script type="module">
import { alertController } from 'https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/index.esm.js';
window.alertController = alertController;
</script>
</head>
<body>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Alert</ion-title>
</ion-toolbar>
</ion-header>,
<ion-content fullscreen class="ion-padding">
<ion-alert-controller></ion-alert-controller>
<ion-button expand="block">Show Alert</ion-button>
</ion-content>
</ion-app>
<script>
const button = document.querySelector('ion-button');
button.addEventListener('click', handleButtonClick);
async function handleButtonClick() {
const alert = await alertController.create({
header: 'Use this lightsaber?',
message: 'Do you agree to use this lightsaber to do good across the galaxy?',
buttons: ['Disagree', 'Agree']
});
await alert.present();
}
</script>
</body>
</html>
There is an element there with .alert-wrapper class on it.
if you'll look at the applied CSS, it will show you opacity: 0, but the computed shows opacity: 1
I tried removing all the CSS Files from the page, all the javascript, all the other elements
I tried to move this element to the body (outside the iframe) and applying the opacity: 0 in the styles, nothing helps, the computed stays opacity: 1..
How is this possible?
They are using the Web Animations API.
elem.animate([{ opacity: "1" }],{duration: 1, iterations: 1, fill: "forwards"});
#elem {
opacity: 0;
}
<div id="elem">Hello</div>
I think you already know this but have you tried using - !important
The initial value of opacity is - 1.0
Inherited - no
Computed value -> the specified value, clipped in the range [0,1]
source - MDN
I have an anchor and a H1 with a span. When I click the span I show an alert, but the link is also opened and I don't want this happens, I only want to show the alert. Is there any way to do this with CSS (I can't not use jQuery for that)? Maybe z-index?. This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
$("span").click(function() {
alert("The span was clicked");
});
</script>
</body>
</html>
Here the fiddle: https://jsfiddle.net/b820m6uj/
IF you can't use jQuery, you can use vanilla javascript:
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
document.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
alert("The span was clicked");
});
});
</script>
</body>
</html>
If you are already using jQuery change the span selector to a pass the event object and add event.preventDefault() within your block. See Demo 1.
Here's a way to use CSS but you need to change 2 things in HTML.
Ad an id to your <span> or <h1> (ex. <span id='tgt'>...`)
Next, change <a>nchor target to the id of the <span> (ex. <a href="whatever.com" target='tgt'>...`)
Last but not least, add this ruleset to your CSS:
#tgt:target {display:inline}
The pseudoclass is :target which when applied, as demonstrated above, will enable whatever ruleset on the selector it's assigned to when an <a>nchor is clicked (with all the preparations previously explained of course.) I assigned display:inline because span#tgt already is inline making the <a>nchor truly disabled and almost completely worthless yet clickable. See Demo 2. BTW added a second example in Demo 2 with JavaScript and it still functions fine.
Demo 1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
$("a").click(function(event) {
event.preventDefault();
alert("The span was clicked");
});
</script>
</body>
</html>
Demo 2
document.getElementById('tgt2').addEventListener('click', function(e) {
/* Once again this would be the best solution */
// e.preventDefault()
alert("Hey JavaScript/jQuery works still!")
}, false);
#tgt1:target {
display: inline
}
#tgt2:target {
display: inline
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="tgt1">
<h1 id='tgt1'>Title <span>:target with CSS only</span></h1>
</a>
<hr/>
<a href="https://stackoverflow.com/" target="tgt2">
<h1 id='tgt2'>Title <span>:target with JS alert()</span></h1>
</a>
</body>
</html>
You can attach a click handler to the a then test the e.target and see if it was the span, and if so, show the alert and use e.preventDefault() to disable the link.
$("a").on('click', function(e) {
span = $(this).find('h1 span')[0];
if (e.target == span) {
e.preventDefault();
alert("The span was clicked.");
}
});
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://stackoverflow.com/">
<h1>Title <span>Some text</span></h1>
</a>
You can try this full code on your computer. When I resize my Chrome and Firefox, the right hand side (which is column 2) will overrun the left hand side.
In jsfiddle this is harder to observe but if you want to: http://jsfiddle.net/kkmzkkyq/5/
It seems like this is caused by my col-xs-12 but isn't that used if I want a stack behavior?
Second problem is when I resize the window I can also see the right hand side continue (the text is not done!) How do I fix that? Am I supposed to apply text wrap?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>robots.txt scanner demo</title>
<link rel="stylesheet" type="text/css"
href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<!-- CSS are mainly based off
http://tech.deepumohan.com/2013/09/javascript-ace-editor-positioning-bootstrap.html
ACE editor CSS is a pain to work with....
-->
<style type="text/css" media="screen">
.right {
position: absolute;
padding-left: 0;
right: 0;
display: block;
padding: 0px;
height: 100%;
font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana, sans-serif;
background: #708090;
color: black;
}
.left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
top: 0;
bottom: 0;
left: 0;
padding-left: 0;
padding-right: 0;
}
#editor {
position: relative;
top: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 left">
<div id="editor"></div>
</div>
<div class ="col-xs-12 col-md-4 right">
<h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
</div>
</div>
</div>
</script>
<script type="text/javascript" charset="utf-8"
src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript" charset="utf-8"
src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js">
</script>
</script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
editor.setOptions({
fontSize: "13pt",
useWorker: false
});
editor.session.setOption("useWorker", false);
function resizeAce() {
return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
</script>
</body>
</html>
Your biggest problem is that you're not including the bootstrap3.0.2.js file - the css alone is not enough.
Secondly - the grid "bubbles up" - so if you define col-xs-12 and no col value for "sm" you will get 12 as the col value for sm size screens. So you could do a col-sm-8 and remove the col-md-8.
You also don't need to add left or right as your classes. Here's a good explanation of the grid: http://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system
And here is the body of your html: you have some messy (closed but never opened) script tags - and I added the include for the bootstrap JS file.
You still have to address the text issue (it's not being wrapped because there are no white spaces I would expect.
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div id="editor"></div>
</div>
<div class ="col-xs-12 col-sm-4">
<h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
editor.setOptions({
fontSize: "13pt",
useWorker: false
});
editor.session.setOption("useWorker", false);
function resizeAce() {
return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
</script>
</body>
How can I make a scrollbar for my page that appears when I place my cursor at the corner ?
I found out a way to make the scrollbar appear and disappear on hover by using the following:
div { overflow:hidden;height:whatever px; }
div:hover { overflow-y:scroll; }
But that only applies to div tags. I want the scroll-bar to appear only when I take my cursor at the right edge of the page. I tried using body instead of div but then it disturbs all the pages even to those which have less contents.
Please suggest me a way to do so.
what i have understood is that you want something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Liveweave</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.right').hover(function(){
$('.box').css('overflow-y','scroll');
},function(){
$('.box').css('overflow','hidden');
});
});
</script>
<style type="text/css">
.box
{
overflow:hidden;
width: 100px;
height: 100px;
background-color: yellow;
overflow: hidden;
}
.box:hover
{
/*overflow-y:scroll;*/
}
.body{width:100%}
.right{float:right;min-height:50px;position:absolute;right:0}
</style>
</head>
<body>
<div class="body">
<div class="right">
right edge
</div>
<div class="box">asdfsadfsdafsdafsdaf,
sdfsdfsdfsdfsdfsd
sadfsd
sdf
sadf
sdf
dsf
sdfdsfsdfsdfsdfsdfsdaf
sdffsdf</div>
</body>
</html>
I have a flash scene converted with Google swiffy to html5.
All is fine but I can't get the scene (or stage) align to the right side of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy output</title>
<script src="https://www.gstatic.com/swiffy/v4.9/runtime.js"></script>
<script>
swiffyobject = {"tags":[{"bounds":.........HERE IS THE SWIFFY-CODE..........
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 800px; height: 310px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</body>
</html>
Can you help? I think it's very easy for HTML-specialists - but I can't solve
this little problem.
I assume the script is what you want to align... if not ill take it as an example
With float:right; you can make it float to the right
<div style="float:right;">
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</div>
a other option is text-align:right;
<div style="text-align:right; width:100%;">
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</div>
If you find this page because you were looking how to CENTER the swiffy animation then;
#swiffycontainer { margin:0 auto; }
Works great for me.