Writing JQuery If Statement - javascript

I am trying to write a JQuery If Statement.. What I am trying to achieve is basically to highlight the appropriate link (a) when the certain div (infotab) is clicked. They are all hidden as you can see, but when clicked, become visible in a nice fade. I want to highlight the item that was clicked. (Change the background color to whatever I want, such as red in the code below.)
The code I have below works, but incorrectly. It highlights all of the a's in that div. I just want the one highlighted that was clicked. Thanks for your help you guys are great.
$(document).ready(function () {
$('#infotab_two_s, #infotab_three_s, #infotab_four_s, #infotab_five_s').hide();
});
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$("subnav_holster li a").css({
"color": "red"
});
});
});

Grab the li that was clicked and access that element's a:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
var clicked = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
clicked.find('a').css({
"color": "red"
});
});
});

You should cache this and then highlight it:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s',
$this = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$('.subnav_holster li a').css({
"background-color": "white" // reset all to default color
});
$this.find('a').css({
"background-color": "red" // set highlight to this element only
});
});
});

Related

jQuery: prevent multiple firing fadeOut or any animation

I want to click on Item1, replace the label "Item1" with "Saved", then fade out the button after 500ms and place back the label "Item1" (saved in var currentText)
If I click the button multiple times it fires too many times. How can I prevent that?
$('body').on('click', ".item", function() {
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
});
});
This could be solved with a simple flag indicating that you are in the process of fading it out.
var isFadingOut = false;
$('body').on('click', ".item", function() {
if (isFadingOut) {
return;
}
isFadingOut = true;
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
isFadingOut = false;
});
});
Note: this solution works globally. So if you have multiple different buttons on screen that you want to be able to fade out simultaneously, this will not work. If that's the case, something more like what #Phiter wrote would be better.
I'd do something like this:
$('body').on('click', ".item", function() {
if ($(this).data('off')) return;
$(this).data('off', true);
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
$(this).data('off', false);
});
});
The function will not execute while the button has the off data. Kinda like Mike's answer but without the global variable.
Can use not(':animated'). The :animated pseudo selector is used internally by jQuery and is only active when an animation is in progress
$('body').on('click', ".item", function() {
var currentText = $(this).text();
$(this).not(':animated').text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
});
});

Problems with removing item from list

Can anyone tell me why this is not working corectly?
I want a function that will remove list item when I click on it - instead it is removing the whole list.
$(document).ready(function(){
$( "#add-tag" ).on("click", function(x) {
var tag = $("#new-tag").val();
$("#galleries div:first-child").clone().appendTo("#galleries");
$("#galleries-list").append('<li>' + tag + ' gallery: remove</li>');
$("#new-tag").removeAttr("value");
x.preventDefault();
});
$("#galleries-list li a").on("click", function(x) {
var elem = $(this);
$(elem).remove();
});
});
make it
$("#galleries-list li a").on("click", function(x) {
var elem = $(this);
elem.parent().remove(); //since you want to remove the li on click of a
});
it was already a jquery object, you didn't have to make it again.
Working Example: https://jsfiddle.net/Twisty/88t09ma8/2/
JQuery
$(document).ready(function() {
$("#add-tag").on("click", function(x) {
x.preventDefault(); // Keep form from submitting
var tag = $("#new-tag").val();
$("#galleries div:first-child").clone().appendTo("#galleries");
$("#galleries-list").append('<li>' + tag + ' gallery: remove</li>');
});
$(document).on("click", "ul#galleries-list li a", function(x) {
$("#new-tag").val("");
$(this).parent("li").remove();
return false;
});
});
The .on() was not hooking to the dynamically created link, so I had to select it more specifically. Also tag was not defined.

Object screenoff in "onmouseover"

The code below shows a window when mouse is over a link. I wonder how to make this window appear on top of the word when it doesn't "fit" on the screen.
function showLayer(obj){
var div = document.getElementById(obj).style;
div.display = "block";
}
if i understand your question, here is some jquery to help (also replaces showLayer())
$(document).on("mouseenter", '#myElement', function () {
$("#" + obj).toggle();
});
$(document).on("mouseout", '#myElement', function () {
$("#" + obj).toggle();
});
$(document).on("mousemove", '#myElement', function (i) {
$("#" + obj).offset(function () {
return {left: i.pageX, top: i.pageY}
});
});
im not sure how you get the value for obj, so you would have to edit to your specific needs.

Positioning Dynamically created Button

I have created four text boxes and when I click a delete button it adds another set of text boxes with a remove button like this:
This is My script
$(document).ready(function() {
$("#add").click(function () {
$('.main').append("<div><br />" + $('.append_list').html() + '<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
});
});
How can I add this button next to the first text box which is created dynamically?
With reference to this Question
Output Image
Create a temporary container in which you insert your cloned input list. Then find the first input in that temp container:
$(document).ready(function() {
$("#add").click(function () {
var container = $('<div />').addClass('justadded').appendTo('.main');
$(container).append($('.append_list').html());
var input = $(container).find('input:first');
$('<button />').text("Remove").addClass('rmv_btn').attr('onclick', '$(this.parentNode).remove()').insertAfter(input);
$(container).removeClass('justadded');
});
});
See this : http://jsfiddle.net/MpEUZ/5/
$(document).ready(function() {
$("#add").click(function() {
$('.main > :first-child').clone().appendTo('.main').find('input[type=text]').val('');
$('.main .append_list:last').find('input[type=text]:first').after("<button class='rmv_btn' style='clear:both'> Remove </button>");
});
$('.main').on("click", ".rmv_btn", function() {
$(this).parent().remove();
});
});​
This one should works :
$(document).ready(function() {
$("#add").click(function () {
var html = $($('.append_list').html());
html.find('input').first().after('<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
$('.main').append("<div><br />" + html);
});
});
I guess $('.append_list') is containing the good html for the inputs.

Multiple variables with the same name

What I want to achieve is that click on dialog should alert 'color' variable defined by parent function, and only that one. Instead, if I first click on, say, RED, and then on, say, BLUE, and then on dialog 'blue', I have two alerts: 'red' and 'blue' instead of only 'blue' one.
HTML:
<div class='clickable' id='red'>RED</div>
<div class='clickable' id='green'>GREEN</div>
<div class='clickable' id='blue'>BLUE</div>
JS:
$('.clickable').on('click', function() {
var color = $(this).attr('id');
$('<div class="dialog">').html(color).dialog();
$('body').on('click', '.dialog', function() {
alert(color);
});
});
Live example. Of course, I could just save that variable and the read it, like this:
$('.clickable').on('click', function() {
var color = $(this).attr('id');
$('<div class="dialog" color="' + color + '">').html(color).dialog();
});
$('body').on('click', '.dialog', function() {
alert($(this).attr('color'));
});
but maybe there is more elegant solution?
What about something like this?
$('.clickable').on('click', function() {
var color = $(this).attr('id');
var dialog = $('<div class="dialog">');
dialog.html(color).dialog();
dialog.on('click', function() {
console.log(color);
alert(color);
});
});
EDIT:
$('.clickable').on('click', function() {
var color = $(this).attr('id');
var dialog = $('<div class="dialog">');
dialog.html(color).dialog();
dialog.on('click', (function(color) { return function() {
console.log(color);
alert(color);
}; })(color));
});
This should work will old dialogs, too.

Categories

Resources