I've got a meteor mobile app structurally working; I really need to stitch the views together with some page transitions.
I looked at the iron-transitioner project but it looks like development has ceased? (last commit 6 months ago, still using Spark engine)
I've also looked at a few UI 'mobile frameworks' (Ratchet, Framework7) but I couldn't get them to play nicely with the meteor server.
I'm wondering if anyone knows of any other simple (left/right) page transition package / script that I could try? It's just to give my UI some (expected) slickness really.
What about some jQuery with IronRouter?
Router.configure({
load: function() {
$('.content').animate({
left: "-1000px",
scrollTop: 0
}, 400, function() {
$(this).animate({ left: "0px" }, 400);
});
});
What I also do to make a smooth transition between pages is to use a simple fadeIn/fadeOut.
Router.configure({
load: function() {
$('html, body').animate({
scrollTop: 0
}, 400);
$('.content').hide().fadeIn(800);
}
});
I had a similar question here. Let us know how the above JQ method works out! Perpahs if you add transit.js you'll get nice hardware transitions.
FWIW I think the Percolate team are using a version of IronTransitioner for their Verso mobile app, which has some nice CSS3 transitions. Did you try the IronTransitioner package? As you say /devel/ even hasn't been touched for 6 months.
EDIT percolateStudio fork of IT has this comment "Alright, pretty much seems to be working with blaze."
I suggest using the animate.css library and adding animate classes to the main content in your templates. My 'main' templates now look like this:
<template name='home'>
{{> navbar}}
<div class="container animated fadeIn" id="content">
{{> startBox}}
</div>
{{> notification}}
<div id='background-image'></div>
<div id='background-color'></div>
{{> footer}}</template>
Related
I have a working ionicPopup which closes on a time limit. Is it possible to make it close on a single/double tap on anywhere on the screen? I know I can set a close button, but thats not really what I need. I need a simple dismiss method, and a tap on the screen I think is the more practical.
Code:
var errorPopup = $ionicPopup.show({
scope: $scope,
title: 'Unexpected Error',
templateUrl: 'error.html'
});
$timeout(function() {
errorPopup.close();
}, 3000);
}
And another question, I have a bunch of hyperlink tags within my html code. But when I run my app ionic puts a 1px border around each hyperlink. Is it possible to remove somehow the "" tag border. I know it should be a CSS thing, but I don’t want to modify the original ionic style, but would prefer to override that segment with another. Any gurus out there can help?
Solution: (Link)
<div class="col text-center">
<a class="item dash-link" id="link" href="#" onclick="window.open('http://www.example.com', '_blank', 'location=no'); return false;">
<img ng-src="img/icons/example.png" height="80" width="80"></a>
<br>
GMail
</div>
CSS:
#link {
text-decoration:none;
border:0;
outline:none;
}
This is a service to achieve this behavior.
Install
Install it with bower
$ bower install ionic-close-popup
Include the ionic.closePopup module in your app's dependencies:
angular.module('app', ['ionic', 'ionic.closePopup'])
Usage
Register your newly created popup to the closePopupService service :
var alertPopup = $ionicPopup.alert({
title: 'Alert popup',
template: 'Tap outside it to close it'
});
IonicClosePopupService.register(alertPopup);
I’ve been searching for some time and read about ng-repeat creating it’s own scope, but still did not find a solution.
I would like to have a mouseover event fired on each .event-window element. Using ng-mouseover="hoverIn()" doesn’t work. I expect because of trying to call a function that is not part of the scope, but only part of the parent (parent’s) scope, since the call works fine in elements that are not created with ng-repeat.
<div class="day-window" ng-repeat="day in weekObject['days']">
<div ng-repeat="event in day.events track by $index">
<div class="event-window" ng-style="{'height': (event.length)+'px',
'position': 'absolute',
'top':(1565/24)*(event.offsetTop-1) +'px',
'left': getLeftCoords(event.colliding)+'%',
'width': 100/event.colliding+'%',
'background': event.color,
'opacity': 0.8}" ng-mouseover="hoverIn()">
<p>{{event.title}}</p>
<p>[{{event.startTime |date:'H:mm'}} - {{event.endTime |date:'H:mm'}}]</p>
</div>
</div>
Controller
$scope.hoverIn = function() {
alert('hoverIn');
}
The hover in my css doesn’t work as well. Is it overridden by ng-style?
.event-window:hover {
opacity: 1.0 !important;
}
You can find a demo here, but I'm not able to replicate the problem. There must be some error in my code.
I have a serious issue with .sortable and all the iframe texteditors out there.
I have the following example code:
html:
<div id="content" style="height: 400px;">
<div><textarea></textarea></div>
<div><textarea></textarea></div>
</div>
script:
$("#content").sortable();
This makes the two textareas draggable. No problems till here... Now lets add the wysiwyg editors...(I tried many of them ckeditor, tinyedit, tinymce, elrte, and so on)
As an example lets do it with tinyMCE:
function ini(){
tinymce.init({
menubar : false,
toolbar1: "bold | link",
selector: "textarea",
});
Ok so this is where the problems are rising. If I know drag and drop the one textarea just a little bit, the editor field is going to disable itself.
What did I try until this moment:
- I added start and stop events to the sortable method, but without success.
- I tried the frameFix: true also without any differences in behaviour.
Anyone with some hints or solutions?
Thx
Cervisias
I figured out a solution. Its a total workaround but it works :)
So basically what I am doing is to save the content of every texteditorfield into an array and putting it back to the editor after the use of the sortable method.
so it looks like:
$("#content").sortable({
start: function(){
newEditors = new Array();
for(i=0; i < $("textarea").length; i++){
var content = tinyMCE.get(tinyMCE.editors[i].id).getContent();
var id = tinyMCE.editors[i].id;
newEditors[i] = {"id":id, "content":content};
}
tinyMCE.remove(); //as a fix for FF
},
stop: function(){
ini(); //re-initiate the tinymce again (if you don't do that, the field wont be editable)
for(var nr in newEditors){
tinyMCE.get(newEditors[nr].id).setContent(newEditors[nr].content);
}
}
});
So if sb has the same problem and figures out an other way to solve it, would be nice to see those solutions too.
Thx
Cervisias
I'm working on my new portfolio and I have a list of projects which are using show and hide functions. In my case, I'wrote the code for each project, but is it very repetitive. So I would like to know if there's a technique to write the same function for each project.
Here is my jquery code:
$project1.hide();
$("a.show_hide_project1").show();
$('a.show_hide_project1').click(function() {
$project1.delay(100).slideToggle("slow");
$project2.hide(); $project3.hide(); $project4.hide(); $project5.hide();
$project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
$project10.hide();$project11.hide(); $project12.hide();
});
$('a.next1').click(function() {
$project2.fadeToggle("slow");
$project1.delay(600).hide();
});
$project2.hide();
$("a.show_hide_project2").show();
$('a.show_hide_project2').click(function() {
$project2.delay(100).slideFadeToggle("slow");
$project1.hide(); $project3.hide(); $project4.hide(); $project5.hide();
$project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
$project10.hide();$project11.hide(); $project12.hide();
});
$('a.next2').click(function() {
$project3.fadeToggle("slow");
$project2.hide();
});
$('a.previous2').click(function(){
$project1.fadeToggle();
$project2.hide();
});
$project3.hide();
$("a.show_hide_project3").show();
$('a.show_hide_project3').click(function() {
$project3.delay(100).slideFadeToggle("slow");
$project2.hide(); $project1.hide(); $project4.hide(); $project5.hide();
$project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
$project10.hide();$project11.hide(); $project12.hide();
});
$('a.next3').click(function(){
$project4.fadeToggle("slow");
$project3.hide();
});
$('a.previous3').click(function() {
$project2.fadeToggle();
$project3.hide();
});
Any help will be very appreciated.
Thanks in advance.
Here's a quick stab at it: http://jsfiddle.net/Jj2Q7/1/
The animations are not exactly as you have it, and I doubt if that's the most efficient way to do it, but hopefully it'll serve as a starting point.
Update
Here's another version which makes liberal use of data attributes: http://jsfiddle.net/Jj2Q7/3/
It should be faster than the previous, but relies on the HTML tags having the right attributes set.
First off, you should probably be leveraging a common css class to select all of them
$('.projectItem').click(function () {
$('.projectItem').hide(); //hide them all
$(this).delay(100).slideFadeToggle("slow"); //then show the one being clicked.
});
Where your Html would look more like this.
<div class="projectItem" id="project1"/>
<div class="projectItem" id="project2"/>
<div class="projectItem" id="project3"/>
<div class="projectItem" id="project4"/>
Just a really rough idea.
Basically you need to give your HTML a sort of class that makes it identifiable as a "project" , and add some rel or data attribute to the individual projects
Your code then translates to something like this: (depending on your HTML , may vary)
$(function(){
$(".project").hide();
$("a.show_hide_project").show();
$('a.show_hide_project').click(function(){
$(".project").hide();
$(".project[rel="+$(this).attr('rel')+"]").delay(100).slideFadeToggle("slow");
});
});
I am pretty sure everyone knows the hover issue in IE6.
I tried to fix the problem by using "csshoverfix.htc" or "whatever:hover". I downloaded it from the writer's page, and ofcourse I added
body { behavior:url("csshover.htc"); }
to my css file, But it didnt help.
I also tried to use jquery hover function:
$(document).ready(function(){
$('#autoSuggestionsList li').hover(
function(){
alert("test");
},
function(){
alert("test");
})
});
But also it didnt work.
I dont know if it can be the reason why it doesnt work, but the <li> with the hover, are made in real time (ajax).
anyway, how can I fix the hover issue?
Thank you.
I dont know if it can be the reason why it doesnt work, but the <li> with the hover, are made in real time (ajax).
Possibly. Try using .live() instead so that it works with elements that come from Ajax responses:
$(document).ready(function() {
$('#autoSuggestionsList li').live(
{
mouseover: function() {
alert("test");
},
mouseout: function() {
alert("test");
}
});
});