The Box Model - Visibility


#1

Perhaps this isn’t the best example, but if you’re going to put something on your website in the first place, why would you turn around and hide it? I’m not sure I understand why that would be necessary. For example, the exercise has you make the “Donate” link hidden. Why would anyone in their right mind have a donate link hidden? Isn’t the entire idea of this particular model to tout what the group has been doing to preserve Lake Tahoe and wouldn’t they want donations? I don’t know… maybe it’s too early in the morning (or actually too late at night as I haven’t been to sleep yet,) but it really makes no sense to me.

Below is the link to the exercise to which I refer:
https://www.codecademy.com/courses/learn-css-box-model/lessons/box-model-intro/exercises/box-visibility?action=resume_content_item&course_redirect=learn-css


#2

This lesson seems to be more about teaching a concept.

display none can be very handy for a drop down menu for example. Or the hamburger menu codecademy uses in the exercises (icon in the bottom left)

but these examples might be too complex at first, so the exercises opts for something simpler to just demonstrate how the concept works


#3

ok, I do get that concept. However, what I’m asking is why you would want or need to hide something? Is there a purpose for it?


#4

i cover this? If i make a drop down menu, the items should be hidden by default only be displayed once clicked/hovered?


#5

a very basic implementation of dropdown:

http://jsbin.com/nokatatepu/edit?html,css,output

see that if you hover over the dropdown menu, the items appear? Quite useful


#6

Wasn’t sure if you’d covered it or not, since display is different than visible, correct? See below. So, if you make something hidden, then the space is reserved and you can make a drop-down menu later and the items previously hidden would be shown?

This is a quote from the lesson:
Note: What’s the difference between display: none and visibility: hidden ? An element with display: none will be completely removed from the web page. An element with visibility: hidden , however, will not be visible on the web page, but the space reserved for it will.


#7

True, visibility: hidden also exist, when is the last time i used that? Must be long time ago

yep, this article agrees with me:

Honestly, the visibility property is not something we used very frequently, and certainly not on its own. If we are also using other CSS properties like positioning to achieve the layout we wanted for a certain element, we could then use visibility to hide that item initially, only to “turn” it back on hover. That is one possible use of this property, but again, it is not something we turn to with any frequency.

so the same as i did for my dropdown menu, except when you need to keep the element in position (otherwise the layout might be messed up)

the lesson does not give a very practical example, given you would need to add a hover.


#8

Thank you! That’s what I was looking for.


#9

And my apologies as I didn’t see the response with the link in it regarding a “dropdown” that when you hovered over it, the list items would appear. Interesting! Thanks so much for your patience! I did try to explain that it was late for me, right? hahahaha


#10

no problem, we achieved the desired result :slight_smile: