HTML Thing… Label versus Div or Span When it Comes to Inputs

One of the things that PyCharm tells me over and over again when it comes to HTML and Inputs is that I’m just not using those ——- — labels you —- ——- excuse for a ——- programmer. (Ok, so I might be paraphrasing a bit) Now for the most part it isn’t the end of days if you use a span or div instead. No kittens will be harmed either way. However, and I admit I must be slow for not seeing this, but labels do have one advantage as told by the dub see three:

The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.

Quite simple put, if the user clicks the label or the input, it will put focus on the input. Yeah so not earth shattering but for people with stupid hands like me, it just gives me a better chance of actually clicking a textbox than the massive Evony Online ad right next to it.

Force Embeded Video Behind A JQuery Modal Dialog

Another quick one, [insert joke about sexual performance… HAHAHAHEHARHAHRAH] and I’ll probably file this under “I don’t care you if need this but I’m posting it because I have a bad memory”. When you use the jQuery Modal Dialog with an embedded video, like say something from youtube, and you have a modal dialog on the same page, you might notice that the video stays in front of the dialog. This would be considered contrary to design. Nice thing is, it’s an easy fix:

<object class="nospace" data="http://www.youtube.com/v/jU_lNNwCLp0&hl=en_US&fs=1&" height="320" type="application/x-shockwave-flash" width="400" >
  <param name="movie" value="http://www.youtube.com/v/jU_lNNwCLp0&hl=en_US&fs=1&" />
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always"/>
  <param name="wmode" value="opaque"/> <----- RIGHT THERE LOOK SEE IT?????
</object>

It’s the last parameter in that block. I posted the whole thing because it just seemed easier.

Element ‘Embed’ Is Not Supported: Embedding YouTube Video Without The Embed Tag

This should be quick, so don’t expect my usual charming self. If you’ve run into this problem, and chances are you have, you’re probably as frustrated as a thumbless hitchhiker. Good thing is, I have the solution and you can watch it here on video:

HAHAH THAT WAS FUNNY! Yeah I’m not that big of a bag. I actually will give you the code. Go figure.

<object class="nospace" data="http://www.youtube.com/v/jU_lNNwCLp0&hl=en_US&fs=1&" height="320" type="application/x-shockwave-flash" width="400" >
  <param name="movie" value="http://www.youtube.com/v/jU_lNNwCLp0&hl=en_US&fs=1&" />
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always"/>
</object>

And there it is. Easy as something other than pie because pie isn’t f—ing easy to make.

Quick Hit: Hiding Horizontal or Vertical scroll using CSS

If nothing else the motto for this site is, “Why was this written?” but sometimes it can also be, “I bypass the middle man and pass the savings on to you.” In this case, it has to do with a really simple way to show only on scroll bar on a section be it a div, span, pre tag, ect. In fact, I actually used it to for this site.

Here’s the problem, you have a section that you want to only show the horizontal scroll bar. Now the scroll bar is usually set with the overflow keyword in css:

  overflow:auto;

But what does this do? Well if the section you have is larger than its parent (Say a pre section in a set width div), both scroll bars come up. Sometimes that’s not a bad thing but sometimes it looks really annoying if you only have two lines in it like:
bat_scroll1
Since it will automatically force both scroll bars. And on top of that, the scroll bars themselves now take up space and essentially cover up some of that second line. Well there’s two ways you can go about this in order to at least allow for everything to be seen without a verticle scroll.

1)

You can use the overflow-x and overflow-y keywords:

  {
    overflow-y:hidden;
    overflow-x:auto;
  }

What this does is completely hides the verticle scroll bar. Now this will work very well if you have sections that are of a specific height. Problem is if the height isn’t set specifically, it will just not show the parts that would normally need the verticle scroll for. (Happens sometimes)

bat_scroll2

This brings us to the second solution:

B)

Padding.

  padding:8px 0px 40px 0px;
  overflow-x:auto;
  overflow-y:hidden;

Really simple addition that will basically push the bottom of the container down so that the writing that was being hidden before (Because the scroll bar didn’t exist) is now pushed upwards causing no loss of stuff.

bat_scroll3

As you can see, now everything can be… eh seen. Sure you get that annoying bit of space, but the 40px I’m using could be a bit of overkill. You really just have to shoot for a number that allows the bottom to be shown. But hey, life is tough.