Develop Reference

Understanding Skrollr data values

I am trying to understand the Skrollr javascript script library, and am having difficulty understanding data values, and how they differ between absolute and relative.
I have a background image on a div (about 2x taller than the div) that I would like to scroll down as I scroll down the page. Here is what I have so far.
<div id="jumbotron" data-top="background-position: right bottom;" data-bottom="background-position: right top;" >
What are data-top and data-bottom? As near as I can figure from the documentation, data-top is the top of the div #jumbotron. What I want is that when #jumbotron is at the top of the viewport, the background position is right bottom. Then, as I scroll and the the bottom of #jumbotron reaches the top of the viewport, I want the background image to be right top. This isn't happening. What am i doing wrong?

The skrollr library will transition the CSS on an element based on its data elements. For example, if you had an element as follows:
<div id="element" data-0="opacity: 1" data-100="opacity: 0"></div>
At scroll position 0 (user has not scrolled), the opacity of the element would be 1. Once the user has scrolled 100px down the page, the element would have faded to opacity 0. You can add as many data increments as you'd like.
Regarding data-top, the readme on the skrollr repo says the following:
data-top: When the element's top is aligned with the top of the
viewport
I don't however see anything about data-bottom in the docs. I only see:
data-top-bottom: When the bottom of the element is at the top of the viewport (it's just not visible).
So you might try:
<div id="jumbotron" data-top="background-position: right bottom;" data-top-bottom="background-position: right top;" >
Just consider that the first data is your starting point, and the final data is your finishing point with as many increments along the way as you need.

Skrollr.js needs a data-attribute with two values.
The first describes the alignment to the viewport.
The second the edge (or center) of the element.
It can be a bit confusing, that both are named in the same manner (top, center or bottom).
You can further position the background with percentage values.
This way skrollr can transition between the values.
See this example.
https://jsfiddle.net/4frjantk/
<div class='section'
data-bottom-top="background-position: 50% 100%"
data-top-bottom="background-position: 50% 0%" >
</div>
PS:
The example contains a workaround for containers with 100% height as described here https://github.com/Prinzhorn/skrollr/issues/347

jQuery toggleClass animation issue

I have this page:
http://beta.amitai-clinic.com/
If you hover the top left logo, it should 'fade' the same logo with some text underneath it.
Problem is, the logo part is being faded in naturally, but the text beneath it looks like it's being placed in all together, and not faded in 'naturally'.
Any ideas?

From what I saw, your text is written over the image, having a different background on mouseover and I think the problems are caused by that
You could try instead to do something like this:
<div class="sublogo-stress" style=" ">
<img src="/wp-content/themes/SimplePress/images/trans_120x90.png">
<span>test</span>
</div>
You could even set the opacity of span to 0 to make it completely invisible.
The fade effect should work better now.

toggleClass changes opacity to match the opacity of the hover class and than adds the class. but, anyway, the point where you change the class will behave as a sudden appearance of the text. Look here http://jsfiddle.net/eYJym/
You can 'bypass' this effect by fading to 0 where the class should be toggled. Or by placing the invisible layer with the text above the original image, fade it to some opacity and then hide the layer with the original image. It will be much easier to deal with images without transparency :)

CSS background color not behaving as expected

I don't understand why the background color is not being applied as expected here. This might be a lack of understanding on my part as to the relationships between elements in CSS?
The page in question: http://www.preview.imageworkshop.com/portfolio/
Replicating the issue
First, open the above link in IE 7 or IE 8
Click the PRODUCT filter, then press the PROMO & EDITORIAL filter
White dots will have appeared on some of the images (this is a bug in IE which causes some pixels to be left transparent after a fade animation. if you don't see them, do a little more filtering, they turn up fairly quickly.
CSS BACKGROUND COLOR PROBLEM
What works:
If I set the background color for the gallery background to be red, then this red color shows throught the transparent spots on the images. (The inference here, is that a background color of black hides the 'white spots' bug).
#isotopegallery{background:red;}
What doesn't work:
Obviously, I don't want to set the gallery background color to be anything but white.
What I want to do is set the background color of the DIV that contains the images, for example:
.photo{background:red;}
however, when i do this, the red background color does not show up through the transparent pixels??
The simplified overview of the structure of the elements is as follows
<div id="isotopegallery" class="photos">
<div id="ngg-gallery-18-71">
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
</div>
</div>
HELP!
I can't figure out why this background color works for the #isotopegallery parent DIV, but not for the .photo DIV?
When i look in firebug, the color property is set for the .photo div, but does not show through the transparent pixels?
This is the last issue that his holding up go live for our website, and it is driving me nuts!
I would really appreciate any help that you can provide to help me resolve this issue.
NOTE: there is info around that suggests that changing the blackpoint of the images in photoshop will fix this problem. We have tried this method, and have found it does not work.

Are you floating the interior elements of .photo without clearing them? That would prevent the background color from covering the height of the element in question.
If that's the case, appending something like <br style='clear: both;' /> to the .photo div should do the trick.
Likewise, you could always try applying the background color to the img elements themselves: .photo img { background-color: red;}

The creator of isotope has been helping me look at this issue, and has added the following comment:
"Did some more testing. I've come to the conclusion IE treats the
entire element, which contains the image, as one 'image'. Whatever is
visible gets flattened. If that element has a true-black pixel within
an image, than that pixel of the element will be treated as
transparent, regardless of what's actually behind the image.
Take a look at: http://support.metafizzy.co/2011/09-06-ie-trans.html
You'll see a couple transparent pixels pop up, even though the
background of each item is clearly red (items have padding, background
is red). I then dynamically changed their color to blue and the pixel
is still transparent.
Which means the only pure-CSS solution is to set the container
background to black"
Not sure where to go from here. We have tried moving the black point (as this is supposed to be caused by true black pixels), but have found this to be an unsucessful method.

I found a solution to this issue. I have posted full details against this thread (link below), which describes the issue in more detail.
IE fade causing white spots on images

Expanding width and height of a <div> element with mouseover using jquery instead of css?

Hi all you wonderfully helpful people!
I was practicing my CSS skills, and I thought I would push my CSS to the limit and animate some <div>s. Well the CSS has failed me and I'm wondering if there's a an easy way to achieve the effect I describe below using javascript.
<div id="container">
//on hover div with background img expands in every direction from center acting as border
<div id="expanding-background">
<div id="img-div"> //border's solid-color stroke increases, but size remains same
<img>
</div>
</div>
//label sits at bottom and drops down as expanding-background expands down.
<p id="label" style="text-align:centered;">Label</p>
</div>
With the CSS, I jerry-rigged a solution, but it only worked when I hovered the inner img, so mouseovering the border only made the expanding-background div work. Similar issues occurred with the label's animation. Is there an easy way to initiate animation of a number of divs with the hover of a single div?
Thanks in advance helpful people!

$('#yourdiv').bind('hover', function() {
// Animations to do when hovering. Example:
#(this).find('#innerDiv').animate('height', '+=200');
}, function() {
// Animations to do when leaving with the mouse. Example:
#(this).find('#innerDiv').animate('height', '-=200');
});

Generate frame for picture

I creating gallery, and I want to create frame around the picture.
But this picture must be scalable. Width and height of this frame generated by width and height of image.
And must to have possibility to change height of frame through the JavaScript.
Thanks.
PS: First of all, I must to have possibility to make frame narrow through the JavaScript.

If I was you I would make sure I can reuse (repeat) images, and then I will do it like that:
<div id="frame">
<div id="top-left"></div>
<div id="top"></div>
<div id="top-right"></div>
<div id="left"></div>
<div id="imageSpace"></div>
<div id="right"></div>
<div id="bottom-left"></div>
<div id="bottom"></div>
<div id="bottom-right"></div>
</div>
where: #top-left, #top-right, #bottom-left, #bottom-right are using corner images as backgrounds and have both width and height set.
And #top, #right, #bottom, #left are using repeated image for their backgrounds.
Check attached image where I put lines where you should cut original frame-image.
This method will allow you to change width of #top / #bottom and #left / #right to increase the size of your frame.

This can be quite tricky to pull off.
If you are using modern browsers that support CANVAS, check out this demo that does what you are looking for: CANVAS Demo
Otherwise you will need to create 8 images (4 corners, and 4 sides) where the sides are made in such a way as they can be tiled to adjust to whatever size you need.
The next trick is how you build the frame. You could by hand create DIVs/Tables around your pictures to create this affect but that would be very bulky and not very clean. Your best bet would be to use jQuery (or your favorite lib) to hook into all images on the page with a CSS class (e.g. "fancyFrame"), and wrap them as needed with HTML markup that makes use of the images you created above via CSS.

Narrowing the frame with Javascript is the easiest part, really.
Once you have your HTML/CSS set up so that it already scales you can just set the width with Javascript like this:
var photo = document.getElementById('photoFrame');
photo.width = '200px';

You can use A List Apart's Drop Shadow technique which uses CSS and PNGs to create automatically resizeable drop shadow for images. You can modify technique to create a resizeable frame.
You would need four divs and four images. The corners would need to be cut at 45 degree angles with transparency:
Image 1 - Top-left corner and top and left sides of the frame.
Image 2 - Top-right corner and right side of frame.
Image 3 - Bottom-left corner and bottom of frame
Image 4 - Bottom-right corner of frame

Funny, I had to do this exact thing when I worked at ImageKind.com. For reference, if you go to the frame shop there, such as this one, go to Step 4 (Add Mats) and click Adjust Width, there's a slider that does more or less what you're describing.
I originally had a couple of nested DIVs with big opposing L-shaped frame pieces as background images. A little Firebug inspection shows they've changed it to be a table. More efficient I'm sure, as the side pieces can tile.