How to Use Display: None in IE 8 Without Losing Image Dimensions - css

I have an image slideshow that uses JavaScript to apply a class called .hide to all images but the first on page load. This hides all of the images but the first.
I noticed in Internet Explorer 8 (which I have to support) that when the slideshow is loaded, the first image displays correctly (because it's not hidden) but when I click "Next" and the hidden image is revealed, that image has zero dimensions.
After researching online, I saw that for IE 8, elements with display: none will not have any dimensions.
My JavaScript waits for the window and images to load before running, which I thought would allow the images to have a dimension in IE 8 before they were hidden:
window.onload = function() {
// Hide all but first photo
hidePhotos();
addControls();
progressSlides();
};
I read that visibility: hidden or opacity: 0 could be used instead. However, this leaves a lot of white space below the slideshow where the images are hidden.
HTML:
<div class="slideshow">
<figure class="image">
<img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
<figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
</figure>
<figure class="image">
<img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
<figcaption>Insert caption</figcaption>
</figure>
<figure class="image">
<img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg" />
<figcaption>Insert caption</figcaption>
</figure>
CSS:
.slideshow {
position:relative;
/* To position slideshow buttons */
max-width:920px
}
.hide {
display: none;
}
.slideshow img {
width:100%;
border-top-left-radius:10px;
border-top-right-radius:10px;
margin-top: 1em;
}
JS Fiddle: http://jsfiddle.net/amykirst/tnLLhu4j/
I tried to use absolute positioning to position the images at the top of the containing .slideshow div, but this caused two problems:
It gave .slideshow a height and width of 0 because its children were all absolutely positioned. The lack of dimensions allowed the slides to go beyond the layout, instead of being contained by .slideshow.
Any text on the page was obscured, so if there was text above or below the slideshow, the slideshow would appear on top of it.
Also, with absolute positioning, I couldn't set the slideshow container (.slideshow) to have a max-width of 100% to contain the images and make them responsive, because the slides were removed from the flow.
How can I hide the images on page load and have them retain their dimensions in IE 8 without leaving a bunch of white space below the slideshow, as opacity: 0 or visibility: hidden would do?

I found a solution that worked.
.hide {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
}
I needed the hidden image to span the entire width of the slideshow (otherwise, when the hidden class was removed, IE 8 gave the image zero dimensions), so I used left and right positioning of 0.
Because absolute positioning was only used for elements that were hidden, it didn't cause problems with the layout that I mentioned earlier because only the hidden elements were affected.

Related

CSS positioning relatively to parent's parent across angular components

currently I'm working on an image galery and image upload tool. In the image below there is a demonstration of my current and my wanted galery state. The user is able to click on the thumbnails and see the large picture below that current thumbnail row in full size, pushing the next rows relative to the components height.
images.component.html
<div class="container">
<div class="image-box" *ngFor="let img of images$ | async">
<img class="mat-elevation-z1" [src]="environment.img + '/images/thmb/' + img.id + '.jpg'" (click)="selected = img">
<app-image-details *ngIf="selected?.id === img.id" [img]="img"></app-image-details>
</div>
</div>
images.component.scss
The theme-flexfix.scss fixes all images widths equally, while using flex. flex-container-wrap-items() makes the container flex and flex-wrap. The .image-box items are flex: 1.
#import 'src/theme-flexfix.scss';
.container {
#include flex-container-wrap-items(128px);
}
.container > .image-box {
#include flex-wrap-fix(128px);
padding: 4px;
box-sizing: border-box;
/* position: relative; */
}
img {
width: 100%;
}
image-details.component.html
<img [src]="environment.img + '/images/' + img.id + '.jpg'">
<p>
Lorem ipsum
</p>
image-details.component.scss
:host {
/* position: absolute */
/* left: 0 */
}
Tried the commented styles in resulting in what I want, but not pushing the other content. I think there is an easy solution, but for now I can't get it.
Thanks for your help.
I assume you are trying to replicate Google image search.
I would go about it like this:
When image is clicked, calculate how many images in a row you are displaying.
Inject DIV with larger version of the image after the last image in the row.
The idea is to always inject DIV after the end of current row.
This way, your DIV will not be absolutely positioned, but instead will flow with HTML and no absolute positioning hacking is required.

Page transitions keeping a footer and header for variable page content

I am using angular and css for sliding page transitions, and had a nice working version of transitions similar to this plnker. This worked ok but the css was using 'absolute' which took the element in question out of the flow of the page, hiding the rest of it - namely the footer.
The content of what is being transitioned in varies page to page. The footer is hidden because the many parents of the content being displayed have height 0px;
So I removed absolute and now the transitions happen something like this, where the divs are again in the flow of the page, but when transition are floated above and below each other.
I can use transitions to make the new div enter at the same level as the exiting div by changing
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,0,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,0,0);
}
to
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,-100%,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,-100%,0);
}
as shown in this plnker. However, the issue is that the div height is still affecting the page, so you can see a vertical scroll bar as the new div enters and the rest of the page is affected.
The divs which enter the page can be different heights, so I don't think simply setting a defined height on a parent div and setting overflow-y: hidden is an option.
Here you go. i edited the first fiddle you posted. Styling is inline because I couldnt be bothered changign the css but you get the drift.
<nav>
<a ng-click="go('/page1', 'slideLeft')">Page 1</a>
<a ng-click="go('/page2', 'slideRight')">Page 2</a>
<a ng-click="go('/page3', 'slideDown')">Page 3</a>
<a ng-click="go('/page4')">Page 4</a> <!-- note: no transition specified -->
</nav>
<!-- App Content Container -->
<div class="page-container">
<div ng-view="" class="page-view" ng-class="pageAnimationClass"></div>
</div>
<footer>
<div style="height: 50px; width:100%; position: fixed; bottom: 0; display: block; background: white; "><br>Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer</div>
</footer>
The example you posted uses a fixed position header with an absolutely positioned full screen content area. The content actually moves right and left underneath the header and the footer i added.
There are other ways to do it but fixed headers and footer generally work well with web apps.
if you wanted a dynamic footer, you would need to restyle your content area. I would center your header and footer items with a margin: 0 auto and make the content full width, with a centered div inside it that is the animated element. It should slide left and right as you intend without breaking your footer.
Keep in mind though that if you transition in items of differing height your footer will jitter as it repositions itself. Maybe consider adding a callback animation on your footer that fades it out and in again whenever the page transition animation plays and stops.

Position image into background

I'm working on a website for a girlfriend of mine.
But I'm stuck positioning a the logo.
Here is the website I'm talking about:
http://xntriek-test.s3-website-eu-west-1.amazonaws.com/
I tried using z-indexes but don't work. I also tried setting an background image for the body.
But then I'm to limited with sizing the image.
I'm using Twitter bootstrap to put this thing together.
At the moment this is the class I'm using for the logo:
.logo{
position: absolute;
top: 25px;
left: 25px;
height: 45%;
width: 30%;
z-index: 1;
}
At the moment I'm positioning the image in a span along side the main content.
But because I'm using position: absolute this wouldn't make a difference were I put it.
If any body has any ideas how I could solve this, maybe a different approach then I'm doing right now. Any help welcome!
You need to modify your CSS along the following:
<div class="span6 offset3" style="position: relative; z-index: 1">
z-index affects positioned elements, so just add position: relative to your span of interest.
I would create a special class "z-wrap" and modify the style sheet.
<div class="span6 offset3 z-wrap">
In CSS style sheet:
.z-wrap {position: relative; z-index: 1}
Reference: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index
Note You may have to adjust the value of z-index depending on any z-index value you may have set in the logo container.
First you are distorting the logo with your css, if you want your image to be responsive position it in an responsive element, position this absolut and let the image adjust it's size.
#logoContainer {
position:absolute;
top:25px;
left:25px;
width:30%;
z-index:-1;
}
img.logo{
width:100%;
height:auto;
}
your html should look something like this:
<div id="logoContainer">
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>
Put this right after the opening of your body tag and not in some other elements.
By putting it in other elements the logo inherits their z-index and you can only influence it's z-positioning inside the parent but not on the overall page.
One thing to remember when using the z-index attribute :
Only the elements placed using their "position" attribute (relative, absolute or fixed), can be affected by the "z-index".
So if you want to fix your issue, either put your logo as a background image, either use position in the CSS of the content.

Link with background image

I have some 10 buttons with image-text and hover states for each.
What I want to do is use background-position, width and height to only show the part of the background image sprite and hover background-position to show the hover style.
I'll also use an image replacement class on the element so that it remains accessible and indexable.
So (measurements are random):
[CSS]
.menu{background-image:url(path/to/sprite.png);}
.button-1{width:200px;height:30px;background-position:0 0;}
.button-1:hover{background-position:0 -30px;}
.button-2{width:250px;height:30px;background-position:100px 0;}
.button-2:hover{background-position:100px -30px;}
/* Image Replacement Class (H5BP, #necolas && BEM) */
.ir{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent;}
[HTML]
Button 1
Button 2
What I want to know is if that is a good way of doing this or should it be done differently, like:
<img src="image.png" width="200" height="30" alt="Button 1"/>
Then with JavaScript swap the image on hover.
Is there any difference between the two in terms of accessibility and robots?
Thank you.
What you are doing is correct. Do not forget to add a display: block; to that link. Something else you can do is putting the actual link text in a span and then positioning that span absolute out of the screen. Like so:
<span>Home page</span>
And in your css file:
a > span {position: absolute; top: -10000px;}

img maximized in the background inside a div

I have been fiddling around with this for some time now, but I still don't understand how it should be done.
I would like the image to be maximized (100%/100%) in the background of the itemtemplate div, but right now it just makes it fit inside the div which is 250px/250px.
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<img style="-ms-grid-row-span: 2;" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle">
</h6>
</div>
</div>
Any ideas ? thx.
You can position the image absolutely and set the height and width to 100% in your CSS files.
.itemtemplate > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Just make sure you remember to position the parent div and the other children of .itemtemplate relatively:
.itemtemplate, .itemtemplate > div {
position: relative;
}
The parent needs to be positioned relatively to ensure the img is positioned within that element. The other children of the parent need to positioned relatively to ensure that they are drawn above img (as positioned elements are drawn after static elements). If you have trouble seeing the other child elements then you can set their z-index.
Working example: http://jsfiddle.net/sjsNJ/
Need to use CSS background-image.
div.itemtemplate
{
background:url(PATH_TO_IMAGE);
background-size:100% 100%;
background-repeat:no-repeat;
}
See site below for more info.
http://www.w3schools.com/cssref/pr_background-image.asp
I am not familiar with the attributes you are using. But, in order to use an image for the background. There are couple of ways.
If it is <body> or <table> you can also define them by using doing something like this
<body background="link/to/image.jpg">
But the global way, which every element supports would be to define them using CSS
<div style="background-image: url("link/to/image")">...</div>
Now, coming to the image part
Whenever you are using a background image,
It is never going to re-size to fit the container. Unless you use CSS3.
/* CSS3 Snippet to resize a background */
div
{
background-image:url("link/to/image");
-moz-background-size:80px 60px;
background-size:80px 60px;
background-repeat:no-repeat;
}
If the container is big, it will start repeating itself to fill the area. Which can be controlled to repeat or not repeat. Like
div {
background-image: url("link/to/image");
background-repeat: no-repeat; /* similary repeat-x and repeat-y */
}
However, what you are trying to use in using a <img /> to act as a background, which is semantically wrong and I do not recommend it.

Resources