I'm trying to use draggable divs, but the ghost image I get while dragging is wrong. The divs are inlined, and there is a hidden overflowing part. Here is a minimal example that demonstrates the problem. HTML:
<div class="box" draggable="true">
<div class="inner-box"> </div>
</div>
<div class="box">
</div>
And the CSS:
.box {
overflow: hidden;
display: inline-block;
width: 80px;
height: 80px;
background-color: #ccc;
}
.inner-box {
position: relative;
left: 40px;
top: 40px;
width: 80px;
height: 80px;
border: 2px solid black;
}
JSFiddle: https://jsfiddle.net/gokjkqxm/
If you try to drag the first div, the ghost image contains a part of the second one, which is something I'd like to avoid. Does anybody know of a way to solve this issue without using images?
Thanks in advance!
Related
I'm looking for a way to have two div over another one but without the text going under or over the floating div. What I mean by that is when the text from the <div class="text"></div> element is reaching <div class="barcode"></div> or <div class="uniq_barcode"></div>, I don't want the text to wrap on another line instead of going under the div. Here's an image with the div I'm trying to create.
I've tried to use <img> tag with align:right but it doesn't work for the second div. I think flexbox or grid would do the trick, but I'm not strong enough with those thing.
My code look this way and can actually be changed:
<div class="custom-container">
<div class="barcode"></div>
<div class="text"></div>
<div class="uniq_barcode"></div>
</div>
My CSS look like that:
.barcode, .uniq_barcode {
width: 300px,
height: 300px
}
The only thing I really need is the <dev class="text"></div> element for my text.
Thanks you.
Considering the structure of your HTML code, a first try would be the following CSS (not optimized). However, as #Kerri suggests, it'd be better to use flexbox in your case.
.custom-container{
position: relative;
height: 300px;
width: 300px;
}
.text,
.barcode,
.uniq_barcode{
position: absolute;
}
.text{
top:0;
left:0;
border: 5px solid red;
height: 300px;
width: 300px;
z-index: 1;
}
.barcode,
.uniq_barcode{
border: 5px solid blue;
height: 100px;
width: 100px;
z-index: 100;
}
.barcode{
top: 0;
left: 200px;
}
.uniq_barcode{
top: 200px;
left: 200px;
}
You can test the code at this link: https://jsfiddle.net/8vrwto16/1/
CSS grid and flex were developed for just this sort of layout. This seems like a job for flexbox.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Can't wrap my head around it. Doesn't happen with smaller resolutions.
The question I am asking is how do I prevent this from happen.
Example
https://jsfiddle.net/eddietal2/qgLvsx2v/
CSS:
.svg-wrapper {
width: 300px;
height: 400px;
background-color: white;
margin: 25px 25px 120px 25px;
display: inline-block;
position: relative;
z-index: -99;
}
HTML
<div class="svg-wrapper">
<h1>Hello</h1> // Element that causes all the problems.
<div class="caption">
<h2>Day 1</h2>
</div>
</div>
It was behaving this way because of the display being set to inline-block. The answer was adding:
vertical-align: top;
ugghhh so simple.
I've been looking at this question and I'm having trouble getting my progress bar to work exactly the way it should.
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="upload_status"></div>
</div>
<div id="bar_color2">
<div class="upload_status"></div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
}
#bar_color1 {
background-color: #FFFFFF;
color: #000000;
width: 100%;
}
#bar_color2 {
background-color: #000000;
color: #FFFFFF;
width: 0px;
}
#bar_color1, #bar_color2 {
height: 20px;
position: absolute;
top: 0;
left: 0;
}
As I dynamically increase the percent of #bar_color2 and update .upload_status, I end up with something like this:
Whereas I want the text to remain centered one on top of the other, so when the progress reaches half way the text appears to change color... I've tried various things, swapping divs around, adding another parent, but I just can't seem to figure it out. Any ideas?
I know that this doesn't really help your question, but using the native HTML <progress> element will save you a lot of headaches when interacting with it using JavaScript if you're targeting relatively modern browsers.
edit: The stuff I posted earlier doesn't work, but this does:
http://jsfiddle.net/mYEM3/8/
Just copy from there.
You can just change the color of the text that is on the progresive loading bar(not the middle one/the white one) to black and the annoying percentage should dissapear.
And about when the progress reaches half way the text is supposed to change color problem, i think you can do this as well with the change color thing.
Here's a rough idea that will work:
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="progress_text1">50%</div>
</div>
<div id="bar_color2">
<div class="progress_text2">50%</div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
overflow:hidden;
}
#bar_color2 {
background-color: #FFFFFF;
color: #000000;
width: 50%;
}
#bar_color1 {
background-color: #000000;
color: #FFFFFF;
width: 50%;
}
#bar_color1, #bar_color2 {
height: 20px;
position: relative;
float:left;
overflow:hidden;
}
.progress_text1{
position: absolute;
left:100px;
width:100px;
text-align:center;
}
.progress_text2{
position: absolute;
right:100px;
width:100px;
text-align:center;
}
I Think its only possible with javascript.
Its not complete, and only a little example with changing the "color" after 50%, but the trick is to using special "layers" for that: http://jsfiddle.net/J92Bv/
<div id="progress_bar">
<div class="progress_left" style="width: 50%;"></div>
<div class="progress_right" style="width: 50%;"></div>
<div class="text_1">50%</div>
<div class="text_2">50%</div>
</div>
You must change the z-index if the "white" text overlaps with the first progress-bar layer. In combination and a little more time you can create an progressbar, there change the color correctly when the bar appears to the text. I think here you must use a little helper layer there is positioned after 50%.
I have images that are also links, coded like this:
<img src="pages/squirrely.png" />
They work fine, but I want it to be a link, only if you click the general middle of the photo. If you click on the outer regions of the image, I don't want any linking to happen.
I tried changing the width and height of the lin, but it didn't work. My css is:
#magazine a {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
I would not work with an imagemap in this case, but do something like this:
The HTML:
<div class='container'>
<img .../>
<a ... ></a>
</div>
The CSS:
.container {
position: relative;
}
.container img {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
.container a {
display: block;
width: 60px;
height: 60px;
position: absolute;
top: 25px;
left: 25px;
}
Basicly this puts your link on top of your image. I find it much easier to play with the positioning and the dimensions of the link this way. (I did not test the code, but i think it should work)
There are several web applications that'll allow you to choose the coordinates for the mapping. I've tried this one with great success:
http://www.maschek.hu/imagemap/imgmap
I hope this helps you with your project!
I'm working on a photography website. One of the things we're trying to aim for is a 'film strip' type of display for the images, as opposed to the usual thumbnail or 'tabulated' formation.
It works with tables. No problemo. The only thing that makes me not want to use a table is the fact that I'm not showing data, there's no need for columns and rows.
Another thing that is a slight spanner in the gears is the fact that I'm putting the images as backgrounds of divs. This is for basic 'copy protection', and also so I can overlay items over the photo on hover of the div.
The way I've got it coded at the moment is:
container [
[image]
[image]
[image]
[image]
]
I've drawn a skitch to help out with the visualisation of this..
As soon as the width of the container is met, the image-divs are dropping to the next line.
The CSS for the Divs is as follows:
.gallery_block_image_p {
width: 354px;
height: 532px;
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 10px;
float: left;
background-repeat: no-repeat;
}
and for the container...
#gallery {
border: 0px solid black;
position: relative;
top: 99px;
/* width: 8000px; */ /* When this is uncommented it works, with a huge amount of space to the right */
height: 532px;
z-index: 99;
}
and last but not least, the HTML used for the image divs...
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(gallery_img/ith/adamd_20101021_137.jpg);"></div>
if you remove "float:left;" from the gallery block style and add "white-space:nowrap" to the container then it should work.
Edit: I think something like this is what you're looking for
<div style="width: 800px; overflow-x:auto; white-space: nowrap;">
<div style="width: 300px; height: 100px; background-color: #f00; display: inline-block;"></div>
<div style="width: 300px; height: 100px; background-color: #0f0; display: inline-block;"></div>
<div style="width: 300px; height: 100px; background-color: #00f; display: inline-block;"></div>
<div style="width: 300px; height: 100px; background-color: #ff0; display: inline-block;"></div>
</div>
Try specifying the width of 800 and adding an overflow declaration:
#gallery {
border: 0px solid black;
position: relative;
top: 99px;
width: 800px;
height: 532px;
z-index: 99;
overflow:auto;
}
try using the overflow property for the container. so something like this:
#gallery {
overflow-x: scroll;
overflow-y: hidden;
}
here are some examples http://www.brunildo.org/test/Overflowxy2.html
I think you might need to define the width of your gallery! see fiddle
I have added the view to hold it all, but like you seemed to find there was no way of forcing a line, might be able to do something with positioning.
Alternatively declare the width at the top of the page with the server side logic instead of the javascript on the fiddle
Not tested, but could you use the
white-space:nowrap;
css property to stop the divs from wrapping when you specify the width?
I have done some thing very similar with a site and was challenged by this as the user would be adding / removing divs on his own. My solution for this was to use jQuery to count each item/div within the container and set the width of the container based on items within the container.
jQuery:
$('.gallery-item').each(function(scroll){ n = n+310; });
$('#gallery').css( "width", n);
});
I came up with a bit of a hacky solution, the only downside of which, you need to know the width of the scrolling gallery. I'm sure that's pretty easy to predetermine or calculate. Below is the code and here is an online demo.
Some cheeky jQuery will allow you to calculate it all on the fly if results are dynamic.
<style type="text/css">
#gallery {
border: 0px solid black;
position: relative;
width:500px;
height: 450px;
overflow:scroll;
overflow-y:hidden;
z-index: 99;
}
.gallery_block_image_p {
width: 354px;
height: 400px;
margin: 0 0 0 10px;
padding: 0;
background-repeat: no-repeat;
display:inline-block;
}
#stretch{
width:1850px;
}
</style>
<div id="gallery">
<div id="stretch">
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_2_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_3_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_4_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
</div>
</div>