Fluid Spacing for a div - javascript

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>

Related

Display three divs by order absolute than fixed than relative

I have some problems when rendering on only app(iOS) NOT website:
I have to use pure Javascript without any other libraries.
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" style="position:relative">
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
The Cover div didn't display overlapping Header. What can I do to that?
I want that initially user will see Cover first, then scroll up then see fixed Header and eventually Content.
I dont want to change the HTML, because when I put header in content div, header usually jumps and take moment to back the correct position when scrolling content div.
Thanks for any help!
Give #content a z-index property, too. Say, 100.
The problem looks like z-index context. z-index is not a global value - it is relative to it's parent. You have #header with z-index:99, and it's sibling #content with z-index:auto(say 1 for argument's sake). #header always overlaps #content, and its children.
You are using absolute property to cover class, relative to content className that means, it position will change according to content class. Remove relative property to content class, add wrapeer to all header and content className.
<div style="position:relative">
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" >
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
</div>

Fixed Image On Scroll Shifting Position

JSFiddle: https://jsfiddle.net/DTcHh/19451/
I am building a website using Bootstrap 3. On scroll I have an image that sticks to the page by changing position to fixed. This works however it always shifts out of place once it turns fixed. I am aware this has something to do with the margins (and I have played with pixels and this seems to practically solve the problem, the margin-left needs to be a % for the responsive website). Here's the code:
HTML
<div class="row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
CSS
.screen-phone{
max-width:300px;
margin-top:25px;
margin-left:25%;
z-index:999;
}
Javascript
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop()>1120){
$('.screen-phone').css('position','fixed').css('top','0');
}else{$('.screen-phone').css('position','static');
};
});
});
Try this
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.screen-phone{
max-width:300px;
margin-top:25px;
//margin-left:25%;
z-index:999;
float:right;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function(){
// var stickyPhone = ($#)
$(window).scroll(function () {
if ($(this).scrollTop()>500){
$('.screen-phone').css('position','fixed').css('right','0');
}else{$('.screen-phone').css('position','relative');
};
});
});
I Removed the margin-left and added a float right. Then on the JS i changed the position to left:0. It seams to work.
I made several changes that made it work:
Move the class name to the div element instead of the img element
Make the CSS changes only when necessary by using a boolean variable
The 500 pixel test was too long for the size of the text. When invoked, the change in size due to the image being fixed would shrink below 500 forcing another change, and so on.
See the updated jsfiddle: https://jsfiddle.net/DTcHh/19475/
Alright, I figured this out. What needs to be done is you put a separate class on the containing DIV. You give it left:(whatever your percent value is here). You take margin-left OFF the containing image. If using Bootstrap like me, you'll have to get around margin issues you can create two classes like I did to remove the margin of the row and col-sm-7. In my case I did:
.screen-phone{
max-width:300px;
margin-top:25px;
/*Removed margin-left:25%*/
z-index:999;
}
.sticker{
left:25%
}
.zero-row{
margin:0;
}
.no-margin{
width:0;
}
HTML:
<div class="row zero-row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7 no-margin sticker">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
Updated Fidde: https://jsfiddle.net/1chkghhq/1/

Replacing responsive tables for better markup and accessibility

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.

vertically positioning content after div transform

I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this.
However, when I do, it either:
Pushes the content way above top of the div (cutting off content on scale in)
Pushes the content way too far down the container (leaving a lot of white space on scale out)
I've tried to call this snippet on DOM ready
$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' });
but this only works at specific heights. I was wondering if there was anyway that I can push content to the top of the div even if my container changes heights.
Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.
Here is a detailed picture of what I am trying to achieve.
HTML
<div id="reportContainer">
<div id="zoomMe">
<div id="content1" class="fillerBox"> </div>
<div id="content2" class="fillerBox"> </div>
<div id="content3" class="fillerBox"> </div>
<div id="content4" class="fillerBox"> </div>
<div id="content5" class="fillerBox"> </div>
</div>
</div>
CSS
#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }
JS
$(document).ready(function() {
$("#reportContainer").height($(window).height()-50);
$("#zoomMe").css('transform', 'scale(.50)' );
});
I believe what you are looking for is transform-origin
http://css-tricks.com/almanac/properties/t/transform-origin/
This will enable you to set the point on your element that will stay put as transforms occur. By setting the transform-origin to the top center: you can scale the element and keep its position relative to the top in the same place.
This worked for me! I don't know much about this transform.js plugin, but the property you want to look at is "transform-origin". Your issue is that it's scaling #zoomMe from the center, making your post-transform content 25% offset from the top and bottom.
CSS
#zoomMe {
transform-origin:center top;
-webkit-transform-origin:center top;
}

display an image above the content using absolute positioning

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

Categories

Resources