Using scripts in Mvc Views without bundling

Question

I want try using Rellax (javascript parallax library) in my MVC application at once of my views. So I add the rellax.js script link (without bundling) and few lines script for rellax in @section scripts{<--->} at the target view. Now when I trying to run console response a throw error

Uncaught Error: The elements you're trying to select don't exist. at new g (rellax.min.js:1)

I read similar issue at Rellax Github and he said Use rellax.js without bundling per pages. But I used rellax.js and tags in one view without bundling Here is my .cshtml

    <div class="rellax-header rellax-header-sky" data-rellax-speed="-8" style="transform: translate3d(0px, 421px, 0px);">
        <div class="page-header-image" style="background-image:url(@backPath)">
        </div>
    </div>
    <div class="rellax-header rellax-header-buildings" data-rellax-speed="0" style="transform: translate3d(0px, 0px, 0px);">
        <div class="page-header-image page-header-city" style="background-image:url(@imagePath)">
        </div>
    </div>
    <div class="rellax-text-container rellax-text" style="transform: translate3d(0px, 128px, 0px);">
        <h1 class="h1-seo" data-rellax-speed="-2">Test</h1>
        <div class="pro">PRO</div>
    </div>
@section Scripts {
<script src="~/js/plugins/rellax.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if ($(window).width() >= 991) {
                setTimeout(function () {
                    var rellax = new Rellax('.rellax', {
                        center: true
                    });
                }, 5000);

                var rellaxHeader = new Rellax('.rellax-header');
                var rellaxText = new Rellax('.rellax-text');
            }
        });
    </script>
}

Where is my wrong? Any idea please?!

Is this in a view or a partial view? You can't use sections in partial views. — Josh H
– Josh H, Commented Jan 23, 2018 at 16:16
In your code sample I'm not seeing any elements with a class of 'rellax'. Do you have one not listed in this code sample? — Josh H
– Josh H, Commented Jan 23, 2018 at 16:33
@JoshH this is a view, Home Index, I added new Rellax element like Relax documentation — hitasp
– hitasp, Commented Jan 23, 2018 at 20:40
Rellax worked well, I said throw error, that throw takes 9.7 s for loading at local and 14s for host loading. — hitasp
– hitasp, Commented Jan 23, 2018 at 20:45

hitasp · Accepted Answer · 2018-01-24 14:58:38Z

1

I was able to replicate the error locally. If you change your script tag to use the full version of rellax.js:

<script src="~/js/plugins/rellax.js" type="text/javascript"></script>

It will give you a stacktrace similar too:

rellax.js:100 Uncaught Error: The elements you're trying to select 
   don't exist.
at new Rellax (rellax.js:100)
at Index:68

Index:68 for me is:

var rellax = new Rellax('.rellax', {

This is because there is no element with a class of 'rellax'

To fix the error, I changed the first div too:

<div class="rellax rellax-header-sky" data-rellax-speed="-8">

So that there was an element with a class of 'rellax'

edited Jan 24, 2018 at 14:58

hitasp

7362 gold badges9 silver badges20 bronze badges

answered Jan 23, 2018 at 21:41

Josh H

2741 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using scripts in Mvc Views without bundling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related