I'm currently working on a search engine. I have implemented a feature in which a user has option to make the search engine as default in his browser on which user works.
Now this feature I have implemented in a type of box in which whenever a user redirects to the search engine site, the box appears at the right-side bottom with options.
The issue I'm struck with it is, that the box only appears in Firefox browser. But in chrome/chromium browser it doesn't.
$(document).ready(function() {
var isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox === false) {
$("#set-susper-default").remove();
$(".input-group-btn").addClass("align-search-btn");
$("#navbar-search").addClass("align-navsearch-btn");
}
if (window.external && window.external.IsSearchProviderInstalled) {
var isInstalled = window.external.IsSearchProviderInstalled("http://susper.com");
if (!isInstalled) {
$("#set-susper-default").show();
}
}
$("#install-susper").on("click", function() {
window.external.AddSearchProvider("http://susper.com/susper.xml");
});
$("#cancel-installation").on("click", function() {
$("#set-susper-default").remove();
});
});
#set-susper-default {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed;
right: 10px;
bottom: 60px;
background-clip: padding-box;
display: block;
}
#set-susper-default h3 {
margin: 0;
padding: 8px;
text-align: center;
background-color: #26547c;
color: white;
}
#set-susper-default ol {
font-size: 15px;
background-color: white;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
}
#set-susper-default button {
background-color: #26547c;
border: none;
color: white;
font-size: 15px;
padding: 3px;
}
#set-susper-default #cancel-installation {
width: 100%;
}
#set-susper-default #install-susper {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="set-susper-default">
<h3>Set Susper as your default search engine on Mozilla!</h3>
<ol>
<!-- Start ignoring BootLintBear -->
<li><button id="install-susper">Install susper</button></li>
<li>Mark the checkbox to set Susper as your default search engine</li>
<li>Start searching!</li>
</ol>
<button id="cancel-installation">Cancel</button>
</div>
<!-- Stop ignoring BootLintBear -->
<div id="search-bar">
<app-search-bar></app-search-bar>
</div>
Please comment your initial lines in script code. Replace your script with following it works for me:
$(document).ready(function () {
//var isFirefox = typeof InstallTrigger !== 'undefined';
//if (isFirefox === false) {
// $("#set-susper-default").remove();
// $(".input-group-btn").addClass("align-search-btn");
// $("#navbar-search").addClass("align-navsearch-btn");
//}
if (window.external && window.external.IsSearchProviderInstalled) {
var isInstalled = window.external.IsSearchProviderInstalled("http://susper.com");
if (!isInstalled) {
$("#set-susper-default").show();
}
}
$("#install-susper").on("click", function () {
window.external.AddSearchProvider("http://susper.com /susper.xml");
});
$("#cancel-installation").on("click", function () {
$("#set-susper-default").remove();
});
});
Related
I have here those codes. So basicly this is website with login to page and To do list but when I enter the username and password it didnt redirect me to the to do list website. The password and username in the JS code is password and username for now and it didnt work.Any ideas?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>To-Do List</h1>
<div id="login-container">
<h2>Login</h2>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button id="login-btn">Login</button>
</div>
<div id="todo-container" style="display: none;">
<div id="input-container">
<input type="text" id="new-task" placeholder="Enter a new task">
<button id="add-btn">Add</button>
</div>
<ul id="task-list">
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
#login-container {
width: 40%;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#todo-container {
width: 60%;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#input-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
#new-task {
flex-grow: 1;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#add-btn {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
#task-list {
list-style: none;
margin: 0;
padding: 0;
}
.task {
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.delete-btn {
margin-left: 10px;
padding: 5px 10px;
font-size: 14px;
color: #fff;
background-color: #dc3545;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
JS
const loginForm = document.getElementById("login-container");
const todoContainer = document.getElementById("todo-container");
const usernameInput = document.getElementById("username");
const passwordInput = document.getElementById("password");
const loginBtn = document.getElementById("login-btn");
const addBtn = document.getElementById("add-btn");
const newTaskInput = document.getElementById("new-task");
const taskList = document.getElementById("task-list");
let tasks = [];
// Check if the user is logged in
if (isLoggedIn()) {
showTodo();
} else {
showLogin();
}
// Event listeners
loginBtn.addEventListener("click", handleLogin);
addBtn.addEventListener("click", handleAddTask);
taskList.addEventListener("click", handleDeleteTask);
// Functions
function handleLogin(event) {
event.preventDefault();
const username = usernameInput.value;
const password = passwordInput.value;
if (username === "Username" && password === "password") {
showTodo();
clearLoginInputs();
} else {
alert("Incorrect username or password. Please try again.");
}
}
function handleAddTask(event) {
event.preventDefault();
const taskName = newTaskInput.value;
if (taskName.trim() === "") {
alert("Please enter a task name.");
return;
}
const newTask = {
name: taskName,
completed: false,
};
tasks.push(newTask);
renderTasks();
clearNewTaskInput();
}
function handleDeleteTask(event) {
if (event.target.classList.contains("delete-btn")) {
const taskIndex = event.target.dataset.taskIndex;
tasks.splice(taskIndex, 1);
renderTasks();
}
}
function renderTasks() {
taskList.innerHTML = "";
tasks.forEach((task, index) => {
const taskElement = document.createElement("li");
taskElement.classList.add("task");
if (task.completed) {
taskElement.classList.add("completed");
}
const taskNameElement = document.createElement("span");
taskNameElement.textContent = task.name;
const deleteBtnElement = document.createElement("button");
deleteBtnElement.classList.add("delete-btn");
deleteBtnElement.textContent = "Delete";
deleteBtnElement.setAttribute("data-task-index", index);
taskElement.appendChild(taskNameElement);
taskElement.appendChild(deleteBtnElement);
taskList.appendChild(taskElement);
});
}
function clearNewTaskInput() {
newTaskInput.value = "";
}
function clearLoginInputs() {
usernameInput.value = "";
passwordInput.value = "";
}
function showLogin() {
loginForm.style.display = "block";
todoContainer.style.display = "none";
}
function showTodo() {
loginForm.style.display = "none";
todoContainer.style.display = "block";
}
function isLoggedIn() {
return localStorage.getItem("isLoggedIn") === "true";
}
I tryed a lot of things from changing little bit a code to switch to another browser.
Use console.log to find where exactly the error is instead of posting the entire code. The css was definitely not needed.
Try this:
if (username === "Username" && password === "password") {
console.log('Username and password matched');
showTodo();
clearLoginInputs();
}
If the statement is logged that would mean showTodo();clearLoginInputs(); are being executed. In this specific case, if the login inputs are being cleared, it means that the block is being called.
Now the question will be why isn't element.style.diplsay="block" not working.
Check out this link. I think it'll help
getElementById().style.display does not work
Cheers :)
I tested the same code locally and it works fine. You should check that the script file is included correctly. As a demonstration, instead of including an external script, copy and paste your script in the .html file between script tags and you will see that it works as expected.
What I am trying to achieve
I am building input-like content editable div. You are supposed to click some tags outside the div to add them inside the div while also being able to type around said tags.
The problem and how to reproduce it
I am using user-select: none (normal and webkit) to keep tag buttons from being selected, therefore losing my caret's position. It works in Firefox and Chrome but not in Safari (I aware of the -webkit- prefix and using it).
Here is a fiddle where you can reproduce the problem.
What I've tried
The root of my problem was maintaining the caret's position while leaving the content editable div.
I have previously tried to use rangy but got stuck in some limitations regarding Firefox. These limitations where quite annoying from an UX standpoint. You can check my previous question and how it got me here, to this user-select: none solution -Caret disappears in Firefox when saving its position with Rangy
That's how I got to this solution featuring user-select: none.
My components/JS:
new Vue({
el: "#app",
data(){
return {
filters_toggled: false,
fake_input_content: '',
input_length: 0,
typed: false,
boolean_buttons: [{
type: '1',
label: 'ȘI',
tag: 'ȘI',
img: 'https://i.imgur.com/feHin0S.png'
}, {
type: '2',
label: 'SAU',
tag: 'SAU',
img: 'https://i.imgur.com/vWJeJwb.png'
}, {
type: '3',
label: 'NU',
tag: 'NU',
img: 'https://i.imgur.com/NNg1spZ.png'
}],
saved_sel: 0,
value: null,
options: ['list', 'of', 'options']
}
},
name: 'boolean-input',
methods: {
inputLength($event){
this.input_length = $event.target.innerText.length;
if(this.input_length == 0)
this.typed = false;
},
addPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = 'Cuvinte cheie, cautare booleana..'
}
},
clearPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = '';
}
},
updateBooleanInput($event){
this.typed = true;
this.inputLength($event);
},
saveCursorLocation($event){
/*
if($event.which != 8){
if(this.saved_sel)
rangy.removeMarkers(this.saved_sel)
this.saved_sel = rangy.saveSelection();
}
*/
// if(this.input_length == 0 && this.typed == false){
// var div = this.$refs.divInput;
// var sel = rangy.getSelection();
// sel.collapse(div, 0);
// }
},
insertNode: function(node){
var selection = rangy.getSelection();
var range = selection.getRangeAt(0);
range.insertNode(node);
range.setStartAfter(node);
range.setEndAfter(node);
selection.removeAllRanges();
selection.addRange(range);
},
addBooleanTag($event){
// return this.$refs.ChatInput.insertEmoji($event.img);
if (!this.$refs.divInput.contains(document.activeElement)) {
this.$refs.divInput.focus();
}
console.log(this.input_length);
if(this.typed == false & this.input_length == 0){
this.$refs.divInput.innerHTML = ''
var space = '';
this.typed = true
//this.saveCursorLocation($event);
}
//rangy.restoreSelection(this.saved_sel);
console.log(getSelection().anchorNode, getSelection().anchorOffset, getSelection().focusNode, getSelection().focusOffset)
var node = document.createElement('img');
node.src = $event.img;
node.className = "boolean-button--img boolean-button--no-margin";
node.addEventListener('click', (event) => {
// event.currentTarget.node.setAttribute('contenteditable','false');
this.$refs.divInput.removeChild(node);
})
this.insertNode(node);
this.saveCursorLocation($event);
},
clearHtmlElem($event){
var i = 0;
var temp = $event.target.querySelectorAll("span, br");
if(temp.length > 0){
for(i = 0; i < temp.length; i++){
if(!temp[i].classList.contains('rangySelectionBoundary')){
if (temp[i].tagName == "br"){
temp[i].parentNode.removeChild(temp[i]);
} else {
temp[i].outerHTML = temp[i].innerHTML;
}
}
}
}
},
pasted($event){
$event.preventDefault();
var text = $event.clipboardData.getData('text/plain');
this.insert(document.createTextNode(text));
this.inputLength($event);
this.typed == true;
},
insert(node){
this.$refs.divInput.focus();
this.insertNode(node);
this.saveCursorLocation($event);
},
fixDelete(){
}
},
props: [ 'first'],
mounted() {
this.addPlaceholder()
}
})
My HTML
<div id="app">
<div class="input__label-wrap">
<span class="input__label">Cauta</span>
<div style="user-select: none; -webkit-user-select: none">
<span readonly v-on:click="addBooleanTag(b_button)" v-for="b_button in boolean_buttons" class="boolean-buttons">{{b_button.label}}</span>
</div>
</div>
<div class="input__boolean input__boolean--no-focus">
<div
#keydown.enter.prevent
#blur="addPlaceholder"
#keyup="saveCursorLocation($event); fixDelete(); clearHtmlElem($event);"
#input="updateBooleanInput($event); clearHtmlElem($event);"
#paste="pasted"
v-on:click="clearPlaceholder(); saveCursorLocation($event);"
class="input__boolean-content"
ref="divInput"
contenteditable="true">Cuvinte cheie, cautare booleana..</div>
</div>
</div>
My CSS
.filters__toggler
{
cursor: pointer;
padding: 2px;
transition: all 0.2s ease-in-out;
margin-left: 10px;
}
.filters__toggler path
{
fill: #314964;
}
.filters__toggler-collapsed
{
transform: rotate(-180deg);
}
.input__label
{
font-family: $roboto;
font-size: 14px;
color: #314964;
letter-spacing: -0.13px;
text-align: justify;
}
.input__boolean
{
width: 100%;
background: #FFFFFF;
border: 1px solid #AFB0C3;
border-radius: 5px;
padding: 7px 15px 7px;
font-family: $opensans;
font-size: 14px;
color: #082341;
min-height: 40px;
box-sizing: border-box;
margin-top: 15px;
display: flex;
flex-direction: row;
align-items: center;
line-height: 22px;
overflow: hidden;
}
.input__boolean-content
{
width: 100%;
height: 100%;
outline: none;
border: none;
position: relative;
padding: 0px;
word-break: break-word;
}
.input__boolean img
{
cursor: pointer;
margin-bottom: -6px;
}
.input__boolean--no-focus
{
color: #9A9AA6
}
.input__label-wrap
{
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
}
.boolean-buttons
{
background-color: #007AFF;
padding: 3px 15px;
border-radius: 50px;
color: #fff;
font-family: $roboto;
font-size: 14px;
font-weight: 300;
cursor: pointer;
margin-left: 10px;
}
.boolean-button--img
{
height: 22px;
margin-left: 10px;
}
.boolean-button--no-margin
{
margin: 0;
}
.popper
{
background-color: $darkbg;
font-family: $opensans;
font-size: 12px;
line-height: 14px;
color: #fff;
padding: 4px 12px;
border-color: $darkbg;
box-shadow: 0 5px 12px 0 rgba(49,73,100,0.14);
border-radius: 8px;
}
.filters__helper
{
cursor: pointer;
margin-left: 10px;
margin-bottom: -3px;
}
.popper[x-placement^="top"] .popper__arrow
{
border-color: #082341 transparent transparent transparent;
}
Note: ignore the new vue, it's pasted from the Fiddle. I would suggest using the fiddle to inspect the code, reproduce the problem.
Expected behaviour vs actual results
In Safari (latest version), if I type a word and then click somewhere in that word or move the caret in that word through the keyboard arrows then click one of the tags on the right side of the input, the tag should be added in the middle of clicked word (where was the selection made) but it is added at the beginning of the word.
tl;dr: Safari does not respect the caret's position when clicking one of the tags. It adds the tag at the beginning of the content editable div, not where the caret previously was.
Edit 1: Based on these logs, getSelection() teaches us that the offset is always 0 because in Safari, the div loses focus.
It seems you basically found the answer yourself already. It is a timing issue.
If you change the event to mousedown, the caret position isn't lost and the tag gets inserted at the correct position.
<div id="app">
<div class="input__label-wrap">
<span class="input__label">Cauta</span>
<div style="user-select: none; -webkit-user-select: none">
<span readonly v-on:mousedown="addBooleanTag(b_button)" v-for="b_button in boolean_buttons" class="boolean-buttons">{{b_button.label}}</span>
</div>
</div>
<div class="input__boolean input__boolean--no-focus">
<div
#keydown.enter.prevent
#blur="addPlaceholder"
#keyup="saveCursorLocation($event); fixDelete(); clearHtmlElem($event);"
#input="updateBooleanInput($event); clearHtmlElem($event);"
#paste="pasted"
v-on:click="clearPlaceholder(); saveCursorLocation($event);"
class="input__boolean-content"
ref="divInput"
contenteditable="true">Cuvinte cheie, cautare booleana..</div>
</div>
</div>
https://jsfiddle.net/xmuzp20o/
If you don't want to add the actual tag on mousedown, then you could save the caret position at least in that event, so that you still have the correct position in the click event.
Let me know if I have to post this a different way, but I uploaded the three files I am working with. I am pretty new to jQuery and javascript but in my class I am supposed to be able to get this combination of files running and what is supposed to be happening when I run this HTML file is that when I hit "Submit" on the bottom of the form without entering anything into the text areas, it should return an error message and a little exclamation mark.
Currently, it isn't returning anything at all. The .css file loads fine and changes my form to look like what it is supposed to, but not the .js file. I am wondering if it has something to do with the script tags in the head section of the html file?
For context, I did write most of this myself from the book instructions but apparently the school provided the completed code in separate files which was formatted much cleaner than mine, so I just replaced mine with what you see here. The main section that wasn't clarified on either in the book or by my professor (good luck, he doesn't answer emails) is the information to load Jquery/javascript files in the header section. I am using phoneGap to emulate this web page.
var errors = {};
function displayErrors() {
// initialise variables
var haveErrors = false;
// remove the invalid class for all inputs
$(":input.invalid").removeClass("invalid");
// iterate through the fields specified in the errors array
for (var fieldName in errors) {
haveErrors = true;
$("input[name='" + fieldName + "']").addClass("invalid");
} // for
// if we have errors, then add a message to the errors div
$("#errors")
.html(haveErrors ? "Errors were found." : "")
.css("display", haveErrors ? "block" : "none");
} // displayErrors
function displayFieldErrors(field) {
var messages = errors[field.name];
if (messages && (messages.length > 0)) {
// find an existing error detail section for the field
var errorDetail = $("#errordetail_" + field.id).get(0);
// if it doesn't exist, then create it
if (! errorDetail) {
$(field).before("<ul class='errors-inline' id='errordetail_" + field.id + "'></ul>");
errorDetail = $("#errordetail_" + field.id).get(0);
} // if
// add the various error messages to the div
for (var ii = 0; ii < messages.length; ii++) {
$(errorDetail).html('').append("<li>" + messages[ii] + "</li>");
} // for
} // if
} // displayFieldErrors
$(document).ready(function() {
$(":input").focus(function(evt) {
displayFieldErrors(this);
}).blur(function(evt) {
$("#errordetail_" + this.id).remove();
});
$("#taskentry").validate({
submitHandler: function(form) {
// TO BE COMPLETED IN THE NEXT CHAPTER
},
showErrors: function(errorMap, errorList) {
// initialise an empty errors map
errors = {};
// iterate through the jQuery validation error map, and convert to
// something we can use
for (var elementName in errorMap) {
if (! errors[elementName]) {
errors[elementName] = [];
} // if
errors[elementName].push(errorMap[elementName]);
} // for
// now display the errors
displayErrors();
}
});
});
body {
margin: 0px;
min-height: 480px;
font-family: Arial;
}
form ul {
margin: 0px;
padding: 6px;
list-style-type: none;
}
form ul li {
margin: 0 0 4px 0;
-webkit-border-radius: 4px;
border: 1px solid #666666;
padding: 4px;
}
form ul li.naked {
-webkit-border-radius: 0px;
border: 0;
padding: 0;
}
input, textarea {
-webkit-appearance: none;
border: 0;
width: 99%;
}
input.invalid, textarea.invalid {
background: url(exclamation.png) no-repeat 2px 2px;
padding-left: 22px;
}
#errors {
margin: 8px 6px 2px 6px;
padding: 6px 14px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #cc0000), color-stop(0.7, #770022));
-webkit-border-radius: 4px;
color: white;
display: none;
}
ul.errors-inline li {
border: 0px;
color: red;
padding: 0px;
}
input[type=submit] {
border: 1px solid white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
-webkit-border-radius: 6px;
-webkit-box-shadow: 0 0 4px #333333;
width: 100%;
padding: 6px;
}
h1.simple {
font-size: 0.9em;
padding: 8px 4px 4px 8px;
background: #333333;
color: #AAAAAA;
border-bottom: 2px solid #AAAAAA;
margin: 0 0 4px 0;
}
h1.fancy {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #666666), color-stop(0.5, #3A3A3A), color-stop(0.5, #222222), color-stop(1.0, #000000));
-webkit-box-shadow: 0 2px 1px #AAAAAA;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
font-size: 1.1em;
color: white;
padding: 10px 8px;
margin: 0 6px 6px 6px;
text-align: center;
}
<html>
<head>
<title>Simple Mobile Web Page</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" media="screen" href="todolist.css" />
<script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../js/jquery.validate.js"></script>
<script type="text/javascript" src="todolist.js"></script>
</head>
<body>
<h1 class="fancy">Christopher Hughes To Do List</h1>
Hello World!
<p>
This is just the beginning!
</p>
<span class="highlight">
More to come!
</span>
<h1 class="fancy">Create Task</h1>
<div id="errors"></div>
<form id="taskentry">
<ul>
<li><input type="text" name="task[name]" id="taskname" placeholder="Task Name"/></li>
<li>
<textarea name="task[description]" id="taskdesc" placeholder="Description" rows="5"></textarea>
</li>
<li><input type="text" name="task[due]" id="taskdue" placeholder="Task Due" /></li>
<li class="naked"><input type="submit" name="Save" /></li>
</ul>
</form>
</body>
</html>
I tried to write a program to practice my js skills. There are 3 balls and they are hidden at first. I want the ball_1 shows up first, and after 1 sec, ball_1 disappears. Next, ball_2 shows up and after 1 sec it disappears; same logic goes with ball_3. When I run my code, the first two balls does not hide. I am not sure what is going wrong. The code below are the html, css, and js code that i wrote. Hope someone could help me out. Thank you in advance.
$(document).ready(function() {
var notes = ['ball_1', 'ball_2', 'ball_3'];
for (i = notes.length; i > 0; i--) {
var note = notes.shift();
$('#' + note).addClass('shown');
setTimeout(function() {
$('#' + note).removeClass('shown');
}, 1000);
}
});
#ball_1 {
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2 {
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3 {
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1,
#ball_2,
#ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="ball">
<div id="ball_1" class="not_shown"></div>
<div id="ball_2" class="not_shown"></div>
<div id="ball_3" class="not_shown"></div>
</div>
In general never modify an array when iterating using a for loop. The shift method will remove the first item from the array thus modifying it's length. Instead do this:
$(document).ready(function() {
var notes = ['ball_1','ball_2','ball_3'];
var i; // You were declaring "i" in global namespace before. Don't do that.
for(i = 0; i < notes.length; i++){
var note = notes[i];
$('#' + note).addClass('shown');
setTimeout(function() {
$('#' + note).removeClass('shown');
},1000);
}
});
Also you will see from my note that you were defining "i" in the global namespace. It is never good to do that so always make sure to define your variables at the beginning of the function block if using "var".
EDIT: missed a semicolon
EDIT2: completely missed that i needed to change up the loop condition.
You are looking for an asnychronous play of events - first ball_1 shows up for 1 sec and after that ball_2 shows up for 1 sec and so forth.
Something like this won't work:
for( var i = 0; i < notes.length; i++){
$('#' + notes[i]).addClass('shown');
setTimeout(function() {
$('#' + notes[i]).removeClass('shown');
},1000);
}
because the timeouts will be registered one after the other in quick succession and all the balls will show up and hide in little over one second.
So you can create a callback and set the timeout for the next ball only after the previous ball has been shown fully for 1 sec - see demo below:
$(document).ready(function() {
var notes = ['ball_1', 'ball_2', 'ball_3'];
hideBall(notes,0);
});
function hideBall(notes,i) {
$('#' + notes[i]).addClass('shown');
hide(function() {
if(++i < notes.length) {
hideBall(notes,i);
}
}, notes[i]);
}
function hide(callback, note) {
setTimeout(function() {
$('#' + note).removeClass('shown');
callback();
}, 1000);
}
#ball_1 {
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2 {
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3 {
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1,
#ball_2,
#ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="ball">
<div id="ball_1" class="not_shown"></div>
<div id="ball_2" class="not_shown"></div>
<div id="ball_3" class="not_shown"></div>
</div>
Hope this is what you need
$(document).ready(function() {
var notes = ['ball_1','ball_2','ball_3'];
for(i = notes.length; i > 0; i--){
var note = notes[i];
$('#' + note).addClass('shown');
hideBall(note, i)
}
});
function hideBall(note) {
setTimeout(function() {
$('#' + note).removeClass('shown');
},1000 * i);
}
#ball_1{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2{
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3{
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1, #ball_2, #ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "ball">
<div id = "ball_1" class = "not_shown"></div>
<div id = "ball_2" class = "not_shown"></div>
<div id = "ball_3" class = "not_shown"></div>
</div>
What you are trying won't work as it will run the for loop all in one go, setting up 3x timeouts.
try something like this
jQuery(document).ready(function($) {
function myBallLoop(){
// increment as needed
if(typeof note == 'undefined') {
var note = 1;
} else if (note == 3){
break; // end loop
} else {
note ++;
}
// show current ball qickly
$('#ball_' + note).show('fast', function(){
// call back after show event
// hide current ball after 1 sec
r = setTimeout(function(){$('#ball_' + note).hide()}, 1000);
// self call function after 2 seconts
t = setTimeout(function(){myBallLoop();, 2000}
});
}
// loop start
myBallLoop();
});
Take advantage of what jquery gives you.
Iterate using $.each is also the same as ES5's forEach. Using delay method to delay a function of adding classes is similar to setTimeout.
$(document).ready(() => {
var notes = ['ball_1','ball_2','ball_3'];
let showBalls = (i, item) => {
$('#' + item).delay(i * 1000).queue(() => {
$('#' + item).addClass('shown');
$('#' + notes[i - 1]).removeClass('shown').clearQueue();
});
}
$.each(notes, (i, item) => {
showBalls(i, item);
});
});
#ball_1{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2{
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3{
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1, #ball_2, #ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "ball">
<div id = "ball_1" class = "not_shown"></div>
<div id = "ball_2" class = "not_shown"></div>
<div id = "ball_3" class = "not_shown"></div>
</div>
Made a script that checks if: $("#password") has 9 symbols and if $("#password") = $("#confirm_password").
The problem is when I try to enable the "submit" button... What is wrong with "function submitButton()"?
$("form span").hide();
$('input[type="submit"]').attr("disabled", "true");
var samePass = false;
var eight = false;
var $password01 = $("#password");
var $password02 = $("#confirm_password")
//Why this function doesn't work?
function submitButton() {
if (samePass && eight){
$('input[type="submit"]').removeAttr('disabled');
};
};
//Checks if the pass has 8 symbles
function passwordEvent() {
if ($password01.val().length > 8) {
eight = true;
$password01.next().hide().submitButton();
} else {
$password01.next().show();
};
};
//Checks if the two passwards are the same
function passwordCheck() {
if($password02.val() !== $password01.val()) {
$password02.next().show();
} else {
samePass = true;
$password02.next().hide().submitButton();
};
};
$password01.focus(passwordEvent).keyup(passwordEvent).focus(passwordCheck).keyup(passwordCheck);
$password02.focus(passwordCheck).keyup(passwordCheck);
$("form span").hide();
$('input[type="submit"]').attr("disabled", "true");
var samePass = false;
var eight = false;
var $password01 = $("#password");
var $password02 = $("#confirm_password")
//Why this function doesn't work?
function submitButton() {
if (samePass && eight){
$('input[type="submit"]').removeAttr('disabled');
};
};
//Checks if the pass has 8 symbles
function passwordEvent() {
if ($password01.val().length > 8) {
eight = true;
$password01.next().hide().submitButton();
} else {
$password01.next().show();
};
};
//Checks if the two passwards are the same
function passwordCheck() {
if($password02.val() !== $password01.val()) {
$password02.next().show();
} else {
samePass = true;
$password02.next().hide().submitButton();
};
};
$password01.focus(passwordEvent).keyup(passwordEvent).focus(passwordCheck).keyup(passwordCheck);
$password02.focus(passwordCheck).keyup(passwordCheck);
body {
background: #384047;
font-family: sans-serif;
font-size: 10px
}
form {
background: #fff;
border-radius: 10px;
padding: 4em 4em 2em;
box-shadow: 0 0 1em #222;
max-width: 400px;
margin: 100px auto;
}
p {
margin: 0 0 3em 0;
position: relative;
}
label {
font-size: 1.6em;
font-weight:600;
color: #333;
display: block;
margin: 0 0 .5em;
}
input {
display: block;
height: 40px;
width: 100%;
box-sizing: border-box;
outline: none
}
input[type="text"],
input[type="password"] {
background: #f5f5f5;
border: 1px solid #F0F0F0;
border-radius: 5px;
font-size: 1.6em;
padding: 1em 0.5em;
}
input[type="text"]:focus,
input[type="password"]:focus {
background: #fff
}
span {
border-radius: 5px;
padding: 7px 10px;
background: #2F558E;
color: #fff;
width: 160px;
display: block; /* Needed for the width to work */
text-align: center; /* For the inner text */
position: absolute;
left: 105%;
top: 25px;
}
span:after {
content: " ";
position: absolute;
/* pointer-events: none;*/
right: 100%;
top: 50%;
/*
height: 0;
width: 0;
*/
border: solid transparent;
/* border-color: rgba(136, 183, 213, 0);*/
border-right-color: #2F558E;
border-width: 8px;
margin-top: -8px;
}
.enableSub {
background: #0099FF;
border: none;
border-radius: 5px;
color: white;
height: 50px;
box-shadow: 0 3px 0 0 #005C99;
}
.disableSub {
background: #AEAEAE;
border: none;
border-radius: 5px;
color: white;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sign Up Form</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<form action="#" method="post">
<p>
<label for="username">Username</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password">
<span>Enter a password longer than 8 characters</span>
</p>
<p>
<label for="confirm_password">Confirm Password</label>
<input id="confirm_password" name="confirm_password" type="password">
<span>Please confirm your password</span>
</p>
<p>
<input type="submit" class="disableSub" value="SUBMIT">
</p>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
$password01.next().hide().submitButton();
et al. won't work. You instead need to do;
$password01.next().hide();
submitButton();
You've declared submitButton as a function, not a method on a jQuery object, hence you need to call it as such.
The "undefined is not a function" error appears cryptic at first, but becomes clear once understood.
Since the jQuery object returned from hide() doesn't have a submitButton property (or method), hide().submitButton returns undefined. You're then trying to call that as a function (with the ()), hence JavaScript is telling you that undefined is not a function.
As well as the above, your logic is also flawed. Namely samePass is being set to true the second you click into the password1 field (since, on focus, when they're both blank, $password02.val() === $password01.val()). That means that as soon as password is > 8 chars, both conditions will match, and your submit will be enabled.
To fix this, you should probably be setting samePass and eight to false when they don't match their criteria, and calling submitButton() in all cases to update the state
//Why this function doesn't work?
function submitButton() {
if (samePass && eight) {
$('input[type="submit"]').removeAttr('disabled');
} else {
$('input[type="submit"]').attr('disabled', "true");
}
};
//Checks if the pass has 8 symbles
function passwordEvent() {
if ($password01.val().length > 8) {
eight = true;
$password01.next().hide();
submitButton();
} else {
eight = false;
$password01.next().show();
submitButton();
};
};
//Checks if the two passwards are the same
function passwordCheck() {
if ($password02.val() !== $password01.val()) {
samePass = false;
$password02.next().show();
submitButton();
} else {
samePass = true;
$password02.next().hide();
submitButton();
};
};
... which then works; http://jsfiddle.net/9qqnqLxm/