I'm implementing a highlight feature, which highlights the current hovered div and i have html structure something like this:
<div> <!-- this is the parent -->
<div> content ... </div><!-- a child -->
<div> content ... </div><!-- another child-->
</div>
how it should work:
- if i hover over the parent, then it should highlight the parent element.
- if i hover over a child element, the parent element's highlighting should fade and it should only highlight the child element
i'm using jquerys' mouseenter and mouseleaves events for that, the code looks like this
(actually its a bit different because im working with gwt and the native javascript interface, but it works the same way):
$(element).mouseenter(function(event)
{
showHighlightContainer();
});
$(element).mouseleave(function(event)
{
hideHighlightContainer();
});
the problem is: when i hover over the parent element, the element is beeing highlighted and everything is fine.
but when i hover over a child element, the child elemend AND the parent element are highlighted.
am i using the wrong mouse events? how could i solve that?
You need to use mouseover and mouseout
$(element).mouseover(function (event) {
event.stopPropagation();
showHighlightContainer();
}).mouseout(function (event) {
event.stopPropagation();
hideHighlightContainer();
});
Demo: Fiddle
Related
I have a DOM element (say div), I am created a new element using javascript (specifically react), The new element is another div which is a sidebar.
The desired implementation is when the sidebar enters, the previous element shifts and the sidebar does not overlay
Do you mean something like this? Where the elements will move over based on the divs they are placed in?
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Working example at:http://jsfiddle.net/hThGb/1/
Credit to:How to toggle (hide / show) sidebar div using jQuery
I have a site in which there is a show more button which is attached to the following JQuery code:
jQuery(function($){
$("#experience a").bind("click touchstart", function() {
$("#experience p").css('display','block');
});
});
Some visual aid:
The button you see changes the display value of some p tags to display block.
So the p tags start as display:none; and are given style="display:block;"
As you can see the text extends and pushes the whole section down.
Occasionally this happens:
The only element I can see that is maybe an issue are some empty p tags but would this really cause text to just overgrow its' natural container.
I have the html file like this:
<div id = "aseaza-menu">
<div class ="menu" >Audio,Video </div><br>
<div class ="menu" >Electrocasnice</div><br>
<div class ="menu" >Ingrijire personala</div><br>
<div class ="menu" >PC</div><br>
<div class ="menu" >Tablete,Telefoane</div><br>
</div>
<div id="box">
<table id = "produse">
<tbody>
</tbody>
a div containing more div
and the JavaScript file like this:
$(function(){
$("#aseaza-menu").on('mouseover', function(){
$("#box").slideToggle(600);
});
$("#aseaza-menu").on('mouseout', function(){
$("#box").hide();
});
});
I want once the mouse hover the "aseaza-menu" div, I want it to slide toggle and stop no matter on witch of it's elements my mouse hovers over. But instead it does this: mouse hovers "aseaza-menu" div, "box" div slide Toggles but if I move the mouse over one of its elements like "Audio,Video" the process starts over again(the "box" div hides and slides again). Is there any method apply the slideToggle method on the div and it's content? Sorry for my english,Thanks!
Try this:
// Slidetoggle when hovering over parent and children
$('#aseaza-menu').on('mouseover', function(){
$('#box').slideToggle(600);
});
// When no longer hovering parent div, hide box again
$('#aseaza-menu').on('mouseout', function(){
$('#box').hide();
// But don't hide box when no longer hovering children
}).children().on('mouseout', function(e) {
return false;
});
if you don't want to hide the box when no longer hover children, replace the bottom 3 lines of code with
});
Your question is not very clearly formulated but this is my code based on what I could understand from it.
I have multiple programmatically created span elements designed to look and act like windows. Each element has a title bar running across the top. I am trying to get it so that the draggability is activated either by or only if the mouse is over the child title element using jQuery UI, is this possible?
It's possible. When the mouse hold the child element, make the parent element draggable, then make it not draggable again when mouse realizes it.
// The parent element
var $aa = $("#aa"),
// The child element
$bb = $("#bb");
// When the mouse is down
$bb.mousedown(function() {
// Drag the element
$aa.draggable();
});
// When the mouse realizes
$bb.mouseup(function() {
// Don't drag the element
$aa.draggable('destroy');
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js" integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE=" crossorigin="anonymous"></script>
<div id="aa">
---
<div id="bb">Push me</div>
</div>
This could improve with more events, anyway.
I made a div draggable using jQuery. However, there is some text in that box, and I would still like to be able to copy and paste the text, but when I make an item draggable well when I click on the box it starts to move the box?
Use the cancel option when making the element draggable.
Prevents dragging from starting on specified elements.
$('.selector').draggable({ cancel: '.text' });
It doesn't make sense to allow dragging AND selecting text on the same element. However, if you keep thinking it's necessary, two things come to my mind:
Solution 1:
You can add a "handler" that will be the only child receiving the mouse down/up events to drag the div. For instance:
<div id="draggable">
<div class="handler"></div>
<div class="text">This is a selectable text</div>
</div>
And in your JavaScript code:
var draggableDiv = $('#draggable');
draggableDiv.draggable({
handle: $('.text', draggableDiv)
});
Solution 2:
You can disable the draggable thing when a user try to select text:
<div id="draggable">
<div class="text">This is a text</div>
</div>
And in your JavaScript code:
var draggableDiv = $('#draggable').draggable();
$('.text', draggableDiv).mousedown(function(ev) {
draggableDiv.draggable('disable');
}).mouseup(function(ev) {
draggableDiv.draggable('enable');
});
When someone tries to select something in .text, the draggable process is disabled.
The first solution is the proper one.
(As talked by the other 2 answers, but if you need an practical example, here it is (if I understood correctly): )
jsfiddle: Draggable demo
The point is to:_
add an extra child <span> as an dragHandler, in the (parent) <span> that you want to drag.
<span class="commentNt" id="commentDraggable_123">~//? was it not "single bounded context" in choreography?<br/>
<span class="dragHandler">Drag</span></span>
for the parent <span>, use following code to register that child <span> for dragging
(dragging will now only be triggered in child <span>'s region).
$('#commentDraggable_123').draggable({ handle: '.dragHandler' });
now, only dragging the child <span>, the whole parent <span> will then be dragged along with.
As for:
Q: Can I do this without introducing another child <span> inside the parent <span>?
ie: Can I just drag the "blank area", then the whole parent <span> is dragged;
while I drag on the "text area", the text can be selected instead of being dragged?
A: idk, I hope there is a way.