Fiddle: https://jsfiddle.net/st8q8z5g/5/
Partial CSS:
* {
padding: 0;
margin: 0;
}
body {
font-family: Verdana, Tahoma;
font-size: 11px;
}
b.title {
color: #FFFFFF;
clear: both;
display:inline-block;
padding: 0 0 5px 0;
font-size: 12px;
text-transform: capitalize;
}
b.message {
color: #EDEDED;
clear: both;
display:block;
}
I am running into two issues:
Why does the text alert get cut off if the screen is less than 820px?
(Would like the DIV to expand to show the alert automatically without
setting a height)
When pressing the "Pause" button the "Play" button is displayed but
it loses the CSS for the WIDTH and MARGIN. (The "Play" button does
not stretch and does not have the margin like the "Pause" button) [FIXED]
How can I fix the above issues.
I guess you can do a workaround where you can manually set the height of the blue container divs.
You can change the html like this:
HTML
<div class="blue-container" style="position: relative; overflow: hidden; width: 98%; padding: 1%; background: #0070C6;">
<div style="overflow: hidden; clear: both; text-align: left; position: absolute; right: 2%; top: 8%; z-index: 9999999; color: #FFF;">
<span id="msgCurr">1</span>/<span id="msgOf"></span>
</div>
<div class="light-blue-container" style="position: relative; overflow: hidden; width: 100%; margin: 0 auto; background: #009DF5;">
<div class="section group brClear">
<div class="col span_short vertAlignT span_pad_all">
Previous
Play
Pause
Next
</div>
<div class="col span_long vertAlignT span_pad_all alertHolder">
<div class="msgAlert">
<b class="title">The title alert goes here #1</b>
<b class="message">The alert message will go here 1...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #2</b>
<b class="message">The alert message will go here 2...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #3</b>
<b class="message">The alert message will go here 3...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #4</b>
<b class="message">The alert message will go here 4...</b>
</div>
</div>
</div>
</div>
</div>
And in the css, what you can do is, using a media query, keep it like this:
CSS
#media only screen and (max-width: 820px) {
.light-blue-container{
height:100%
}
.blue-container{
height:21em
}
...
Here is fiddle:
JS fiddle : https://jsfiddle.net/st8q8z5g/9/
As you are keeping the msgAlert div position to absolute, it fixes the fade problems, but when you change the screen size, it would need to act as if its position is relative but should also have the fade smoothness, which i think might be difficult to achieve. So instead of that, just change the containers height and set it manually when the screen size is less than 820px. But if you are unwilling to compromise the dynamic height, you can achieve it using jquery or javascript. But I think for now this should solve your problem.
Why does the text alert get cut off if the screen is less than 820px? (Would like the DIV to expand to show the alert automatically without setting a height)
The .msgAlert has position: absolute and the absolutely positioned elements do not take any height in the viewport. Removing position: absolute from there works:
.msgAlert {
/* position: absolute; */
display: none;
clear: both;
overflow: hidden;
}
When pressing the "Pause" button the "Play" button is displayed but it loses the CSS for the WIDTH and MARGIN. (The "Play" button does not stretch and does not have the margin like the "Pause" button)
The #playAlert has display: inline set very hard, even though if you change, it doesn't. It has to be block.
You can fix it using:
$('#playAlert').css("display", "block").hide();
If I remove position: absolute the message jumps as it fades out and then in...
Give a min-height for the container so that it doesn't jump. :)
The "Play" button isn't the same width if I use your fiddle :/
I left this for you to figure out intentionally. But you made to answer this. Here's the solution:
$('#playAlert').css("display", "inline-block").hide();
Working Fiddle: https://jsfiddle.net/e34pzhu3/
Related
Is it possible to show a dropdown whenever you hover over some specific area on an image? For example, if my mouse is within 50,62 and 70,80. I already tried this with invisible boxes and divs, but the only way I could get them to overlay the image was with position properties, but they wouldn't stay in place if I reshaped or resized the screen. Any ideas?
Demo : http://jsfiddle.net/v8dp91jL/12/
The code is pretty self-explanatory.
Just two imp things:
Everything should be in %
the .dropdown is inside .hover-area so that when you move your mouse from .hover-area to .dropdown, .dropdown doesn't disappear because it is still technically inside .hover-area even tho it's visually not
You can add some hidden element (span) positioned on some specific area and it is going to trigger the hover:
HTML:
<div class="image-wrapper">
<span class="image-hover-trigger"></span>
<img src="..." >
<div class="dropdown"></div>
</div>
CSS:
.image-wrapper { position: relative; }
.image-hover-trigger { position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; }
.dropdown { display: none; }
.image-hover-trigger:hover ~ .dropdown { display: block; }
I have seen both overflow scrolling with no scrollbars and Hide scrollbar for mobile devices while keeping the scroll ability ; unfortunately, both of these suggest a solution with position: absolute; and I think that I cannot really apply that to my problem.
The code in this example renders this:
Basically, the red outline boxes are divs of class .myBox, with a fixed width. These divs are side-by-side, in a container that is horizontally centered inside its container div. The top part is reserved for titles, which may be long. I'd like the titles to be rendered as on the right side one - but if they have focus, then I'd want the titles to scroll left-right with either keyboard arrow buttons, mouse wheel - or (also for mobile) dragging left and right.
Of course, since the right box's title has overflow: hidden;, there is no possibility to scroll. If I leave the scrollbar visible (overflow-x: scroll;) as on the left box, then the title is not visible at all (and I cannot scroll anyways).
So is it possible somehow to allow scrolling in the title parts of these boxes in this way (sort of like a marquee scroll behavior, but manual)?
Bonus question: is there a sort of a JavaScript library (or even better, a plain CSS solution), that would allow something similar - except, if the text is too long, it is truncated and ellipsis is added (so, instead of "My even longer" it should show "My even lon..." at start), then as you drag right to left, it also calculates ellipsis at start and at end - and when you come to the right end, it takes away the right ellipsis?
The example code is:
.mainHolder {
font-size: 14px;
border: 2px solid #999;
text-align: center; /* centers the span */
}
.centerer {
border: 2px solid #555;
display: inline-block; /* makes the span have the same width as its div contents*/
margin: 0;
padding: 0;
}
.myBox {
width: 8em;
border: 2px solid #F55;
border-radius: 0.5em;
display: inline-block; /* enables two myBox side-by-side */
}
.heading {
height: 1.25em;
border-radius: 0.25em;
background-color: #94B6F7;
overflow: hidden;
overflow-x: scroll;
}
/*just as example, remove the scroller of box2*/
#box2 .heading {
overflow-x: hidden;
}
<div class="mainHolder">
<span class="centerer">
<div id="box1" class="myBox">
<div class="heading">
My very long title
</div>
<div class="data">
Data: 1
</div>
</div>
<div id="box2" class="myBox">
<div class="heading">
My even longer title
</div>
<div class="data">
Data: 2
</div>
</div>
</span>
</div>
I have a div that after I click an element(button1), expands its height. I then have another button appear which allows you to shrink the div(button2). After I click button1, the div expands and button2 shows at the bottom. I can then click button2 to shrink the div back to normal, but if I expand the div again, button2 is now off the edge of the screen, albeit in the same bottom location, just far left rather than centered.
I had to set the margin on button2 to -25px since the absolute positioning was kicking it off-center. And I need to use absolute positioning since it seemed it was only way to get the button to appear at the bottom of div after it had expanded.
$(".button1").on("click", function(){
$(".button1" ).fadeOut(200);
$("#block3").animate({
height: '800px'
}, 600, function() {
$(".button2").fadeIn(200);
});
});
$(".button2").on("click", function(){
$(".button2").fadeOut(200);
$("#block3").animate({
height: '400px'
}, 600,function(){
$(".button1" ).fadeIn(200);
});
});
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: 25px;
}
.button1{
width: 50px;
height: 50px;
margin-top: 25px;
image-rendering: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class = "col-md-12" id = "block3">
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll.png" class = "button1" />
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll1.png" class = "button2" />
</div>
</div>
Uploaded the code.
https://jsfiddle.net/bs9xhe5e/2/
On the second click it changed the inline styling to display:block instead of display:inline, if you just add the display:inline into your jQuery it works;
https://jsfiddle.net/havL1z3m/
Added
$(".button2").css({display:"inline"});
The reason .button2 is showing up all the way to the left is that the absolute positioning gives it a default left of 0px.
Probably the easiest fix would be to remove absolute position, as well as the margin-left. Instead, to get .button2 to the bottom of the section, just set margin-top: 725px.
.button2{
width: 50px;
height: 50px;
display:none;
margin-top: 725px;
}
And then you will no longer need to use .css() to change bottom of .button2.
Check out this working fiddle: https://jsfiddle.net/gkpx7L15/
Change button2 styles like this:
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: -25px;
left:50%;//added style
}
https://jsfiddle.net/bs9xhe5e/3/
And everything will work fine
NOTE: Element will be positioned to the center of parent like this only when width is fixed like here. Example:
.someItem{
width: someWidth;//here we set some width to element
left: 50%; //Here we set position from the left
margin-left: -(somewidth/2);//here we set -half of the element's width for margin-left
}
Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.
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.