I saw a post earlier today and have been playing around with: http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html
What I'd like to be able to do is when a span gets clicked, to fire the click event on a different element in the page:
<div class='editable sampleItem pointer' id='qqq'>click me!!!</div>
Is that possible?
sure..
$('.myspan').click(function(){
$('.different-div').click();
})
$('.different-div').click(function(){alert('div click fired')});
Check like this,
HTML:
<div class='editable sampleItem pointer' id='qqq' onclick='clickHandler()'>click me!!!</div>
Javascript:
<script type="text/javascript">
function clickHandler() {
/* You code here */
}
</script>
Related
This is my code:
<div class="titfx">
<div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.clk1').on("click", function(event) {
//first code
var here = $(this).parent(".titfx").next(".here");
here.toggle();
//second code
if (!here.is(event.target) && here.has(event.target).length === 0) {
here.hide();
}
});
});
</script>
What the first part of javascript code does: When the word "CLICKME" is clicked, then the hidden div with text "info for here" shows.
What the second part of javascript code should do: When any part of the screen that is not class="here" is clicked on, then the text "info for here" should hide. The second part of my code is unable to achieve that. I'm not sure what I'm doing wrong. Please help me fix this issue.
you need to bind two event listeners to achieve this, one for the "clk1" element, and one for the whole page.
when fires document click event, just hide the text,
when fires ".clk1" click element, you need to stop propagation first and then write the toggle behaviour.
this is my solution
$(document).ready(function() {
$('.clk1').on("click", function(event) {
//first code
event.stopPropagation();
$(".here").toggle();
});
//second code
$(document).on("click", function(event){
$(".here").hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titfx">
<div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>
Here is a potential solution. The first click binding works for the toggle logic. However, for your second scenario, you said you want it to close them if they click any where on the page, other than the two areas. In that regard, you are concerned with the click events for the body, not just the two areas.
The second logic binds to the body, and checks to see if the clicked element is a child of the .clk1 or the .here. If it is not a child of either one, it will hide the .here.
The css was added to force the page size to be larger than just the html provided so you could actually click on something not them, :)
$(document).ready(function() {
$('.clk1').on("click", function(event) {
var here = $(this).parent(".titfx").next(".here");
here.toggle();
});
$(document.body).on('click', function(event){
var clickedElement = $(event.target);
if (!clickedElement.closest('.clk1').length
&& !clickedElement.closest('.here').length) {
$('.here').hide();
}
});
});
body {
min-width: 800px;
min-height: 600px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titfx">
<div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>
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 created a simple event script, which changes the image when clicked on the button. But unfortunately not changing, please help.
Error: I am not getting any error message also , just it was not changing the image.
<html>
<head>
<title>Events Practise</title>
<style>
#imtest{
width:100px;
height:150px;
}
</style>
</head>
<body>
<h4> This a practise page of Events and event handlers </h4>
<p> Hi this the practise page that changes the Html and Css contents in the page by Using the JavaScript </p>
<img id="imtest" src="marni.jpg" alt="Image corrupted">
<button onclick="eventtest()">Change Image</button>
<script>
function eventtest()
{
var imt = document.getElementById("imtest");
imt.onclick = change;
}
function change()
{
var imtchng = document.getElementById("imtest");
imtchng.src = "marni1.png";
}
</script>
</body>
I created a simple event script , which changes the image when clicked
on the button
No you've created a script which set's a click handler on the image when the button is clicked and after that when the image is changed it will change.
If you want to change the image directly by clicking just set the click handler on it.
In the imt.onclick = change line you are forgetting the parentheses after the change. Replace it with change()
<script>
function eventtest()
{
change();
}
function change()
{
var imtchng = document.getElementById("imtest");
imtchng.src = "marni1.png";
}
</script>
or
<button onclick="change()">Change Image</button>
This my js code:
i want to click first button to call a new class,it works but, every
button doing same work. when i click second button this also calling
a new class.please help me to solve this.
<script>
$(document).ready(function(){
$("button").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
this my html code:
<button>first</button><br>
<button>second</button><br>
<button>third</button><br>
<div class="new" style = "display: none;">hi.</div> <!--i need to call only this class-->
<div class="old">hello.</div>
You have to set an id to that particular button and then attach click event handler to that particular button using id. Here is the code.
<button id ='myBtn' >first</button><br>
$("#myBtn").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
You can use contains('first').
The thing is that your using button as selector, that will not understand which button is clicked actually.
I would recommend, To make jQuery understand you should provide any specific id to that element.
But if you want to do it based on the text inside a DIV, you can use contains('first').
$(document).ready(function(){
$("button:contains('first')").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>first</button><br>
<button>second</button><br>
<button>third</button><br>
<div class="new" style = "display: none;">hi.</div> <!--i need to call only this class-->
<div class="old">hello.</div>
$(document).ready(function() {
$("button").eq(0).click(function() { /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button>first</button>
<br>
<button>second</button>
<br>
<button>third</button>
<br>
<div class="new" style="display: none;">hi.</div>
<!--i need to call only this class-->
<div class="old">hello.
</div>
use .eq() to select which button you need the click
Note: eq() is index based which starts with 0
With $("Button") you are referring to the Button element and not a certain Button so every button will do the same action. You should give your Buttons an id and then call them based on their Id.
Like:
<button id="firstBtn">first</button><br>
<button id="secondBtn">second</button><br>
<button id="thirdbtn">third</button><br>
And then call them with the id selector # like so: $("#firstBtn").click()..
Remove the inline style and use a separate css class
$(document).ready(function() {
$("button").click(function() { /*button click event*/
$(".new").toggleClass('hide'); /*new class calling */
});
});
CSS
.hide {
display:none;
}
JSFIDDLE
If you want to click first button to call a new class , you can do by many ways .Here is checking with clicked text to get first button click
<script>
$(document).ready(function(){
$("button").click(function(){ /*button click event*/
if ($(this).text() == "first" ) $(".new").toggle(); /*new class calling */
});
});
</script>
set id is the better
<button id="first">first</button><br>
<button>second</button><br>
<button>third</button><br>
<script>
$(document).ready(function(){
$("#first").click(function(){ /*specific button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
give id's to the buttons, n call those accordingly like
$("#first").click(function(){
$(".new").toggle();
});
I would like to click on a div and that div would be moved and the div should follow my mouse.
What I have:
<div onclick="myFunction()" id="move"></div>
<script>
function myFunction(){
var div = document.getElementById('move');
document.addEventListener('mousemove', function (e){
div.style.left=e.pageX+"px";
div.style.top=e.pageY+"px";
});}
</script>
Another thing you need is you need to set "Position:absolute" for the style of div.
Add this css:
div{
position:absolute;
}
DEMO