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
Related
I am trying to get a SideNav to open and close affter pressing a button. However, I can only get it to close. When I pass the sideNave() function to button.addEventListener("click", ... ) nothing happens. I would appriciate your help a lot! My code bellow:
const left = document.querySelector("left");
const right = document.querySelector("right");
const button = document.querySelector("button");
button.addEventListener("click", close);
const x = true;
function close() {
document.getElementById("left").style.width = "0";
document.getElementById("right").style.width = "100%";
x = false;
}
function open() {
document.getElementById("left").style.width = "15%";
document.getElementById("right").style.width = "85%";
x = true;
}
function sideNav() {
if (x = true) {
w3_close();
} else {
open();
}
}
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="webPage.css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/62ea397d3a.js" crossorigin="annonymous"></script>
</head>
<body>
<div class="header"></div>
<div id="left">
<button class="button">Click Me!</button>
</div>
<div id="right">
<p></p>
</div>
</body>
</html>
Click on the ☰ symbol to open the sidebar (overlays some of the page content). function w3_open () { document.getElementById("mySidebar").style.display = "block"; } function w3_close () {
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();
});
<div class="tools">TOOLS
<ul>
<li class="toolone">First
<div class="plugin">
<select>Option
<optios></options
</select>
</div>
</li>
<ul>
</div>
Jquery :
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
});
Hide show works perfect, but when I click on Inner Select option within li even it closes.
I tried event.stopPropagation();
Any help ?
try this:-
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
$('.toolone select').click(function(e){
e.stopPropagation();
})
});
Demo
Firstly there was error in your html. Updated your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="tools">TOOLS
<ul>
<li class="toolone">First
<div class="plugin">
<select>
<option>abc</option>
</select>
</div>
</li>
</ul>
</div>
</body>
</html>
Secondly, you must explicitly handle clicking of select to stop event propagation:
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
$('.toolone select').click(function (e) {
e.stopPropagation();
});
});
See the plunkr
Try this one:
$(document).ready(function () {
$('.toolone').click(function (e) {
if(e.target !== this) {
return;
}
$(this).find('.plugin').toggle(200);
});
});
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/
I am a newbie in jQuery and javascript, so this might seem as a trivial question. I want to use the DOM Outliner code found here in an html page that I have created.
My html page source is as follows
<!DOCTYPE html>
<html>
<head>
<h3>Dom Outlining</h3>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
myDomOutline.stop();
});
</script>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div class="first class">
<p> This is a division.</p>
</div>
</body>
</html>
However, this doesn't seem to select and highlight the element as required. Can someone tell me what's missing in my code?
Because you are stoping highlighting as soon as it starts
$(document).ready(function() {
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
//myDomOutline.stop();
});
Demo: Plunker
In ideal implementation there will be a start and stop buttons as I added in my demo.
You just need to remove myDomOutline.stop(); :)
$(document).ready(function() {
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
// myDomOutline.stop();
});
You were starting it and then stopping it almost immediately - resulting in nothing!
Check here http://jsfiddle.net/vJYya/1/
<html>
<head>
<h3>Dom Outlining</h3>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
<script>
$(function() {
var myDomOutline = DomOutline({
onClick: function (element) {
console.log('Clicked element:', element);
}
});
$('#start').click(function(){
myDomOutline.start();
});
$('#stop').click(function(){
myDomOutline.stop();
});
});
</script>
</head>
<body>
<input id="start" type="button" value="Start outline"/>
<input id="stop" type="button" value="Stop outline"/>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div class="first class">
<p> This is a division.</p>
</div>
</body>
</html>