Images are overflowing their container in IE8 with Fancybox - javascript

In a sort of follow up to this question, I have another problem in IE8.
When clicking the gallery and the lightbox appears, the images are overflowing their containing element (by the looks of things).
(source: alexanderdickson.com)
Has anyone ever experienced this before? Of course, the good guys (Firefox/Safari/etc) display it perfectly.
How do I fix this?
Thanks
UPDATE
Should I just got with a new Lightbox?

I ended up using prettyPhoto. Not only does it work, but it provides a much better API. I could skip all my hidden link building and triggering, I passed the array of filepaths straight in and it worked great cross browser.

If it's always just a tiny bit around the borders, it'd be a quick and dirty fix to just add overflow: hidden to the fancybox container.

Set the DOCTYPE, for example xHTML1.1 Transitional for the document and the problem will be solved. Or enable X-Compability mode.

Related

Unable to get skrollr parallax effect on header image

everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/

Bootstrap Carousel - Whole website jumps when image is changing

Hey lovely StackOverflow Community.
I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down.
I don't know what could be the problem, cause i changed nothing on the code from getbootstrap.com :-/
Sorry for my bad english :D Hope you can understand my problem.
Overwrite the Bootstrap class. This will solve your problem
.carousel-inner>.item {
width: 100%;
}
My issue with the Carousel was not directly related to the image, but rather the content within it that was causing the shifting of the page. To avoid it while being elsewhere on the page, I just used JQuery to detect if I had scrolled past my carousel and to make it pause. I know its a workaround but its effective.
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('#slider').carousel('pause');
} else{
$('#slider').carousel('cycle');
}});
It is because it changes some class on the carousel items.
You can set a min-height to the carousel container (.carousel-inner) and it won't jump anymore.
Set the value that fits better your needs.
ALSO:
Seam like there is a little effect on the images, so that every time that an image change, it became a bit smaller. If you just want to avoid the all website jump, use what i said above, if you want to change the "change-of-size" behave, you need to check the class .next and (probably) .right/.left and see if there's a change of height. It is hard to inspect them from a live website, that why i'm telling you to check this from the code - Or upload the code if you prefer.

Can someone help fix the non-scrolling scroll bar?

I am trying to use the slimScroll scrollbar plugin, but I had to modify it. I am trying to make it so that you pass the plugin the div that needs scrolling and using the same space as that (in the parent) the scrollbar appears. I have gotten it to add the scrollbar where i want in the dom, but it isnt scrolling. I dont know why. Can anyone help?
Code is here for you to play with/correct.
http://jsfiddle.net/rgmrw/5/
Thanks!
EDIT: The solution should also not add any divs/wrap existing ones. (Doing so messes up other existing javascript code)
Yes, I fixed it;
I actually didn't do anything, I was messing around in code but couldn't get it to work properly, so i copy pasted the code again from the original plugin at http://rocha.la/jQuery-slimScroll and it worked out of the box :)
http://jsfiddle.net/rgmrw/9/
The answer is that you cannot $(el).scrollTop() an element that isnt cutting off its children elements, even if a parent is.
Basic Concept Demo: http://jsfiddle.net/DY9CT/
Plugin Demo: http://jsfiddle.net/rgmrw/11/

Remove white space beneath Facebook comments plugin

Take a look at the this link. Scroll down a bit and you should see a Facebook comments plugin with an embedded Google map right beneath it.
My problem is, there is a ton of white space between the bottom of the comments plugin and the top of the map. Firebug indicates the white space is at the bottom of the comments plugin (as opposed to the top of the map). However, I can't seem to find a way to eliminate it.
I've tried just using relative CSS positioning to move the map up 50 pixels, but then it sits on top of the comments if there happen to be any. Also, if the user has turned FB comments off, it screws the layout as well.
Any ideas on how to get rid of the excessive white space?
UPDATE: While the answers provided here pointed me in the right direction, it ended up being too much trouble. I simply put the Facebook comments beneath the Google map at the bottom of the page which masks the problem somewhat. Apparently this is a bug according to one of the commenters below, so we'll just have to wait for a fix.
EDIT: Been toying with these styles for a while, no luck. I can alter the height of the box initially based on Jason's suggestions, but anything I do screws up the layout (new comments appear BEHIND the map since the comment area stays the same height as its original height, instead of allowing Facebook to dynamically grow the height of its IFRAME element when a comment is added). Any other ideas?
EDIT #2: It seems that the root of the problem is that Facebook automatically assigns a height of 200px to the IFRAME containing the comments box. When comments are added, Facebook dynamically resizes thie IFRAME to the appropriate height. I'd be able to solve my problem if I could find a way to make that default 200px start at 145px. Not sure if this is possible or why Facebook would think that 200 (arbitrary?) was a good height to start at.
EDIT #3: I realize the white space is coming from the IFRAME that Facebook generates and that there's nothing I can do about that, specifically. I started a bounty on this question because:
1) I find it hard to believe that I'm the only person that has an issue with the way this displays.
2) It's possible it's due to the way I configured something?
3) There's some other workaround I'm not thinking of.
Hopefully the bounty will encourage some creative replies!
Don't set the height to auto, set the overflow...
Set height:110px and overflow:auto on the Facebook iframe - then comments will expand the height of the iframe dynamically.
Pop these changes in your $().ready function - this works fine for me.
I had this problem on Mobile browsers. Facebook added this auto detect for mobile devices. It loads a different version of the plug-in that is full of bugs. Just set the mobile flag to false to force it to use the regular version that does not have bugs. This saved me. I hope it helps you.
There are several contributing factors:
.fbFeedbackContent has min-height: 165px
the loaded iframe has height: 200px
there is an empty span tag within the fb:comment tag
Addressing any or all of these should get you started. You may need to use !important to override some of the CSS.
I was suffering from the same problem. The extra white space only shows up when there are no comments yet. So you just simply do the following:
1.) Swap back to the old markup, because step 2) is not supported by HTML5
2.) Make a new div #commentcount, in which you will load the count of comments. You can hide it with display:none;.
3.) Insert the following code to #commentcount: <fb:comments-count href=http://example.com/></fb:comments-count>, where example.com is the exact URL of where you're commenting. In most cases this will be $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"] (PHP), or the appropriate HTTP header variables in other languages.
4.) Store the comment count in a variable in JavaScript. You can reach the count easily, It's inside the #commentcount div in a span element. If you're not sure about this, check chrome dev tools or firebug, it will show you the rendered structure. (as facebook may change it eventually)
5.) Write a nice javascript code to update the facebook comment container div if(commentcount==0). Add a style of: height:110px; overflow:hidden;.
6.) Load the comment count frequently so if someone comments, you can drop the hidden overflow and fixed height, and they can see the new comment. You can do this using setInterval().
It works!
An easier alternative solution: You can set the style="background-color:#f5f5f5;" for the comments box if you have for example a site with F5F5F5 background color. The comments box colour will blend into your site. It looks nice.
Turn off mobile parameter.
For exemple:
<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10" mobile="false"></div>
i solved it by setting the height on the . im using the facebook plugin in wordpress. you can find that file under /wp-content/plugins/facebook/social-plugins/comments.php in line 75 or set it to css
#respond{
height: 112px;
}
I am using FbComments plugin for Wordpress and there you can set the customisation options. This solved the problem for me.
Where it asks Comment box style AND Whole comment box style enter the height you want. It should be 72px. So you enter height:72px; in the space provided. Don't forget the ;

Jquery cross-fade rollover problems in IE7

I built some cross fade rollovers in IE7 using this single image technique:
http://jqueryfordesigners.com/image-cross-fade-transition/
It works by placing the rollover image in the background and fading the original image state when the user rollovers the image. IE7 hates it. The rollover state shows up directly below the original image.
You can check it out here:
http://hardtopdepot.com/dev/inner.html
It should be pretty obvious in IE7 but the add to cart buttons are suppossed to be Jquery rollovers. I am by no means a JS expert so Im not sure how to go about solving this problem, any suggestions would be very helpful. Thanks-
I guess it's a bug in the plugin. They check for browser names in the plugin, which is always a bad sign (not future-proof).
Anyways, it seems like the buttons you want are just text-buttons with fading background-color. Why can't you just tweak the link to look like a button, and use the jQuery Color Animations plugin?. This solution is better for in page search and screen readers.
I've created a simple demo for you here:
http://jsbin.com/egiha4/2
Source: http://jsbin.com/egiha4/2/edit
Needs some styling and a click handler or a href attribute.
You could just use simple CSS (example here: http://sophie-g.net/jobs/css/e_buttons.htm) to do the same thing.
Or
Use Scriptaculous (http://script.aculo.us/) if you want to have fancier timed fading.
This way you wouldnt have to spend time working on browser compatibility issues.

Categories