Problema con posición del objeto de jquery

[adrian_hm13]

Buenas a todos, me gustaría haceros una consulta, ya que, no me parece muy normal lo que le ha pasado al objeto xD,

Aclaraciones: Tengo una tienda virtual y el objeto del jquery es el scrollup!

Lo puse y todo correcto, aparece donde debe y hace su función, pero luego, en la página de carro, sale el scrollup, que yo había situado por defecto en la esquina inferior derecha, sale en la esquina superior izquierda.

Alguna idea?XD

Saludos!

[alberto510a]

¿Podrías poner tu página o subir un ejemplo que la imite?

[adrian_hm13]

Y cuando cargan las paginas también, se ve el botón en esa posición antes de que carga el html y el css

[alberto510a]

Hola, que el botón ese te coja esa posición puede deberse a muchos tipos de errores, necesito que me subas un ejemplo para decirte en concreto qué es lo que estás haciendo mal.

Saludos!

[adrian_hm13]

Claro, aquí lo tienes!,

Código Javascript:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://markgoodyear.com/labs/scrollup/js/jquery.scrollUp.js?1.1"></script>
<script>
$(function () {
  $.scrollUp({
    scrollName: 'scrollUp', // Element ID
    topDistance: '300', // Distance from top before showing element (px)
    topSpeed: 300, // Speed back to top (ms)
    animation: 'fade', // Fade, slide, none
    animationInSpeed: 200, // Animation in speed (ms)
    animationOutSpeed: 200, // Animation out speed (ms)
    scrollText: 'Subir arriba', // Text for element
    activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
    scrollImg: true,
  });
});
</script>
 

Código HTML:

<div id="scrollUp" style="width:38px;height:38px;"></div>
 

Código CSS:

#scrollUp {
  bottom: 20px;
  right: 0px;
  width: 38px; /* Width of image */
  height: 38px; /* Height of image */
  background: url(assets/img/top.png) no-repeat;
  cursor:pointer;
}
#scrollUp:hover {
  background: url(assets/img/tophover.png) no-repeat;
}
 

Ahí tienes el código completo!,

Saludos!

[alberto510a]

Tan sólo te falta ponerle position:fixed;

[adrian_hm13]

Gracias, me solucionaste lo de que salia a la esquina superior izquierda, pero ahora sale todo el rato, antes mientras bajaba salía la animación y aparecía el botón, pero ahora está visible todo el tiempo.

Saludos

[alberto510a]

Prueba sino con el absolute, no recuerdo como iba ese plugin bien sino te recomiendo entrar en la página de dicho plugin y ver en el ejemplo que tienen montado el código.

Saludos!

[adrian_hm13]

El absolute lo deja en el sitio donde le marco T.T, gracias por tus respuestas!

[alberto510a]

Mira este post de hace unos días, un usuario tenía el mismo problema se lo investigué y solucioné:

http://www.forosdelweb.com/f179/no-c...press-1055763/

[adrian_hm13]

Es el mío! jajajajajajajajjajaa

[alberto510a]

OMG... ¿y aún no te valió?

[adrian_hm13]

Sí que me ha valido, iba de lujo, hasta que probando otro script en la página de carro, se veía donde te he dicho antes, en la esquina superior izquierda.

En todas las otras páginas se veía de lujo.

[alberto510a]

y no has probado a quitar ese otro script...?

[adrian_hm13]

Te las sabes todas tío jajajajajaja, acabo de probarlo y ya funciona, ahora la pregunta es como hago para que no haya conflicto entre estos dos scripts?, el otro es muy importante en mi tienda.. T.T

[alberto510a]

¿Cuál es el otro script? Si no es muy largo ponlo aquí.

[adrian_hm13]

es bastante largo, es un cuadro que cuando le das a me gusta con alguna red social te proporciona un descuento automático del carro, no sé si te ayudará esto xD.

Saludos

[ZoroRoronoa]

Bueno si el otro script te da conflictos en el scrollUp, lo mas probable es que se crucen por ahi, algunos nombre de selectores (o clases).

Deberais modificar el script del scrollUp. Dime podeis entenderlo, o no conoces nada de jQuery?

Deja el code del scrollUp tal como lo teneis ahorita (html, css y js)

saludos.

[alberto510a]

Pon esto en el CSS sino súbeme un ejemplo en vivo con los 2 scripts instalados.

Código CSS:

bottom: 20px !important;
right: 0px !important;
 

[adrian_hm13]

Iniciado por ZoroRoronoa

Bueno si el otro script te da conflictos en el scrollUp, lo mas probable es que se crucen por ahi, algunos nombre de selectores (o clases).

Deberais modificar el script del scrollUp. Dime podeis entenderlo, o no conoces nada de jQuery?

Deja el code del scrollUp tal como lo teneis ahorita (html, css y js)

saludos.

Acabo de empezar en jquery, pero creo que podría entender tus explicaciones!

gracias por contestar

[adrian_hm13]

Iniciado por alberto510a

Pon esto en el CSS sino súbeme un ejemplo en vivo con los 2 scripts instalados.

Código CSS:

bottom: 20px !important;
right: 0px !important;
 

Aquí tienes los dos ejemplos!

Saludos

[alberto510a]

Una imagen no me sirve de nada, necesito que me lo subas a tu servidor y me des el link o el código css de los 2 scripts.

[adrian_hm13]

Iniciado por alberto510a

Una imagen no me sirve de nada, necesito que me lo subas a tu servidor y me des el link o el código css de los 2 scripts.

Aquí está el CSS del script del cupón

Código CSS:

/* Theme Option Style
---------------------------------------------------------------------------------------------------- */
 
/* Head */
.head { padding: 10px; margin: 30px 0 10px 0; }
 
/* Footer */
.footer {  background: #999; padding: 10px 5px; }
.footer, .footer a { color: #fff; }
 
/* Theme Menu */
#toplevel_page_theme-option .wp-menu-image { background: url(images/favo.png) no-repeat center center; width: 28px; height: 28px; }
 
/* General */
.clearfix{ clear:both; }
.ino_wrap{ width:90%px; padding:11px 0px 0px 5px;}
.ino_wrap .title { float: right; font-size: 1.3em; font-weight: bold; text-transform: uppercase; color: #00abbd; margin: 20px 0 0 0; }
.ino_wrap .submit { text-align: right; margin: 0; padding: 0!important; }
.ino_section { border:1px solid #ddd; border-top:0; }
.ino_opts label { font-size:12px; font-weight:700; width:20%; display:block; float:left; }
 
/* Title */
.ino_titlee h3 { cursor:pointer; margin:0; padding: 10px 5px 10px 10px; }
.ino_titlee h3 span { padding: 8px 0 8px 50px; letter-spacing: 1px; font-size:1em; text-transform: uppercase; font-weight:bold; color:#333;, background-position: 10px center; background-repeat: no-repeat; }
.ino_titlee { cursor:pointer; background: url(images/menu-bg.png) repeat-x; padding-right: 10px; }
.ino_titlee span.submit { display:block; float:right; margin:0; padding:0; padding:14px 10px; }
 
.ino_opts .general { background: url(images/general.png) no-repeat; }
.ino_opts .home { background: url(images/home.png) no-repeat; }
.ino_opts .donation { background: url(images/donation.png) no-repeat; }
.ino_opts .paypal { background: url(images/paypal.png) no-repeat; }
 
 
 
/* Options Head and foot */
.ino_head, .ino_foot { padding: 10px; text-align: right; }
.ino_head { border-bottom: 1px solid #ddd; }
 
 
/* Input */
.ino_input { padding:15px 10px; border-bottom:1px solid #ddd; border-top:1px solid #fff; }
.ino_opts small{ display:block; float:right; width:30%; color:#999; padding-left: 10px; font-size: 12px; }
.ino_opts input[type="text"], .ino_opts select{ width:280px; font-size:12px; padding:4px; color:#333; line-height:1em; background:#f3f3f3; }
.ino_opts .ino_color input[type="text"] {   width:75px; }
.ino_input input:focus, .ino_input textarea:focus{ background:#fff; }
.ino_input textarea{ width:280px; height:100px; font-size:12px; padding:4px; color:#333; line-height:1.5em; background:#f3f3f3; }
.ino_checkbox small, .ino_checkbox input { float: left; }
.ino_optionss .ino_radio_img input[type="radio"] { vertical-align: super!important; }
.ino_img_display { margin: 10px 10px 0 20%; }
input[type="submit"] { border-radius: 0!important; }
 

Y aquí el scroll up!

Código CSS:

#scrollUp {
  bottom: 20px !important ;
  right: 0px !important ;
  width: 38px; /* Width of image */
  height: 38px; /* Height of image */
  background: url(assets/img/top.png) no-repeat;
  cursor:pointer;
  
}
#scrollUp:hover {
  background: url(assets/img/tophover.png) no-repeat;
}
 

[alberto510a]

del cupón

copón

Veo varias cosas que podrían interferir en el scrollup pero como no me sé ni como es el plugin ni como se llama las partes de él, te sigo diciendo que la vía rápida si quieres una solución es que nos subas un ejemplo en vivo.

[adrian_hm13]

La cosa es que es de pago, y no se si estará permitido hacer ese traspaso xD.

No sería más fácil hacer con algún condicional que en esa página exacta no se abra el scrollup?

[alberto510a]

La cosa es que es de pago, y no se si estará permitido hacer ese traspaso xD.

¿Qué traspaso? Sólo me tienes que dar un link u.ú

No sería más fácil hacer con algún condicional que en esa página exacta no se abra el scrollup?

Las soluciones fáciles son de cobardes :P las cosas se hacen bien o no se hacen.

[adrian_hm13]

jajajajajaaj vale vale, pues hagámoslo!,

http://codecanyon.net/item/viral-cou...scount/2233568

[alberto510a]

...e.e pero quiero tu página no la de otro, necesito ver tus errores.

[adrian_hm13]

anda que voy bonico xDDDDDDDDD, esperate que todavía estoy atontado, la tengo en un localhost, como te la paso uh

[alberto510a]

Sino lo puedes subir a ningún servidor para verlo:

http://codepen.io/

Clicka en new pen, coloca tus 2 scripts el css y html de tal forma que en el ejemplo que salga en vivo se vea igual