Develop Reference

Auto Scaling Image Annotation

Scalize is a jQuery plugin used for adding custom markers (hotspots) with custom popovers and animations to containers or images.
But now When I click one by one on pointer it show all one by one But I am trying to show only one so when click another pointer will close the other which already opened.
Here is my EXAMPLE
(function(jQuery) {
"use strict";
//----------------------------------------//
// Variable
//----------------------------------------//
var variable = {
width : 0,
height : 0,
selector : '.item-point',
styleSelector : 'circle',
animationSelector : 'pulse2',
animationPopoverIn : 'flipInY',
animationPopoverOut : 'flipOutY',
onInit : null,
getSelectorElement : null,
getValueRemove : null
}
//----------------------------------------//
// Scaling
//----------------------------------------//
var scaling = {
settings : null,
//----------------------------------------//
// Initialize
//----------------------------------------//
init: function(el, options){
this.settings = jQuery.extend(variable, options);
this.event(el);
scaling.layout(el);
jQuery(window).on('load', function(){
scaling.layout(el);
});
jQuery(el).find('.target').on('load', function(){
scaling.layout(el);
});
jQuery(window).on('resize', function(){
scaling.layout(el);
});
},
//----------------------------------------//
// Event
//----------------------------------------//
event : function(elem){
// Set Style Selector
if ( this.settings.styleSelector ) {
jQuery(this.settings.selector).addClass( this.settings.styleSelector );
}
// Set Animation
if ( this.settings.animationSelector ) {
if( this.settings.animationSelector == 'marker' ){
jQuery(this.settings.selector).addClass( this.settings.animationSelector );
jQuery(this.settings.selector).append('<div class="pin"></div>')
jQuery(this.settings.selector).append('<div class="pulse"></div>')
}else{
jQuery(this.settings.selector).addClass( this.settings.animationSelector );
}
}
// Event On Initialize
if ( jQuery.isFunction( this.settings.onInit ) ) {
this.settings.onInit();
}
// Content add class animated element
jQuery(elem).find('.content').addClass('animated');
// Wrapper selector
jQuery(this.settings.selector).wrapAll( "<div class='wrap-selector' />");
// Event Selector
jQuery(this.settings.selector).each(function(){
// Toggle
jQuery('.toggle', this).on('click', function(e){
e.preventDefault();
jQuery(this).closest(scaling.settings.selector).toggleClass('active');
// Selector Click
var content = jQuery(this).closest(scaling.settings.selector).data('popover'),
id = jQuery(content);
if(jQuery(this).closest(scaling.settings.selector).hasClass('active') && !jQuery(this).closest(scaling.settings.selector).hasClass('disabled')){
if ( jQuery.isFunction( scaling.settings.getSelectorElement ) ) {
scaling.settings.getSelectorElement(jQuery(this).closest(scaling.settings.selector));
}
id.fadeIn(500,function(){
if( getBrowserName() == "Safari" ){
setTimeout(function(){
id.removeClass('flipInY');
},125);
}
});
scaling.layout(elem);
id.removeClass(scaling.settings.animationPopoverOut);
id.addClass(scaling.settings.animationPopoverIn);
}else{
if(jQuery.isFunction( scaling.settings.getValueRemove )){
scaling.settings.getValueRemove(jQuery(this).closest(scaling.settings.selector));
}
id.removeClass(scaling.settings.animationPopoverIn);
id.addClass(scaling.settings.animationPopoverOut);
id.delay(500).fadeOut();
}
});
// Exit
var target = jQuery(this).data('popover'),
idTarget = jQuery(target);
idTarget.find('.exit').on('click', function(e){
e.preventDefault();
// selector.removeClass('active');
jQuery('[data-popover="'+ target +'"]').removeClass('active');
idTarget.removeClass(scaling.settings.animationPopoverIn);
idTarget.addClass(scaling.settings.animationPopoverOut);
idTarget.delay(500).fadeOut();
});
});
},
//----------------------------------------//
// Layout
//----------------------------------------//
layout : function(elem){
// Get Original Image
var image = new Image();
image.src = elem.find('.target').attr("src");
// Variable
var width = image.naturalWidth,
height = image.naturalHeight,
getWidthLess = jQuery(elem).width(),
setPersenWidth = getWidthLess/width * 100,
setHeight = height * setPersenWidth / 100;
// Set Heigh Element
jQuery(elem).css("height", setHeight);
// Resize Width
if( jQuery(window).width() < width ){
jQuery(elem).stop().css("width","100%");
}else{
jQuery(elem).stop().css("width",width);
}
// Set Position Selector
jQuery(this.settings.selector).each(function(){
if( jQuery(window).width() < width ){
var getTop = jQuery(this).data("top") * setPersenWidth / 100,
getLeft = jQuery(this).data("left") * setPersenWidth / 100;
}else{
var getTop = jQuery(this).data("top"),
getLeft = jQuery(this).data("left");
}
jQuery(this).css("top", getTop + "px");
jQuery(this).css("left", getLeft + "px");
// Target Position
var target = jQuery(this).data('popover'),
allSize = jQuery(target).find('.head').outerHeight() + jQuery(target).find('.body').outerHeight() + jQuery(target).find('.footer').outerHeight();
jQuery(target).css("left", getLeft + "px");
jQuery(target).css("height", allSize + "px");
if(jQuery(target).hasClass('bottom')){
var getHeight = jQuery(target).outerHeight(),
getTopBottom = getTop - getHeight;
jQuery(target).css("top", getTopBottom + "px");
}else if(jQuery(target).hasClass('center')){
var getHeight = jQuery(target).outerHeight() * 0.50,
getTopBottom = getTop - getHeight;
jQuery(target).css("top", getTopBottom + "px");
}else{
jQuery(target).css("top", getTop + "px");
}
jQuery('.toggle', this).css('width', jQuery(this).outerWidth());
jQuery('.toggle', this).css('height', jQuery(this).outerHeight());
// Toggle Size
if(jQuery(this).find('.pin')){
var widthThis = jQuery('.pin', this).outerWidth(),
heightThis = jQuery('.pin', this).outerHeight();
jQuery('.toggle', this).css('width', widthThis);
jQuery('.toggle', this).css('height', heightThis);
}
});
}
};
//----------------------------------------//
// Scalize Plugin
//----------------------------------------//
jQuery.fn.scalize = function(options){
return scaling.init(this, options);
};
}(jQuery));
function getBrowserName() {
var name = "Unknown";
if(navigator.userAgent.indexOf("MSIE")!=-1){
name = "MSIE";
}
else if(navigator.userAgent.indexOf("Firefox")!=-1){
name = "Firefox";
}
else if(navigator.userAgent.indexOf("Opera")!=-1){
name = "Opera";
}
else if(navigator.userAgent.indexOf("Chrome") != -1){
name = "Chrome";
}
else if(navigator.userAgent.indexOf("Safari")!=-1){
name = "Safari";
}
return name;
}

Add this to your initialisation:
getSelectorElement: function(el) {
$('.item-point.active').not($(el)[0]).find('.toggle').click();
}
This hooks into the getSelectorElement method in the Scalize plugin and triggers a click on any active (open) elements that don't match the most recently clicked item.
Add it like so:
$(document).ready(function(){
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'fadeIn',
animationPopoverOut: 'fadeOut',
animationSelector: 'pulse2',
getSelectorElement: function(el) {
$('.item-point.active').not($(el)[0]).find('.toggle').click();
}
});
});
Note, because this is hooking into existing methods in the plugin it's a little safer (no unpredictable side effects, plus you get the intended transition out on the disappearing elements). Fiddle.

I've modified your jsFiddle to work.
TL;DR: Anytime an point is clicked, if there are other active siblings, loop over them and hide their popups.
It isn't a pretty way of doing it but it is working in the Fiddle.
$('.scalize').on('click', '.item-point', (function() {
$(this).siblings('.item-point.active').each(function() {
var popover = $(this).data('popover');
$(popover).removeClass('fadeIn').css({
'display': 'none'
});
$(this).removeClass('active');
});
}));

How to hide items in the correct sequence? , Using waypoint, TweenMax, jquery

I'm collapsando the header when I scroll the browser window, I'm using waypoints to trigger a function when passing a certain limit.
My problem is how to do that, for example, when I scroll down first disappear content (form inputs) and then change the height of the header, and then when I scroll up first increase height and then display the contents (form inputs) .
How do you could do?
I have a example here: fiddle
JS:
$(document).ready(init);
function init(){
var header, pageContainer, pageContent, brandImage;
header = $('header');
pageContainer = $('#page-container');
pageContent = $('#page-content');
brandImage = $('.brand img');
//functions
collapseHaeder();
function collapseHaeder(){
if(pageContainer.hasClass('collapse-header')){
var waypoint = new Waypoint({
element: document.getElementById('page-content'),
handler: function(direction) {
var elementsToResize = $('header, .brand-holder, .header-content');
var hideElms = $('.hide-element');
if(direction == 'up'){
hideElements(hideElms);
resizeHeader(elementsToResize);
}else {
resizeHeader(elementsToResize);
hideElements(hideElms);
}
}
});
}
}
function resizeHeader(elemts){
var newHeight = 45;
var brandHeight = newHeight - 10;
var easingEffect = 'Quart.easeInOut';
if(!elemts.hasClass('resized')){
elemts.addClass('resized');
}else {
elemts.removeClass('resized');
newHeight = 140;
brandHeight = newHeight / 2;
}
//header elements containers
TweenMax.to(elemts, 1, {height:newHeight, ease: easingEffect});
//page container padding
TweenMax.to(pageContainer, 1, {paddingTop:newHeight, ease: easingEffect});
//brand image
TweenMax.to(brandImage, 1, {height:brandHeight, ease: easingEffect});
}
function hideElements(hiddenElement){
var classHidded = 'has-hided';
if(!hiddenElement.hasClass(classHidded)){
hiddenElement.addClass(classHidded);
hiddenElement.fadeOut(800);
}else {
hiddenElement.fadeIn(500);
hiddenElement.removeClass(classHidded);
}
}
}

There is no need to use jQuery's fadeIn and fadeOut when you are already using GSAP. Take a look at this jsFiddle that I have created, code of which is as follows:
/*global TweenMax,TimelineMax*/
$(document).ready(init);
function init() {
var header, pageContainer, pageContent, brandImage, brandHolder, headerContent, hideElement;
var duration = .8,
ease = 'Power4.easeInOut',
stagger = duration * .2;
var minHeight = 45;
var brandHeight = minHeight - 10;
var classNameResized = 'resized';
var classNameHidden = 'has-hided';
var fadeTween = null,
heightTween = null,
paddingTween = null,
imageTween = null;
header = $('header');
pageContainer = $('#page-container');
pageContent = $('#page-content');
brandImage = $('.brand img');
brandHolder = $('.brand-holder');
headerContent = $('.header-content');
hideElement = $('.hide-element');
//functions
initTweens();
collapseHaeder();
function initTweens() {
fadeTween = TweenMax.to(hideElement, duration, {
autoAlpha: 0,
display: 'none',
ease: ease,
paused: true
});
heightTween = TweenMax.to([header, brandHolder, headerContent], duration, {
height: minHeight,
ease: ease,
paused: true,
delay: stagger
});
paddingTween = TweenMax.to(pageContainer, duration, {
paddingTop: minHeight,
ease: ease,
paused: true,
delay: stagger
});
imageTween = TweenMax.to(brandImage, duration, {
height: brandHeight,
ease: ease,
paused: true,
delay: stagger
});
}
function addClasses() {
if (!header.hasClass(classNameResized)) {
header.addClass(classNameResized);
brandHolder.addClass(classNameResized);
headerContent.addClass(classNameResized);
}
if (!hideElement.hasClass(classNameHidden)) {
hideElement.addClass(classNameHidden);
}
}
function removeClasses() {
if (header.hasClass(classNameResized)) {
header.removeClass(classNameResized);
brandHolder.removeClass(classNameResized);
headerContent.removeClass(classNameResized);
}
if (hideElement.hasClass(classNameHidden)) {
hideElement.removeClass(classNameHidden);
}
}
function collapseHaeder() {
if (pageContainer.hasClass('collapse-header')) {
var waypoint = new Waypoint({
element: pageContent,
handler: function (direction) {
if (direction == 'up') {
fadeTween.reverse();
heightTween.reverse();
paddingTween.reverse();
imageTween.reverse();
removeClasses();
} else {
fadeTween.play();
heightTween.play();
paddingTween.play();
imageTween.play();
addClasses();
}
}
});
}
}
}
There are many things that can be improved here in terms of code structure, animation style etc e.g. animating translateY instead of height for a more smooth animation (Link & Link) but I have tried to keep the structure / approach of the code untouched.
Hope it helps.
P.S. I would strongly recommend to take a look at TimelineMax as well for all your sequencing needs in animations. I have also forked another version using TimelineMax.
T

Make JavaScript/jQuery tabs return to position on mouse out

This post is about the 3 green tabs at the top of the page (link is below). I have almost got these moving tabs how I want them, but I am not able to get the tabs to return to original position on mouse out or on a click elsewhere. Instead they move back to position after a set amount of time. How difficult is it to have them move back on mouse out?
Site is here http://theveganproject.ca/wp/
Thanks!
var sliding = 0;
var slideTime = '';
// Set is sliding value
function setSliding(a_ISliding){
sliding = a_ISliding;
}
// Get is sliding value
function getSliding(){
return sliding;
}
// Carry out accordian styled effect
function accordion(evt) {
el = Event.element(evt);
var eldown = getNextSibling(el);
// If element is visible do nothing
if ($('visible') == el) {
return;
}
if ($('visible')) {
if( getSliding() == 1 ){
return false;
}
var elup = getNextSibling($('visible'));
setSliding( 1 );
parellelSlide( elup, eldown );
$('visible').id = '';
}
else{
setSliding( 1 );
singleSlide( eldown );
}
el.id = 'visible';
}
// Setup accordian initial state
function init() {
var bodyPanels = document.getElementsByClassName('panel_body');
var panels = document.getElementsByClassName('panel');
var noPanels = panels.length;
var percentageWidth = 100 / noPanels;
var position = 0;
// Loop through body panels and panels applying required styles and adding event listeners
for (i = 0; i < bodyPanels.length; i++) {
bodyPanels[i].hide();
panels[i].style.width = percentageWidth + '%';
panels[i].style.position = 'absolute';
panels[i].style.left = position + '%';
Event.observe(panels[i].getElementsByTagName('h3')[0], 'mouseover', accordion, false);
Event.observe(panels[i].getElementsByTagName('h3')[0], 'mousemove', accordion, false);
Event.observe(document.body, 'mousemove', resetIdle, false);
position += percentageWidth;
}
if( $('visible') ){
// Set panel with id of visible to be initial displayed
var vis = $('visible').parentNode.id+'-body';
$(vis).show();
}
setIdle();
}
// Next sibling method to work around firefox issues
function getNextSibling(startBrother){
var endBrother=startBrother.nextSibling;
while(endBrother.nodeType!=1){
endBrother = endBrother.nextSibling;
}
return endBrother;
}
function parellelSlide( elup, eldown ){
new Effect.Parallel(
[
new Effect.SlideUp(elup),
new Effect.SlideDown(eldown)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}
function singleSlide( eldown ){
new Effect.Parallel(
[
new Effect.SlideDown(eldown)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}
function resetTabs(){
var resetEl = getNextSibling( $('visible') );
setSliding( 1 );
new Effect.Parallel(
[
new Effect.SlideUp( resetEl )
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
$('visible').id = '';
}
function resetIdle(){
if( $('visible') ){
window.clearTimeout( slideTime );
slideTime = window.setTimeout( "resetTabs()", 1000 );
}
}
function setIdle(){
if( $('visible') ){
slideTime = window.setTimeout( "resetTabs()", 1000 );
}
}
Event.observe(window, 'load', init, false);

Two animations run the same time jquery

I have tried to make two squares move at the same time...
I know the first animation is repeating to infinite but what should i do?
JsFiddle

Both of the other solutions are correct, but please, PLEASE don't make your code a list of if else conditions with a massive inside block. Consider, instead the following solution:
http://jsfiddle.net/NM78r/
$(document).ready(function(){
animateTheBox('block1',0);
animateTheBox('block2',2);
});
function animateTheBox(block,i) {
var animation = {};
var duration = 3000;
var easing = 'linear';
var done = function(){ animateTheBox(block, (i+1)%4); };
switch(i){
case 0: animation = {'left' : "-=100px"}
break;
case 1: animation = {'top' : "-=100px"}
break;
case 2: animation = {'left' : "+=100px"}
break;
case 3: animation = {'top' : "+=100px"}
break;
default: return; //This is so you can't call the function in weird ways, as before.
}
$('.' + block).animate(animation, duration, easing, done);
}
Use a switch statement to determine what kind of animation to do, then only write the actual animation call once. This kind of abstraction is easier to read, and has the added benefit of being way more maintainable. You can be sure that your animation will be done the same way every single time.
EDIT:
Though the above design pattern is probably better in the long run, you could easily do this with an array instead:
$(document).ready(function(){
animateTheBox('block1',0);
animateTheBox('block2',2);
});
function animateTheBox(block,i) {
var animations = [
{'left' : "-=100px"}
, {'top' : "-=100px"}
, {'left' : "+=100px"}
, {'top' : "+=100px"}
];
var duration = 3000;
var easing = 'linear';
var done = function(){ animateTheBox(block, (i+1)%4); };
if ( i < 0 || i >= animations.length)
return; //Don't deal with out of bound numbers.
$('.' + block).animate(animations[i], duration, easing, done);
}
http://jsfiddle.net/4S6Mg/1/
And actually, this could make multi step animation abstraction really easy:
$(document).ready(function(){
var block1Steps = [
{'left' : "-=100px"}
, {'top' : "-=100px"}
, {'left' : "+=100px"}
, {'top' : "+=100px"}
];
var block2Steps = [
{'left' : "+=100px"}
, {'top' : "+=100px"}
, {'left' : "-=100px"}
, {'top' : "-=100px"}
];
multiAnimate($('.block1'), block1Steps, 3000, 'linear', true);
multiAnimate($('.block2'), block2Steps, 3000, 'linear', true);
});
function multiAnimate(item, animations, duration, easing, infinite){
var i = -1;
var step = function(){
i++;
if (infinite)
i %= animations.length;
if (i >= animations.length) return;
item.animate(animations[i], duration, easing, step);
};
step();
}
http://jsfiddle.net/jp2K4/
Then, if you wanted to get REALLY Apeshit, you could give each animation its own duration and easing, and BAM! You've basically created for yourself a little arbitrary multistep animation library.
function multiAnimate(item, animations, duration, easing, infinite){
var defaultDuration = 1000;
var defaultEasing = 'linear';
var i = -1;
var step = function(){
i++;
if (infinite)
i %= animations.length;
if (i >= animations.length) return;
item.animate(animations[i].animation
, (animations[i].duration)? animations[i].duration: defaultDuration
, (animations[i].easing)? animations[i].easing: defaultEasing
, step
);
};
step();
}
$(document).ready(function(){
var block1Steps = [
{
animation: {'left' : "-=100px"}
, duration: 3000
, easing: 'linear'
}
, {
animation: {'top' : "-=100px"}
, duration: 1000
, easing: 'swing'
}
, {
animation: {'left' : "+=100px"}
, duration: 5000
, easing: 'swing'
}
, {
animation: {'top' : "+=100px"}
, duration: 2000
, easing: 'linear'
}
];
var block2Steps = [
{
animation: {'left' : "+=100px"}
, duration: 5000
, easing: 'swing'
}
, {
animation: {'top' : "+=100px"}
, duration: 2000
, easing: 'linear'
}
, {
animation: {'left' : "-=100px"}
, duration: 3000
, easing: 'linear'
}
, {
animation: {'top' : "-=100px"}
, duration: 1000
, easing: 'swing'
}
];
multiAnimate($('.block1'), block1Steps, 3000, 'linear', true);
multiAnimate($('.block2'), block2Steps, 3000, 'linear', true);
});
http://jsfiddle.net/nnQU8/

The reason is you need to wait for the first animation to complete before telling the box to begin the next set of animation. In your code, you're not giving the red box a chance to begin animating because the yellow one is constantly doing it (there is a closure created by the animateTheBox and both boxes are calling it) :)
So I added the complete function handler to your .animate() and moved the animateTheBox() call into there.
See: http://jsfiddle.net/DkmKA/

You need to use the completion function of each animation to start the next animation like this:
$(document).ready(function(){
animateTheBox('block1',0);
animateTheBox('block2',2);
});
function animateTheBox(block,i) {
if (i==0)
{
$('.'+block).animate({'left' : "-=100px"}, 3000, 'linear', function() {
animateTheBox(block,1);
});
}
else if (i==1)
{
$('.'+block).animate({'top' : "-=100px"}, 3000, 'linear', function() {
animateTheBox(block,2);
});
}
else if (i==2)
{
$('.'+block).animate({'left' : "+=100px"}, 3000, 'linear', function() {
animateTheBox(block,3);
});
}
else if (i==3)
{
$('.'+block).animate({'top' : "+=100px"}, 3000, 'linear', function() {
animateTheBox(block,0);
});
}
}
Working demo: http://jsfiddle.net/jfriend00/39SUN/
In the spirit of DRY, here's a much shorter way of doing it:
$(document).ready(function(){
animateTheBox('.block1',0);
animateTheBox('.block2',2);
});
function animateTheBox(block,i) {
var anims = [
{left: "-=100px"},
{top: "-=100px"},
{left: "+=100px"},
{top: "+=100px"},
];
$(block).animate(anims[i], 3000, 'linear', function() {
animateTheBox(block,(i+1) % 4);
});
}
Working demo: http://jsfiddle.net/jfriend00/nKuGs/

How to change current window content when tabbed bar pressed on titanium?

has anyone know how to change window's view when tabbed bar is pressed in titanium?
i've created tabbed bar and i don't know how to handling that event..
here's my code:
if (Titanium.Platform.osname === 'iphone'){
var headerDetailTabbedBar = Titanium.UI.iOS.createTabbedBar({
labels:['Header', 'Detail'],
backgroundColor:'#336699',
style:Titanium.UI.iPhone.SystemButtonStyle.BAR,
top:10,
height:25,
width:'85%',
index:0
});
//View Mode
var btnBack = Titanium.UI.createButton({
title:'Back',
style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
var btnEdit = Titanium.UI.createButton({
title:'Edit',
style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
//Save Mode
var btnCancel = Titanium.UI.createButton({
title:'Cancel',
style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
var btnSave = Titanium.UI.createButton({
title:'Save',
style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
subMenuDisplayEditWindow.setLeftNavButton(btnBack);
subMenuDisplayEditWindow.setRightNavButton(btnEdit);
subMenuDisplayEditWindow.add(headerDetailTabbedBar);
headerDetailTabbedBar.addEventListener('click',function(e){
if(e.index === 0){
//What should i do?
}
else{
//What should i do?
}
});
}
all i want is to change window's view with other view when the tabbed bar is pressed.. any suggestion?? thanks in advance..

var window = Ti.UI.createWindow();
var headerDetailTabbedBar = Titanium.UI.iOS.createTabbedBar({
labels : ['Header', 'Detail'],
backgroundColor : '#336699',
style : Titanium.UI.iPhone.SystemButtonStyle.BAR,
top : 10,
height : 25,
width : '85%',
index : 0
});
window.add(headerDetailTabbedBar);
var view1 = Ti.UI.createView({
backgroundColor : 'white',
top : 50
});
var view2 = Ti.UI.createView({
backgroundColor : 'red',
top : 50
});
window.add(view2);
window.add(view1);
headerDetailTabbedBar.addEventListener('click', function(e) {
if (e.index == 0) {
view1.visible = true;
view2.visible = false;
} else {
view1.visible = false;
view2.visible = true;
}
});
window.open();
just change the visibility of the view on click.