homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
removing clicked-on selector from a selector class
sssweb




msg:4584212
 1:07 pm on Jun 14, 2013 (gmt 0)

I have the following HTML:

<div class="clicks" id="id1" onclick="clickable(this)">
<div class="clicks" id="id2" onclick="clickable(this)">
<div class="clicks" id="id3" onclick="clickable(this)">
etc...

with function clickable(el) {...}

In the function, I want to select all divs with class "clicks" EXCEPT the one that triggered the function.

I've tried:
$(".clicks").not(el)....
$(".clicks").not(this)....
and also:
var ID = $("#" + el.id);
$(".clicks").not(ID)....

None work; I had this working in the past and can't figure out what I changed to make it fail.

 

sssweb




msg:4584220
 1:23 pm on Jun 14, 2013 (gmt 0)

Hmmm...starting to think something else is wrong; I tried:

$(el).removeClass(".clicks");
$(".clicks").hide();
$(el).addClass(".clicks");

I assume that should work, but it didn't. Any idea what could be going on? Everything else in the function works fine using $(el)....

sssweb




msg:4584221
 1:29 pm on Jun 14, 2013 (gmt 0)

Okay, before anyone racks their brain over this, I discovered some peculiar behavior while testing -- will re-post when I figure out what's going on.

sssweb




msg:4584234
 2:18 pm on Jun 14, 2013 (gmt 0)

I tracked down the culprit. It turns out the method DOES work. It's just that the action I want to perform is to fade out all the other "clicks" classes. This used to work fine, but I've since tweaked my HTML so that each div includes a style class defined as:

display: inline-block !important;

This prevents it from hiding (I can perform any other action on the divs and it works fine. Using say, fadeOut(1000), it even fades for a second, then comes right back). The culprit is the !important tag -- it works fine if I remove it.

Any comments on why jQuery wouldn't override this? Aside from dumping the tag (which may not be an issue), any solutions?

Readie




msg:4584297
 7:47 pm on Jun 14, 2013 (gmt 0)

!important is a nasty piece of work - you should avoid it where possible because of the very reason you are now yourself seeing. The only thing that will overwrite an !important rule is another !important rule with a stronger selector.

Anyway, while the correct approach to this problem is to restructure your CSS to remove the need for the !important rule, the following snippet of code should solve your immediate problem.

<html lang="en">
<head>
<style type="text/css">
.clicks {
display: inline-block !important;
}
</style>
</head>
<body>
<div class="clicks" onclick="clickable(this);">Test click</div>
<div class="clicks" onclick="clickable(this);">Test click</div>
<div class="clicks" onclick="clickable(this);">Test click</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.impFadeOut = function() {
var duration = (typeof arguments[0] == 'number')? parseInt(arguments[0]) : 1000;
var callback = (typeof arguments[1] == 'function')? arguments[1] : function() {};
var stepLength = 25; // 0.025 second intervals

return this.each(function() {
var element = $(this);
var step = 1;
var maxSteps = Math.ceil(duration / stepLength);

var opacityPerStep = 100 / maxSteps;
opacityPerStep = opacityPerStep;

var baseStyleString = $(this).attr('style');
if(!baseStyleString) {
baseStyleString = '';
}
baseStyleString = baseStyleString.replace(/;\s*$/, '').replace(/^\s*;\s*/, '') + ';'

var stepFunc;
stepFunc = function() {
step += 1;
if(step == maxSteps) {
element.attr({
'style': baseStyleString + 'display: none !important;'
});
callback();
return;
}
var opacityThisStep = opacityPerStep * step;
opacityThisStep = String(100 - Math.round(opacityThisStep));
var ffOpacityThisStep = opacityThisStep;
if(ffOpacityThisStep.length == 1) {
ffOpacityThisStep = '0' + ffOpacityThisStep;
}

var opacityStyle = 'opacity: 0.' + ffOpacityThisStep + ';';
opacityStyle += '-ms-opacity: 0.' + ffOpacityThisStep + ';';
// I'd like to take this opportunity to say how much I hate old IE
opacityStyle += '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=' ;
opacityStyle += opacityThisStep + ')";';
opacityStyle += 'filter: alpha(opacity=' + opacityThisStep + ');';

element.attr({
'style': baseStyleString + opacityStyle
});

window.setTimeout(stepFunc, stepLength);
};
stepFunc();
});
};
})(jQuery);

function clickable() {
$('.clicks').not(arguments[0]).impFadeOut(2000);
}
</script>
</body>
</html>

Tested on Firefox 21.0, Chrome 27.0, Opera 12.14, IE 10, IE 10(compat:8), IE 10(compat:7), Safari 5.1

[edited by: whoisgregg at 8:03 pm (utc) on Jun 14, 2013]
[edit reason] Fixed sidescroll :) [/edit]

sssweb




msg:4584307
 7:58 pm on Jun 14, 2013 (gmt 0)

Wow -- thanks for taking the time to work that out & post it. I see what you mean about !important -- was testing it out for other specs and it does the same for each: jQuery won't override it.

Can't say I like that, but I guess this issue is resolved.

Readie




msg:4584361
 11:08 pm on Jun 14, 2013 (gmt 0)

You're welcome :) Your problem piqued my interest and I kinda enjoy working with jQuery and CSS - don't get to do it often enough at work :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved