Hiding and showing an element via visibility:hidden/visible - javascript

I got 2 div-boxes which should show/hide when clicking other 2 div-boxes. And I want the div's keep their space so it wouldn't ruin the DOM, so I guess .toggle() is out of question.
I tried this with no luck:
$('#red, #pink').click(function() {
// Based on the id property of the clicked element
// this selects #reddef or #pinkdef element
if($('#' + this.id + 'def').is(":visible")) {
$('#' + this.id + 'def').css('visibility','hidden');}
else if($('#' + this.id + 'def').is(":hidden")) {
$('#' + this.id + 'def').css('visibility','visible')}
});
So if I click #red then #reddef disappears while keeping the space. But when I click again nothing happens. I guess there's just a little thing I'm misssing atm, but can't figure out what.

According to the docs for the :hidden selector:
Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.
I would recommend instead to add/remove a class as this is easier to test like so:
if($('#' + this.id + 'def').hasClass('visHidden')) {
$('#' + this.id + 'def').removeClass('visHidden')
}
else {
$('#' + this.id + 'def').addClass('visHidden');
}
Where your CSS would be:
.visHidden {
visibility:hidden;
}

Working fiddle: http://jsfiddle.net/rYYPb/
$('#red, #pink').on('click', function() {
var $def = $('#' + this.id + 'def');
if ($def.css('visibility') === 'hidden') {
$def.css('visibility', 'visible')
}
else {
$def.css('visibility', 'hidden');
}
});
Like winterblood said, visibility: hidden is still "visible" by jQuery's standards. So instead you can check whether it actually has the hidden style.

Related

Bug fix for a script that applies CSS to the title attribute

The script below applies a CSS class to the html title attribute. The original page in which the script appears is here: How to change the style of Title attribute inside the anchor tag?
Works great, but has a minor bug. If the title attribute is empty (<input type="text" title="">), it still shows an empty popup box on screen.
Can anyone please help with fixing this? Something like "if title attribute has no value, do not apply css, do not show popup box. Thank you!
Script below:
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
This way:
$(document).on("mouseenter", "*[title]:not([title=''])" ...
One way is to return immediately if there is no title:
$(document).on("mouseenter", "*[title]", function (e) {
if (!$(this).attr('title')) return;
// rest of code
});
#c-smile's answer is cleaner though.

Creating a clickable div within a div

for some reason I cannot make this simple thing to work:
for (var i = 0; i < results.length; i++) {
var object = results[i];
$("#recipes_names").append("<div id =" + "recipe" + i + " >");
$("#recipes_names").append(object.get('recipe_title'));
console.log(object);
console.log(object.id + ' - ' + object.get('recipe_title'));
$("#recipe1").click(function(e) {
e.stopPropagation();
alert("inside click");
});
}
},
I create divs within the "recpie_names" div with the name "recipe0"/"recipe1" etc and I can't for the life of me make them clickable.
I'm sure there's a tiniest of mistakes that I make here but I just can't nail it down.
Can you help me out?
Add a class to the div which is appended and instead of adding event on base of id add just one event on class selector and write just on event:
$("#recipes_names").append("<div class='recipe' id =" + "recipe" + i + " >");
and:
$(document).on("click",".recipe",function(e) {
e.stopPropagation();
alert("inside click");
});
You have to delegates your event
$('#recipes_names').on('click', 'div[id^=recipe]', function(e){
e.stopPropagation();
alert("inside click");
});
It looks like you are generating these divs after the fact. So .click will not work.
Try:
$("#recipe1").on('click', function(e) {
e.stopPropagation();
alert("inside click");
});

Prevent jquery fadeIn many times

Need to prevent the emergence of tips several times (when not a single clue pointing at a link persists even if the cursor is not on a link).
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeOut();
});
});
To understand the problem to move the red square over several times, and then remove it in the direction
http://jsfiddle.net/8LnTC/1/
I apologize for my bad English
You need to stop any queued animations first...
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeOut();
});
});
Working jsfiddle example...
Incidentally, you shouldn't have multiple elements with the same ID. You need to rethink how you're going to relate the elements to each other - maybe use data attributes.
Here's a suggested alternative...
Working jsfiddle example...
HTML change
<a class="area_tooltip" data-associated-tooltip="item_1">show</a>
Javascript change
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeOut();
});
});
You put the tip's ID in the attribute data-associated-tooltip and then you can access that with $(this).data("associated-tooltip"). That will get rid of any ID conflicts which will most likely cause untold problems.

Button draggable and at the same time contenteditable

I have button that when clicked creates another button.
$('#button')
.click(function (eventClick, posX, posY) {
var htmlData = '<div id="btn' + $.count + '" class="draggable ui-widget-content ui-draggable" ' + 'data-page="' + $.page + '" ';
if (posX != null && posY != null) {
htmlData += 'style="left:' + Math.abs(posX - 439) + 'px; top:' + Math.abs(posY - 124) + 'px;""';
}
htmlData += '><button id="editable' + $.count + '" style="width:100%; height:100%">Button</button></div>';
$('.demo').append(htmlData);
$('.draggable').draggable({
containment: "#workspace",
scroll: false,
cancel: false,
})
.resizable({
containment: "#workspace"
})
.click(function () {
if ($(this).is('.ui-draggable-dragging')) {
return;
}
$(this).draggable("option", "disabled", true);
$(this).attr('contenteditable', 'true');
})
.blur(function () {
$(this).draggable('option', 'disabled', false);
$(this).attr('contenteditable', 'false');
});
$('a.delete').on('click', function (e) {
e.preventDefault();
btnID = $(this).closest('.draggable')[0].id;
//alert('Now deleting "'+objID+'"');
$('#' + btnID + '').remove();
});
$.count++;
});
This javascript fires when the create button is clicked, now this new button that is nested in a div has attributes draggable, resizable, deletable, and the content should supposedly be editable. Now my problem arise when I'm editing the text, the whole button tag is erased when I completely erase the content of it. I'm just left with I think a div tags. I can't seem to find what's the problem.
Looks to me like you are setting the contentEditable attribute on the div, because it has the 'draggable' class. This means everything inside the DIV is fair game to erase, including the button. If you want the text of the button to be editable, you should set the contentEditable attribute on the button instead.

Jquery events for closing and opening select drop down , and not on change

i want a neat solution to handle event for a drop down menu , so that when user opens the select menu , it alerts opened , and when he closes it , it alerts closed , neglecting wheather the selected value is changed or not.
<select id="dummy">
<option>dummy1</option>
<option>dummy2</option>
<option>dummy3</option>
</select>
what i want is something like
$("#dummy").on('open',function(){//do something})
$("#dummy").on('close',function(){//do something})
something like heapbox
http://www.bartos.me/heapbox/
and this solution is not acceptable : Run change event for select even when same option is reselected
the typical approach to extending the native functionality of a select box is to replace it with styleable markup and then tie the values of the new markup back into the origninal (now hidden) select element. (NOTE: I've not included any styles. This is a bare-bones example of using a select replacement).
var SelectBox = {
init: function () {
if ($('select').length > 0) {
this.generateStyledSelectbox('custom-select');
};
},
generateStyledSelectbox: function (cssClass) {
// Contained within .each to isolate all instances of <select>
$('select').each(function(index) {
var $source = $(this),
selected = $source.find("option[selected]"),
options = $source.find('option'),
selindex = index;
// Append styleable pseudo-select element to doc
$source.after('<div id="result-' + index + '" class="' + cssClass + '"></div>');
// Construct select list in pseudo select element
$('#result-' + index).append('<dl id="activeValue-' + index + '" class="dropdown"></dl>');
$('#activeValue-' + index).append('<dt>' + selected.text() + '<span class="value">' + selected.val() + '</span></dt>');
$('#activeValue-' + index).append('<dd><ul></ul></dd>');
// Assign select values to pseudo-select lis items
options.each(function () {
$('#activeValue-'+ index + ' dd ul').append('<li class="select-menu-item">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></li>');
});
$('.dropdown').each(function(index) {
$(this).find('dd ul li a').on('click', function(event) {
event.preventDefault();
var text = $(this).not('.value').html(),
$base = $('.custom-selectbox').eq(index);
$('.dropdown').eq(index).find('dt a').html(text);
$('.dropdown').eq(index).find('dd ul').hide();
$base.val($(this).find('span.value').html());
});
});
// prevent link actions in dropdown
$('.dropdown dt a').on('click', function (event) {
event.preventDefault();
});
// open/close
$(".dropdown").eq(index).find('dt a').on('click', function () {
$(".dropdown").eq(index).find('dd ul').toggle();
});
$(".dropdown").eq(index).find('dd ul li a').on('click', function () {
var text = $(this).html(),
newval = $(this).find('.value').html();
$(".dropdown").eq(index).find('dt a span').html(text);
$('select').eq(index).val(newval);
$(".dropdown").eq(index).find('dd ul').hide();
});
// Hide dropdown on outside click
$(document).on('click', function (e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) {
$(".dropdown").eq(index).find('dd ul').hide();
}
// remove dropdown-open targetable class
if (!$clicked.parents().hasClass("dropdown-open")) {
$clicked.parents().removeClass('dropdown-open');
}
});
// Hide native select
$source.css('display', 'none');
// assign initial (default) value
var initialval = $source.find('option').eq(0).html();
$('#activeValue-'+index+' dt a').html(initialval);
}); // END .each
}
};
SelectBox.init();
Here's a fiddle http://jsfiddle.net/P6ZCn/ (again, without styles)

Categories

Resources