I have a fullscreen background image. I also have a pop-out sidebar.
When the sidebar pops out it re-sizes the background image smaller so as to not cut it off by covering over it. When the sidebar is retracted then the image enlarges back.
I can only get this effect if the background image has a position value of absolute. However that value also doesn't let you scroll without the background ending and getting blank space or having to repeat the image to fill the blank space.
When I make the position value fixed then it solved the blank space issue, but no longer re-sizes the background image when you open the sidebar, it covers up part of the background as you'd expect.
How do I get the effects of both the position values of Fixed and Absolute? I want it to scroll indefinitely without having to duplicate the image, but also re-size when the sidebar is opened.
Here is the theme I'm using that illustrates my problem: http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/
$(function() {
$('#openSidebar').click(function() {
if ( $('#sidebar').width() == 300 ) {
var y = window.innerWidth;
$("#imageContainer").width(y-300);
}
else {
$('#sidebar').width(0);
$('#imageContainer').width("100%");
}
});
$('#closeSidebar').click(function() {
if ( $('#sidebar').width() == 300 ) {
var y = window.innerWidth;
$("#imageContainer").width(y);
}
else {
$('#sidebar').width(0);
$('#imageContainer').width("100%");
}
});
});
Actually thats easier. Obviously you will have a button that opens your sidebar when you click it. Considering your sidebar is on the right (like your example theme) you just need to resize bg's width and leave height as it is. So this is the code:
document.getElementById("sidebar-button").addEventListener("click", doStuff, false);
doStuff = function() {
var sb = document.getElementById("sidebar");
var bgnd = document.getElementById("bg");
if ( sb.style.width == 0 ) {
sb.style.width = "300px";
var y = window.innerWidth;
bgnd.style.width = y - 300 + "px";
}
else {
sb.style.width = "0px";
bgnd.style.width = "100%";
}
};
But you still need the the idea of window.onresize so you can adjust bg's width correctly.
EDIT:
$(function() {
$('#sidebar-button').click(function() {
if ( $('#sidebar').width() == 0 ) {
$('#sidebar').width( 300 );
var y = window.innerWidth;
$("#bg").width(y-300);
}
else {
$('#sidebar').width(0);
$('#bg').width("100%");
}
});
});
I just tested and works just fine, the only difference is that it use jQuery.
Well here is an example:
Lets say the background is a div with id #bg then all you have to do is to resize the bg when the window is resized using javascript considering when your window starts to be scrollable. If for example your windows starts to be X-scrollable when its width is 800px or less and Y-Scrollable when its height is 500px:
window.onresize = function() {
if ( window.width < 800 ) document.getElementById("#bg").style.width = "800px";
else document.getElementById(#bg).style.width = "100%";
if ( window.height < 500 ) document.getElementById("#bg").style.height = "500px";
else document.getElementById("#bg").style.height = "100%";
}
Hope this helps you.
Related
I have an image that I want to disappear if the user scrolls further than 1000px down the window. I want that same image to reappear if the user turns around and scrolls back up. I have written the following JavaScript. This code currently makes the image disappear, but it does not have the image display again if you scroll back up. That is what I want, but this code only changes the display to "none". Can someone help? Thanks!
function parallex () {
var ypos = window.pageYOffset;
var image = document.getElementById('section_1');
image.style.top = ypos * -.2 + "px";
if (ypos > 1000){
image = document.getElementById('section_1');
image.style.display = "none";
}
else {
image.style.display = "visible";
}
}
window.addEventListener('scroll', parallex);
You should be setting display to '' (the empty string) initial, not visible, in your scroll handler.
Edit: It looks like IE does not support the initial keyword, so I would recommend using either the empty string (as I have) or display: block (as advised by Josiah Keller in the comments above).
I would also suggest using the ternary operator (condition ? valueIfTrue : valueIfFalse) to set the display property in a single line of code.
function parallex () {
var y = window.pageYOffset
var image = document.getElementById('section_1')
image.style.top = y * -.2 + 'px'
image.style.display = y > 1000 ? 'none' : ''
}
window.addEventListener('scroll', parallex)
body { height: 3000px; }
<img id="section_1" src="http://www.placehold.it/350x1100" />
i have user submitted content on my website that contains image tags.
I have used this:
<script type="text/javascript">
$(document).ready(function () {
// check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
function resize() {
var box = $(".blogtest");
box.find("img.buildimage").on('load', function () {
var img = $(this),
width = img.width();
if (width >= 650) {
img.addClass("buildimage-large");
} else if (width < 500 && width > 101) {
img.addClass("buildimage-small");
}
// if image is less than X, its most likely a smiley
else if (width < 100) {
img.addClass("buildimage-smiley");
}
}).filter(function () {
//if the image is already loaded manually trigger the event
return this.complete;
}).trigger('load');
}
resize();
});
</script>
Which assigns a different class to each image depending on its size. This works fine, however if the user is on a ipad / small screen size and the .blogtest div is less than the defined size, it always get put as a small image.
What i wanted to do was the check the image width from its source so that no matter what the screen size, i can always assign the best class.
Thanks. Craig.
I've been working on a scroll to top function for my website, and that part of it works fine. My problem is however that I have a fixed div that is overlapping my footer when it hits the bottom of the page.
Here is the function that I have working.
$(document).scroll(function (e) {
if (document.body.scrollTop >= 800) {
$('#beamUp').show(1000);
} else {
$('#beamUp').hide(1000);
return false;
}
});
Is there somehow I could detect when I hit that part of the page and stop the div from moving past that.Help is much appreciated!
jsFiddle: http://jsfiddle.net/zazvorniki/RTDpw/
Just get the height of the page, minus the height of the div in question, as well as the footer... make sure the top is never greater than that value... you'll also need an onresize event handler re-evaluate that value.
looking at your jsfiddle... here are my edits
In your scroll listener, I am checking for the position of the page, and adjusting the bottom position of the floater appropriately. I also set the initial display:none, so you don't need to call .hide() in your initial script. In addition, resizing the window has the effect of scrolling for your use, so I changed the listener for both events.
$(document).on('scroll resize', function (e) {
var viewHeight = $(window).height();
var viewTop = $(window).scrollTop();
var footerTop = $("footer").offset().top;
var baseline = (viewHeight + viewTop) - footerTop;
var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});
if (viewTop >= 50) {
bu.show(1000);
} else {
bu.hide(1000);
}
});
Hey there, I have 20 divs floated left with different height. I use this script to resize them. It worked perfect when my website was designed using pixels.
When i have changed my website to % design (percentage design), the script stopped working that reliable, sometimes it does not resize.
can you take a look, see if there are any adjustments needed for liquid layouts?
maybe it's the way i call the script?
Ty very much
Here it is:
var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();
function setConformingHeight(el, newHeight) {
// set the height to something new, but remember the original height in case things change
el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
el.height(newHeight);
}
function getOriginalHeight(el) {
// if the height has changed, send the originalHeight
return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}
function columnConform() {
// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
$('div.column').each(function(index) {
if(currentRowStart != $(this).position().top) {
// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = $(this).position().top;
currentTallest = getOriginalHeight($(this));
rowDivs.push($(this));
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($(this));
currentTallest = (currentTallest < getOriginalHeight($(this))) ? (getOriginalHeight($(this))) : (currentTallest);
}
// do the last row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
});
}
$(window).resize(function() {
columnConform();
});
$(document).ready(function() {
columnConform();
});
Well if you change it to fluid layout (% design) then you are going to have to add a window resize listener, basically when the resize event is done or while it's running you need to recall the script so it can recalculate with new dimensions, you did not need to doo that with pixels because it was a fixed size and once assigned will not change no matter how many times you resize the actual screen.
If you use styles like this:
<style>
.parent{
background:#F00;height:300px
}
.parent div{
float:left;height:100%;width:33.33%;
}
</style>
<div class="parent">
<div style="background:#FED"></div>
<div style="background:#EDF"></div>
<div style="background:#DFE"></div>
</div>
You just have to set the height of the parent div, and the width of the children div
Basically what I'm looking for is a way for an image to always be as big as the browser window but maintaining it's aspect ratio. The image should always resize with the smallest browser edge so that it hangs off the edge of the frame but never shows the white underneath. I've gotten this far:
window.onload = checkSize;
window.onresize = resize;
function checkSize(){
var x = self.innerWidth;
document.getElementById("picture").style.width = (x)+"px";
}
function resize(){
var x = self.innerWidth;
var y = self.innerHeight;
var picy = document.getElementById("picture").style.height;
document.getElementById("picture").style.width = (x)+"px";
if (picy >= y){
document.getElementById("picture").style.height = (y)+"px";
document.getElementById("picture").style.removeProperty("width");
}
}
Which in my head worked as follows:
resize with width
if the image height is less that the window height, start resizing the height and remove the width property (to keep the aspect ratio)
Am I close?
This is what I would do:
function resizeImage() {
if (self.innerHeight > self.innerWidth) {
document.getElementById("myimage").setAttribute("width","");
document.getElementById("myimage").setAttribute("height","100%");
} else {
document.getElementById("myimage").setAttribute("height","");
document.getElementById("myimage").setAttribute("width","100%");
}
}
And add this:
<body onload="resizeImage()" onresize="resizeImage()" style="margin:0px;">