Develop Reference

Enlarge the first slide of a carousel

I tried to create a carousel as follows. But I couldn't make it work. I also tried to use Center Mode in the slick carousel. But it only applies to the slide in the middle. If there is a method or library that can enlarge the first slide in this way, please indicate. thank you.

You can maybe look into adding an "active" class to an element of the slide - so then you can apply appropriate CSS to the active class and it will only affect the active element. This means that one of the images will be "active" and you can do whatever to it, and when it slides another will become "active" and inherit the properties, whilst the one from before will lose them.
https://www.w3schools.com/howto/howto_js_active_element.asp

Independed of your actual slide usecase you can target the first element among a group of siblings with the css :first-child pseudo class (see https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child).
Ive added a simple example of how to use it.
To transfer it to your swiper you will have to apply the :first-child pseudo class to the class wrapping your individual slides.
.wrapper {
display: flex;
}
.entry {
font-size: 15px;
}
.entry:first-child {
font-size: 20px;
}
<div class="wrapper">
<div class="entry">Entry</div>
<div class="entry">Entry</div>
<div class="entry">Entry</div>
<div class="entry">Entry</div>
</div>

You can achieve this design through these codes:
for the first image
.slick-slide.slick-current.slick-active {
.your class {
width: 100%;
}
}
for the following images
.slick-slide.slick-active {
.your class {
width: 80%;
}
}
you can add first-child if you like to design specific class

Dropzone fixed height with horizontal scroll

I'm not adept enough in advanced CSS or dropzone to know how to modify the template so any help is appreciated. I would like to create a fixed-width, single-row-height area for the dropzone thumbnails that scrolls left-to-right for showing any files currently in the dropzone uploader.
Any help is appreciated. FYI, I have already isolated the CSS styles that set the width: 50% and I'm assuming at least part of the work goes there.

OK, with some banging on the keys like one of those infinite monkeys, I was able to figure it out:
first I added an additional class name to my dropzone container:
<div class="dropzone hzScroll" id="lpDropzone"></div>
Then I added a style definition above it:
<style>
.dropzone .dz-preview.lp-preview {
width: 150px;
}
.dropzone.hzScroll {
width: 740px;
overflow: auto;
white-space: nowrap;
}
</style>

How to center <div> inside a <button>?

I have a round < button > with a < div > inside that represents a Unicode image. Currently the button is set to border-radius: 12px; height: 24px; and width: 24px; and the < div > is to font-size: 17px. The < div > Unicode image sits inside but not centered and the button is slightly off to the side.
How can I get the < div > to center inside an oval button despite what font-size the < div > is?
EDIT
I want to create a circle/round button with an emoji center to the middle of the button despite the button's size or the emoji image's size.
CSS for the button and emoji image for div:
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
And round/circle button with emoji image inside:
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
But it is not centered.
And is there a way to just back the emoji image alone to be clickable for a method?

First off:
A <div> is a block element by nature. It will always become 100% wide. If you want it to not be 100% wide, give it a display:inline-block so it won't get bigger than it needs to be. Then give it a margin:0 auto; or a text-align:center on the parent to center it.
HOWEVER, You are not allowed to put <div>s inside of <buttons>. it is invalid HTML
See this answer for more information:
Why can't a <button> element contain a <div>?
Or, you could read here, from W3 that only phrasing content is expected to be used within a button:
https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
If you do not know what phrasing content is, See this page:
https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content
-- if you are looking into styling buttons specifically, maybe this very short tutorial would help:
http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Here is a fiddle of a working button like yours:
https://jsfiddle.net/68w6m7rr/
I honestly didn't have many problems with this. I only replaced your <div> with a span, that's it.

can you post your code?
You should NOT need a div inside the button. If you need the button to have a specific style give it a class. You could do something like this
CSS:
button.something {
padding: 25px;
border-radius: 100%;
font-size: 20px;
border: none;
}
HTML:
<button class="something">👌</button>

For clean and valid code, you'd better use a :before or :after pseudo-element. This would also take care of the centering by default.
It's even easy to set the content. Either in css only, like this:
1.
button:before {content:"\25b6";}
(put your unicode value there and classes/ids as needed, then specify them in turn in css)
2.
Or if you need to specify the value in mark-up, drop a custom data-* attribute like this:
<button data-myunicode="\25b6"></button>
with each button taking it's own value, then drop this single line in css:
button:before {content:attr(data-myunicode);}

Before answering, let's clear some things out.
div is a block level element, used in an inline element, which is the button element. Browsers will consider this invalid and will fix it by removing the block element from the inline element. For more about CSS concepts like box model, box generation please refer to these resources:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Also, if you are using an IDE, make sure you have installed linting/hinting tools to help you out. These tools can help you in code authoring so, make sure you have them. If you are using software like VSCode or Sublime Editor, there are many free code analysis tools out there.
Let's go back to the code now.
You said
I want to create a circle/round button with an emoji center to the
middle of the button despite the button's size or the emoji image's
size.
I went ahead and created a plunk here where I demonstrate this. Essentially, I wrapped the button around a div which serves as a container and through some CSS magic, I made it to have the same height as its width. More on that you can find at this SO answer.
The #emoji-button then has a border-radius: 100% in order to be round, width is inherited from the parent, meaning it has the same as the container and it position is absolute in order to fit in the container.
The #thumb-emoji has changed to a span element. By user agent styles it has text-align:center.
<div class="button-group">
<button type="submit" id="emoji-button">
<span id="thumb-emoji"></span>
</button>
</div>
CSS:
.button-group {
position: relative;
width: 100px;
}
.button-group:before {
content: "";
display: block;
padding-top: 100%;
}
#emoji-button {
width: inherit;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 200%;
}
You can change the .button-group width to whatever width you want, it will still keep its 1:1 ratio.
You can use then media queries on .button-group to adjust the font-size of your #thumb-emoji, by setting your desired breakpoints.

How to add a class to parent element when there are several

as described in the title I would like to add a class to the parent element of one element if I have several of the parents.
To explain it in more detail what I mean, I'll give you a quick overview of the initial situation.
The markup:
<div class="box">
<h3>Title</h3>
<p>Some text</p>
<span class="iconfont more"></span>
<div class="slide">
<p>some more text</p>
<span class="iconfont close"></span>
</div>
</div>
As you see I've created a div "box" with some content, a span and also another div "slide" with some content and a span too.
The CSS:
.box {
width: 300px;
height: 500px;
position: relative;
}
.slide {
width: 300px;
height: 500px;
position: absolute;
top: -500px;
left: 0;
transition: all 500 ease-in-out
}
Let's add a bit of styling. The divs now have a width, height and position plus the slide box has received a transition to make the hole thing smooth. You may already know where the journey will end.
So let's do it by bringing up a new player:
.box.slided .slide {
top: 0;
}
For now the rest is pure routine. Add/remove the class .slided to .box by clicking the span. It works fantastic and everyone is happy except me. Because what if I have more of these boxes? Of course using IDs instead of classes to make them unique will solve this too. But what if I don't know how many of them I'll have? And that's exactly the point.
How can I add or remove the class .slided to exact this div.box that contains the span I'm clicking on?
Thanks for your help
Edit: code I've tried
$('div span').stop().click(function(event) {
$('box').addClass('slided');
});

Use $(this) and closest() to traverse the DOM in a relative fashion:
$('.more').click(function () {
$(this).closest('.box').toggleClass('slid');
});
Demo
Note that I've added a negative z-index to your slider div to prevent it from covering the 'more' link, rendering it inaccessible. This is probably not a viable production solution.
Here's an updated version with the transition working properly.

You can find your closest parent that matches your selector like this:
$('div span').stop().click(function(event) {
$(this).closest('.box').addClass('slided');
});
This code will now find its box parent in the context of the span that was clicked.

Show a div on click with cuepoint

Why won't this work?
Using cuepoint.js; you can define cue points within the html5 video.
But; I'd like to; in addition display a #div on click. And ONLY on click.
Once the video resumes; or the image is clicked again; the video resumes and the #div will disappear!!!!
#playdiv1 {
display: none;
}
$('#1').click(function() {
cuepoint.setTime(1)();
$("playdiv1").style.display = "block"; // Why wont this work?
});
This div should show along with the que:
<div id="playdiv1" style="min-height: 300px; min-width: 500px; display: hidden;">
</div>
Library in reference;
http://cuepoint.org/
FULL CODE ~
http://pastebin.com/HG0wVVaK
This doesn't make sense. THE cuepoint time; works..
$('#1').click(function(){
cuepoint.setTime(0)();
But when I add the '$('#playdiv1').show();' right underneath it. It doesn't work?
$('#1').click(function(){
cuepoint.setTime(0)();
$('#playdiv1').show();
});

Your selector is wrong.
Your code, $("playdiv1"), matches elements of type <playdiv1></playdiv1>, which isn't what you want.
The correct code, $("#playdiv1"), selects the element with id playdiv1.
You're also attempting to set the style attribute on the jQuery wrapper around the element. You need to either use the .show method, or access the first matched element.
Either of these will work:
$('#playdiv1').show();
// or
$('#playdiv1')[0].style.display = "block";

Since you have the CSS hiding the playdiv1 you do not need a display declaration inline with your HTML, so remove that -
<div id="playdiv1" style="min-height: 300px; min-width: 500px;">
and change the jQuery to
$('#playdiv1').show();

You can use this...
$('#1').on('click', function() {
cuepoint.setTime(1)();
$("#playdiv1").show();
});
And remove display: hidden; of the style property in the <div> tag...

Switching the order somehow worked;
$('#1').click(function(){
$('#playdiv1').show();
cuepoint.setTime(0)(); // Having this at the bottom; or after the show.
});