url amigables con jquery y el plugin .scrollto

engonga · #1 (**permalink**) 09/12/2013, 18:04

gola estoy armando esta página

http://verano.cabaniasvillage.com/

y lo que hace el menú de arriba es hacer un scrollto dependiendo de que menú se clique

tambien me modifica la url

y lo hago con este script

Código HTML:

NavigationManager = {
    currentPageType : null,
    navigationAllowed : true,
    paths: false,
    isSamePage: false,
    samePage: ['ellugar', 'nuestrocomplejo', 'clubhouse', 'servicios', 'fotos', 'ubicacion', 'contacto', 'reservas'],
    init: function() {
        NavigationManager.addListeners();
    },

    addListeners: function() {
        

        $('.state').on('click', function (event) {
            var
                $this = $(this),
                url = $this.attr('href'),
               // title = ($this.attr('title') || ''),
                title = $this.attr('title');
                data = null;

            //title = (title != '')? title + ' | Caba&ntilde;as Village' : 'Caba&ntilde;as Village | NEUQUEN.';
            //title = (title != '')? title ;

            if($this.hasClass('nav-link')){
                $('.nav-link.on').removeClass('on');
            }
            $this.addClass('on');

            if(!NavigationManager.navigationAllowed) {
                return false;
            }
            
            History.pushState(data, title, url);

            event.preventDefault();

            return false;
        });
        $(window).on('statechange', NavigationManager.handleStateChange);
    },

    handleStateChange: function(event) {
        var
            State = History.getState(),
            url = State.url,
            relativeUrl = url.replace(HistoryRootURL, '')

        NavigationManager.navigationAllowed = false;
        NavigationManager.handlePageChange('', relativeUrl);
            console.log('la url es ' +relativeUrl);


    },
    analizePath: function($path){
        //$path = ($path.substr(1)).toLowerCase();
        $paths = $path.split( '/' );
        return $paths;
    },
    handlePageChange: function(data, url) {
        analizePath = true;
        if(typeof url == 'undefined') {
            url = window.location.href.replace(HistoryRootURL, '');
            analizePath = false;
        }
        if(analizePath){
            console.log('1');
            NavigationManager.paths = NavigationManager.analizePath(url);
            console.log('el NavigationManager.paths es ' + NavigationManager.paths);
            NavigationManager.currentPageType = (NavigationManager.paths)[0].toLowerCase();
        } else {
            console.log('2');
            NavigationManager.currentPageType = $state;
            console.log(NavigationManager.currentPageType);
        }
        NavigationManager.trackGA();


     
        //console.log(NavigationManager.currentPageType);
          curPage = NavigationManager.currentPageType;
          //console.log(NavigationManager.currentPageType);
        $shut = false;
        //switch(NavigationManager.currentPageType){
            //default: 
                if($.inArray(NavigationManager.currentPageType, NavigationManager.samePage) >= 0){
                    NavigationManager.trackGA();
                    NavigationManager.isSamePage = NavigationManager.currentPageType;
                    $goTo = $('#'+NavigationManager.isSamePage);
                    if($goTo.length > 0){
                        $.scrollTo($goTo, 800, {easing:'swing'} );                
                    }
                    //if(Project.initializated){
                        //Project.shut();    
                    //}
                    NavigationManager.pageReady();

                    return false;
                } 

            //break;
            /*case 'projects':
                $shut = Project.initializated == true ? false : false;    
                $loadProject = analizePath == false ? $projectActive : (NavigationManager.paths)[1];
                if(Project.initializated){
                    Project.move($loadProject);
                } else {
                    Project.set($loadProject);
                }                                        
            break;
        }*/
        // if($shut){
  //           Project.shut();    
  //       }
        NavigationManager.pageReady();

        return false;

    },
    trackGA: function(){
        if(typeof _gaq != 'undefined') {
            _gaq.push(['_trackPageview']);
        }
    },
    pageReady: function() {
        NavigationManager.navigationAllowed = true;
    }
};


var History, HistoryRootURL;
$(function() {
    History = window.History,
    HistoryRootURL = History.getRootUrl();
    //Layout.setLoader(1);
    Layout.setup();
    NavigationManager.init();
    setTimeout(function() {
        NavigationManager.handlePageChange($('body'));
    }, 700);
});

pero no se como hacer que si por ejemplo la url tenga http://verano.cabaniasvillage.com/Fotos me lea la url y y me haga el scroolto

no se como sacarlo... si alguien sabe me va a sacar de un problema que no se como solucionar

muchas gracias

Dalam · #2 (**permalink**) 09/12/2013, 18:20

E estado mirando tu proyecto, y a mi si me hace el scroolto en mi esplorador.
No se si esque ya lo arreglaste o que tienes problemas con otro navegador, por lo menos con el Ghrome lo hace a la perfeccion.

engonga · #3 (**permalink**) 09/12/2013, 18:31

Cita:

Iniciado por Dalam

E estado mirando tu proyecto, y a mi si me hace el scroolto en mi esplorador.
No se si esque ya lo arreglaste o que tienes problemas con otro navegador, por lo menos con el Ghrome lo hace a la perfeccion.

si cuando clicas hace el scrool pero si por ejemplo vas a la url

http://verano.cabaniasvillage.com/Fotos/

me sale notfound, y no se si es que tengo que poner algo en .htaccess o el script lee la url y me hace un scroll to #fotos

se entiende

este script está implementado correctamente en

http://wearecuko.com/Team/ fijate que te hace un scrollto a #team

Dalam · #4 (**permalink**) 09/12/2013, 18:49

Tienes mod_rewrite en ese hosting?
en caso de ser asi utiliza esto
RewriteRule http://verano.cabaniasvillage.com/(.*) #$1/ [L, NC]
La L es para que no siga utilizando el modulo rewrite y el NC para que sea case insesitive
Si vas a usar algun otro script que valla a tener otra direccion tendrias que expecificar que casos usara este rewrite, si es asi dimelo y te explico como seria para definir solo unas cuantas opciones

engonga · #5 (**permalink**) 09/12/2013, 19:27

Cita:

Iniciado por Dalam

Tienes mod_rewrite en ese hosting?
en caso de ser asi utiliza esto
RewriteRule http://verano.cabaniasvillage.com/(.*) #$1/ [L, NC]
La L es para que no siga utilizando el modulo rewrite y el NC para que sea case insesitive
Si vas a usar algun otro script que valla a tener otra direccion tendrias que expecificar que casos usara este rewrite, si es asi dimelo y te explico como seria para definir solo unas cuantas opciones

tenho este rewriterule en el hosting ya que lo tengo en un subdominio

RewriteEngine on
# Si se accede desde
RewriteCond %{HTTP_HOST} verano.cabaniasvillage.com
# Y la carpeta solicitada no es "mi"
RewriteCond %{REQUEST_URI} !verano/
# accedemos directamente a la carpeta mi/la_url_indicada
RewriteRule ^(.*)$ verano/$1 [L]

y en el servidor local tengo este

Options +FollowSymLinks
RewriteEngine on
# Si se accede desde
RewriteCond %{HTTP_HOST} 192.168.0.203
# Y la carpeta solicitada no es "mi"
RewriteCond %{REQUEST_URI} !cabaniasvillageverano/
# accedemos directamente a la carpeta mi/la_url_indicada
#RewriteRule ^(.*)$ cabaniasvillageverano/$1 [L]
RewriteRule ^(.*)$ cabaniasvillageverano/$1 [L]
#RewriteRule http://verano.cabaniasvillage.com/(.*) #$1/ [L, NC]

ya que hago una dirección a una carpeta, pero ya te digo que es en modo de prueba

por que van a ir en un dominio raiz pero mientras estan en producción lo tengo que hacer así

Dalam · #6 (**permalink**) 09/12/2013, 19:53

Este es el aspecto que tendrias que dejar en el hosting para que te funcione

Cita:

# Si se accede desde
RewriteCond %{HTTP_HOST} verano.cabaniasvillage.com
# Y la carpeta solicitada no es "mi"
RewriteCond %{REQUEST_URI} !verano/
# accedemos directamente a la carpeta mi/la_url_indicada
RewriteRule ^(.*)$ verano/$1
#Para las peticiones actuales de tu pagina
RewriteRule ^(ElLugar|NuestroComplejo|ClubHouse|Servicios|Foto s|Ubicacion|Contacto|Reservas)/$ http://verano.cabaniasvillage.com/#$1 [L]

engonga · #7 (**permalink**) 09/12/2013, 20:04

Cita:

Iniciado por Dalam

Este es el aspecto que tendrias que dejar en el hosting para que te funcione

me tira un error de servidor

lo que tengo en la raiz del sitio es este htaccess

Código:

RewriteEngine on
# Si se accede desde
#RewriteCond %{HTTP_HOST} verano.cabaniasvillage.com
# Y la carpeta solicitada no es "mi"
#RewriteCond %{REQUEST_URI} !verano/
# accedemos directamente a la carpeta mi/la_url_indicada
#RewriteRule ^(.*)$ verano/$1 [L,NC]

# Si se accede desde
RewriteCond %{HTTP_HOST} verano.cabaniasvillage.com
# Y la carpeta solicitada no es "mi"
RewriteCond %{REQUEST_URI} !verano/
# accedemos directamente a la carpeta mi/la_url_indicada
RewriteRule ^(.*)$ verano/$1
#Para las peticiones actuales de tu pagina 
RewriteRule ^(ElLugar|NuestroComplejo|ClubHouse|Servicios|Foto s|Ubicacion|Contacto|Reservas)/$ http://verano.cabaniasvillage.com/#$1 [L]

y en la carpeta /verano

tengo este otro

Código:

# DOM2
Options +FollowSymLinks
RewriteEngine on
RewriteBase /
#

es que si no me hacia una redirección de dominio ya que la empresa de hosting me hace redireccion de de subdominios y no me crea un subdominio tal y como es

engonga · #8 (**permalink**) 09/12/2013, 20:07

ya está erra un espacio en blancdo dentro del último rewriterule

pero tampoco funciona por que sy voy a la url http://verano.cabaniasvillage.com/Contacto/ me sale notfound...

ahora no se si es el script que no hace su trabajo o no se que pasa

Dalam · #9 (**permalink**) 09/12/2013, 20:16

engonga · #10 (**permalink**) 09/12/2013, 20:48

Cita:

Iniciado por Dalam

ahora funciona bien

pero si le hago refrescar con el simbolito de firefox pero si copio y pego la url me va al home y no me hace el scroolto ahora si que creo que es culpa del script!

muchas gracias mañana lo seguiré mirando

repito muchas gracias

Dalam · #11 (**permalink**) 09/12/2013, 21:03

es por culpa del id de article.
Los deberias de cambiar por sus correspondientes que hemos puesto en el rewrite.
Fijate que los tienes en minusculas

engonga · #12 (**permalink**) 10/12/2013, 05:30

ok lo voy a solucionar...

pero ahora que lo pienso

todo lo del modrewritter para el subdominio me ha servido para aprender mucho... pero este proyecto va a estar en un dominio root

entonces solo poniendo la ultima rule

Dalam · #13 (**permalink**) 10/12/2013, 05:35

Si va a estar en el root lo que le tendrias que agregar seria estas dos lineas solamente

Cita:

Puede que el error de que no te mostrara la url con la almohadilla sea por que no la escapamos correctamente %23 es el codigo ASCII de la misma. si no te funciona lo anterior prueba con este

Cita:

engonga · #14 (**permalink**) 10/12/2013, 09:20

si pongo %23 no funciona

en cambio con esta regla

Código:

RewriteRule (ElLugar|NuestroComplejo|ClubHouse|Servicios|Fotos |Ubicacion|Contacto|Reservas)/$ #$1 [L]

si que funciona

lo que sigue sin funcionar es que si copio y pego la direccion veran.cabaniasvillage.com/servicios/ me va al home y no me hace un scrollto pero ya digo que esto puede ser que sea el script

y si lo pego son el / final me pone not found...

PHPeros · #15 (**permalink**) 10/12/2013, 09:26

Para evitar problemas usar la bandera NE y poner / optativo:

Código Apache:

Ver originalRewriteRule (ElLugar|NuestroComplejo|ClubHouse|Servicios|Fotos |Ubicacion|Contacto|Reservas)/?$ #$1 [L,NE]

Este tema se está aproximando mucho al servidor.

Dalam · #16 (**permalink**) 10/12/2013, 09:46

no es optativo la barra invertida, el plugin scrollto la pone por defecto

engonga · #17 (**permalink**) 10/12/2013, 09:58

ahora no se por qué pero el scrollto no me funciona

he modificado la regla así

Código:

RewriteRule (ellugar|nuestrocomplejo|clubhouse|servicios|fotos|ubicacion|contacto|reservas)/$ #$1 [L]

todo en minúsculas y los enlaces también los he puesto en minúsculas

y lo que hace es hace el scroll pero me vuelve al home.... una cosa muy rara...

Dalam · #18 (**permalink**) 10/12/2013, 10:16

prueba asi

Cita:

por que al introducir la # es como si estubieras comentando el resto de la linea

Dalam · #19 (**permalink**) 10/12/2013, 10:21

Si no te funciona, vuelvelo a poner como estaban los vinculos y las definimos de una en una. Me voy a comer algo y en un rato estoy por aqui para ver como te fue.

engonga · #20 (**permalink**) 10/12/2013, 10:22

Cita:

Iniciado por Dalam

prueba asi
por que al introducir la # es como si estubieras comentando el resto de la linea

me sale un error diciendo que /3nuestrocomplejo no existe esto del tres es despues de poner el %23

PHPeros · #21 (**permalink**) 10/12/2013, 10:38

engonga, No le hagas caso a Dalam y hazme caso a mí:

Utiliza la bandera [NE] para evitar el escape. Los hashes NO se codifican y punto.

Dalam · #22 (**permalink**) 10/12/2013, 11:20

No estaba seguro si se tenia que escapar o no, por eso le puse que si no funcionaba que lo pusiera asi. Se que el interrogante y las barras si se escapan, pero tenia la duda.

engonga · #23 (**permalink**) 10/12/2013, 12:59

bueno ahora resulta que no funciona nada! no me hace el scrollto, y ya no se si es por el script o po culpa del htaccess

engonga · #24 (**permalink**) 10/12/2013, 13:33

Cita:

Iniciado por engonga

bueno ahora resulta que no funciona nada! no me hace el scrollto, y ya no se si es por el script o po culpa del htaccess

ya he conseguido que vuleva a funcionar era una linea del script

pero ahora estoy como en el principio

tengo esta regla rewrite

Código:

RewriteRule ^(ElLugar|NuestroComplejo|ClubHouse|Servicios|Fotos|Ubicacion|Contacto|Reservas)/$ #$1 [L,NE]

me hace el scrollto correctamente y si le doy al icono de actualizar del browser y estoy, por ejemplo en verano.cabaniasvillage.com/servicios/ me mantiene en servicios pero si copio y pego la url me va al home y no me hace un scrollto

Dalam · #25 (**permalink**) 10/12/2013, 14:04

pues o te toca cambiar las url del scrollto o los id de los article.

engonga · #26 (**permalink**) 10/12/2013, 14:21

Cita:

Iniciado por Dalam

pues o te toca cambiar las url del scrollto o los id de los article.

ya está he retocado el script y listo

gracias por lo del htaccess

de verdad muchas gracias