I am trying to make from an array of scrambled sentences unordered lists to apply sortable JS in the following format
<ul id="sortable" class="div3">
<li id = 'number'> </li>
<li id="1" class="ui-state-default">The</li>
<li id="2" class="ui-state-default">piano</li>
<li id="3" class="ui-state-default">play</li>
<li id="4" class="ui-state-default">I</li>
</ul>
<script>
So far I have come up with the following which does not give the correct format
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>my array to list attempt</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
li {
list-style:none;
display: inline;
}
</style>
</head>
<body>
<script>
function makeQuest() {
var quest=['I play piano the can', 'tired I am', 'are seven there week in a days'];
for (var i=0; i< quest.length; i++){
document.write('<ul class ="div3">')
document.write('<li id = "number">' + (i + 1) + ' '+ '</li>')
for (var j=0; j < quest[i].length; j++){
document.write('<li>' + quest[i][j] + '</li>')
document.write('</ul>')
}
}
};
$(function makeSort() {
$( ".div3" ).sortable({
items: "li:not(#number)"
});
$( ".div3" ).disableSelection();
});
</script>
<script>
makeQuest()
makeSort()
</script>
</body>
</html>
I am not a programmer : just trying to make a language tutor for personal use. Thank you for any help
This is working for me, and is sortable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>my array to list attempt</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
li {
list-style:none;
display: inline;
}
</style>
</head>
<body>
<ul id="sortable" class="div3">
<li id = 'number'> </li>
<li id="1" class="ui-state-default">The</li>
<li id="2" class="ui-state-default">piano</li>
<li id="3" class="ui-state-default">play</li>
<li id="4" class="ui-state-default">I</li>
</ul>
<script>
$(function makeSort() {
$( ".div3" ).sortable({
items: "li:not(#number)"
});
$( ".div3" ).disableSelection();
});
</script>
</body>
</html>
Related
I'm using vuetify datepicker with a French locale. Although everything is fine in the calendar, the "selected" translation doesn't apply, it writes "selected" when I select two dates instead of "sélectionnés". Is there anything I did wrong?
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<div id="app">
<v-app id="inspire">
<v-row>
<v-col cols="12" sm="6">
<v-date-picker locale="fr" v-model="dates" range></v-date-picker>
</v-col>
<v-col cols="12" sm="6">
<v-text-field v-model="dateRangeText" label="Date range" prepend-icon="mdi-calendar" readonly></v-text-field>
model: {{ dates }}
</v-col>
</v-row>
</v-app>
</div>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
dates: ['2019-09-10', '2019-09-20'],
}),
computed: {
dateRangeText () {
return this.dates.join(' ~ ')
},
},
})
</script>
</body>
</html>
Thank you.
This worked for me:
<v-date-picker
v-model="date"
locale="fr"
selectedItemsText="{0} sélectionnés"
>
Bye.
I am doing a course on DOM Event manipulation.
I am trying to make a todolist where the color of the li changes when I hover on it.
My problem is that the color changes when I click on the element and not when I hover on it. Thank you in advance.
I have the following js:
var lis = document.querySelectorAll("li");
for(var i = 0; i < lis.length; i++){
lis[i].addEventListener("mouseover", function(){
this.classList.add("selected");
});
lis[i].addEventListener("mouseout", function(){
this.classList.remove("selected");
});
lis[i].addEventListener("click", function(){
this.classList.toggle("done");
})
}
.done {
text-decoration: line-through;
opacity: 0.5;
}
.selected {
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Todo List Demo</title>
<link rel="stylesheet" type="text/css" href="todos.css">
</head>
<body>
<ul>
<li>Wash cat</li>
<li>Feed Cat</li>
<li>Feed cat to dog</li>
</ul>
<script type="text/javascript" src="todos.js"></script>
</body>
</html>
Html part:
<ul>
<li onmouseenter="enter(0)" onmouseout="out(0)">Milk</li>
<li onmouseenter="enter(1)" onmouseout="out(1)">Eggs</li>
<li onmouseenter="enter(2)" onmouseout="out(2)">Fruits</li>
</ul>
Js:
function enter(x) {
document.getElementsByTagName('li')[x].style.color = "red"
}
function out(y) {
document.getElementsByTagName('li')[y].style.color = "black"
}
By The way I just tested the code and It worked! :)
I've created a simple "helloworld" web component, in that I put a "button" tag and I want that button to be clicked by triggering it but i'm unable to trigger it. What am I doing wrong?
Here is my code for "Index.html" file in which i've called my Own component and values for my button:
<!doctype html>
<html>
<head>
<title>First Polymer component</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="bower_components/lib/jquery-1.11.2.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap-theme.css" />
<script src="bootstrap_theme/js/bootstrap.js"></script>
<link rel="import" href="hello-world.html">
<script>
var button_data = [{
"name": "litrary vocabulary",
"span_id": "mostbasic",
"description": "This is a sample description about litrary vocabulary"
}, {
"name": "no contractions",
"description": "This is a sample description about no contractions"
}];
window.addEventListener('WebComponentsReady', function(e) {
var element = document.querySelector('hello-world');
element.buttonsdata = button_data;
});
</script>
</head>
<body>
<hello-world> </hello-world>
<script>
$('.answerButtons').trigger("click");
function k12() {
window.open("http://www.w3schools.com");
}
</script>
</body>
</html>
And the 2nd file contain code for my web component:
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<style>
p {
color: red;
}
</style>
<template>
<template is="dom-repeat" items="{{buttonsdata}}" as="button_data">
<button type="button" class="btn btn-info answerButtons" onclick = "k12()">{{_getButtonName(button_data)}} </button>
</template>
<p>This is my first own component </p>
<p>This is my first ....... </p>
<p>Kumaran is IDIOT </p>
</template>
<script>
Polymer({
is: 'hello-world',
_getButtonName: function(buttondata) {
return buttondata.name;
}
});
</script>
</dom-module>
button_data should be a property in hello-world
onclick should be on-click for Polymer binding https://www.polymer-project.org/1.0/docs/devguide/events.html
I'm trying to use autocomplete inside a jstree but can't figure out why it doesn't work when both bindings are done in document ready. It works if the autocomplete binding is done after the jstree binding via windows load or a user triggered script.
This is a simplified example of the issue. (code at JSFiddle)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree v.1.0 - Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<link type="text/css" rel="stylesheet" href="http://static.jstree.com/v.1.0pre/_docs/syntax/!style.css"/>
<link type="text/css" rel="stylesheet" href="http://static.jstree.com/v.1.0pre/_docs/!style.css"/>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/_docs/syntax/!script.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script>
function autocomplete(element) {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(element).autocomplete({
source: availableTags
});
};
</script>
</head>
<body id="demo_body">
<div id="container">
<h1 id="dhead">jsTree v.1.0</h1>
<h1>DEMO</h1>
<div>
<label for="tags">Tags: </label>
<input id="tags" />
</div>
<h2>Autocomplete inside jsTree</h2>
<div id="description">
<!-- autocomplete inside a tree works when the user adds autocomplete manually -->
<button type="button" onclick="autocomplete('#tagstree')">add autocomplete manually (comment out other autocomplete bindings)</button>
<div id="demo1" class="demo" style="height:100px;">
<ul>
<li id="phtml_1">
<label for="tagstree">Tags: </label>
<input id="tagstree" />
<ul>
<li id="phtml_2">
Child node 1
</li>
<li id="phtml_3">
Child node 2
</li>
</ul>
</li>
<li id="phtml_4">
Root node 2
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
/* just to demonstrate an autocomplete field by itself works */
autocomplete('#tags');
/* adding autocomplete on an element in the tree doesn't work */
autocomplete('#tagstree');
$("#demo1")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys"],
"core" : { "initially_open" : [ "phtml_1" ] }
})
.bind("loaded.jstree", function (event, data) {
});
});
/* autocomplete inside a tree works when it gets added via windows load instead of document ready */
//$(window).load(function () {
// autocomplete('#tagstree');
//});
</script>
</div>
</body>
</html>
Any idea how to add charts using Telerik Kendo UI DataViz to an iPhone web application. Thanks in advance. Here is what I am trying to do, but the chart does not show up!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script src="../../../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/kendo.all.js" type="text/javascript"></script>
<script src="../../../../Scripts/console.js" type="text/javascript"></script>
<link href="../../../../Content/Mobile/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/Mobile/kendo.mobile.all.min.css" rel="stylesheet"
type="text/css" />
<div data-role="view" data-title="Views">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul data-role="listview" data-style="inset">
<li>Local View</li>
</ul>
<ul data-role="listview" data-style="inset">
<li>Remote View</li>
</ul>
</div>
<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
<div id="chart">
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Kendo Chart Example"
},
series: [
{ name: "Example Series", data: [200, 450, 300, 125] }
]
});
}
$(document).ready(function () {
setTimeout(function () {
createChart();
$("#example").bind("kendo:skinChange", function (e) {
createChart();
});
}, 400);
});
</script>
</div>
<div data-role="layout" data-id="mobile-view">
<header data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
</div>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
Thanks in advance
KendoUI DataViz components work in Webkit-based mobile browsers, including Safari on iOS (source), in addition to Android Browser v3 and above.
If you just want to know how to implement a KendoUI chart, here is a simple one I did to answer another question, about how to force KendoUI to plot across missing values: http://jsfiddle.net/LyndsySimon/KJuDe/
categoryAxis: {
categories: [
'test<tspan dx="-20px" dy="1em">label</tspan>', 2006, 2007, 2008, 2009]
}
You can find a complete reference to the DataViz library on KendoUI's site: http://www.kendoui.com/documentation/dataviz/chart/overview.aspx