so, I have a div with stuff like <h2>s and <img>s in them, and I want it so that if a user doubleclicks on one of them (for example they double click on anything inside the <h2></h2> tags it will turn it into a textbox with <h2>title</h2> inside it...
I just can't figure out how to send to the javascript function what was double clicked on?
try if you are famous with jQuery:
$('#yourDiv *').dblclick(function(event)){
alert(event.target.html());
}
Here is a very bare example for single click:
<script type="text/javascript">
function foo(elem) {
elem.innerHTML = '<input type="text" value="' + elem.innerHTML + '">';
}
</script>
<h1 onClick="foo(this)">Hello</h1>
<h1 onClick="foo(this)">My</h1>
<h1 onClick="foo(this)">Friend</h1>
test live: http://jsfiddle.net/MsTzY/
Related
What I'm trying to accomplish is make a div visible when hovering over another using the .hover() method, addClass and removeClass. But what happens is that when I hover over the added div, it reads that I'm no longer hovering over the div specified (or at least that's what I assume) in the .hover() method. This causes the div to flash on and off the screen repeatedly. How can I fix this so this problem doesn't happen? Here is the code:
JS
$(document).ready(function(){
$('.building').hover(
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).addClass('active');
},
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).removeClass('active');
}
);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function abc() {
document.getElementById("Div2").style.display="";
}
</script>
</head>
<body>
<div onmouseover="abc()">Div1</div>
<div id="Div2" style="display:none">Div2</div>
</body>
</html>
If the balloon overlaps the Div, it captures the event “onmouseover”.
If you don’t have to deal with it, you could use css rule to prevent any action
.balloon {
pointer-events: none;
}
This rule allows the event to pass through the balloon, as if it didn’t exist.
I've a problem and I hope that it's possible to explain.
I have a lot of short texts which come from a mysql-DB.
while ($foo = mysql_fetch_object($query)) {
$text = $foo -> column_text_db;
echo '<div class="atextdiv">' . $text . '</div>';
}
now i want to add an onclik-Event-Handler to the "atextdiv"-Container(s) who takes the content and put it on an input-field:
<form>
<input type="text" id="clickcontent" />
</form>
My problem: Each page has a different number of records in database. The final HTML-Code (after parsing the PHP-Code) could be:
<div id="wrapper">
<div class="atextdiv">Papa was a rolling stone</div>
<div class="atextdiv">Oh my god! They killed Kenny</div>
<div class="atextdiv">Foo Bar</div>
<!-- more content -->
</div>
<form>
<input type="text" id="clickcontent" />
</form>
So, how can I get the content of each "atextdiv"-Container after click on it?
Just like:
$(".atextdiv").click(function() {
console.log($(this).text());
});
Use a combination of this and the .text method inside the click handler.
You can bind click event on '.atextdiv' and in event fetch its value using .text()
$('#wrapper').on('click', '.atextdiv', funnction(){
$("#clickcontent").val($(this).text())
})
Just grab the innerHTML of the item that the click event is occurring on:
$('.atextdiv').click(function(e){
alert(e.currentTarget.innerHTML);
})
http://jsfiddle.net/9VE6A/8/
Ok Guys I need help in this case and please help if you can :(
I have following div created with text-type input
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input"/>
</form>
</div>
</div>
I have also created above .footer .mainBody
<div class="mainBody">
<script src="Scripts/main.js">
var h = document.getElementById('input').value;
document.write(h);
</script>
</div>
And I have included Javascript in it
I want to work it this way: when I input text in input tag to appear in .mainBody div.
And also do I need button to submit input or it can be done with key press for Ex. "Enter"?
Guys onkeyup="writeThis()" isn't working it just reloads page :(
To execute some events on keyevents, you need to write the onkeyup or onkeydown or any other key function in the element. And in that attribute you can add the function's name which would respond to the event. I will write my function's name as writethis() which will write the value to the div.
You then need to use this:
<input type="text" id="input" onkeyup="writethis()" />
And the function would be:
function writethis() { // the function
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h; // the input
}
This way, you will get the input written on a keypress!
You can also try and use some keyevents such as:
if(event.keyCode == 13) { // enter key event
/* key code for enter is 13
* do what so ever you want */
}
Ok, try this as your JS script content in html head section:
function writeOnBody() {
var inputText = document.getElementById('input').value;
var mainBodyEl = document.getElementById('mainBody');
mainBodyEl.innerHTML = inputText;
}
your HTML code:
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input" onkeyup="writeOnBody()" />
</form>
</div>
</div>
<div id='mainBody' class="mainBody"></div>
I hope it helps. JSFiddle sample: http://jsfiddle.net/amontellano/JAF89/
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h;
avoid using getElementsByClassName instead give you div a id and use getElementById..
rest is in my opinion the best solution..
and yes you can also you a button also all you have to do is call you function on onclick event like this
<button onclick="functionZ()">click me</button>
and define that functionZ in your java script
What we are doing here is..
Adding a button and a click event upon it..such that when that button will be clicked it will call a function for us..
Make sure to add your scripts in lasts part of your page as page loads from top to bottom so its good practice to add scripts just near to end of body
This code is meant to display items items as a list in the div above the button but, although the button and prompt work, there is no text displayed in the div. Help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Shopping List</title>
<style>
#button {
width:80px;
height:30px;
}
div.ex {
width:500;
height:500;
}
</style>
<script>
function a() {
var thing = prompt('Insert an item or press cancel');
if (thing != null && thing != undefined) {
document.getElementById('b') += thing;
}
else {
}
}
</script>
</head>
<body>
<div class='ex' style="color:#007AFC"></div>
<button onclick='a()' id='button'>Add Item</button>
</body>
</html>
First of all, you are using document.getElementById('b') however you don't have an HTML element with id="b". Secondly, you can't change the HTML content of an element using only the += operator. You need to modify the innerHTML attribute like so:
document.getElementById('b').innerHTML += thing;
Also, you need to have an HTML element with id="b" like so:
<div id="b" class='ex' style="color:#007AFC"></div>
However, consider using a more descriptive name for the id.
Can you really add text with "+="!? I would try it using append()
And what sushain97 says: add a id to the element (id="b"). But if you want to add more items one after the other you need to use append(), not innerHTML(), because innerHTML() will replace all of the content.
html :
<div class='ex' style="color:#007AFC" id="b"></div>
js:
document.getElementById('b').innerHTML+=thing;
I have a fiddle that shows it working. The relevant javascript is as follows:
document.getElementById('addButton').addEventListener("click", addListItem, false);
function addListItem(){
var thing=prompt('Insert an item or press cancel') + "<br />";
if(thing!=null&&thing!=undefined){
document.getElementById('listDiv').innerHTML += thing;
}
}
Side note: Try to stay away from inline styles and scripting. It makes it more difficult to maintain.
After looking for a few days this answer comes close but still wont fix my problem jQuery: How to assign a variable inside of .html
I'm trying to get the vaule of the textbox into the scr part of a frame. I understand that from the above link that javascript must pull out the variable or it treats it as text but after trying for a few days cant get it to work. The response lands in a div on the page
<script>
$(document).ready(function() {
$("#q").bind(
"webkitspeechchange",
function(evt) {
$('.response').html(
"<iframe width='625' height='250' border='0' src='/index.php?q=' + INPUT_HERE + ' /><br> voice search vaule:"+ $(this).val())
.fadeIn();
});
});
</script>
This works for me:
<script>
$(document).ready(function(){
$('#q').on( 'webkitspeechchange', function(e) {
$('#response').html('<iframe width="625" height="250" border="1" src="/index.php?q=' + $(this).val() + '" /><br> Voice search value: ' + $(this).val()).fadeIn();
});
});
</script>
<input type="text" name="q" id="q" x-webkit-speech="x-webkit-speech">
<div id="response"></div>
And here is the JS Fiddle
If you want to remove the surrounding div you can call $('#response').replaceWith(... instead of $('#response').html(..., but be aware that successive searches won't work anymore because #response has been removed from the DOM.