Develop Reference

jquery cycle cssBefore, animIn, animOut dont accept relative values

I made a custom slide-transition with jquery cycle plugin which make the use of options: cssBefore, animIn, animOut necessary.
There are two slideshows with different widths side by side on desktopview with a fixed width.
There is a media query breakpoint, where the shows get one below the other and are supposed to get a width of 100%, which works fine so far, except one thing:
Because the cycle option accepting number values (for px) only, the transition don't adapts to the width of 100%.
Question is:
How can I make it so, that relative values are accepted?
And if this is not possible, is there another slider which offers the same transition as shown in the following example?
My Code:
HTML:
<div id="all">
<div id="s1" class="pics">
<img src="http://malsup.github.com/images/beach1.jpg" />
<img src="http://malsup.github.com/images/beach2.jpg" />
</div>
<div id="s2" class="pics">
<img src="http://malsup.github.com/images/beach3.jpg" />
<img src="http://malsup.github.com/images/beach1.jpg" />
</div>
</div>
Javascript:
$(function() {
$('#s1').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: -300, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: -300 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
$('#s2').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: 700, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: 700 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
});
CSS:
#all {width: 1000px;}
#s1 {width: 30%;}
#s2 {width: 70%;}
.pics {
float: left;
overflow: hidden;
height: 250px;
}
img {
display: block;
height: 250px;
width: 100%;
}
#media (max-width: 600px) {
#s1, #s2 {
float: none;
width:100%;
}
}
See the example on jsfiddle

I am not sure if there is any plugin BUT you can use Media Queries for example:
#media (max-width: 600px) {
#s2 {
width:300px;
font-size:14px;
}
}
this css will be executed when the screen size is less than or equal to 600px ONLY. and if the screen size is more than 600px your main css will be executed.
For full documentation about media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
media query demo: http://www.webdesignerwall.com/demo/media-queries/
I hope this helps.

Display title attribute of an image inside a DIV

This is the page I'm trying to do: Gallery
And what I'm trying to do is when you hover over the thumbnails, the div in front of the main image would fade in and show the title attribute for the image. Hover over the left and topmost image and the title should display on the watch.
I tried following the instructions here but for the second image the title didn't swap and it only showed the first one.
Also I'm a little bit confused where to add the fadein fadeout for the div...
Sorry for the noobish question, I'm still learning this.
Thank you.

I think the title is getting swapped out as it should, the problem is that the new value is always exactly the same as the old value, so it only looks like nothing is happening.
The problem is here:
var titleString = $("#thumb").attr("title");
$("#title").html(titleString);
When you're telling it to switch the text, you're always grabbing the new text from the exact same element: the <a> element that has an id of thumb. To fix it, change that first line to something like the following:
var titleString = $(this).find('a').attr("title");
This assumes that you'll be storing the titles you want to use on the appropriate <a> elements. I add that last part because as it turns out, none of the other anchors on that page have a title, so you'll have to go through and add them if this is the way you decide to go.

Change the following:
1.
#main_view{
background: #FFFFFF;
left: 45%;
margin-top: 128px;
padding: 0 0;
position: absolute;
}
title{
background-color: #C7C3A5;
color: #000000;
font-family: Museo,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 150px;
left: 44%;
opacity: 0.8;
padding: 50px;
position: absolute;
top: 22%;
width: 100px;
z-index: 555;
}
Remove the inline style for the div with title as ID.
in the hover function of ($("ul.thumb li").hover) add the below line
after - $(this).css({'z-index' : '10'});
var titleString = $(chis).children("a").attr("title");
$("#title").html(titleString);

The following code will fix the title issue (as others pointed out) and accomplishes a fade technique. Also probably do not want to a use a percent from top value on the #title element.
$(document).ready(function(){
//Larger thumbnail preview
var $title = $('#title');
$("ul.thumb li, ul.thumb2 li").hover(
function() {
var $this = $(this);
$this.css({'z-index' : '10'});
$this.find('img').addClass("hover").stop()
.animate({
marginTop: '-50px',
marginLeft: '-50px',
top: '50%',
left: '50%',
width: '100px',
height: '100px',
padding: '0px'
}, 200);
$title.stop().animate({opacity:0.4}, 200, function(){
$title.html($this.children('a').attr('title')).animate({opacity:0.8}, 500);
});
},
function() {
$this = $(this);
$this.css({'z-index' : '0'});
$this.find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '75px',
height: '75px',
padding: '0px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a, ul.thumb2 li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
http://jfcoder.com/test/hoverfade.html

Stick element to top after scroll

I want to make container/div in sidebar moving/following along with page scrolling down. It is not just a position:fixed container. It will move only when it should disappear being scrolled down. What is the best practice to implement?
Thank you

Say we want to:
start at 260px from top (as defined in CSS)
stick at 24px from top (as defined in JS)
var $sticky = $("#sticky"),
pos = {
abs : {position: "absolute", top: parseInt($sticky.css("top"), 10) },
fix : {position: "fixed", top: 24 /* <<< SET AS DESIRED */ },
};
$(window).on("load scroll", function() {
var canFix = $(this).scrollTop() >= pos.abs.top - pos.fix.top;
$sticky.css( pos[ canFix? "fix" : "abs" ] );
});
body{
height: 2000px;
border: 4px dashed #444;
}
#sticky{
height: 100px;
background: #0bf;
position:absolute;
top: 260px; /* <<< SET AS DESIRED */
}
SCROLL!
<div id="sticky">STICK ME AT 24 FROM TOP</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery animate expand proportionally

I'm now in problem about how to animate function in jQuery to expand proportionally. Normally, it expand one-sided only just like expand to bottom or expand to right.
What I want is to expand proportionally left-right-top-bottom by using animate.
Following is my coding. What I said above, it expand to bottom only.
$(document).ready(function() {
var theFrame = $("#FrmPatient", parent.document.body);
theFrame.animate({width: 650, height: 485}, 1000);
});

Try this:
<div id="frame"></div>
#frame {
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background-color: #999;
}
$(function() {
var w = 400, h = 400;
$("#frame").animate({
width: w,
height: w,
marginLeft: -w/2,
marginTop: -h/2
}, 1000);
});
http://jsfiddle.net/GVj83/

You'll need to animate the left and top properties as well. If the original width and height of the box are (w0, h0) and the expanded ones are (w1, h1), animate left to left-(w1-w0)/2, and top to top-(h1-h0)/2. Note that would only work with absolute or relative positioning.

css background image move

I have image in website's header as background. Now, when page is loaded, I'd like to move it slowly from left to right (about 100 pixels) and then stop. Is there any not too complex way to do that?

jQuery will allow you to do that easily.
$("#theImage").animate({
left: "+=100px",
}, "slow");

You should check to make sure it only animates on the first page load, not from internal site links. I like to use jquery for this sort of thing.
// animate on first load only
if ( document.referrer == null || document.referrer.indexOf(window.location.hostname) < 0 ) {
$("#logo").animate({
marginLeft: "100px",
easing: 'swing'
}, 3000 ); // adjust your duration here (milliseconds)
} else {
// internal site link set the proper position
$("#logo").css({ marginLeft: "100px"});
}

Thanks, Rap and ghoppe! That was a helpful hint. I actually wanted to move the background image, not its container so I first set its position in css:
.top-back-image { background-position: -100px 0px; }
and then with jQuery:
$(".top-back-image").animate({
backgroundPosition: "0px 0px",
easing: 'swing'
}, 3000 );

The guys over at LaunchList have a moving background. Looking through their CSS, this is what I found. Maybe it will be of some help.
#clouds {
width: 100%;
height: 650px;
top: 200px;
display: block;
position: fixed;
background: url(../art/cloud.png) 500px 0 repeat-x;
-webkit-animation-name: move;
-webkit-animation-duration: 400s;
-webkit-animation-iteration-count: infinite;
z-index: 2;
}
Note that this will only show for webkit browsers.