Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde galera da maldade, =]
Estou tentando usar esse plugin para criar um projeto que envolvesse transição entre as paginas do meu site, até então estava funcionando tudo certinho nos navegadores + atuais, exceto no android.
Porém... para acabar com a minha felicidade, apareceu uma bronca no IPAD, por algum motivo quando clico nas laterais do IPAD ele faz a transição para proxima pagina, se fosse só nas laterais onde n tivesse parte do conteúdo do site seria excelente, mas não consegui fazer isso até então.
Para facilitar a minha explicação vou inserir uma imagem, ilustrando o meu problema.
*As linhas vermelhas mostra onde eu n gostaria que o touch do ipad funcionasse:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i51.tinypic.com/fwt3wi.jpg&key=898385a0ef9baea6cb57fa707e29bdd64e8945d550ca15ce25b206a584e05a62" alt="fwt3wi.jpg" />
* As linhas verdes mostram onde gostaria que o touch do ipad funcionasse:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i55.tinypic.com/2d0duom.jpg&key=d69591bb36422665f581a431d8cab3a76cd8d2163be4151a551568b2bd7dd1e9" alt="2d0duom.jpg" />
Espero q tenha explicado de forma clara, se alguém puder da uma força ou sugestão de outro plugin fico agradecido. Caso encontre antes posto aqui. abraço
>
cara, vc tem q dizer como vc fez, e mostrar o teu codigo.
se não fica impossível ajudarmos.
Blz William...
Então, Criei uma pagina inicial só com BOX's, que seria o menu do site:
<div id="menu" class="step slide" data-x="-1000" data-y="-1500" >
<!--Box's menu -->
<a href="#slide1"><div class="link" class="box lifted"> </div></a>
<a href="#slide2"><div class="link" class="box lifted"> </div></a>
<a href="#slide3"><div class="link" class="box lifted"> </div></a>
<a href="#slide4"><div class="link" class="box lifted"> </div></a>
</div>Em seguida as divs, com as informações do site:
<div id="slide1" class="step slide" data-x="1000" data-y="-1500">
<p>text</p>
</div>
<div id="slide2" class="step slide" data-x="1300" data-y="-1500">
<p>text</p>
</div>
<div id="slide3" class="step slide" data-x="1600" data-y="-1500">
<p>text</p>
</div>
<div id="slide4" class="step slide" data-x="2100" data-y="-1500">
<p>text</p>
</div>Segue Código completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/estilo.css" type="text/css" rel="stylesheet" />
<link href="css/plugin.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body class="impress-not-supported">
<div id="impress">
<div id="menu" class="step slide" data-x="-1000" data-y="-1500" >
<!--Box's menu -->
<a href="#slide1"><div class="link" class="box lifted"> </div></a>
<a href="#slide2"><div class="link" class="box lifted"> </div></a>
<a href="#slide3"><div class="link" class="box lifted"> </div></a>
<a href="#slide4"><div class="link" class="box lifted"> </div></a>
</div>
<div id="slide1" class="step slide" data-x="1000" data-y="-1500">
<p>text</p>
</div>
<div id="slide2" class="step slide" data-x="1300" data-y="-1500">
<p>text</p>
</div>
<div id="slide3" class="step slide" data-x="1600" data-y="-1500">
<p>text</p>
</div>
<div id="slide4" class="step slide" data-x="2100" data-y="-1500">
<p>text</p>
</div>
</div>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>Deixei bem resumido, espero q eu tenha deixado claro.
Vlws pela força William.
Segue o codigo do plugin:
/**
* impress.js
*
* impress.js is a presentation tool based on the power of CSS3 transforms and transitions
* in modern browsers and inspired by the idea behind prezi.com.
*
*
* Copyright 2011-2012 Bartek Szopka (@bartaz)
*
* Released under the MIT and GPL Licenses.
*
* ------------------------------------------------
* author: Bartek Szopka
* version: 0.5.3
* url: http://bartaz.github.com/impress.js/
* source: http://github.com/bartaz/impress.js/
*/
/*jshint bitwise:true, curly:true, eqeqeq:true, forin:true, latedef:true, newcap:true,
noarg:true, noempty:true, undef:true, strict:true, browser:true */
// You are one of those who like to know how thing work inside?
// Let me show you the cogs that make impress.js run...
(function ( document, window ) {
'use strict';
// HELPER FUNCTIONS
// `pfx` is a function that takes a standard CSS property name as a parameter
// and returns it's prefixed version valid for current browser it runs in.
// The code is heavily inspired by Modernizr [http://www.modernizr.com/](http://www.modernizr.com/)
var pfx = (function () {
var style = document.createElement('dummy').style,
prefixes = 'Webkit Moz O ms Khtml'.split(' '),
memory = {};
return function ( prop ) {
if ( typeof memory[ prop ] === "undefined" ) {
var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1),
props = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' ');
memory[ prop ] = null;
for ( var i in props ) {
if ( style[ props* ] !== undefined ) {** memory[ prop ] = props**;*
break;
}
}
}
return memory[ prop ];
};
})();
// arraify takes an array-like object and turns it into real Array
// to make all the Array.prototype goodness available.
* var arrayify = function ( a ) {*
* return [].slice.call( a );*css function applies the styles given in props object to the elementel. It runs all property names through pfx function to maketoNumber takes a value given as numeric parameter and tries to turnfallback).* var toNumber = function (numeric, fallback) {*
* return isNaN(numeric) ? (fallback || 0) : Number(numeric);*byId returns element with given id - you probably have guessed that ;)* var byId = function ( id ) {*
* return document.getElementById(id);*$ returns first element for given CSS selector in the context of$$ return an array of elements for given CSS selector in the context oftriggerEvent builds a custom DOM event with given eventName and detail datael.* var triggerEvent = function (el, eventName, detail) {*
* var event = document.createEvent("CustomEvent");*translate builds a translate transform string for given data.* var translate = function ( t ) {*
* return " translate3d(" + t.x + "px," + t.y + "px," + t.z + "px) ";*rotate builds a rotate transform string for given data.true* var rotate = function ( r, revert ) {*
* var rX = " rotateX(" + r.x + "deg) ",*scale builds a scale transform string for given data.* var scale = function ( s ) {*
* return " scale(" + s + ") ";*perspective builds a perspective transform string for given data.* var perspective = function ( p ) {*
* return " perspective(" + p + "px) ";*getElementFromHash returns an element located by id from hash part of# or #/ from the beginning,#slide-id and "enhanced" #/slide-id will workcomputeWindowScale counts the scale factor between window size and size* var computeWindowScale = function ( config ) {*
* var hScale = window.innerHeight / config.height,** var ua = navigator.userAgent.toLowerCase();*
* var impressSupported = *classList and dataset APIsclassList is supported* var empty = function () { return false; };*impress function that returns the impress.js API* // If impress.js is not supported by the browser return a dummy API*
* // it may not be a perfect solution but we return early and avoid** var root = byId( rootId );*
* var canvas = document.createElement("div");*impress:stepenter is triggered when the step is shown on the impress:stepleave is triggered when the step is left (theonStepEnter is called whenever the step element is enteredonStepLeave is called whenever the step element is leftinitStep initializes given step element by reading data from its* var initStep = function ( el, idx ) {*
* var data = el.dataset,*init API function that initializes (and runs) the presentation.getStep is a helper function that returns a step element defined by parameter.impress:stepenter eventgoto API function that moves to step given with el parameter (by index, id or element),duration optionally given as second parameter.root and canvas to trigger transitions.root and canvas - they areroot is used for scaling and canvas for translate and rotations.root or canvas elements.impress:stepenter event in the correct moment, so here we compare the currentif statement looks scary, but it's pretty simple when you know what is going onimpress:stepenter event.transitionend event seemed to be the best waytransitionendsetTimeout fallback for the situations when there is no transition at all.transitionend.transitionend go back to
// version 0.5.2 of impress.js: http://github.com/bartaz/impress.js/blob/0.5.2/js/impress.js
window.clearTimeout(stepEnterTimeout);
stepEnterTimeout = window.setTimeout(function() {
onStepEnter(activeStep);
}, duration + delay);
return el;
};
// prev API function goes to previous step (in document order)
* var prev = function () {*
* var prev = steps.indexOf( activeStep ) - 1;*next API function goes to next step (in document order)* var next = function () {*
* var next = steps.indexOf( activeStep ) + 1;*future class.future class is removed and the presentpresent class is replaced withpast class.future, present and past.present class can be used to trigger some custom#/step-id is used instead of #step-id to prevent default browser// BUG: http://code.google.com/p/chromium/issues/detail?id=62820
root.addEventListener("impress:stepenter", function (event) {
window.location.hash = lastHash = "#/" + event.target.id;
}, false);
window.addEventListener("hashchange", function () {
// When the step is entered hash in the location is updated
// (just few lines above from here), so the hash change is
// triggered and we would call goto again on the same element.
//
// To avoid this we store last entered hash and compare.
if (window.location.hash !== lastHash) {
goto( getElementFromHash() );
}
}, false);
// START
// by selecting step defined in url or first step of the presentation
goto(getElementFromHash() || steps[0], 0);
}, false);
body.classList.add("impress-disabled");
* // store and return API for given impress.js root element*
* return (roots[ "impress-root-" + rootId ] = {*// http://remysharp.com/2010/07/21/throttling-function-calls/
* var throttle = function (fn, delay) {*
* var timer = null;*
* return function () {*
* var context = this, args = arguments;*impress:init event data gives you everything you
// need to control the presentation that was just initialized.
var api = event.detail.api;
// KEYBOARD NAVIGATION HANDLERS
// Prevent default keydown action when one of supported key is pressed.
document.addEventListener("keydown", function ( event ) {
if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) {
event.preventDefault();
}
}, false);
// Trigger impress action (next or prev) on keyup.
// Supported keys are:
// [space] - quite common in presentation software to move forward
// [up]
/ [down]
- again common and natural addition,
// [pgdown] / [pgup] - often triggered by remote controllers,
// [tab] - this one is quite controversial, but the reason it ended up on
// this list is quite an interesting story... Remember that strange part
// in the impress.js code where window is scrolled to 0,0 on every presentation
// step, because sometimes browser scrolls viewport because of the focused element?
// Well, the [tab] key by default navigates around focusable elements, so clicking
// it very often caused scrolling to focused element and breaking impress.js
// positioning. I didn't want to just prevent this default action, so I used [tab]
// as another way to moving to next step... And yes, I know that for the sake of
// consistency I should add [shift+tab] as opposite action...
//..:::::: DESATIVAR SETAS ::.....
document.addEventListener("keyup", function ( event ) {
if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) {
switch( event.keyCode ) {
case 33: // pg up
case 37: // left
case 38: // up
api.prev();
break;
case 9: // tab
case 32: // space
case 34: // pg down
case 39: // right
case 40: // down
api.next();
break;
}
event.preventDefault();
}
}, false);
// delegated handler for clicking on the links to presentation steps
document.addEventListener("click", function ( event ) {
// event delegation with "bubbling"
// check if event target (or any of its parents is a link)
var target = event.target;
while ( (target.tagName !== "A") &&
(target !== document.documentElement) ) {
target = target.parentNode;
}
if ( target.tagName === "A" ) {
var href = target.getAttribute("href");
// if it's a link to presentation step, target this step
if ( href && href[0] === '#' ) {
target = document.getElementById( href.slice(1) );
}
}
if ( api.goto(target) ) {
event.stopImmediatePropagation();
event.preventDefault();
}
}, false);
// delegated handler for clicking on step elements
* document.addEventListener("click", function ( event ) {*
* var target = event.target;*// based on awesome work of @hakimel: https://github.com/hakimel/reveal.js
document.addEventListener("touchstart", function ( event ) {
if (event.touches.length === 1) {
var x = event.touches[0].clientX,
width = window.innerWidth 0.3,*
result = null;
if ( x < width ) {
result = api.prev();
} else if ( x > window.innerWidth - width ) {
result = api.next();
}
if (result) {
event.preventDefault();
}
}
}, false);
// rescale presentation when window is resized
window.addEventListener("resize", throttle(function () {
// force going to active step again, to trigger rescaling
api.goto( document.querySelector(".active"), 500 );
}, 250), false);
}, false);
})(document, window);
// THAT'S ALL FOLKS!
//
// Thanks for reading it all.
// Or thanks for scrolling down and reading the last part.
//
// I've learnt a lot when building impress.js and I hope this code and comments
// will help somebody learn at least some part of it.
RESOLVIDO!
No proprio plugin, tem uma evento relacionado a touch:
document.addEventListener("touchstart", function ( event ) { if (event.touches.length === 1) {
var x = event.touches[0].clientX,
width = window.innerWidth * 0.05, //onde EDITO a dimensão do espaço do touch nas laterais.
result = null;
if ( x < width ) {
result = api.prev();
} else if ( x > window.innerWidth - width ) {
result = api.next();
}
if (result) {
event.preventDefault();
}
}
}, false);
cara, vc tem q dizer como vc fez, e mostrar o teu codigo.
se não fica impossível ajudarmos.