I am currently working on a cookie clicker with an own custom console. It just should be a cookie clicker clone. A shop or anything else I haven't added yet.
The problem is, when you run the code there's an error called
expected expression, got '}' [More Information] index.html:2
(exactly copied from firefox)
The weird thing is that the gotten '}' is at the second used character, which is in the tag.
How can it get an '}' in the tag?
The code looks like this:
//init
var clicks = 0;
var button = document.getElementById("clickme");
var consoleMsgs = 0;
var myConsole = document.getElementById('console');
consoleLog("Button clicker initiated!");
function buttonClick() {
clicks++;
consoleLog('You have ' + clicks + ' clicks!');
button.value = 'Clicks: ' + clicks;
}
function consoleLog(t) {
consoleMsgs++
myConsole.children[1].innerHTML = '<p style="margin-bottom: 0;" id=' + consoleMsgs + '>' + t + '</p>' + myConsole.children[1].innerHTML;
}
input {
border-style: solid;
border-color: black;
border-width: thick;
border-radius: 3rem;
background: #232328;
margin-bottom: 0.2rem;
color: #d3dde6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Romgl</title>
<!-- Bootstrap Dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div id="content" style="font-size: 1.5rem; margin: 0.7ex">
<div>
<input id="clickme" value="Clicks: 0" style="display: block; width: 100%; height: 100px;" onclick="buttonClick();" type="submit">
<input value="clear console" style="margin-right: 10px;" onclick="myConsole.children[1].innerHTML = " ";=" " consolemsgs="0; " consolelog('console=" " cleared!');"="" type="submit">
<div id="console" style="font-size: 1.3rem;">
<h1>Console</h1>
<div class="consoleText">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please help me!
You really should avoid putting JS in your HTML inputs.
You could do something along these lines :
//init
var clicks = 0;
var button = document.getElementById("clickme");
var consoleMsgs = 0;
var myConsole = document.getElementById('console');
consoleLog("Button clicker initiated!");
document.getElementById("clickme").addEventListener('click', function() {
clicks++;
consoleLog('You have ' + clicks + ' clicks!');
button.value = 'Clicks: ' + clicks;
});
document.getElementById("clicktoclear").addEventListener('click', function(){
myConsole.children[1].innerHTML='';
consoleMsgs=0;
consoleLog('cleared!');
});
function consoleLog(t) {
consoleMsgs++
myConsole.children[1].innerHTML = '<p style="margin-bottom: 0;" id=' + consoleMsgs + '>' + t + '</p>' + myConsole.children[1].innerHTML;
}
input {
border-style: solid;
border-color: black;
border-width: thick;
border-radius: 3rem;
background: #232328;
margin-bottom: 0.2rem;
color: #d3dde6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Romgl</title>
<!-- Bootstrap Dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div id="content" style="font-size: 1.5rem; margin: 0.7ex">
<div>
<input id="clickme" value="Clicks: 0" style="display: block; width: 100%; height: 100px;" type="submit">
<input id="clicktoclear" value="clear console" style="margin-right: 10px;" type="submit">
<div id="console" style="font-size: 1.3rem;">
<h1>Console</h1>
<div class="consoleText">
</div>
</div>
</div>
</div>
<!-- Remove the extra </div> -->
</body>
</html>
I just moved the JS you had in your input to the actual JS script and corrected your code to clear your console.
Also, you had an extra in your HTML that I removed.
EDIT : I just removed the jQuery to switch to pure JS to match the original code.
Related
I want the border to increase, every time I press a button.
When the button is pressed, its 'value' is increased by 1. I want the value of the pixel-height of the border of the container to increase as well.
var i = 0;
var heightOfBorder = document.getElementById('test').style;
function buttonClick() {
document.getElementById('incrementValue').value = i++
heightOfBorder = "height: 500px";;
}
// document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test {
margin-top: 200px;
border: solid black;
width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Container size change</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container">
<div id="test" class="container" style="height: 50px;">
</div>
<button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>
<input id="incrementValue" type="text" name="button" value="0">
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
What am I doing wrong? I am learning to code. Also, side question, does anyone know of a good mentorship program?
Greetings!
You can get current height of the box using offsetHeight and on click add the input value to the box's style.height and remember to add the unit at the end - in your case 'px'.
Here is an example:
var i = 0;
var myEl = document.querySelector('#test');
var initialHeight = myEl.offsetHeight;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
myEl.style.height = initialHeight + i + 'px';
}
<script>
var i = 0;
var heightOfBorder = document.getElementById('test').style;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
let currHgt = heightOfBorder.getPropertyValue('height');
currHgt = +currHgt.slice(0, currHgt.length - 2);
heightOfBorder.setProperty('height', currHgt + i + 'px');
}
</script>
If you want to change height by i value.
just change var
heightOfBorder = document.getElementById('test').style;
to
var heightOfBorder = document.getElementById('test');
and
eightOfBorder = "height: 500px";
to
eightOfBorder.style = "height: 500px";
var i = 0;
var heightOfBorder = document.getElementById('test');
function buttonClick() {
document.getElementById('incrementValue').value = i++
heightOfBorder.style = "height: 500px";
}
// document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test {
margin-top: 200px;
border: solid black;
width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Container size change</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container">
<div id="test" class="container" style="height: 50px;">
</div>
<button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>
<input id="incrementValue" type="text" name="button" value="0">
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
I have similar code like this. Except for the fact that my JS file is external. The function myFunction() is called in the beginning of that file, like this:
document.addEventListener('DOMContentLoaded', function () {
myFunction()
})
But, it's not working - it's not showing the text from the second paragraph, when clicked on the word HERE from the first paragraph. I assume that maybe I should call the function somehow else. Any given ideas would be really helpful. Thanks.
P.S. Also, when clicked, the window should scroll to the newly opened paragraph.
function myFunction() {
var x = document.getElementById("myCollapsible2")
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
p{
background: #eee;
border: 1px solid #ccc;
margin: 20px 0;
padding: 30px;
}
.bs-example{
margin: 20px;
}
.link-color {
color: red;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">.</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myCollapsible" value="Toggle Button">
<div id="myCollapsible" class="collapse"><p>This is a simple example of expanding and collapsing individual element via data attribute. <br>Click on the <b>Toggle Button</b> button to see the effect. If you click <a onclick="myFunction()" class="link-color" href="#">here</a>, you should see the other paragraph. </p></div>
<div id="myCollapsible2" class="collapse"><p>This is a simple example</p></div>
</div>
</body>
</html>
Since you are using bootstrap with popper, your function is unnecessary, just set the values according to the documentation. To scroll to the element, use the scrollIntoView method. I had to wrap it around a setTimeout, because the default method was executing afterwards, so when I called scroll the element wasn't visible yet.
function scrollTo2() {
var el = document.getElementById('myCollapsible2');
window.setTimeout(() => el.scrollIntoView(), 0);
}
p {
background: #eee;
border: 1px solid #ccc;
margin: 20px 0;
padding: 30px;
}
.bs-example {
margin: 20px;
}
.link-color {
color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="bs-example">
<input type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#myCollapsible" value="Toggle Button">
<div id="myCollapsible" class="collapse show">
<p>This is a simple example of expanding and collapsing individual element
via data attribute.<br>Click on the <b>Toggle Button</b>
button to see the effect.
If you click <a onclick="scrollTo2()" data-toggle="collapse"
data-target="#myCollapsible2" class="link-color" href="#">here</a>,
you should see the other paragraph. </p>
<div id="myCollapsible2" class="collapse">
<p>This is a simple example</p>
</div>
</div>
</div>
I am using simple code to validate whether input box is empty or not and just showing check icon and warning icon accordingly.
You can see working PLUNKER here.
Problem: This set of code works fine for one set of Label:Input Box.
Imagine if we have number of input control throughout the website.
I am looking for a solution which is quite generalized. No need to repeat same set of HTML, CSS or JS code over and over again.
I know its hard to avoid some duplication but wanna write less repetitive code.
// Code goes here
$(document).ready(
function() {
$("#icon-id").hide();
$("#input-id").keyup(function() {
if ($("#input-id").val().length === 0) {
$("#input-id").addClass("redBorder");
$("#icon-id").addClass("icon-warning-sign");
$("#icon-id").removeClass("icon-check");
$("#icon-id").css("color", "red");
$("#icon-id").show();
} else {
$("#input-id").removeClass("redBorder");
$("#icon-id").removeClass("icon-warning-sign");
$("#icon-id").addClass("icon-check");
$("#icon-id").css("color", "green");
$("#icon-id").show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
}
.redBorder {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon"></i>
</div>
</html>
Note: Please don't refer any third party control.
You can use class selector instead id for the input. And use an data attribute to select the good icon.
live demo
You can see an example below :
function() {
$(".icon-class").hide();
$(".input-class").keyup(function() {
var idIcon = $(this).attr('data-id-icon');
if ($(this).val().length === 0) {
$(this).addClass("redBorder");
$("#" + idIcon).addClass("icon-warning-sign");
$("#" + idIcon).removeClass("icon-check");
$("#" + idIcon).css("color", "red");
$("#" + idIcon).show();
} else {
$(this).removeClass("redBorder");
$("#" + idIcon).removeClass("icon-warning-sign");
$("#" + idIcon).addClass("icon-check");
$("#" + idIcon).css("color", "green");
$("#" + idIcon).show();
}
});
}
<input data-id-icon="icon-id-1" type="text" class="my-input input-class" placeholder="Enter here">
<i id="icon-id-1" class="icon-warning-sign my-icon"></i>
<input data-id-icon="icon-id-2" type="text" class="my-input input-class" placeholder="Enter here">
<i id="icon-id-2" class="icon-warning-sign my-icon-2"></i>
Make it a jQuery plugin: https://jsfiddle.net/1nxtt0Lk/
I added the attribute data-validate to your <input />s so I can call the plugin on them using $('[data-validate']).
Code:
;( function( $, window, document, undefined ) {
"use strict";
var pluginName = "customValidator",
defaults = {
propertyName: "value"
};
function Plugin ( element, options ) {
this.element = element;
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
$.extend( Plugin.prototype, {
init: function() {
var $input = $(this.element);
var $icon = $input.parent().find('.my-icon');
$icon.hide();
$input.keyup(function() {
if ($input.val().length === 0) {
$input.addClass("redBorder");
$icon.addClass("icon-warning-sign");
$icon.removeClass("icon-check");
$icon.css("color", "red");
$icon.show();
console.log("empty");
} else {
$input.removeClass("redBorder");
$icon.removeClass("icon-warning-sign");
$icon.addClass("icon-check");
$icon.css("color", "green");
$icon.show();
console.log("Not empty");
}
});
},
} );
$.fn[ pluginName ] = function( options ) {
return this.each( function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" +
pluginName, new Plugin( this, options ) );
}
} );
};
} )( jQuery, window, document );
$('[data-validate]').customValidator();
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
}
.redBorder {
border: 1px solid red !important;
}
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input" placeholder="Enter here" data-validate>
<i id="icon-id" class="icon-warning-sign my-icon"></i>
</div>
<div class="form-group input-container">
<input id="input-id2" type="text" class="my-input" placeholder="Enter here" data-validate>
<i id="icon-id2" class="icon-warning-sign my-icon"></i>
</div>
PS: I used the plugin boilerplate as a base script: https://github.com/jquery-boilerplate/jquery-boilerplate ;
a commented version can be found here https://raw.githubusercontent.com/jquery-boilerplate/jquery-boilerplate/master/dist/jquery.boilerplate.js
Other answer suggest to use a class selector to iterate over each of them. Although that solution definitely would work, I suggest to get used to write jQuery plugins as in the long term it makes your project much more clean and easy to read.
// Code goes here
$(document).ready(
function() {
$(".icon-id").hide();
$(".input-id").keyup(function() {
if ($(this).val().length === 0) {
$(this).addClass("redBorder");
$(this.parentElement).find("#icon-id").addClass("icon-warning-sign");
$(this.parentElement).find("#icon-id").removeClass("icon-check");
$(this.parentElement).find("#icon-id").css("color", "red");
$(this.parentElement).find("#icon-id").show();
} else {
$(this).removeClass("redBorder");
$(this.parentElement).find("#icon-id").removeClass("icon-warning-sign");
$(this.parentElement).find("#icon-id").addClass("icon-check");
$(this.parentElement).find("#icon-id").css("color", "green");
$(this.parentElement).find("#icon-id").show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color:red;
top: 8px;
}
.redBorder{
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input input-id" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon icon-id"></i>
</div>
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input input-id" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon icon-id"></i>
</div>
</body>
</html>
You can try like this
You can use the classes my-input and my-icon instead of the ids.
Inside the keyup listener you can use $(this) to refer to my-input and $(this).next() to refer to my-icon as the icon is the adjacent sibling of the input.
Also chain your functions like this for brevity:
$(this).next().removeClass("icon-warning-sign")
.addClass("icon-check")
.css("color", "green")
.show();
See demo below:
// Code goes here
$(document).ready(function() {
$(".my-icon").hide();
$(".my-input").keyup(function() {
if ($(this).val().length === 0) {
$(this).addClass("redBorder");
$(this).next().addClass("icon-warning-sign")
.removeClass("icon-check")
.css("color", "red")
.show();
} else {
$(this).removeClass("redBorder");
$(this).next().removeClass("icon-warning-sign")
.addClass("icon-check")
.css("color", "green")
.show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
}
.redBorder {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below
</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon"></i>
</div>
</html>
$(document).ready(
function() {
$(".my-input").keyup(function() {
var $input = $(this).parent().find('input');
var $icon = $(this).parent().find('i');
if ($(this).val().length === 0) {
$input.addClass("redBorder");
$icon.addClass("icon-warning-sign").removeClass("icon-check").css("color", "red").show();
} else {
$input.removeClass("redBorder");
$icon.removeClass("icon-warning-sign").addClass("icon-check").css("color", "green").show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
display: none;
}
.redBorder {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below
</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input type="text" class="my-input" placeholder="Enter here">
<i class="icon-warning-sign my-icon"></i>
</div>
<div class="form-group input-container">
<input type="text" class="my-input" placeholder="Enter here">
<i class="icon-warning-sign my-icon"></i>
</div>
</html>
I have created a web app. I have tried my level best to trace out why does the div named more gets hidden when the an item is searched(you can see my efforts from the comments and alerts) but I was unable to trace it. I will be thankful if anyone can guide me. Thanks
<!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" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/favicon.png" />
<script type="text/javascript">
var nexturl ="";
var lastid ="";
var param;
<!--Trace more-->
function myFunction() {
param = $('#search').val();
//alert("I am an alert box!");
if (param != "") {
$("#status").show();
//alert("Show ");
var u = 'https://graph.facebook.com/search/?callback=&limit=5&q='+param;
$("#data").empty(); //empty the data div
//alert("Wait for 5 sec?");
setTimeout(function(){
getResults(u)},
200);
//getResults(u);
//alert("When myFunction runs show more line 20");
$("#more").show();
}
$("#more").click(function () {
$("#status").show();
//alert("Show ");
$("#more").hide();
pageTracker._trackPageview('/?q=/more');
var u = nexturl;
getResults(u);
});
}
</script>
<title>Facebook Status Search - Search Facebook Status in Real Time</title>
<meta name="description" content="Facebook status search, search status facebook, facebook status real time, Fahad Uddin Facebook status search, Facebook update search">
<meta name="distribution" content="global">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cuteTime.min.js"></script>
<script type="text/javascript" src="ofs.js"></script>
<script type="text/javascript" src="ga.js"></script>
<link rel="stylesheet" href="font/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body style="margin:0px;padding:0px;">
<div id="container">
<div id="header" style="height:39px; background-color:#3B5998; margin-bottom: 10px; ">
<div id="logo" style="display:inline;">
<h1 style="display:inline; font-family: 'klavika_boldbold_tf';color: #FFFFFF;padding-left:50px;padding-left: 50px;font-size:30px;" ><a style="color:#fff;" href="http://www.fbstatussearch.com">facebook status search</a></h1>
</div>
<div style="margin-bottom:10px;float:right;">
<form action="" method="get" id="searchform" onsubmit="return false;">
<input name="q" type="text" id="search" onClick="this.select();" size="32" maxlength="128" class="txt" style="padding: 0 5px;" >
<input type="button" id="hit" value="Search" onclick="myFunction();return false" class="btn">
</form>
</div>
</div>
<div id="data_container">
<div id="data">
<div id="status_container">
<div id="status"><img src="loader.gif" alt="loading facebook status search"/></div>
</div>
</div>
<div id="more" style="text-align:center;">More Posts <img src="DownTriangleIcon_8x8.png" alt="more status" /></div>
</div>
<div id="sidebar" style="float:right;">
<div style=" background-color: #fcf7da;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>Share it with the World</h4>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fe772f550658645"></script>
<!-- AddThis Button END -->
</div>
<div style=" background-color: #FFEFC6;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>How To Use</h4>
<p>Write down the tag to be searched in the top search area. For example,type in,<br>
<strong>Yahoo</strong><br>
and you will get the latest relevant Facebook updates of <strong>all the people around the world</strong> that have used the word <strong>"Yahoo"</strong>.</p>
</div>
<!-- <div style=" background-color: #FFE1C0;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>Why Use it?</h4>
<p>Here is why you would <em>love it</em>.</p>
</div>
-->
<div style=" background-color: #EEEEEE;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;" >
<h4>Copyright</h4>
<p>Copyright 2013. All rights reserved. We are not linked with Facebook.<br>
Created by Fahad Uddin.
</p>
</div>
</div> <!--Sidebar Ends-->
<div id="adverise" width="336px;padding:0 auto; float:left;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8542523573222680";
/* FbStatusSearch1 */
google_ad_slot = "8229888765";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="footer">
<p style="font-size:12px;">Copyrights 2013.Created by Fahad Uddin. All Rights Reserved.</p>
</div> <!--Footer Ends-->
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16080447-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<script type="text/javascript">
$(document).ready(function () {
$("#search").keyup(function(e){
$("#status").empty();
/*
var keyCode = e.keyCode || e.which;
if(keyCode == 13) {*/
myFunction();
//}
});
//alert("On Page load hide more Line 151 ");
$("#status").hide();
//$("#more").hide();
});
</script>
</body></html>
Here is the JS,
function getResults(u) {
//$("#status").show();
$("#data").empty(); // print that we are in
$.ajax({
dataType: "jsonp",
url: u,
success: function(res) { // take an object res
$("#data").empty();
$("#status").show(); // show status
//$("#more").show();
if (res.data.length) { // check length of res
// print if >0
nexturl = res.paging.next; // calculate next url
$.each(res.data, function(i,item){
if (item.id != lastid) {
lastid = item.id;
var html ="<div class=\"post\">";
html += "<div class=\"message\">"+item.from.name+" ";
if (item.message) {
html += item.message+"<\/div>";
} else {
html += "<\/div>";
}
if (item.picture) {
html += "<div class=\"image\"><img src=\""+item.picture+"\"></div>";
} else {
html += "<div class=\"image\"><\/div>";
};
if (item.link) {
html += "<div class=\"link\">"+item.name+"</div>";
if (item.caption) {
html += "<div class=\"caption\">"+item.caption+"</div>";
};
if (item.description) {
html += "<div class=\"description\">"+item.description+"</div>";
};
};
html += "<div class=\"meta\">";
if (item.icon) {
html += "<span class=\"icon\"><img src=\""+item.icon+"\"></span> ";
};
var t = item.created_time;
var time = t.substring(0,19)+"\+00:00";
html += "<span class=\"time\">"+$.cuteTime({},time)+"<\/span> ";
html += " <\/div>";
html +="</div>";
$("#data").append(html) ;
}
});
$("#more").appendTo("#data");
$("#more").show();
$("#status").appendTo("#data");
} else {
$("#data").append("<h3 class=\"none\">No entries found. Please try another search.</h3>");
};
}
});
}
Your problem is:
$("#more").appendTo("#data");
At first more sitting in data_container, then you move it to the data by this line : $("#more").appendTo("#data"); then when he comes again to success it deletes more together with data by this line: $("#data").empty(); and when you want to do again $("#more").appendTo("#data"); is not found.
I think you should change to:
$("#more").appendTo("#data_container");
Or save more before you do $("#data").empty(); in variable and then append the variable to data.
I cannot seem to make my javascript .click() method work with my dynamically created divs. In this code I have divs created each under the class name "class1" but my click method does not seem to detect their existence. Here is my code:
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
}
// window.onload = populate;
$(function () {
$("container2").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<div id="myBox">Hello World!</div>
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
#Html.DropDownList("centres")
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
And here is what it returns (taken from google chrome):
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Description of your web page goes here." />
<meta name="keywords" content="Keywords for you web page go here. Each keyword or group of keyword phrases are separated by a comma. Keep this list short and relevant to the content and title of this specific page." />
<title>OneEighty Asset Manager
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<div id="logo">
<p></p>
</div>
</div>
<!-- end #header -->
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
<!-- end #menu -->
<div id="wrapper">
<div class="btm">
<div id="page">
<h1>
<img src="../../Content/Images/1Eighty.png" alt="" style="height: 100px; width: 750px;" /></h1>
<div id="content">
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
}
// window.onload = populate;
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#container2").on("click", ".class1", function () {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
<select id="centres" name="centres"><option>Southdale</option>
<option>Sasolburg</option>
<option>Sandton City</option>
<option>Greenstone</option>
<option>Morningside</option>
<option>Easgate</option>
<option>Bedfordview</option>
<option>Fourways</option>
<option>Linksfield Terrace</option>
<option>Carlton Centre</option>
<option>testcentre1</option>
<option>testcentre2</option>
<option>testcentre3</option>
</select>
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
</div>
<!-- end #content -->
<div style="clear: both;">
</div>
</div>
<!-- end #page -->
</div>
</div>
<div id="footer">
<p>
Copyright (c) 2009 1eightyintra.com. All rights reserved.
</p>
</div>
<!-- end #footer -->
</body>
</html>
Because the element doesn't exist in the DOM on page load, you need to use an event delegate, such as on:
$(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
Or for pre-1.7 jQuery, use delegate:
$(function () {
$("body").delegate(".class1", "click", function () {
alert("The div was clicked.");
});
});
click only binds handlers to elements that were present in the DOM when you called it.
Instead, use the jQuery on method:
$(document).ready(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
You will need to re-apply the click handler to the newly created divs.