« first day (322 days earlier)      last day (3466 days later) » 

03:05
Can anyone help me figure out how to get more space at the bottom of my page? The footer seems to become part of the right column and the left goes below that.
 
3 hours later…
05:50
Lets say you want to host a large community website or a photo sharing website or videos ( like YouTube ) perhaps, then what would be best to start off, a cloud hosting or a dedicated server hosting?
06:19
mornin
 
1 hour later…
user652649
07:26
groaning
08:03
Lets say you want to host a large community website or a photo sharing website or videos ( like YouTube ) perhaps, then what would be best to start off, a cloud hosting or a dedicated server hosting?
@LiamMartens Depends on hosting cost i guess
gmornin
just having first coffee and cookies
xD
and youtube is throwing 500 error :/
Monkeys?
yup
!! youtube morning delight
works from here and that's not the video :S
damn monkeys
hi @mikedidthis
08:22
I want your tips on this layout ....
the background should be an image slider, which you can also control by the little squares below the content
You'll have to take my tips out of my thong
how do I best go around coding it?
/(°o°)\
atm the little squares below the content are an <ul><li> structure, with the li's positioned relative
and my background image is positioned absolute outside of the content div
08:38
sounds like you have it covered?
@DarkAshelin the image is leaning to the left :D
@easwee hm?
@mikedidthis no not yet
I mean what is the best semantic way to do this? obviously I'll be using javascript, but should the images be inside the <ul><li> structure? should I be using background-size: cover or make it work with actual <img> tags?
with background-images I ran into the problem that I can't position the images next to eachother, which gives me the problem that I can't slide between them
user652649
semantic doesn't apply to background-image
^ that
ok well maybe I used the wrong word
not semantic but "proper" way to do it
08:47
+ I am not 100% sure you can have a semantic image slider, maybe the parent would be figure.
user652649
so you have 3 boxes that are represented by these 3 buttons there which allows you to switch between them.. how this switch happens? i presume there's an animation
user652649
also there is a second animation which is the background change, right?
@Wes a slide-to-left or right to switch between the images
user652649
1 sec
I wanted to float the images next to eachother with overflow:hidden for example
but the images aren't always the correct size + it's responsive
so I'm using background-size: cover
haven't figured out yet how to do it otherwhise. Maybe floating divs of 100% width, but I don't know in advance how many images it'll be
or absolute positioning... that may work
user652649
user652649
like that?
user652649
or the background image
user652649
is on a separate level
yes except the content doesn't slide, there's only 1 content box which can disappear after I slide the background
my structure atm:
user652649
08:55
ok so
<ul id="banners">
    <li class="active" id="gallery1" style="background-image: url('gallery/gallery1.jpg')"></li>
    <li id="gallery2" style="background-image: url('gallery/gallery2.jpg')"></li>
    <li id="gallery3" style="background-image: url('gallery/gallery1.jpg')"></li>
</ul>

<div class="box">
    <div id="inner">
        <h2>Zwembaden</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec nibh fringilla, elementum leo ut, cursus odio. Aenean pharetra arcu imperdiet, ultricies elit et, rhoncus mauris. Vestibulum vehicula lectus dignissim mi hendreri
first ul is the background image, the last ul are the squares
user652649
so when the bg changes you hide the previous .box>.inner and you make appear the one associated to the new bg?
no, there is no new box
user652649
nope seems you have one single box for everything
the box remains the same
user652649
08:57
so where's the content comes from?
user652649
ajax?
content is static
only the background images are dynamic
user652649
so the text you read in the box is the same for all three images?
the box doesn't need to do anything, it's fine the way it is xD
yes
I'm just looking what the best way is to link my background images with the little square boxes, while the images are dynamically loaded from db
user652649
ok so you are doing right, you might just want to improve the markup for seo etc?
08:59
I think i'm on the right way yes, haven't gotten the animation to work yet
what's wrong with this?
$(".bannerimages a").click(function(){
    var link = $(this).attr("href");
    $(link).css("left", "100%");
    $("#banners .active").stop().animate({
        left: "-100%"
    }, 500).removeClass("active");
    $(link).stop().animate({
        left: "0px"
    }, 500).addClass("active");
});
"The user was too lazy to give a description" hue
user652649
so basically i would just reorder contents, banners under the actual article
user652649
plus add a label to the links <span class="hidden">Description of image1</span>
@Wes why? there are no descriptions to them
user652649
09:05
and provide a fallback for background-image
<li id="gallery2" style="background-image: url('gallery/gallery2.jpg')"><img src="gallery/gallery2.jpg" class="hidden"></li>
that is easier to index for bots
user652649
it is a good practice for accessibility and more importantly seo use links correctly
x.x
well first I need to get it to work
can you spot why my js isn't working?
  yeah
   var link = $(this).attr("href");
    $(link).css("left", "100%");
lets css the url! :D
09:07
no it actually selects the element
since the url is "#gallery1"
var link = $(this).attr("href");
that gives you a string.
uhh I see what you did there.
hmm, my console log said it worked
@DarkAshelin i can has jsbin and brief ? :D
Yeah, sorry I didn't imagine someone would do that.
09:08
the element you are moving with left has a position on it right?
anchor links :P
no, it has:
  li{
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 40px;
    left: 100%;
    z-index: -5;
    background-size: cover;
    background-position: center center;
  }
yeah, its got a position on it :D
ah I thought you asked for right
xD
user652649
@DarkAshelin you laughed at my sketchtoy drawing tho. i'll remember that.
09:09
Ha ha, no thats just my stupid english.
I would throw a demo up, I can't see an issue.
@Wes it was a great drawing as well.
cache your selectors yo!
user652649
coffee machine is broken. that's a disaster
09:11
also event delegation, $(window).on('click', '.bannerimages a', function(){});
user652649
i'm drinking barely coffee colored water
also fire! kill it with fire.
@Wes no kettle ?
user652649
!!wiki kettle
09:12
A kettle, sometimes called a tea kettle or teakettle, is a type of pot, typically metal, specialized for boiling water, with a lid, spout and handle, or a small kitchen appliance of similar shape that functions in a self-contained manner. Kettles can be heated either by placing on a stove, or by their own internal electric heating element in the appliance versions. History The first kettles were used in ancient Mesopotamia for purposes other than cooking. Over time these artistically decorated earthenware containers became more frequently utilized in the kitchen. In China, kettles were...
gives kinda buggy animation, just what it does for me as well
user652649
@PatsyIssa nope, we used to have it as a backup but not anymore... it disappeared
Good morning all
@DarkAshelin wanna fill me in on what you're trying to do, might be able to help. @Will o/
@PatsyIssa ehm, basically I want to have an image slider. The images are dynamic, and responsive (using background-size: cover;) over the width of my screen. I should be able to slide to another image by clicking the <li> with the white square
can't figure out why that javascript isn't working
09:18
well for starters you're not changing the z-index so whatever li is on top will always hide the rest
@PatsyIssa the positions should make sure they don't overlap though
I automatically set the "target" image to left: 100%
i can see it slide when i click on 3 then back at 1
gimme 5 min i ll write it up
$("#banners li").not("#banners .active").css("left", "100%");
^ I set all images except the current one to the right
then animate the current one to left: -100%, and the target image to left: 0
hmm, there's something wrong with my left: 100%
09:25
yup
There something wrong with the logic :P
oh god don't tell me I found another chrome bug
when I untick and re-tick the left: 100% in my devtools it works fine
user652649
link?
Do you want it to always slide from the right to the left ?
@PatsyIssa yes that's fine
@Wes ever used custom events with javascript?
user652649
09:29
yeah @mikedidthis
Are they name spaced, or per object?
I am going to presume per object
user652649
wat?
user652649
you mean dom events?
user652649
document.createEvent etc?
no
someObj.on("customEvent")...
09:30
@PatsyIssa did you find the issue?
someObj.trigger("customEvent")...
its ok, they are per object / class. :D
user652649
@mikedidthis that's nothing that i know of... must be some jquery crap? xD
@Wes nope event emitter / pub - sub / mediator pattern
though I can see why it looks like jQuery.
user652649
yeah but it's something user defined, right? not vanilla js
its vanilla js
its just a method.
user652649
09:34
yeah but not standard, it's something you define
correct
13
Q: What is an "event emitter"?

wwaawawBrowsing through http://microjs.com, I see lots of libraries labeled "event emitters". I like to think I know my way around the basics of the javascript language pretty well, but I really have no idea what an "event emitter" is or does. Anyone care to enlighten me? It sounds interesting...

user652649
usually the pattern is
myproto.attachEvent(Event event);
myproto.dispatchEvent(Event event);

or

myproto.attachEvent(str_token_name, Event event);
myproto.dispatchEvent(str_token_name);
user652649
where Event is just a closure
I just don't understand what is wrong with my js / css D:<
@DarkAshelin poor you :o
09:41
@LiamMartens u wanna take a look at it?
where is it?
25 mins ago, by Dark Ashelin
@PatsyIssa ehm, basically I want to have an image slider. The images are dynamic, and responsive (using background-size: cover;) over the width of my screen. I should be able to slide to another image by clicking the <li> with the white square
okay let me take a look
but the animation doesn't work, and I don't know why
user652649
09:46
@Wes yeah pretty much, mine is just reworded to .on/.off/.trigger
user652649
yeah
Anyway, that was it. If the event name was global or not, but it doesn't seem to be.
@DarkAshelin what if you remove $("#banners li").not(".active").css("left", "100%");
@DarkAshelin soz they were installing VisualStudio on my pc
@LiamMartens well then I'd have a problem with z-indexes no?
user652649
09:48
@mikedidthis depends.. if you need to dispatch events without knowing the subject you need a global Events collection
the problem seems to be that my left: 100% isn't rendered properly
if i float a element, how can i set height to 100%? my example here, div.sidebar: jsfiddle.net/simplery/b5j9u/9
user652649
so instead of doing obj.trigger("myevent") you will do Events.dispatchOnAllObjects("myevent");
user652649
in that case the event name should be properly namespaced
user652649
like "mikedidthis.gallery1.onfadein"
user652649
09:50
but i would do it on a per object basis
user652649
(english is getting worse)
@MirkoSimic floating doesn't affect the way you set height. Make sure your parent element is also 100% height
@MirkoSimic display: inline does affect the way you set height
used inline-block
@Wes in my case, I always know the subject.
I am just using them instead of callback hell :D
@DarkAshelin When I remove that line everything seems to be kinda ok, I think
@DarkAshelin i set now: jsfiddle.net/simplery/b5j9u/10 -> but don't works, and on my real website (only local) is div outside of float containers not 100% height, but i set it with css
09:56
@LiamMartens which line?
@LiamMartens ah sry. But when I remove it the animation isn't correct
user652649
@DarkAshelin the animation is just not visible because it happens on a lower z-index (that is covered from some other banner)
user652649
perhaps..
but you're right, I wonder why the animations work "better" like that
@Wes the problem is that they shouldn't be covering eachother because their positions are supposed to be different
somehow it isn't rendering my left: 100% correct?
fresh faces in the room
all plugins should be done like this
@MirkoSimic I removed the unnecessary display: inline for content too, removed min-height 100%, added height: 100% and set the clearfix correct
@Wes If I get my resignation letter soon cuz of you, I will make sure to drop negative votes each day on your answers :)
:p
user652649
ha, sorry
@Wes come on, don't be sorry :p I was glad that she had her clothes on ..
10:02
@DarkAshelin I have to go now, but i'll look into it when i have more time
@LiamMartens did u see my updated fiddle? jsfiddle.net/b5j9u/11
@Wes any idea for my problem? :/
user652649
i'm going to check.. busy writing a mail
user652649
5min
@DarkAshelin wait what's with the new fiddle?
@LiamMartens was to help another guy$
my own fiddle here: jsfiddle.net/yA45c/2
oh I just noticed I tagged wrong
10:11
Yea that's why I asked :)
sry about that
@DarkAshelin so yea i'll see when I have time, if it hasn't been solved by then
user652649
@DarkAshelin jsfiddle.net/CtA4M check if this is helpful
user652649
idk jquery animations so i can't help more
user652649
(kill it with fire)
10:21
@Wes yes, this is what I want jsfiddle.net/CtA4M/1
why does it work in ur fiddle and not in mine Q.Q
user652649
i have no idea, but i hardcoded width & height
user652649
you should do the same
@Wes it's responsive
wtf man
I copy your code to my own fiddle, doesn't work
the only difference is the hardcoded with and height
@DarkAshelin Are you loading jquery?
@easwee yes
10:26
link pl0x
Just try getting this (jsfiddle.net/CtA4M/1) to work here (jsfiddle.net/yA45c/2)
user652649
i see
@DarkAshelin i ll help in ~30min need to finish up smth
user652649
that's really weird
user652649
anyway it looks to be a jquery's problem, because happens on any browser
10:30
it still seems to be rendering my left: 100% wrong
user652649
1 sec
user652649
trying
Hey guys
in my devtools I can see that even though one of my background images has left: 100% , it shows at left: 0
Can i ask you all a quick question?
why does this:
<td> <a href="#" class="department_link" style="font-size: 18px; line-height:20px; <!--[if IE]>padding-top:40px;<![endif]-->">Project Engineering</a></td>
not work
10:33
^ see, it shows #gallery3 on top even though it should be left: 100%
@RoXaS Define not work.
and it shows #gallery2 as hidden x.x
if i use an IE browser it wont set the padding
^^^ nice
@RoXaS You can't use conditional comments inline
create a new ie.css file and put your IE specific rules there
and load it in head and wrap it in conditional comments there
10:36
@easwee but if i do this it shows the text.
<td> <a href="#" class="department_link" style="font-size: 18px; line-height:20px; <!--[if IE]>padding-top:40px;<![endif]-->">Project Engineering <!--[if IE]>Because fuck you<![endif]--></a></td>
read again what i wrote before
.department_link { display: block }
@Mr.Alien you use visual studio right ?
If he wants to use inline, I would better suggest using _ * and /9 hacks
@PatsyIssa I use it too.
user652649
10:37
it's jquery @DarkAshelin
@PatsyIssa I have but I don't use it
@easwee got emmet running on it ?
user652649
that wrongly calculates percentages
or anything that's like it
@PatsyIssa Nop - dunno what is that.
10:37
@RoXaS you can use them inline.
@mikedidthis I'm using table-cell actually. I'm trying to vertically center some text. and this is the only multiline text i have on this page.
Morning fellas
allows you to write div.myclass and when you tab autocompletes to <div class="myclass"></div>
@SecondRikudo o/
@SecondRikudo Mornin
@Wes shouldn't that be the browser then? It shows the style just fine as left: 100%
10:38
I eventually made all the text and images uniform max size, and set that as the height :D
@mikedidthis Got any ideas?
@Wes even without any jquery, it renders the left: 100% wrong
Think it looks better? (See all sizes too)
@RoXaS stop using inline styles, apply a class instead. Show more code / an example.
10:40
@mikedidthis Lemme make something real quick. I'm not allowed to have recognized who i work for.
@DarkAshelin example?
user652649
i have no idea @DarkAshelin but if you use a wrapper element it works jsfiddle.net/gLtvR
can't be bothered scrolling up
@Wes good job!
@Wes ye but I can't get the same code to work in my live site x.x
honestly I don't understand
it shows left: 100% as left: 0 in the viewport
even does the same in the fiddle
@PatsyIssa Sublime + Emmet
user652649
10:44
@DarkAshelin jsfiddle.net/t8SSU
did u see my screencap above?
check the inline styles, compared to how it shows on the viewport
#gallery2 is hidden if u hover over it there... for no reason
:15339945
user652649
anyway @DarkAshelin there's something weird i agree... can't focus more on it at the moment... but the problem is fundamentally that left:percentage can't inherit the value
user652649
like the parent doesn't have a width explictly set
user652649
so left:percentage gets ignored
10:47
@RoXaS Use pastebin to copy huge codes :)
@Wes that's what I thought too, but all parents got width: 100%
user652649
use my version for now
user652649
i'll check later your fiddle
@mikedidthis jsfiddle.net/6sszA <-- Roxas's code which I trashed in the bin because of it's size...
user652649
really weird
10:48
@Mr.Alien My bad
1 message moved to Trash can
@RoXaS Don't worry, I made a fiddle :)
dafuq!
@Mr.Alien Thanks
@Wes I can't use your version on my own site, it doesn't work
@mikedidthis The problem is that the Project Engineering is not vertically centered in IE
10:50
@RoXaS what version?
8.06
Sadly I can't test it as jsfiddle doesn't work in IE8 :D
@mikedidthis Ran in to the same problem
ohh its xp, just like cherry on the cake
There is no fucking way in hell that i will use Visual Studio after sublime
10:52
lol I just got a funny flag
What the fuck is this piece of archaic software
@Mr.Alien in this room?
@PatsyIssa And with emmet it just boosts up your productivity, one line of code and your layout structure is ready
@mikedidthis nope
@Mr.Alien i use sublime + emmet, for this project they have me using visual studio because it's a stupid .net project
i m dying here
@Mr.Alien I was gonna say, there is no one funny in this room :D
10:53
@Mr.Alien Yeah they are upgrading to 7 somewhere in this new year
@Purify - Where did you go?
no multicursors....
@mikedidthis we all suck :p
@PatsyIssa docs.emmet.io/cheat-sheet <-- I love this
user652649
@DarkAshelin jsfiddle.net/GWH2b try to uncomment overflow
I v memorized it :P
10:55
Don't tell me you read XSL as well :p
and anyways you didn't memorized it .. I know you well ;)
nope
what's that ?
omg -.- u don't wanna know what caused the issue
user652649
say it :|
$(".bannerimages a").click(function(e){
   e.preventDefault();
@PatsyIssa It's the last portion on that cheat sheet lol
10:56
it kept going to the anchor somehow
seriously tableflip
@DarkAshelin lol nope :P why would i >.< i v memorized the actual things that are used
!!riot
(╯°□°)╯︵ ┻━┻
user652649
you see, i thought of that, but i thought jquery did it automagically
user652649
10:57
fucking jquery
!!put...it...back
@Wes summed up my inner reaction perfectly
Spams ^^^
@PatsyIssa That didn't make much sense. Use the !!/help command to learn more.
10:58
you know I just wasted 4 hours on this
on a fcking e.preventDefault()
user652649
xD
ahahahaha
10:59
@RoXaS sadly I am not recreating the example, sorry.
Anybody there... I need a help
@mikedidthis Okay, well thanks for looking into it
@Wes I don't think you can blame jQuery for that.

« first day (322 days earlier)      last day (3466 days later) »