Keep an Image Always Centered Regardless of horizontal scroll - javascript

I'm trying to create a title with an image, but I need it to stay centered regardless of the horizontal scroll. So pretty much keep it centered and move with the scroll so it's always showing.
I tried centering it and following a few examples I found in SO but none of them covers what I need.
Any help is greatly appreciated

It sounds like you want fixed position:
img.centered
{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px; /* Width of image /2 */
margin-top: -100px; /* Height of image /2 */
}
HTML:
<body>
<img class="centered" src="..." />
</body>

maybe not the best way but it works:
<div style="position:absolute; top:0px; width:100%; Height:100%; overflow:scroll; left:0px;">ContenContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentt</div>
<div style="position:absolute; top:50%; left:50%;">Centerd stuff</div>
Try it:
http://jsfiddle.net/chZWR/

Try the background fixing technique as described here:
Better example:
http://davidwalsh.name/css-fixed-position-background-image
body
{
background:url(your-image.jpg) top right no-repeat;
background-position:fixed;
}
Here is the live demo:
http://davidwalsh.name/demo/background-repeat.php
http://www.w3schools.com/cssref/pr_background-position.asp
for example:
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Yet another way to do this:
Working Example
JS
var center = function () {
var wh = $(window).height();
ww = $(window).width();
ch = $('#center').height();
cw = $('#center').width();
t = wh / 2 - ch / 2;
l = ww / 2 - cw / 2;
$('#center').offset({
top: t,
left: l
});
};
$(document).ready(center);
$(window).resize(center);
CSS
#center {
position:fixed;
}
There is a small advantage to using this method, if you should need to change the size of the image or swap the image out for another, you won't need to adjust the positioning. All the calculations are done for you in the script.

Related

Get width in percentage from Resizable divs from jQuery UI on load and on resize

So I got these two divs next to each other. Both of the divs can already be resized by using the jQuery UI.
On resizing the divs I grab the width make it into a percentage and output it to the corresponding inputs but something strange happens.
The HTML:
<div id="parent">
<div id="div1"> My Data1
<input type="text" class="div1">
</div>
<div id="div2"> My Data2
<input type="text" class="div2">
</div>
</div>
The Javascript:
$("#div1").resizable();
$('#div1').resize(function(){
$('#div2').width($("#parent").width()-$("#div1").width());
});
$(window).resize(function(){
var div1width = $(".div1").width() / $('.div1').parent().width() * 100;
// Paste percentage into the inputs
$('.div1').val(div1width);
var div2width = $(".div2").width() / $('.div2').parent().width() * 100;
// Paste percentage into the inputs
$('.div2').val(div2width);
});
The CSS:
#parent{
position:absolute;
height:100%;
margin:0;
padding:0;
width:100%;
}
#div1{
position:relative;
float:left;
height:100%;
width:50%;
background-color:#A2A;
}
#div2{
position:relative;
float:left;
height:100%;
width:50%;
background-color:#BBB;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
background: black;
}
The fiddle: https://jsfiddle.net/uvcxfmfy/1/
What happens is that when I make for instance div1 smaller the width percentage goes up even all the way over 800%. When I make it wider the width percentage stops at 20%. So something is wrong but I cant find it where.
What I am trying to achieve.
On page load both divs should have 50% width. When I make div1 smaller it should go all the way to 0% when I make it bigger it should go to 100%.
This means that if div1 is set at 25% that div2 will have 75%
When div1 is set at 58% then div2 is 42%.
Thanks everyone for helping.
I hope you find it helpful.
You should use this math to get percent:
Math.round(( docWidth - elemWidth ) / docWidth * 100)
Im just order your code and change the calc line, look at this example:
$("#div1").resizable();
$('#div1').resize(function(){
$('#div2').width($("#parent").width()-$("#div1").width());
});
$(window).resize(function(){
elementResize()
});
$(document).ready(function(){
elementResize()
});
function elementResize(){
$('#div2').width($("#parent").width()-$("#div1").width());
$('#div1').height($("#parent").height());
var parentwidth = $("#parent").width(),
div1width = $("#div1").width(),
div2width = $("#div2").width(),
div1percentage = Math.round((div1width / parentwidth) * 100),
div2percentage = Math.round((div2width / parentwidth) * 100);
$('.div1').val(div1percentage);
$('.div2').val(div2percentage);
}
Fiddle demo

scaling an image from bottom to top javascript

I have been trying to scale an image in javascript so it is 15% of the screen width. The problem is now that javascript automaticcaly scales from the top down and i want to scale from bottom to top. Thank you in advance!
ps: jquery library is included.
html:
<img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
js:
document.getElementById("image").width=window.innerWidth * 0.15;
First, you do not need jQuery, nor any JavaScript at all to get this to work as you would like. It can be done in pure CSS.
Second, this is not an issue with the way images scale, but an issue with positioning the image after it has been scaled.
Please see my jsfiddle showing how to accomplish this with pure CSS and position how you would like.
HTML:
<div id='imagewrapper'>
<img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
CSS:
#image {
width: 15vw;
position: absolute;
bottom: 0;
right: 0;
}
#imagewrapper {
position: relative;
width: 768px;
height: 576px;
}

jquery pan a large image within small div container using buttons

Hi there I need to an interactive element using a large image. This image sized 1000x1000 pixel with simple imagery will contain several questions with yes or no. What I want to do is place this image within a small div (say 500x300) with hidden overflow and add hotspots on the image for the yes/no option. What I want is when the user clicks yes, then the hotspot link pans to specific x/y coordinates of the same large image. Viewer will only see within the 500x300 window. So on and so forth. Is this possible? It seems so simple yet only option I can find is the pan by mouse option or iframe option with complicated divs and anchors. I'm not an expert in java/jquery but would love to find a script that is adaptable. Please help!
This sounded fun so I made a custom solution real quick. Demo here: jsBin
It's heavily reliant on the proper CSS, so check that in the bin, but here's the JS part:
var choice = document.querySelectorAll('.choice'),
image = document.getElementById('image')
for ( var i=0; i<choice.length; i++) {
choice[i].addEventListener('click', function (event) {
var x = this.dataset['x'],
y = this.dataset['y'];
image.style.top = '-'+y+'px';
image.style.left = '-'+x+'px';
})
}
Use css transitions for animation. Set up the positions you want the buttons to move the image around to in the image using a series of javascript objects. Then, set up your anchors, text, etc using absolute positioning on top of the image inside of a div container. Finally, add a click action in jQuery to assign your different positions to the top and left css of that container.
The end result, then, will be that you click an anchor, the left and top positions are assigned to the container via css in jQuery, and the transitions will slide the image around with the anchors.
I set up a fiddle here.
Here's the html from the fiddle:
<div id="window">
<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/en/1/1f/Kill_The_Lights_1000x1000.jpg" id="image">
<ul>
<li><a id="city" href="#">City</a></li>
<li><a id="bottom" href="#">Bottom</a></li>
</ul>
</div>
</div>
And the CSS:
#window {
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
#window a {
position: absolute;
z-index: 2;
display: block;
padding: 10px;
background: rgba(255,255,255,.5);
}
#city {
top: 20px;
left: 20px;
}
#bottom {
top: 220px;
left: 220px;
}
#container {
-webkit-transition:left 2s, top 2s, -webkit-transform 2s;
transition:left 2s, top 2s, transform 2s;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}
Here's some javascript to give an example of setting up the positions as objects.
var city = {
top: -200,
left: -200
};
var bottom = {
top: -700,
left: -100
}
$('a').click(function() {
var t = this.id;
var c = $('#container');
if (typeof eval(t) !== 'undefined') {
c.css({
'top': eval(t).top,
'left': eval(t).left
});
}
});
I've just made a Fiddle with a demo image from where you could proceed.
HTML:
<div class="imgHolder">
<div class="hotspot one">Click</div>
<img src="image.jpg" />
</div>
CSS:
.imgHolder {
overflow:hidden;
width:300px;
height:300px;
position:relative;
}
.hotspot.one {
position:absolute;
top:10px;
padding:2px;
background-color:#fff;
left:10px;
}
.hotspot:hover {
cursor:pointer;
}
img {
position:relative;
z-index:-1;
}
jQuery:
$(".hotspot").on("click", function () {
$("img").animate({
"right": "+=100px"
});
});
For reference: http://api.jquery.com/animate/
You could e.g. fade hotspots in and out on specific positions and use animate() to move to the next hotspot.

How to user controlled overlap images in JS

I'm desperately searching for solution for my client. I have graphic - something like that:
And I want to be able to take the line with circle in the center and drag it to right or left. And it will be hiding and unhiding my two full images. It's basically two images on the same place, just with another z-index I think.
I think it's possible to do it with JavaScript, but I don't know of any functions or methods for this option.
Here is my solution:
The HTML is pretty simple, just two divs for the images and one for the drag:
<div class="img" id="img1"></div>
<div class="img" id="img2"></div>
<div id="drag"></div>
For the CSS, the important part is to absolute position all the divs and give a background image.
As for the Javascript, with a little help from jQuery, we listen for the mouse events, make some calculations and adjust the CSS of the second image:
$('#drag').on('mousedown', function(e){
var $self = $(this),
dragPos = $self.position().left + $self.width()/2,
imgWidth = $('#img1').width();
$(document).on('mouseup', function(e){
$(document).off('mouseup').off('mousemove');
});
$(document).on('mousemove', function(me){
var mx = me.pageX - e.pageX + dragPos
$self.css({ left: mx });
$('#img2').css({
width: imgWidth - mx,
left: mx,
backgroundPosition: -mx + 'px 0px',
});
});
});
From there, I believe it's pretty easy to customize it and give it a unique look.
Hope this helps!
JsFiddle Demo
Something like this alphamask plugin may do the trick, though I'm not sure how simple it would be for you to implement in the manner of your slider example.
Actually quite simple. The first step is to make it work manually. I'd set it up as follows:
<div class="wrap" id="wrap1">
<div class="img-wrap img1"></div>
<div class="img-wrap img2"></div>
<div>
With CSS as follows:
.wrap {
position: relative;
width: 300px;
height: 300px;
}
.img-wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.img1 {
z-index: 1;
background: url(bg1.png) no-repeat 0px 0px;
}
.img2 {
z-index: 2;
background: url(bg1.png) no-repeat 0px 0px;
}
Now some JavaScript (with jQuery) to set a position (you can call this when you move a slider over the top later):
function setPosition(percentage){
// get the width of the container
var w = $('#wrap1').width();
// work out the width of left panel
var w1 = Math.floor(w * percentage);
// and the right panel
var w2 = w - w1;
// set the width of the right panel
// move it right by the width of the left panel
// and move the background back by the width of the left panel
$('#wrap1 .img2').css({
width: w2,
left: w1,
backgroundPosition: -w1 + 'px 0px',
});
}
You now just have to decide how to do the dragging. You could even just do it on mouseOver. Easy!

HTML CSS Remainder of space

How do I get the footer to take up the remainder of the page's vertical space without actually knowing how tall the content is? I can't figure out how to use javascript/css to accomplish this...
Just to be clear...
Scenario 1: The content ends halfway through the page, the footer would take up the remaining half. No scrollbars necessary.
Scenario 2: The content takes up 1 1/2 pages, the footer would take up only what it needs (~200px). Scrollbars necessary.
<body>
<div id="content">
<div id="footer">
</body>
Oh, and I'm open to a jQuery way of doing this.
You can always try using jQuery to detect the height of the browser window, then deduct the content height from it to assign a height in pixels to the footer.
Though it would be different on different sized monitors.
To get the browser height, and store it as a variable you can use:
var browserHeight = $(window).height();
Content height can be stored using:
var contentHeight = $("#content").height();
Footer height can then be worked out like so:
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
So altogether, you'd have:
<script type="text/javascript">
$(document).ready(function(){
//Get Browser and Content Heights
var browserHeight = $(window).height();
var contentHeight = $("#content").height();
//Set footer height
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
});
</script>
Or something like that :)
Anthony
I would do something like this:
$(function() {
var windowHeight = $(window).height();
if ($('body').height() < windowHeight) {
$('#footer').height(windowHeight - $('#content').height());
}
});
You probably need to adjust this according to paddings/margins, but this is how it should work, basically.
You can 'fake' it with just CSS. Example:
<div id="footer-background"></div>
<div id="content"></div>
<div id="footer"></div>
CSS:
#footer-background {
position:absolute;
width: 100%; // or the width of your content depending on if its fixed width, etc
height: 100%;
z-index: -1;
margin: 0 auto; // if you use a fixed width this will center it
top: 0;
background: #000;
}
#content, #footer {
position: relative;
width: 100%; // or fixed width
margin: 0 auto; //if you use a fixed width this will center it
background: #fff;
clear: both;
}
#footer {
background: #000;
}
What this does is set an empty div that contains the same background css as the footer but it actually fills the whole page. (height and width). The content has a white background so it will overlap the footer-background as far as the content height. Then your footer will scale according to your footer content but from a visual perspective the footer will appear to take up the rest of the page if it doesn't scroll.
Why use JavaScript when this can be done with CSS?
Firstly set the margin to 0
*{margin: 0;}
Make sure the page fills the browser in height wise
html,body{height: 100%;}
Create the content to fill 100% just remove the height of the footer
#content{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
then set the height of the footer, make sure its the same as the margin in #content
#footer{height: 142px;}
Jobs a good one :)
No need to use javascript! You can use only css for this:
#footer {
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index:-100;
/* height: 100%; you don't need this, but you can put it to be sure */
}
What it does is position this layer on the whole screen (relative to the screen- not page, so it will have the same position after you scroll also) and put it far behind the other layer (z-index: -100)
Simple solution:
body {
min-height: 100%;
position: relative;
}
#footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Adding these properties / rules to your css should do what you're looking for. Let me know if it works.
If you do use a script to size the footer, be sure to call the same function on resize events.
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>untitled</title>
<style>
#footer{border:blue solid thick; position:relative}
</style>
<script>
window.onload= window.onresize=function(){
var b=document.documentElement.clientHeight,
f=document.getElementById('footer'),h=f.offsetTop,
hx= Math.floor(.96*(b-h));
f.style.height= hx+'px';
}
</script>
</head>
<body>
<h1>h1</h1>
<div>content</div>
<div id="footer">footer</div>
</body>
</html>

Categories

Resources