I'm creating a simple web application in angular 1.6
I create a state for the url "/" but it seems that angular cannot reach the file don´t know why.
Folder structure is this:
So the html load the app like this:
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>paykey</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- -->
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="myApp" >
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<div ui-view></div>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/codigo.service.js"></script>
</body>
</html>
And the app.js file that has the state is this one:
'use strict';
angular
.module('myApp', [
'ui.router',
'$stateProvider',
'$urlRouterProvider'
])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
// .state('home')
.state('main', {
url: '/',
templateUrl: 'views/quote-comps.html',
controller: 'MainT',
controllerAs: 'main'
});
});
So debugging it seems that it passes through stateProvider line but the html does not show up. The only thing I see is the background blonde in css, no errors in console.
The quote-comps.html file is this:
<div ng-controller="MainT" ng-init="init()" style="padding-top: 90px;
padding-left: 20px;">
<div class="bar bar-header disable-user-behavior" >
<div class="header">
<div class="row header-wrapper">
<div class="header-content col text" ng-class="currentPage.title!=undefined ? 'text':''">
<div ng-if="currentPage.title != undefined">
</div>
<img src="images/ICONOS/Logo_banorte_ICO/Logo_Banortexxxhdpi.png" class="bem_image">
<h5 style="text-align: center; color: white; margin-bottom: 0px;margin-top: 0px; font-size: 12px;">Bienvenido</h5>
</div>
</div>
<div class="header-bar" ng-if="currentPage.name.indexOf('login') < 0 && currentPage.name.indexOf('activaToken') < 0 && currentPage.name.indexOf('resynchronize-token') < 0">
<div class="clear"></div>
</div>
</div>
</div>
<div style=" margin-top: 52px;
background-color: #35282B;
height: 450px;
overflow: scroll;">
<h5 style="text-align: center; color: white; font-size: 16px"><!--{{operacion.nombreBeneficario}}-->55 1007 0744</h5>
<h5 style="text-align: center; color: white; ">Has recibido un pago Banorte Móvil por:</h5>
<h3 style="text-align: center; color: white; ">$ {{operacion.importeOperacion}} {{operacion.divisa}}</h3>
<p ng-show="finish" style="text-align: center; font-style: bold; color: white;" ><span>¿Qué deseas hacer?</span></p>
<img ng-show="finish2" class="amount-header ss2" src="../images/ICONOS/Exito_ICO/Exitohdpi.png" >
<p ng-show="finish2" class="amount-header textBox4">¡El deposito fue exitoso!
</p>
<div ng-show="finish" class="comparison-box" ng-class="{'comparison-box-open' : arrowUp}">
<div class="comparison-header-container" ng-click="openMore('first')">
<span> <img style="width: 30px; display:inline;" src="../images/ICONOS/Depositarlo_ICO/Depositarlo.svg"> </img></span>
<span class="comparison-header comboBox">Depositarlo</span>
<img class="arrow" src="images/down_arrow.svg" ng-class="{'rotate180' : arrowUp, 'rotate360' : !arrowUp}">
<!-- <img style="float: right; padding-right: 10px; width: 30px; margin-top: 4px; display: none;" src="images/up_arrow.svg"> -->
</div>
<div class="amounts-container">
<div>
<p style="display: inline;" class="amount-header textBox" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}">Ingresa:</p>
<input style="display: inline; text-align: center" class="amount-header inputIngresa" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}" placeholder="Cuenta banorte, tarjeta o CLABE">
</div>
<span class="comboBox2"></span>
</div>
<div class="amounts-container">
<div>
<p style="display: inline;" class="amount-header textBox" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}">Banco:</p>
<input style="display: inline; text-align: center" class="amount-header inputIngresa" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}" placeholder="Cuenta banorte, tarjeta o CLABE">
</div>
<span class="comboBox2"></span>
</div>
<div class="wizard-full">
<!--<button class="btn btn-primary btnSeg seg"> Depositar </button> -->
</div>
<button class="btn cus2" type="submit" ng-click="cancel()">Depositar</button>
</div>
<div ng-show="finish" class="comparison-box seg" ng-class="{'comparison-box-open' : arrowUp2}" style="">
<div class="comparison-header-container" ng-click="openMore('second')">
<span> <img style="width: 30px; display:inline;" src="../images/ICONOS/Depositarlo_ICO/Depositarlo.svg"> </img></span>
<span class="comparison-header comboBox">Cobrarlo en un cajero</span>
<img class="arrow" src="images/down_arrow.svg" ng-class="{'rotate180' : arrowUp2, 'rotate360' : !arrowUp2}" ng-click="restauraE()">
<!-- <img style="float: right; padding-right: 10px; width: 30px; margin-top: 4px; display: none;" src="images/up_arrow.svg"> -->
</div>
<div class="amounts-container">
<div>
<p ng-show="mostrarQuieres" class="amount-header textBox" ng-class="{'show' : arrowUp2 && container, 'hide' : !arrowUp2}">¿Quieres generar tu código de referencia para retirar el efectivo en cajero automático?
</p>
<span>
<img ng-show="mostrarAcude" class="amount-header ss1" src="../images/ICONOS/Exito_ICO/Exitohdpi.png" >
</span>
<div ng-show="mostrarAcude" class="amount-header textbox2" ng-class="{'show' : arrowUp2 && container, 'hide' : !arrowUp2}">Acude a cualquier cajero Banorte, selecciona la opcion retiro de efectivo y captura o escanea este código para retirar tu efectivo
</div>
</div>
</div>
<div class="wizard-full">
<!--<button class="btn btn-primary btnSeg2 seg" ng-click="getCode()"> Generar referencia </button> -->
<button class="btn btn-primary mGenT" type="submit" ng-click="generarTrans()">Generar transferencia</button>
</div>
<div ng-show="mostrar">{{codigoBarras}}
<io-barcode code="123" type="CODE128B"></io-barcode>
</div>
</div>
<div ng-show="mostrar" class="wizard-full">
<button class="btn btn-primary mGenT" type="submit" ng-click="generarTrans()"> d </button>
</div>
</div>
<div class="footer">
"2017 Derechos reservados."</div>
</div>
dependencies:
"dependencies": {
"#uirouter/angularjs": "^1.0.11",
"angular": "^1.6.6",
"bootstrap": "^3.3.7",
"jquery": "^3.2.1"
},
From https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
It seems you need to change $state.Provider to something like the following:
$stateProvider
// .state('home')
.state('main', {
url: '/',
views:{
'quoteCompsView':{
templateUrl: 'views/quote-comps.html',
controller: 'MainT',
controllerAs: 'main'
}
}
});
Then in your html add:
<div ui-view="quoteCompsView"></div>
change url:
.state('main', {
url: '/',
views:{
'quoteCompsView':{
templateUrl: '../views/quote-comps.html',// -------- Here
controller: 'MainT',
controllerAs: 'main'
}
}
You are not adding reference in your main index html file .
I dont see any controller reference on html page
I edited the controller...
angular.module('myApp',[])
.controller('MainT', MainT);
to
angular.module('myApp')
.controller('MainT', MainT);
and works... I really don't know why
Related
In my project I want to show images when I click the button. How I can configure the method openModal() on (click) to do this?
The IMG are taken from assets directory, and change based on your code (B1, B2) choice.
<!-- OPERATION -->
<div class="card my-5">
<div class="card-header" style="text-align: center; font-size: 20px;">
<p><strong>Operation</strong></p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<tr *ngFor="let arr of varOperation; index as i">
<td>
Code: {{arr.operation.code}}
- {{arr.operation.description}}
</td>
<button style="margin-left: 20px; float: right;" class="btn btn-primary" (click)="viewCodeOperation(arr.operation.code)" (click)="openModal()">
Go
</button>
</tr>
</div>
</form>
</div>
</div>
<!-- IMAGES -->
<div class="overflow-auto">
<div *ngIf="imgB1">
<img src="assets\images\B1.jpg">
</div>
<div *ngIf="imgB2">
<img src="assets\images\B2.jpg">
</div>
</div>
viewCodeOperation(code: string) {
this.imgB1 = false
this.imgB2 = false
console.log(code)
if(code == "B1"){
this.imgB1 = true
}
else if(code == "B2"){
this.imgB2 = true
}
}
openModal() {
}
You can try using a library like this https://github.com/maximelafarie/ngx-smart-modal one to set up modals in angular.
I'm new in knockout. I want to do like if foreach contains more than 5 array then in div vertical scrolling should be apply , otherwise scrolling should be remove.
how to do this using knockout ?
HTML :
<div class="temp-autocomplete-suggestions">
<!-- ko foreach: autocompleteData -->
<div class="temp-pro-autocomplete-suggestion" data-index="text: $index">
<div class="temp-pro-suggest-pro-img">
<img class="temp-pro-img-responsive" data-bind="attr: {src:imageUrl}" alt="">
</div>
<div class="temp-pro-suggest-pro-data">
<div class="product-line product-name">
<a data-bind="attr: {href:productUrl}" target="_blank"><span data-bind="text:productName1"></span></a>
</div>
<div class="product-line product-price">Price: <span data-bind="value:productPrice"></span></div>
<div class="product-des">
<p class="short-des" data-bind="attr : {id:productName1}">ProductName1: <span data-bind="text:productName1"></span></p>
</div>
</div>
<div class="temp-pro-additem">
<button id="temp-pro-search-item-list" class="temp-pro-materialize-btn">Click Here</button>
</div>
</div>
<!-- /ko -->
</div>
Note : autocompleteData is ko.observableArray([])
Use the style binding in the div just outside the foreach binding, and check the length of autocompleteData.
<div class="temp-autocomplete-suggestions"
data-bind="style: { overflowY: autocompleteData().length > 5 ? 'scroll' : 'auto',
height: autocompleteData().length > 5 ? '300px': 'initial' }">
<!-- ko foreach: autocompleteData -->
<div class="temp-pro-autocomplete-suggestion" data-index="text: $index">
<div class="temp-pro-suggest-pro-img">
<img class="temp-pro-img-responsive" data-bind="attr: {src:imageUrl}" alt="">
</div>
<div class="temp-pro-suggest-pro-data">
<div class="product-line product-name">
<a data-bind="attr: {href:productUrl}" target="_blank"><span data-bind="text:productName1"></span></a>
</div>
<div class="product-line product-price">Price: <span data-bind="value:productPrice"></span></div>
<div class="product-des">
<p class="short-des" data-bind="attr : {id:productName1}">ProductName1: <span data-bind="text:productName1"></span></p>
</div>
</div>
<div class="temp-pro-additem">
<button id="temp-pro-search-item-list" class="temp-pro-materialize-btn">Click Here</button>
</div>
</div>
<!-- /ko -->
</div>
Example (see in full page view):
var viewModel = function(){
var self = this;
self.autocompleteData = ko.observableArray();
self.addData = function(){
self.autocompleteData.push({});
};
};
ko.applyBindings(new viewModel());
.hello {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="temp-autocomplete-suggestions"
data-bind="style: { overflowY: autocompleteData().length > 5 ? 'scroll' : 'auto', height: autocompleteData().length > 5 ? '300px': 'initial' }">
<!-- ko foreach: autocompleteData -->
<div class="hello">Hello</div>
<!-- /ko -->
</div>
<button data-bind="click: addData">Add to Array</button>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How can I set div with background-image and with 60% to be responsive?
I have navbar (div) in top of site, with margin-left and margin-right 20%, responsive works here.
Under this, is another div, too with margin-left and margin-right 20%, with background-image and here responsive doesn't works.
Second question: if i have 3 divs same line with images (1 img in 1 div), if they cant be located in 1 line because resolution of user, how to "explode" them to 2 or 3 lines?
if needed, demo: http://tlumacz-litewskiego.eu/
It seems like you are just learning so I thought I would take a minute and give a little guidance. First, you should understand that Bootstrap is a framework that allows you to achieve much of what you are trying to do. As you can see, the elements are now lined up and justified yet I used Bootstrap to achieve this, not additional css. Furthermore, as the screen collapses down to mobile, you can control when things stack as you were mentioning you wanted to do. Also, you will see that by using Bootstrap, a lot less styles are needed to achieve the desired result.
Example: http://jsbin.com/beruqorinu/edit?output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div id="header" class="col-sm-12">
<h1>Tłumacz-litewskiego</h1>
</div>
</div>
<div id="menu_container" class="row">
<div class="col-sm-12">
<nav>
<i class="fa fa-home"></i> Strona główna
</nav>
</div>
</div>
<div id="main_image" class="row">
<div class="col-sm-8 bookbox">
<h2>Tłumacz języka litewskiego</h2>
<h4>mgr Živilė Wygońska</h4>
<img class="img-responsive" src="http://tlumacz-litewskiego.eu/img/book.png">
</div>
<div class="col-sm-4 contact">
<i class="fa fa-globe"></i> Polska, Podlaskie, Suwałki<br />
<i class="fa fa-phone"></i> <b>Tel:</b> +48 515 231 589<br />
<i class="fa fa-envelope-o"></i> <b>Email:</b> zivile.wygonska#gmail.com
</div>
</div>
</div>
</header>
<section id="info">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3><i class="fa fa-book"></i> O mnie</h3>
<img src="http://tlumacz-litewskiego.eu/img/slide1.jpg" class="img-responsive">
<p>Litewski to mój ojczysty język, większość życia mieszkałam na Litwie, gdzie studiowałam filologię litewską na Uniwersytecie Wileńskim.</p>
<div class="collapse" id="cl1">
<p>Po przeprowadzce do Polski na Uniwersytecie Warszawskim w Instytucie Języka I Kultury Polskiej Dla Cudzoziemców uzyskałam świadectwo znajomości języka polskiego. Ukończyłam pedagogikę na Uniwersytecie w Białymstoku.</p>
<p>Posiadam dziesięcioletnie doświadczenie jako tłumacz języka litewskiego. Przez te 10 lat, pracując z różnymi klientami, przetłumaczyłam setki stron o przeróżnej tematyce, m.in. turystyka, sprawozdania, statuty, przetargi, strony www, artykuły, etykiety, instrukcje obsługi, katalogi, foldery reklamowe, dokumentacje sądowe i wiele wiele innych.</p>
</div>
<a role="button" data-toggle="collapse" href="#cl1" aria-expanded="false" aria-controls="collapseExample1" id="element1" onclick="changeText(1)">Więcej...</a>
</div>
<div class="col-sm-4">
<h3><i class="fa fa-newspaper-o"></i> Oferta</h3>
<img src="http://tlumacz-litewskiego.eu/img/slide2.jpg" class="img-responsive">
<p>Tłumaczenia ustne, pisemne, nauka języka litewskiego i korepetycje.</p>
<div class="collapse" id="cl2">
<p><b>Tłumaczenia pisemne:</b> Tłumaczę teksty na język litewski oraz z języka litewskiego. Przetłumaczyłam m.in. kilkanaście katalogów, opowiadania, różne dokumenty, umowy, projekty i dokumenty związanie z realizacją projektów unijnych.</p>
<p><b>Tłumaczenia ustne:</b> tłumaczenie konferencyjne, symultaniczne (możliwość wynajmu sprzętu dla tłumaczeń symultanicznych), konsekutywne, towarzyszące, szeptane.</p>
<p><b>Nauka języka litewskiego i korepetycje:</b> prowadzę kursy nauki języka litewskiego na wszystkich poziomach dla klientów indywidualnych oraz instytucji.</p>
<p>Każde zlecenie jest traktowane indywidualnie, swoją pracę wykonuję rzetelnie i solidnie. Na życzenie klienta mogę przedstawić referencje zadowolonych klientów. </p>
<p>Gwarantowane bezpieczeństwo przekazywanych dokumentów oraz informacji. Każdy dokument jest traktowany jako poufny. Wykonane tłumaczenie jest archiwizowane przez okres 12 miesięcy. </p>
<p><b>Cena</b> tłumaczenia zależy od stopnia trudności tekstu, rodzaju tłumaczenia oraz terminu realizacji. Istnieje możliwość negocjacji cen przy większych zleceniach. </p>
1 strona obliczeniowa to 1600 znaków ze spacjami 12-punktową czcionką Times New Roman.</p>
</div>
<a role="button" data-toggle="collapse" href="#cl2" aria-expanded="false" aria-controls="collapseExample2" id="element2" onclick="changeText(2)">Więcej...</a>
</div>
<div class="col-sm-4">
<h3><i class="fa fa-users"></i> Klienci</h3>
<img src="http://tlumacz-litewskiego.eu/img/slide3.jpg" class="img-responsive">
<p>Urząd Miasta Suwałki<br />
Regionalny Ośrodek Kultury i Sztuki w Suwałkach<br />
Suwalski Ośrodek Kultury...</p>
<div class="collapse" id="cl3">
<p>Wigierski Park Narodowy<br />
Muzeum Wigier (Stary Folwark)<br />
Starostwo Powiatowe w Suwałkach<br />
Urząd Miasta w Giżycku<br />
Centrum Informacji Turystycznej w Giżycku, Wydawnictwo Mazurskie S.C.<br />
Podlaska Regionalna Organizacja Turystyczna<br />
oraz inni.</p>
</div>
<a role="button" data-toggle="collapse" href="#cl3" aria-expanded="false" aria-controls="collapseExample3" id="element3" onclick="changeText(3)">Więcej...</a>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div id="copyright" class="row">
<div class="col-sm-12">
© 2015 tlumacz-litewskiego.eu
</div>
</div>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65084817-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript">
function changeText(idElement) {
var element = document.getElementById('element' + idElement);
if (idElement === 1 || idElement === 2 || idElement === 3) {
if (element.innerHTML === 'Więcej...') element.innerHTML = 'Mniej...';
else {
element.innerHTML = 'Więcej...';
}
}
}
</script>
</body>
</html>
CSS:
header h1 {
margin-bottom: 20px;
font-size: 40px;
}
nav {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 20px;
font-size: 24px;
border-top: 2px solid #C7C7C7;
border-bottom: 2px solid #C7C7C7;
}
#main_image {
background: url(http://tlumacz-litewskiego.eu/img/bg.jpg) no-repeat center center;
background-size: cover;
}
.bookbox,
.contact {
padding: 20px;
}
.bookbox img {
max-width: 128px;
}
.contact {
font-size: 16px;
color: white;
}
.contact i {
margin-right: 2px;
}
#info {
text-align: center;
}
#copyright {
margin-top: 20px;
text-align: right;
}
I have done this for you in the hopes that it will serve as an example so can learn how to properly lay things out. Several recommendations:
Try to avoid using inline css (directly in your html)
Avoid using percentages if possible. Bootstrap is a fixed pixel framework.
Visit http://getbootstrap.com and go through the docs, most importantly the Getting Started page (and see the examples).
Hope this helps!
The problem is :- In below code I want to make it, if there is no photo uploaded then there will be a photo size bootstrap's glyphicon-user should be placed and when photo uploaded this will overwrite by the uploaded image.
//please add necessary files of bootstrap
<div class="row">
<div class="row">
<div class="col-md-4">
<h4 class="heading">Upload Patient's Photo :-</h4>
</div>
<div class="col-md-4">
<input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/>
</div>
</div>
//this is the script code for preview image when uploaded.
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#patientimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</div>
//this is image code here changes takes place to add bootstrap's glyphicon-user
<div class="col-md-2 col-sm-12">
<div class="thumbnail">
<img src="" alt="Select Patient Image" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/>
</div>
</div>
I tried this but the glyphicon-user in span tag reside below patient image.
just suggestion here, why not convert the bootstrap's glyphicon-user to png then add it on since when the user upload the image it will be appended according to your code.
check a sample here http://jsfiddle.net/ws3bb7sr/1/
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#patientimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="row">
<div class="col-md-4">
<h4 class="heading">Upload Patient's Photo :-</h4>
</div>
<div class="col-md-4">
<input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/>
</div>
</div>
<div class="col-md-2 col-sm-12">
<div class="thumbnail">
<img src="http://s5.postimg.org/4xpbh5oo3/user_000000_128.png" alt="" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/>
</div>
</div>
Not the best idea, but you can use this code:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#img1 {
width: 100px;
height: 100px;
margin-left: 25px;
}
#img1::before {
position: absolute;
font-size: 100px;
}
</style>
<script>
$(function() {
setTimeout(function() {
$('#img1').attr('src', 'http://dummyimage.com/100x100/0ac72a/0011ff');
}, 2500);
});
</script>
</head>
<body>
<img src="" id="img1" class="glyphicon glyphicon-asterisk">
</body>
</html>
You might have some problems with transparent png files, so in better check it. If you have some problem with it you can remove the glyphicon classes when you update the src of your image.
As I'm designing my node.js application, I'm having trouble figuring out why my anchor links are not working/not clickable. The code itself was working fine before I designed the app. Is there a CSS property I need to configure to fix this? This is for the .player ul li links.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> -->
<meta charset="UTF-8">
<title>Open Mic Chatroom</title>
</head>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!-- <a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a> -->
<h1>OpenMic</h1>
</div>
</div>
</nav>
</header>
<body>
<div class="container">
<div class="row">
<div class="musicians col-sm-3 col-md-3">
<!-- <div class="musicians col-sm-6 col-md-4"> -->
<!-- <div class="col-sm-6 col-md-4"> -->
<!-- <div class="thumbnail musicians-box"> -->
<!-- <img src="..." alt="..."> -->
<div class="caption">
<h2>Musicians Online</h2>
<p>
<div id="chatters">
</div>
</p>
<!-- <p>Button Button</p> -->
<!-- </div> -->
</div>
</div>
<div class="chatroom col-sm-8 col-md-8">
<!-- <div class="chatroom col-sm-6 col-md-4">
--><!-- <div class="col-sm-6 col-md-4">-->
<!-- <div class="thumbnail chatroom-box"> -->
<!-- <img src="..." alt="..."> -->
<div class="caption">
<h2>Messages</h2>
<div id="messagesContainer"></div>
<!-- </div> -->
</div>
<form action="" id="chat_form">
<input id="info" autocomplete="off" />
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<!-- <h3>Messages</h3>
<div id="messagesContainer"></div>
<form action="" id="chat_form">
<input id="info" autocomplete="off" />
<input type="submit" value="Submit">
</form> -->
<!-- SoundCloud Recording Feature -->
<div class="row player">
<div class="soundcloud-player">
<ul>
<div id="player">
<!-- <button type="button" id="startRecording" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-record" aria-hidden="true"></span>
</button> -->
<li id="startRecording">Start Recording</li>
</div>
<!-- <button type="button" id="stopRecording" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
</button> -->
<li id="stopRecording">Stop Recording</li>
<!-- <button type="button" id="playBack" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button> -->
<li id="playBack">Play Recorded Sound</li>
<!-- <button type="button" id="upload" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button> -->
<li id="upload">Upload</li>
</ul>
<p class="status"></p>
<div class="audioplayer">
</div>
</div>
</div>
<!-- <script src="/socket.io/socket.io.js"></script> -->
</div>
<script>
$(document).ready(function() {
var trackUrl;
//establish connection
var socket = io.connect('http://localhost:3000');
$('#chat_form').on('submit', function (e) {
e.preventDefault();
var message = $('#info').val();
socket.emit('messages', message);
$('#info').val('');
});
socket.on('messages', function (data) {
console.log("new message received");
$('#messagesContainer').append(data);
$('#messagesContainer').append('<br>');
// insertMessage(data);
});
socket.on('add_chatter', function (name) {
var chatter = $('<li>' + name + '</li>').data('name', name);
$('#chatters').append(chatter);
});
// //Embed SoundCloud player in the chat
// socket.on('track', function (track) {
// console.log("new track", track);
// SC.oEmbed(track, {auto_play: true}, function (oEmbed) {
// console.log('oEmbed response: ' + oEmbed);
// });
// SC.stream(track, function (sound) {
// console.log("streaming", sound);
// sound.play();
// });
// // socket.on('remove chatter', function (name) {
// // $('#chatters li[data-name=]' + name + ']').remove();
// });
//SOUNDCLOUD RECORDING FEATURE
function updateTimer(ms) {
// update the timer text. Used when user is recording
$('.status').text(SC.Helper.millisecondsToHMS(ms));
}
//Connecting with SoundCloud
console.log("calling SoundCloud initialize");
SC.initialize({
client_id: "976d99c7318c9b11fdbb3f9968d79430",
redirect_uri: "http://localhost:3000/auth/soundcloud/callback"
});
SC.connect(function() {
SC.record({
start: function() {
window.setTimeout(function() {
SC.recordStop();
SC.recordUpload({
track: { title: 'This is my sound' }
});
}, 5000);
}
});
//Adds SoundCloud username to chat app
console.log("connected to SoundCloud");
SC.get('/me', function(me) {
console.log("me", me);
socket.emit('join', me.username);
});
// SC.get('/me/tracks', {}, function(tracks) {
// var myTracks = $("<div>");
// var heading = $("<h1>").text("Your tracks");
// var list = $("<ul>");
// tracks.forEach(function (single) {
// var listItem = $("<li>").text(single.permalink);
// listItem.on("click", function () {
// SC.oEmbed(single.permalink_url, {
// auto_play: true
// }, function(oEmbed) {
// console.log("oEmbed", oEmbed);
// $('.status').html(oEmbed.html);
// });
// });
// list.append(listItem);
// });
// $("body").append(myTracks.append(heading, list));
// });
// username = prompt("What is your username?");
// socket.emit('join', username);
// });
//Start recording link
$('#startRecording a').click(function (e) {
$('#startRecording').hide();
$('#stopRecording').show();
e.preventDefault();
SC.record({
progress: function(ms, avgPeak) {
updateTimer(ms);
}
});
});
//Stop Recording link
$('#stopRecording a').click(function (e) {
e.preventDefault();
$('#stopRecording').hide();
$('#playBack').show();
$('upload').show();
SC.recordStop();
});
//Playback recording link
$('#playBack a').click(function (e) {
e.preventDefault();
updateTimer(0);
SC.recordPlay({
progress: function (ms) {
updateTimer(ms);
}
});
});
//Uploaded SoundCloud Track after recorded
$('#upload').click(function (e) {
e.preventDefault();
SC.connect({
connected: function() {
console.log("CONNECTED");
$('.status').html("Uploading...");
SC.recordUpload({
track: {
title: 'My Recording',
sharing: 'public'
}
},
//When uploaded track, provides link user, but not everyone
function (track) {
// console.log("TRACK", track);
setTimeout(function () {
SC.oEmbed(track.permalink_url, {auto_play: true}, function(oEmbed) {
console.log("THIS IS oEMBED", oEmbed);
// console.log(oEmbed.html);
socket.emit('messages', oEmbed.html );
$('.status').html(oEmbed.html);
});
}, 8000);
// $('.status').html("Uploaded: <a href='" + track.permalink_url + "'>" + track.permalink_url + "</a>");
});
}
});
});
});
});
</script>
</body>
</html>
CSS:
body {
background: url('microphone.svg') no-repeat center center fixed;
background-position: 4% 100%;
}
h1, h2, h3 {
font-family: 'Bree Serif', serif;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
color: white;
padding-left: 5%;
padding-bottom: 5%;
letter-spacing: 4px;
}
.navbar-default {
background-color: #000000;
/* background-image: url('SoundWave.jpg');
background-position: center;
opacity: 0.8;*/
}
input, button, select, textarea {
line-height: 3;
}
.chatroom, .musicians {
border-style: solid;
border-radius: 6%;
border-color: black;
margin-left: 20px;
height: 500px;
background-color: #F2F2F2;
opacity: 0.8;
}
.musicians {
height: fixed;
}
input#info {
margin: 47% 1%;
width: 656px;
border-radius: 10%;
}
.visualSoundContainer__teaser {
height: 100px;
}
.row {
padding-top: 2%;
}
.player {
text-align: center;
}
.player ul li {
z-index: 30;
}
Comment the margin property. It is cover the section. you can check it on firebug while selecting the anchor element.
input#info {
/*margin: 47% 1%;*/
width: 656px;
border-radius: 10%;
}
Working link: http://jsfiddle.net/95yz0h63/
add css
a{
cursor:pointer;
}