Foros del Web » Creando para Internet » HTML »

Ayuda Urgente

Estas en el tema de Ayuda Urgente en el foro de HTML en Foros del Web. Hola soy tite. Mi problema es el siguiente: Kiero desarrollar una webb app, con el framework de DAvid Kaneda y el iScroll de Mateo Spinelli. ...
  #1 (permalink)  
Antiguo 02/08/2010, 11:53
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Exclamación Ayuda Urgente

Hola soy tite.
Mi problema es el siguiente:
Kiero desarrollar una webb app, con el framework de DAvid Kaneda y el iScroll de Mateo Spinelli.
El problema está exactamente en el toolbar xk kisiera k kede fijo y lo demas pueda scrolearse, pero no e podido, ayudenme xfa xk llevo semanas intentando y nada...
y ya me urge terminarlo.
Acá el codigo:
<html>
<head>
<meta charset="UTF-8" />
<title>iMPRO</title>
<!--Define normas de diseño especificos para el iphone(animaciones,orientacion,ect) -->
<style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style>
<!--Define el tema de iphone-->
<style type="text/css" media="screen">@import "themes/apple/theme.min.css";</style>
<!--JQuery-->
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<!--J}Touch-->
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<!--Inicializacion del objeto JQTouch-->
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch
({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages:
[
'themes/jqt/img/back_button.png',
'themes/jqt/img/back_button_clicked.png',
'themes/jqt/img/button_clicked.png',
'themes/jqt/img/grayButton.png',
'themes/jqt/img/whiteButton.png',
'themes/jqt/img/loading.gif'
]
});
// Some sample Javascript functions:
$(function()
{
// Show a swipe event on swipe test
$('#swipeme').swipe(function(evt, data) {
$(this).html('You swiped <strong>' + data.direction + '</strong>!');
});
$('a[target="_blank"]').click(function() {
if (confirm('This link opens in a new window.')) {
return true;
} else {
$(this).removeClass('active');
return false;
}
});

// Page animation callback events
$('#pageevents').
bind('pageAnimationStart', function(e, info){
$(this).find('.info').append('Started animating ' + info.direction + '&hellip; ');
}).
bind('pageAnimationEnd', function(e, info){
$(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
});
// Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
$('#callback').bind('pageAnimationEnd', function(e, info){
if (!$(this).data('loaded')) { // Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
$(this).append($('<div>Loading</div>'). // Append a placeholder in case the remote HTML takes its sweet time making it back
load('ajax.html .info', function() { // Overwrite the "Loading" placeholder text with the remote HTML
$(this).parent().data('loaded', true); // Set the 'loaded' var to true so we know not to re-load the HTML next time the #callback div animation ends
}));
}
});
// Cambia la orientacion de la pagina
$('body').bind('turn', function(e, data){
$('#orient').html('Orientation: ' + data.orientation);
});
});
</script>
</head>


<body>
<div id="Reportes">
<div class="toolbar">
<h1>Reportes</h1>
<a onClick="document.location='/iphone/logout.asp';" class="back">Logout</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#Ventas">
<img src="images/productos.png" style="text-align:center;vertical-align:middle;margin:0 auto;margin-right: 25px;margin-left: 10px;" />Ventas</a>
</li>
<li class="arrow"><a href="#Inventarios">
<img src="images/contactos.png" style="text-align:center;vertical-align:middle;margin:0 auto;margin-right: 25px;margin-left: 10px;" />Inventarios</a>
</li>
<li class="arrow"><a href="#Servicios">
<img src="images/servicios.jpg" style="text-align:center;vertical-align:middle;margin:0 auto;margin-right: 25px;margin-left: 10px;" WIDTH="74" HEIGHT="74">Servicios</a>
</li>
<li class="arrow"><a href="#Finanzas">
<img src="images/finanzas.jpg" style="text-align:center;vertical-align:middle;margin:0 auto;margin-right: 25px;margin-left: 10px;" WIDTH="74" HEIGHT="74">Finanzas</a>
</li>
</ul>
</div>

<div id="Ventas">
<div class="toolbar">
<h1>Ventas</h1>
<a href="#Reportes" class="back">Atras</a>
<a class="button slideup" href="#Reportes">Home</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#Ventasmes">Ventas del mes</a></li>
</ul>
</div>
<div id="Finanzas">
<div class="toolbar">
<h1>Finanzas</h1>
<a href="#" class="back">Atras</a>
<a class="button slideup" id="infoButton" href="#Reportes">Home</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#ResultadoMes">Resultado del Mes</a></li>
<li class="arrow"><a href="#ResultadoAcumulado">Resultado Acumulado</a></li>
</ul>
</div>

<div id="Servicios">
<div class="toolbar">
<h1>Filtros</h1>
<a href="#" class="back">Atras</a>
<a class="button slideup" id="infoButton" href="#Reportes">Home</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#OrdenServicio">Ordenes de servicio</a></li>
<li class="arrow"><a href="#Tableros">Proyectos</a></li>
</ul>
</div>

<!--RESULTADO DEL MES--->
<%
server.execute "reportes/ResultadoMes.asp"
%>

<!--RESULTADO ACUMULADO--->
<%
server.execute "reportes/ResultadoAcumulado.asp"
%>
<!--REPORTE DE VENTAS--->
<%
server.execute "reportes/ventasmes.asp"
%>
<!--REPORTE DE SERVICIOS--->
<%
server.execute "reportes/OrdenServicio.asp"
%>

<%
server.execute "reportes/Tableros.asp"
%>
<%
server.execute "reportes/Restaurant.asp"
%>

</body>
</html>



nota:
lo estoy desarrollando en asp y no tengo agregado el js de iscroll xk no se como lo tengo que agregar, y el css que define los estilos de la apariencia nativa del iphone es theme.css. entiendo que para utilizar el iscroll se deben especificar algunas normas para el css, el problema es que este proyecto de david kaneda es un framework y es muy compleja su herencia en el css y casi no lo entiendo.
lo que necesito es que el div con la clase toolbar quede fijo utilizando el js iscroll.
Espero me puedan ayudar gracias.
  #2 (permalink)  
Antiguo 02/08/2010, 11:54
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Ayuda Urgente

Aki los css

--jqtouch.css--

* {
margin: 0;
padding: 0;
}
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
overflow-x: hidden;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
font-family: Helvetica;
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
}
.selectable, input, textarea {
-webkit-user-select: auto;
}
body > * {
-webkit-backface-visibility: hidden;
-webkit-box-sizing: border-box;
display: none;
position: absolute;
left: 0;
width: 100%;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
min-height: 420px !important;
}
body.fullscreen > * {
min-height: 460px !important;
}
body.fullscreen.black-translucent > * {
min-height: 480px !important;
}
body.landscape > * {
min-height: 320px;
}
body > .current {
display: block !important;
}

.in, .out {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 350ms;
}

.slide.in {
-webkit-animation-name: slideinfromright;
}

.slide.out {
-webkit-animation-name: slideouttoleft;
}

.slide.in.reverse {
-webkit-animation-name: slideinfromleft;
}

.slide.out.reverse {
-webkit-animation-name: slideouttoright;
}

@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
}

@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}

@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}

.fade.in {
z-index: 10;
-webkit-animation-name: fadein;
}
.fade.out {
z-index: 0;
}

.dissolve.in {
-webkit-animation-name: fadein;
}

.dissolve.out {
-webkit-animation-name: fadeout;
}



.flip {
-webkit-animation-duration: .65s;
}

.flip.in {
-webkit-animation-name: flipinfromleft;
}

.flip.out {
-webkit-animation-name: flipouttoleft;
}

/* Shake it all about */

.flip.in.reverse {
-webkit-animation-name: flipinfromright;
}

.flip.out.reverse {
-webkit-animation-name: flipouttoright;
}

@-webkit-keyframes flipinfromright {
from { -webkit-transform: rotateY(-180deg) scale(.8); }
to { -webkit-transform: rotateY(0) scale(1); }
}

@-webkit-keyframes flipinfromleft {
from { -webkit-transform: rotateY(180deg) scale(.8); }
to { -webkit-transform: rotateY(0) scale(1); }
}

@-webkit-keyfrmes flipouttoleft {
from { -webkit-transform: rotateY(0) scale(1); }
to { -webkit-transform: rotateY(-180deg) scale(.8); }
}

@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) scale(1); }
to { -webkit-transform: rotateY(180deg) scale(.8); }
}

.slideup.in {
-webkit-animation-name: slideup;
z-index: 10;
}

.slideup.out {
-webkit-animation-name: dontmove;
z-index: 0;
}

.slideup.out.reverse {
z-index: 10;
-webkit-animation-name: slidedown;
}

.slideup.in.reverse {
z-index: 0;
-webkit-animation-name: dontmove;
}


@-webkit-keyframes slideup {
from { -webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(0); }
}

@-webkit-keyframes slidedown {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(100%); }
}



/* Hackish, but reliable. */

@-webkit-keyframes dontmove {
from { opacity: 1; }
to { opacity: 1; }
}

.swap {
-webkit-transform: perspective(800);
-webkit-animation-duration: .7s;
}
.swap.out {
-webkit-animation-name: swapouttoleft;
}
.swap.in {
-webkit-animation-name: swapinfromright;
}
.swap.out.reverse {
-webkit-animation-name: swapouttoright;
}
.swap.in.reverse {
-webkit-animation-name: swapinfromleft;
}


@-webkit-keyframes swapouttoright {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
-webkit-animation-timing-function: ease-in-out;
}
50% {
-webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
}
}

@-webkit-keyframes swapouttoleft {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
-webkit-animation-timing-function: ease-in-out;
}
50% {
-webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
}
}

@-webkit-keyframes swapinfromright {
0% {
-webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
-webkit-animation-timing-function: ease-out;
}
50% {
-webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
-webkit-animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
}
}

@-webkit-keyframes swapinfromleft {
0% {
-webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
-webkit-animation-timing-function: ease-out;
}
50% {
-webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
-webkit-animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
}
}

.cube {
-webkit-animation-duration: .55s;
}

.cube.in {
-webkit-animation-name: cubeinfromright;
-webkit-transform-origin: 0% 50%;
}
.cube.out {
-webkit-animation-name: cubeouttoleft;
-webkit-transform-origin: 100% 50%;
}
.cube.in.reverse {
-webkit-animation-name: cubeinfromleft;
-webkit-transform-origin: 100% 50%;
}
.cube.out.reverse {
-webkit-animation-name: cubeouttoright;
-webkit-transform-origin: 0% 50%;

}

@-webkit-keyframes cubeinfromleft {
from {
-webkit-transform: rotateY(-90deg) translateZ(320px);
opacity: .5;
}
to {
-webkit-transform: rotateY(0deg) translateZ(0);
opacity: 1;
}
}
@-webkit-keyframes cubeouttoright {
from {
-webkit-transform: rotateY(0deg) translateX(0);
opacity: 1;
}
to {
-webkit-transform: rotateY(90deg) translateZ(320px);
opacity: .5;
}
}
@-webkit-keyframes cubeinfromright {
from {
-webkit-transform: rotateY(90deg) translateZ(320px);
opacity: .5;
}
to {
-webkit-transform: rotateY(0deg) translateZ(0);
opacity: 1;
}
}
@-webkit-keyframes cubeouttoleft {
from {
-webkit-transform: rotateY(0deg) translateZ(0);
opacity: 1;
}
to {
-webkit-transform: rotateY(-90deg) translateZ(320px);
opacity: .5;
}
}

.pop
{
-webkit-transform-origin: 50% 50%;
}

.pop.in
{
-webkit-animation-name: popin;
z-index: 10;
}

.pop.out.reverse
{
-webkit-animation-name: popout;
z-index: 10;
}

.pop.in.reverse
{
z-index: 0;
-webkit-animation-name: dontmove;
}

@-webkit-keyframes popin {
from {
-webkit-transform: scale(.2);
opacity: 0;
}
to {
-webkit-transform: scale(1);
opacity: 1;
}
}

@-webkit-keyframes popout {
from {
-webkit-transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(.2);
opacity: 0;
}
}
  #3 (permalink)  
Antiguo 02/08/2010, 11:57
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Ayuda Urgente

--theme.min.cs--
body
{
background:#000;
}
body>*
{
background:#c5ccd3 url(img/pinstripes.png);
}
h1,h2
{
font:bold 18px Helvetica;
text-shadow:rgba(255,255,255,.2) 0 1px 1px;
color:#4c566c;
margin:10px 20px 6px;
}
.toolbar
{
-webkit-box-sizing:border-box;
border-bottom:1px solid #2d3642;
padding:10px;
height:45px;
background:url(img/toolbar.png) #6d84a2 repeat-x;
position:relative;
}
.black-translucent .toolbar
{
margin-top:20px;
}
.toolbar>h1
{
/* solo es para el titulo */
position:absolute;
overflow:hidden;
left:50%;
top:10px;
line-height:1em;
margin:1px 0 0 -75px;
height:40px;
font-size:17px;
width:150px;
font-weight:bold;
text-shadow:rgba(0,0,0,0.4) 0 -1px 0;
text-align:center;
text-overflow:ellipsis;
white-space:nowrap;
color:#fff;
}
body.landscape .toolbar>h1
{
margin-left:-125px;
width:250px;
}
.button,.back,.cancel,.add
{
position:absolute;
overflow:hidden;
top:8px;
right:6px;
margin:0;
border-width:0 5px;
padding:0 3px;
width:auto;
height:30px;
line-height:30px;
font-family:inherit;
font-size:12px;
font-weight:bold;
color:#fff;
text-shadow:rgba(0,0,0,0.5) 0 -1px 0;
text-overflow:ellipsis;
text-decoration:none;
white-space:nowrap;
background:none;
-webkit-border-image:url(img/toolButton.png) 0 5 0 5;}.button.active,.back.active,.cancel.active,.add .active{-webkit-border-image:url(img/toolButton.png) 0 5 0 5;}.blueButton{-webkit-border-image:url(img/blueButton.png) 0 5 0 5;
border-width:0 5px;
}
.back
{
left:6px;
right:auto;
padding:0;
max-width:55px;
border-width:0 8px 0 14px;
-webkit-border-image:url(img/backButton.png) 0 8 0 14;
}
.leftButton,.cancel
{
left:6px;
right:auto;
}
.add
{
font-size:24px;
line-height:24px;
font-weight:bold;
}
.whiteButton,.grayButton
{
display:block;
border-width:0 12px;
padding:10px;
text-align:center;
font-size:20px;
font-weight:bold;
text-decoration:inherit;
color:inherit;
}
.whiteButton
{
-webkit-border-image:url(img/whiteButton.png) 0 12 0 12;
text-shadow:rgba(255,255,255,0.7) 0 1px 0;
}
.grayButton
{
-webkit-border-image:url(img/grayButton.png) 0 12 0 12;
color:#FFF;
}
h1+ul,h2+ul,h3+ul,h4+ul,h5+ul,h6+ul
{
margin-top:0;
}
ul
{
color:black;
background:#fff;
border:1px solid #B4B4B4;
font:bold 17px Helvetica;
padding:0;
margin:15px 10px 17px 10px;
-webkit-border-radius:8px;
}
ul li
{
color:#666;
border-top:1px solid #666;
list-style-type:none;
padding:10px 10px 10px 10px;
}
li:first-child,li:first-child a
{
border-top:0;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
}
li:last-child,li:last-child a
{
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
}
ul li.arrow
{
background-image:url(img/chevron.png);
background-position:right center;
background-repeat:no-repeat;
}

#plastic ul li.arrow,#metal ul li.arrow
{
background-image:url(../images/chevron_dg.png);
background-position:right center;
background-repeat:no-repeat;
}
ul li a,li.img a+a
{
color:#000;
text-decoration:none;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
display:block;
padding:12px 10px 12px 10px;
margin:-10px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
ul li a.active
{
background:#194fdb url(img/selection.png) 0 0 repeat-x;
color:#fff;
}
ul li a.button
{
background-color:#194fdb;
color:#fff;
}
ul li.img a+a
{
margin:-10px 10px -20px -5px;
font-size:17px;
font-weight:bold;
}
ul li.img a+a+a
{
font-size:14px;
font-weight:normal;
margin-left:-10px;
margin-bottom:-10px;
margin-top:0;
}
ul li.img a+small+a
{
margin-left:-5px;
}
ul li.img a+small+a+a
{
margin-left:-10px;
margin-top:-20px;
margin-bottom:-10px;
font-size:14px;
font-weight:normal;
}
ul li.img a+small+a+a+a{
margin-left:0!important;
margin-bottom:0;
}
ul li a+a
{
color:#000;
font:14px Helvetica;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
display:block;
margin:0;
padding:0;
}
ul li a+a+a,ul li.img a+a+a+a,ul li.img a+small+a+a+a
{
color:#666;
font:13px Helvetica;
margin:0;
text-overflow:ellipsis;white-space:nowrap;
overflow:hidden;
display:block;
padding:0;
}
ul.form li
{
padding:7px 10px;
}
ul.form li.error
{
border:2px solid red;
}
ul.form li.error+li.error
{
border-top:0;
}
ul.form li:hover
{
background:#fff;
}
ul li input[type="text"],ul li input[type="password"],ul li textarea,ul li select
{
color:#777;
background:#fff url(../.png);
border:0;
font:normal 17px Helvetica;
padding:0;display:inline-block;
margin-left:0;width:100%;
-webkit-appearance:textarea;
}
ul li textarea
{
height:120px;
padding:0;
text-indent:-2px;
}
ul li select
{
text-indent:0;
background:transparent url(../images/chevron.png) no-repeat 103% 3px;
-webkit-appearance:textfield;
margin-left:-6px;width:104%;
}
ul li input[type="checkbox"],ul li input[type="radio"]
{
margin:0;color:#324f85;
padding:10px 10px;
}
ul li input[type="checkbox"]:after,ul li input[type="radio"]:after
{
content:attr(title);
font:17px Helvetica;
display:block;
width:246px;
margin:-12px 0 0 17px;
}
.edgetoedge h4
{
color:#fff;
background:#9a9faa url(img/listGroup.png) top left repeat-x;
border-top:1px solid #a5b1ba;
text-shadow:#666 0 1px 0;
margin:0;
padding:2px 10px;
}
.edgetoedge,.metal
{
margin:0;
padding:0;
background-color:#fff;
}
.edgetoedge ul,.metal ul,.plastic ul
{
-webkit-border-radius:0;
margin:0;
border-left:0;
border-right:0;
border-top:0;
}
.metal ul
{
border-top:0;
border-bottom:0;
background:#b4b4b4;
}
.edgetoedge ul li:first-child,.edgetoedge ul li:first-child a,.edgetoedge ul li:last-child,.edgetoedge ul li:last-child a,.metal ul li:first-child a,.metal ul li:last-child a
{
-webkit-border-radius:0;
}
.edgetoedge ul li small
{
font-size:16px;
line-height:28px;
}
.edgetoedge li,.metal li
{
-webkit-border-radius:0;
}
.edgetoedge li em
{
font-weight:normal;
font-style:normal;
}
.edgetoedge h4+ul
{
border-top:1px solid #989ea4;
border-bottom:1px solid #717d85;
}
ul li small
{
color:#369;
font:17px Helvetica;
text-align:right;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
display:block;
width:23%;
float:right;
padding:3px 0;
}
ul li.arrow small
{
padding:0 15px;
}
ul li small.counter
{ font-size:17px!important;
line-height:13px!important;
font-weight:bold;
background:#9a9faa;
color:#fff;
-webkit-border-radius:11px;
padding:4px 10px 5px 10px;
display:inline!important;
width:auto;
margin-top:-22px;
}
ul li.arrow small.counter
{
margin-right:-5px;
}

#plastic ul li.arrow,#metal ul li.arrow
{
background-image:url(img/listArrow.png);
background-position:right center;
background-repeat:no-repeat;
}
.edgetoedge ul,.metal ul,.plastic ul
{
-webkit-border-radius:0;
margin:0;
border-left:0;
border-right:0;
border-top:0;
}
.metal ul li
{
border-top:1px solid #eee;
border-bottom:1px solid #9c9ea5;
background:url(../images/bgMetal.png) top left repeat-x;
font-size:26px;
text-shadow:#fff 0 1px 0;
}
.metal ul li a
{
line-height:26px;
margin:0;
padding:13px 0;
}
.metal ul li a:hover
{
color:#000;
}
.metal ul li:hover small
{
color:inherit;
}
.metal ul li a em
{
display:block;
font-size:14px;
font-style:normal;
color:#444;
width:50%;
line-height:14px;
}
.metal ul li small
{
float:right;
position:relative;
margin-top:10px;
font-weight:bold;
}
.metal ul li.arrow a small
{
padding-right:0;
line-height:17px;
}
.metal ul li.arrow
{
background:url(../images/bgMetal.png) top left repeat-x,url(../images/chevron_dg.png) right center no-repeat;
}
.plastic
{
margin:0;
padding:0;
background:#adadad;
}
.plastic ul
{
-webkit-border-radius:0;
margin:0;
border-left:0;
border-right:0;
border-top:0;
background-color:#adadad;
}
.plastic ul li
{
-webkit-border-radius:0;
border-top:1px solid #bfbfbf;
border-bottom:1px solid #9d9d9d;
}
.plastic ul li:nth-child(odd)
{
background-color:#989898;
border-top:1px solid #b5b5b5;
border-bottom:1px solid #8a8a8a;
}
.plastic ul+p
{
font-size:11px;
color:#2f3237;
text-shadow:none;
padding:10px 10px;
}
.plastic ul+p strong
{
font-size:14px;
line-height:18px;
text-shadow:#fff 0 1px 0;
}
.plastic ul li a
{
text-shadow:#d3d3d3 0 1px 0;
}
.plastic ul li:nth-child(odd) a
{
text-shadow:#bfbfbf 0 1px 0;
}
.plastic ul li small
{
color:#3C3C3C;
text-shadow:#d3d3d3 0 1px 0;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
line-height:24px;
}
#plastic ul.minibanner,#plastic ul.bigbanner
{
margin:10px;
border:0;
height:81px;
clear:both;
}
#plastic ul.bigbanner
{
height:140px!important;
}
#plastic ul.minibanner li
{
border:1px solid #8a8a8a;
background-color:#989898;
width:145px;height:81px;
float:left;
-webkit-border-radius:5px;
padding:0;
}
#plastic ul.bigbanner li
{
border:1px solid #8a8a8a;
background-color:#989898;
width:296px;
height:140px;
float:left;
-webkit-border-radius:5px;
padding:0;
margin-bottom:4px;
}
#plastic ul.minibanner li:first-child
{
margin-right:6px;
}
#plastic ul.minibanner li a
{
color:transparent;
text-shadow:none;
display:block;
width:145px;
height:81px;
}
  #4 (permalink)  
Antiguo 02/08/2010, 11:58
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Ayuda Urgente

continuacion de theme.min.css

#plastic ul.bigbanner li a
{
color:transparent;
text-shadow:none;
display:block;
width:296px;
height:145px;
}
ul.individual
{
border:0;
background:none;
clear:both;
overflow:hidden;
}
ul.individual li
{
color:#b7becd;
background:white;
border:1px solid #b4b4b4;
font-size:14px;
text-align:center;
-webkit-border-radius:8px;
-webkit-box-sizing:border-box;
width:48%;
float:left;
display:block;
padding:11px 10px 14px 10px;
}
ul.individual li+li
{
float:right;
}
ul.individual li a
{
color:#324f85;
line-height:16px;
margin:-11px -10px -14px -10px;
padding:11px 10px 14px 10px;
-webkit-border-radius:8px;
}
ul.individual li a:hover
{
color:#fff;
background:#36c;
}
.toggle
{
width:94px;
position:relative;
height:27px;
display:block;
overflow:hidden;
float:right;
}
.toggle input[type="checkbox"]:checked
{
left:0;
}
.toggle input[type="checkbox"]
{
-webkit-tap-highlight-color:rgba(0,0,0,0);
margin:0;
-webkit-border-radius:5px;
background:#fff url(img/on_off.png) 0 0 no-repeat;
height:27px;
overflow:hidden;
width:149px;
border:0;
-webkit-appearance:textarea;
background-color:transparent;
-webkit-transition:left .15s;
position:absolute;
top:0;
left:-55px;
}
.info
{
background:#dce1eb;
font-size:12px;
line-height:16px;
text-align:center;
text-shadow:rgba(255,255,255,.8) 0 1px 0;
color:#4c566c;
padding:15px;
border-top:1px solid rgba(76,86,108,.3);
font-weight:bold;
}
  #5 (permalink)  
Antiguo 02/08/2010, 19:09
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Ayuda Urgente

tite111

Lamentablemente analizar lo que has puesto me es imposible, hay que rearmar todo, y no se tienen las scripts y además trabajas en ASP y veo css que supuestamente es para iphone, quizás debas usar "handheld" y no "screen" para tu css
Ve la forma de cargar la página en un servidor para verla en su conjunto.

lo unico que se me ocurre es que veas un poco más sobre como trabajar con posiciones fijas

http://limpid.nl/lab/css/fixed/footer




Saludos
  #6 (permalink)  
Antiguo 03/08/2010, 12:57
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Ayuda Urgente

Podrias decrime como realiza el scroll esta pagina:

http://demo.lvengine.net/mobileuplink#home

xk esta si lo hace, tengo una implementacion similar, podria copiarle codigo, pero no lo busco.
Solo me doy cuenta que tiene un div con class vertical-scroll(me imagino k aki esta lo bueno para scrolear) pero no busk la clase por ningun lado, ni en los css.
Luego tiene otro div donde contiene las listas pero no busko como realiza el scroleo.


Ayudenme xfa....


Saludos
  #7 (permalink)  
Antiguo 03/08/2010, 13:12
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Ayuda Urgente

tite111:
Perdona pero no entiendo a que te refieres, primero decime, cuando decías "no lo busco" querrás decir quizás que "no lo encuentras"...
bueno, esa página contiene muchos enlace que cargan opciones. listas nombres, etc.

Si estás buscando como manejar el scroll en Divs, la propiedad CSS
que debes analizar es "overflow"

ve a
http://www.w3schools.com/Css/pr_pos_overflow.asp
usa el boton "try It yourself" y practica con los diferentes valores

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 03/08/2010, 15:15
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Exclamación Respuesta: Ayuda Urgente

Gracias pero no funciona, en el iphone es diferente.

Ya hice un ejemplo con la propiedad overflow, pero no me funciono.

Espero me puedas ayudar...

Necesito saber de donde sale la clase "vertical-scroll" de la pagina que te pase anteriomente...

Necesito ayuda xfa...


Saludos.
  #9 (permalink)  
Antiguo 03/08/2010, 15:26
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Ayuda Urgente

En esa página se cargan los siguientes css

<style type="text/css" media="screen">@import "http://ajax.lvengine.com/ajax/jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">@import "http://ajax.lvengine.com/ajax/jqtouch/themes/apple/theme_ff.css";</style>

<style type="text/css" media="screen">@import "http://ajax.lvengine.com/mobileuplink/shared.css";</style>




y no hay ninguna class=vertical-scroll , al menos que yo vea.
Utiliza Firefox con la extensión WebDeveloper
http://chrispederick.com/work/web-developer/

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 03/08/2010, 15:34
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Exclamación Respuesta: Ayuda Urgente

Es lo que te decia al principio, que no veo esa clase, entonces donde se hace la funcion para poder escrolear la pagina??

Xk esta parte esta interesante:

el primer div(es para todos los divs principales) llamado jqt, que al final cierra el div.
luego tiene otro div llamado home(funciona como una pantalla o ventana en el iphone)
y adentro de este tiene otro div con la calse toolbar(este es el encabezado del iphone)
luego sigue el div con una clase vertical-scroll, donde es el resto de la pagina y la k permite el scroleo de la pagina, en cambio el que tiene la clase toolbar es fijo.

Gracias por tu ayuda, realmente te lo agradezco pero todavia no lo soluciono.
  #11 (permalink)  
Antiguo 03/08/2010, 15:45
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Ayuda Urgente

estoy utilizando safari con su inspector de objetos para ver los archivos k conforman la pagina
  #12 (permalink)  
Antiguo 03/08/2010, 15:48
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Ayuda Urgente

Seguramente con alguno de los JavaScript (por lo pronto ya tienes JQuery) y el jqTouch no se como se implementa ni que función cumple....

empiezo a entender creo, pero eso que vos llamas scroll, no es un scroll, me parece que te referis al efecto de mostrar o contraer capas.

date una vuelta por
http://jqtouch.com/
me parece que ahi esta la respuesta,
yo tambien hago algunas cosas para móviles, pero por ahora descarto el uso de JavaScript, me limito a cosas mas simples

Confirmame si es eso

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #13 (permalink)  
Antiguo 03/08/2010, 16:04
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Ayuda Urgente

Si empleo jqtouch tambien jquery, pero en jqtouch, solo se definen los mivimientos de transisicion y animacion de las paginas, pero no veo nada que haga el escroleo en ese ejemplo.

No hay otra manera de comunicarnos mas facil??

Gracias.
  #14 (permalink)  
Antiguo 17/08/2010, 08:51
FWy
 
Fecha de Ingreso: agosto-2010
Mensajes: 1
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Ayuda Urgente

Si buscas mas de 2 minutos puedes encontrar esto :

http://code.google.com/p/jqextensions/wiki/HowItWorks

En el ejemplo http://demo.lvengine.net/mobileuplink#home, claro que se carga una css utilizada unicamente para el scroll. Solo se necesita ver el head....
Busquen un poquito

La próxima vez busquen un poco antes de preguntar!
  #15 (permalink)  
Antiguo 17/08/2010, 11:10
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Ayuda Urgente

Uy, que humos....

No se si este foro sea para vos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:59.