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]);
}
Related
I have a text area with CSS generated line numbers for each new line.
Everything works great, except for when there is a word wrap. If I get a word wrap, it does not wrap the new line text. I would like to make my line numbers word wrap with the text.
Here is a notepad+ example:
And here is a GitHub example:
How can I automatically detect and add a word wrap to my line numbers as well? Here is my code:
<script lang="ts">
export let source = `jon
sup
me
fixin to do sumthin good`;
let numberOfLines = source.split('\n').length;
const KeyUp = (event: Event) => {
const textarea = event.target as HTMLInputElement;
numberOfLines = textarea.value.split('\n').length;
};
const KeyDown = (event: Event) => {
const textarea = event.target as HTMLInputElement;
if ((event as KeyboardEvent).key === 'Tab') {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
if (start && end) {
textarea.value = textarea.value.substring(0, start) + '\t'
+ textarea.value.substring(end);
event.preventDefault();
}
}
};
</script>
<center>
<div class="editor">
<div class="line-numbers">
{#each Array(numberOfLines) as _}
<span class="new-line" />
{/each}
</div>
<textarea class="text-content"
on:keyup={KeyUp} on:keydown={KeyDown} value={source} rows="15" />
</div>
</center>
<style>
.editor {
display: inline-flex;
gap: 10px;
font-family: monospace;
line-height: 21px;
background: #282a3a;
border-radius: 2px;
padding: 20px 10px;
}
.line-numbers {
width: 20px;
text-align: right;
}
.line-numbers .new-line {
counter-increment: linenumber;
}
.line-numbers .new-line::before {
content: counter(linenumber);
display: block;
color: #506882 !important;
}
.text-content {
line-height: 21px;
overflow-y: hidden;
padding: 0;
border: 0;
background: #282a3a;
color: #fff;
min-width: 500px;
outline: none;
resize: none;
}
</style>
And here is the StackBlitz Link:
(right click - open in new window)
Thanks!
J
Image for responding to comment below:
An approach could be to read the width of one character of the monospace font from an invisible element and set the textarea width to a multiple to avoid rounding errors. It then can be calculated for each substring between the line breaks how often it is wrapped and a margin-bottom added to the corresponding line number accordingly
REPL
<script>
import {onMount} from 'svelte'
export let source = `jon\nsup there is some other text here that I want to go across the lines and not word wrap another line etc boy!\nme\nfixin to do sumthin good`;
let fontWidthElem
let fontWidth
let charactersPerLine = 60
$: areaWidth = charactersPerLine * fontWidth
onMount(() => {
fontWidth = fontWidthElem.getBoundingClientRect().width
})
function wrapped(str, timesWrapped) {
if(str.length > charactersPerLine) {
const firstLine = str.substring(0, charactersPerLine)
const spaceOrDashInFirstLine = /[ -]/.test(firstLine)
const lastCharFirstLine = str[charactersPerLine-1]
const firstCharNextLine = str[charactersPerLine]
const wordIsCut = lastCharFirstLine !== '-' && lastCharFirstLine !== ' ' && firstCharNextLine !== ' ' && firstCharNextLine !== '-'
const nextLine = str.substring(charactersPerLine)
const nextLineNotOnlySpaces = nextLine.replaceAll(' ', '').length > 0
if(wordIsCut && spaceOrDashInFirstLine){
const lastIndexOfDivider = Math.max(firstLine.lastIndexOf(' '), firstLine.lastIndexOf('-'))
return wrapped(str.substring(lastIndexOfDivider+1), timesWrapped+1)
}else if(nextLineNotOnlySpaces){
return wrapped(nextLine.trimStart(), timesWrapped+1)
}else {
return timesWrapped
}
}else {
return timesWrapped
}
}
</script>
<div class="editor">
<div class="line-numbers">
{#each source.split('\n') as subStr, index}
<div class="line-nr"
style:margin-bottom="calc(var(--line-height) * {wrapped(subStr, 0)})"
>
{index + 1}
</div>
{/each}
</div>
<textarea bind:value={source}
style:width="{areaWidth}px"
rows="15"
/>
<div id="font-width"
bind:this={fontWidthElem}
>
a
</div>
</div>
<style>
:global(body) {
padding: 0;
}
.editor {
--line-height: 21px;
position: relative;
display: inline-flex;
gap: 10px;
padding: 20px 10px;
font-family: monospace;
line-height: var(--line-height);
background: #282a3a;
border-radius: 2px;
}
.line-nr {
width: 20px;
text-align: right;
color: #506882 !important;
}
textarea {
line-height: var(--line-height);
overflow-y: hidden;
margin: 0;
padding: 0;
border: 0;
background: #282a3a;
color: #fff;
outline: none;
resize: none;
}
#font-width {
position: absolute;
top: -1000px;
left: -1000px;
visibility: hidden;
}
</style>
To make the width responsive
additional editor wrapper for padding
watch editor width and calculate maximal possible charactersPerLine for textarea besides line numbers element
charactersPerLine added as argument to wrapped() for recalculation on change
REPL
<script>
import {onMount} from 'svelte'
export let source = `jon\nsup there is some other text here that I want to go across the lines and not word wrap another line etc boy!\nme\nfixin to do sumthin good`;
let fontWidthElem
let fontWidth
let editorWidth
onMount(() => {
fontWidth = fontWidthElem.getBoundingClientRect().width
})
let lineNumbersWidth = 30
$: charactersPerLine = Math.floor((editorWidth - lineNumbersWidth) / fontWidth)
function wrapped(str, charactersPerLine, timesWrapped) {
if(str.length > charactersPerLine) {
const firstLine = str.substring(0, charactersPerLine)
const spaceOrDashInFirstLine = /[ -]/.test(firstLine)
const lastCharFirstLine = str[charactersPerLine-1]
const firstCharNextLine = str[charactersPerLine]
const wordIsCut = lastCharFirstLine !== '-' && lastCharFirstLine !== ' ' && firstCharNextLine !== ' ' && firstCharNextLine !== '-'
const nextLine = str.substring(charactersPerLine)
const nextLineNotOnlySpaces = nextLine.replaceAll(' ', '').length > 0
if(wordIsCut && spaceOrDashInFirstLine){
const lastIndexOfDivider = Math.max(firstLine.lastIndexOf(' '), firstLine.lastIndexOf('-'))
return wrapped(str.substring(lastIndexOfDivider+1), charactersPerLine, timesWrapped+1)
}else if(nextLineNotOnlySpaces){
return wrapped(nextLine.trimStart(), charactersPerLine, timesWrapped+1)
}else {
return timesWrapped
}
}else {
return timesWrapped
}
}
</script>
<div class="editor-wrapper">
<div class="editor"
bind:clientWidth={editorWidth}
>
<div class="line-numbers"
style:width="{lineNumbersWidth}px"
>
{#each source.split('\n') as subStr, index}
<div class="line-nr"
style:margin-bottom="calc(var(--line-height) * {wrapped(subStr, charactersPerLine, 0)})"
>
{index + 1}
</div>
{/each}
</div>
<textarea bind:value={source}
style:width="{charactersPerLine}ch"
rows="15"
/>
<div id="font-width"
bind:this={fontWidthElem}
>
a
</div>
</div>
</div>
<style>
:global(body) {
padding: 0;
}
:global(*) {
box-sizing: border-box;
}
.editor-wrapper {
--line-height: 21px;
padding: 20px 10px;
background: #282a3a;
border-radius: 2px;
}
.editor {
position: relative;
display: flex;
width: 100%;
font-family: monospace;
line-height: var(--line-height);
}
.line-numbers {
padding-right: 10px;
text-align: right;
color: #506882 !important;
}
textarea {
line-height: var(--line-height);
overflow-y: hidden;
margin: 0;
padding: 0;
border: 0;
background: #282a3a;
color: #fff;
outline: none;
resize: none;
/* border seems to falsify calculation! */
/* box-shadow: 0 0 0 1px grey; */
}
#font-width {
position: absolute;
top: -1000px;
left: -1000px;
visibility: hidden;
}
</style>
What I want to do
I created the homepage that has some images. I would like to show up them by the responsive design. However, all image files' size are not changed when I show on the iPhone.
There are 3 types img files on HP.
The images are ...
files shows up by changing the 3 pics by each 2 seconds at the same place.
normal img files.
As the gallery, that the img file change to show up by clicking the thumbnail button.
All of them are not changed img size when responsive.
//const img = ["hoge.png", "foo.png", "bar.jpg"];
const img = ["https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj", "https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj", "https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj"];
let count = -1;
const hoge = () => {
count++;
// カウントが最大になれば初期値に戻す
if (count == img.length) count = 0;
//画像選択
pic.src = img[count];
//1秒ごとに実行
setTimeout(() => {
hoge();
}, 2000);
}
window.onload = () => {
hoge();
}
//アルバムデータの作成
let album = [{
src: 'img/1.png',
msg: 'さまざまな形のパスタと自然の恵みを生かしたイタリアン'
},
{
src: 'img/2.png',
msg: 'パスタだけでなく軽食やスイーツも'
},
{
src: 'img/3.png',
msg: '肉料理やピザもイタリアン料理を彩ります'
},
{
src: 'img/4.png',
msg: '豊富な種類のピザ'
},
{
src: 'img/5.png',
msg: 'チーズが主役だったり生ハムが主役だったり、ピザの種類は豊富です'
}
];
//最初のデータを表示しておく
let mainImage = document.createElement('img');
mainImage.setAttribute('src', album[0].src);
mainImage.setAttribute('alt', album[0].msg);
let mainMsg = document.createElement('p');
mainMsg.innerText = mainImage.alt;
let mainFlame = document.querySelector('#gallery .main');
mainFlame.insertBefore(mainImage, null);
mainFlame.insertBefore(mainMsg, null);
//サムネイル写真の表示
let thumbFlame = document.querySelector('#gallery .thumb');
for (let i = 0; i < album.length; i++) {
let thumbImage = document.createElement('img');
thumbImage.setAttribute('src', album[i].src);
thumbImage.setAttribute('alt', album[i].msg);
thumbFlame.insertBefore(thumbImage, null);
}
//クリックした画像をメインにする
thumbFlame.addEventListener('click', function(event) {
if (event.target.src) {
mainImage.src = event.target.src;
mainMsg.innerText = event.target.alt;
}
});
.under {
border-bottom: dotted 2px #87cdfa
}
.fixed {
width: 300px;
height: auto;
}
img.calbo {
width: 100%;
height: auto;
}
img.pepe {
width: 100%;
height: auto;
}
#gallery {
margin: 0;
padding-top: 40px;
width: 700px;
}
#gallery .main img {
border: 4px solid #fff;
box-shadow: 0;
}
#gallery .main p {
color: #bbb;
font-size: 20px;
font-weight: bold;
}
#gallery .thumb img {
border: 4px solid #fff;
border-radius: 400px;
box-shadow: 0px 0px 10px #000;
height: 60px;
margin: 10px;
width: 60px;
cursor: pointer;
}
#media screen and (max-width: 480px) {
test {
float: none;
}
img {
width: 100%;
}
}
<h1>
<font color="#EEEEEE">レシピ ～ カルボナーラとペペロンチーノ</h1>
<br>
<hr width="700" align="left">
<!--- html ----->
<img id="pic" src="hoge.png" width="600" height=auto class="top">
<p>
<table>
<tr>
<th class="fixed"><img src="calbo150.png" class="calbo"></th>
<td style="background-color:#476072">
ちょっとしたひと工夫で普通の手作り<br> カルボからお店風本格カルボに。
<br> 失敗もしない簡単レシピ
<br><br>
カルボナーラのレシピ
</td>
</tr>
<tr>
<th class="fixed"><img src="pepe.jpg" class="pepe"></th>
<td style="background-color:#476072">
簡単だけど難しいペペロンチーノ。<br> 材料と水分調整がうまくいけば本格的な
<br> ペペロンチーノに仕上がります。
<br><br>
ペペロンチーノのレシピ
</td>
</tr>
</table>
</p>
<!-- JavaScript -->
<div id="gallery">
<div class="main">
</div>
<div class="thumb">
</div>
</div>
Although I didn’t paste the full HTML here, I used the double byte double quotation in the settings of the Viewport line. After I modified to single byte one, it started to work.
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 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;
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