I am trying to create a site with a set of images that can be viewed by scrolling the page vertically or by clicking a button that links to the next image in the set using an anchor tag.
The images are centered vertically and horizontally inside a container that responds to the size of the browser window.
<a id="1">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
<tr valign="middle"><td align="center">
<img src="image.png">
</td></tr>
<tr><td>
Down
</td></tr>
</table>
</a>
I know of no other way to achieve this but to use tables though I am aware that it is very poor markup.
I have also found that the site renders correctly in Firefox 16.0.2 but not in Safari 5.0.6 where after the second image in the set the tables appear to grow in height exponentially.
How can I code this site for better accessibility and with proper markup?
The way I would probably do it without resorting to too many hacks would be to just put each image in a div, set some dimensions based on css, then use javascript to adjust accordingly.
Here is the sample HTML:
div class="item">
<img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>
<div class="item">
<img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>
The sample CSS:
html {height:100%;}
body {height:100%;}
div.item {
width:100%;
height:100%;
text-align:center;
}
div.item > img {
max-height:100%;
max-width:100%;
}
And finally the jquery which simply readjusts sizes on resize and at the start.
$(document).ready(function(){
//Setup function for sizing.
var win = $(window), body = $('body');
var els = $('div.item');
function DoResize() {
var height = win.height(),
width = body.width();
els.each(function(i,el){
var ele = $(el);
ele.height(height).width(width);
var img = ele.find('img');
var difference = (height - img.height())/2.0;
img.css('margin-top',difference+'px');
});
}
DoResize();
$(window).on('resize', DoResize);
});
I set up a jsfiddle for you to see it in action. It also readjusts for resizing of the window. It should work in most browsers even IE7 according to caniuse.com.
Update:
To include the captions and such you can do a variety of things. The easiest would be to add relative positioning to each item, then absolute positioning to each element you want to position with respect to each image.
You would do the html more or less like so:
<div class="item">
<img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
<div class="caption">
Caption for Item 1
</div>
<div class="link">
Item link
</div>
</div>
Then the style would just have updates for the other classes within the parent div.
I updated the jsfiddle here to show you some things you can do: link
Updated again:
Add the following script tag to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
before the Resizing script.
Damn Miltox beat me too it. His is better though. Just to say the reason safari was weird was you had multiple tables set at 100% height each stacked on top of each other so they were adding up, you should have had one big table. Miltox's answer will have fixed that all anyway.
Related
I need many images to change when mouse hover on a image.Me try one but its change only one image how can i change many images on hover on image.My try fiddle
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});
If I correctly understand your problem, you want an image slider when you hover on the container.
The images are in inline-block are they are set to white-space: nowrap. So, that they don't wrap. container is set to overflow: hidden, it hides the extra images.
The images are shown by animating the margin-left of the inner div. So, it is like the inner container is moving but the container stays still.
You can modify it however you like, vertical animation, using css transitions and stuff.
I cannot post the code here because of the shortened url of the images.
You can test and modify it here, it's a pen.
I'm trying to have a basic HTML page, split three way, top and bottom panes should have a fixed fix, or autosize, and middle should fill the remaining.
I got it working once using position:fixed, but that is very ugly and doesn't work once things get more dynamic.
I finally got this to work on Chrome using tables and making the height:100% in the middle tr. I celebrated, then tried Firefox, and it does not work.
Here is the fiddle,
https://jsfiddle.net/b1uxcupv/6/
HTML is basically,
<html style="height:100%;width:100%;max-height:100%">
<body style="height:100%;width:100%;">
<table style="height:100%;width:100%;">
<tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
<tr><td style="height:100%;width:100%;background-color:grey">
<div style="overflow:auto;height:100%">
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</td></tr>
<tr><td style="height:50px;width:100%;background-color:green"></td></tr>
</table>
</body>
<html>
I have basically two versions of this, one the page should fill the browse window with the middle pane taking all the extra room and scrolling if required.
The second is basically the same but the whole thing is in a fixed sized div inside a page. Both work on Chrome, but Firefox does not give the scrollbar in the middle pane, it just ignores the max-size and keeps filling the page.
Here's probably the easiest, modern way of handling it.
HTML
<div class="container">
<div class="head"></div>
<div class="mid"></div>
<div class="foot"></div>
</div>
CSS
.container {
display:flex;
flex-direction:column;
height:100vh;
width:100%;
}
.head {
background:blue;
min-height:100px;
}
.mid {
background:#eee;
overflow:auto;
flex-grow:1;
}
.foot {
background:green;
min-height:100px;
}
Okay I found a solutions... but is requires JavaScript, which I am finding required to layout things correctly in a web app, CSS really needs to support dynamic web app layouts better.
Here it is,
https://jsfiddle.net/b1uxcupv/15/
<html style="width:100%;height:100%;">
<body style="height:100%;width:100%;padding:0;margin:0">
<table style="height:100%;width:100%;">
<tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
<tr><td style="height:100%;width:100%;background-color:grey">
<div id="scroller" style="max-height:100px;overflow:auto;height:100%">
xxblah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</td></tr>
<tr><td style="height:50px;width:100%;background-color:green"></td></tr>
</table>
<script>
var scroller = document.getElementById('scroller');
console.log(scroller);
console.log(scroller.parentNode);
console.log(scroller.parentNode.offsetHeight);
scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
var reset = true;
window.onresize = function() {
console.log(scroller.parentNode.offsetHeight - 4);
scroller.style.maxHeight = "100px";
if (reset) {
reset = false;
setTimeout(function() {
reset = true;
scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
}, 100);
}
};
</script>
</body>
Basically I set a max-height on the middle scroller to something smallish (100px) then is JavaScript resize the maxHeight to the parent's offestHeight, and register for resize events.
Perhaps not pretty, but it works Chrome, Firefox, IE, and Safari.
I still think there must be a css solution that does not require JavaScript or position:fixed, and works on more than just Chrome. Anybody got an idea?
Thanks for the users who submitted answers, they were good attempts, but did not fill the window, or used static fixed positions.
Based on this SO and this SO, it seems like <td> does not support the overflow attribute. Placing a <div> within the <td>, and also setting a fixed height for the <td> but a height:100% for the <div> got it working for me. Any tag with an overflow attribute should either have a fixed height or be nested within another tag with a fixed height.
Here is my fiddle that works in Chrome and Firefox: https://jsfiddle.net/rgutierrez1014/b1uxcupv/13/
I have a page with several divs like the following using Bootstrap classes.
The divs and buttons adjust their width properly when the screen size changes.
However, the image does not which then causes the image to overlap the underlying div when being watched on a small screen.
Is there any way I can set a max width for the image or do something so that it never exceeds the underlying div ? I tried adding height="auto" and width="80%" to the image but that didn't work.
<div class="txtcntr well well-large span4">
<img src="images/icons/bl_Queue.png" alt="" />
<br /><br />
Check Queue
</div>
Many thanks for any help with this, Tim.
You can try to add css property max-width: 100% for the image
I am just wondering how to display an image above the <p/> using absolute positioning. Note: the image has no define height, it could be longer or shorter. The goal is to display the image above the using absolute positioning.
<div id="wrap">
<p>Hello</p>
</div>
<script>
//Display an image above the <p/> using absolute positioning.
//Note: the image has no define height, it could be longer or shorter. The goal is to
display the image above the <p/> using absolute positioning.
</script>
If you want an <img> above the <p>, is there a reason why you can't do the following?
<div id="wrap">
<img src="path/to/img">
<p>Hello</p>
</div>
I would highly recommend this approach as the height or width of the image will not break anything and the <p> will move according to it's size.
But let's assume the <img> is elsewhere, like below it:
<div id="wrap">
<p>Hello</p>
<img src="path/to/img">
</div>
You can add the following CSS:
img {
position: relative:
top: -25px;
}
This is not a very good thing to do, though - as it literally just moves the image up 25 pixels. What if the size of the paragraph <p> changes? What if you add more content above the paragraph <p>?
You can also try:
img {
position: fixed;
top: 0;
}
This will put the image at the top of the viewport at all time. Again, using either of the these position methods present a lot of problems (unless it's what you want) and I recommend my first suggestion using pure HTML, and avoiding CSS position fixes.
I see no smart way to do this... why not $("#wrap").before("image"); without absolute position?
If you mean in terms of hiding, there you go:
Markup
<div class="wrapper">
<p>I will be hidden soon.</p>
</div>
CSS
.wrapper img{
position:absolute;
top: 0;
}
JS
$('.wrapper').append($('<img>', { src : 'http://placehold.it/350x150'}));
See fiddle
I have a page that features a main image. The main image will change its height and width depending on the photo. I also have an AddThis sharing widget next to the image. I have the spacing correct for one size image. How do I set the AddThis div to fluidly maintain its current spacing depending on the image size?
Here is a link so you can see an example of what I am speaking about. The black box (outlined in white) on the page represents an image that will change. The AddThis div currently adjust for the height but not the width. Here is the CSS for the AddThis div:
style="left: -110px; top:-220px;" /* How it is currently positioned and I like the current spacing. It must maintain this spacing */
.addthis_floating_style{
background: none repeat scroll 0 0 #000000 !important;
position: relative !important;
}
How do I change this so AddThis correctly adjust its spacing to the image height and width?
Another way I thought of doing this is using jQuery to read the image height and width then set the left and top elements of the AddThis div based on image size. This would need to be calculated dynamically.
I will use whatever method works the best. Please provide an example as javascript is not my strong suit.
UPDATE: I read another question and read an answer provided and I am wondering if it will solve my issue but does not seem to be working correctly. Here is the code have tried (Note: What I am currently using is above, the below code is what I have tried):
JS
var $j = jQuery.noConflict();
$j("#add-this-vertical").position({
my: "right top",
at: "right bottom",
of: $j("#image-container"),
collision: "fit"
})
HTML
<div id="image-container">
<div class="img-center"><img src="/test.jpg" alt="test" />
</div>
<div id="add-this-vertical">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/
300/addthis_widget.js">
</script>
<!-- AddThis Button END -->
</div>
</div>
You could add some JavaScript to the image tag like this:
<img onload="onMyImageLoad(this)" />
and then elsewhere in your document place:
<script>
function onMyImageLoad( img )
{
var height = img.height
// now do something with this height value like change a
// div's height or margin-top
}
</script>
Here is how I have done this but my image is no longer centered on the page. Working on that one...
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;">
<img src="/Images/test.jpg" alt="test" />
</div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/
addthis_widget.js"></script>
</div>
</div>