Prototype Hover Content and Children - javascript

I am using:
Event.observe(window, 'load', function() {
$$('li').invoke('observe', 'mouseover', function(event) {
this.children[0].toggle();
});
$$('li').invoke('observe', 'mouseout', function(event) {
document.children[0].toggle();
});
});
<ul>
<li>
<div style="display:hidden;">Hidden Div</div>
<div>More content that isn't hidden</div>
</li>
</ul>
To display a hidden div within an element when that element is moused over. It is partially working, however my code looks like the following:
When I rollover the li it displays the hidden div, however if I rollover the second div it hides the comment again, even though this div is in the li. Why? I found this questions, but it doesn't seem to work either for this context.

No need to use prototype or javascript for this, use css
li.item:hover div.entry {
display:block
}
li.item div.entry {
display:none
}
you don:t use any css classes in your example code, but I would strongly recommend you do so for this case
<ul>
<li class="item">
<div class="entry">Hidden Div</div>
<div>More content that isn't hidden</div>
</li>
</ul>

Add a class to the div that you want to perform the toggle on. Then inside the event handler use this.select() to find children with that class name.
<ul>
<li>
<div class="hidden">Hidden Div</div>
<div>More content that isn't hidden</div>
</li>
</ul>
Event.observe(window, 'load', function() {
var lis = $$('li');
var toggleFunc = function(event) {
this.select('.hidden').toggle();
}
lis.observe('mouseover', toggleFunc);
lis.observe('mouseout', toggleFunc);
});

A quick solution would be to use this plugin which adds "mouseEnter" and "mouseLeave" functionality for non-IE browsers.

Related

Parent with nested item also triggers child item

I have this sortable item list using jQuery UI Sortable, which is also able to nest items.
Each of these items contains toggable content, it will slide down when clicking on an item.
However, when clicking on the parent item when nested, instead of only toggling the parent content it's also toggling the child's content.
I've been trying to figure it out in my Jquery script but haven't been able to figure it out. I reproduced my issue in this fiddle:
https://jsfiddle.net/es3hbdnm/33/
Also HTML:
<ol class="sortable panel-group">
<li class="panel-default">
<div class="toggle">Home</div>
<div class="panel-content">Hidden content</div>
</li>
<li class="panel-default">
<div class="toggle">About us</div>
<div class="panel-content">Hidden content</div>
</li>
<li class="panel-default">
<div class="toggle">Contact</div>
<div class="panel-content">Hidden content</div>
</li>
</ol>
My JS:
$(document).ready(function () {
$('.sortable').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div'
});
$(".panel-default").click(function ( event ) {
event.stopImmediatePropagation();
$(".panel-content").not($(this)).slideUp();
$(this).find(".panel-content").slideDown();
});
});
You should slideDown only the first '.panel-content' found.
$(".panel-default").click(function (event) {
event.preventDefault();
event.stopPropagation();
$(".panel-content").not($(this)).slideUp();
$(this).find(".panel-content:first:hidden").slideDown();
});
Note, .find() returns a list of descendants of each element in the current set of matched elements. So in case the parent item is clicked the list will also include the child item. Reducing the set of matched elements to the first in the set should do the trick.
$(this).find(".panel-content").first().slideDown();
EDIT: Besides this, my suggestion is to use the following to be able to slide up a previously slided down element. See also my updated fiddle. Note, the selector you have provided to .not does not match asthisis a ".panel-default" node rather than a ".panel-content" node.
$(".panel-content").not($(".panel-content:first", this)).slideUp();
jsFiddle

Toggle fade elements, fade out each on second click

I have this problem that I want to fade in the elements hidden within my li.
<li class="btn">One
<div class="hidden">Hidden One</div>
</li>
<li class="btn">Two
<div class="hidden">Hidden Two</div>
</li>
It works, but I want to be also able to hide either of the hidden elements when I click on it for the second time.
Please, see fiddle.
Any help would be highly appreciated!
You can do:
$('.btn').click(function () {
var hidden = $(this).find('.hidden');
$('.hidden').not(hidden).fadeOut();
$(this).find('.hidden').fadeToggle('fast');
});
Updated Fiddle
Just change the first line in your click handler to:
$('.hidden').not($(this).find('.hidden')).fadeOut();
jsFiddle example
$('.btn').click(function () {
$('.hidden').not($(this).find('.hidden')).fadeOut();
$(this).find('.hidden').fadeToggle('fast');
});

How do I toggle, (switch, alternate) an element between being visible and hidden using jQuery?

I'm trying to make it so that if you click on the "test header" it hides the test content then if you click "test header" it shows it again.
http://jsfiddle.net/ahaz86/4asqs/
Currently, my code will hide the test content. What I want to happen is for the test content to toggle between being visible and hidden.
HTML:
<div class="content_list_container">
<div class="content_list_title" align="left">test header</div>
<div class="content_list_menu_items">
<ul>
test
</ul>
</div>
</div>
jQuery:
$(document).ready(
function() {
$(".content_list_title").click(
function() {
$(this).toggleClass("selected");
$(this).next(".content_list_menu_items").hide();
}
);
}
);
Have tried using the .toggle() method and it does not seem to work on my site. Is there a way to do this using the show() and hide() methods even though it is not ideal?
You can toggle method instead of hide:
jQuery(this).next(".content_list_menu_items").toggle();

fadeOut not working

I am new to web design. I am making my resume now. I have navigation div like this:
<div id="nav" class="grid_12">
<div id="Home" class="grid_3">
<div class="button">
Home
</div>
</div>
<div id="Life" class="grid_3">
<div class="button">
Life
</div>
<img src="img/someimg.jpg">
</div>
<div id="Portfolio" class="grid_3">
<div class="button">
Portfolio
</div>
</div>
<div id="Contact" class="grid_3">
<div class="button">
Home
</div>
</div>
</div>
Then I have a script for the navigation:
<script type="text/javascript>
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
</script>
I want it so when someone holds the mouse over the button the image will appear under it. It is properly hiding the image, but fadeIn not working. I have no idea why it is not working.
.focus is bound to the "focus" event (I linked to a description of what it is rather than the event standard). This is most common when you tab to or click on text inputs, but it can apply to other elements as well.
The mouseenter (also mouseover, but the former is not triggered repeatedly when child elements are also hovered) event occurs when a mouse enters an element. The opposite is mouseleave (mouseout). http://api.jquery.com/mouseenter/
try putting your script inside a ready event of the document :
<script type="text/javascript>
$(document).ready(function(){
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
});
</script>
I believe you're using the 960gs, and one thing I have noticed is this: your four grid_3 divs are nested within your grid_12. The 960gs includes two classes called .alpha and .omega to fix the nested margins when a grid is inside a parent grid. You need to put the .alpha class on the first child div - which in this case is your <div id="#home"> and the .omega class on the last child div which is your <div id="Contact">. This will fix the margins you will have on the internal nested four grid_3's.

jQuery .bind() selector

I'm trying to bind a click event to an anchor and I can't figure out the right selector... Is bind() particularly picky with selectors?
Here's my code which does not work:
$(".ui-navbar").delegate("a.location-menu-btn", "click", function() {
navigateToPage("location.html", { });
});
The following code does work but causes the whole body to appear like it is being clicked on an Android smartphone (ugly yellow box around the anachor).
$("body").delegate("a.location-menu-btn", "click", function() {
navigateToPage("location.html", { });
});
This is the html:
<div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-search">Search</span></span></span>
</li>
<li class="ui-block-b">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-location">Location</span></span></span>
</li>
<li class="ui-block-c">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-settings">Settings</span></span></span>
</li>
</ul>
</div>
live is deprecated. Use on instead.
If you want to have a click event on the anchor elements in .ui-navbar and the HTML is static HTML that exists at page load time, then you can just use this:
$(document).ready(function() {
$(".ui-navbar a").click(function() {
navigateToPage("location.html", { });
});
});
That will make the <a> tags in that piece of your HTML clickable. But, those <a> tags have no content to them and thus no size so nobody will be able to click on them until you give them some content.
If your problem is something different than this, please explain.
If the content is added dynamically via script, then you can use .live() like this:
$(document).ready(function() {
$(".ui-navbar a").live("click", function() {
navigateToPage("location.html", { });
});
});

Categories