I have a question about my CCS code.
I got a button with above that a loading bar (that shows when you click on the button).
If I press the button, the loading bar comes but it pushes the button down and I've tried to make the button to position `fixed'.
Can someone tell me if there is another way or can you give a solution to my own code.
My HTML code with the button and loading bar:
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right">add</i>
</a>
</div>
</div>
This is my CSS for the button, the .btn selector is a class from materialize:
.btn{
background-color: #88969c !important;
position: fixed !important;
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function () {
$('#submitForm').on('click', function (e) {
e.preventDefault();
if($("#submitForm").hasClass('disabled')){
return;
}
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data = {
name: name,
phonenumber: phonenumber
};
$.ajax({
url: 'addNew',
data: data,
method: 'post',
success: function (data) {
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function () {
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
});
},
})
})
})();
</script>
First of all you should make .btn { position: static; }. So that when ever loading bar comes your btn also shift itself down. And for making this happen (shifting and all). You have to use javascript or jquery.
Related
Suppose one of my keys has value Green/Red and I want to show bootstrap btn-success when its value is green and btn-danger when its red.
You need to update ng-class
<div ng:controller="CartForm">
<ul>
<li ng-repeat='country in countries'><a class="btn" ng-class="{'btn-primary': country.color == 'green', 'btn-danger': country.color == 'red'}" href="">{{country.name}} - {{country.population}}</a></li>
</ul>
</div>
and delete appliedClass function
Working jsFiddle
I think you are looking for ng-class. You can use the following synthax:
<p ng-class="condition ? 'classIfTrue' : 'classIfFalse'">Foo</p>
In your case, it would be something like:
<p ng-class="myVariable ? 'btn-success' : 'btn-danger'">Foo</p>
As you did not provide a code sample, here is how it works with an example:
angular.module('app', []).controller('MyCtrl', function() {
this.valueSuccess = false;
this.valueDanger = true;
});
.danger { background-color: red; }
.success { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="app">
<div ng-controller="MyCtrl as vm">
<p ng-class="vm.valueSuccess ? 'danger' : 'success'"> {{vm.valueSuccess}}</p>
<p ng-class="vm.valueDanger ? 'danger' : 'success'">{{vm.valueDanger}}</p>
</div>
</section>
App doesn't cover all display on mobile - there is a slim black bar on the bottom.
<body>
<div data-role="page" id="main" data-theme="b" data-fullscreen="true">
<div data-role="header" data-fullscreen="true">
<h1>Scheduler</h1>
Dodaj
</div>
<div data-role="main" class="ui-content" id="list">
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>Settings</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!--Adding goals-->
<div data-role="page" id="adding">
<div data-role="header">
<h1>Adding new goal</h1>
</div>
<div data-role="main" class="ui-content">
<form data-theme="e">
<form onsubmit="return false;">
<label>
NEW GOAL:<input type="text" id="goal" />
</label>
<input type="button" value="ADD" id="addBtn"/>
</form>
</form>
</div>
</div>
<!--Settings-->
<div data-role="page" id="settings">
<div data-role="header">
<h1>Settings</h1>
</div>
<div data-role="main" class="ui-content">
<form data-theme="e">
<input type="button" value="Clear all elements" id="delBtn"/>
</form>
</div>
</div>
<!-- Info -->
<div data-role="page" id="info">
<div data-role="header">
<h1>Info</h1>
</div>
<div data-role="main" class="ui-content">
Here help will be. ~~Yoda
</div>
</div>
CSS code is like this:
#main{height:100% !important;}
html,body{
margin:0;
padding:0;
border:none;
}
javascript code:
var db = new PouchDB('goals');
var remoteCouch = 'goals_remote';
db.changes({
since: 'now',
live: true
}).on('change', createList);
createList();
//creating goals
document.getElementById('addBtn').addEventListener('click', function(){
var txt = document.getElementById('goal').value;
var goal = {
_id: new Date().toISOString(),
text: txt,
completed: false
}
db.put(goal, function callback(err, result){
if(!err){
console.log('success');
refresh();
}
});
}, false);
//deleting elements
document.getElementById('delBtn').addEventListener('click', function(){
db.destroy().then(function() {
refresh();
});
}, false);
function refresh(){
location.reload(true);
}
//pressing goal
function pressGoal(goal){
if(goal.completed){
goal.completed = false;
} else {
goal.completed = true;
}
db.put(goal);
createList();
}
function createList() {
var completedTasks = [];
var notCompletedTasks = [];
db.allDocs({
include_docs: true,
descending: true
}).then(function(result) {
for(var k = 0; k < result.rows.length; k++){
if(result.rows[k].doc.completed){
completedTasks.splice(completedTasks.length, 0, result.rows[k].doc);
} else {
notCompletedTasks.splice(notCompletedTasks.length, 0, result.rows[k].doc);
}
renderList(completedTasks, notCompletedTasks);
}
}).catch(function(err) {
console.log(err);
});
}
function renderList(completedTasks, notCompletedTasks){
var code = '';
var notCode = '';
var elementsArr = [];
//creating lists
for(var i = 0; i < notCompletedTasks.length; i++){
code += '<div class="ui-checkbox" id="'+notCompletedTasks[i]._id+'"><label class="ui- checkbox-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-b" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="b" data-mini="false"> <span class="ui-btn-inner"><span class="ui-btn-text">'+notCompletedTasks[i].text+'</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span></span></label><input type="checkbox"></div>';
}
for(var j = 0; j < completedTasks.length; j++){
notCode += '<div class="checked" id="'+completedTasks[j]._id+'">'+'<div class="ui-icon ui-icon-check">'+'</div>'+'<span class="field">'+completedTasks[j].text+'</span>'+'</div>';
}
//build
document.getElementById('list').innerHTML = code + notCode;
for(var k = 0; k < notCompletedTasks.length; k++){
(function(){
var arg = notCompletedTasks[k];
document.getElementById(arg._id).addEventListener('click', function(){
pressGoal(arg);
}, false);
})();
}
for(var k = 0; k < completedTasks.length; k++){
(function(){
var arg = completedTasks[k];
document.getElementById(arg._id).addEventListener('click', function(){
pressGoal(arg);
}, false);
})();
}
}
I hope that code will be enough. I don't know why CSS code doesn't work like it should.
Is there any way to do this? I couldn't find answer to this question.
Edit: I added javascript code. Unfortunately I don't know what created that problem so code is kinda huge. Sorry for that.
I used pouchDB for storing users data and compiled with cocoon.io for mobiles.
You may look at this post from Omar: set content height 100% jquery mobile. It is updated with a working solution for the current JQM 1.4.5 version and is also covering the issues related to html{ height: 100%; }.
I'm trying to find a way to change the lnr-chevron-left to lnr-chevron-down when the user click in the chevron and expand the view.
This is the code that I have in the gsp and don't work:
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed lnr-chevron-down">
UPDATED
This is last code that I'm trying....
<body>
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" id="changeChevron" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed"></div>
</div>
<script type = "text/javascript">
var clicked=false;
$('#changeChevron').click(function(){
clicked=true;
});
if (clicked) {
$('#changeChevron').removeClass('lnr lnr-chevron-left').addClass('lnr lnr-chevron-down');
} else {
$('#changeChevron').removeClass('lnr lnr-chevron-down').addClass('lnr lnr-chevron-left');
}
</script>
</body>
Thanks in advance
Try something like this:
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" id="myId" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed">
This is an example and it is all off the top off my head as in not tested but it will give you the idea
<g:javascript>
////$('.lnr-chevron-left').on('click', function() {
$('#myId').on('click', function() {
$(this).removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
event.stopPropagation();
});
</g:javascript>
You will then need to change it back when the user no longer is clicking it it
So instead you could try something like:
<g:javascript>
var clicked=false;
$('#myId').click(function(){
clicked=true;
});
if (clicked) {
$('#myId').removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
} else {
$('#myId').removeClass('lnr-chevron-down').addClass('lnr-chevron-left');
}
</g:javascript>
That clicked function may not work, a much neater way seems to be focus:
https://api.jquery.com/focus-selector/
Maybe I'm late but if you have a css you can override the css like this:
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e875";
float: right;
}
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Linearicons-Free';
content: "\e874";
float: right;
font-size:19px;
}
I have a problem using both cropper and caman together.
I copied the code provided by fengyanchen, and modified it a bit for Meteor. The Caman works, but the cropper doesn't initiate.
Code:
http://codepen.io/chenfengyuan/pen/wMrVQY
HTML
<template name="Test">
{{ > index }}
<div class="container">
<h1 class="page-header">Use Cropper with CamanJS</h1>
<p id="upload">
<input id="file" type="file">
</p>
<p id="handle" style="display:none">
<button class="btn btn-primary" id="brightness">Brightness</button>
<button class="btn btn-primary" id="contrast">Contrast</button>
</p>
<p>
<canvas id="canvas" style="max-width:100%;"></canvas>
</p>
</div>
My events handler:
...(functions copied as provided in link)
Template.Test.events({
'change #file':function(event,template){
if (URL) {
var files = event.target.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
startCaman(URL.createObjectURL(file));
} else {
window.alert('Please choose an image file.');
}
}
} else {
$file.prop('disabled', true);
}
}
})
It worked when I did the following:
giving the canvas a width & height
removing var $canvas at the topmost level and replacing it with the real canvas selector everywhere
I have problem in loading placeholder on jqueryui accordin click. I have populated according from backend. i need to populate the place holder based on the accordin header click.
this is my html
<html>
<head>
<script>
$(function () {
$('#login').button({ icons: { primary: "ui-icon-person"} });
$('#showDataSource').button({ icons: { primary: "ui-icon-newwin"} });
$('#logout').button({ icons: { primary: "ui-icon-locked"} });
$('#login').click(function () {
var panel = $('#loginPanel').dialog({ modal: true });
panel.parent().appendTo($("form:first"));
});
$('#logout').click(function () {
(function (event) {
});
});
$('#showDataSource').click(function () {
$('#dataSource').dialog({ modal: true, width: 1000, height: 700 });
$('.accordion').accordion({ autoHeight: false, navigation: true, collapsible: true,
active: false,
changestart: function (event, ui) {
var dataSourceID = ui.newHeader.find('a').attr('id');
//var dataSourceColumn = EasyOutputWeb.Services.GetDataSourceColumns(dataSourceID, onsuccess, onError);
$.post(dataSourceID, function (data) {
//ui.newHeader.next("div").html(dataSourceID);
$('#columnPlaceHolder').html(dataSourceID);
});
}
});
});
});
function onsuccess(msg) {
alert(msg);
}
function onError(msg) {
alert(msg);
}
</script>
</head>
<body>
<div id="dataSource" runat="server">
<div class="divtable">
<div class="headrow" id="#accordianHeight">
<div class="divcol">
Data Sources</div>
<div class="divcol" >
Columns</div>
<div class="divcol">
Strong Keys</div>
</div>
<div class="divrow">
<div class="content">
<div class="accordion" id="accordianHeight">
<asp:PlaceHolder ID="dataPlaceHolder" runat="server" />
</div>
</div>
<div class="content">
<div id="dataColumn">
test column
<asp:PlaceHolder ID="columnPlaceHolder" runat="server" />
</div>
</div>
<div class="content" >
<div id="dataKey">
Test key
<asp:PlaceHolder ID="keyPlaceHolder" runat="server" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The first mistake here is that you use PlaceHolder that they are not warp with any tag and so jQuery can not grab them. Use Panel that warp with span or div your content.
Second mistake is that when the asp.net renders them the final id of each one is get from the .ClientID property, so the code of jQuery will be as:
$('#<%=columnPlaceHolder.ClientID%>').html(dataSourceID);
And one comment, if you do not actually add any controls on code behind on your Panel's then you simple place a <div id="columnPlaceHolder"></div> code to write on them, and use the jQuery call as it is now (don't add the CliendID)