Inline-Block Looking Awkward After Width Adjustment

[JD]

Me again.... >.>

I swear I'm nearly done with this forum revamp and I'll stop having so many questions >.<"

URL: aeipathy.forums.net/

Okay so.... I have a set up for a member database where all of my characters have their own div. I have an onclick function for the search parameters on the left and they then reduce the specific images to 0px width to hide away the ones that I don't want showing. I have done this with display:inline-block; and display:none; and it works great. I'm now trying to get fancy and do it with widths and transitions so it looks pretty when people select certain search requirements. But when they reduce down (despite the fact that I have 0 margin on these things....) it goes a bit hodge podge...

Before:



After:



I assume that the ones that are hidden are still creating some kind of "space" that then throws everything out of alignment depending on how many images were hidden between each entry and therefore how many "mini-spaces" are being created. But other than changing it to display:inline-block; and margin:0px; I don't know what to do to ensure that no extra bits are created... I would *like* there to be a nice amount of space between each image and make it like a grid but I've removed all that atm to try and work out this issue...

Anyone know what I'm doing wrong? I'm hoping it's some default/basic that I'm overlooking....

[Kami]

Can you link directly to where this is happening?

[JD]

Jul 5, 2019 6:52:44 GMT -8 Kami said:

Can you link directly to where this is happening?

aeipathy.forums.net/board/435/character-compendium

[Kami]

I can't replicate this (adding display: none to the console functions properly) so could you do whatever it is you did to cause the issue and leave it be so I can diagnose?

(As a fyi for future, if something is wrong it's best to not undo your work if you need help resolving this, and always best to link directly to the issue instead of your home page so helpers don't have to hunt ^_^)

As an aside / out of curiosity, is there a reason you're doing this in the board headers instead of on a custom page?

[JD]

Jul 5, 2019 7:41:16 GMT -8 Kami said:

I can't replicate this (adding display: none to the console functions properly) so could you do whatever it is you did to cause the issue and leave it be so I can diagnose?

(As a fyi for future, if something is wrong it's best to not undo your work if you need help resolving this, and always best to link directly to the issue instead of your home page so helpers don't have to hunt ^_^)

As an aside / out of curiosity, is there a reason you're doing this in the board headers instead of on a custom page?

Hey Kami!

I haven't taken out the code? the faulty code is still there.... O.o I left it there so people could diagnose <3

And yes there is a reason I'm just working on some different ideas atm <3

[Kami]

Jul 5, 2019 9:21:28 GMT -8 JD said:

Jul 5, 2019 7:41:16 GMT -8 Kami said:

I can't replicate this (adding display: none to the console functions properly) so could you do whatever it is you did to cause the issue and leave it be so I can diagnose?

(As a fyi for future, if something is wrong it's best to not undo your work if you need help resolving this, and always best to link directly to the issue instead of your home page so helpers don't have to hunt ^_^)

As an aside / out of curiosity, is there a reason you're doing this in the board headers instead of on a custom page?

Hey Kami!

I haven't taken out the code? the faulty code is still there.... O.o I left it there so people could diagnose <3

And yes there is a reason  I'm just working on some different ideas atm <3

Sorry, to clarify, did you leave an image hidden?

[JD]

Jul 5, 2019 9:36:16 GMT -8 Kami said:

Jul 5, 2019 9:21:28 GMT -8 JD said:

Hey Kami!

I haven't taken out the code? the faulty code is still there.... O.o I left it there so people could diagnose <3

And yes there is a reason  I'm just working on some different ideas atm <3

Sorry, to clarify, did you leave an image hidden?

No, all the images show on default and then when you lick the side links (I've only done the Athenia ones atm) it reduces certain images to 0px (or rather, the div that the images are the background image of to 0px). So if you click the links on the side the page will change and you'll see the odd space? <3

[Kami]

Jul 6, 2019 1:25:44 GMT -8 JD said:

Jul 5, 2019 9:36:16 GMT -8 Kami said:

Sorry, to clarify, did you leave an image hidden?

No, all the images show on default and then when you lick the side links (I've only done the Athenia ones atm) it reduces certain images to 0px (or rather, the div that the images are the background image of to 0px). So if you click the links on the side the page will change and you'll see the odd space? <3

That is almost certainly the problem. Reducing the div to 0px doesn't actually take away the div's styling. So, if you have dictated styling in a div of 1px all around, setting the div to 0px still means that you will have a div padding of 1px all around since technically the div's contents are at 0px you've just added a padding of 1px. Does that make sense?

What you'll need is to actually append the style display:none; to each div instead of reducing the content to 0px in width.

I presume you're using third party-created javascript for this, so I'd either reach out to the person who created the script or stick around here for someone a bit more knowledgeable than I in javascript to help you figure out the correct syntax to accomplish this (:

(Chris again, maybe?)

[Chris]

I'm seeing the code below responsible for showing/hiding the few badges that have been made active and it looks like every single badge/link will be getting its own handler attached so that code with the repetitive lines will be growing much bigger in size and making a very large footprint for a code which will never be cached so downloads every time the page loads.

$('#athenia').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.athenia') .addClass('show');
});
$('#a_accepted').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.a_accepted') .addClass('show');
});
$('#a_wanted').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.a_wanted') .addClass('show');
});
$('#a_deceased').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.a_deceased') .addClass('show');
});
$('#antonis').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.antonis') .addClass('show');
});
$('#marikas').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.marikas') .addClass('show');
});
$('#stravos').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.stravos') .addClass('show');
});
$('#xanthos').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.xanthos') .addClass('show');
});


I would instead propose a single handler for each .brd_info class that would instead use the id of the badge or link to decide what gets filtered. This handler would also ensure that those anchors that are not suppose to be displayed are properly removed from the rendered flow

$('.brd_info').on('click','a[id]',function(){
$(window).scrollTop(350);
$('.cc').removeClass('show').parent('a').show();
$('.'+this.id).addClass('show');
$('.cc:not(.show)').parent('a').hide();
})

One user experience problem I foresee though is that automatically scrolling the page every time a badge or link is clicked could get very annoying especially if you are filtering in a panel further down the page such as Egypt, perhaps a fixed .brd_info panel similar to the fixed pagination bar following you down the page.

Edit:

---

Here's an alternate code that shuffles those left brd_info panels to the top depending on which one gets the click so if additional clicks are warranted in that panel one would not need to scroll back down repeatedly to get to another badge in that panel.

$('.brd_info').on('click', 'a[id]', function () {
$('.cc').removeClass('show').parent('a').show();
$('.' + this.id).addClass('show');
$('.cc:not(.show)').parent('a').hide();
var this_brd = $(this).closest('.brd_info'),
first_brd = this_brd.prevAll('.brd_info'),
brd_button = $('.brd_button');
brd_button[0].scrollIntoView()
if (first_brd.length) {
this_brd.add(this_brd.prev()).hide().insertAfter(brd_button.parent()).show('slow')
}
})

[JD]

Jul 6, 2019 16:00:06 GMT -8 Kami said:

Jul 6, 2019 1:25:44 GMT -8 JD said:

No, all the images show on default and then when you lick the side links (I've only done the Athenia ones atm) it reduces certain images to 0px (or rather, the div that the images are the background image of to 0px). So if you click the links on the side the page will change and you'll see the odd space? <3

That is almost certainly the problem. Reducing the div to 0px doesn't actually take away the div's styling. So, if you have dictated styling in a div of 1px all around, setting the div to 0px still means that you will have a div padding of 1px all around since technically the div's contents are at 0px you've just added a padding of 1px. Does that make sense?

What you'll need is to actually append the style display:none; to each div instead of reducing the content to 0px in width.

I presume you're using third party-created javascript for this, so I'd either reach out to the person who created the script or stick around here for someone a bit more knowledgeable than I in javascript to help you figure out the correct syntax to accomplish this (:

(Chris again, maybe?)

That's the thing tho - I removed all the padding too. I reduced it to 0px padding, 0px margin, 0px border, 0px width. but it still gives that little "extra space" around it. Like you say - display:none works fine and nothing goes out of alignment when I use that. But display:none; doesn't transition. It just pops in and out of existence, so I'm trying to make it transition. <3

[JD]

Jul 6, 2019 17:58:44 GMT -8 Chris said:

I'm seeing the code below responsible for showing/hiding the few badges that have been made active and it looks like every single badge/link will be getting its own handler attached so that code with the repetitive lines will be growing much bigger in size and making a very large footprint for a code which will never be cached so downloads every time the page loads.

$('#athenia').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.athenia') .addClass('show');
});
$('#a_accepted').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.a_accepted') .addClass('show');
});
$('#a_wanted').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.a_wanted') .addClass('show');
});
$('#a_deceased').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.a_deceased') .addClass('show');
});
$('#antonis').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.antonis') .addClass('show');
});
$('#marikas').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.marikas') .addClass('show');
});
$('#stravos').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.stravos') .addClass('show');
});
$('#xanthos').on('click', function(e){
$(window).scrollTop(350);
$('.cc') .removeClass('show');
$('.xanthos') .addClass('show');
});


I would instead propose a single handler for each .brd_info class that would instead use the id of the badge or link to decide what gets filtered. This handler would also ensure that those anchors that are not suppose to be displayed are properly removed from the rendered flow

$('.brd_info').on('click','a[id]',function(){
$(window).scrollTop(350);
$('.cc').removeClass('show').parent('a').show();
$('.'+this.id).addClass('show');
$('.cc:not(.show)').parent('a').hide();
})

One user experience problem I foresee though is that automatically scrolling the page every time a badge or link is clicked could get very annoying especially if you are filtering in a panel further down the page such as Egypt, perhaps a fixed .brd_info panel similar to the fixed pagination bar following you down the page.

Edit:

---

Here's an alternate code that shuffles those left brd_info panels to the top depending on which one gets the click so if additional clicks are warranted in that panel one would not need to scroll back down repeatedly to get to another badge in that panel.

$('.brd_info').on('click', 'a[id]', function () {
$('.cc').removeClass('show').parent('a').show();
$('.' + this.id).addClass('show');
$('.cc:not(.show)').parent('a').hide();
var this_brd = $(this).closest('.brd_info'),
first_brd = this_brd.prevAll('.brd_info'),
brd_button = $('.brd_button');
brd_button[0].scrollIntoView()
if (first_brd.length) {
this_brd.add(this_brd.prev()).hide().insertAfter(brd_button.parent()).show('slow')
}
})

Oh wow that's amazing Chris ! That works lovely! I didn't know you could do that so that's a huge bonus - thank you very much!



My question now becomes two fold however -



1. this code has the right images appearing wonderfully but they no longer transition. They just pop in and out of existence. Not sure if that's a CSS issue or a JS issue but I was really hoping to use the addClass to have each character "fade" and "thin" out of existence like the image were being reshuffled you know? That was the end result I was hoping for. Which I got working but as I said above it left weird spaces in the place of those that had been "thinned" to 0px and then sent everything askew >..<" If you know how to make that work with the above code that would be phenomenal and mean that I'm all set.



2. I should probably make a new thread for this but given it comes off the back of the above code, and I don't want to be a nagging pain...
Given this bit of the above code - + this.id - I'm wondering if this would help me waaaay condense down another code I have on the site. ((Sorry I'm very very new to js and I'm kinda working with my limited knowledge and learning as I go. Taking the long route until I work out an easier way of doing it lol))...



Currently I have this in place:


$('#sublist76').hover(function() {
$('#sub76') .addClass('subshow'); }, function() {
$('#sub76') .removeClass('subshow'); });


- for every single board that has sub-boards (I manually wrote it). So -



$('#sublist76').hover(function() {
$('#sub76') .addClass('subshow'); }, function() {
$('#sub76') .removeClass('subshow'); });
$('#sublist77').hover(function() {
$('#sub77') .addClass('subshow'); }, function() {
$('#sub77') .removeClass('subshow'); });
$('#sublist78').hover(function() {
$('#sub78') .addClass('subshow'); }, function() {
$('#sub78') .removeClass('subshow'); });

 etc.


Can I simply change this to ONE set of code by doing something like this -

$('#sublistwhateverthisidis').hover(function() {
$('#subputitherealso') .addClass('subshow'); }, function() {
$('#subputitherealso') .removeClass('subshow'); });


so that I don't have to keep repeating this code and adding in the id with every new board with subboards? >..<"

[Chris]

Jul 7, 2019 1:19:19 GMT -8 JD said:

Oh wow that's amazing Chris ! That works lovely! I didn't know you could do that so that's a huge bonus - thank you very much!



My question now becomes two fold however -



1. this code has the right images appearing wonderfully but they no longer transition. They just pop in and out of existence. Not sure if that's a CSS issue or a JS issue but I was really hoping to use the addClass to have each character "fade" and "thin" out of existence like the image were being reshuffled you know? That was the end result I was hoping for. Which I got working but as I said above it left weird spaces in the place of those that had been "thinned" to 0px and then sent everything askew >..<" If you know how to make that work with the above code that would be phenomenal and mean that I'm all set.

You're welcome.

For transitions we could try inserting a delay so the animation has time to run before we correct the spacing, something like this:

$('.brd_info').on('click', 'a[id]', function () {
$('.cc').parent('a').show(100).end().removeClass('show');
$('.' + this.id).addClass('show');
$('.cc:not(.show)').parent('a').delay(600).hide(100);
var this_brd = $(this).closest('.brd_info'),
first_brd = this_brd.prevAll('.brd_info'),
brd_button = $('.brd_button');
brd_button[0].scrollIntoView()
if (first_brd.length) {
this_brd.add(this_brd.prev()).hide().insertAfter(brd_button.parent()).show('slow')
}
})
That animation looks to be around 400ms so I added a delay of 600ms to allow it to complete before proceeding in the code, you could lower that number closer to the animation's end for a smoother transition/repositioning but be careful not to fall over the edge.

Jul 7, 2019 1:19:19 GMT -8 JD said:

2. I should probably make a new thread for this but given it comes off the back of the above code, and I don't want to be a nagging pain...
Given this bit of the above code - + this.id - I'm wondering if this would help me waaaay condense down another code I have on the site. ((Sorry I'm very very new to js and I'm kinda working with my limited knowledge and learning as I go. Taking the long route until I work out an easier way of doing it lol))...



Currently I have this in place:


$('#sublist76').hover(function() {
$('#sub76') .addClass('subshow'); }, function() {
$('#sub76') .removeClass('subshow'); });


- for every single board that has sub-boards (I manually wrote it). So -



$('#sublist76').hover(function() {
$('#sub76') .addClass('subshow'); }, function() {
$('#sub76') .removeClass('subshow'); });
$('#sublist77').hover(function() {
$('#sub77') .addClass('subshow'); }, function() {
$('#sub77') .removeClass('subshow'); });
$('#sublist78').hover(function() {
$('#sub78') .addClass('subshow'); }, function() {
$('#sub78') .removeClass('subshow'); });

 etc.


Can I simply change this to ONE set of code by doing something like this -

$('#sublistwhateverthisidis').hover(function() {
$('#subputitherealso') .addClass('subshow'); }, function() {
$('#subputitherealso') .removeClass('subshow'); });


so that I don't have to keep repeating this code and adding in the id with every new board with subboards? >..<"

It should work but I would need to see the entire thing (JS and CSS can't really be validated without the accompanying HTML). Basically the method used here  takes advantage of the fact that an event such as a click on an element bubbles up toward the top of the document so the closest common parent container gets the event listener attached that then checks for (in this case) the click event on the badges and links within it then performs the action based on which link/badge was actually clicked. Seeing the HTML would very quickly reveal what that common parent element is and also allow me to examine for a consistent naming pattern which is also necessary for this to work.

[JD]

Hey Chris !

Oops sorry! Thanks, you're good at explaining this. I *think* this is what you want? <3

{if $[board.sub_board]}
<table width="100%"><tr><td><div class="sublist">
<table height="75px"><tr><td><div class="brd_subs"></div></td><td width="1px" bgcolor="#dcdcdc"></td><td><div style="padding:6px 10px 6px 16px;">{foreach $[board.sub_board]}<a id="sublist$[board.sub_board.id]" href="$[board.sub_board.href]">$[board.sub_board.name]</a>{/foreach}</div></td></tr></table>
</div></td>
<td width="242px" valign="top">
<div class="sub" style="opacity:1;">
<div class="brdimg" style="border-radius:0px; margin-bottom:11px; border-bottom:1px solid #dcdcdc;"></div>
<div style="margin-left:-10px;"><table width="240px"><tr>
<td><div style="padding:2px 0px 12px 0px"><u><font color="#999999">Hover over a Sub-Board<br>for Further Information</font></u></div></td></tr></table></div>
</div>
{foreach $[board.sub_board]}<div class="sub" id="sub$[board.sub_board.id]">
<div class="brdimg brdimg$[board.sub_board.id]" style="border-radius:0px; margin-bottom:11px; border-bottom:1px solid #dcdcdc;"></div>
<div style="margin-left:-10px;"><table width="240px"><tr>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%">{if $[board.sub_board.threads] == 0}<font color="#CCCCCC">{else}<font color="#555555">{/if}<b>{if $[board.sub_board.threads] == -1}0{else}$[board.sub_board.threads]{/if}</b><i>Thread{if $[board.sub_board.threads] != 1}s{/if}</i></font></td>
<td width="25%">{if $[board.sub_board.posts] == 0}<font color="#CCCCCC">{else}<font color="#555555">{/if}<b>{if $[board.sub_board.posts] == -1}0{else}$[board.sub_board.posts]{/if}</b><i>Post{if $[board.sub_board.posts] != 1}s{/if}</i></font></td>
</tr></table></div>
</div>{/foreach}
</td></tr></table>{/if}

That's the bit that has the classes/ids in question  *hides her messy self-taught coding* >..<"


As for the transition - that now works great! thanks very much!! <3

[Chris]

Hovers don't bubble but this should still make for a fairly compact code:

$('.sublist a[id^="sublist"]').hover(function () {
/(\d+)$/.test(this.id) && $('.sub' + RegExp.$1).addClass('subshow');
},
function () {
/(\d+)$/.test(this.id) && $('.sub' + RegExp.$1).removeClass('subshow');
})


[JD]

Jul 8, 2019 0:12:44 GMT -8 Chris said:

Hovers don't bubble but this should still make for a fairly compact code:

$('.sublist a[id^="sublist"]').hover(function () {
/(\d+)$/.test(this.id) && $('.sub' + RegExp.$1).addClass('subshow');
},
function () {
/(\d+)$/.test(this.id) && $('.sub' + RegExp.$1).removeClass('subshow');
})


Hey Chris ,

Sorry, no this didn't work. Not sure if I put it in wrong or something but the hovers are no longer working on the main page...? >..<" It's okay if there isn't another solution - I can keep using the code I have. I just thought there might be a solution where I didn't have to keep going in and editing when I added boards <3