before i reinvent the wheel, i wanted to know if anyone already has written a js/jquery library that allows user to select multiple div elements by left clicking and holding the hot keys (just like in windows)
Currently i have only this much
http://jsfiddle.net/abarik/nv9hnusu/3/
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by abarik</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.selected {
background-color:green;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.selectable').click(function (e) {
// $('.console').append('shiftKey'+e.shiftKey)
$('.console').append('ctrlKey'+e.ctrlKey)
if (e.ctrlKey) {
$(this).toggleClass('selected');
}
});
var ids = new Array();
$('#btn').click(function () {
var selected_activities = $('.selected');
var ids = new Array();
selected_activities.each(function () {
var id_str = $(this).attr("id");
var id_arr = id_str.split("_");
var selval = id_arr[1];
if (selval != 'undefined' && selval != '' && selval != null) {
ids.push(selval);
}
});
alert(ids);
});
});//]]>
</script>
</head>
<body>
<div class="left_column">
<div class="selectable selected" id="participant_1">----1----</div>
<div class="selectable" id="participant_3">----2----</div>
<div class="selectable selected" id="participant_5">----3----</div>
</div>
<div class="right_column">
<div class="selectable" id="participant_2">----4----</div>
<div class="selectable" id="participant_4">----5----</div>
<div class="selectable" id="participant_6">----6----</div>
</div>
<input type="button" id="btn" value="Get selected ids">
<div class="console">ctrlKeyfalsectrlKeyfalsectrlKeytruectrlKeytrue</div>
</body></html>
found an library that does exactly what i need to http://evulse.github.io/finderSelect/
Related
I want to create a to do list....the add and delete buttons work but i want to delete an element when i click on it...i tried with jquery but it doesnt work when i click on the javascript generated elements, but when i test on a html element that was initial on the page it works. What is the problem ? Here is the code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">
<div id="div1">
<h1>To do app</h1>
<input type="text" name="" value="" id="inp">
<button type="button" name="button" onclick="adauga()">Adauga</button>
<button type="button" name="button" onclick="sterge()">Sterge</button>
<hr></hr><br>
</div>
<h5 id="xxx">jquery</h5>
<script>
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
function sterge() {
var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);
}
$(document).ready(function(){
$("p").click(function(){
$("p").hide();
});
});
</script>
</body>
</html>
try this one:
$(document).ready(function(){
$("body").on("click","p", function(){
$("p").hide();
});
});
Snippet:
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
function sterge() {
var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);
}
$(document).ready(function(){
$("body").on("click","p", function(){
$(this).hide();
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">
<div id="div1">
<h1>To do app</h1>
<input type="text" name="" value="" id="inp">
<button type="button" name="button" onclick="adauga()">Adauga</button>
<button type="button" name="button" onclick="sterge()">Sterge</button>
<hr></hr><br>
</div>
<h5 id="xxx">jquery</h5>
</body>
</html>
The p element doesn't exist till you click the button and run the function adauga(), so you can't bind the click event to an element that doesn't exist yet, You have to bind the click event in your adauga() function as below:
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
$("p").click(function(){
$("p").hide();
});
}
or run the function when the page is ready:
$(document).ready(function(){
adauga();
$("body").on("click","p", function(){
$("p").hide();
});
});
attention: hide() function doesn't remove an element just change the display to none, if you want to remove the element from your dom use remove() function instead!!!
When your code runs the event-listeners of the p-elements, your elements doesn't exist, so they aren't evected by the registering of the event-listener. You have to add the event-listener after you created the p element. Try something like:
var para = document.createElement("p");
$("#div1").on('click', 'p' function(){
$("p").hide();
});
I am creating a chat service, everything works fine except for one little detail, the scrollbar. I'm using the jQuery Custom Scrollbar plugin.
It doesn't go to the bottom, sometimes it's does really well but sometimes it stuck in the half from the last message, I have been working in this detail for one week and I can't figure out what's the problem yet.
Here's my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>---</title>
<!-- Main CSS -->
<link rel="stylesheet" href="css/default.css">
<!-- Extra CSS -->
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<!-- All JS Scripts-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.elastic.source.js"></script>
<script type="text/javascript" src="js/jquery.xdomainrequest.min.js"></script>
<script type="text/javascript" src="js/flowtype.js"></script>
<script type="text/javascript" src="js/cpg_smartphones_proto.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Perfect Scrollbar
<link href="css/perfect-scrollbar.css" rel="stylesheet">
<script src="js/perfect-scrollbar.js"></script>-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!--[if !IE]><!--><script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
</head>
<body onload="initialize()">
<div class="row">
<div id="chat_intro">
<div class="chat_caller" onclick="goToChat()">
<h1>Enter</h1>
</div>
</div>
</div>
<div id="chat_box">
<div id="chat_top" hidden="hidden">
<div id="chat_header">
<h4>Personal support</h4>
<p>Find the best product for you.</p>
</div>
<div id="chat_avatar"></div>
</div>
<div id="chat_container">
<div id="history_div">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" type="text" onkeypress="chatHandler(event)">
</textarea>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#chat_box').hide();
$('#chat_footer').hide();
});
</script>
</script>-->
</body>
</html>
And now, the JS:
function goToChat() {
origin = BANNER_NAME + "_" + uid + metaData;
$("#chat_intro").hide();
$("#chat_box").show();
$("#chat_top").show();
$("#chat_container").show();
$("#chat_footer").show();
$("#history_div").mCustomScrollbar( {
theme : "dark-thick",
advanced : {
updateOnContentResize : true
}
});
document.getElementById('input_area').focus();
chat();
}
function chatHandler(event) {
// ENTER key
var key;
if (window.event) // IE8 and earlier
{
key = event.keyCode;
} else if (event.which) // IE9/Firefox/Chrome/Opera/Safari
{
key = event.which;
}
InputInterface.restartTimeout();
if (key == 13) {
chat();
$('#input_area').focus();
event.keyCode = 0;
}
}
function chat() {
// Build request
var chatText = "";
if (!initialized) {
chatText = "hi";
}
else {
chatText = input_area.value;
if(chatText.trim()=="")return;
var userAnswer = USER + input_area.value + TIME + getTimeStamp() + TIME_END + FONT_END;
history_mc.innerHTML += userAnswer;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
$("#history_div").mCustomScrollbar("scrollTo", "bottom");
});
$(input_area).val("");
if(getUrlParameter("isMobile") == "true") hideKeyboard();
}
$("#deleteThis").remove();
InputInterface.prepareSending(chatText);
setTimeout(function(){history_mc.innerHTML += TYPING_MESSAGE;
$("#history_div").mCustomScrollbar("scrollTo", "bottom");});
if(!initialized){
InputInterface.flush();
initialized = true;
}
}
//Start calling recursively getMsgId until the retries max out or succesfully get an Id
function getResponse(json) {
start = new Date().getTime();
processRetries = 0;
responseRetries = 0;
getMessageId(json);
}
function displayResponse(response) {
$("#deleteThis").remove();
history_mc.innerHTML += BM_INI+ response_number +BM_FIN + response + TIME + getTimeStamp() + TIME_END + FONT_END;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
if (DEBUG) console.log("#conv"+response_number);
$("#history_div").mCustomScrollbar("scrollTo", "#conv"+response_number);
response_number++;
},250);
document.getElementById('input_area').focus();
}
I hope you can shine me with you jedi powers, thank you so much.
Greetings.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/tau.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<body onload="clickButton();">
<div class="ui-page" id="page_webkitui">
<header class="ui-header">
<h2 class="ui-title">Webkit UI demos</h2>
</header>
<div class="sample">
<input type="time" id="input_webkitui_hiddentime"
style="visibility: hidden; width: 50px"></input>
<div>
Hidden time:
<button class="ui-btn" id="button_webkitui_hiddendateopener"
style="display: block" onclick="alertTime()">Open timepicker</button>
<span id="webkitui_hiddentime_value"></span>
</div>
<script>
function alertTime() {
alert("fff");
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.click();
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
}
function clickButton() {
$(function() {
document.getElementById('button_webkitui_hiddendateopener').click();
//$('#button_webkitui_hiddendateopener').click();
});
}
(function() {
var page = document.getElementById("page_webkitui");
page.addEventListener(
"pagecreate",
function(ev) {
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
});
}());
</script>
</div>
</div>
<script type="text/javascript" src="js/tau.js"></script>
</body>
</html>
I want to "force" the button_webkitui_hiddendateopener button to be clicked once my page is loaded... (a timepicker is shown normally as a new window).
I implement two functions clickButton() and alertTime(), as a result: only the ffff alert is shown but the new window of the timepicker didn't show up.
What's wrong?
Thanks in advance!
$(document).ready( function() {
$('#button_webkitui_hiddendateopener').trigger("click");
});
Use trigger http://api.jquery.com/trigger/
Live Demo
I have created a html webpage here:
http://diagrams.inse1d.info/wbt.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div id="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
<div id="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" id="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
Here is the jQuery code I wrote:
$(document).ready(function() {
$("h1").keypress(function(e) {
//get
wbtTitle = $('#wbtTitle').val();
// Write text after enter
if (e.which == 13) {
$("h1").text(wbtTitle);
}
});
$("span").keypress(function(e) {
//get
wbtNote = $('#wbtNote').val();
// Write note after enter
if (e.which == 13) {
$("span").text(wbtNote);
}
});
//Insert new WBT on button click
$("button").each(function() {
$(this).click(function() {
var wbtSet = $( "article" ).html();
$(wbtSet).insertAfter('section');
});
});
});
What I want to do is set the title and some note text using input boxes which works using jQuery. I then want to add a copy of the html into another article when the button is pressed without copying the inputs previously made with the possibility of setting new values when the article is cloned. The process should repeat over and over again.
Here is an image to help explain:
I am quite new to jQuery, I think you need to use a loop to fix this, I read that a .each() can be used http://api.jquery.com/jQuery.each/ but not quite sure.
Any help will be appreciated. Thanks.
I think I got your answer.
I changed the html a bit, because you duplicated some id's with your approach, that's not good. id's have to be unique on a page. I simply changed them to classes.
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
<div class="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" class="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
And of course the jQuery. I got rid of your first two functions because they had no purpose in this context.
$(document).ready(function() {
//Insert new WBT on button click
$("button").on('click', function() {
var title = $(this).prev().find('.wbtTitle').val();
var note = $(this).prev().find('.wbtNote').val();
var wbtSet = $(this).prev("section").html();
$(this).prev().find('.wbtTitle').replaceWith(title);
$(this).prev().find('.wbtNote').replaceWith(note);
$(this).prev("section").after('<section>' + wbtSet + '</section>');
});
});
Here is a working fiddel
Fixing the answer given by hitokun_s
window.onload = function() {
// Save a copy of the element wbtSet element on pageload
var wbtSet = $("article").clone();
$("button").each(function() {
$(this).click(function() {
// Append a new one to the holder of the wbSets
$(wbtSet).appendTo($('section'));
});
});
}
I think this is what you want to do.
window.onload = function() {
$("button").each(function() {
$(this).click(function() {
var wbtSet = $("article:first-child").clone();
wbtSet.find("input").val("");
$(wbtSet).appendTo($('section'));
});
});
}
I am making a jQuery carousel that is populated using JSON. I need it to stop at the end. I calculate the width of the list by multiplying the number of list items by the width of the list item, so new items can be added without changing the width in the CSS. Here is my code
slider.js
$(document).ready(function() {
var w = $("#carouselList").css("width");
var slider = $("#carouselList");
var leftProperty, newLeftProperty;
$("#rightButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty - 991 <= -w) {
newLeftProperty = 0;
}
else {
newLeftProperty = leftProperty - 304;
}
slider.animate({left: newLeftProperty}, 500);
});
$("#leftButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty < 0){
newLeftProperty = leftProperty + 304;
}
else {
newLeftProperty = 0;
}
slider.animate({left: newLeftProperty}, 500);
});
});
the HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="carousel">
<h2>Recommended for You</h2>
<div id="leftButton" class="buttonPanel"></div>
<div id="display">
<ul id="carouselList">
</ul>
</div><!--display-->
<div id="rightButton" class="buttonPanel"></div>
<div class="clear"></div>
</div><!--carousel-->
<script>
$.getJSON('jsonData.json', function(data){
var items=[];
$.each(data, function(key, val){
items.push(val);
$("#carouselList").append(items[2]);
var c =$("#carouselList li").size();
$("#carouselList").css("width", c*250);
});
});
</script>
</body>
</html>