I'm using SlidesJS, which is a very customizable plugin for pagination of slideshows.
This is my initialization.
$('.slides').slidesjs
({
width: 300,
height: 300,
navigation: false, // It's for swiping in an iOS web app
pagination: false,
generatePagination: false
});
However, I don't want the slideshow to wrap "the other way around". I don't know if there is a term for this, so I painted this illustration:
Green = Next
Blue = Previous
What I want is the swipes which go from 4 -> 1 or from 1 -> 4 to be disabled. I haven't found a built in feature or property for this. But, is there a reasonable workaround?
Guys! I made it.
It took a couple hours.
The initial recreated problem is here
And my working solution, as explained below, is here.
I found where to put a switch to this looping effect.
AND I setted it as a new option ==> looping (true/false) !!!
If the looping option is set to false... It won't loop.
defaults = {
width: 940,
height: 528,
start: 1,
navigation: {
active: true,
effect: "slide"
},
pagination: {
active: true,
effect: "slide"
},
play: {
active: false,
effect: "slide",
interval: 5000,
auto: false,
swap: true,
pauseOnHover: false,
restartDelay: 2500
},
effect: {
slide: {
speed: 500
},
fade: {
speed: 300,
crossfade: true
}
},
callback: {
loaded: function() {},
start: function() {},
complete: function() {}
},
looping: false // Looping effect from last image to first and vice-versa
};
I slightly modified the Plugin.prototype._slide function to achieve this.
I added a new condition based on a var which I called OK_Proceed.
This var is true by default.
Its value becomes false when trying to go to the image index -1 or data.total... But only if the looping option is set to false.
I wished to preserve the original function...
;)
var OK_Proceed=true; // ADDED var
console.log( this.options.looping );
if (next === -1) {
if( this.options.looping ){
next = this.data.total - 1;
}else{
OK_Proceed=false;
}
}
if (next === this.data.total) {
if( this.options.looping ){
next = 0;
}else{
OK_Proceed=false;
}
}
When this OK_Proceed is false : The script bypasses the animate function entierely.
It is replaced by a small 10px "bounce" effect.
The only thing left to do is to reset the data.animating value:
$.data(_this, "animating", false);
So here is the full function:
Plugin.prototype._slide = function(number) { console.log("Line 430 - _slide: ");
var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
_this = this;
$element = $(this.element);
this.data = $.data(this); console.log( JSON.stringify( $.data(this) ) );
if (!this.data.animating && number !== this.data.current + 1) {
$.data(this, "animating", true);
currentSlide = this.data.current; console.log("Line 437 - currentSlide: "+currentSlide);
if (number > -1) {
number = number - 1;
value = number > currentSlide ? 1 : -1; console.log("Line 440 - value: "+value);
direction = number > currentSlide ? -this.options.width : this.options.width;
next = number;
} else {
value = this.data.direction === "next" ? 1 : -1;
direction = this.data.direction === "next" ? -this.options.width : this.options.width;
next = currentSlide + value; console.log("Line 446 - next: "+next);
} var OK_Proceed=true; // ADDED var
console.log( this.options.looping );
if (next === -1) {
if( this.options.looping ){
next = this.data.total - 1;
}else{
OK_Proceed=false;
}
}
if (next === this.data.total) {
if( this.options.looping ){
next = 0;
}else{
OK_Proceed=false;
}
}
if(OK_Proceed){this._setActive(next); // ADDED condition
slidesControl = $(".slidesjs-control", $element);
if (number > -1) {
slidesControl.children(":not(:eq(" + currentSlide + "))").css({
display: "none",
left: 0,
zIndex: 0
});
}
slidesControl.children(":eq(" + next + ")").css({
display: "block",
left: value * this.options.width,
zIndex: 10
});
this.options.callback.start(currentSlide + 1);
if (this.data.vendorPrefix) {
prefix = this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "translateX(" + direction + "px)";
slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
slidesControl[0].style[transform] = "";
slidesControl[0].style[duration] = "";
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
slidesControl.children(":eq(" + currentSlide + ")").css({
display: "none",
left: 0,
zIndex: 0
});
$.data(_this, "current", next);
$.data(_this, "animating", false);
slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
slidesControl.children(":not(:eq(" + next + "))").css({
display: "none",
left: 0,
zIndex: 0
});
if (_this.data.touch) {
_this._setuptouch();
}
return _this.options.callback.complete(next + 1);
});
} else {
return slidesControl.stop().animate({
left: direction
}, this.options.effect.slide.speed, (function() {
slidesControl.css({
left: 0
});
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
return slidesControl.children(":eq(" + currentSlide + ")").css({
display: "none",
left: 0,
zIndex: 0
}, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
}));
} } else {
console.log("HERE");
$.data(_this, "animating", false);
console.log( JSON.stringify( $.data(this) ) );
// Bouncing effect
$(".slidesjs-control").stop().animate( { "left" : "-=10px" }, 100, "easeInOutBounce", function(){
$(".slidesjs-control").animate( { "left" : "+=10px" }, 100, "easeInOutBounce");
});
} // End added condition
}
};
I cleaned this code from all the console.logs and created a zip file ready to use.
The day after EDIT
There was two other functions to modify in order to make the "touch" behave the same as mouse clicked links... The .zip file above also reflects these changes...
Function modified for click is : _slide.
Functions modified for click are : _setuptouch and _touchmove.
Two classes are available for you to modify : bounceForward and bounceBackward.
The lastest demo is here. Try it on a touch enabled device.
Related
I found a javascript file which I used it for making a carousel in my website. But I want to make it responsive. So, I changed it. When you refresh page, it works well but when you rotate the page in mobile or tablet it could not match itself by new width and height. what is the problem?
$(".website_carousel").jCarouselLite({
btnNext: ".nexts",
btnPrev: ".prev",
visible:(($(window).width() > 481) ? "3" : "2")
})
here is the plugin I used for carousel
(function ($) { // Compliant with jquery.noConflict()
$.jCarouselLite = {
version: '1.1'
};
$.fn.jCarouselLite = function(options) {
options = $.extend({}, $.fn.jCarouselLite.options, options || {});
return this.each(function() { // Returns the element collection. Chainable.
var running,
animCss, sizeCss,
div = $(this), ul, initialLi, li,
liSize, ulSize, divSize,
numVisible, initialItemLength, itemLength, calculatedTo, autoTimeout;
initVariables(); // Set the above variables after initial calculations
initStyles(); // Set the appropriate styles for the carousel div, ul and li
initSizes(); // Set appropriate sizes for the carousel div, ul and li
attachEventHandlers(); // Attach event handlers for carousel to respond
function go(to) {
if(!running) {
clearTimeout(autoTimeout); // Prevents multiple clicks while auto-scrolling - edge case
calculatedTo = to;
if(options.beforeStart) { // Call the beforeStart() callback
options.beforeStart.call(this, visibleItems());
}
if(options.circular) { // If circular, and "to" is going OOB, adjust it
adjustOobForCircular(to);
} else { // If non-circular and "to" is going OOB, adjust it.
adjustOobForNonCircular(to);
} // If neither overrides "calculatedTo", we are not in edge cases.
animateToPosition({ // Animate carousel item to position based on calculated values.
start: function() {
running = true;
},
done: function() {
if(options.afterEnd) {
options.afterEnd.call(this, visibleItems());
}
if(options.auto) {
setupAutoScroll();
}
running = false;
}
});
if(!options.circular) { // Enabling / Disabling buttons is applicable in non-circular mode only.
disableOrEnableButtons();
}
}
return false;
}
function initVariables() {
running = false;
animCss = options.vertical ? "top" : "left";
sizeCss = options.vertical ? "height" : "width";
ul = div.find(">ul");
initialLi = ul.find(">li");
initialItemLength = initialLi.size();
// To avoid a scenario where number of items is just 1 and visible is 3 for example.
numVisible = initialItemLength < options.visible ? initialItemLength : options.visible;
if(options.circular) {
var $lastItemSet = initialLi.slice(initialItemLength-numVisible).clone();
var $firstItemSet = initialLi.slice(0,numVisible).clone();
ul.prepend($lastItemSet) // Prepend the lis with final items so that the user can click the back button to start with
.append($firstItemSet); // Append the lis with first items so that the user can click the next button even after reaching the end
options.start += numVisible; // Since we have a few artificial lis in the front, we will have to move the pointer to point to the real first item
}
li = $("li", ul);
itemLength = li.size();
calculatedTo = options.start;
}
function initStyles() {
div.css("visibility", "visible"); // If the div was set to hidden in CSS, make it visible now
li.css({
overflow: "hidden",
"float": options.vertical ? "none" : "left" // Some minification tools fail if "" is not used
});
ul.css({
margin: "0",
padding: "0",
position: "relative",
"list-style": "none",
"z-index": "1"
});
div.css({
overflow: "hidden",
position: "relative",
"z-index": "2",
});
// For a non-circular carousel, if the start is 0 and btnPrev is supplied, disable the prev button
if(!options.circular && options.btnPrev && options.start == 0) {
$(options.btnPrev).addClass("disabled");
}
}
function initSizes() {
var width_1 = div.width();
width_2=width_1/numVisible;
li.css({'width':width_2+'px'});
liSize = options.vertical ? // Full li size(incl margin)-Used for animation and to set ulSize
li.outerHeight(true) :
width_2;
ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
// Size of the entire UL. Including hidden and visible elements
// Will include LI's (width + padding + border + margin) * itemLength - Using outerwidth(true)
ul.css(sizeCss, ulSize+"px")
.css(animCss, -(calculatedTo * liSize));
// Width of the DIV. Only the width of the visible elements
// Will include LI's (width + padding + border + margin) * numVisible - Using outerwidth(true)
}
function attachEventHandlers() {
if(options.btnPrev) {
$(options.btnPrev).click(function() {
return go(calculatedTo - options.scroll);
});
}
if(options.btnNext) {
$(options.btnNext).click(function() {
return go(calculatedTo + options.scroll);
});
}
if(options.btnGo) {
$.each(options.btnGo, function(i, val) {
$(val).click(function() {
return go(options.circular ? numVisible + i : i);
});
});
}
if(options.mouseWheel && div.mousewheel) {
div.mousewheel(function(e, d) {
return d > 0 ?
go(calculatedTo - options.scroll) :
go(calculatedTo + options.scroll);
});
}
if(options.auto) {
setupAutoScroll();
}
}
function setupAutoScroll() {
autoTimeout = setTimeout(function() {
go(calculatedTo + options.scroll);
}, options.auto);
}
function visibleItems() {
return li.slice(calculatedTo).slice(0,numVisible);
}
function adjustOobForCircular(to) {
var newPosition;
// If first, then goto last
if(to <= options.start - numVisible - 1) {
newPosition = to + initialItemLength + options.scroll;
ul.css(animCss, -(newPosition * liSize) + "px");
calculatedTo = newPosition - options.scroll;
console.log("Before - Positioned at: " + newPosition + " and Moving to: " + calculatedTo);
}
// If last, then goto first
else if(to >= itemLength - numVisible + 1) {
newPosition = to - initialItemLength - options.scroll;
ul.css(animCss, -(newPosition * liSize) + "px");
calculatedTo = newPosition + options.scroll;
console.log("After - Positioned at: " + newPosition + " and Moving to: " + calculatedTo);
}
}
function adjustOobForNonCircular(to) {
// If user clicks "prev" and tries to go before the first element, reset it to first element.
if(to < 0) {
calculatedTo = 0;
}
// If "to" is greater than the max index that we can use to show another set of elements
// it means that we will have to reset "to" to a smallest possible index that can show it
else if(to > itemLength - numVisible) {
calculatedTo = itemLength - numVisible;
}
console.log("Item Length: " + itemLength + "; " +
"To: " + to + "; " +
"CalculatedTo: " + calculatedTo + "; " +
"Num Visible: " + numVisible);
}
function disableOrEnableButtons() {
$(options.btnPrev + "," + options.btnNext).removeClass("disabled");
$( (calculatedTo-options.scroll<0 && options.btnPrev)
||
(calculatedTo+options.scroll > itemLength-numVisible && options.btnNext)
||
[]
).addClass("disabled");
}
function animateToPosition(animationOptions) {
running = true;
ul.animate(
animCss == "left" ?
{ left: -(calculatedTo*liSize) } :
{ top: -(calculatedTo*liSize) },
$.extend({
duration: options.speed,
easing: options.easing
}, animationOptions)
);
}
});
};
$.fn.jCarouselLite.options = {
btnPrev: null, // CSS Selector for the previous button
btnNext: null, // CSS Selector for the next button
btnGo: null, // CSS Selector for the go button
mouseWheel: false, // Set "true" if you want the carousel scrolled using mouse wheel
auto: null, // Set to a numeric value (800) in millis. Time period between auto scrolls
speed: 200, // Set to a numeric value in millis. Speed of scroll
easing: null, // Set to easing (bounceout) to specify the animation easing
vertical: false, // Set to "true" to make the carousel scroll vertically
circular: true, // Set to "true" to make it an infinite carousel
visible: 3, // Set to a numeric value to specify the number of visible elements at a time
start: 0, // Set to a numeric value to specify which item to start from
scroll: 1, // Set to a numeric value to specify how many items to scroll for one scroll event
beforeStart: null, // Set to a function to receive a callback before every scroll start
afterEnd: null // Set to a function to receive a callback after every scroll end
};
})(jQuery);
The jquery library may be not working.Make sure you did include javascript Jquery library is correctly.
From the official documentation:
https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels
Responsive Carousels
The responsive option is set to false by default. Once you set it to
true, you may want to set a few other options to get the desired
effect:
Everything automatic (autoCSS is true by default, so no need to add
it)
$('div.carousel').jCarouselLite({
// autoCSS: true,
autoWidth: true,
responsive: true
});
Everything manual (autoWidth is false by default, so no need to add
it)
Your best bet in this situation is to use CSS media queries.
$('div.carousel').jCarouselLite({
autoCSS: false,
// autoWidth: false,
responsive: true
});
// Bind your own handler to the refreshCarousel custom event, //
which is triggered when the window stops resizing
$('div.carousel').on('refreshCarousel', function() {
// do something
});
I am trying to get the container to automatically calculate the height and am using the following code but with no luck.
The container is called #featured-content
/* <![CDATA[ */
var jqu = jQuery.noConflict();
jqu( function () {
/* Cycle */
jqu( '#featured-content' ).cycle( {
slideExpr: '.featured-post',
fx: 'fade',
speed: 1000,
cleartypeNoBg: true,
pager: '#slide-thumbs',
containerResize: true,
slideResize: false,
width: '100%',
timeout: 5000,
prev: '#slider-prev',
next: '#slider-next',
pagerAnchorBuilder: function( idx, slide ) {
// return selector string for existing anchor
return '#slide-thumbs li:eq(' + idx + ') a';
}
} );
// call back function to animate the height of the container
function onAfter(curr, next, opts, fwd) {
var index = opts.currSlide;
$('#slider-prev')[index == 0 ? 'hide' : 'show']();
$('#slider-next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
//get the height of the current slide
var $ht = $(this).height();
//animates the container's height to that of the current slide
$(this).parent().animate({ height: $ht });
}
} );
/* ]]> */
Callback function not initiated
after: onAfter,
Also try animation "fast"
$(this).parent().animate({ height: $ht }, "fast");
Just added code here http://tny.cz/935e48e2
I would like to replicate the same functionality as at ign.com, where the indicator bar fills up over time. I got it working but I got some sync issues after a while. So i'm open to suggestions to do it from scratch (I'm beginner with all this animation stuff).
This is the code.
function GoProgressBar() {
var $lineStatus = $('.featured-articles-line-status');
$lineStatus.css('width', '0px');
$lineStatus.animate({ width: '694px' }, 12000, 'linear', GoProgressBar);
};
function GoOverlay(width, isLast, currentWidth) {
var $overlayLine = $('.status-overlay');
if (isLast) {
$overlayLine.css('width', '0px');
return;
}
if (currentWidth) {
$overlayLine.css('width', currentWidth);
$overlayLine.animate({ width: width }, 700);
} else {
$overlayLine.css('width', '0px');
$overlayLine.animate({ width: width }, 700);
}
};
function ShowNextElement() {
var $elements = $('.element'),
$overlayLine = $('.status-overlay'),
$liElements = $('#elements li'),
width;
if (currentElement === elements[elements.length - 1]) {
currentWidth = $overlayLine.width() + 'px',
width = currentWidth + $($liElements[(elements.length - 1)]).outerWidth() + 'px';
GoOverlay(width, true, currentWidth);
currentElement = elements[0];
$elements.hide();
$(currentElement).fadeIn(1000);
return;
}
i = elements.indexOf(currentElement) + 1;
var currentTab = $liElements[(i - 1)],
currentWidth = $overlayLine.width();
if (currentWidth) {
width = currentWidth + $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, currentWidth);
} else {
width = $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, false);
}
currentElement = elements[i];
$elements.hide();
$(currentElement).fadeIn(1000);
}
Thanks!
http://jqueryui.com/progressbar/
You could try this..
There are more features in addition to this,check it out.
Might come useful :)
There are a wealth of ways in which you could do this.
You should have some kind of controller to manage the show and hide.
var Application = {
show : function() {
jQuery('.application-overlay').stop().animate({ top: 40 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 1000},500);
},
hide : function() {
jQuery('.application-overlay').stop().animate({ top: -1200 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 200},500);
}
};
Then you have your triggers : Application.show();
jQuery(document).ready(function() {
jQuery('.cf-speakers .span2 a').hover(function() {
jQuery('span',this).stop().animate({ opacity: 1.0 },100);
}, function() {
jQuery('span',this).stop().animate({ opacity: 0.0 },100);
});;
jQuery('.apply-now').click(function(e) {
Application.show();
e.stopPropagation();
e.preventDefault();
});
jQuery('body').click(function(e) {
var application = jQuery('.application-overlay');
if( application.has(e.target).length === 0)
Application.hide();
});
jQuery('.gallery a').click(function(e) {
var src = jQuery(this).attr('href');
jQuery('.main-container img').hide().attr('src', src).fadeIn('fast');
jQuery('.gallery a').each(function() {
jQuery(this).removeClass('active');
});
jQuery(this).addClass('active');
e.stopPropagation();
e.preventDefault();
});
});
Your css would of course come into play also but that can be left to you!
This should give you an example of what you need .. But you're already on the right track, sometimes there is merit in reusing other people code too you know! :)
I have this javascript function I use that when clicked goes a certain distance. This is used within a scroller going left to right that uses about 7 divs. My question is how do I get the click to go the full distance first before the click can be used again? The issue is if the user rapidly clicks on the arrow button it resets the distance and sometimes can end up in the middle of an image instead of right at the seam. What code am I missing to accomplish this?
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000);
});
});
I would've thought that the easiest way would be to have a boolean flag indicating whether or not the animation is taking place:
$(function () {
var animating = false,
outerwrap = $(".outerwrapper");
$("#right, #left").click(function () {
if (animating) {return;}
var dir = (this.id === "right") ? '+=' : '-=';
animating = true;
outerwrap.animate({
scrollLeft: dir + '251'
}, 1000, function () {
animating = false;
});
});
});
works for me: http://jsfiddle.net/BYossarian/vDtwy/4/
Use .off() to unbind the click as soon as it occurs, then re-bind it once the animation completes.
function go(elem){
$(elem).off('click'); console.log(elem);
var dir = elem.id == "right" ? '+=' : '-=';
$(".outerwrapper").stop().animate({ left: dir + '251' }, 3000, function(){
$("#right, #left").click(go);
});
}
$("#right, #left").click(function () {
go(this);
});
jsFiddle example
You can see in this simplified example that the click event is unbound immediately after clicking, and then rebound once the animation completes.
Use an automatic then call like this
var isMoving = false;
$(function () {
$("#right, #left").click(function () {
if (isMoving) return;
isMoving = true;
var dir = this.id == "right" ? '+=' : '-=';
$(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000).then(function(){isMoving = false}());
});
});
I think that you miss the fact that when you make stop() you actually position the slider at some specific point. I.e. if your scroller is 1000px and you click left twice very quickly you will probably get
scrollLeft: 0 - 251
scrollLeft: -2 - 251
So, I think that you should use an index and not exactly these += and -= calculations. For example:
$(function () {
var numberOfDivs = 7;
var divWidth = 251;
var currentIndex = 0;
$("#right, #left").click(function () {
currentIndex = this.id == "right" ? currentIndex+1 : currentIndex-1;
currentIndex = currentIndex < 0 ? 0 : currentIndex;
currentIndex = currentIndex > numberOfDivs ? numberOfDivs : currentIndex;
$(".outerwrapper").stop().animate({ scrollLeft: (currentIndex * divWidth) + "px" }, 1000);
});
});
A big benefit of this approach is that you are not disabling the clicking. You may click as many times as you want and you can do that quickly. The script will still works.
This will work perfectly fine:
var userDisplaysPageCounter = 1;
$('#inventory_userdisplays_forward_button').bind('click.rightarrowiventory', function(event) {
_goForwardInInventory();
});
$('#inventory_userdisplays_back_button').bind('click.leftarrowiventory', function(event) {
_goBackInInventory();
});
function _goForwardInInventory()
{
//$('#inventory_userdisplays_forward_button').unbind('click.rightarrowiventory');
var totalPages = $('#userfooterdisplays_list_pagination_container div').length;
totalPages = Math.ceil(totalPages/4);
// alert(totalPages);
if(userDisplaysPageCounter < totalPages)
{
userDisplaysPageCounter++;
$( "#userfooterdisplays_list_pagination_container" ).animate({
left: "-=600",
}, 500, function() {
});
}
}
function _goBackInInventory()
{
//$('#inventory_userdisplays_back_button').unbind('click.leftarrowiventory');
if(userDisplaysPageCounter > 1)
{
userDisplaysPageCounter--;
$( "#userfooterdisplays_list_pagination_container" ).animate({
left: "+=600",
}, 500, function() {
});
}
}
I second BYossarian's answer.
Here is a variation on his demo, which "skips" the animation when the user clicks several times quickly on the buttons :
$(function () {
var targetScroll = 0,
outerwrap = $(".outerwrapper");
$("#right, #left").click(function () {
// stop the animation,
outerwrap.stop();
// hard set scrollLeft to its target position
outerwrap.scrollLeft(targetScroll*251);
if (this.id === "right"){
if (targetScroll < 6) targetScroll += 1;
dir = '+=251';
} else {
if (targetScroll > 0) targetScroll -=1;
dir = '-=251';
}
outerwrap.animate({ scrollLeft: dir }, 1000);
});
});
fiddle
I am a bit confused... I can load a javascript file when its above another jquery file in the tag however when its below other jquery files it doesn't load.
When I put it above the jquery.min.js file its loads fine but when its below it fails to load.
Im thinking there is something wrong with my jquery file.. but not sure what!
My Javascript file is:
/* =======================================================================================================================================*/
// gallery slider
/* =======================================================================================================================================*/
$(document).ready(function () {
$('.project').mouseover(function ()
{
$(this).children('.cover').animate(
{
height: "172px"
});
$(this).children('.title').animate(
{
bottom: '-25px', height: "100px"
});
});
$('.project').mouseleave(function ()
{
$(this).children('.cover').animate(
{
height: "17px"
});
$(this).children('.title').animate(
{
bottom: "0px", height: "20px"
});
});
});
/* =======================================================================================================================================*/
// Top Contact Area
/* =======================================================================================================================================*/
$(window).load(function () {
$("#contactArea").css('height', '0px');
$(".contact-hurry a").toggle(
function () {
$(this).text('Quick Contact Hide / Close [-]')
$("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'})
$("body").addClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
},
function () {
$(this).text('Quick Contact Show / Open [+]')
$("body").removeClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
$("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'})
}
);
});
/* =======================================================================================================================================*/
// Mega Menu $("#contactArea").css('height', '0px');
/* =======================================================================================================================================*/
$(document).ready(function () {
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 150;
//Calculate row
$(this).find("ul.floating").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else { //If row does not exist...
$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 100, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};
$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);
jQuery(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 0 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// run the effect
$( "#effect" ).toggle( selectedEffect, options, 500 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
/* =======================================================================================================================================*/
// faqs
/* =======================================================================================================================================*/
$(document).ready(function(){
$("#faqs tr:odd").addClass("odd");
$("#faqs tr:not(.odd)").hide();
$("#faqs tr:first-child").show();
$("#faqs tr.odd").click(function(){
$(this).next("tr").toggle('fast');
$(this).find(".arrow").toggleClass("up");
});
});
/* =======================================================================================================================================*/
// Portfolio slider
/* =======================================================================================================================================*/
/*
$(document).ready(function() {
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index]
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setTimeout("showNext()", 3900);
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage;
currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}
function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}
var myTimer;
$(document).ready(function() {
myTimer = setTimeout("showNext()", 3000);
showNext(); //loads first image
});
});
*/
$("#foo2").carouFredSel({
circular: false,
infinite: false,
auto : false,
scroll : {
items : "page"
},
prev : {
button : "#foo2_prev",
key : "left"
},
next : {
button : "#foo2_next",
key : "right"
},
pagination : "#foo2_pag"
});
});
I am not sure what you actually mean, but I give it a shot.
If you include the jquery library before script files that uses jquery, those will succeed.
A script that uses jquery must have the symbols $ and jQuery defined and javascript runs the file sequentially from top to bottom.
That is why including jquery must be done before everything else.