Author Topic: HTML Question  (Read 5500 times)

0 Members and 1 Guest are viewing this topic.

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #15 on: October 27, 2013, 01:11:25 pm »
That isn't one of the things I've ever thought to test before, but browsers probably do vary on that. In Firefox, the only ways I can seem to make that dotted border appear is if I click on the link and then use the back button to go back again; or open a link in a different tab, go to a that tab or a different one, then go back to the tab where I clicked on the link.

Offline Dan

  • Apprentice
  • **
  • Posts: 99
  • Gender: Male
Re: HTML Question
« Reply #16 on: October 27, 2013, 02:01:10 pm »
Heh. I said I was out of practice.

Wrong pseudo-element: it very nearly works if you use :focus instead of :active:

Code: [Select]
<html>
  <head>
    <title>Collapsing Block</title>
    <style>
    a {color: black; text-decoration: none;}

    .collapse .collapsecontent {display:none;}

    .collapse:focus  .collapsecontent {display:block; }
    </style>
  </head>
  <body>
   <a class="collapse" href="javascript: void(0);">
    <p class="collapselabel">Click Me (1)</p>
    <p class="collapsecontent">This is the content (1).</p>
   </a>

   <a class="collapse" href="javascript: void(0);">
    <p class="collapselabel">Click Me (2)</p>
    <p class="collapsecontent">This is the content (2).</p>
   </a>

   <a class="collapse" href="javascript: void(0);">
    <p class="collapselabel">Click Me (3)</p>
    <p class="collapsecontent">This is the content (3).</p>
   </a>
  </body>
</html>

The hidden block won't re-hide till you click somewhere else, but otherwise this works for me in Firefox, Opera and Konqueror. Doesn't work in Chromium unless I cheat and use the "inspect element" thing to toggle the :focus state. Konqueror uses the same rendering engine as Chromium so I don't know why they differ.

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #17 on: October 27, 2013, 02:13:06 pm »
Maybe it doesn't like the invalid use of a block-level element inside an inline element.

Will it work in Chromium if you change it to this?

Code: [Select]
<!doctype html>
<html>
  <head>
    <title>Collapsing Block</title>
    <style type="text/css">
    a {color: black; text-decoration: none;}
    .collapselabel { display: block; margin: 1em 0; }
    .collapse .collapsecontent {display:none;}
    .collapse:focus  .collapsecontent {display:block; margin: 1em 0; }
    </style>
  </head>
  <body>
 
   <a class="collapse" href="javascript: void(0);">
    <span class="collapselabel">Click Me (1)</span>
    <span class="collapsecontent">This is the content (1).</span>
   </a>

   <a class="collapse" href="javascript: void(0);">
    <span class="collapselabel">Click Me (2)</span>
    <span class="collapsecontent">This is the content (2).</span>
   </a>

   <a class="collapse" href="javascript: void(0);">
    <span class="collapselabel">Click Me (3)</span>
    <span class="collapsecontent">This is the content (3).</span>
   </a>
     
  </body>
</html>

Offline Dan

  • Apprentice
  • **
  • Posts: 99
  • Gender: Male
Re: HTML Question
« Reply #18 on: October 28, 2013, 03:38:41 pm »
Makes no difference. I also modified the CSS rule for a to include display: block, but that also has no visible effect.

It's a mystery!

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #19 on: October 28, 2013, 03:46:32 pm »
Not really. If it worked in any browser, then that browser would be doing it wrong.

Quote
The :focus selector is allowed on elements that accept keyboard events or other user inputs.

Source: w3schools

This is why I used it to change colors in a textarea in one of my above examples, because :focus was created for form inputs and textareas.

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #20 on: October 28, 2013, 04:03:58 pm »
Here's something you can do with <textarea>, :focus, and transitions. It can be a nifty effect for forms where people input data, but I wouldn't use it for spoilers because nobody would be able to add images, links, or other formatting to them.

Code: [Select]
<!doctype html>
<html>
<head>
<title>textarea color change and animated resize on focus</title>
<style type="text/css">
textarea {
    border: 1px solid #ccc;
    background: #eee;
    color: #eee;
    width: 300px;
    height: 1.5em;
    transition: height 1s, width 1s;
}
textarea:focus {
    color: #000;
    width: 500px;
    height: 10em;
}
</style>
</head>
<body>
<p>Click in box below for spoiler:</p>
<textarea spellcheck="false">Click outside of this box to close it.
---------------------------------------
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sagittis libero, vel blandit urna. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pulvinar leo eu rhoncus mattis. Pellentesque congue feugiat vestibulum. Duis id ullamcorper metus. Etiam accumsan, ipsum eget imperdiet faucibus, purus nunc mattis neque, at tincidunt ipsum mauris eu lorem. Nullam pellentesque velit id enim adipiscing, eget elementum velit euismod. Sed at faucibus nunc, pulvinar pharetra neque. Cras dapibus massa sit amet metus sodales lacinia. Maecenas nec blandit nunc. Curabitur tempus elementum venenatis. Ut fermentum lacinia semper. Nam accumsan lectus eu dignissim facilisis.</textarea>
</body>
</html>

I put it here, so anyone can see it in action: http://jsfiddle.net/kPrtb/

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #21 on: October 28, 2013, 04:55:23 pm »
This uses the jQuery function I posted initially, but I added styling and animation here: http://jsfiddle.net/hn6Kf/1/

One thing I forgot to account for in my previous post and this one was multiple spoilers on the same page, so I updated the fiddle at the link and edited this post accordingly.

Notice how onclick="$(this).toggleClass('showme');" is the only javascript I added.  I didn't need to define that function, because it's already defined in the jQuery file that anyone can download here.
« Last Edit: October 28, 2013, 05:13:15 pm by Neith »

Offline Dan

  • Apprentice
  • **
  • Posts: 99
  • Gender: Male
Re: HTML Question
« Reply #22 on: October 29, 2013, 02:53:58 pm »
Not really. If it worked in any browser, then that browser would be doing it wrong.

Quote
The :focus selector is allowed on elements that accept keyboard events or other user inputs.

Source: w3schools

This is why I used it to change colors in a textarea in one of my above examples, because :focus was created for form inputs and textareas.
That would explain why it doesn't work on <div>, but I'm using it in an <a>nchor tag which does accept keyboard input.


Your textarea is pretty cool. I will have to learn some of this new-fangled CSS3!

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #23 on: October 30, 2013, 01:33:18 am »
<a>nchor tags accept mouse input. It's true that you can tab to a link and click enter instead of using a mouse, but you can't actually enter data into a link like you can a text input or textarea.

CSS3 is great! You can make a whole site display one way on a laptop, another way on tablets, another way on smartphones, and have it change in front of your eyes by turning that tablet or smartphone from portrait to landscape... all with pure CSS. In fact, you can see this effect in your browser while resizing it. Try this simple demonstration.

Code: [Select]
<!doctype html>
<html>
<head>
<title>Responsive design demo</title>
<style type="text/css">
body { background: #f00; }
@media (max-width: 460px) {
body {
background: #009;
color: #fff;
}
}
@media (max-width: 460px) and (orientation: landscape) {
body {
background: #090;
color: #ff0;
}
}
</style>
</head>
<body>
<p>Wheeeeeeeeeeeeeeeee!!!!</p>
</body>
</html>

If you can upload it and view it with a smartphone, also turn that phone to view it in portrait and landscape. It's so nice that CSS is finally getting to be as powerful as it is, and when most browsers start supporting animated png, I hope IE won't take 5 years to catch up. :o

Offline Dan

  • Apprentice
  • **
  • Posts: 99
  • Gender: Male
Re: HTML Question
« Reply #24 on: October 30, 2013, 02:35:07 pm »
Cool.


The Wikipedia page for animated PNG has a table of software that supports it (or not). In the Web Browsers section, IE doesn't even get a "No".

(In fairness Chrome doesn't support it either without a plug-in.)

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #25 on: October 30, 2013, 08:17:16 pm »
I must be looking at a different page than you are, because it says "No" for IE under browsers[20] and mobile here.

Having to use an .htc file in the past just to show regular png transparency in IE6, and now to do other now-standard things in IE8+ is bad enough, but we can't rely on the general public to install a plugin or decent browser just to see a site the way we want them to. When so many people don't know the difference between "Google" and "the internet", a lot of people won't know how to do that, and a lot of people who do know how won't want to bother with it, so I just wait for the day to come when all the browsers will support it natively, or at least have a good fall-back for browsers that can't handle something.

Another thing that annoys me is the fact that CSS3 columns have been a standard for a few years, but Opera still doesn't support them, and while IE10 is finally supporting them, a lot of people are still running IE8 or even IE7. Then we have the issue of having to use -webkit- and -moz- prefixes for a lot of stuff. Why can't they just use the standard CSS, instead of forcing us to bloat our code to accommodate all these different browsers? :o

Offline JohnE

  • The Beast
  • *****
  • Posts: 1882
  • Gender: Male
  • Heeeere's JohnE!
Re: HTML Question
« Reply #26 on: November 01, 2013, 02:07:15 am »
FYI, I was playing around with HTML and CSS tonight to try to figure out how to do something else (unrelated, for a different project, but what the hay, it's an html thread), and it's working out surprisingly well.

Basically, I'm trying to make a faux newspaper page using CSS and HTML. It's built out of a table, with a header image, columns of headlines and text, and a footer, with an off-white background. Pretty simple stuff, but for an html/css noob like me, it's an accomplishment.

Offline Dan

  • Apprentice
  • **
  • Posts: 99
  • Gender: Male
Re: HTML Question
« Reply #27 on: November 01, 2013, 02:45:19 pm »
It's always satisfying to get a layout looking the same in the browser as it does in your head, isn't it?

You're not really supposed to use tables for page layout, but for multiple columns that's always been a bit on an Achilles Heel for CSS. Or it always used to be: take a look at Neith's link for CSS3 columns, and particularly the first "try it yourself" link.

I'd also be a little wary of multi-column layouts - users won't like having to repeatedly scroll back up to the top of the page.

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #28 on: November 01, 2013, 02:57:42 pm »
I'll echo what Dan said. Tables should only be used for tabular data, and never for layout.

Why tables for layout is stupid: problems defined, solutions offered - I think this was written before the first iPhones came out, but with so many people using smartphones and other mobile devices now, it's even more pertinent today.

Here's a good tutorial that shows how easy it is to use CSS to detect and serve up the appropriate styling for different-sized devices.

Offline JohnE

  • The Beast
  • *****
  • Posts: 1882
  • Gender: Male
  • Heeeere's JohnE!
Re: HTML Question
« Reply #29 on: November 01, 2013, 03:10:14 pm »
I should clarify. I'm not trying to style a web page to look like a newspaper, but to create a faux newspaper page ON a web page. i.e. I want to give the impression that I placed a photo or scan without having to generate a unique image for each "scan."

ETA I want to use it as a narrative element in non-linear html fiction.
« Last Edit: November 01, 2013, 04:15:45 pm by JohnE »