I am trying to modify the following script to show/hide the Tip only when the "?" is hovered on and not the entire "li" Block
The HTML:
<ul class="tips">
<li>
? Feature 1
<div class="tip">
<h4>Tip Title 1</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
<li>
? Feature 2
<div class="tip">
<h4>Tip Title 2</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
<li>
? Feature 3
<div class="tip">
<h4>Tip Title 3</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
</ul>
The JQuery script
$("ul.tips li").hover(function() {
$(this).find("div").stop()
.fadeIn()
.css("display","block")
}, function() {
$(this).find("div").stop()
.fadeOut()
});
The CSS:
.tips div {
display: none;
position: absolute;
bottom: 0;
width: 100%;
height;auto;
background: #e00;
left:0;
}
I have tried to modify the script like so
$("ul.tips li a").hover(function() {
so it targets the "a" tag but the it ends up not showing anything.
You need to end your lines of js:
$("ul.tips li a").hover(function() {
$(this).siblings("div.tip").stop()
.fadeIn()
.css("display","block"); // <-- gotta put the semi-colon
}, function() {
$(this).siblings("div.tip").stop()
.fadeOut(); //<-- here too
});
That seems unusual as it seems like it should work, but try:
$(".tooltip").hover(function() { ... });
You should also change the $(this).find("div")... to $(this).next()...
You need to make sure that you wrap your event handler in the in jQuery's document ready function:
$(document).ready(function () {
$("ul.tips li").hover(function() {
$(this).find("div").stop()
.fadeIn()
.css("display","block")
}, function() {
$(this).find("div").stop()
.fadeOut()
});
});
Your hover event won't bind to the html elements unless the html elements have been loaded into the DOM tree already. $(document).ready() delays running the JS included in the passed anonymous function until the rest of the html document is loaded and the DOM tree is ready.
More reading at: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
Related
I have setup a list of contact in list of categories...
http://jsfiddle.net/dalkill/ny7qeep6/2/
<div class='category_snap_to_target green'>
<div class='contact_draggable'>
blah blah1
</div>
<div class='contact_draggable'>
blah blah2
</div>
</div>
<div class='category_snap_to_target yellow'>
<div class='contact_draggable'>
blah blah3
</div>
<div class='contact_draggable '>
blah blah4
</div>
</div>
<div class='category_snap_to_target red'>
<div class='contact_draggable'>
blah blah5
</div>
<div class='contact_draggable'>
blah blah6
</div>
</div>
<div class='category_snap_to_target blue'>
</div>
<style>
.blue { background-color: blue }
.red { background-color: red }
.green { background-color: green }
.yellow { background-color: yellow }
</style>
<script>
$(function() {
$( '.contact_draggable' ).draggable();
$('.category_snap_to_target').droppable({
accept: '.contact_draggable',
drop: function(event, ui){
$(this).append($( ui.draggable ));
$( ui.draggable ).css('position', '');
}
});
});
</script>
user can contact and drop in another category... however after the first drag and contact div looses the ability to show show the helper...
it still drags and drops fine... but on second attempt to move same contact div it looses it's helper functionality . still drags and drops but no visual indication to user.
also i had to add $( ui.draggable ).css('position', ''); to make the "append" function work nicely by appending the contact div into the category div . without it, the contact div stays where you last leave it with mouse, and does not snap into place below the last contact in that category ???
You need the position: relative for the visual indication. Instead of setting position: '', you can set left: auto and top:auto.
$( ui.draggable ).css('left', 'auto');
$( ui.draggable ).css('top', 'auto');
Check out the Fiddle
I am trying to select only the outer container for the drop target with jQuery UI.
I am trying to drop in media-content but not in media-list-items.
The reason is that media-list-items is not the full width of it's parent and I only want to drop to the right side which is a different background color the full height.
HTML:
<div class="media-content clearfix ui-droppable on" style="">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="media-list-items clearfix">
<ul data-gallery_id="18" class="media-list ui-sortable" style="">
<li id="media_17"></li>
<li id="media_15"></li>
</ul>
</div>
</fieldset>
</form>
</div>
JS:
var $trash = $('.media-content:not(.media-list-items), .media-content');
$trash.droppable({
accept: '.media-list > li',
drop: function(event, ui) {
console.log('trashed');
}
});
I'm not sure you can achieve what you want without adding another element as your "trash" droppable. With some neat css you can make it look pretty much the same :)
html
<div class="media-content">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="trash"></div> <!-- added a trash element -->
<div class="media-list-items">
<ul class="media-list">
<li id="media_25"></li>
<li id="media_26"></li>
<li id="media_27"></li>
</ul>
</div>
</fieldset>
</form>
</div>
css
.media-content {
position: relative; /* makes it contain absolutely positioned descendants */
}
.media-content .trash {
position: absolute;
top: 0; bottom: 0; /* stretches to full height of .media-content */
right: 0;
width: 100px;
background:#f5f5f5;
}
js
$('.media-content .trash').droppable({
drop: function(event, ui) {
console.log('trashed');
}
});
Demo at: http://jsfiddle.net/KazeG/6/
I want to make the div - "small_box" in the first item of sortable list to be always not visible. I tried with jquery first() but that works only once and only for one and same element whenever it's dragged. How can i simple make it back to be visible when I dragg it into other than first place and then make invisible "small_box" for the item which jumps in the first place?
I put the live example here: http://jsfiddle.net/kriskasper/3knnn/
<ul id="sortable" class='connectedSortable'>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
</ul>
And here is jquery ui function:
$(function() {
$( "#sortable" ).sortable({
connectWith: ".connectedSortable",
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
opacity: 0.6,
revert: 70
});
});
Please help.
You should play with the sortable plugin events. The sortreceive event is fired when the connected element receives an item. My guess would be something like ...
$("#sortable").bind("sortreceive", function(event, ui) {
$(".connectedSortable .small_box").show();
$("#sortable .small_box").first().hide();
});
I'm toggling a class that hides and unhides a div within a list item, but I'm having problems applying a slideToggle to it.
Here is the HTML and CSS;
<style>
.collapsed .widget-content {
display:none !important;
}
</style>
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<a class="collapse" href"#">collapse</a>
<h3>The Title</h3>
</div>
<div class="widget-content">
<p>content here</p>
</div>
</li>
</ul>
Here is the jQuery to toggle the class of the li on click on the link with the class "collapse"
$(this).parents(settings.widgetSelector).toggleClass('collapsed');
How do I apply the slideToggle so that it only slides away the "widget-content" div whilst toggling the "collapsed" class on the li at the same time?
Thanks in advance for your advice.
you could try a callback when the toggle is complete:
$(this).parents(settings.widgetSelector).slideToggle('slow', function() {
$('#intro').toggleClass('collapsed');
});
something like that?
So I am pretty new to JQuery and just spent 5 hours getting this working. If anyone has a better approach please I would love to hear.
That is my basic question how can it be done cleaner, more streamline?
What I did was used the minitabs plugin and what the code below will do is toggle custom tabs back and forth. I needed a way to have the one tab blue and the other gray depending what tab I was on. What I hit against was tab1 would stay blue even when I clicked on tab2, just was funky until this fixed it. As you can see it's not the cleanest approach but it works. I am sure if you want to try this out the minitab plugin can be had here.
http://minitabs.googlecode.com/files/jquery.minitabs.js
JQuery:
$(document).ready(function(){
$("#tabs").minitabs('slow', 'fade');
$("#tab1").click(function()
{
var $this = $(this);
if( $this.is('.removed') )
{
$this.removeClass('removed');
$this.addClass('selected');
$('#tab2').removeClass('selected');
$("#tab2").addClass('removed');
} else {
$('#tab2').removeClass('selected');
}
return false;
});
$("#tab2").click(function()
{
var $this = $(this);
if( $this.is('.removed') )
{
$this.removeClass('removed');
$this.addClass('selected');
$("#tab1").removeClass('selected');
$("#tab1").addClass('removed');
} else {
$('#tab1').removeClass('selected');
}
return false;
});
});
Body:
<div id="tabs">
<ul>
<li>tab-l</li>
<li>tab-r</li>
</ul>
<div id="quick-links">
<ul>
<li>Look at me getting myself all in a frenzy!</li>
</ul>
</div>
<div id="newsletter-link">
Sometimes it's would be nice if they reported the fun news!
</div>
</div>
I looked at this briefly, and didn't see any problems with this less-complex setup which takes advantage of minitabs automatically applying the class "current" to the currently selected tab:
<head>
<style type="text/css">
.tabs a {
background: grey;
}
.tabs a.current {
background: blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").minitabs('slow', 'fade');
});
</script>
</head>
<body>
<div id="tabs">
<ul class="tabs">
<li>tab-l</li>
<li>tab-r</li>
</ul>
<div id="quick-links">
<ul>
<li>Look at me getting myself all in a frenzy!</li>
</ul>
</div>
<div id="newsletter-link">
Sometimes it's would be nice if they reported the fun news!
</div>
</div>
</body>
For me that handles the case you describe perfectly.