8
Daha sonra Codeon üzerinde bir sayfa oluşturdum ve Ruby on Rails uygulamasına eklenecek (https://codepen.io/salman15/pen/evQVLV), tüm kodlar düzgün çalışıyor. Ruby on Rails || JQuery ve JavaScript kitaplıkları çalışmıyor
Ben çılgınlığı ile benim Ruby on Rails app sayfasını ekleyerek çalıştı sayfasını oluşturduktan sonra (Cloud 9 https://consulegem-salman15.c9users.io/ çalışıyorsa "Sunucu Bu okuduğunuz anda çevrimdışı olmayabilir").Adım 1: Aşağıdaki şekilde yaptık İndirilen tüm JavaScript kütüphaneleri: _head.html.erb
Adım 3 eklendi CSS CDN: index.html.erb
Adım 2 html kodunu eklendi benim all.js dosyasına aşağıdaki kod satırı eklendi (önyüzü klasöründe içindeki:> uygulamasını - -> varlıklar -> javascripts - -> önyüzü> mağaza
adım 4 ve aşağıdaki klasör yolunda onları ekledi
//= require_tree
Bu noktada kodum çalışıyor olmalıydı, ancak çalışmıyor. aynı kitaplıkları ile tam aynı kod Raylar app benim Ruby üzerinde çalışmak için görünmüyor ve bana yüzden Phantom olduğunu
Uncaught TypeError: $(...).easeScroll is not a function
at script.self-a9cf77dbbd3e521fbb44b192f7d525c508a4a35eee8e827785ebb4ce329092f5.js?body=1:341
Uncaught TypeError: $(...).logosDistort is not a function
at HTMLDocument.<anonymous> (script.self-a9cf77dbbd3e521fbb44b192f7d525c508a4a35eee8e827785ebb4ce329092f5.js?body=1:220)
at j (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
at Object.fireWith [as resolveWith] (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
at Function.ready (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
at HTMLDocument.I (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
13:10:27:369 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-6
13:10:27:373 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-6
13:10:27:373 (ScrollScene) -> ERROR: Invalid value for option "triggerHook": .charger
13:10:27:374 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-7
13:10:27:375 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-7
Bu beni rahatsız ediyor?
Kodun tanınmaması nedeniyle is not a function hatası oluşuyor, normalde bunun nedeni kitaplıkların yüklenmemesinden kaynaklanıyor. Yine de, sayfanın yüklenmesinden ve tüm kitaplıkların yüklenmesinden sonra kaynak sayfayı kontrol ettim.
TweenMax hataları da hayalettir çünkü aynı kitaplıklar ve aynı koddur.
Script.js'ye kitaplık kodunu eklemek gibi birkaç çözüm denedim ve işe yaradı gibi görünüyordu, ancak bu uygun olmayan bir çözüm olurdu.
Sanırım hepimiz bilgiye ve kodlara ihtiyacım vardı, ama daha fazla ihtiyacınız varsa sormaya çekinmeyin.
Sorun:
sorumu Özetlemek gerekirse My jQuery kütüphaneleri
Soru çalışmak görünmüyor: neden?
script.js
//MENU
var wrap = $("#main-nav-bar");
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
//MENU END
//TWEENMAX
/* triggerHook: "onEnter" "onLeave" "onCenter"; */
var controller = new ScrollMagic();
// Section 6
new ScrollScene({
triggerElement: "#section-6",
duration: 300,
triggerHook: 0.2
})
.setTween(TweenMax.to(".charging", 1, { opacity: "1" }))
.addTo(controller);
new ScrollScene({
triggerElement: "#section-6",
duration: 600,
triggerHook: ".charger"
})
.setTween(TweenMax.to(".charger", 1, { top: "766px" }))
.addTo(controller);
new ScrollScene({
triggerElement: "#section-7",
duration: 200,
triggerHook: 0.7
})
.setTween(TweenMax.to(".red-light", 1, { opacity: "1" }))
.addTo(controller);
new ScrollScene({
triggerElement: "#section-7",
duration: 400,
triggerHook: 0.5
})
.setTween(TweenMax.to(".front-phone", 1, { opacity: "1" }))
.addTo(controller);
//TWEENMAX END
//PARALLAX
(function() {
var parallax = document.querySelectorAll(".parallax"), speed = 0.3;
window.onscroll = function() {
[].slice.call(parallax).forEach(function(el, i) {
var windowYOffset = window.pageYOffset,
elBackgrounPos = "0 " + windowYOffset * speed + "px";
el.style.backgroundPosition = elBackgrounPos;
});
};
})();
// END PARALLAX
//Scrolling
$(document).ready(function() {
//$("body").smoothWheel();
});
(function($) {
var self = this,
container,
running = false,
currentY = 0,
targetY = 0,
oldY = 0,
maxScrollTop = 0,
minScrollTop,
direction,
onRenderCallback = null,
fricton = 0.96, // higher value for slower deceleration
vy = 0,
stepAmt = 1,
minMovement = 0.1,
ts = 0.1;
var updateScrollTarget = function(amt) {
targetY += amt;
vy += (targetY - oldY) * stepAmt;
oldY = targetY;
};
var render = function() {
if (vy < -minMovement || vy > minMovement) {
currentY = currentY + vy;
if (currentY > maxScrollTop) {
currentY = vy = 0;
} else if (currentY < minScrollTop) {
vy = 0;
currentY = minScrollTop;
}
container.scrollTop(-currentY);
vy *= fricton;
// vy += ts * (currentY-targetY);
// scrollTopTweened += settings.tweenSpeed * (scrollTop - scrollTopTweened);
// currentY += ts * (targetY - currentY);
if (onRenderCallback) {
onRenderCallback();
}
}
};
var animateLoop = function() {
if (!running) return;
requestAnimFrame(animateLoop);
render();
//log("45","animateLoop","animateLoop", "",stop);
};
var onWheel = function(e) {
e.preventDefault();
var evt = e.originalEvent;
var delta = evt.detail ? evt.detail * -1 : evt.wheelDelta/40;
var dir = delta < 0 ? -1 : 1;
if (dir != direction) {
vy = 0;
direction = dir;
}
updateScrollTarget(delta);
};
window.requestAnimFrame = (function() {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
}
);
})();
/*
* http://jsbin.com/iqafek/2/edit
*/
var normalizeWheelDelta = (function() {
// Keep a distribution of observed values, and scale by the
// 33rd percentile.
var distribution = [], done = null, scale = 30;
return function(n) {
// Zeroes don't count.
if (n == 0) return n;
// After 500 samples, we stop sampling and keep current factor.
if (done != null) return n * done;
var abs = Math.abs(n);
// Insert value (sorted in ascending order).
outer: do {
// Just used for break goto
for (var i = 0; i < distribution.length; ++i) {
if (abs <= distribution[i]) {
distribution.splice(i, 0, abs);
break outer;
}
}
distribution.push(abs);
} while (false);
// Factor is scale divided by 33rd percentile.
var factor = scale/distribution[Math.floor(distribution.length/3)];
if (distribution.length == 500) done = factor;
return n * factor;
};
})();
//END SCROLLING
//MOVING PHONE
$.fn.smoothWheel = function() {
// var args = [].splice.call(arguments, 0);
var options = jQuery.extend({}, arguments[0]);
return this.each(function(index, elm) {
if (!("ontouchstart" in window)) {
container = $(this);
container.bind("mousewheel", onWheel);
container.bind("DOMMouseScroll", onWheel);
currentY = targetY = 0;
minScrollTop =
container.get(0).clientHeight - container.get(0).scrollHeight;
if (options.onRender) {
onRenderCallback = options.onRender;
}
if (options.remove) {
log("122", "smoothWheel", "remove", "");
running = false;
container.unbind("mousewheel", onWheel);
container.unbind("DOMMouseScroll", onWheel);
} else if (!running) {
running = true;
animateLoop();
}
}
});
};
//END MOVING PHONE
})(jQuery);
//fade in
var $animation_elements = $(".animation-element");
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = window_top_position + window_height;
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = element_top_position + element_height;
//check to see if this current container is within viewport
if (
element_bottom_position >= window_top_position &&
element_top_position <= window_bottom_position
) {
$element.addClass("in-view");
} else {
$element.removeClass("in-view");
}
});
}
$window.on("scroll resize", check_if_in_view);
$window.trigger("scroll");
var particles = true,
particleDensity,
options = {
effectWeight: 1,
outerBuffer: 1.08,
elementDepth: 220
};
$(document).ready(function() {
$(".section-0").logosDistort(options);
if (particles) {
particleDensity = window.outerWidth * 7.5;
if (particleDensity < 13000) {
particleDensity = 13000;
} else if (particleDensity > 20000) {
particleDensity = 20000;
}
return $("#particle-target").particleground({
dotColor: "#1ec5ee",
lineColor: "#0a4e90",
density: particleDensity.toFixed(0),
parallax: false
});
}
});
$(document).ready(function() {
/**
* This part does the "fixed navigation after scroll" functionality
* We use the jQuery function scroll() to recalculate our variables as the
* page is scrolled/
*/
$(window).scroll(function() {
var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
var div_top = $("#nav-anchor").offset().top;
if (window_top > div_top) {
$("nav").addClass("stick");
} else {
$("nav").removeClass("stick");
}
});
/**
* This part causes smooth scrolling using scrollto.js
* We target all a tags inside the nav, and apply the scrollto.js to it.
*/
$("nav a").click(function(evn) {
evn.preventDefault();
$("html,body").scrollTo(this.hash, this.hash);
});
/**
* This part handles the highlighting functionality.
* We use the scroll functionality again, some array creation and
* manipulation, class adding and class removing, and conditional testing
*/
var aChildren = $("nav li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i = 0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr("href");
aArray.push(ahref);
} // this for loop fills the aArray with attribute href values
$(window).scroll(function() {
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
var windowHeight = $(window).height(); // get the height of the window
var docHeight = $(document).height();
for (var i = 0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top; // get the offset of the div from the top of page
var divHeight = $(theID).height(); // get the height of the div in question
if (windowPos >= divPos && windowPos < divPos + divHeight) {
$("a[href='" + theID + "']").addClass("nav-active");
} else {
$("a[href='" + theID + "']").removeClass("nav-active");
}
}
if (windowPos + windowHeight == docHeight) {
if (!$("nav li:last-child a").hasClass("nav-active")) {
var navActiveCurrent = $(".nav-active").attr("href");
$("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
$("nav li:last-child a").addClass("nav-active");
}
}
});
});
//smooth anchors
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
//end smooth anchors
index.html.erb
<div id="sidebar">
<div id="nav-anchor"></div>
<nav>
<ul>
<li>
<a href="#section-1">
<div class="ball"></div><span id="link">Top</span></a>
</li>
<li>
<a href="#section-2">
<div class="ball"></div><span id="link">Design</span></a>
</li>
<li>
<a href="#section-4">
<div class="ball"></div><span id="link">Vermogen</span></a>
</li>
<li>
<a href="#section-7">
<div class="ball"></div><span id="link">Iris scanner</span></a>
</li>
<li>
<a href="#section-8">
<div class="ball"></div><span id="link">Fingerprint Scanner</span></a>
</li>
<li>
<a href="#section-5">
<div class="ball"></div><span id="link">Camera</span></a>
</li>
<li>
<a href="#section-6">
<div class="ball"></div><span id="link">Batterij</span></a>
</li>
<li>
<a href="#section-9">
<div class="ball"></div><span id="link">Software</span></a>
</li>
</ul>
</nav>
</div>
<div class="section-0">
<div class="phone-container">
<div class="phone-front" id="layer-one"></div>
</div>
</div>
<section class="section-1 parallax parallax-1" id="section-1">
<div class="container" id="section-1">
<div class="text-block animation-element">
<h1>De toekomst is nu</h1>
<p>"De Volks Phone is een geweldig hi-end toestel voor een betaalbare prijs."<br> — "Telegraaf"</p><br>
<div class="pre-order-button">
<a href="#section-9"> Pre-order</a>
</div>
</div>
</div>
</section>
<section class="section-2" id="section-2">
<div class="container">
<div class="left-half" id="left-half-home">
<div class="text-block animation-element">
<h1>“De perfecte balans tussen staal en glaswerk”</h1>
</div>
</div>
<div class="right-half" id="right-half-home">
<div class="rear-phone animation-element bounce-up">
</div>
</div>
</div>
</section>
<section class="section-3 parallax parallax-2" id="section-3">
<div class="container">
<h1>Ons Volk</h1>
</div>
</section>
<section class="section-4" id="section-4">
<div class="container">
<div class="top-part" id="left-half-home">
<div class="text-block animation-element">
<h1>Beter. Sneller. Uniek.</h1>
</div>
</div>
<div class="middle-part" id="right-half-home">
<div class="rear-phone animation-element slide-right">
</div>
</div>
<div class="bottom-part">
<div class="text-block ">
<ul>
<li class="spec-left">
<h1>6GB</h1>
<img src="http://sterntelecom.com/img/phones/ram-memory.png">
<h4>RAM</h4></li>
<li class="spec-center">
<h1> 4.2 Mghz </h1>
<img src="http://sterntelecom.com/img/phones/cpu.png">
<h4>Deca core CPU</h4></li>
<li class="spec-right">
<h1>64GB</h1>
<<img src="http://sterntelecom.com/img/phones/hard-drive.png">
<h4>Opslag</h4></li>
<li class="spec-right">
<h1>5.5 Inch</h1>
<img src="http://sterntelecom.com/img/phones/inch.png">-
<h4>Scherm</h4></li>
</ul>
</div>
</div>
</div>
</section>
<section class="section-7" id="section-7">
<div class="container">
<div class="intro-text">
<h1>Wat science fiction was in nu werkelijkheid.</h1>
<h2>Maak kennis met de ultra-moderne functie van uw Volks Phone: De irisscanner</h2>
</div>
<div class="red-light"></div>
<div class="front-phone left-half" id="left-half-home">
<div class="screen" id="screen-section-7">
</div>
</div>
<div class="right-half" id="right-half-home">
<div class=" animation-element ">
<div class="text-block animation-element ">
<h1>Veilig</h1>
<p>Elk iris vertoont een uniek patroon. Met de irisscanner bent u verzekerd van veiligheid.</p>
</div>
<div class="text-block animation-element ">
<h1>Ook in het donker</h1>
<p>Met de infrarood iris scanner herkent de Volks Phone uw irissen ook in het donker.</p>
</div>
<!--<div class="text-block animation-element ">
<h1>High-end telefoon voor een Low prijs</h1>
<p>"The volks is the rare kind of phone that I can recommend without reservations."<br> — The Verge</p>
</div>-->
</div>
</div>
</div>
</section>
<section class="section-8" id="section-8">
<div class="container">
<div class="left-half" id="left-half-home">
<div class="text-block">
<h1>Fingerprint scanner</h1><br>
<p>Ontgrendel de Volks Phone binnen 0.4 seconden met met de super snelle vingerafdrukscanner</p>
</div>
</div>
<div class="right-half animation-element bounce-up" id="right-half-home">
</div>
</div>
</section>
<section class="section-5" id="section-5">
<div class="container">
<div class="top-part" id="left-half-home">
<div class="text-block">
<h1>Haarscherpe foto's</h1><br>
<p>16-mp back-camera, 13-mp front-camera.</p>
</div>
</div>
<div class="middle-part" id="right-half-home">
</div>
<div class="bottom-part">
<div class="text-block animation-element bounce-up">
</div>
</div>
</div>
</section>
<section class="section-6" id="section-6">
<div class="container">
<div class="front-phone left-half" id="left-half-home">
<div class="screen">
<div class="animation-element charging" id="charging">
<h1>Fast Charging</h1>
<div class="animation-element battery"></div>
</div>
</div>
</div>
<div class="charger">
</div>
<div class="right-half" id="right-half-home">
<div class=" animation-element bounce-up">
<div class="text-block animation-element">
<h1>Groot</h1>
<p>Met een capaciteit van 3250Mah biedt Volks u een bovengemiddeld batterij vermogen.</p>
</div>
<div class="text-block animation-element">
<h1>Snel</h1>
<p>Via de fast-charging functie is de Volks Phone binnen 45minuten volledig opgeladen
</p>
</div>
<div class="text-block animation-element">
<h1>Zuinig</h1>
<p>De Deca-core processor zorgt ervoor dat het toestel alleen op volle energie presteert wanneer dat nodig is.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section-9" id="section-9">
<div class="container">
<div class="top-part" id="left-half-home">
<div class="text-block animation-element">
<h1>Simpliciteit op z'n fijnst</h1>
<p>"The volks is the rare kind of phone that I can recommend without reservations."<br> — The Verge</p>
<div class="pre-order-button">
<a href=""> Pre-order</a>
</div>
</div>
</div>
<div class="middle-part" id="right-half-home">
<div class="screens">
</div>
</div>
</div>
<div class="arrow-up">
<a href="#section-1"><img src="http://sterntelecom.com/img/phones/arrowhead.png"></a>
</div>
</section>
GÜNCELLEME (EKLENEN DOSYA TALEP)
uygulaması.js
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require spree/frontend
//= require_tree .
//= require spree/frontend/spree_auth
//= require spree/frontend/spree_braintree_vzero
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree
//= require_jquery.min
//= require_jquery-3.2.1.min
//= require_jquery.easeScroll
//= require_jquery.logosDistort.min
//= require_jquery.particleground.min
//= require_jquery.jquery.scrollmagic.min
//= require 'greensock/TweenLite'
//= require 'greensock/easing/EasePack'
//= require 'greensock/jquery.gsap.js'
_head.html.erb
<meta charset="utf-8">
<title>Volks - Het volk's toestel</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://www.jqueryscript.net/demo/jQuery-Plugin-For-3D-Perspective-Transforms-On-Mousemove-LogosDistort/assets/css/perspectiveRules.css'>
<%== meta_data_tags %>
<%= canonical_tag(current_store.url) %>
<%= favicon_link_tag 'volks-logo.png' %>
<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen' %>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'spree/frontend/all' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<%= yield :head %>
GÜNCELLEME 2 (değişti application.js dosya)
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_jquery.min
//= require_jquery-3.2.1.min
//= require_jquery.easeScroll
//= require_jquery.logosDistort.min
//= require_jquery.particleground.min
//= require_jquery.jquery.scrollmagic.min
//= require spree/frontend/spree_auth
//= require spree/frontend/spree_braintree_vzero
CEVAP
Yanıtı aşağı doğru cevapta bulabilirsiniz, ancak cevabın tek kısmı bu değil. Cevabın son kısmı CSS'deydi, vücudumda bir hataya neden olan bir çatışma vardı. Yani aynı sorunu yaşıyorsanız, Kütüphanelerinizin uygun konumda (benim için altta) ve uygun siparişte yüklü olduğundan emin olun. Ayrıca CSS'nizin wel olarak herhangi bir hataya neden olmadığından emin olun.
Bu büyük olasılıkla, komut dosyalarının varlık boru hattı tarafından yüklenmekte olduğu sırayla ilgili bir sorundur. '
' etiketinizin içeriğini geliştirme modunda ve ayrıca 'application.js' manifest dosyanızda yayınlayabilir misiniz? – Prajjwal@Prajjwal [kılavuz] ile anlaşmak (http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives) "dosyaların require_tree tarafından dahil edildiği sıra belirtilmez. Bunlar arasında belirli bir düzende. Belirli bir JavaScript'in birleştirilmiş dosyada bir miktar üst üste gelmesini sağlamanız gerekiyorsa, önkoşul dosyasını öncelikle manifestte belirtin. " Bu yüzden büyük olasılıkla bir dosya siparişi sorunu var gibi görünüyor –
Bu yüzden bize geliştirme modunda '
' etiketinin içeriğini göstermelisiniz. Boru hattı, her bir varlığın geliştirilmesinde bireysel olarak hizmet verir ve bu nedenle sipariş sorununu açık hale getirmelidir. – Prajjwal