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>
Related
I want my last div to have an image for a background and fill up the remaining space on the page. I'm not seeing the image, so I'm not 100% sure it's even filling up the page. Does anyone see my error?
css
#uploader {
min-height: 100%;
height: auto;
height: 100%;
background-image: url('hiki.jpg');
}
html
<label for="icon"><b>Upload Your Own!</b></label>
<input type="file" accept="image/*" id="uploadSelector" name="icon">
<button type="submit" onclick="uploadPhoto()">Submit File</button>
</div>
full html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tracks App</title>
<!-- jquery js -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Custom js -->
<script type="text/javascript" src="./index.js"></script>
<!-- jquery mobile js -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Sytlesheets -->
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<div data-role="page" id="body-1">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div data-role="header" id="mapNinfo">
<div id="googleMap">
<script
src="https://maps.googleapis.com/maps/api/js?key=Redactedcallback=myMap">
</script>
</div>
<div id="showInfo">
<img id="customerIMG">
<p id="customerINFO"></p>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--<ul id="list-1"></ul> -->
</div>
<div data-role="main" id="tableNstuff">
<div id="newCustomer">
Add Location
<div id="popUp" style="background-color: #ffff99; display: none">
<label for="cName">Enter Customer Name :</label><input type="text" id="cName" name="cName"><br>
<label for="cAddress">Enter Address :</label><input type="text" id="cAddress" name="cAddress"><br>
<label for="cCSZ">Enter City, State Zip :</label><input type="text" id="cCSZ" name="cCSZ"><br>
<label for="cAddress">Enter Lat:Lang :</label><input type="text" id="cLatLang" name="cLatLang"><br>
<button class="ui-shadow ui-btn ui-corner-all" onclick="submitCustomer()">Submit</button>
</div>
</div>
Add Current Location
<div id="uploader">
<label for="icon"><b>Upload Your Own!</b></label>
<input type="file" accept="image/*" id="uploadSelector" name="icon">
<button type="submit" onclick="uploadPhoto()">Submit File</button>
</div>
</div>
</div>
</body>
</html>
Thank you very much.
try putting the full path. Not 100% sure it'll work but it's a start.
#uploader{min-height: 100% ;height: auto; width: 100%(add this too); height: 100%; background-image: url('C:\example\hiki.jpg OR https://example.com/hiki.jpg')}
This probably won't completely fix it but it's a start. If it doesn't work you can implement some more JavaScript that will save the dimensions of the image as a variable and then plug it into the CSS.
There are 2 simple solution:
Use calc from CSS3 by adding height: calc(100vh - 100px);. 100px here is the height of the top content above the div.
Best solution is using flexbox. See simple demo https://jsfiddle.net/hhuy424/7a3qm49e/11/
html
<body>
<div>header</div>
<div class="content"></div>
</body>
css
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
background-color: #880000;
}
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'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.
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.