Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Pop-up : Login Sign Fadein Fadeout

    Ciao a tutti e ben trovati, non sapendo dove sbattere la testa ho deciso di iscrivermi spero anche di poter dare il mio contributo.

    Problema:
    ho una pagina Aspx --> Deafult.aspx, la home del sito
    Al click su login mi apre un pop-up , dove c'è la sezione Login e Sign: con javascript controllo l'evento open e close

    Il problerma è che sulla parte login mi mostra anche la parte Sign : sembrerebbe che il fadeout del Login non funzioni molto bene, solo sulla default.aspx, se vado sulle altre pagine e richiamo il login le sezioni si vedono bene --> NON CAPISCO PROPRIO DOVE SBAGLIO !!!

    Dettaglio: Nella immagine di seguito sulla parte Login mi mostra anche il SIgn

    Login.PNG

    Di seguito i dettagli:


    Default.aspx:

    codice:
     <div class="popup popup--left">
                                        <a title="Close" href="#" class="popup__close">
                                            <i class="las la-times la-24-black"></i>
                                        </a><!-- .popup__close -->
                                        <div class="popup__content">
                                            <div class="popup__user popup__box open-form">
                                                <a title="Login" href="#" class="open-login">Login</a>
                                                <a title="Sign Up" href="#" class="open-signup">Sign Up</a>
                                            </div>
    ...............


    Main.js (il javascript che richiamo)

    codice:
    $('.popup-background').on('click', function (e) {
                e.preventDefault();
                $(this).fadeOut();
                $(this).parents('.site-header').find('.popup').removeClass('open');
            });
    
            $(document).on('click', '.open-login', function (e) {
                e.preventDefault();
                $('.popup--left').removeClass('open');
                $(this).parents('#wrapper').find('.nav-login').addClass('active');
                $(this).parents('#wrapper').find('.form-log').fadeIn(0);
                $(this).parents('#wrapper').find('.nav-signup').removeClass('active');
                $(this).parents('#wrapper').find('.form-sign').fadeOut(0);
                $(this).parents('#wrapper').find('.popup-background').fadeIn(0);
                $(this).parents('#wrapper').find('.popup-form').toggleClass('open');
            });
    
            $('.open-signup').on('click', function (e) {
                e.preventDefault();
                $('.popup--left').removeClass('open');
                $(this).parents('#wrapper').find('.nav-signup').addClass('active');
                $(this).parents('#wrapper').find('.form-sign').fadeIn(0);
                $(this).parents('#wrapper').find('.nav-login').removeClass('active');
                $(this).parents('#wrapper').find('.form-log').fadeOut(0);
                $(this).parents('#wrapper').find('.popup-background').fadeIn(0);
                $(this).parents('#wrapper').find('.popup-form').toggleClass('open');
            });
    Help me ...
    Ultima modifica di ciro78; 13-06-2021 a 20:34 Motivo: tag code

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,669
    Ciao e benvenuto/a sul forum.
    I selettori jQuery dello script in dettaglio si riferiscono ad elementi non menzionati nel poco codice Html da te postato. Difficile capire la/le causa/e del problema senza vedere l'intero contesto. Se ti è possibile, prova a postare il link della pagina in questione.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao e benvenuto/a sul forum.
    I selettori jQuery dello script in dettaglio si riferiscono ad elementi non menzionati nel poco codice Html da te postato. Difficile capire la/le causa/e del problema senza vedere l'intero contesto. Se ti è possibile, prova a postare il link della pagina in questione.

    Innanzitutto grazie per la risposta e scusami se rispondo solo ora

    Ma non riesco a caricare l'altro file javascrit file in allegato : scrivo in parte qui

    main.js :

    (function ($) {
    "use strict";
    $(document).ready(function () {

    /* [ jQuery Countdown ]
    - - - - - - - - - - - - - - - - - - - - */
    setInterval(function () {
    var obj = $('.countdown-data');
    obj.each(function () {
    var end = $(this).data('end');
    var gmt = $(this).data('gmt');
    var d = new Date();
    var n = d.getTime();
    var n = Math.floor(n / 1000);
    var cd = end - (n + (gmt * 3600));
    var days = hours = minutes = seconds = 0;
    if (cd > 0) {
    var sec_num = parseInt(cd, 10);
    var days = Math.floor(sec_num / 86400);
    var hours = Math.floor(sec_num / 3600) % 24;
    var minutes = Math.floor(sec_num / 60) % 60;
    var seconds = sec_num % 60;
    if (seconds < 10) {
    var seconds = '0' + seconds;
    }
    if (minutes < 10) {
    var minutes = '0' + minutes;
    }
    }
    $(this).find('.days').text(days);
    $(this).find('.hours').text(hours);
    $(this).find('.minutes').text(minutes);
    $(this).find('.seconds').text(seconds);
    });
    }, 1000);

    /* [ Main Menu ]
    - - - - - - - - - - - - - - - - - - - - */
    var sub_menu = $('.sub-menu');
    sub_menu.each(function () {
    $(this).parent().find('> a').addClass('has-child').append(' <i class="la la-angle-down la-12"></i>');
    });

    // Check Sub Menu
    $('.right-header .sub-menu').each( function() {
    var width = $(this).outerWidth();

    if( width > 0 ) {
    var offset = $(this).offset();
    var w_body = $('body').outerWidth();
    var left = offset.left;
    if( w_body < left + width ) {
    $(this).css('left', '-100%');
    }
    }
    });

    $('.has-child').on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass('open');
    if($(this).closest(".sub-menu").length <= 0) {
    $('.menu-arrow .has-child').not(this).parent().find(' > .sub-menu').slideUp('fast');
    }
    $(this).parent().find(' > .sub-menu').slideToggle('fast');
    if (!$(this).hasClass( 'open' )) {
    $( this ).parent().find( '.has-child' ).removeClass( 'open' );
    }
    });

    $('.site__menu__icon').on('click', function (e) {
    e.preventDefault();
    $(this).parents('.site-header').find('.popup-background').fadeToggle();
    $(this).parents('.site-header').find('.popup--left').toggleClass('open');
    });

    $('.minicart__open').on('click', function (e) {
    e.preventDefault();
    $(this).parents('.site-header').find('.popup-background').fadeToggle();
    $(this).parents('.site-header').find('.popup--right').toggleClass('open');
    });

    $('.popup__close').on('click', function (e) {
    e.preventDefault();
    $(this).parents('.site-header').find('.popup-background').fadeOut();
    $(this).parent().removeClass('open');
    });

    $('.popup-background').on('click', function (e) {
    e.preventDefault();
    $(this).fadeOut();
    $(this).parents('.site-header').find('.popup').removeClass('open');
    });

    $(document).on('click', '.open-login', function (e) {
    e.preventDefault();
    $('.popup--left').removeClass('open');
    $(this).parents('#wrapper').find('.nav-login').addClass('active');
    $(this).parents('#wrapper').find('.form-log').fadeIn(0);
    $(this).parents('#wrapper').find('.nav-signup').removeClass('active');
    $(this).parents('#wrapper').find('.form-sign').fadeOut(0);
    $(this).parents('#wrapper').find('.popup-background').fadeIn(0);
    $(this).parents('#wrapper').find('.popup-form').toggleClass('open');
    });

    $('.open-signup').on('click', function (e) {
    e.preventDefault();
    $('.popup--left').removeClass('open');
    $(this).parents('#wrapper').find('.nav-signup').addClass('active');
    $(this).parents('#wrapper').find('.form-sign').fadeIn(0);
    $(this).parents('#wrapper').find('.nav-login').removeClass('active');
    $(this).parents('#wrapper').find('.form-log').fadeOut(0);
    $(this).parents('#wrapper').find('.popup-background').fadeIn(0);
    $(this).parents('#wrapper').find('.popup-form').toggleClass('open');
    });

    $('.choose-form a').on('click', function (e) {
    e.preventDefault();
    var id = $(this).attr('href');
    $(this).parents('.popup').find('.form-content').fadeOut(0);
    $(this).parents('.popup').find(id).fadeIn(0);
    $('.choose-form li').removeClass('active');
    $(this).parent().addClass('active');
    });

    $('.search-open').on('click', function (e) {
    e.preventDefault();
    $(this).parents('.site-header').find('.site__search').toggleClass('open') ;
    });

    $('.search__close').on('click', function (e) {
    e.preventDefault();
    $(this).parents('.site-header').find('.site__search').removeClass('open') ;
    });
    File allegati File allegati

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,669
    Ripeto, è difficile riprodurre il problema in questo modo. Se hai la pagina online e accessibile pubblicamente, posta direttamente il link.

    In alternativa prova a fornire online un esempio minimo riproducibile in cui sia possibile osservare il problema in questione. Forse potrebbe esserti utile adoperare qualche code playground (CodePen, JSFiddle o altro).
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ripeto, è difficile riprodurre il problema in questo modo. Se hai la pagina online e accessibile pubblicamente, posta direttamente il link.

    In alternativa prova a fornire online un esempio minimo riproducibile in cui sia possibile osservare il problema in questione. Forse potrebbe esserti utile adoperare qualche code playground (CodePen, JSFiddle o altro).
    Ok provo a metterla online grazie mille ti aggiorno a breve

  6. #6
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,505
    ciao thepsedu,
    benvenuto sul forum.

    Ti invito, qualora non lo avessi già fatto, a prendere visione del regolamento ed in particolare della sezione titolo e l'utilizzo del tag code.

    Grazie
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.