7 Replies - 320 Views - Last Post: 13 April 2020 - 11:28 PM

#1 mgrex   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 281
  • Joined: 25-March 10

Duplicating a nav bar design from codegen, involving jQuery and css

Posted 12 April 2020 - 10:21 AM

I am trying to implement the nav bar from here (link), using Eclipse IDE. It’s name is ‘6. CSS Bootstrap 4 Horizontal Navbar Examples (Mobile)’.

Unfortunately the codepen (link) doesn’t display how the jQuery is called, but does have a link to it, when you click the 'gear icon':

https://code.jquery.com/jquery-3.4.1.min.js



I am trying to implement the nav bar as 3 separate files:
  • navbar_bootstrap_01.html
  • navbar_bootstrap_01.css
  • navbar_bootstrap_01.js


In the *.js file (img link) I placed the following block of code in it:
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);



In the *.html (image link), I added the following before the <nav> block/field, to call the *.css file:
<head>
        <meta charset="ISO-8859-1">
        <title>Insert title here</title>
        <link rel="stylesheet" type="text/css" href="navbar_bootstrap_01.css">
</head>



After the <nav> block I inserted the following call the *.js file:
	<body>
		<script type="text/javascript" src="card_flip_event_01.js">	</script> 
	</body>



Unfortunately the page looks like the following (link), and none of the links are interactive.

This post has been edited by mgrex: 12 April 2020 - 10:21 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Duplicating a nav bar design from codegen, involving jQuery and css

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15740
  • View blog
  • Posts: 63,062
  • Joined: 12-June 08

Re: Duplicating a nav bar design from codegen, involving jQuery and css

Posted 12 April 2020 - 10:32 AM

Try adding the jquery reference per usual in the <head> block.

ex: https://www.w3school...get_started.asp
Was This Post Helpful? 1
  • +
  • -

#3 mgrex   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 281
  • Joined: 25-March 10

Re: Duplicating a nav bar design from codegen, involving jQuery and css

Posted 12 April 2020 - 01:03 PM

I commented out the following in the JS file:
/*
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
*/



Then added the following to the html file:
<head>
        <meta charset="ISO-8859-1">
        <title>Insert title here</title>
        <link rel="stylesheet" type="text/css" href="navbar_bootstrap_01.css">
        
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    </head>




I get the exact same output even after manually navigating to the directory and opening the html with a different browser.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6901
  • View blog
  • Posts: 28,559
  • Joined: 12-December 12

Re: Duplicating a nav bar design from codegen, involving jQuery and css

Posted 12 April 2020 - 01:59 PM

What are you expecting to see? Are there errors in the browser's console?

I am slightly puzzled, adding the jQuery library alone won't change the HTML and CSS output.
Was This Post Helpful? 1
  • +
  • -

#5 mgrex   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 281
  • Joined: 25-March 10

Re: Duplicating a nav bar design from codegen, involving jQuery and css

Posted 13 April 2020 - 12:59 PM

View Postandrewsw, on 12 April 2020 - 03:59 PM, said:

What are you expecting to see? Are there errors in the browser's console?

I am slightly puzzled, adding the jQuery library alone won't change the HTML and CSS output.


I want an output that looks like this

Posted Image
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6901
  • View blog
  • Posts: 28,559
  • Joined: 12-December 12

Re: Duplicating a nav bar design from codegen, involving jQuery and css

Posted 13 April 2020 - 01:56 PM

Is jQuery successfully attached? Are there errors in your browser's console?

I get the impression that you may have now attached jQuery, but no longer have the Javascript/jQuery code that should run in connection with the page.

(Saying that your output is not the same is too broad a statement at this stage. Once jQuery is attached successfully, the associated script runs, together with the HTML and CSS, then you would be in a position to consider why the output might be different.)
Was This Post Helpful? 1
  • +
  • -

#7 mgrex   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 281
  • Joined: 25-March 10

Re: Duplicating a nav bar design from codegen, involving jQuery and css

Posted 13 April 2020 - 04:53 PM

I went ahead added console.log

		<script src="https://code.jquery.com/jquery-3.4.1.min.js">
			console.log()
		</script>




It turns out I was referring to the wrong *.js file (image link). Sorry for the inconvenience, and thanks for the assistance.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6901
  • View blog
  • Posts: 28,559
  • Joined: 12-December 12

Re: Duplicating a nav bar design from codegen, involving jQuery and css

Posted 13 April 2020 - 11:28 PM

Glad you sorted.

Note that console.log() doesn't produce any output (of note), console.log('hello') would [or perhaps you just omitted the text when posting here ;) ]
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1