• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wywołanie funkcji jquery z pliku "b.js" w pliku "a.js"

VPS Starter Arubacloud
+1 głos
248 wizyt
pytanie zadane 28 marca 2018 w JavaScript przez Jungle Goat Nowicjusz (160 p.)
edycja 28 marca 2018 przez Jungle Goat

Witam borykam się z tym zagadnieniem od 7 godzin i ciągle tylko błędy i błędy.
mam 2 pliki podlinkowane w htmlu. Jeden main.js ( u mnie index.js) i drugi tuto.js w którym w jquery napisałem pewną animację. Próbuję wywołać funkcję Tuto z pliku tuto.js jednak nie wiem jak się do tego zabrać.

W penie także dokładniejszy opis moich dotychczasowych błedów. pen zawiera koda obu plików i szerszy opis.


Tuto = function () {
 
             
               alert("tuto");
     
             
    
   
   
    var profileScreen;// = $('.profile-screen');
    var phoneScreen; //= $('.phone-screen');
    
   // var match; = phoneScreen.find('.match');
    
   
   // var chatScreen; = $('.chat-screen');
  
    
    
    
    var handleScrollEvent = function () {
         alert("handle");
        $(document).scroll(function () {
             
            
            var scrollTop = $(document).scrollTop();
            step1(scrollTop);
            step2(scrollTop);
            step3(scrollTop);
            step4(scrollTop);
            step5(scrollTop);
            step6(scrollTop);
            step7(scrollTop);
            step8(scrollTop);
            step9(scrollTop);
           
            
        });
    };
    
    var step1 = function (scrollTop) { // postion: fixed;
            
        if (scrollTop > 600) {
          $('.phone-container').addClass('phone-container-fixed');
        } else {
          $('.phone-container').removeClass('phone-container-fixed');
        }
        if (scrollTop > 3801) { 
          $('.phone-container').addClass('phone-container-fixed-bot');
        
        } else {
          $('.phone-container').removeClass('phone-container-fixed-bot');
        }
    };
    

    var step2 = function (scrollTop) {
        var pic1 = profileScreen.find('#Girl-one-prof');
      
        if (scrollTop > 750){
        pic1.css({'left': '260px','top': '-46px','transform':'rotate('+23+'deg)', 'transition': '1s'})
        }else{
        pic1.css({'left': '0px', 'top': '0px','transform':'rotate('+0+'deg)', 'transition': '1s'});
    }
        
    };
    
    var step3 = function (scrollTop) {
        
        if (scrollTop >= 1300){
            $('.party').removeClass('bum2');
        
        } else if ((scrolled >= 1100) ){
       
            $('.party').addClass('bum2');
       
        } else {
            $('.party').removeClass('bum2');
        }
        
    };
    
    
    var step4 = function (scrollTop) {
       
        if (scrollTop > 1700){
            $('.match').removeClass('bum');
        
        } else if (scrollTop >= 1500){
            $('.match').addClass('bum');
            
        } else {
            $('.match').removeClass('bum');
        }
    };
  
    
    var step5 = function (scrollTop) {
        
        var czat = phoneScreen.find('.chat-screen');
        
        if (scrollTop >= 1800){
            
            czat.css({'left': '0px','transition':'1700ms'});
            $('#phone-fot-chat').css({'z-index':'11'});
        
        } else {
            
            czat.css({'left': '234px','transition':'1700ms'});
            $('#phone-fot-chat').css({'z-index':'1'});
        }
    };
       
    var step6 = function (scrollTop) {
        var czat = phoneScreen.find('.chat-screen');
        var prof = phoneScreen.find('#prof');
         
        if(scrollTop >= 2400){
            czat.css({'left' : '234px', 'transition':'1700ms'});
            prof.css({'right' : '0px', 'transition':'1700ms'});
            $('#phone-fot-prof').css({'z-index':'11'});
        } else {
            prof.css({'right' : '234px', 'transition':'1700ms'});
            $('#phone-fot-prof').css({'z-index':'1'});
        }
    };
    var step8 = function (scrollTop) {
         var prof = phoneScreen.find('#prof');
        
        if(scrolled >= 2700 ){
            prof.css({'top': '-2160px', 'transition' : '1700ms'})
        } else {
            prof.css({'top': '-1916px', 'transition' : '1700ms'})
    }
    };
  
    var step9 = function (scrollTop) {
        
        var chat1 = phoneScreen.find('#chat1');
        var chat2 = phoneScreen.find('#chat2');
        var chat3 = phoneScreen.find('#chat3');
        var chat4 = phoneScreen.find('#chat4');
    
        if(scrollTop >= 2000){
            chat1.delay(1200).fadeIn(200, function(){
                chat2.delay(200).fadeIn(200, function(){
                    chat3.delay(200).fadeIn(200, function(){
                        chat4.delay(200).fadeIn(200);
                    });
                });
            });

        } else {
            $('#chat1').stop(true).hide();
            $('#chat2').stop(true).hide();
            $('#chat3').stop(true).hide();
            $('#chat4').stop(true).hide();
        }
    };
    
    var init = function () {
        profileScreen = $('.profile-screen');
        phoneScreen = $('.phone-screen');
        handleScrollEvent();
    };
   
    
    return {
        'init': init
    }
    };
     





 

https://codepen.io/Krzys90/pen/geoybm  w Penie zamieszczam plik index.js oraz tuto.js

1 odpowiedź

+3 głosów
odpowiedź 28 marca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
wybrane 28 marca 2018 przez Jungle Goat
 
Najlepsza
Po prostu daj tuto.js przed index.js. Strona wczyta tuto najpierw i dzieki temu bedziesz mogl uzyc zmiennych/funkcji z tego pliku w swoim. Tak jak jQuery zawsze dajesz przed swoim kodem
komentarz 28 marca 2018 przez Jungle Goat Nowicjusz (160 p.)
Z jednej strony się ciesze że rozwiązana została cześć problemu, z drugiej się złoszczę ze było tak trywialne, dziękuje :)

 

otrzymuję za to teraz takie błędy. kiedy uzywam .find w index.js nic takiego sie nie pojawia.

55tuto.js:59 Uncaught TypeError: Cannot read property 'find' of undefined
    at step2 (tuto.js:59)
    at HTMLDocument.<anonymous> (tuto.js:29)
    at HTMLDocument.dispatch (jquery-latest.min.js:3)
    at HTMLDocument.r.handle (jquery-latest.min.js:3)
komentarz 28 marca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
Upewnij sie ze element na ktorym stosujesz .find() w linijce 59 istnieje. Prawdopodobnie jest to jakas literowka w $("")
1
komentarz 28 marca 2018 przez Jungle Goat Nowicjusz (160 p.)
Udało się wszystko zrobić, dzięki :)

Podobne pytania

0 głosów
2 odpowiedzi 205 wizyt
pytanie zadane 10 stycznia 2017 w JavaScript przez niezalogowany
0 głosów
2 odpowiedzi 468 wizyt
0 głosów
0 odpowiedzi 820 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...