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
Related
I have two div and I want to open these two div in new tab by using one click.
<div id="google">This is Google.</div>
<div id="youtube">This is YouTube.</div>
Something like this should do that
$('a').on('click', function(e) {
e.preventDefault();
$('a').each(function() {
window.open(this.href, '_blank');
});
});
Here's a demonstration using a button
Add 'target=_blank' to in <a> tag .
This is Google.</div>
This is YouTube.</div>
Use javascript for both
<script>
$('#googel,#youtube').click(function()
{
// your commands...
})
</script>
Without javascript, it's not possible to open two links in two different tabs on one click. So my suggestion is to wrap those divs in a parent div and do some javascript.
var wrapper = document.getElementById('wrapper');
wrapper.onclick = function(){
window.open('http://google.com', '_blank');
window.open('http://youtube.com', '_blank');
};
#wrapper{
cursor: pointer;
}
#wrapper:hover{
background-color: #0ff;
}
<div id="wrapper">
<div id="google">This is Google.</div>
<div id="youtube">This is YouTube.</div>
</div>
As you can try this:
$("#google, #youtube").click("Do your work");
For more:
Reference-1 & Reference-2
I have the following script in my page to close out a dropdown submenu when the close button is clicked:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".closebutton").click(function() {
clearTimeout();
var c = $(this).closest("li");
c.find(".dropdown").css("left", "-9999px")
});
});
</script>
Once the "close button" is pressed, the dropdown no longer appears again when I hover over the parent li since the css has been changed to "left: -9999px". What script should I add that returns the css to "left: 0px;" again when I hover once more on the parent li without reloading the page?
Thanks!
This finds the closest li to the close button, and when its hovered finds the .dropdown element and sets the .dropdown to left: 0.
$('.closebutton').closest('li').hover(function() {
$(this).find('.dropdown').css('left', '0px');
});
You could use the $.mouseover() event and change the left property back to 0px. It would look something like this:
'<script type="text/javascript">
$(function() {
$(".closebutton").mouseover(function() {
var d = $(this).closest("li");
d.find(".dropdown").css("left", "0px");
});
});
</script>'
Hope that helps!
Try using the .show() and .hide() events in jQuery rather than changing the css and the .hover() to execute the .show().
c.find(".dropdown").hide();
I have a number of parent divs (.parent_div), which each contain a child div (.hotqcontent) where I output data from my database using a loop.
The following is my current markup:
<div class="content">
<div class="parent_div">
<div class="hotqcontent">
content of first div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of second div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of third div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of fourth div goes here...
</div>
<hr>
</div>
</div>
What I would like to achieve is when a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.
To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!
<script>
$(document).ready(function() {
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$('.hotqcontent').toggle();
});
});
});
</script>
How can I modify or replace my existing code to achieve the desired output?
If you want pure CSS than you can do it like this....
In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.
.hotqcontent {
display: none;
/* I assume you'll need display: none; on initialization */
}
.parent_div:hover .hotqcontent {
/* This selector will apply styles to hotqcontent when parent_div will be hovered */
display: block;
/* Other styles goes here */
}
Demo
Try this
$(document).ready(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
Or
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
You can use css for this,
.parent_div:hover .hotqcontent {display:block;}
This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):
.parent_div {
height: 50px;
background-color:#ff0000;
margin-top: 10px;
}
.parent_div .hotqcontent {
display: none;
}
.parent_div:hover .hotqcontent {
display:block;
}
This will ensure that your site still functions in the same way if users have Javascript disabled.
Demonstration:
http://jsfiddle.net/jezzipin/LDchj/
With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.
$('.hotqcontent', this).toggle();
$(document).ready(function(){
$('.parent_div').on('mouseover',function(){
$(this).children('.hotqcontent').show();
}).on('mouseout',function(){
$(this).children('.hotqcontent').hide();
});;
});
JSFIDDLE
you don't need document.ready function inside document.ready..
try this
$(function() { //<--this is shorthand for document.ready
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
and yes your code will toggle all div with class hotqcontent..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div
updated
you can use on delegated event for dynamically generated elements
$(function() { //<--this is shorthand for document.ready
$('.content').on('mouseenter','.parent_div',function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
you can try this:
jQuery(document).ready(function() {
jQuery("div.hotqcontent").css('display','none');
jQuery("div.parent_div").each(function(){
jQuery(this).hover(function(){
jQuery(this).children("div.hotqcontent").show(200);
}, function(){
jQuery(this).children("div.hotqcontent").hide(200);
});
});
});
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>
I'm trying to write a "blinds" function that would close a DIV in a display:none mode. The unseen DIV is inside a wider DIV, containing the blind trigger.
This:
$(document).ready(function () {
$("#toggle_blind").click(function () {
$(this).toggle("fast");
});
});
Well, this blinds the button. How can I add a DIV to $this? Something like:
<div id="blind" class="wider_div">
<h3 id="closeButton">Close</h3>
<div style="display:none;" id="closeThis">
<p>some text</p>
</div>
</div>
How do I make the Close Button on H3 to close/open the CloseButton DIV on each click?
The div is the next sibling of the h3 so you can use .next()
E.g
$('#closeButton').click( function(){
$(this).next().toggle();
});
Reference the div directly, you may put something else in between it and the h3.
$(document).ready(function()
{
$("#closeButton").click(function()
{
$("#closeThis").toggle("fast");
});
});