jQuery opacity not working - jquery-ui

I am trying to change the opacity of the image after I click the red button
instead of adding the different image, and I should not see the red button on the new image
My JS code is below.
http://jsfiddle.net/mwPeb/7/
<script>
$(document).ready(function () {
$(".specialHoverOne").hover(function () {
// alert("i am here");
$(".ctaSpecialOne").css("visibility", "visible");
},
function () {
$(".ctaSpecialOne").css("visibility", "hidden");
});
$(".ctaSpecialOne").click(function (e) {
alert("clicked");
e.preventDefault();
//$(this).closest('.specialHoverOne').unbind("mouseenter").end().parent().siblings('a').children("img").attr("src", //"http://imgs.zinio.com/magimages/62898189/2012/416242497_200.jpg");
$(this).css({
'opacity': 50
});
});
});
</script>

I'd spend some quality time cleaning up the coding here, it's a bit difficult to find anything and the structure is a bit hard to follow.
If I'm understanding correctly, I believe this is the line you need to make the image above the red button change opacity when said red button is clicked.
$(this).parent().prev().prev().css({'opacity':.5});
More specifically;
$(".ctaSpecialOne").click(function (e) {
e.preventDefault();
$(this).parent().prev().prev().css({'opacity':.5});
});
http://jsfiddle.net/mwPeb/11/

You want the opacity of the red button to change on click? Or the image above it? For starters, to set the opacity, you would change your line:
$(this).css({'opacity':50});
to:
$(this).css({ opacity: 0.5 });
In your current fiddle, you'll see that sets the opacity of the red button. If you want it to set something else, you now have the syntax.
Update:
Instead of wiring up a bunch of .click() events that repeat the same code, might be best to create a function
function setThisOpacity(id) {
$("#" + id).css({ opacity: 0.5 });
//do other stuff if you need to
}
And then in your html markup, just add an onclick="setThisOpacity(someID);" where someID is an actual ID to the item you want to set the opacity.

Related

jQuery toggle slide element but not completely hide element

The following example is probably the easiest way to try and explain the effect I'm trying to achieve:
http://jsfiddle.net/qSscJ/2/
Code:
$(function() {
$('#handle').click(function() {
$('#box').toggle('slide', { direction: 'right' });
});
});
Click on the blue handle to make the entire red box collapse. How do I keep the blue handle visible after the box is collapsed (while keeping the handle anchored to the edge of the box)? I'm open to other jQuery UI APIs to achieve this effect.
You could do just animate the width directly so the element doesn't get marked as hidden at the end of the animation:
$(function() {
$('#handle').click(function() {
$('#box').animate({width: "0px"}, 1000);
});
});
But, it would be much better to change the design so that the blue tab was not contained within the box you're closing like here: http://jsfiddle.net/jfriend00/gKQrv/.
$(function() {
$('#handle').click(function() {
var box = $('#box');
var targetWidth = box.width() > 0 ? 0 : 150;
box.animate({width: targetWidth + "px"}, 1000);
});
});

jQuery UI Selectable Without Selection Box

Given this example here: http://jqueryui.com/selectable/#display-grid I would like to make a selection without the "selection box" that appears when you click 'n drag. Namely, when I click on number 5 and drag to number 6 and then to 10 I get this:
where in fact what i would like to is drag from 5 to 6 to 10 and have only them selected without 9.
I searched the docs and couldn't find that option, and my google skills didn't bring me any luck, and I thought this must have been already done it's just so happens I can't grasp it on my own or find an existing solution, so any help here is appreciated (not saying you should do the research for me, am just hoping someone dealt with this before so he can point me to the right direction).
It also could be I'm missing the point in trying to accomplish this with jquery UI but this was the first such example I found that fits (kind of) what I want to accomplish.
First, you might want to hide .ui-selectable-helper or change the CSS:
.ui-selectable-helper{display:none;}
Next, do something like this:
$(function() {
var _mousedown = false;
$('#selectable').selectable({
start: function(event,ui){
_mousedown=true;
},
stop: function(event,ui){
_mousedown=false;
$('.ui-selected').removeClass('ui-selected');
$('.selecting').addClass('ui-selected');
},
selecting: function(event,ui){
if($('.ui-selecting').length == 1)
$(ui.selecting).addClass('selecting');
$('.ui-selecting').removeClass('ui-selecting');
$('.selecting').addClass('ui-selecting');
},
unselecting: function(event,ui){
if($(ui.unselecting).hasClass('selecting'))
$(ui.unselecting).removeClass('selecting');
}
});
$('#selectable').on('mouseenter', '.ui-selectee', function(){
if(_mousedown)
$(this).addClass('selecting');
});
});
DEMO:
http://jsfiddle.net/dirtyd77/7UVNS/5/ (HELPER HIDDEN)
http://jsfiddle.net/dirtyd77/7UVNS/6/ (HELPER VISIBLE)
Let me know if you have any questions!
***UPDATE:***
.selectable() is not able to do what you are looking for. However, here is something I created. Hope it helps!
JAVASCRIPT:
$(function() {
var _mousedown = false,
_last=null;
$('#selectable li').mousedown(function(){
_mousedown = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$(this).addClass('ui-selecting');
}).mouseup(function(){
_mousedown=false;
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
$('#selectable li').removeAttr('unselectable style');
}).mouseenter(function(){
if(_mousedown){
if($(this).hasClass('ui-selecting'))
$(_last).removeClass('ui-selecting');
$(this).addClass('ui-selecting')
}
}).mouseleave(function(){
if(_mousedown){
_last = $(this)[0];
$(this).addClass('ui-selecting');
}
});
});
DEMO:
http://jsfiddle.net/dirtyd77/7UVNS/9/
***UPDATE #2:***
If you want to use this on a mobile device, I recommend changing up the format entirely to avoid any possible pitfalls. Here is how I would go about it:
JAVASCRIPT:
$(function() {
var _clicked = false;
$('#btn_select').click(function(){
_clicked = false;
$(this).hide();
$('#selectable li').removeAttr('unselectable style');
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
});
$('#selectable li').click(function(){
if(!_clicked){
_clicked = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$('#btn_select').show();
}
if($(this).hasClass('ui-selecting')){
$(this).removeClass('ui-selecting');
}else{
$(this).addClass('ui-selecting');
}
});
});
*NOTE: you might want a $('body').click() to act as the end_selection button.
DEMO:
http://jsfiddle.net/dirtyd77/7UVNS/13/
This doesn't answer the original question, but it does show how to access the helper div of the selectable widget.
var helper = $( "#selectable" ).selectable('widget').data().uiSelectable.helper;
helper.css( { border:'none' } );

jquery ui tooltip manual open /close

is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind them when calling .tooltip('open'), even though that should not initialize or set events imo, since if you try to run .tooltip('open') without initializing, it complains loudly about not being initialized.
jltwoo, can I suggest to use two different boolean switches to enable auto-open and auto-close? With this change your code will look like this:
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoShow: true,
autoHide: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
In this way, initializing the tooltip as:
$(someDOM).tooltipX({ autoHide:false });
it shows by itself when the mouse is over the element but you have to manually close it.
If you want to manually control both open and close actions, you can simply use:
$(someDOM).tooltipX({ autoShow:false, autoHide:false });
If you want to just unbind the events and woudn't like to make your own custom tooltip.
$("#some-id").tooltip(tooltip_settings)
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");
mouseout blocks the tooltop disappearing by moving the mouse cursor
focusout blocks the tooltop disappearing by keyboard navigation
The tooltip have a disable option. Well i used it and here is the code:
$('a').tooltip({
disabled: true
}).click(function(){
if($(this).tooltip('option', 'disabled'))
$(this).tooltip('option', {disabled: false}).tooltip('open');
else
$(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
});
Related to my other comment, I looked into the original code and achieved manual open/close by extending the widget and adding a autoHide option with version JQuery-UI v1.10.3. Basically I just remove the mouse listeners that were added in _create and the internal _open call.
Edit: Separated autoHide and autoShow as two separate flags as suggested by #MscG
Demo Here:
http://jsfiddle.net/BfSz3/
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoHide:true,
autoShow: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
Now when you initialize you can set the tooltip to manually show or hide by setting autoHide : false:
$(someDOM).tooltipX({ autoHide:false });
And just directly perform standard open/close calls in your code as needed elsewhere
$(someDOM).tooltipX("open"); // displays tooltip
$(someDOM).tooltipX("close"); // closes tooltip
A simple hotfix, until I have the time to do official pull request, this will have to do.
Some compilation from other SO questions.
Example
Show tooltip on hint click, and hide tooltip on elsevere click
$(document).on('click', '.hint', function(){ //init new tooltip on click
$(this).tooltip({
position: { my: 'left+15 center', at: 'center right' },
show: false,
hide: false
}).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
if(!$(event.target).hasClass('hint'))
$(".hint").each(function(){
var $element = $(this);
if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
$element.tooltip('destroy');
}
})
});
$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip
event.stopImmediatePropagation();
});

jQuery UI droppable: resizing element on hover not working

I have a jQuery UI droppable element which I would like to get bigger when a draggable is hovered over it. I have tried both using the hoverClass option and also binding to the drophover event.
Visually, both these methods work fine. However, once the draggable exits the original (smaller) boundary of the droppable, jQuery UI interprets this as a 'dropout', despite still being within the current (larger) boundary.
For example, js:
$("#dropable").droppable({
hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});
css:
#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }
In this case, when a draggable hovers over the droppable, the droppable visually increases in size to 200px. If at this point, the draggable is moved down by 20px, I would expect it to still be hovering over the droppable. Instead, jQuery UI fires the dropout event and the droppable reverts to being 10px high.
Anyone know how to get it to behave in the way I'd expect it to?
jsFiddle example: http://jsfiddle.net/kWFb9/
Had the same problem, I was able to solve it by using the following options:
$("#droppable").droppable({
hoverClass: 'hovering',
tolerance: 'pointer'
});
$('#draggable').draggable({
refreshPositions: true
});
Here's the working fiddle: http://jsfiddle.net/kWFb9/51/
See http://bugs.jqueryui.com/ticket/2970
So I made a couple tweaks to your fiddle
First I set the droppable tolerance to "touch" which will activate whenever any part of the draggable is touching it. This causes the hovering class to be applied.
Next I added an animation to resize your draggable element slightly. I wasn't sure if this was functionality you wanted or not so I put it in there anyways.
Lastly, I permanently apply the hovering class to the droppable element when the draggable element is dropped into the droppable zone. This way the droppable doesn't revert to that narrow height when there is an element in it
http://jsfiddle.net/kWFb9/2/
EDIT:
Better fiddle: http://jsfiddle.net/kWFb9/6/
I hope this helps :)
you could create a bigger (i.e. the size of #droppable.hovering) div without background and apply your droppable to it. Note that you didn't provide HTML but the new #drop_container should contain both divs.
JS
var dropped;
$("#droppable").droppable({
drop: function(event, ui) {
dropped = true;
}
});
$('#draggable').draggable({
start: function(event, ui) {
$("#droppable").addClass("hovering");
dropped = false;
},
stop: function(event, ui) {
if (!dropped) {
$("#droppable").removeClass("hovering");
}
}
});
CSS
#droppable { background: teal; height: 10px; }
#droppable.hovering, #drop_container { height: 200px; }
Or you could try another solution with .live() or .livequery() from this article
[EDIT] I've edited my code and here is a jsfiddle: http://jsfiddle.net/94Qyc/1/
I had to use a global var, I didn't find a better way to check wether the box was dropped. If anybody has an idea, that would be great.
There is an other (hum hum) not bad solution :
TL;DR: Fiddle
The problem is that the plugin stores dom element's size values when the widget is created (something like) :
//jquery.ui.dropable.js
$.widget("ui.droppable", {
...
_create: function() {
var proportions,
this.proportions = function() { return proportions; }
And the offset for widgets are initialized in $.ui.ddmanager.prepareOffsets();
So we only need to overwrite the proportions object.
This way allow to access to real plugin properties so we can write something like :
$("#droppable").droppable({
hoverClass: 'hovering',
over: function(ev, ui) {
var $widget = $(this).data('droppable');
$widget.proportions = {
width: $(this).width(),
height: $(this).height()
};
},
out: function(ev, ui) {
var $widget = $(this).data('droppable'); //ui-droppable for latests versions
$widget.proportions = {
width: $(this).width(),
height: $(this).height()
};
}
})

jQuery UI Resizable

I am looking into the jQuery UI Resizable method and I have to DIVs (one next to the other). I want to be able to resize one and change the other accordingly. One DIV gets bigger and the other DIV gets smaller...
$(document).ready(function () {
$("#right").resizable({
alsoResize: '#left',
});
$("#left").resizable({
alsoResize: '#right',
});
});
Thanks,
Max
You want to tie into the "resize" event (http://docs.jquery.com/UI/Resizable#event-resize)
$("#right").resizable({
resize: function(event, ui) {
// look at the size of the ui element being resized
// and resize the left accordinly
}
});
It looks okay, but try removing the comma at the end of your array, since you don't have any more array elements.
$(document).ready(function () {
$("#right").resizable({
alsoResize: '#left'
});
$("#left").resizable({
alsoResize: '#right'
});
});

Resources