Forum Width

Sik

Level 10

Re: Forum Width

« Reply #20 on: July 15, 2014, 11:14:35 PM »

Yeah, agreed, it's probably better handled in reverse.

Quote from: Derek on July 15, 2014, 08:16:28 AM

Ideally, you'd just click once and it would toggle (Polycount style), but I'm not sure how to accomplish that in css.

I believe :focus is what you're looking for (well, not exactly but it'd be more usable at least), but I don't think that works for img =/ Maybe some simple onclick javascript event that modifies the CSS would be easier.

EDIT: apparently :active works on any element on modern browsers (your only issue would be supporting IE below version 8, if you care about that, and this doesn't mention if this works on Safari)
https://developer.mozilla.org/en-US/docs/Web/CSS/:active#Browser_compatibility


« Last Edit: July 16, 2014, 02:31:47 AM by Sik »	Logged

biomechanic

Level 3

Re: Forum Width

« Reply #21 on: July 23, 2014, 01:52:52 PM »

There is a way to do it without using JS, but it would require outputting some extra HTML around the image, including a unique id, which may be impossible in SMF. You put the <img> (and maybe some polycount-style info bars) inside a <label>, whose for attribute is set to a hidden checkbox. The width of the image (and which bar you show) then depends on whether the checkbox is :checked.

Code:

<html>
	<head>
		<style>
			input[type=checkbox] {
				display: none;
			}
			label {
				float: left;
				width: 100px;
			}
			label img {
				max-width: 100%;
			}
			input[type="checkbox"]:checked ~ label {
				width: auto;
			}
		</style>
	</head>
	<body>
		<input id="chkb" type="checkbox"/>
		<label for="chkb">
			<img src="http://forums.tigsource.com/Themes/tigsource/images/logo-bg.png">
		</label>
	</body>
</html>


	Logged

Alevice

Level 10

Re: Forum Width

« Reply #22 on: August 04, 2014, 01:57:56 PM »

Yeah, only best bet is the checkbox hax on a pure css solution. Is there a way to implement a jquery solution? I was hoping that all posted images would have an specified class, buit it seems they dont. werd.


	Logged

Hosted TIGSTWG games:
TIGSTWG XX
TIGSTWG XXII
External Mafia games
All Staring Eye

TIGers Steam Greenlight Games

Sik

Level 10

Re: Forum Width

« Reply #23 on: August 06, 2014, 03:57:17 PM »

Huh, I had completely forgotten about the input trick. You actually need to do it to get a canvas receive focus (if you're making an HTML game you'll probably want to make the canvas focusable). Surprised I didn't think about that.


	Logged

Pages: 1 [2]

« previous next »