Develop Reference

HTML Horizontal draggable DIV

Im pretty new to html/css and currently trying to make an horizontal draggable slider for an Smartphone-Webapp.
Basically want i am searching for are three divs in a horizontal line, where div 1 and 3 are out of view.
If im dragging div 2 to left or right, 1 or 3 should appear.
Im creating my app with react and got already the div 2 to be draggable via an library.

First, make a parent div and add three divs to it. Stack the divs next to each other and for parent div add overflow-x: scroll. Each child should have a width and height to that of the screen. For that add min-width: 100vw; and min-height: 100vh;.
Now, to display the central div, the scrollbar of the div has to be moved.
parent.scrollLeft += document.querySelector(".C1").clientWidth;
This will position the scrollbar to the center. Essentially, it will move the scroll bar by the width of the screen.
Scroll down when you run the snippet to see the horizontal scrollbar.
var parent = document.getElementById("Parent");
parent.scrollLeft += document.querySelector(".C1").clientWidth;
* {
margin: 0px;
padding: 0px;
}
#Parent {
overflow-x: scroll;
display: flex;
}
.C1, .C2, .C3 {
min-width: 100vw;
min-height: 100vh;
}
.C1 {
background-color: red;
}
.C2 {
background-color: green;
}
.C3 {
background-color: blue;
}
<div id="Parent">
<div class="C1">
</div>
<div class="C2">
</div>
<div class="C3">
</div>
</div>

Caph-list not showing up

I am using Angular.JS with tizen to create a smart tv app. I want to get a list of subtitles to show on my video app but I keep getting this error: "Error: The caph-list's container and template view should have their own size such as width and height."
On my main html I have a "settings" directive here:
<settings></settings>
that uses settings.html to display a caph-list here:
<caph-list container-class="container" wrapper-class="setting-wrapper" items="item in subtitles"> <div class="item" focusable>{{item}}</div> </caph-list>
I've tried various setups with the container and wrappers such as this within my settings.html:
<div class="container">
<div class="wrapper">
<caph-list container-class="container" wrapper-class="setting-wrapper" items="item in
subtitles">
<div class="item" focusable>{{item}}</div>
</caph-list>
</div>
</div>
But I still am getting the same error.
Here is the CSS being used on the container and wrapper classes:
.container {
width: 800px;
height: 100px;
background-color: red;
}
.setting-wrapper {
width: 400px;
height: 100px;
left: 50px;
background-color: green;
}
.item {
width: 20px;
height: 20px;
background-color: blue;
margin: 10px;
}
Here is the subtitles array at the start:
$scope.subtitles = ["1","2","3"]
This array will change to an array of objects containing subtitle information when a video is chosen.

Your container has 0 px width, probably. Try setting an absolute value instead of percentage, i.e, 800 px instead of 60%), and make sure that the parent element has a width and height (not 0.)

How to tightly wrap a div around an image, but also resize the image to fit a content area if resolution is larger than content area?

I'm trying to build an image viewer with specific requirements. They are as follows:
The content area is a grid-area.
If the image is larger than the content area, it should be contained without stretching the image.
If the image is smaller than the content area, it should be centred within the content area.
There must be a div tightly wrapping the image at all times.
I've made a quick sketch below illustrating the desired behaviour for a portrait (top row), and landscape (bottom row). The images on the left column are the behaviour required if the image's resolution is higher than the content area.
Color code:
White box: content area.
Red box: image.
Blue border: image
wrapping div.
My primary approach so far has been to absolutely position the wrapping div around the image, which works fine until I try to get the resize to fit behaviour in. Usually this will break the tightly wrapped div.
I can also use Javascript, but because this is a foundation to build more on top of I'd rather try keep it to HTML and CSS.

You should ensure that your div just assumes the size of the content, the img in this case. So don't use absolute. You mentioned using grid, so the below example will generate the a grid with a main section wrapped by 20px padding. Then just use the max value on the img to make sure it does exceed the grid box's size. Then center it within the grid box:
const width = document.querySelector( '[name=width]' );
const height = document.querySelector( '[name=height]' );
const image = document.querySelector( 'img' );
function onchange(){
image.src = `http://placehold.it/${width.value}x${height.value}`;
image.style = '';
}
width.addEventListener( 'change', onchange );
height.addEventListener( 'change', onchange );
window.addEventListener( 'DOMContentLoaded', () => setTimeout( onchange, 100 ) );
body, html { height: 100%; }
body { padding: 0; margin: 0; }
main {
display: grid;
grid-template: "left top right" 20px "left main right" 1fr "left bottom right" 20px / 20px 1fr 20px;
height: 100%;
}
main div {
grid-area: main;
border: 1px solid red;
display: inline;
align-self: center;
justify-self: center;
}
main div img {
max-width: 100%;
max-height: 100%;
display: block;
}
#inputs {
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
transition: transform .4s;
width: 100%;
padding: 10px;
background: black;
color: white;
}
body:hover #inputs {
transform: translateY(0);
}
<main>
<div>
<img />
</div>
</main>
<div id="inputs">
<label>Width: <input name="width" value="200" type="number" /></label>
<label>Height: <input name="height" value="200" type="number" /></label>
</div>
I have included some javascript so you can test out different sizes of image. I added a img.style = '' to trigger a CSS recalculate after adding the new image, otherwise its size will be incorrect on load.

How to put line between two texts (css or js)

I use bootstrap UI and I have this code:
<div class="row">
<div class="col-xs-12 col-ms-12" style="margin-top:15px !important;">
<h2><strong>1 x Gourmet Tasting Menu for Two</strong><span class="pull-right">£96.00</span></h2>
</div>
</div>
Now I need to put dots (.) between name and price so something like this:
<h2><strong>1 x Gourmet Tasting Menu for Two</strong>..........................................................<span class="pull-right">£96.00</span></h2>
Screenshoot:
What is the best way to do that? Some JS code or CSS code ?

For a CSS only solution you could use a pseudo element to create the dots with a border. The dots would run the whole width of the row. To hide the dots and allow them to have a "dynamic" width between the item text and price you add a background color to those elements that will cover up the extra dots. Normally the border would sit below all of this, so we pull the pseudo element up with relative positioning to hide it behind the text elements.
strong,
span {
padding: 0 5px;
background-color: white;
}
span {
float: right;
}
h2:after {
content: '';
display: block;
position: relative;
bottom: 8px;
width: 100%;
border-bottom: 2px dotted #333;
z-index: -1;
}
<h2><strong>Text Here</strong><span>$9.99</span></h2>

Position badge over corner of image automatically

I have a layout where images "float" within a certain area. The layout looks like this:
The source like this:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
The CSS looks like this (in SCSS):
div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
&.last { margin: 0 0 20px 0; }
a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; margin-bottom: 10px; }
img { margin: 0; border: 1px solid $dark3; display: inline-block; vertical-align: middle; #include boxShadow;
&.canonical { border: 1px solid $transect; }
}
.location, .taxonomy { width: 176px; }
.location { font-weight: 700; }
.taxonomy { line-height: 10px; font-size: 10px; text-transform: uppercase; height: 20px; overflow: hidden; }
}
div.transect_badge { height: 20px; width: 20px; background: url('/images/transect-badge.png'); }
So, basically the images are sitting vertically-aligned middle and text-aligned center, and they have a maximum width of 176 and max height of 158, but they're cropped to maintain the original aspect ratio so the actual top corner of each image falls differently depending on which image it is.
I have a badge that I'd like to put in the top corner of certain images (when the image is "canonical"). You see the style for this above (div.transect_badge).
The problem, of course, is I don't know where the top corner of the image will be so I can't hardcode the position via CSS.
I assume that I'll need to do this via jQuery or something. So, I started with a jQuery method to automatically append the badge div to any canonical images. That works fine, but I can't figure out how to position it over the top left corner.
How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)
--EDIT--
Here's the problem: The image is floating inside a container, so the corner of the image might fall anywhere inside the outer limits of the container. Here's an example of what happens if I try to use position:absolute; top:0; left:0 inside the same container the image is bound by:

It took some tryouts, but here it is: the size independent image badge positioner.
HTML:
<div class="tile">
<span class="photo">
<img src="/photos/10.jpg" alt="10" /><ins></ins>
</span>
<p class="location">Houston</p>
<p class="taxonomy">T6 | Conduit | Infrastructure</p>
</div>
CSS:
.tile {
float: left;
width: 176px;
height: 206px;
margin: 0 20px 20px 0;
}
.photo {
display: block;
width: 176px;
height: 158px;
text-align: center;
line-height: 158px;
margin-bottom: 10px;
}
a {
display: inline-block;
position: relative;
line-height: 0;
}
img {
border: none;
vertical-align: middle;
}
ins {
background: url('/images/badge.png') no-repeat 0 0;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
}
Example:
In previous less successful attempts (see edit history), the problem was getting the image vertically centered ánd to get its parent the same size (in order to position the badge in the top-left of that parent). As inline element that parent doesn't care about the height of its contents and thus remains to small, but as block element it stretches to hís parent's size and thus got to high, see demonstration fiddle. The trick seems to be to give that parent a very small line-height (e.g. 0) and display it as an inline-block. That way the parent will grow according to its childs.
Tested in Opera 11, Chrome 11, IE8, IE9, FF4 and Safari 5 with all DTD's. IE7 fails, but a center-top alignment of the photo with badge at the right position isn't that bad at all. Works also for IE7 now because I deleted the spaces in the markup within the a tag. Haha, how weird!

EDIT3: This solution is very similar to my original solution. I didn't really look at your code much so I should have noticed this earlier. Your a tag is already wrapping each image so you can just add the badge in there and position it absolute. The a tag doesn't need width/height. Also you must add the badge image at the beginning of your a tag.
Demo: http://jsfiddle.net/wdm954/czxj2/1/
div.free_tile {
width: 176px;
height: 206px;
float: left;
}
a.img_container {
display: block;
margin-bottom: 10px;
}
span.transect_badge {
display:block;
position: absolute;
height: 20px;
width: 20px;
background-image: url('/images/transect-badge.png');
}
HTML...
<a class="img_container canonical" href="/photos/10">
<span class="transect_badge"></span>
<img class="canonical" src="path/to/img" />
</a>
Other solutions...
In my code I'm using SPAN tags so simulate images, but it's the same idea. The badge image, when positioned absolute, will create the desired effect.
Demo: http://jsfiddle.net/wdm954/62faE/
EDIT: In the case that you need jQuery to position. This should work (where .box is your container and .corner is the badge image)...
$('.box').each(function() {
$(this).find('.corner')
.css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
$(this).find('.corner')
.css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});
EDIT2: Another solution would be to wrap each image with a new container. You would have to move the code that you use to center each image to the class of the new wrapping container.
Demo: http://jsfiddle.net/wdm954/62faE/1/
$('.img').wrap('<span class="imgwrap" />');
$('.imgwrap').prepend('<span class="badge" />');
Technically you can just add something like this to your HTML though without using jQuery to insert it.

Use an element other than <div>, e.g. <span> and put it inside your <a> element after the <img> element. Then, give the <a> element position:relative; and the <span> gets position:absolute; top:0px; left:0px;. That is, if you don't mind the badge also being part of the same link - but it's the easiest way. Also, the reason for using <span> is to keep your HTML4 valid, <div> would still be HTML5 valid, however.

I did find one solution using jQuery. I don't prefer this because it noticably impacts page loading, but it is acceptable if nothing else will work. I'm more interested in NGLN's idea which seems promising but I haven't entirely figured out yet. However, since this thread has picked up a lot of traffic I thought I'd post one solution that I came up with for future readers to consider:
Given this markup:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<span class="transect-badge"></span>
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
Same CSS as in question except:
span.transect-badge { display: block; height: 20px; width: 20px; position: absolute; background: url('/images/transect-badge.png'); }
Then this jQuery solves the problem:
$(function() {
$('img.canonical').load( function() {
var position = $(this).position();
$(this).next().css({ 'top': position.top+1, 'left': position.left+1 });
});
});
Like I said, though, this incurs noticeable run-time on the client end, so I'd prefer to use a non JS solution if I can. I'll continue to leave this question open while I test out and give feedback on the other solutions offered, with hopes of finding one of them workable without JS.