dojo.addClass and dojo.removeClass

[_Maestro_]

Hi!

I am trying to dynamically add/remove a particular class when the number of cards on the table become larger than 7.
In that case the image must become smaller (resizeItems) and also the placeholder of this image should change size and position.

I thought I could do this by creating two sorts of classes in css. One with the dimensions (and locations) when there are e.g. 6 cards and one when there are e.g. 9 cards. By adding and removing these classes I was hoping the placeholders of these cards would change as well. As the classes already exists there should not be any cache issue.

The image resize works, but the placeholder does not change. All placeholders are equally big and did not change positions either

Code: Select all

            if(curSize>6){
               this.onTable_1.resizeItems(150, 210, 1650, 630);     
               if(dojo.hasClass(this.onTable_1, 'table_6_1')){dojo.removeClass( this.onTable_1, 'table_6_1');}
               dojo.addClass( this.onTable_1, 'table_9_1');
            } 

The css i have:

Code: Select all

.table_6_1 {left:10px;top: 5px;width:150px;height:210px;}
.table_9_1 {left:20px;top: 15px;width:105px;height:150px;}

Anyone knows why this addClass does not have the desired result?

Thanks in advance

[RicardoRix]

don't you want that if statement to encompass both statements? remove and add.

There is a dojo.toggleClass.

do you see any change with the F12 browser inspector?
You could do with a console.log statement.
where is this.onTable_1 defined? It shouldn't matter but you can pass the id string as the first parameter rather than the node itself.

[_Maestro_]

Thanks Ricardo

I'll indeed combine the add and remove in the single if statement. Thanks for the tip.

Back to the issue...
Nothing changes in the inspector. I tried to leave out "this.", but than it runs immediately into a javascript error.

Your next tip was to look with the composer and I did.
After running the addClass command I did another dojo.hasClass and checked whether it has the new one.

Yes... it did. So the class has actually been updated. But still i don't see that on screen. I thought by creating all these classes upfront, it would all be part of the cache and hence could be used with refreshing. Is my thinking wrong here? Or do i miss some other element?

[_Maestro_]

Got it...

So, it is probably what Ricardo meant with his last comment. Why not add the class directly.

onTable_1 is linked to the div id "table_1"

Using 'table_1' in the script works and gives the desired result.

Thanks again Ricardo!

[RicardoRix]

You're welcome.

AFAIK it should work like that. Any changes in CSS, be sure to do a full browser refresh. Ctrl-F5.
If you can see the class being added/removed to the div in the inspector then at-least you know your JS is good.

Yeah, I'm no expert, but it's easier to pass the string id, rather than the node itself.
For debugging I certainly recommend lots of console.log() and the debugger; statement together with single-stepping your code in F12.