I am using a plugin called jquery impromptu to create dialog's on my web site. I've noticed that when you try and add a html select to the dialog it causes some unwanted whitespace around the border of the dialog.
None of the other html form controls that I've tried so far have the issue. It's only the html select.
There is something css related that I need to fix to resolve this but I can't figure it out. Can someone please help me with this.
var textAreaStr = '<div>' +
'<label>Note<textarea id="registerFlagNote" rows="7" cols="30"> </textarea></label><br/>'+
'</div>';
var selectHtmlStr = '<div>' +
'<label>Close flag?<select id="registerFlagClosedOpenInd">' +
'<option value="no" selected>No</option>'+
'<option value="yes">Yes</option>'+
'</select></label>'
'</div>';
// try text area by itself
//var htmlStr = textAreaStr + '<br/>';
// try select by itself
//var htmlStr = selectHtmlStr + '<br/>';
//try both
var htmlStr = textAreaStr + selectHtmlStr + '<br/>';
var statesdemo = {
state0: {
html:htmlStr,
buttons: { Cancel: false, Next: true },
focus: 1,
submit:function(e,v,m,f){
$.prompt.close();
}
}
};
$.prompt(statesdemo);
div.jqimessage div textarea,
div.jqimessage div select{
display:block;
}
/*div.jqi {
padding: 0 !important;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-impromptu/6.2.1/jquery-impromptu.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-impromptu/6.2.1/jquery-impromptu.js"></script>
thanks
If you inspect element to the class .jqi
You would see this
div.jqi {
width: 400px;
max-width: 90%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: absolute;
background-color: #ffffff;
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 7px;
}
Simply just remove padding:7px;
Related
Here is my sample code.
Please find my working sample code here
I need to set triangle on right top corner in mat-dialog box - Angular.
I am getting top right corner triangle dialog box using static css on last row.
But here not able to get on each row on change request button click.
The below code is for the Dialog box Component
openDialog(Id, Currency, Amount, Reason, StatusDescription, payment, event) {
let targetAttr = event.target.getBoundingClientRect();
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {
Id: Id,
Reason: Reason,
StatusDescription: StatusDescription
};
dialogConfig.position = {
top: targetAttr.y + targetAttr.height + 10 + "px",
left: targetAttr.x - targetAttr.width - 20 + "px"
};
dialogConfig.panelClass = ['my-panel','arrow-top'];
const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
data => {
console.log("Dialog output:", data)
}
);
}
The Below code is from style.scss
/* Add application styles & imports to this file! */
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
.my-panel {
overflow: hidden !important;
border-radius: 5px !important;
padding: 0px !important;
color: #fff;
}
.my-panel.arrow-top {
margin-top: 40px;
}
.my-panel.arrow-top:after {
content: " ";
position: absolute;
right: 100px;
top: 365px;
border-top: none;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid gray;
}
I am getting like this.
But I want dialog box with upper arrow on each row under change request button click event
I have created a basic to-do list. I want to add the option to color code, similar to Google Keep (this is an exercise). I have tried simply putting one HTML select in, as you can see in my jsfiddle but this changes the background of that entire section.
<p display="none">
<section class="main" style="display: block;" >
<div data-bind="visible:todos().length>0">
<input id="toggle-all" type="checkbox" data-bind="checked:markAll"/>
<label for="toggle-all">Mark all as complete</label>
<br /><br />
<select id="colorOptions" id="toggle-all"></select>
</div>
<ul id="mycell" class="todo-list" data-bind="template:{ name:'item-template',foreach: todos}">
</ul>
</section>
</p>
Question: How do I add an option to individually color code the to-do items?
Ok, I did it using the templates. First I added the selection for the colors inside the template in the li, so that every entry has a selection. Then I added an id for every selection (which is the order variable, the first <select> has the id="0" the second has the id="1" and so on) in order to differentiate them and to make each of them have different functions onchange. I also made the addColorsOptions function which adds the options on every selection when it is created using its unique id.
$(function(){
var Todo = function(id, title, done, order,callback) {
var self = this;
self.id = ko.observable(id);
self.title = ko.observable(title);
self.done = ko.observable(done);
self.order = order;
self.updateCallback = ko.computed(function(){
callback(self);
return true;
});
}
var viewModel = function(){
var self = this;
self.todos = ko.observableArray([]);
self.inputTitle = ko.observable("");
self.doneTodos = ko.observable(0);
self.markAll = ko.observable(false);
self.addOne = function() {
var order = self.todos().length;
var t = new Todo(order, self.inputTitle(),false,order,self.countUpdate);
self.todos.push(t);
self.addColorsOptions(order);
};
self.createOnEnter = function(item,event){
if (event.keyCode == 13 && self.inputTitle()){
self.addOne();
self.inputTitle("");
}else{
return true;
};
}
self.toggleEditMode = function(item,event){
$(event.target).closest('li').toggleClass('editing');
}
self.editOnEnter = function(item,event){
if (event.keyCode == 13 && item.title){
item.updateCallback();
self.toggleEditMode(item,event);
}else{
return true;
};
}
self.markAll.subscribe(function(newValue){
ko.utils.arrayForEach(self.todos(), function(item) {
return item.done(newValue);
});
});
self.countUpdate = function(item){
var doneArray = ko.utils.arrayFilter(self.todos(), function(it) {
return it.done();
});
self.doneTodos(doneArray.length);
return true;
};
self.countDoneText = function(bool){
var cntAll = self.todos().length;
var cnt = (bool ? self.doneTodos() : cntAll - self.doneTodos());
var text = "<span class='count'>" + cnt.toString() + "</span>";
text += (bool ? " completed" : " remaining");
text += (self.doneTodos() > 1 ? " items" : " item");
return text;
}
self.clear = function(){
self.todos.remove(function(item){ return item.done(); });
}
self.addColorsOptions = function(id){
var colors = [{
display: "light yellow",
value: "ffffcc"
}, {
display: "light blue",
value: "ccffff"
}, {
display: "light green",
value: "ccffcc"
}, {
display: "gray",
value: "cccccc"
}, {
display: "white",
value: "ffffff"
}];
var options = ['<option value="">Select color</option>'];
for(var i = 0; i < colors.length; i++){
options.push('<option value="');
options.push(colors[i].value);
options.push('">');
options.push(colors[i].display);
options.push('</option>');
}
$("#" + id).html(options.join('')).change(function(){
var val = $(this).val();
if(val){
$("#" + id).closest('li').css('backgroundColor', '#' + val);
}
});
}
};
ko.applyBindings(new viewModel());
})
body {
font-size: 14px;
background-color: #3c6dc5;
color: #333333;
width: 520px;
margin: 0 auto;
}
#todoapp {
background-color: #3c6dc4;
padding: 20px;
margin-bottom: 40px;
}
#todoapp h1 {
font-size: 36px;
text-align: center;
color:white;
}
#todoapp input[type="text"] {
width: 466px;
font-size: 24px;
line-height: 1.4em;
padding: 6px;
color:#000033;
}
.main {
display: none;
}
.todo-list {
margin: 10px 0;
padding: 0;
list-style: none;
color: #E0E0EF;
}
.todo-list li {
padding: 18px 20px 18px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing {
border-bottom: 1px solid #778899;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li.editing .edit {
display: block;
width: 444px;
padding: 13px 15px 14px 20px;
margin: 0;
}
.todo-list li.done label {
color: #777777;
text-decoration: line-through;
}
.todo-list .destroy {
position: absolute;
right: 5px;
top: 20px;
display: none;
cursor: pointer;
width: 20px;
height: 20px;
}
#todoapp footer {
display: none;
margin: 0 -20px -20px -20px;
overflow: hidden;
color: #555555;
background: #f4fce8;
border-top: 1px solid #ededed;
padding: 0 20px;
line-height: 37px;
}
.todo-count {
float:left;
}
.todo-count .count{
font-weight:bold;
}
#clear-completed {
float: right;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
margin-bottom: 8px;
padding: 0 10px 1px;
cursor: pointer;
}
label{color:white;}
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="todoapp">
<header>
<h1>Fun To Do!</h1>
<input id="new-todo" type="text" placeholder="Finish Homework..." data-bind="value:inputTitle,event: { keyup: createOnEnter}"/>
</header>
<section class="main" style="display: block;" >
<div data-bind="visible:todos().length>0">
<input id="toggle-all" type="checkbox" data-bind="checked:markAll"/>
<label for="toggle-all">Mark all as complete</label> <br /><br />
</div>
<ul id="mycell" class="todo-list" data-bind="template:{ name:'item-template',foreach: todos}">
</ul>
</section>
<footer style="display: block;">
<div data-bind="visible:todos().length>0">
<div class="todo-count"><b data-bind="text:todos().length"></b> items left</div>
<!-- ko if: doneTodos() > 0 -->
<a id="clear-completed" data-bind="click:clear">
Clear <span data-bind="html:countDoneText(true)"></span>.
</a>
<!-- /ko -->
<br style="clear:both"/>
</div>
</footer>
</div>
<script type="text/template" id="item-template">
<li data-bind="event:{ dblclick :$root.toggleEditMode},css : {done:done() }">
<div class="view" >
<input class="toggle" type="checkbox" data-bind="checked:done"/>
<label data-bind="text:title"></label>
<a class="destroy"></a>
</div>
<input class="edit" type="text" data-bind="value:title,event: { keyup: $root.editOnEnter}" />
<select data-bind="attr: {'id': id}"></select>
</li>
</script>
You can also see the JSFiddle here.
For any question feel free to comment. I hope this was helpful :)
EDIT
See this JSFiddle for the <input type="color"> addition.
I tested your fiddle code. There is some unwanted code (that i did not find) that fade out your div databind="..... So to remove this problem you can add this at the end of jquery codes before last }); to see some thing like this:
$('div').show(); //adding code
});
Now the select works and you can see the changes in page inspector, But you can not see that here because your ul is empty. To see the result change that ul with an static data ul like this:
<ul id="mycell" class="todo-list">
<li>first</li>
<li>second</li>
</ul>
I have tried to style some checkboxes but now I can't click on/ activate/ check them. Radio buttons that are mostly styled the same way do work.
$(document).ready(function() {
var $selection = $('.sc-checkbox');
$selection.each(function() {
var $this = $(this),
$id = $this.attr('id');
$this.after( '<label for="' + $id + '"></label>' );
});
});
input[type="checkbox"].sc-checkbox {
-webkit-opacity: 0;
opacity: 0;
left: -102%;
position: absolute
}
input[type="checkbox"].sc-checkbox+label{
padding: 0 5px 0 10px;
}
input[type="checkbox"].sc-checkbox+label:before {
content: '';
display: inline-block;
background: transparent;
border: .14286rem solid rgba(0, 0, 0, 0.54);
width: .92857rem;
height: .92857rem;
border-radius: .14286rem;
font-family: 'Material Icons';
position: relative;
vertical-align: middle;
left: 0;
line-height: .92857rem;
-webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)
}
input[type="checkbox"].sc-checkbox:checked+label:before {
background: #3f51b5;
border: .14286rem solid #3f51b5;
content: '\E5CA';
color: #fff
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<input type="checkbox" class="sc-checkbox" id="test"></label><label for="test">Test</label>
<input type="checkbox" class="sc-checkbox" id="test1" checked></label><label for="test1">Test1</label>
When you run the example everything works but on my website it doesn't work.
I have fiddled around with positions, paddings and margins on the :before but nothing seems to be working.
I hope someone can help me make the checkboxes work again.
Thanks in advance.
You have a code that fixes a bug when text field isn't selected when label is clicked:
textfields.js, line 30:
// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
var $id = $(this).attr('for');
$('#'+$id).trigger('click');
});
However this code cause your click on the label to be triggered twice, so you get two clicks on the checkbox (which causes your checkbox to be checked and then unchecked immediately, or the opposite).
I'm not sure if you really need this code or not, but you can change your fix-bug to something like this:
// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
var $id = $(this).attr('for');
if ($('#'+$id).is(':checkbox')) {
return;
}
$('#'+$id).trigger('click');
});
I jave just created a Twitter widget for my website and I want to fade in and out the last 5 or more tweets at set intervals using css3 I have set my div to be 60% width with a height of 90px same as my UL and LI as shown below...
div#twitterwidget {
width: 60%;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
height: 90px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
color: #EC9A20;
font-weight: bold;
text-shadow:0 1px 0 rgba(0,0,0,0.5)
}
div#twitterwidget ul {
list-style:none;
height:90px;
overflow:hidden
}
div#twitterwidget ul li {
height:90px
}
All I want to achieve is is load up the the next tweet from the bottom using css3 animations!
Many thanks for your help
Phillip Dews
As Requested here is my HTML
<div id="twitterwidget"><script src="js/twitterWidget.js"></script>
<script>
twitterFetcher.fetch('347858782015086592', '', 5, true, false, true, '', false, handleTweets);
function handleTweets(tweets){
var x = tweets.length;
var n = 0;
var element = document.getElementById('twitterwidget');
var html = '<ul>';
while(n < x) {
html += '<li>' + tweets[n] + '</li>';
n++;
}
html += '</ul>';
element.innerHTML = html;
}
</script>
</div>
In that case, I think it would be far easier to use javascript (here with jQuery) to animate your widget. I am not sure of you exaclty want, but this is the idea :
function animateWidget() {
li = $('div#twitterwidget>ul>li:first');
li.slideUp(1000, function(){
li.clone().appendTo('div#twitterwidget>ul').show();
li.remove();
});
}
$(document).ready(function(){
setInterval(animateWidget,1000);
});
What is done here is :
run the animation every 1s
animate the first tweet with slideUp
when the animation is done, put the tweet in the end of the list
See the updated Fiddle
I'm trying to come up with a classroom seating arrangement using html/css while the data will be supplied thru mysql/php. If you're the teacher and you're in front of the class, your view of the classroom would be the students will take the front seats first where in your view, they're in the bottom while the rest of the empty seats are on your top view.
To visualize, it's something like this:
let X = a seat represented by a 70px x 70px list formatted to look like a block
where there's 8 columns and 5 row
a. This is how html/css normally works
X X X X X X X X third row
X X X X X X X X second row
X X X X X first row
BLACK BOARD
b. This is what I want it to look like
X X X X X third row
X X X X X X X X second row
X X X X X X X X front seat
BLACK BOARD
Regardless of the data from php/mysql, I'm looking for a way so that HTML/CSS or even jQuery can force the first blocks to go to the bottom first. Thank you.
My Code:
<?php require("connectdb.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.ui.ipad.altfix.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 10px;
}
ul {
margin: 0;
}
#contentWrap {
width: 800px;
margin: 0 auto;
height: 500px;
overflow: hidden;
background-color: #FFFFFF;
border: solid 2px #EEEEEE;
}
#contentTop {
width: 600px;
padding: 10px;
margin-left: 30px;
}
#sortable { list-style-type: none; margin: 0; padding: 0;}
#sortable li { margin: 20px 20px 1px 20px;
padding: 1px;
float: left;
width: 70px;
height: 70px;
font-size: 12px;
text-align: center;
background-color:#cfcfcf;
position: absoute;
bottom: 0;
display: inline-block;
float: right;
}
#contentRight {
float: right;
width: 300px;
margin-top: 100px;
padding:10px;
background-color:#336600;
color:#FFFFFF;
}
#save
{
width: 100px;
height: 30px;
margin-right: auto;
margin-left: auto;
background-color:#336600;
color:#FFFFFF;
text-align: center;
}
.on { background-color:#000000; color:#782322; }
#header{
background-color: #EEEEEE;
font-weight: bold;
width: 804px;
margin-left: auto ;
margin-right: auto ;
padding: 2;
}
</style>
<script type="text/javascript">
//$(document).ready(function(){
$(function() {
$(document).bind('touchmove', function(e) {
e.preventDefault();
}, false);
$("#sortable").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
$.post("updateDB.php", order, function(theResponse){
});
}
}).addTouch();
$( "#sortable" ).disableSelection();
//$("li").click(function(){
//$(this).addClass("on");
//});
});
//});
</script>
</head>
<body>
<?php
session_start();
$teacherID = $_SESSION['teacherID'];
$classID = $_SESSION['csID'];
$qryClass = "SELECT * FROM class_schedule WHERE csID = '". $classID ."';";
$class = mysql_query($qryClass);
while($row = mysql_fetch_array($class))
{
$subjCode = $row['subjCode'];
$section = $row['section'];
$semester = $row['semester'];
$sy = $row['SY'];
$time = $row['time'];
}
?>
<div id = "header">
<?php
//echo "What do you want to do, " .$fname . "?<br>";
echo "Subject: " . $subjCode . " Block: " . $section . " - Semester:" . $semester . " - SY:" . $sy . " - " . $time;
?>
</div>
<div id="contentWrap">
<ul id="sortable">
<?php
session_start();
$query = "SELECT e.*, CONCAT(s.lname,', ', s.fname) name FROM enrollment e, student s
WHERE e.studentID = s.studentID AND e.csID = '". $classID ."' ORDER BY sort;";
$result = mysql_query($query);
$c = 0;
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
//if($c != 4)
echo "<li id='recordsArray_'" . $row['id'] . ">" . $row['name'] . "</li>";
}
?>
</ul>
</div>
<div id="save">
Blackboard
</div>
</body>
</html>
Pre-process it in PHP.
$seats = array('X', 'X', 'X',...);
$ordered_seats = array(array_splice($seats, 0 - (count($seats) % 8))); // puts the last row into the new array
while (count($seats) > 0)
{
$ordered_seats = array(array_splice($seats, -8)); // take 8 seats at a time
}
Very easy to rewrite this in jQuery, by using .remove() to take the last row out of the DOM, put them in an array for safekeeping, then .appendTo() to re-insert them once you've got them ordered.
jQuery (not tested):
var seats = $('#sortable .block');
var ordered_seats = seats.splice(0 - (seats.length % 8)).pad(8, '') || [];
while (seats.length > 0)
{
$.merge(ordered_seats, seats.splice(-8));
}
// You now have the <li>s in the correct order
$('#sortable').html(''); // blank the container
for (var i in ordered_seats)
{
$('#sortable').append(ordered_seats[i]);
}