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.
Related
hi i would like to select the parent div of currently placed cursor in a contenteditable div.
the process is, there are multiple contenteditable div in a page. i'd like to select the div which the caret/ cursor is currently positioned. so that using jquery i could change the css.
following is my html code of the div:
<button id="changer">change color</button>
<div id="container">
<div class="section" contenteditable="true">
<p>this is my editable paragraph</p>
</div>
<div class="section" contenteditable="true">
<p>this is my editable paragraph 2</p>
</div>
</div>
following is my jquery code so far:-
$('#changer').click(function(){
document.activeElement.css({'background':'black'});
});
but this gives me the error :- Uncaught TypeError: undefined is not a function
edit:-
the process is when the user clicks a button a color palette lightbox will appear. on click of any of the color on the color palette. the jquery is going to select the currently focused contenteditable div. and change the css.
i want to know how to select the currently focused contenteditable div using jquery.
So the code below console logs the text inside the contenteditable div which is focused. if you write $(this) inside the event handler it will reference the currently div focused
$('[contenteditable="true"]').focus(function(){
console.log($(this).text()); // for example, do whatever you please here
// you said you want to find the parent div of the element focused
var $parent = $(this).parent();
// now $parent is a reference of the parent div of the focused element
});
The tricky thing is that when the user clicks the button, the contenteditable is not focused anymore. so let's make a variable where we store our last focused contenteditable div , and when the user clicks a button, the changes will be made on that very variable.
like so :
var lastFocused;
$('[contenteditable="true"]').focus(function(){
lastFocused = $(this);
});
$('#changer').on('click', function(){
console.log(lastFocused);
lastFocused.css('background-color', 'red');
})
see codepen : here
So I think what you are trapped is how to get the div[contenteditable] which was focused.
The idea is to store the item when it was trigger by a focus event.
$(function() {
var $focus_item = null;
$('[contenteditable]').focus(function() {
$focus_item = $(this);
});
$('#changer').click(function(){
$focus_item.css({'background':'black'});
});
});
DEMO
Below is an example of a simple working accordian.
HTML
<div class="Accordian">
<div class="Btn">BUTTON
<div class="Icn"><i class="Up"></i></div>
</div>
<div class="Content">CONTENT</div>
</div>
JQUERY
$(function ($) {
$('.Accordian').find('.Btn').click(function () {
var $content = $(this).siblings('.Content').slideToggle('fast');
$('.Content').not($content).slideUp('fast');
//How to toggle only child of clicked?
$('.Icn i').toggleClass('Up').toggleClass('Down');
});
});
The problem is simple. Class .Up/.Down will be css icons that toggle on click.
Currently my code toggles all classes named up/down.
QUESTION
How to target only the child class of the clicked element and apply appropriate class?
How I suspect it should work:
onclick
If accordian closed
- Apply class .Up to clicked element.
- Apply class .Down to all closed elements.
Else
- Vice versa
Find element .Icn i in clicked elements context.You need to use:
$('.Icn i').not($(this).find('.Icn i')).removeClass('Down').addClass('Up');
$(this).find('.Icn i').toggleClass('Up').toggleClass('Down');
Working Demo
I have a Div within a Div within a span like this:
<div id="container">
<a class="tooltips" href="#">XBOX
<span class="tooltip-container">
<div class="tooltip-item">Controller</div>
<div class="tooltip-item">Console
<div class="filter-item">In Stock</div>
<div class="filter-item">Pre-Order</div>
</div>
<div class="tooltip-item">Kinect</div>
</span>
</a>
<a class="tooltips" href="#">PS4
<span class="tooltip-container">
<div class="tooltip-item">Controller</div>
<div class="tooltip-item">Console</div>
</span>
</a>
</div>
I added a click function that shows or hides the div. When I click the items within my outer div I would like to expand another filter-item list within the inner div. In other words, when I click "XBOX" it will expand and if I click "Console" that will expand to show more items. How can I achieve this? jsfiddle example listed below.
jsfiddle.net example
Here:
Fiddle: http://jsfiddle.net/zNV8T/
The main changes are in the JS...
$(window).on('load',function(){
//click PS4 or XBOX
$('.tooltips').click(function(){
if ($(this).find('.tooltip-container').css('display') == 'none') {
//first deactivate any active tooltip
$('.tooltip-container').hide();
$('.tooltips').removeClass('clickedSortFilter');
//then activate the clicked tooltip
$(this).find('.tooltip-container').show();
$(this).addClass('clickedSortFilter');
} else {
//deactivate the clicked tooltip
$(this).find('.tooltip-container').hide();
$(this).removeClass('clickedSortFilter');
}
});
//expand tooltip-item if it contains filter-item
$('.tooltip-item').click(function(e){
e.stopPropagation();
if ($(this).children().length > 0) {
if ($(this).find('.filter-item').css('display') == 'none') {
//first deactivate any active tooltip-item
$('.tooltip-item').css('z-index','0');
$('.filter-item').hide();
//then activate the clicked tooltip-item
$(this).css('z-index','1');
$(this).find('.filter-item').show();
} else {
//deactivate the clicked tooltip-item
$(this).find('.filter-item').hide();
}
}
});
});
...although I did make a few changes in the CSS as well, adding position:relative and display:none in one or two places, and I removed z-index somewhere.
I think the comments in the code explain the general functionality pretty well, if you don't understand some details, just ask me in a comment and I will try to clarify (I fixed adding the clickedSortFilter class to the tooltips too btw).
UPDATE:
Here is an updated fiddle: http://jsfiddle.net/FAZLu/
The spans are changed to divs, and the alignment is fixed (the way I would do it, see the comments for other options).
I also cleaned up your CSS a whole lot.
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
I am facing a little issue with some jquery code. I have some divs (look bellow)
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
<div class="add" id="2">Follow</div>
<div class="added" id="2">Following</div>
I am trying when user clicks in each div with class add to fadeout the specific div and fade in the next div with class added.
Check my Code:
<script type="text/javascript">
$(document).ready(function($){
$('.add').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
});
</script>
ID's must be unique and it should not be a number. You have to set different ids for your divs. Additionally you have to hide the div with class .added initially to achieve your need.
Because fadeIn wont work on elements which are already visible.
Try,
<script type="text/javascript">
$(document).ready(function($){
$('.added').hide();
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeIn("slow");
});
});
</script>
DEMO
You need to use $(this) to hide current element and use next to hide .added, also use unique ids to make your html valid.
The next element is already visible you probably need fadeOut() to hide it.
Live Demo
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeOut("slow");
});
You can't have same id on multiple elements. Instead use a class
$('.add').on('click', function(){ $(this).fadeOut().next('.added').fadeIn(); });
Couple of points:
Ids should be unique. In case, you need same selector on group of elements, use class.
this reference contains the target on which event listener is added, So your this context contains the element with add class. jquery.find() tries to match the selector on the children. That's why your code is not working.
Just try this Jsbin Demo
HTML
<div class="wrapper">
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
</div>
JS
$('.wrapper').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
Idea: Bind event listener on parent.