« first day (602 days earlier)      last day (3186 days later) » 

12:01 PM
1. you can't really make a `.title:hover > parent` selector. You can't select an element that is next to the element in the hover selector
2. if you apply the hover effect ONLY on the title, then the description box will disappear if you stop hovering over the title. This means that if you hover over the description box it will also disappear
 
oh really?
oh....
 
though in javascript this is possible
do you have any javascript knowledge?
 
I dont, but its so strange, I have seen website that did the effect I'm trying to accomplish using CSS only
let me see if I can find it real quick
 
hmm it may be possible
just that I don't know about it xD
 
like I remember seeing it and thinking "woah, that totally makes sense"
haha if we figure this out together we'll both learn something :)
 
12:04 PM
@kenhimself is this what youre trying to do? jsfiddle.net/9dsGP/16
 
I vaguely remember getting a parent selector working on css before, just can't remember how
 
no, there is no parent selector in any browser (yet)
 
I know
 
^ that
 
but I somehow did something like that
 
12:06 PM
ooo cimmanon, I think you're super close
but now, can the description completey replace the title?
 
no, you need js for that
 
and when the person hovers out of the description, it fades back to the title
oh crap really?
 
wait if you want the description to replace the title, that's easier
 
well, you can use absolute positioning to cover it
 
yeah thats what I wanted haha
 
12:07 PM
but you cant replace it
 
thinks
 
I have to give you both credit. I have no idea what the OP is asking for
 
i mean, upon hover-over, technically isn't there a way that the title does: opacity:0; height:0; and the description do: opacity: 1; height: auto?
 
@kenhimself have you tried?
 
so it mimics the replacement" kind of effect
@mikedidthi tried what?
 
12:09 PM
@kenhimself what you just described? :D
 
I get what you mean, you want this jsfiddle.net/9dsGP/17 but now the height of the title just needs to be 0 while hovering
 
... lol @mikedidthi but while I do that, this is what I want to achieve (the only thing I want to do is add a fading effect when hover-overed) jsfiddle.net/kenhimself/u7xxafwn/7
 
inline-block on the title isnt doing anything useful, btw :p
 
shush
can remove unecessary css later
 
12:13 PM
oh woah Dark!!!!
 
the problem with fading is that mid-way the transition, both elements will be visible with 50%, but where should they be positioned? you can't have both at the same spot (or do you want them to be?)
 
yes yes yes that is super close!
 
instead of positioning, try a negative margin-top.
 
so both texts are placed within the page-wrap, which is:
width:80%;
max-width:960px;
margin:0 auto;
height:100%;
got it
 
@kenhimself like that: jsfiddle.net/nup3c5w0
 
12:17 PM
both at the same time xD
 
......mikedidthis you are a genious
*genius
lol yeah @dark
@mi
@mikedidthis is there a way I can make the title's width to the width of "Formwork"s text?
 
don't think so
he means the hover too
 
meh, kinda. It can be the same width as the parent of the two
 
he means onHover only applied to .title
but onHoverOut on .text
this is the problem with lacking parent selectors
 
12:22 PM
I have no idea what you either of you are asking for, sorry.
 
actually
.text should have the same width of the visible content
that's what he wants
 
@DarkAshelin the content width is the parent width? so width:100%?
 
so if you look at this fiddle: http://jsfiddle.net/kenhimself/nup3c5w0/1/

As you can see the blue background is the width of "Formwork (more)". which is nice, but when you move your cursor at any other area outside of the text (shown in the pic below), it triggers the hover over effect.
that white space shouldn't trigger the hover over effect
so thats kind of the technical issue
 
your using the wrong element for the hover then
 
I've tried width: auto, display: block, text-wrap, etc.
which element you recommend I use?
 
12:27 PM
if it should only appear when you have the title, urm... .title?
 
yes
but it should disappear if you no longer hover over .text (not just .title)
hence, problem with lacking parent selector in css
 
hmmm...
 
not really, just stick the two inside a div
 
I can't think of a way to make it work
 
how about white-space: nowrap;?
 
12:29 PM
@kenhimself do you know what that does?
 
damn, doesn't work...
yeah, doesn't it ignore the remaining spaces of an element?
 
oh..
lol
 
inline-block does, but the problem is that it still recognises content even if it has 0 opacity
 
shit
hmmmm...
wow this is tricky
 
12:33 PM
we need mike's wisdom!
 
yez!
 
@mikedidthis I offer you this small goat (@BasementKeyboardHero) as a sacrifice. Please show us your wisdom
 
who's that?
 
our room-goat
may or may not explode upon contact
 
explode? like get pissed haha?
 
12:47 PM
 
BAHAHAHAHAHAHAHAHAHAHAHAHAHAHAH
Oh my god I literally bursted out laughing when she exploded
oh god, the internet.
 
I can't stop laughing either when I see this xD
 
oh man, so good
well you guys, thanks for your help, all of you.
I learned quite a lot over a period of a hour haha
crazy stuff
 
1:25 PM
posted on December 23, 2014 by Mary Lou

A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid. Sliding Header Layout was written by Mary Lou and published on Codrops.

 
1:35 PM
@DarkAshelin sorry I had to go fix a car :|
 
@mikedidthis an ITer AND a mechanic, is there anything you can't fix?
 
@DarkAshelin my face...
#selfburn
 
heh.
 
2:07 PM
o/
 
@mikedidthis At least you acknowledge it :P
 
@DarkAshelin there are ways you can fake the appearance of a parent selector in certain cases
7
Q: Faking the "parent selector" using pure CSS

TylerHIt's long been hailed as the answer to many selector problems, even disputed by some as entirely unnecessary, but the Selectors Level 4 pseudo-class :has(), better known as the parent selector, is the only one from Level 4 that will not be implemented in CSS, according to the latest revision of t...

 
3:03 PM
@TylerH that's such a ghetto way of doing it, I wouldn't call it "working" exactly
 
@ZachSaucier I never claimed any of those answers to be a good practice
Hacks are ghetto by nature
 
lol, rlemon won his contest
 
Noobie Question: How do I set the viewport in my HTML so that 1px in the CSS === 1px of the screen ?
 
@ZachSaucier is there a winners list?
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
3:05 PM
@RahulDesai you can't reliably AFAIK
 
didnt change much
 
@mikedidthis yes at the bottom of the contest page
 
@ZachSaucier ahh I didn't want to login in :(
 
blargh, CSS is getting way more complicated drafts.csswg.org/css-scoping/#selectordef-content
Now they are introducing scope
 
@ZachSaucier Ok. So how do I match my scale to that of the PSD design that I have?
 
3:06 PM
@mikedidthis you don't have to enter if you login
 
I presume its an oversight :D
 
ya, but that doesn't enter you into the contest :P
 
@mikedidthis yes there are some problems with the UX implementation
 
@rlemon well done on winning! :D
 
@RahulDesai you do the best you can
design responsively
 
3:08 PM
alrighty
 
pixel perfect design isn't much of a possibility nor should it be sought after
 
posted on December 23, 2014 by kbironneau

/* by TacoGrande */

 
@SecondRikudo I am disappointed by the lack of variation when opening that site in different browsers
 
compare old ie to new ie :p
 
I half expected it to be an image
 
i would think viewing it in ie6 would be plenty old enough :p
 
3:31 PM
So far ShadowDOM sounds like developers took the worst-case scenario of HTML5 video/audio and ran with it
I'm imagining audio clips that start playing on websites that you can't turn off/pause/even see
 
@TylerH that doesn't make sense
1. you can do that right now
 
@ZachSaucier yes I know I'm referring to HTML5 yere
 
2. shadow DOM mixes with regular DOM to combine to form what we have
 
seems like a way to wall off your stuff so it can't be modified by what we're used to using
based on comments there's a 60/40 split that this is a good or a bad thing
 
@TylerH it'll be modifiable in dev tools just like anything else
 
3:37 PM
I'm not sold on it
 
I'm not either
it's just not as bad as you make it out to be :P
 
Seems like a big addition for people who have trouble keeping things organized so they invented a way to force themselves to section things off so they can't access them by accident
Like, I'm gonna throw my keys into the river so I never speed again
 
I disagree
 
I mean, HTML5Rocks article gives an example using just HTML and CSS, and then says "If other elements on the page accidentally use the same class names for styling or scripting, we're gonna have a bad time."
Seriously?
 
@ZachSaucier people do this kind of stuff all the time, why do you think they wont do it with this?
 
3:41 PM
How about just not using the same class names for styling and scripting so that there's no conflict
 
@TylerH did you watch the video I linked? just curious
 
@ZachSaucier not yet
 
kk, he addresses some of your concerns there
 
I figured it would be better to read a 101 article or two first
 
it's pretty basic
 
3:42 PM
I'm not an auditory learner
 
@cimmanon I don't understand your question :P
@TylerH I find the visual/auditory/hands on learner stuff to be a bunch of crap. You might favor one but you can learn from any if you focus
 
@ZachSaucier depends on your familiarity with the topic
 
I still disagree for the most part
 
Hey everyone. :) Is there a way to use a link as a submit button for a form and to open the next page with it at the same time?
 
if I'm already a skilled knot-tier and someone explains a bowlin to me I can probably imagine it well enough in my head
 
3:44 PM
If I'm learn best by reading I can visualize words being spoken as text, etc.
 
@SineLaboreNihil and whats wrong with using the semantically appropriate submit button?
 
You can argue whatever you want, but I've always learned much quicker with a hands-on approach
 
@TylerH that's different than learning facts :P it's impossible to be a pro athlete without playing the sports
@SineLaboreNihil use <button> and yes, use Javascript
 
I'd like to create a link to the next form and save all the form input data in a SESSION superglobal PHP variable at the same time so the user doesn't have to click two buttons.
@ZachSaucier How do I do that?
 
make sure to wait for the submit function's callback
@SineLaboreNihil google it, it's what we all do
 
3:47 PM
@ZachSaucier I did, but JS is not something I'm too good with. I tried using various examples I found online but none of them worked.
 
I'm sorry
If you teach a man to fish...
 
@ZachSaucier Saying "Google it" is just like saying "Go fish for one yourself"
not really teaching him how to fish
 
that is how you learn to do it yourself
 
@ZachSaucier I am trying to learn to fish using JS. :D
 
i find the problem with nearly all tutorial videos is that they do not focus on the task at hand. they have a tendency to ramble on about irrelevant stuff. at least with text i can skim/search until i find the relevant bits.
 
3:48 PM
@ZachSaucier I don't think you understand what "teach" means then
 
lol, biting today, aren't we? :)
 
I just need to understand how this works in JS so I can tweak it for my application.
 
@SineLaboreNihil what have you tried and where did you get stuck?
 
Just usual conversational responses like always
What you're doing is "telling" a man to fish, not "teaching" him :-)
 
3:50 PM
researching for yourself -> learning to fish
 
@SineLaboreNihil start by thinking about what tasks are involved. "how do i open a new page with javascript" and "how do i submit a form with javascript".
 
@SineLaboreNihil thing is: your question is pretty broad. it's easier for us to tell you what you did wrong than explaining everything from 0 about the subject
 
@DarkAshelin Well I think the biggest problem is that I don't understand what's being done, but from what I found I tried various things. I am a novice though. I tried:
 
@ZachSaucier yes but learning to fish does not inherently imply being taught by someone else
 
@SineLaboreNihil making a jsfiddle would be useful
 
3:51 PM
I can learn to fish on my own but you didn't teach me
 
well you already got to the words "session" and all so I bet you understand some of it
 
Some I tried to implement, some I just didn't get.
 
@TylerH I feel like you're agreeing with me here
 
I'm not
 
3:52 PM
@SineLaboreNihil does it have to be javascript btw? I feel like PHP would be better suited for this
 
You seem to think telling someone to google how to do something is teaching them how to do something
 
especially since you're dealing with forms
 
@DarkAshelin I understand how to make the application in PHP, but JS is something I'm not comfortable at all.
 
@TylerH in this case I believe it is
 
@TylerH one of my teachers in univ was the same lol
@SineLaboreNihil ah I see
 
3:52 PM
coming up with good search terms -> learning how to fish in respect to finding information
 
@DarkAshelin Everyone says it's done in JS and I'd like to learn how to do it in JS.
 
by that logic, teachers in schools should just tell their students "google everything in the learning outcomes section of your syllabus"
 
But, sure if you know a PHP way, that would work too.
 
@TylerH I'd be okay with this
 
@ZachSaucier most people wouldn't
 
3:53 PM
@SineLaboreNihil well I think I missed your original question, what are you trying to build in the first place?
 
I realize that
 
most people aren't self-learners
 
which is oh so disappointing
 
and even self-learners can only do that after a certain point of being taught how to think
 
@TylerH that's what my teach said
 
3:55 PM
@ZachSaucier you'd be okay with walking into any class on any subject and the teacher says "google it" and then they never say another word all semester?
 
@DarkAshelin I have a web application consisting of 12 forms. These 12 forms each have a separate page and I am trying to make the user only click next once so the SESSION variables get set from each form and so that the new form opens where the user will fill it up again as set new session variables etc. In the end all of those session variable valuse will be written to a db.
 
there is a big difference between "i dont know how to X" vs. "i tried to X, but i there was problem Y". the former is what started this topic, the later is what should have started this topic
 
@SineLaboreNihil like some kind of "step 1 - step 2" system?
 
@DarkAshelin exactly.
 
and "problem Y" should never ever be "doesnt work"
 
3:57 PM
basically right now it only works if I have separate submit button and a next link. I want to combine the functionality of the two into one link.
 
well there are 2 ways I would handle this:
1. All in PHP. This will be safer as PHP can't be hijacked through the browser and thus validation can't be bypassed.
2. Make it all 1 big form, separated in 12 fieldsets in HTML. Then use javascript to hide/show the forms accordingly.
 
@cimmanon s/later/latter/
 
whoops ^^
 
@SineLaboreNihil you can combine the 2 functionalities in 1 button through php as well
 
Could have been worse. Could have said ladder :P
 
3:58 PM
@DarkAshelin I can't make it all one big form as each form contains 21 questions that a user must answer.
 
@SineLaboreNihil that's okay
 
So I guess I'll just have to go with PHP then.
 
you can make it so that the next fieldset is hidden until the user answers a certain question (or until he clicks next)
then hide the previous fieldset
 
@SineLaboreNihil you do understand that a lot of users find the whole concept of things opening up in new tabs/windows to be confusing, right?
 
@DarkAshelin That is a very good idea. :)
 
3:59 PM
@cimmanon it's not in a new tab/window
 
thats how the problem was described initially
 
@SineLaboreNihil in javascript it's very easy to change visibility/display of an element
 
@cimmanon Well it's all supposed to open in the same window, it's just gona be a different page with the same questions. The only thing that changes is the image about which the user must answer these questions.
 
@SineLaboreNihil basically you can make an onChange() event on a certain <input> field, check when it is filled in, and when it is, use .hide() and .show() to show the next form/fieldset
 
@SineLaboreNihil well why do you need javascript for that?
 
4:01 PM
@cimmanon he doesn't necessarily, he just heard that it's good to use javascript for this and therefor he wanted to learn how
 
@DarkAshelin So I would basically check to see if the user filled in all my questions, then save that input into a session and subsequently hide the entire div in which the form is located and show a new div with a different form?
 
@SineLaboreNihil no, no sessions
you don't save any of the filled in info in javascript
 
Well I want to save it in a PHP session.
 
you do a quick validation in javascript: is the field filled in? if so, show next form.
then when the user clicks the final Submit button, you do the rest in PHP
 
@DarkAshelin I would go to the provost and demand a refund if that happened to me
 
4:03 PM
That way when the user reaches the last form and hits the final submit button all the info from the session superglobal will get stored in a db.
 
in PHP you would store all the values and do another validation check, just to be sure
since javascript validation can be bypassed
 
@DarkAshelin So for this I wouldn't need 12 separage pages? I would just do it all on one page.
 
all in 1 page
even in 1 form
 
@DarkAshelin That's even better than my original idea. Thanks a lot. :)
I'm gona go google some tutorials on form validation and element hiding. :)
Thanks for your help. :)
 
 :20617126<form>
     <fieldset id="fieldset1">
          //all your input fields of this step
     </fieldset>
     <fieldset id="fieldset2">
          //all your input fields of this step
     </fieldset>
     ....
     <fieldset id="fieldset12">
          //last fieldset
          <input type="submit">
     </fieldset>
</form>
then in javascript, at the start, you .hide() all fieldsets except the first one. Then you check if input fields are filled in and hide() / show() the next one until you reach the last
as soon as the user hits the submit button on the last field, you will get all input values in your $_POST in PHP
 
4:07 PM
@DarkAshelin Oh, so you're suggesting not to go with SESSIONS at all?
 
exactly
no need for them
 
@DarkAshelin Hmmm, you made me rethink my whole application. :D
 
@SineLaboreNihil haha, I guess that's a good thing? xD
 
@DarkAshelin Yea, I think your way is actually better.
:) thanks
 
If there's no reason for a session then it's definitely better to avoid them
 
4:09 PM
the good thing about this is that the user doesn't need to refresh the page for every step (he can't even, actually), and it looks better. you can even use animations to make each step fade in/out
 
@TylerH Well yea, this way I don't have to write any data to a disk and it should run faster and smoother.
 
it will also be easier to implement a "back" button if you ever need one
 
@DarkAshelin Oh, yea, I think that's something I can find in jQuery.
 
since you'd just show/hide the previous element again, and it would still be filled in (no need to prefill through php)
 
@Mario ping
 
4:11 PM
@SineLaboreNihil this is a form I made in the same way calspas.be/index.php?page=garantie
fill in some dummy data and press Next, you'll see it fade to the next step
as long as you don't reach the last step and press Send, it won't get sent so don't worry ;)
 
@DarkAshelin That is really cool!
 
you can even click on the arrows on top to return to a previous step
 
Thanks for that example. :)
 
but not to a next step
 
@DarkAshelin You've given me some great ideas. I'm gonna get back to work. Thank you very much for your help. :)
 
4:15 PM
it's just important to remember that you also need to do your validation again in PHP, since Javascript validation can be bypassed by people that know javascript xD
@rlemon did you just ping him at the mention of jQuery
 
no
 
@SineLaboreNihil if you get stuck on anything, you can always inspect the code in my example
 
need to vamp SQL help
 
@rlemon oh ok xD
 
@DarkAshelin I'll just keep my current PHP validation that I already do with the version I have right now.
And add some js validation as well. I like the red fields you made when the user doesn't pass validation.
 
4:17 PM
:)
 
@DarkAshelin Thanks, I'll do that. :)
 
stupid xmass again
streets packed up
 
take the teleporter
beam me up, easwee
 
I would give all my savings for a teleporter
so you should concentrate on other inventions since I don't have much lol
 
@SineLaboreNihil this is the related javascript code of my example: jsfiddle.net/k3ten5w5 (I realised it may be a hassle to find on the live site)
do note that I used jQuery for it, you can do it without too
 
4:24 PM
@DarkAshelin - santa's little helper
 
@easwee lol good advice X-P
 
@DarkAshelin Thanks, I'm gonna need to study this syntax carefully. This is looks really different from PHP. lol
 
ok sorted.
phew
 
@SineLaboreNihil jsfiddle.net/k3ten5w5/1 sorry I may have gone overboard in all this helping xD
 
4:33 PM
@rlemon damn I had multiple chances and still didn't win!
 
@DarkAshelin Thanks a lot for the comments in code. That made it a lot clearer. :)
 
@TylerH i won twice
had to re-select twice this morning
but then I spotted my issue in my filter
so I won't be able to win anymore
 
@DarkAshelin $($("#garantie fieldset")[0]) <--- isn't that a bit overcoding? could do just $("#garantie fieldset:first-child")
 
12 days now also lists the won prizes
 
@easwee I think for some reason that didn't work
or I may have tried first-of-type but there's another div in front of it in the same container
 
4:38 PM
$("#garantie fieldset").first() or $("#garantie fieldset").eq( 0 ) ?
 
yep all that too
 
yeah same
doesn't matter much right?
 
I do wish you would cache your selectors.
 
sorry.
^^'
 
performance
 
4:39 PM
@easwee the [0] thing too?
 
@DarkAshelin not really, but you make another jquery object, when you already have one.
 
you are making a double selector query there
 
ah yes
 
surprised that even works in jquery hehe
 
well watchu gon do huh ┓( ・。・)┌
 
4:41 PM
not look at the fiddle anymore :D
 
2 messages moved to Trash
 
can we move the moved message? (moveception)
 
I just tried that
you can't
 
I tried to get Caprica to react to a message containing a trigger word that she herself presented
Didn't work :( Was disappoint.
 
4:51 PM
@DarkAshelin Is the e parameter in function after click() function the event of clicking the button itself?
 
@SineLaboreNihil yes
 
So e.preventDefault(); would basically prevent the button from doing what it would normally do.
 
in plain words you could say it like that yes
 

« first day (602 days earlier)      last day (3186 days later) »