I'm attempting to use mgcrea's Angular.js pull-to-refresh library, but I cannot get it to pull down and fire off. I can see the dotted line where it starts above the div, but it won't pull down at all. I'm not getting any errors in the Chrome Console or on Logcat.
index.html: Both the pull-to-refresh.js and css files are included here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile Dashboard</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Droid+Sans:400,700" />
<link rel="stylesheet" href="assets/css/mobile-angular-ui-base.css" />
<link rel="stylesheet" type="text/css" href="assets/fonts/icons.css" />
<link rel="stylesheet" type="text/css" href="assets/css/angular-pull-to-refresh.css" />
<script src="assets/js/libs/angular.min.js"></script>
<script src="assets/js/libs/angular-route.min.js"></script>
<script src="assets/js/libs/angular-touch.min.js"></script>
<script src="assets/js/libs/angular-sanitize.min.js"></script>
<script src="assets/js/libs/mobile-angular-ui.min.js"></script>
<script src="assets/js/libs/angular-pull-to-refresh.js"></script>
<script src="assets/js/app.js"></script>
</head>
<body ontouchstart="" ng-app="mobile" class="blue">
<div class="app">
<div class="navbar navbar-app navbar-primary navbar-absolute-top">
<div class="navbar-brand navbar-brand-left">
<div class="logo">
<img src="assets/img/logo_small.png" width="50px" height="50px" />
</div>
</div>
</div>
<div class="app-body">
<ng-view class="app-content"></ng-view>
</div>
</div>
</body>
</html>
miners.html: I've tried placing pull-to-refresh in both the top div and the ul, but no dice.
<div class="scrollable">
<ul id="miners" class="list-group list-group-table" pull-to-refresh="refresh()">
<li ng-repeat="miner in miners" class="list-group-item">
[foo code]
</li>
<li class="list-group-item">
[more foo code]
</li>
</ul>
</div>
Relevant css section
.scrollable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
-webkit-backface-visibility: none;
-webkit-overflow-scrolling: auto;
}
At this point, I'm completely and totally stuck. Does anyone have any ideas on what I might have missed?
Unfortunately I believe mgcrea's angular pull-to-refresh project has been abandoned. Even the examples on his github readme no longer work, and there are several tickets indicating that other people are also not getting it to work.
Related
I am trying to load a 3d model into my website using the modelviewer library. However, the file it not loading and I am getting the below (see image).
FYI if it could be causing some issues - I am using github pages, but hosting a custom domain that I purchased from godaddy.
I thought that it was a permission issue, but I tried adding my .glb model to the folder and then downloading it by going to (example: www.website.com/origami.glb) and it downloaded.
Here is my code:
<!DOCTYPE html>
<html style="font-size: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel="stylesheet" href="./styles/styles.css" id="" type="text/css">
<link rel="stylesheet" href="./styles/stylesMob.css" id="" type="text/css">
<link rel="stylesheet" href="./styles/navStyle.css" id="" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
<style>
model-viewer{
width: 400px;
height: 1600px;
margin: auto;
}
</style>
</head>
<body>
<ul>
<li>main</li>
<li><a class="active" href="projects.html">projects</a></li>
<li>about</li>
<li>contact</li>
</ul>
<h4 style="font-size: 20px; color: red;"> * the website is wip * </h4>
<div>
<model-viewer src="origami.glb" ></model-viewer>
</div>
</body>
</html>
You can check this here model is showing.
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer
src="http://raw.githubusercontent.com/german-alvarez-dev/workshop-webvr-aframe/master/ship/scene_ship.gltf"
auto-rotate
alt="boat">
</model-viewer>
I am having an issue with Particles.js.
Whenever I load in particles, the search-box becomes un-clickable (I can still select it by tabbing to it).
Below is an example of the problem
The searchbox is un-selectable
Here is how I load in Particles in my:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<div id="particles-js" style="position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"> </div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</body>
</html>
And I load it in my page here, in my:
landingpage.component
ngOnInit(): void {
//particles
particlesJS.load('particles-js', 'particles.json', null);
}
There are no errors when I run the page, so I'm not sure what's going wrong. I know it's possible to fix, because https://rocket.chat/ seems to do what I'm attempting, and it works fine.
How can I fix the particles so that I can select page elements?
found the problem
I needed to set the z-index in my landingpage container to higher than that of the z-index in my index.html
<body>
<app-root></app-root>
<div id="particles-js" style="position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"> </div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</body>
And I set my contentContainer div to z-index: 5
<div class="landingpageContainer">
<div class="background" [ngStyle]="{'background-image':'url(' + backgroundPlaceholder.info.name + ')'}">
<div class="contentContainer" style="z-index: 5;">
<img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
/>
<h1>Enter a show</h1>
<div class="inputBoxArea">
<input type="text" class="inputArea" placeholder={{backgroundPlaceholder.info.placeholderText}} [(ngModel)]="keystroke" (ngModelChange)="getKey($event)">
</div>
<div class="resultListArea">
<ol>
<li (click)="setTitle(list)" [routerLink]="['/details', list.id]" *ngFor="let list of shows"> <img class="liPosters" src="https://image.tmdb.org/t/p/w92/{{list.poster}}" />
<div class="title">{{list.show}}</div> (
<div class="year">{{list.year}}</div>)
</li>
</ol>
</div>
</div>
</div>
My class fixed-content appears to be stopping onmouseover from changing an images which uses src.this
The html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blah</title>
<link href="https://fonts.googleapis.com/css?family=Mada:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
<script src="https://use.fontawesome.com/07f9f0d505.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="fixed-content col-md-1 hidden-sm-down">
<div class="row">
<div class="col-md-12 firstSideMenuElement">
<img class="sideMenu" src="images/Desmond_blank-01.png" onmouseover="this.src='images/Desmond_mouseover-01.png'" onmouseout="this.src='images/Desmond_blank-01.png'">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The css
.fixed-content{
top: 0;
/*bottom:0;*/
right: 0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
When I remove this class from the html the onmouseover works correctly.
UPDATE:
This code is at https://sonjadorlas.github.io/Website/desmond.html
The sidebar menu, which contains four images should change slightly onmouseover. When I scroll down the page, this menu is fixed as I want. But when I mouseover the icons in the sidebar menu again, they do not change. If I scroll back to the top of the page, the behaviour is correct again on mouseover.
SOLUTION:
/* SIDE BAR */
.fixed-content{
top: 0;
right: 0;
z-index: 100;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Thanks
I think your problem has to do with the z-index on your .fixed-content. You need to make sure that the z-index puts it's position above the other content.
Try adding something like this:
.fixed-content{
z-index: 10;
}
I've been dealing with an emoji issue since several weeks. I've been trying to add emoji to a chat using socket.io.
I have tried CSS emoji, Javascript emoji and so on. I have tried different options but nothing seems to work. I'm kind of desperate because, though I try and play with different options, I don't get the "smilies" to be displayed at all.
Right now I'm using this repository: https://github.com/wedgies/jquery-emoji-picker
I checked the readme, followed the examples and no, didn't work again.
This is my HTML code, the first CSS is the one I use for socket.io
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.emojipicker.js"></script>
<!-- Emoji Data -->
<link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.a.css">
<script type="text/javascript" src="js/jquery.emojipicker.a.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#text-custom-trigger').emojiPicker({
width: '300px',
height: '200px',
button: false
});
$('#input-default').emojiPicker();
$('#input-custom-size').emojiPicker({
width: '300px',
height: '200px'
});
$('#input-left-position').emojiPicker({
position: 'left'
});
$('#trigger').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('toggle');
});
});
</script>
<style type="text/css">
#emojiPickerWrap {margin:10px 0 0 0;}
.field { padding: 20px 0; }
textarea { width: 400px; height: 200px; }
</style>
</head>
<body>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" id="input-default" placeholder="¿Qué quieres decir?"/>
</li>
<li class="login page">
<div class="form">
<h3 class="title">Ingresa un nombre de usuario</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/main.js"></script>
</body>
</html>
I know this is easy, and knowing that is more frustrating.
I appreciate your help and advices.
Best regards.
I don't have all the code that you might have in your development env but from what you have given, I was able to put together a JSFiddle and it seems to work fine for me. JSFiddle
This code seems to show the emoji button just fine - $('#input-default').emojiPicker();
Your code runs without any problems, see the demo below.
$(document).ready(function(e) {
$('#text-custom-trigger').emojiPicker({
width: '300px',
height: '200px',
button: false
});
$('#input-default').emojiPicker();
$('#input-custom-size').emojiPicker({
width: '300px',
height: '200px'
});
$('#input-left-position').emojiPicker({
position: 'left'
});
$('#trigger').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('toggle');
});
});
#emojiPickerWrap {
margin: 10px 0 0 0;
}
.field {
padding: 20px 0;
}
textarea {
width: 400px;
height: 200px;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wedgies/jquery-emoji-picker/master/css/jquery.emojipicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/wedgies/jquery-emoji-picker/master/js/jquery.emojipicker.js"></script>
<!-- Emoji Data -->
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wedgies/jquery-emoji-picker/master/css/jquery.emojipicker.a.css">
<script type="text/javascript" src="https://rawgit.com/wedgies/jquery-emoji-picker/master/js/jquery.emojipicker.a.js"></script>
</head>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="¿Qué quieres decir?" />
<input type="text" id="input-default" class="emojiable-option" placeholder="Default">
</li>
<li class="login page">
<div class="form">
<h3 class="title">Ingresa un nombre de usuario</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>
If you see squares instead of the icons, your OS don't have the font that supports these symbols. For example, for Windows 7 you need to install an update KB2729094, see this article for more details.
Also, you're including two copies of jQuery library, remove the older one 1.10.2.
I have tried to work this out but not getting anywhere with it. Basically I would like my custom spinner loader image to appear first for few seconds then it fades out and then the Div with id=home should then fadeIn with all its contents.
I have tried several approach but not close to desired result. If there is any useful link that would help please post link.
My HTML page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css"/>
<link rel="stylesheet" href="css/mytheme.min.css" />
<link rel="stylesheet" href="css/structure-1.3.2.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/myscript.js"></script>
</head>
<body>
<div class="css-loader-icon"><img src="css/images/loader.gif"/></div>
<!-- Page: home -->
<div id="home" data-role="page" data-position="fixed" data-theme="a" data-title="My first app">
<div data-role="navbar" data-mini="true">
<ul>
<li><a href="#home" class="css-hnav" >Home</a></li>
<li><a href="#home" class="css-hnav" >Contact</a></li>
</ul>
</div><!-- navbar -->
<div data-role="content" class="css-listview">
<ul class="css-ul-list">
My Blogs
Tweet with me
</ul>
</div>
</div><!-- page -->
JS:
$(function() {
$(".css-loader-icon").fadeOut(2000, function() {
$("#home").fadeIn(1000);
});
});
CSS:
.css-loader-icon {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#content {display:none;}
Well try with loader icon displaying instead of hiding it in CSS and hiding #home div.
display:none;
#home{ display:none;}
Then your js will hide loader gif after 2 secs and show #home div. As gif is already hidden you are not able to feel the effect.