We Keep Coding

Skrollr: Create instant move?

I'm using Skrollr to animate div class="box" using its margin-top, but my issue is that I need an instant change, not animation ..
This JSbin Shows what I'm working on, I need the margin-top of the red div be 0px when data-top-bottom for data-anchor-target=".space" but instantly without animation ...
I'v tried all these properties
skrollr.init({
forceHeight: true,
smoothScrollingEnabled: false,
smoothScrollingDuration: 1,
smoothScrolling: false,
forceRender: true
});
but nothing helped me...
So in another way : Is there any way, to go from skrollable-before to skrollable-after without passing through skrollable-between
Hope there is a way to do that ...

Simply put an exclamation mark before the values, as documented here https://github.com/Prinzhorn/skrollr#preventing-interpolation
margin-top: !300px;
margin-top: !0px;
http://jsbin.com/degobovi/5/edit

JS: Animate function

I have the element .menu on my page, and one of my JS libraries has xslide attribute, which gives many options like draggable, overlay, radius etc.
$(document).ready(function(){
$('.menu').xslide({
draggable: true,
overlay: 'rgba(255,30,100,1)',
radius:0
});
});
The code above sets the properties in a fixed way, but I like to give them some smooth transition, so how do I use .animate thing by jQuery here? e.g I want radius to grow gradually into 20 in a few seconds when .menu clicked. So I believe my code should start like:
$('.menu').click(function(){
Now what? When I try something like:
$(this).animate.xslide({radius:'20'},1000)
It does not work, can you help me? :) I'm sorry if I'm being annoying by asking these trivial things but I'm so new to it and I'm trying very hard. ^^

jQuery animate uses CSS styles to animate. If the plugin has an extension to animate radius, it is possible, otherwise animate will not work. Is the radius a CSS property?
If it would be a border-radius it will be something like:
$("#selector").animate({
"border-radius" : "10px"
}, 500); // 500 MS

How to hide images until AFTER jquery flexslider finishes loading

I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});

You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});

Set the default style for "display" to "none". using show() will change this style value.

Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!

… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!

I experienced a similar issue when I forgot to include the flexslider.css

I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??

Adding animation to this testimonial slider

I have created a slider using CSS3 to display my testimonials.. Now I need to add some animation to this slider using Jquery. But I dont have any idea how to use Jquery with this slider.. and what are the suitable plugin for this. So anybody can tell me How can I add an animation to this slider?
any ideas are greatly appreciated.
Thank you.
Here is a link to the slider code: jsfiddle.net/XJVYj/82

I think it will be very hard to find a Plugin that exactly matches your code. But I could code you the jQuery stuff for it. But then I would have two Questions.
How much of the CSS can I change? Or should it also still work without js activated?
Are you staying with a number of 3 items in the future? Or do you want to change the number of slides dynamically?
// EDIT
OK it works now. I know its not very elegant, but I dont wanted to change too much of your code. So I just had to edit two of your css selectors (I commented the old one out). You also wanna notice, that with this solution your old method still works when javascript is disabled.
The jQuery Code follows...
$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});
$("input#first").click(function(){
$("div.one").animate({left:0},600);
$("div.two").animate({left:300},600);
$("div.three").animate({left:600},600);
});
$("input#second").click(function(){
$("div.one").animate({left:-300},600);
$("div.two").animate({left:0},600);
$("div.three").animate({left:300},600);
});
$("input#third").click(function(){
$("div.one").animate({left:-600},600);
$("div.two").animate({left:-300},600);
$("div.three").animate({left:0},600);
});​
jsfiddle.net/mYhEV/2/
Hope it helps.
PS: For a cleaner solution you would have to rethink a bit. One method would be to put all the sliders in a wrapper and just moving this wrapper instead of moving.

Try Using these:
Flex Slider
Timelinr
SmartGallery
Skitter

There is documentation literally right in the script file which has options you can use:
$.tiny.carousel = {
options: {
start: 1, // where should the carousel start?
display: 1, // how many blocks do you want to move at 1 time?
axis: 'x', // vertical or horizontal scroller? ( x || y ).
controls: true, // show left and right navigation buttons.
pager: false, // is there a page number navigation present?
interval: false, // move to another block on intervals.
intervaltime: 3000, // interval time in milliseconds.
rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
animation: true, // false is instant, true is animate.
duration: 1000, // how fast must the animation move in ms?
callback: null // function that executes after every move.
}
};
Secifcally: animation: true, // false is instant, true is animate.
Try setting the animation to true when you call the slider on your element (you provided no script code so I can't edit it for you.)
$('YOUR_SLIDERr').tinycarousel({ animation: true });​

Toggle Galleria Full Screen Mode

I am wondering if anyone knows how to toggle between full screen and normal mode in Galleria
The only way I can think of is to switch between themes : default, and Fullscreen theme (which i bought from there)
If you know an even better way, I would appreciate your help.

I’m just going to add to #Ohgodwhy’s answer:
The best way to get the Galleria instance and use the API is to use the Galleria.ready function:
Galleria.ready(function() {
var gallery = this; // galleria is ready and the gallery is assigned
$('#fullscreen').click(function() {
gallery.toggleFullscreen(); // toggles the fullscreen
});
});
Or, you can access the instance via the $.data object if you know that the gallery is initialized:
$('#fullscreen').click(function() {
$('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen
});
I am assuming you have a link/button with the ID 'fullscreen' and the gallery is at ID 'galleria'.

I'm using:
lightbox: true,
before Galleria.run(). This allows you to display fullscreen Overlay after clicking on image in the gallery.

This should work:
JS
Galleria.loadTheme('http://aino.github.com/galleria/demos/categories/themes/classic/galleria.classic.min.js');
$('#galleria').galleria();
Galleria.ready(function() {
var gallery = this;
this.addElement('fscr');
this.appendChild('stage','fscr');
var fscr = this.$('fscr')
.click(function() {
gallery.toggleFullscreen();
});
this.addIdleState(this.get('fscr'), { opacity:0 });
});
CSS
.galleria-fscr{
width:20px;
height:20px;
position:absolute;
bottom:0px;
right:10px;
background:url('fullscreen.png');
z-index:4;
cursor: pointer;
opacity: .3;
}
.galleria-fscr:hover{
opacity:1;
}
Where fullscreen.png is an appropriate image of your choice.

The approach from Richard is working very well.
You could also do it by extending Galleria with-out the ready function:
JS
Galleria.run('.galleria', {
// configure
autoplay: true,
lightbox: true,
idleMode: true,
// extend theme
extend: function() {
var gallery = this; // "this" is the gallery instance
//fullscreen button
this.addElement('fscr');
this.appendChild('stage','fscr');
var fscr = this.$('fscr').click(function() {
gallery.toggleFullscreen();
});
// this.addIdleState(this.get('fscr'), { opacity:0 });
}
});`
And if you'd like to use a fontAwesome icon for the maximize icon you can implement it as following (other CSS styles see Richard's post):
CSS
.galleria-fscr:before {
content: "\f065"; /* char code for fa-expand */
position: absolute;
font-family: FontAwesome;
color: #fff;
}
(keep in mind to include the style sheet of fontAwesome with <link rel="stylesheet" href="css/font-awesome.min.css">)
I'm still having one problem with the maximize button. If I'm hovering over it, it doesn't get white and stays gray. Maybe something with the IDLE state is wrong, but I haven't found a solution yet. (If I remove the code line with this.addIdleState(...) the hovering works. I need to do more tests here.)
I'd also like to change the icon from maximize to the minimize icon once the screen is on fullscreen, but I don't know how to do that yet. That's also on my todo list.
Update 07.02.2014
I figured out how to solve these two issues:
For the "IDLE state" issue - I've removed the IDLE state. Because I don't care if these controls are permanently there and now hovering works as expected. Maybe I check another solution later.
To change an icon on click you can do it with CSS and jQuery:
Add an overriding CSS rule below the first before filter of the maximize icon in your CSS e.g.:
.galleria-fscr.minimize:before{
content: "\f066";
}
Add these JS line after gallery.toggleFullscreen() - that toggles the icon with every click between the normal before style and the minimize before style:
$(".galleria-fscr").toggleClass("minimize");
This works also for a play / resume button (rest of the code is the simillar to the fullscreen code):
JS
...
gallery.playToggle();
$('.galleria-pauseResumeBtn').toggleClass("resume");

From the Galleria documentation.
.enterFullscreen( [callback] )
This will set the gallery in fullscreen mode. It will temporary manipulate some document styles and blow up the gallery to cover the browser screen. Note that it will only fill the browser window, not the client screen (javascript can’t do that).
.toggleFullscreen( [callback] )
Toggles fullscreen mode.
If you need any further explanation of the use of these, please don't hesitate to ask.