Bit of a tricky situation to explain. Basically the overall image I'm trying to lay under my content div of my website is a messy box with grungy borders that bend in and out.
What I've got so far is something like this (irrelevant code removed)
<div class="content-top"><img src="content-top.png"></div>
<div id="content"> <!-- WORDPRESS LOADS CONTENT HERE --> </div>
<div class="content-bottom"><img src="content-bottom.png"></div>
CSS:
#content {
background: url("assets/images/content-bg.png") repeat-y scroll 0 0 transparent;
}
the content-bg.png image is 300px high and is a repeatable image creating a patterned border either side.
The problem is the content-bottom.png image only looks right when placed at the end of one of these 300px tiles. If the page content is of a height that causes only half of the last background tile to be displayed the lines don't match up.
Typing this I doubt the answer lies in CSS and instead I'll need a javascript/jquery solution but as to the specifics of how to do so I'm unsure.
Here's asolution to your problem. It will expand the content container to the next height that is a multiple of 300.
Plain JavaScript version
var e = document.getElementById('content');
var height = e.clientHeight;
var newHeight = 300 * Math.ceil(height / 300);
e.setAttribute('style', 'height: ' + newHeight + 'px;');
Demo
Try before buy
jQuery version
var e = $('#content');
e.css('height', 300 * Math.ceil(e.height() / 300));
Demo
Try before buy
Here's a i-can't-sleep-solution that supports a dynamic background image:
var content = $('#content'),
height = content.height(),
fixedImageHeight = null, //.. number (pick one)
srcImage = null, //.. url to image (pick one)
imageHeight = function() {
return fixedImageHeight || function() {
var image = new Image();
image.src = srcImage;
return image.height;
}();
}(),
neededPadding = (height > imageHeight)
? height % imageHeight
: imageHeight - height;
content.height(height + neededPadding);
Related
could we do this with javascript?
consider we have a x * y px div
(width=x and hight=y)
and user uploads image in any size, I want to find a way this image not to be Deformed in Container.
I have a senario but not sure it's possible via javascript or jquery in addition of css. you can see my senario below but I dont know how can I write correctly in javascript
var ContainerWidth=document.getElementById("Container").width;
var ContainerHight=document.getElementById("Container").height;
var imgWidth = document.getElementById("myImg").width;
var imgHight =document.getElementById("myImg").height;
if imgWidth > ContainerWidth
{
myimg.style.width = ContainerWidth;
var newHightOfmyimg= myimg.style.height = 'auto';???????????????????????? the main problem: how can I know what is this auto height in px and how can set it in a var?
}
if newHightOfmyimg > ContainerHight
{
UltimateimgHight= ContainerHight;
UltimateimgWidth=auto;
}
firstly to get the style of a property using javascript, you should do the following
var containerWidth = document.getElementById('Container').style.width;
var containerHeight = document.getElementById('Conatiner').style.height;
var imgWidth = document.getElementById('myImg').style.width;
var imgHeight= document.getElementById('myImg').style.height;
that will return the style set by the CSS itself.
secondly, auto is the original width / height of the element. if you want your image or any element to get it's parent's width / height then you could use inherit in CSS.
I have some jQuery code that adds a picture to my page whenever a user clicks on a button. I want this picture to display on top of whatever the user is looking at. The problem is that I have this image set as position:absolute and it's displaying at the very top of the page. Think about it like this:
My page is 1000px high. If the users viewport is 300px down then thats where I want the image to display, not at the very top of the page. Position:static doesn't work for me in this case because I want the user to be able to scroll past the image and not have it follow him.
Any ideas? I was thinking something along the lines of a jQuery function that returns how far down the webpage the viewport is and set that as the top position of the image(since I have it set as absolute).
Thanks in advance!
var viewportX = window.pageXOffset; var viewportY = window.pageYOffset;
Then position it relative to viewportX and viewportY.
I use this small jQuery extension to set something to center on the screen:
(function($)
{
$.fn.centerMe = function(centerIn)
{
var containerWidth = $(centerIn).width();
var containerHeight = $(centerIn).height();
var elWidth = $(this).width();
var elHeight = $(this).height();
$(this).css('left', containerWidth / 2 - elWidth / 2);
var adjTop = containerHeight / 2 - elHeight / 2;
$(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);
Usage is basically: $('#elemToCenter').centerMe(window);
Recently I tried to make the images in lightbox. If you click the image it show off in lightbox effect. But Some of the Reason, Lightbox is not centering properly in a window size. For Example if you click the image it loaded in lightbox but for the first time it lightbox load in bottom of the site and again you click the image it align properly.
here is the screenshot what i exactly saying.
First Screenshot looks when you click the image when page load.
First Time Click the Image:
Second Time Click the Image:
For the First Time it getting alignment problem.
For the Second Time it not getting alignment problem(Without Page Load)
Javascript:
<script>
jQuery(document).ready(function() {
jQuery("img").click(function() {
var img_path;
if ($(this).parent('a').length) {
img_path = $(this).parent('a').prop('href');
}
else
{
img_path = $(this).attr('src');
}
jQuery(".cplightbox1").html(jQuery("<img>").attr("src", img_path));
jQuery(".cpoutter").css('display', 'block');
jQuery('.cpoutter').animate({'opacity': '1'});
//jQuery('.lightbox').animate({'opacity':'1.00'});
var cplightbox = document.getElementsByClassName('cplightbox')[0];
var cpoutter = document.getElementsByClassName('cpoutter')[0];
cplightbox.style.marginTop = ((cpoutter.offsetHeight / 2) - (cplightbox.offsetHeight / 2)) + "px";
return false;
});
});
</script>
HTML CODE:
Here is the Fiddle
http://jsfiddle.net/rCUGD/7/
But Some How this Script is working properly in jsfiddle.net. May Be I messup with script or css
I am Not where i made a mistake
EDITED:
Now After #JustAnil Here is the Screenshot:
After the second click it should show like this normal
Checkout this working JSFiddle.
You need to change the following lines (where you calculate the offset).
Change the following lines:
var cplightbox = document.getElementsByClassName('cplightbox')[0];
var cpoutter = document.getElementsByClassName('cpoutter')[0];
cplightbox.style.marginTop = ((cpoutter.offsetHeight / 2) - (cplightbox.offsetHeight / 2)) + "px";
To:
var cplightbox = document.getElementsByClassName('cplightbox')[0];
// We need the actual height of the image so grab it from the "inner" container
var cplightbox1 = document.getElementsByClassName('cplightbox1')[0]; // New Line
var cpoutter = document.getElementsByClassName('cpoutter')[0];
// Calculate the (negative) offset from the width & height
cplightbox.style.marginLeft = "-"+$(cplightbox1).width() / 2 + "px";
cplightbox.style.marginTop = "-"+$(cplightbox1).height() / 2 + "px";
// ^ Negative offset so we can vertically and horizontally center it.
Finally
Change your CSS from:
.cplightbox {
margin-left: auto;
margin-right:auto;
width:auto;
height:auto;
display:inline-block;
}
To:
.cplightbox {
position:fixed;
top:50%;
left:50%;
display:inline-block;
}
Checkout this question CSS Vertically & Horizontally Center Div (Thats how to center a div to the middle of the screen).
Then alter your javascript to calculate the negative offset (dependant on how big the picture is [ie 50% of the width & height])
View this working JSFiddle.
I'm trying to have an image gallery where a caption is vertically centered inside of a slideshow, here's the code I'm working with
$(window).load(function() {
var imageHeight = $('.flexslider .slides li img').height();
var captionTop = imageHeight - $('.title-cap').height();
var captionTop = captionTop/2;
$('.title-cap').css('top',captionTop + 'px');
var captionTopOne = imageHeight - $('.sub-cap-one').height();
var captionTopOne = captionTopOne/2;
$('.sub-cap-one').css('top',captionTopOne + 'px');
var captionTopTwo = imageHeight - $('.sub-cap-two').height();
var captionTopTwo = captionTopTwo/2;
$('.sub-cap-two').css('top',captionTopTwo + 'px');
var captionTopThr = imageHeight - $('.sub-cap-three').height();
var captionTopThr = captionTopThr/2;
$('.sub-cap-three').css('top',captionTopThr + 'px');
});
The caption is positioned absolutely, and I'm using top to do the centering...
So my thought process is, get the height of the base slideshow image to keep it responsive, minus the height of the current caption, and divide that by two ending with the top value.
The first instance is working, with "title-cap", but the next three are not. They all return the same wrong value. All caption classes have the same attributes, just different for assignment.
Also, what would I need to add in order for the values to dynamically change with the browser window size in real time.
Edit: Alright, did a little research and figured out the load/resize part.
This is what I have now
function setContent(){
[Added all of the above minus the onload part in here]
}
$(window).load(function() {
setContent();
});
$(window).resize(function() {
setContent();
});
Now just not sure why the sub-cap's aren't loading properly. Any ideas?
I've had similar problem when trying to get the size of hidden elements. I found this nice jQuery actual plugin. It might be what you need.
According to the Slimbox2 documentation this function isn't supported. But I was wondering if anyone had encountered any tricks to make this work.
The main concern I have is that some of my images are fairly lengthy, and at low resolution LightBox2 would create an annoying experience for the user.
I recently started to use slimbox2 on my website (http://www.trips.elusien.co.uk) and found that it could benefit from a few modifications:
"slide resize": this makes the size of the slideshow constant, rather than depending on the size of the image (by specifying a pixel size), or you can use a percentage to make the slides larger or smaller in the slideshow. You specify this using 2 new options:
slideWidth: 0, // Initial width of the slide (in pixels or in percent as a string e.g. "50%")
slideHeight: 0, // Initial height of the slide (in pixels or in percent as a string e.g. "50%")
enable the slides to be flipped automatically, rather than manually. You specify this using a new option:
slideInterval: 0, // Interval between flipping slides (in seconds), 0 means no automation.
download the slides from the slideshow.
The first and last features cannot be done with the origal version of slimbox2 since in that version the image is displayed as a BACKGROUND image, rather than using the "IMG" tag.
I have put the Javascript and CSS files on my website. If you want to try them go to my website and click on the "slimbox examples" link, you can download them from here. To see a neat way of using slimbox2 click in the "photoSLide Show" link on the home-page.
Regards Neil
its easy to fix check my code.
find and replace the three lines in slimbox2.js file:
$(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
$(sizer).width(preload.width);
$([sizer, prevLink, nextLink]).height(preload.height);
with:
/* make sure the image won't be bigger than the window */
window.innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //ie fix
window.innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //ie fix
var winWidth = window.innerWidth-200; //browser width
var winHeight = window.innerHeight-100; //browser height
var my_w = preload.width; //original width
var my_h = preload.height; //original height
// scale width
var scaleW1 = winWidth;
var scaleH1 = (my_h * winWidth) / my_w;
// scale height
var scaleW2 = (my_w * winHeight) / my_h;
var scaleH2 = winHeight;
var scale = (scaleW2 > winWidth);
if (scale) {
reswidth = Math.floor(scaleW1);
resheight = Math.floor(scaleH1);
}
else {
reswidth = Math.floor(scaleW2);
resheight = Math.floor(scaleH2);
}
if ($("p").hasClass("slimboxie")){
$(image).css({filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='"+ activeURL + "', sizingMethod='scale')", visibility: "hidden", display: ""});
$(sizer).width(reswidth);
$([sizer, prevLink, nextLink]).height(resheight); }
else {
$(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: reswidth + "px " + resheight + "px", visibility: "hidden", display: ""});
$(sizer).width(reswidth);
$([sizer, prevLink, nextLink]).height(resheight);
}
im amateur at javascript but i think its working great. I made it work with IE8 also. You only need to insert:
<!--[if IE 8]>
<p class="slimboxie"></p>
<![endif]-->
after loading the image, do this:
$('#lbImage').css('background-size', 'contain');