Scroll de una webpage con resize en runtime

#1 · April 19, 2020, 7:27 am

Hola Luis,

Tengo una página inicial tiene 1280 x 800 y quiero que al pasar a la siguiente página la navegación se realize en modo scroll , o sea tendría que aumentar el tamaño verticalmente supongo, el tema es poder hacer como este ejemplo del site que envío debajo, pero no se como hacer un resize de una sola página para colocar el contenido, dado que solo puedo cambiar el tamaño de la publicación.

Se podría hacer esto en VisualNeoWeb ? En caso de que se pueda, existe algun ejemplo de como hacerlo ?

https://bodegaslopez.com.ar/

Saludos y mil gracias.

Sam

#2 · April 19, 2020, 10:32 am

Hola @lesanch,

Puedes cambiar el tamaño de da cada página de manera independiente con un poco de CSS.
Ve a Project > Properties > Styles y añade algo como esto:

#NewPage{
   width:900px;
   height:1200px;
}

Cada página puede tener así un tamaño diferente.
Incluso puedes crear páginas para móviles y otras para ordenador y después utilizar SetResponsivePages para definir cuales van a ser las páginas de entrada para cada dispositivo.

Saludos!

#3 · April 19, 2020, 3:41 pm

Genio !!!

Mil gracias Luis.

Abrazo,

Sam

#4 · April 19, 2020, 7:11 pm

Hola Luis,

Necesitaría un poco de ayuda con esto por favor.

Propiedades de tamaño general de la appl: 1280 x 800 (todas las páginas)

El menú lo hice manual en un Container llamado CONTAINER1 en la Master Page con 4 objetos PARAGRAPH dentro del Container.

uso esto en Project > Properties > Styles:

#Historia{
--width:1280px;
height:3000px;
}
#Container1{
--width:1280px;
Padding-top:0px;
Border-top:0px;
Margin-top:0px;
}

Si le aumento el tamaño solo en vertical a la página HISTORIA (segunda pagina que quiero que contenga scroll) me pasa lo que se ve en la imagen1 en tiempo de ejecución y es debido a que está marcada la casilla <auto-size to fit device> (imagen2), si desmarco esa opción se ve por supuesto del tamaño definido en la appl pero no cubre toda la pantalla que es lo que necesito.

En realidad yo necesito que independientemente de la resolución de pantalla se cubra todo el espacio, o sea tendría que estar marcado <auto-size to fit device> pero no puedo sacar los espacio arriba y abajo.

Saludos y gracias,

Sam

Uploaded files:

You need to login to have access to uploads.

#5 · April 19, 2020, 7:50 pm

@lesanch desmarca las opciones de Auto-size y en su lugar pon esto en Project > Events > Start-up:

FitAppToScreen true "top" "center"

Asegúrate de tener la última versión de VisualNEO instalada ya que este comando se intrudujo hace bien poco.
Saludos!

#6 · April 19, 2020, 8:36 pm

Hola @LuisHp,

Funcionó perfecto con relación a la ubicación, solamente me agrandó un poco los objetos del tamaño definido en el proyecto, pero todo dentro de la pantalla, no sé si es normal esa pequeña elevación del tamaño o no.

Gracias,

Saludos,

Sam

#7 · April 19, 2020, 9:44 pm

@lesanch otra posibilidad es que añadas esto a Project > Properties > Styles en lugar de utilizar el código anterior:

body{
  bottom:auto;
}

De es te modo no se escalará el contenido para ocupar todo el ancho de la pantalla pero se ajustará a la parte superior de la pantalla. Exáctamente igual que si utilizas la tercera opción:

TopCenterApp

Esto último en Project > Events > Start-up. Como ves hay varias alternativas.

#8 · April 19, 2020, 10:09 pm

Bueno finalmente lo único que logró obtener el resultado esperado fue la combinación de estos dos parámetros:

Auto-size content to fit device width

TopCenterApp

Los dejé los dos puestos y con eso logré lo que necesito, sin uno u otro se va de margen. Había probado infinidad de combinaciones.

Saludos,

Sam

Scroll de una webpage con resize en runtime - Forum

Scroll de una webpage con resize en runtime