1

I wanted to know how loading static .js files looks like

Use <script src="{% static 'js/base.js' %}" />

Propably need .js because i will try use this NavBar like here. Login has red frame. https://youtu.be/LOWjWRy_Kks?t=384

I tried Load from bootstrap:

CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

I don't have a red frame like in the movie

https://zapodaj.net/images/46600ed652872.jpg

Improve this question

1 Answer 1

Reset to default
1

I can't understand your question very clearly, however I can't comment either.

If by static JS you mean JavaScript on your computer, then you can use relative paths, i.e. path relative to your HTML file.

<script src="./src/index.js></script>

The ./ is used to indicate the present path, ../ can be used to move up the directory or in other words go back.

If you want to embed JS directly in HTML, then you can do so simply by:

<script>
//your js here
</script>

In the video he happens to be using JQuery, it is a Javascript library which you happen to also be importing when you are including Bootstrap.

If you press Ctrl + Shift + I or open the developer console, you can see if you are making a JavaScript error. The fact that you don't see a red frame is most likely to be related to CSS and not JS.

If you can update the video with time-stamp that would be nice, and also include a bit of your code and what you are trying to do.

EDIT: After clarification in comments

That is almost certainly CSS at play. If you have copied the CSS files from the tutorial. You can apply the following CSS properties to the element, either by using nth-last-child() or by giving it a class and styling it. Following would be an example for the visual effect you want. 

.contact-button {
   padding: 20px;
   background: red; 
   color: white; 
   border-radius: 5px;
   transition: linear 1s;
}
.contact-button:hover {
   background: blue; 
}

However since you are using bootstrap, its incredibly easy to style the button. Simply add btn btn-danger to the class of the button and voila.

The reason I suspect that the button isn't showing the way it is supposed to, is because it has an incorrect class name that hasn't been styled in css, however without any code to look at I can only suspect.

Hope this solves the problem. If not maybe add the code?

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

5 Comments

Hmm .css file is from the description below the movie... And it was load from staticfiles
@Native856 From the time stamp you provided I decipher that you mean the red login button. The frame around the last login text? If that is the case it might be because you changed the css selector of your button, which has a different text of contact. If not, do you mean something else by the red frame?
that's exactly what I meant
@Native856 I have updated the answer, to include the solution for the problem you might be facing.
now I understand how it works! :) Thx for everything. U are very helpful =)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.