« first day (2092 days earlier)      last day (1696 days later) » 

1:03 AM
posted on January 20, 2019

New Cyanide and Happiness Comic

 
 
3 hours later…
4:27 AM
@Zee hello
lets discuss here
 
Zee
hey
 
@Zee what do you want to do exactly?
 
Zee
Hold on, let me find a working example
so I want 3 boxes to display across the container when the page is full sized (kinda like amazon prime video, minus the arrows to scroll etc.)

https://www.amazon.co.uk/Amazon-Video/b?ie=UTF8&node=3010085031
but when the page is made smaller, I want the boxes to remain the same size, just drop below each other so when on mobile screens only 1 box is shown, then the next box is below it etc.
 
well for that you need to use media queries
 
Zee
I thought so, but I heard flexbox is ideal for making responsive designs
so I thought I'd be able to just drop the content into a new row using that
 
4:39 AM
@Zee ^^ you can do like that
 
Zee
Yeah that's exactly it, I think!
 
@zee checked snippet in my answer?
 
Zee
Yeah, thanks! Now how do I achieve that same effect but have the boxes for the image the same size even if the image I upload is different dimensions?
like, say one is 400x200, and another is 400x600
 
yes, dont set the height of image just set width 100% for the image
and make sure container div has height and width as you desired
 
Zee
okay awesome - 1 last question - this one might be a bit more difficult
 
4:52 AM
i can try, though its been 3years i wrote any html or css :)
 
Zee
this one's a bit of CSS mixed with JS
The images are coming from my database, so I was wondering how I'd go about doing the effect where if you hover over the image it displays the title of the film (without having to manually input the title myself for each individual entry
so it would take filmTitle from my database and when the image is hovered over the opacity of the image drops to 0.5, and displays the title from my database
 
ajax or without ajax?
 
Zee
without
I'm just using PouchDB and vanilla JS
 
than make sure you also fetch info of that image and than have a span by default hide it(display:none;) and on hover show it
 
Zee
Not gonna lie, I have no idea what that means haha
this is my db fields
        var newReview = {
         _id: newID,
       title: document.getElementById('title').value,
        year: document.getElementById('year').value,
       genre: document.getElementById('genre').value,
      rating: document.getElementById('rating').value,
    synopsis: document.getElementById('synopsis').value,
       image: document.getElementById('image').value,
      }
 
4:58 AM
left me simplify a bit hover it is called overlay effect w3schools.com/howto/…
 
Zee
I assume it's something like

let overlay = '<a class="btn" href="viewFilm.html?id=' + thisFilm._id +'"><p class="filmOverlay>"' + thisFilm.title + '"</p></a>';
then like
 
 
Zee
listContents += '<div class="filmRow">'+ image + overlay + '</div>';
is that anywhere in the ballpark?
then add the hover effect to the filmRow class?
 
ballpark?
@Zee yes something like that
 
Zee
like, is that anywhere close
 
5:07 AM
sorry, i have to go now!, let me know if my answer helped you otherwise it make no sens to keep it
have a Good day!
 
Zee
thanks fothe help man
 
6:04 AM
posted on January 21, 2019

New Cyanide and Happiness Comic

 
Is <div> element as a default displayed block unless I give it display:inline value?
 
 
2 hours later…
8:36 AM
2
A: What is the difference between media print and media screen

MayurIt might sound daft or too obvious but: Screen = For Screens Print = For Print Media screen will basically style screens and media print will effectively work for printable pages. (ref.1) (ref.2)

@PHPFan yes
 
 
4 hours later…
12:57 PM
Anyone here happen to be a Ruby on Rails developer? Need some help with some errors in my code.
 
 
2 hours later…
2:49 PM
@BoltClock lol
 
3:34 PM
@Feeds wow, a wholesome C&H comic
it's like a unicorn
 
3:46 PM
I can't believe I got reddit gold for this
 
Nice
Didn't know you played TF2 much
 
How could you not know, I had a TF2-based profile picture for years
 
Maybe I forgot? What was it?
 
ah, I don't think I ever interpreted that as TF2-related
I thought it was just your bolt-sona in a firefighter outfit
 
3:57 PM
In fairness to you some of the weapon I'm holding is cropped out
You can see the full artwork here: deviantart.com/boltclock/art/…
And also my cosmetics are all firefighter-themed
 
I'm not familiar enough with TF2 to recognize that as a Pyro honestly
 
Oh ok that explains it then lol
But yeah I play pretty much every day
 
ah
Do you play with NathanOliver and Machavity and gunr?
they play most days as well
 
Actually no, don't recall ever playing with any of the Arqade/SE folks. I should try that, though ping will be an issue
I can adjust to high pings
 
They are regulars in the SOCVR chatroom here on SO
 
4:36 PM
posted on January 21, 2019 by CommitStrip

 
 
5 hours later…
9:25 PM
@BoltClock thanks for catching that missing quote on my meta post, I changed that sentence like 4 times while writing and am a little surprised I didn't miss something more
 
9:43 PM
Evenings
 
@PHPFan o/
 
@TylerH margin-bottom doesnt work except you ...............
 
?
 
Simply margin-bottom doesn't work with me!
my style
div
{

height :250px;
width :50%;
border :2px green solid;
background-color:yellow;
margin-bottom:10px;
position :absolute;
}
I expected my div block to be at the bottom
@TylerH Is my question clear now?
 
10:11 PM
I'm sorry, I need more context. Is this a question on SO? Or here in chat?
the default position for things with position: absolute is top: 0; left: 0; so if you want something to be positioned at the bottom you need to have bottom: 0; applied at least
margin is not what determines an element's origin point (aka its 'position'). It affects how much space other elements give its element when they're all in the same stacking context.
 
@PHPFan in other words, margin is somehow useless when using position:absolute
 
10:34 PM
@TylerH When I can use margin-bottom and margin-right ?
:45128899
@TemaniAfif
 
@PHPFan the question is not when but what is the pupose of margin. If you understand it then you will know when and where
 
^ you use margin when you have elements close together that you want to space out
 
margin is the space between an element and the nearest element, if not the body true?
 
jsfiddle.net/91wbg8of these paragraphs have 16px of margin between them (by default, paragraphs of margin-top and margin-bottom of 16px)
 
@TylerH So margin between an element and another not between an element and the body ?
 
10:37 PM
@PHPFan correct
all elements will be in the body
only the first element in each stacking context can have its position relative to the top of the body element changed via margin
and likewise for only the last element in the same can have its position relative to the bottom of the body element
all the elements in between will be pushed away from the nearest element
the exception is at the bottom, if there's not enough space to push all the elements without bumping into the bottom, it will extend the height of the body element (unless you have overflow: hidden or an explicit height value set on the body) and you'll have to scroll
another exception is margins collapse so if you have two elements side by side, and the one on the left has margin-right: 16px and the one on the right has margin-left: 16px, then they will collapse and you will have only 16px of space between them, not 32px
 
11:29 PM
@TemaniAfif oh, thank you for that explanation. I thought 'transform-origin' meant 'transform the origin' and that explains why I've never been able to get that to work lol.
can you not change the origin if there is no transform then?
 
@LukeIsitt even if it was transform the origin it will still remain related to transform and not to changing width/height as they are not transformation
it's not about origin here, it's how the element are placed. You increase width so it will logically increase on the right (from left to right)
 
I think my misunderstanding was because of my 2D/3D animation background, where we could physically move the origin point of an asset. Is there a reference I could read into to achieve what I want (increase right to left) ?
 
@LukeIsitt can you share again your code, I will give you some hints
 
@LukeIsitt you can simply try this in the hover part transform:scale(1.3);
 
11:39 PM
In this style the <p> element should be at the center true?
p
{
margin :  100em 100em  ;
position: absolute;
}
It is center vertically but align right!
 
@TemaniAfif that makes things easier - thank you for that. I should have been more diligent in my syntax :-)
 

« first day (2092 days earlier)      last day (1696 days later) »