Selectable() Jquery mobile alternative - javascript

I was looking for the solution for my API but I couldn't find.. All examples or advices didn't work. Could somebody help me out? Or give me any suggestion? I'm still studying JQuery, so any help would be more than welcome..
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New api</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<section>
<div id="alert"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<ul id="wordblock">
</ul>
<div id="result">Result</div>
</section>
<script src="./api.js"></script>
</main>
</body>
</html>
JQuery code:
function screenResolutionAlert(x) {
if (x.matches) {
$("#alert").html("This API doesn't work with touchpads <br> (mobiles, tablets etc) <br> please use computer or laptop with a mouse").show();
} else {
$("#alert").hide();
}
}
var x = window.matchMedia("(max-width: 1200px)")
screenResolutionAlert(x)
x.addListener(screenResolutionAlert)
//API swap words code
$(function () {
$("#wordblock").sortable();
$("#wordblock").disableSelection();
const array = ["pierogi", "gołąbki", "pies", "sześcian"];
const word = array[Math.floor(Math.random() * array.length)];
let d_word = word.split('');
shuffle(d_word);
const lis = [];
for (let i = 0; i < d_word.length; i++) {
lis.push('<li class="ui-state-default">' + d_word[i] + '</li>')
}
$('#wordblock').html(lis.join(''));
$('#wordblock').mouseup(function () {
setTimeout(() => {
let r_word = '';
$('#wordblock>li').each(function (e) {
r_word += $(this).text();
});
if (r_word == word) {
$("#result").html(`Correct! It was exactly "${r_word}"`);
} else {
$("#result").html(`Wrong! keep trying.. <br> it's not "${r_word}"`);
}
}, 0);
});
});
function shuffle(a, b, c, d) {
c = a.length;
while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d
}
Yes I was using mobile Jquery links, didn't work... And any versions of.. I tried everything what was written in the internet ;(

I tried your code and ...it seems to work! Snippet is here below, just press Run code snippet, and order letters to "PIES".
I suggest you to read about APIs, because at the moment you're not using any API at all! 😁
function screenResolutionAlert(x) {
if (x.matches) {
$("#alert")
.html(
"This API doesn't work with touchpads <br> (mobiles, tablets etc) <br> please use computer or laptop with a mouse"
)
.show();
} else {
$("#alert").hide();
}
}
var x = window.matchMedia("(max-width: 1200px)");
screenResolutionAlert(x);
x.addListener(screenResolutionAlert);
//API swap words code
$(function () {
$("#wordblock").sortable();
$("#wordblock").disableSelection();
const array = ["pies"];
const word = array[Math.floor(Math.random() * array.length)];
let d_word = word.split("");
shuffle(d_word);
const lis = [];
for (let i = 0; i < d_word.length; i++) {
lis.push('<li class="ui-state-default">' + d_word[i] + "</li>");
}
$("#wordblock").html(lis.join(""));
$("#wordblock").mouseup(function () {
setTimeout(() => {
let r_word = "";
$("#wordblock>li").each(function (e) {
r_word += $(this).text();
});
if (r_word == word) {
$("#result").html(`Correct! It was exactly "${r_word}"`);
} else {
$("#result").html(`Wrong! keep trying.. <br> it's not "${r_word}"`);
}
}, 0);
});
});
function shuffle(a, b, c, d) {
c = a.length;
while (c)
(b = (Math.random() * (--c + 1)) | 0),
(d = a[c]),
(a[c] = a[b]),
(a[b] = d);
}
ul#wordblock {
padding-left: 0;
}
ul#wordblock li {
display: inline-block;
font-size: 2em;
padding: 0.2em 0.2em;
cursor: pointer;
background-color: aliceblue;
border-radius: 50%;
margin: 0.5em;
width: 1em;
height: 1em;
text-align: center;
line-height: 0.9em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New api</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<section>
<div id="alert"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<ul id="wordblock">
</ul>
<div id="result">Result</div>
</section>
<script src="./api.js"></script>
</main>
</body>
</html>

Related

How to build array contains conditional

I need to build a window listener that triggers on the mouseover on a box using contains and I'm not quite sure of how to build that?
This is a test I've built:
window.addEventListener("mouseover", trial)
function trial(e) {
const contain_material = document.getElementsByClassName("item")
if(contain_material.contains(e.target)) {
alert("so far so good")
}
else {
return
}
}
See if the following works for you.
function trial(e) {
const contain_material = document.getElementsByClassName("item")
for (var i = 0; i < contain_material.length; i++) {
if(contain_material[i] == e.target) {
alert("so far so good")
}
}
}
Instead of checking hover on the window, why not just check when one of those elements is hovered over. For example:
const contain_material = document.getElementsByClassName("item")
for (mat of contain_material) {
mat.addEventListener("mouseover", trial)
}
function trial(e) {
alert("so far so good")
}
Can't you just listen to the mouseover on the box element instead of in the whole page?
function handleMouseOver() {
alert('so far so good')
}
// or you can add dynamicaly with js
var boxes = document.getElementsByClassName("item");
Array.from(boxes).forEach(function() {
this.onmouseover = () => alert('so far so good')
})
// () => this is an arrow function in case you dont know
// Array.from() is because you can't use the forEach straight with a HTMLCollection
body {
display: flex;
}
.item {
width: 300px;
height: 300px;
background-color: yellow;
margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="item" onmouseover="handleMouseOver()"></div>
<div class="item" onmouseover="handleMouseOver()"></div>
<div class="item" onmouseover="handleMouseOver()"></div>
<div class="item" onmouseover="handleMouseOver()"></div>
</body>
</html>

JavaScript Craps game using two arrays to generate the "point"

There are no errors on plnkr.co, yet the div button still doesn't work.
1) Am I on the right track for pulling two random numbers from two arrays, adding them and returning the result when the button is clicked.
2) I saw the undefined error when I ran the code on here, but I am not sure what to troubleshoot. The code didn't give any errors on plnkr.co.
//button event will generate 2 random numbers and add them together
var num1 = [1,2,3,4,5,6];
var num2 = [1,2,3,4,5,6];
//var sum1 = [2,3,4,5,6,7,8,9,10,11,12]
//var sum2 = num1 + num2
function rollDice(){
var randomNumber = Math.floor(Math.random()*(num1 + num2));
document.getElementById("roll").innerHTML = randomNumber[rollDice];
}
body {
background-color: darkred;
}
h1 {
color: white;
text-align: center;
}
p {
color: white;
font-family: verdana;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>JavaScript Craps using arrays</title>
<link rel="stylesheet" href="random.css">
<script src="craps.js"></script>
</head>
<body>
<h1> Craps Lounge</h1>
<div id="button">
<button onclick="randomNumber()">Roll the Bones</button>
</div>
<p id="roll"></p>
</body>
</html>
A few issues with your code:
you need to actually call rollDice() function.
you can't find randomNumber like that, you need two random index to select two numbers from the two arrays you have defined. you can use Math.random() for this, like in the code below:
randomNumber[rollDice] is wrong since randomNumber is a number and not an object.
//button event will generate 2 random numbers and add them together
var num1 = [1,2,3,4,5,6];
var num2 = [1,2,3,4,5,6];
//var sum1 = [2,3,4,5,6,7,8,9,10,11,12]
//var sum2 = num1 + num2
function rollDice(){
var randomIndex1 = Math.floor(Math.random()*num1.length);
var randomIndex2 = Math.floor(Math.random()*num2.length);
var randomNumber = num1[randomIndex1] + num2[randomIndex2];
document.getElementById("roll").innerHTML = randomNumber;
}
body {
background-color: darkred;
}
h1 {
color: white;
text-align: center;
}
p {
color: white;
font-family: verdana;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>JavaScript Craps using arrays</title>
<link rel="stylesheet" href="random.css">
<script src="craps.js"></script>
</head>
<body>
<h1> Craps Lounge</h1>
<div id="button">
<button onclick="rollDice()">Roll the Bones</button>
</div>
<p id="roll"></p>
</body>
</html>
I seen a few things. I refactored to what I believe you was trying to achieve.
//button event will generate 2 random numbers and add them together
var num1 = [1, 2, 3, 4, 5, 6];
var num2 = [1, 2, 3, 4, 5, 6];
//var sum1 = [2,3,4,5,6,7,8,9,10,11,12]
//var sum2 = num1 + num2
function rollDice() {
//random # between 1 and 6
var dice1 = Math.floor((Math.random() * num1.length) + 1);
var dice2 = Math.floor((Math.random() * num2.length) + 1);
var randomNumber = dice1 + dice2;
document.getElementById("roll").innerHTML = randomNumber;
}
body {
background-color: darkred;
}
h1 {
color: white;
text-align: center;
}
p {
color: white;
font-family: verdana;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>JavaScript Craps using arrays</title>
</head>
<body>
<h1> Craps Lounge</h1>
<div id="button">
<button onclick="rollDice()">Roll the Bones</button>
</div>
<p id="roll"></p>
</body>
</html>

Tracking random div across page

Trying to move my div randomly around page. Currently new randomly generated div appears on new location on page as opposed to transitioning to new position (I want div to track across page instead of deleting itself and reappearing).
function randomdiv1 () {
var divnum = $('.random').length;
var random = $('.random');
var startleft =random.css('left', (Math.floor(Math.random() * ($(window).width()-50))));
var starttop =random.css('top', (Math.floor(Math.random() * ($(window).height()-50))));
return [startleft, starttop];
}
function randomdiv2 () {
var divnum = $('.random').length;
var random = $('.random');
var endleft =random.css('left', (Math.floor(Math.random() * ($(window).width()-50))));
var endtop =random.css('top', (Math.floor(Math.random() * ($(window).height()-50))));
return [endleft, endtop];
}
function randomdiv3 () {
var startdiv = randomdiv1 ();
var enddiv = randomdiv2 ();
$('.random').animate({
top: enddiv[1],
left: enddiv[0],
}, 2000, 'swing', randomdiv3);
}
randomdiv3 ();
.random {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="random"></div>
</body>
</html>
This can be achieved in a simple way by adding the following css property to .random:
transition: left 2s, top 2s;
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Example below:
https://jsfiddle.net/4r9xch2v/

JavaScript - If statement with text doesn't work properly

I am trying to make an if statement based off of user input. I can't seem to get this code to work. It continues to say no, even when I enter 'one', which is supposed to do something different, as you can see in the code snippet. I am running the code in the latest version of Chrome.
var ques = document.getElementById("question");
var ansBox = document.getElementById("ansBox").value;
var submitBtn = document.getElementById("submitBtn");
var isCorrect = document.getElementById("isCorrect");
var num1 = Math.floor((Math.random() * 100) + 1);
var num2 = Math.floor((Math.random() * 100) + 1);
var ans = num1 + num2;
function question() {
ques.innerHTML = num1 + " + " + num2;
}
function checkAns() {
if(ansBox.value == "one") {
isCorrect.innerHTML = "Yes";
} else {
isCorrect.innerHTML = "No";
}
}
question();
body {
font-family: Arial;
}
div {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h1>Edu Game One</h1>
<h3 id="question"></h3>
<input type="text" id="ansBox" />
<button id="submitBtn" onclick="checkAns()">Submit</button>
<p id="isCorrect"></p>
</div>
<script src="scripts.js"></script>
</body>
</html>
You had an extra .value at the end of your definition of ansBox. Removing that makes it work:
var ques = document.getElementById("question");
var ansBox = document.getElementById("ansBox");
var submitBtn = document.getElementById("submitBtn");
var isCorrect = document.getElementById("isCorrect");
var num1 = Math.floor((Math.random() * 100) + 1);
var num2 = Math.floor((Math.random() * 100) + 1);
var ans = num1 + num2;
function question() {
ques.innerHTML = num1 + " + " + num2;
}
function checkAns() {
if(ansBox.value == "one") {
isCorrect.innerHTML = "Yes";
} else {
isCorrect.innerHTML = "No";
}
}
question();
body {
font-family: Arial;
}
div {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h1>Edu Game One</h1>
<h3 id="question"></h3>
<input type="text" id="ansBox" />
<button id="submitBtn" onclick="checkAns()">Submit</button>
<p id="isCorrect"></p>
</div>
<script src="scripts.js"></script>
</body>
</html>

How to call a function on video end ? (HTML5 and mediaelementjs)

i am using mediaelementjs for playing video on my website but i need to call some
function at the END/pause of video.So please tell me how an i do this?
Thanks in advance
You need to create a new EventListener for the ended and pause events.
Example:
YourMediaElement.addEventListener('ended', function(){
//Your Code goes here
});
Update: This method should be applied on the success handler of creating the element, as is shown in the example on the bottom of the page at MediaElementJS.com
success: function (YourMediaElement, domObject) {
// add event listener
YourMediaElement.addEventListener('ended', function(e) {
//Do Stuff here
}, false);
May be it will be useful for someone...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<title>Media Website</title>
<script type="text/javascript" src="build/jquery.js"></script>
<script type="text/javascript" src="build/mediaelement-and-player.min.js"></script>
<link href="build/mediaelementplayer.min.css" rel="Stylesheet" />
<link href="build/mejs-skins.css" rel="Stylesheet" />
<style type="text/css">
html, body
{
overflow: hidden;
}
*
{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var height = getURLParameters('height');
$("#player1").css("height", height + "px");
var width = getURLParameters('width');
$("#player1").css("width", width + "px");
});
function getURLParameters(paramName) {
var sURL = window.document.URL.toString();
if (sURL.indexOf("?") > 0) {
var arrParams = sURL.split("?");
var arrURLParams = arrParams[1].split("&");
var arrParamNames = new Array(arrURLParams.length);
var arrParamValues = new Array(arrURLParams.length);
var i = 0;
for (i = 0; i < arrURLParams.length; i++) {
var sParam = arrURLParams[i].split("=");
arrParamNames[i] = sParam[0];
if (sParam[1] != "")
arrParamValues[i] = unescape(sParam[1]);
else
arrParamValues[i] = "No Value";
}
for (i = 0; i < arrURLParams.length; i++) {
if (arrParamNames[i] == paramName) {
//alert("Param:"+arrParamValues[i]);
return arrParamValues[i];
}
}
return "No Parameters Found";
}
}
function ChangeSize(h, w) {
$("#player1").css("height", h + "px");
$("#player1").css("width", w + "px");
}
var videoLink;
var videoLinkType;
var posterLink;
function SetPosterLink(p) {
posterLink = p;
$("#player1").attr("poster", posterLink);
}
function SetVideoLink(l, t) {
videoLink = l;
videoLinkType = t;
$("#player1").attr("src", videoLink);
$("#player1").attr("type", videoLinkType);
}
var player;
function CreatePlayer() {
player = MediaElement('player1',
{
success: function (me) {
// me.play();
me.addEventListener('ended', function (e) {
//Do Stuff here
alert('ended');
}, false);
}
});
}
function Play() {
player.play();
}
function Pause() {
player.pause();
}
function Stop() {
player.pause();
}
</script>
</head>
<body style="overflow: hidden; margin: 0 !important; padding: 0 !important;">
<video controls="none" preload="none" width="0" height="0" style="margin: 0 !important;
padding: 0 !important; overflow: hidden;" id="player1" name="mplayer1" src=""
type="" poster="">
</video>
</body>
</html>

Categories

Resources