jquery - stretch background image to fill document rather than window? - javascript

I'm using this plugin: https://github.com/srobbin/jquery-backstretch to stretch a background in a good way.
So the issue is that if the content of the document is long enough to cause a scrollbar, then when you scroll, the image stays in the same place (just looks like a stationary background). You can see it in his demo here: http://srobbin.com/jquery-plugins/jquery-backstretch/ (this page uses the plugin. Just scroll and notice the background doesn't move).
I'm wondering if there's a way to change the plugin to not use the window height or something and rather use the document height? I've looked, but to no avail. I know this isn't a great idea in the case that the content is long, but it's done on only a single page that doesn't have much content at all. Really the only issues are if the browser real estate (not counting the chrome) is like less than around 650px in height.
Here's the plugin code. Pretty short and well written from what I can tell:
https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js

I once had the same problem, this was my solution.
$(window).resize(bg);
function bg() {
var imgWidth = 1088,
imgHeight = 858,
imgRatio = imgWidth / imgHeight,
bgWidth = $(document).width(),
bgHeight = bgWidth / imgRatio;
$('body').css({backgroundPosition: 'top center'});
if ($(document).width() < imgWidth && $(document).height() < imgHeight && $(document).height() > bgHeight) {
$('body').css({backgroundSize: 'auto 100%'});
} else {
$('body').css({backgroundSize: '100% auto'});
}
}
bg();
$('body').css({backgroundRepeat: 'repeat-x'});
$('body').css({backgroundImage: 'url("images/bg-state/bg_static2.png")'});
Note: It do not stretch on IE due to the code uses the css3 property background-size and you need to set your own width and height of the image in the code.

Another approach with scrollable content and a fixed background would be to just use an <iframe> or fixing the <img> on a layer. Then you wouldn't need to depend on jQuery (which I think is a bit heavy) for something that could be done on the browser without it.
<body background="background.png">
<iframe src="content.html" height="600"/>
</body>
Also found another way to do it with layers:
<img src="background.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:-1;" />
<div style="position: static;z-index: 1; ">
content
</div>

Without paying respect to the image ratio, I believe you could set bgHeight to $("body").height().

Related

Resize iframe to values smaller than default width/height

I have an iFrame
<iframe src="pageToLoad.html" onLoad="autoResize(this);"></iframe>
and a script that resize the iframe according to it's content
function autoResize(elem) {
var newheight;
var newwidth;
newheight = elem.contentWindow.document.body.scrollHeight;
newwidth = elem.contentWindow.document.body.scrollWidth;
elem.style.height = newheight + "px";
elem.style.width = newwidth + "px";
}
It's working great!
Except when the iFrame should be smaller than 300px x 150px, than those two values kick in by default.
I created a jsFiddle to display the problem, It seems like 300px x 150px are the default value of an iFrame.
Anyone have an idea how I can fix that, so I can use iFrame with size like 200px x 670px or 980px x 70px ?
I just realized that I need to set the minimal width and height of the iFrame in CSS first (200px x 70px). than if the values returned by scrollHeight/scrollWidth are lower than the default one (300px x 150px) the value returned will be applied.
This works fine in my experience and is not based on a limit. You likely are not managing the height and width of the content page correctly.
Please include the source for pageToLoad.html.
Also: Pro tip for troubleshooting this: HARD CODE the width and height of the iframe first before worrying about javascript.
For example:
<iframe src="pageToLoad.html" style="height: 50px; width: 50px;"></iframe>
Then you can confirm that your browser lets you go smaller than the default width and height independently of testing your javascript. Once you have confirmed that, fix your javascript.
No way of knowing until you post the inner page, but it is possible that your inner page is growing after the iframe loads it. You can also try messing with height and width for the body of your inner page. For example, this pageToLoad.html works with your auto-resize method:
<!DOCTYPE html>
<html>
<head><title>iframe test</title></head>
<body style="height: 50px; width: 50px;">
INNER PAGE
<script>
</script>
</body>
</html>

Changing grid depending on device orientation

I'm trying to change the size of divs depending of screen size.
If the phone is laying it changes the sizes of divs.
Example:
block is default: 330px width and 250px high on a 768x1280 screen resolution.
The factor is:
width: 330px; factor x 2,18
height: 250px; factor x 5,12
When i change my phone to laying the sizes should be:
width: 587px
height: 150px
which doesnt work in the first place, can someone tell my why not?
js:
var devicewidth = $( window ).width();
var deviceheight = $( window ).height();
var mbwsize = devicewidth / 2.18;
var mbhsize = deviceheight / 5.12;
var mbisize = mbhsize / 1.25;
$('#mainmenublok').css('width', mbwsize+'px');
$('#mainmenublok').css('height', mbhsize+'px');
$('#mainmenublok').css('background-size', mbisize+'px'+mbisize+'px');
dont get errors, it just keeps the content in the middle as 720px width (768 - offset)
I changed the main div already here:
$('#maintable').css('width', devicewidth+'px');
Will try to change window to document but can someone look at this?
With document it doesnt change either.
The calculation is correct if you look at the picture at the debug.
I also tried it in a function but that did not work.
Added a picture to explain what happens
explain:
debug:
Based on the HTML provided by the author in the comments
<div onclick="bb.pushScreen('timeline.html', 'timeline');"class="mainmenublok" id="blocktimeline" style="background-image:url(ico/timeline.png); background-size:200px 200px; background-repeat: no-repeat; background-position:center;">
<img id="pictimeline" src="ico/bbaction.png" width="50" height="50" style="display:none;">
</div>
and the js used as shown above, I suggest to use $('.mainmenublok').css('width', mbwsize+'px'); instead of $('#mainmenublok').css('width', mbwsize+'px');. Dots are used to indicate classes in CSS, as hashtags are used to indicate ID's.
You could use mediaqueries or device.js?
The way you are trying to achieve by script.... Is okay but in some browser it may give you bugs ... better you try with any of the css frameworks like twitter bootstrap its not really huge.... the your site will be responsive as according to your device....

How to create a fixed / sticky sidebar in CSS / JS?

I'm trying to create a website with main content area and a sidebar, something like here on Stack Overflow. The goal is that when you scroll down, the sidebar stays visible.
I have seen two approaches to this:
position:fixed;
JavaScript manipulation with the DOM
Approach no. 1, as far as I know, will have a problem when the viewport is smaller than the sidebar contents so I guess that can't be used reliably and JavaScript scripts that I have seen are usually animated or generally "slow" (you can see that there is redrawing going on after each scroll).
Can someone point out a JavScript library / CSS approach that would not suffer from the aforementioned issues?
Edit: an example would be this page but with the sidebar sticking to the top without an animation and correctly handling the situation when the sidebar is higher than content / viewport.
I don't like heavy JS solutions, so important thing to ask is - preferred compatibility. In IE8+ it is possible instead of
var $window = $(window),
$sidebar = $(sidebar);
$window.on('resize', function(){
$sidebar.height($window.innerHeight());
});
$window.resize();
do something like this (pure CSS solution):
#sidebar {
position: fixed;
left: 0; /* or right */
top: 0;
bottom: 0;
overflow: auto;
}
When you have top&bottom / left&right value at the same time, box will be stretched. (JSFiddle demo)
Got it. It is Javascript based, but I'm sure that's nothing heavy and even IE8 should solve it pretty fine.
var top = $('#sidebar').offset().top;
var height = $('#sidebar').height();
var winHeight = $(window).height();
var gap = 10;
$(window).scroll(function(event) {
var scrollTop = $(this).scrollTop();
// sidebar reached the (end - viewport height)
if (scrollTop + winHeight >= top + height + gap) {
// if so, fix the sidebar and make sure that offset().top will not give us results which would cancel the fixation
$('#sidebar').addClass('fixed').css('top', winHeight - height - gap + 'px');
} else {
// otherwise remove it
$('#sidebar').removeClass('fixed').css('top', '0px');
}
});​
demo
You could catch client window's height and giving it to your sidebar like this :
var sidebarHeight = $(window).innerHeight();
$('#sidebar')​​​​​​​​​​​.css('height',sidebarHeight);​​​​​​​​​​​​​
With the proper CSS for the sidebar :
#sidebar {
position: fixed;
right: 0;
top: 0;
width: 200px;
overflow: hidden;
}
Here is a working JSFiddle.
You could also watch for window resizing to avoid a mess on resize :) Here is the way to go with jQuery
Good luck
Not sure if you have this figured out but I have created a contained sticky sidebar jQuery plugin. It's really simple and allows you to invoke with just one line of jQuery. Take a look here: http://mojotech.github.com/stickymojo/
It starts by position: fixed; then uses javascript to handle any resizes, scrolls and even allows you to specify a footer element that it should not intersect. By combining these approaches you will get a smooth looking fixed element. Plus, we made it easy for you.
Code and demo here: http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html

Positioning an image based on its height/width

I'm working on a simple script that acts as a slideshow.
It's based on this script.
Background:
Most of these types of scripts (including the more advanced ones) have the issue that they work great with landscape-style images but really mess portrait-style images up. So I'm trying to build something more or less from scratch.
Problem
I want my images centered on the page. So I use position:absolute; and left:50%; and top:50%; which puts left-most and top-most edge of the image in the proper position. But to center it you would need to do left:50% - imageWidth/2 (which obviously doesn't exist in CSS)
So I need to use javascript to get the image height/width and change it's left and top positioning as needed.
Here is my HTML:
<div class="fadewrapper">
<div class="fadein">
<img src="../Content/images/samples/1.jpg">
<img src="../Content/images/samples/2.jpg">
<img src="../Content/images/samples/3.jpg">
</div>
</div>
Here is my CSS:
.fadewrapper {width:100%; height:100%;}
.fadein { display:inline-block;}
.fadein img {position:absolute; top:50%;}
My knowledge in javascript is limited, but I've found this script (on SO):
var img = new Image();
img.onload = function () {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
This script works, but I don't know how to use the images on my page and how to then adjust its positioning. Any and all help is very much appreciated.
Here you go. This will set the image in the exact center of the wrapper.
win_width = $('#fadewrapper').width();
win_height = $('#fadewrapper').height();
border = $('#framewrapper').css('borderWidth');
$('.fadein img').each(function(){
$(this).css({
'left' : (win_width - $(this).width() - border ) / 2,
'top': (win_height - $(this).height() - border ) / 2
});
})
Here's a jsFiddle working example. It reacts based on the window size. Resize the output window to see it react
This might be worth of trying:
<DIV style="position:relative;top:100px;height:300px;text-align:center;white-space:nowrap">
<IMG id="your_img_id_1" src="your_img_source" height="100%">
<IMG id="your_img_id_2" src="your_img_source" height="100%">
<IMG id="your_img_id_3" src="your_img_source" height="100%">
</DIV>
Add these positioning rules to your fadewrapper-class, and remove all others. Then make changes needed to top and height values, but don't change the height-attribute values in IMG-elements. IDs can be omitted, if you don't need them.
EDIT:
I'm sorry, I didn't notice to check window resize. Code corrected. Width's shoul'd be OK with smaller window sizes now.
I've tested this in IE, FF, Opera and Chrome. In all those browsers images appear just like I want to. But if I've missunderstood what you'd like to have?

youtube video as web site background

is there a way to embedd youtube video as a background of a web page with html, css and javascript with the actual site content on top? how?
basically, it should be a video that auto plays, is muted (but the volume can be turned up by the visitor) and the site should work well being on top of it (the site is minimal so most of the video should be visible at all times). the site is minimal enough that no scroll bars would be visible by default in most browsers and the video should be 100% width and height.
examples? links?
tried Google but couldn't find it.
also it should work for videos not on youtube.
html5 and css3 preferred :)
I REALLY NEED A LIVE EXAMPLE SOMEWHERE (or as close to) because i tried it all (as available via google and failed)
also, related - there doesn't seem to be (as per my own research) any way of slowing down the play of youtube videos (for example: 24 times slower) - true / false?
You have probably found a solution by now but just in case you haven't...have you tried http://www.seanmccambridge.com/tubular/ ?
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
// Replace ID with the actual ID of your YouTube video
http://www.labnol.org/internet/youtube-video-background/27933/
you got this library as well:
http://florian-chapon.fr/dev/youtube-background/
the only thing you have to do, is include the js file, and put this script on your "body":
$(document).ready(function() {
ytbg("vQWlNALvbhE", 0, 17, 1);
});
As an explanation:
ytbg("video link", starttime, endtime, volume).
for completeness sake adding http://okfoc.us/okvideo/ here. Also does Vimeo.
There are two ways to answer this question:
Set the flash player's wmode to transparent, put it in an absolute div with a low z-index. Put the content in another absolute div with a higher z-index.
Don't do it. Seriously. Don't put a movie behind the site's main content. You are aliening your customer base, making the site hare to view and read, and violating about a dozen or two other guidelines in good site design. Why not put the video inside the flow of the document where it belongs instead?
Well you could absolute position the tag or the , use CSS to set the height and width. Use javascript to simulate clicking on the button. set the element zIndex to the background.
Hi, as tubular is quite suffisticated, i extracted the necessary code
for you.
html code:
<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
<div id="player" style="position: absolute">
</div>
here comes the complete youtube API cover style stuff, extracted from
tubular. jquery is needed. Also the standard youtube html5 iframe api
code must be included - as given here:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
var ratio = 16 / 9;
window.onPlayerReady = function (e) {
resize();
}
$(window).on('resize', function () {
resize();
})
var resize = function () {
console.log("resize");
var heightcorrection = 0,
width = $(window).width(),
pWidth, // player width, to be defined
height = $(window).height() - heightcorrection,
pHeight, // player height, tbd
$videoPlayer = $('#player');
if (width / ratio < height) { // if new video height < window height (gap underneath)
pWidth = Math.ceil(height * ratio); // get new player width
$videoPlayer.width(pWidth).height(height).css({
left: (width - pWidth) / 2,
top: 0
}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / ratio); // get new player height
$videoPlayer.width(width).height(pHeight).css({
left: 0,
top: (height - pHeight) / 2
}); // player height is greater, offset top; reset left
}
}

Categories

Resources