Develop Reference

Is there a way to use scss mixin in jquery animate?

I just started doing some jquery and sass so I'm a bit confused.
My question is can I use mixin like this:
#mixin borderradius {
border-top-left-radius : 100;
border-top-right-radius : 100;
border-bottom-right-radius : 100;
border-bottom-left-radius : 100;
}
in jquery code like this:
$(document).ready(function() {
$('#divic,#divonja').mouseenter(function() {
$(this).animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 100,
borderBottomRightRadius: 100
}, 200);
});
$('#divic,#divonja').mouseleave(function() {
$(this).animate({
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}, 200);
});
$('#divic,#divonja').click(function() {
$(this).toggle(1000);
});
});
In a way in which instead of writing all these border radius 4 times I can write something like #include borderradius or similar?
Something like this:
$(document).ready(function() {
$('#divic,#divonja').mouseenter(function() {
$(this).animate({
#include borderradius
}, 200);
});
$('#divic,#divonja').mouseleave(function() {
$(this).animate({
#include borderradius
}, 200);
});
$('#divic,#divonja').click(function() {
$(this).toggle(1000);
});
});

Good news! Just use a function which returns the object you desire.
function borderRadius(radius) {
return {
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
borderBottomLeftRadius: radius,
borderBottomRightRadius: radius
};
}
$(document).ready(function() {
$('#divic,#divonja').mouseenter(function() {
$(this).animate(borderRadius(100), 200);
});
$('#divic,#divonja').mouseleave(function() {
$(this).animate(borderRadius(0), 200);
});
$('#divic,#divonja').click(function() {
$(this).toggle(1000);
});
});
#divonja { background: #e1f0aa; width: 200px; height: 200px; border-radius: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divonja"></div>
Mmmmm, now that's some JS goodness right there. =)

Creating a set of views takes a long time (Appcelerator) and blocks user interactions on iOS only

I am creating a list (ScrollView) with some custom "rows" (The image contains a single "row"). I show 5 rows and have added an event listener so that when the user scrolls to the end, 5 more elements are loaded and displayed. I made this using Alloy but I noticed it was taking too long so I tried writing the views manually.
// created the views programmatically to see if there was any difference from Alloy
function createRow(args) {
var container = Ti.UI.createView({
layout: "vertical",
width: Ti.UI.FILL,
height: "42dp"
});
var rowContent = Ti.UI.createView({
width: Titanium.UI.FILL,
height: "41dp", //Titanium.UI.FILL,
layout: "horizontal",
left: "16dp",
right: "16dp"
});
var border = Ti.UI.createView({
left: "16dp",
right: "16dp",
height: "1dp",
backgroundColor: Colors.darkGrey
});
var titleScroll = Ti.UI.createScrollView({
scrollType: "horizontal",
width: "49%",
horizontalWrap: false
});
var scrollContainer = Ti.UI.createScrollView({
scrollType: "horizontal",
horizontalWrap: false,
width: "50%"
});
var scroll = Ti.UI.createView({
layout: "horizontal",
horizontalWrap: false,
right: 0,
width: Ti.UI.SIZE,
height: Titanium.UI.SIZE
});
var title = Ti.UI.createLabel({
text: args.title,
font: args.isTitle ? {font: "Lato-Regular", fontSize: "22dp"} : {fontFamily: "Lato-Regular", fontSize: "15"},
horizontalWrap: false,
wordWrap: false,
left: 0,
color: Colors.grey,
minimumFontSize: "15dp"
});
if(args.value) {
var t = args.value.join();
scroll.add(Ti.UI.createLabel({
text: t,
color: args.action ? Colors.blue : Colors.black,
font: {fontSize: "15dp", fontFamily: "Lato-Regular"},
right: "5dp",
width: Ti.UI.SIZE,
horizontalWrap: false,
wordWrap: false,
minimumFontSize: "15dp"
}));
}
if(args.data)
scrollContainer.data = args.data; //just a dump of the data used by the click handler
if(args.action)
scrollContainer.addEventListener("click",args.action);
scrollContainer.add(scroll);
titleScroll.add(title);
rowContent.add(titleScroll);
rowContent.add(scrollContainer);
container.add(rowContent);
container.add(border);
return container; //Ti.UI.View
}
function createHeader(args) {
var header = Ti.UI.createView({
layout: "horizontal",
height: "44dp",
backgroundColor: "#fff"
});
var leftView = Ti.UI.createView({
width: "25%",
height: Ti.UI.FILL
});
var rightView = Ti.UI.createView({
width: "25%",
height: Ti.UI.FILL
});
var centerView = Ti.UI.createView({
width: "49%",
height: Ti.UI.FILL
});
var verticalAligner = Ti.UI.createView({
height: Ti.UI.SIZE,
width: Ti.UI.SIZE,
layout: "vertical"
});
var headerTitle = Ti.UI.createLabel({
color: Colors.green,
font: {fontSize: "16.5dp", fontFamily: "Lato-Regular"},
textAlign: "center",
horizontalWrap: false,
wordWrap: false
});
var headerSubtitle = Ti.UI.createLabel({
font: {fontSize: "14dp", fontFamily: "Lato-Regular"},
textAlign: "center",
color: Colors.grey,
horizontalWrap: false,
wordWrap: false
});
if(args.rightView)
rightView.add(args.rightView);
if(args.leftView)
leftView.add(args.leftView);
verticalAligner.add(headerTitle);
verticalAligner.add(headerSubtitle);
centerView.add(verticalAligner);
header.add(leftView);
header.add(centerView);
header.add(rightView);
headerTitle.text = args.title;
headerSubtitle.text = args.subTitle;
return header;
}
function createBlock(args) {
var container = Ti.UI.createView({
layout: "vertical",
width: "100%",
height: Ti.UI.SIZE
});
var covers = Ti.UI.createView({ //
height: "119dp"
});
var content = Ti.UI.createView({
height: Ti.UI.SIZE,
layout: "vertical"
});
function goToEvent() {
Storage.event.id = args.event;
Alloy.Globals.openWin("event");
}
var data = new D.data();
var w = Android ? Ti.Platform.displayCaps.platformWidth : Measure.dpToPX(Ti.Platform.displayCaps.platformWidth);
var h = Measure.dpToPX(119); //Android ? Alloy.Globals.dpToPX(119) : Measure.dpToPX(119);
if(args.images) {
//setTimeout(function() { //timeout didn't make any difference
var image = null;
//for(var i = 0; i < args.images.length; i++) {
image = Ti.UI.createImageView({
image: data.getBlobResized({ //returns a URL for the picture
id: args.images[0], //i
width: w,
height: h
}),
width: iOS ? Measure.pxToDP(w) : Alloy.Globals.pxToDP(w),
height: iOS ? Measure.pxToDP(h): Alloy.Globals.pxToDP(h)
});
image.addEventListener("click",goToEvent);
covers.add(image); //addView
//}
//},0);
}
var row = null;
if(args.rows) {
for(var j=0; j < args.rows.length; j++) {
//row = Alloy.createController("index/events/block/row",args.rows[j]).getView();
content.add(createRow(args.rows[j]));
}
}
container.add(createHeader(args));
container.add(covers);
container.add(content);
return container;
}
In particular, in the code provided, I call 4 times the function createRow() which creates a row inside the element (as seen in the picture). This function takes 7ms to 10ms to run for some reason. So calling it 4 times means it slows the whole process 28-40ms.
On Android the app doesn't lag at all. On iOS it stops user interaction completely until these operations are done
Using latest Titanium SDK (5.2.2GA) on Appcelerator Studio
Testing on iPhone 5, iOS simulator (4s,5,6,6s)
Thank you for your help

Proper way to set default settings for each instance of jQuery plugin

I have been researching this for the past hour and I cannot seem to figure out what is wrong. I would like to make a simple plugin that allows for multiple instances each with their own settings I am not super versed in javascript so I am not using the object/prototype method.
When I run this plugin on two different elements, each with their own settings, only the last settings is being used as seen by the console.log
Here is what I have:
jQuery.fn.lighthouse = function(config) {
config = $.extend({}, jQuery.fn.lighthouse.config, config);
config.openDuration = config.openDuration || config.duration;
config.closeDuration = config.closeDuration || config.duration;
return this.each(function() {
var containers = $(this);
$(containers).click(open);
$(config.closeSelector).click(close);
console.log(config.contentType);
$(containers).each(function() {
if (config.contentType === 'img' && $(this).prop('tagName') === 'A') {
var href = $(this).href,
src = $(this).children('img').src;
if (href !== src) {
}
}
});
// Needs the container object
function open(link) {
link.preventDefault();
var current = {
close: $(this).children(config.closeSelector),
background: $(this).children(config.backgroundSelector),
container: $(this),
child: $(this).children(config.childSelector)
};
console.log($(current.child).is(':hidden'));
if($(current.child).is(':hidden')) {
link.preventDefault();
}
$(current.container).append('<div class="background"></div>').css({
background: config.background,
width: '100%',
height: '100%',
position: 'fixed',
zIndex: '2',
opacity: config.backgroundOpacity,
display: 'none'
}).fadeIn(config.secondaryDuration);
$(current.child).css({
position: 'fixed',
display: 'none',
width: '150px',
height: '150px',
left: current.container.offset().left,
top: current.container.offset().top,
zIndex: '3'
}).fadeIn(config.secondaryDuration).animate({
width: '100%',
height: '100%',
top: '0',
left: '0'
}, config.openDuration, function () {
$(current.container).append('<a class=".close">X</a>').css({
background: 'white',
color: 'black',
width: '50px',
height: '50px',
lineHeight: '50px',
textAlign: 'center',
position: 'absolute',
top: '0',
right: '0',
display: 'none'
}).fadeIn(config.secondaryDuration);
});
}
// Needs the close object
function close(link) {
link.preventDefault();
var current = {
close: $(this),
background: $(this).siblings(config.backgroundSelector),
container: $(this).parent(config.containerSelector),
child: $(current.containter).children(config.childSelector)
};
$(current.close).fadeOut(config.secondaryDuration).remove();
$(current.close).fadeOut(config.secondaryDuration).remove();
$(current.child).animate({
height: current.containter.height(),
width: current.containter.width(),
top: current.containter.offset().top,
left: current.containter.offset().left
}, config.closeDuration, function () {
$(current.child).animate({
opacity: '0',
}, config.secondaryDuration).css({
display: 'none',
zIndex: 'auto'
});
});
}
});
}
jQuery.fn.lighthouse.config = {
containerSelector: '.lighthouse',
childSelector: 'div',
closeSelector: '.close',
backgroundSelector: '.background',
captionSelector: '.caption',
duration: 350,
openDuration: null,
closeDuration: null,
secondaryDuration: 100,
background: 'rgb(230, 230, 230)',
backgroundOpacity: '0.7',
contentType: 'img'
}
This is what I am calling it with:
$('.image').lighthouse();
$('.click').lighthouse({
childSelector: '.site',
contentType: 'html'
});
Here is the jsfiddle: http://jsfiddle.net/yK9ad/
The proper output of console.log should be:
img
html
Any ideas? Thanks in advance for the help!

I think you are missing the class attribute for the anchor containing <img/> tag. Please see below
<a class="image" href="http://placehold.it/900x800&text=Image">
<img src="http://placehold.it/300x200&text=Image" />
<span class="caption">
test
</span>
</a>
The updated fiddle - http://jsfiddle.net/yK9ad/2/
I could see the following in the console.
img
html

onclick, click not working? jquery

I'm simply trying to change a hover trigger to a click but for some reason any click function I use does not work?
This my current code that works when you hover...
Current Script Thats Working on hover...
$showSidebar.hover(function() {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
But see my attempts below to get it work when clicked, but weirdly nothing happens.
My Attempt One
$showSidebar.click(function() {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
and
My Attempt Two
$showSidebar.on('click', function () {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
and a couple of others but nudda...
This is my mark up...
<span>//</span> MORE
and my var
$showSidebar = $("#show-sidebar");
Any ideas where I'm going wrong? Would be hugely helpful thanks!
See working code, thanks #hurshagrawal
$showSidebar.on('click', function () {
if ($showSidebar.html() == '<span>//</span> CLOSE') {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
} else {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
$showSidebar.html('<span>//</span> CLOSE');
}
});

I think you are looking for the .toggle() command:
$showSidebar.toggle(function() {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});

I don't think $.click() takes 2 functions as parameters. Did you try taking the second function out? If you're trying to toggle between the two, you might have to write something with an if-else in there.
EDIT: Ah, or use .toggle().

Try using bind(), I've found that more reliable across browsers.
http://api.jquery.com/bind/
basic usage in your case would be (untested):
$showSidebar.bind('click', function() {
// do stuff
});

Titanium mobile Javascript objects

Ok so I'm new to Titanium and I'm pretty much a noob at Javascript
I tried doing this:
app.view.newMatrix = function() {
return {
matrix = Titanium.UI.createWindow({
title:'Add a New Matrix',
backgroundColor:'stripped',
navBarHidden: false
}),
// navbar buttons
cancel = Titanium.UI.createButton({
title:'Cancel'
}),
save = Titanium.UI.createButton({
title:'Save',
style:Titanium.UI.iPhone.SystemButton.SAVE
}),
name_label = Titanium.UI.createLabel({
text: "Matrix Name:",
font: { fontsize: 12, fontstyle: 'italic', color: '#336699' },
height: 35,
top: 35,
left: 30,
width: 150,
color: "black"
}),
name = Titanium.UI.createTextArea({
color: '#336699',
height: this.name_label.height,
top: this.name_label.top + 35,
left: this.name_label.left - 10,
width: 275,
borderRadius:15
}),
setItems = function() {
this.win.add(this.name);
this.win.add(this.name_label);
this.win.add(this.desc);
this.win.add(this.desc_label);
Ti.API.info("label:"+ this.name_label.height);
return this.win.open({modal: true, animation: true});
}
}
}
then called it like this:
app.controller.home = function() {
var home = app.view.home();
home.setItems();
home.butn.addEventListener("click", function(e){
app.controller.newMatrix();
});
home.butn2.addEventListener("click", function (e) {
matrix_table(tab);
});
home.butn3.addEventListener("click", function(e){
newItem();
});
home.butn5.addEventListener("click", function (e) {
item_table();
});
}
I did this because I saw a Titanium MVC suggestion here but I don't get why it returns an anonymous object. I can't access properties like name_label from within the name object.
I figured out that I should do this instead:
app.view.newMatrix = function() {
this.matrix = Titanium.UI.createWindow({
title:'Add a New Matrix',
backgroundColor:'stripped',
navBarHidden: false
}),
// navbar buttons
this.cancel = Titanium.UI.createButton({
title:'Cancel'
}),
this.save = Titanium.UI.createButton({
title:'Save',
style:Titanium.UI.iPhone.SystemButton.SAVE
}),
this.name_label = Titanium.UI.createLabel({
text: "Matrix Name:",
font: { fontsize: 12, fontstyle: 'italic', color: '#336699' },
height: 35,
top: 35,
left: 30,
width: 150,
color: "black"
}),
this.name = Titanium.UI.createTextArea({
color: '#336699',
height: this.name_label.height,
top: this.name_label.top + 35,
left: this.name_label.left - 10,
width: 275,
borderRadius:15
}),
this.setItems = function() {
this.win.add(this.name);
this.win.add(this.name_label);
this.win.add(this.desc);
this.win.add(this.desc_label);
Ti.API.info("label:"+ this.name_label.height);
return this.win.open({modal: true, animation: true});
}
}
and call it like this:
app.controller.home = function() {
return {
getView: function() {
var home = app.view.home();
home.setItems();
home.butn.addEventListener("click", function(e){
app.controller.newMatrix();
});
home.butn2.addEventListener("click", function (e) {
matrix_table(tab);
});
home.butn3.addEventListener("click", function(e){
newItem();
});
home.butn5.addEventListener("click", function (e) {
item_table();
});
}
}
}
But I don't know why the first example doesn't work. I mean aren't properties the same as variables? Also I do know that the second example is an object too.. is that how I'm supposed to do them? Also with the second example is the new keyword optional? Should I use it? I kinda wanted to stay away from that cause I'm not sure when I should use it.
thanks I hope I made sense. I do have it working but I don't know if the second example is the right way to go....