Script works in html but not in javascript file

Question

Final Update The problem got solved. Thank you all. Prepros compile my js file into main-dist. the new code was in there instead of my main.js. Thank you for all who help me.

update Able to reproduce the nonworking code in jsBin

I'm wondering why the function is not working in my js file after my jquery file is called but the script work in my HTML file.
I want the function to be in my js file so it isn't in each one of my HTML file.

Example 1 in html on jsFiddle

Example 2 in html

var navBar = function() {

    var pull = $('#pull');
    var menu = $('nav ul');

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
    }
    }); 
};

$(document).ready(navBar);

Really Long snippet. The navbar code work in snippet as well but it doesn't work when i load in my browser

//time on front page
function displayTime () {
	var elt = document.getElementById("clock");
	var now = new Date();
	elt.innerHTML = now.toLocaleTimeString();
	setTimeout (displayTime, 1000);
};
displayTime();
/*
	function menu(){
		$('.tMenu').click(function(){
			$('nav ul').slideToggle();
		})
	}
	menu(); */

	var navBar = function() {
		
	    var pull = $('#pull');
	    var menu = $('nav ul');
	 
	    $(pull).on('click', function(e) {
	        e.preventDefault();
	        menu.slideToggle();
	    });

	    $(window).resize(function(){
		    var w = $(window).width();
		    if(w > 320 && menu.is(':hidden')) {
		        menu.removeAttr('style');
	    }
		}); 
	};

	$(document).ready(navBar);


//slider main page
var main = function(){


	$('.arrow-next').click(function(){
		var currentSlide = $('.active-slide');
		var nextSlide = currentSlide.next();

		var currentDot = $('.active-dot');
		var nextDot = currentDot.next();

		if (nextSlide.length === 0) {
			nextSlide = $('.slide').first();
			nextDot = $('.dot').first();
		}

		currentSlide.fadeOut(500).removeClass('active-slide');
		nextSlide.fadeIn(500).addClass('active-slide');

		currentDot.removeClass('active-dot');
		nextDot.addClass('active-dot');
	});

	$('.arrow-prev').click(function(){
		var currentSlide = $('.active-slide');
		var prevSlide = currentSlide.prev();

		var currentDot = $('.active-dot');
		var prevDot = currentDot.prev();

		if(prevSlide.length === 0) {
     	 	prevSlide = $('.slide').last();
     		prevDot = $('.dot').last();
     	}
     	currentSlide.fadeOut(500).removeClass('active-slide');
     	prevSlide.fadeIn(500).addClass('active-slide');

     	currentDot.removeClass('active-dot');
     	prevDot.addClass('active-dot');
	});


	$('.dot').click(function(){
		var index = $(this).index(); // get the index or position of the current element that has the class .dot
		$('.slide').fadeOut(500); // to hide all elements with class .slide
		$('.dot').removeClass('active-dot');
		$('.slide').removeClass('active-slide').addClass('active');
		$('#slide' + (index+1)).fadeIn(500); 
		$('#slide' + (index+1)).removeClass('active').addClass('active-slide');
		$(this).addClass('active-dot');
		});
	
};

$(document).ready(main);

.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

nav {
  background: #17181D;
  border-bottom: 1px solid #0A0A0A;
  font-family: 'PT Sans', Arial, sans-serif;
  font-weight: bold;
  position: relative;
  height: 40px;
  width: 100%;
}

nav ul {
  height: 40px;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}

nav li {
  display: inline;
  float: left;
}

nav a {
  color: #DED6D6;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0px #30365E;
  width: 150px;
}

nav li a {
  border-right: 1px solid #515676;
  border-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

nav li:last-child a {
  border-right: 0;
}

nav a:hover, nav a:active {
  background-color: #2575C6;
}

nav a#pull {
  display: none;
}

@media screen and (max-width: 600px) {
  nav {
    height: auto;
  }
  nav ul {
    width: 100%;
    display: block;
    height: auto;
  }
  nav li {
    width: 50%;
    float: left;
    position: relative;
  }
  nav li a {
    border-bottom: 1px solid #C0C0C0;
    border-right: 1px solid #C0C0C0;
  }
  nav a {
    text-align: center;
    width: 100%;
    text-indent: 25px;
  }
}

@media only screen and (max-width: 480px) {
  nav {
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav a#pull {
    display: block;
    background-color: #17181D;
    width: 100%;
    position: relative;
    text-decoration: none;
  }
  nav a#pull:after {
    border-top: .5em double white;
    border-bottom: .145em solid white;
    content: ' ';
    display: inline-block;
    height: 0.85em;
    width: 1em;
    position: absolute;
    right: 15px;
    top: 13px;
  }
}

@media only screen and (max-width: 320px) {
  nav li {
    display: block;
    float: none;
    width: 100%;
  }
  nav li a {
    border-bottom: 1px solid white;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
		<div>
			<h1 class='vb'></h1>
			<div class='time'></div>
			<div id='clock'></div>
			<nav class='clearfix'>
				<ul class='clearfix'>
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="bio.html">Bio</a>
					</li>
					<li>
						<a href="#">Hobbies</a>
					</li>
					<li>
						<a href="resume.html">Resume</a>
					</li>
				</ul>
				<a href='#' id='pull'>Menu</a>
			</nav>
		</div>
	</header>
<div class='slider container'>
	<div class='slide active-slide slide-bg' id='slide1'>
		<div class='container'>
			<div class='row'>
					<div class='slide-copy-1 col-xs-12'>
						<h1>Surrounding</h1>
						<p class='fun'>Our lives are so hectic with everyday work, business and errands that we tend to never stop and take in our surrounding.  When was the last time you stop and enjoy a nice beatiful sunset?</p>
					</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide2'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Get Moving And Motivated!</h1>
				<p>In a world where digital devices is so prominent, we get lost in them.  Our strength are that we are very adaptable but it can also be our greatest weakness. </p>
				</div>
					<div class='slide-image col-md-8'>
						<!--
						<ul class='imageList'>
							<li><a href='#'><img src="images/jog.jpg" /></a></li>
							<li><a href='#'><img src="images/health.png" /></a></li>
							<li><a href='#'><img src="images/motivated.jpg" /></a></li>
							<li><a href='#'><img src='images/possible.jpg' /></a></li>
						</ul> -->
					</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide3'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Food Delight</h1>
				<p>We have all been there before!! Food is the best type of comfort.  Eating healthy is great but nothing can satisfied your soul more than your favorite rarities.</p>
				<!--<img src="images/sushi.jpg"/>-->
				</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide4'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Videos</h1>
				<p>Movies, TV shows and online video play such a huge role in our culture.  Learning, Entertainment, Visual Satisfaction etc.</p>
				<!--<iframe class='vid' width="750" height="400" src="https://www.youtube.com/embed/sGbxmsDFVnE" frameborder="0" allowfullscreen></iframe> -->
				</div>
			</div>
		</div>
	</div>
</div>
	<div class='slider-nav'>
		<a href='#' class='arrow-prev'><img src="images/arrow-prev.png"></a>
			<ul class='slider-dot'>
				<li class='dot dot1 active-dot'>&bull;</li>
				<li class='dot dot2'>&bull;</li>
				<li class='dot dot3'>&bull;</li>
				<li class='dot dot4'>&bull;</li>
			</ul>
		<a href="#" class='arrow-next'><img src="images/arrow-next.png"></a>
	</div>

The instance where it's not working wouldn't happen, by any chance, to be a WordPress installation, would it? — tao
– tao, Commented Nov 30, 2015 at 1:26
@kjy112 no error shown in console. just "'webkitMovementX' is deprecated. Please use 'movementX' instead. prepros.js:2 'webkitMovementY' is deprecated. Please use 'movementY' instead." but i google that and they said those are nothing to worried about. even when the navbar work, those warning came up still — minions
– minions, Commented Nov 30, 2015 at 1:27
@AndreiGheorghiu no sir, not wordpress. this is just index.html css w/ scss files and js. i'm just doing a website mock up with js — minions
– minions, Commented Nov 30, 2015 at 1:29
Try wrapping your script in a jQuery(document).ready(function( $ ) { /*script here*/ }); wrapper. This rules out the posibility of having "another library using $ as substitute, besides jQuery" type of conflict. — tao
– tao, Commented Nov 30, 2015 at 1:32

Roshan Srivastava · Accepted Answer · 2015-11-30 01:47:11Z

1

Please see it's working here [1]: https://jsfiddle.net/e1aar5hz/11/

$(function() {
        var pull = $('#pull');
        var menu = $('nav ul');
    menu.hide();
    pull.show()
    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
    }
    }); 
});

answered Nov 30, 2015 at 1:47

Roshan Srivastava

4763 silver badges15 bronze badges

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

1 Comment

minions Over a year ago

Nope, didn't work. It's weird that it all work in jsFiddle but in my files. which is why i'm having a big issue about it.

1cgonza · Accepted Answer · 2015-11-30 01:50:42Z

0

You code works just as it should. You target a link with id="pull" to toggle the menu on and off. The problem is, on your CSS, you hide that #pull link when you add this:

a#pull {
    display: none;
}

So the button we need to click to toggle the menu is not there.

Just remove that CSS and you will see the "Menu" button and that the script is working fine.

If this is not the problem, please elaborate on what you are expecting to happen with the code you have here.

answered Nov 30, 2015 at 1:50

1cgonza

1,58810 silver badges20 bronze badges

1 Comment

minions Over a year ago

This is here because when you zoom out 600px +, the menu link appears on the left part of the browser. This css just eliminate it. sorry, code is under @media screen and (max-width:600px). It's nested in my scss file.

Mat. · Accepted Answer · 2015-11-30 01:54:52Z

0

i recreated your code and is working just fine the only error i corrected was on displayTime function

function displayTime () {
   var now = new Date();    
   var elt = $("#clock").text(now.toLocaleTimeString());        
   setTimeout (displayTime, 1000);
};

here is a demo http://plnkr.co/edit/6qNQMIQT4EhtqrlzUtGb?p=preview

edited Nov 30, 2015 at 1:54

answered Nov 30, 2015 at 1:47

Mat.

5512 silver badges11 bronze badges

5 Comments

minions Over a year ago

Thanks for the updated clock code. but my problem still persist. it's weird. everyone of my other function work but this one. However if i put it in a <script> under jquery script tag at the end of the html body, it work.

Mat. Over a year ago

@minions could you please clarify what exactly doesnt work because i checked your code and everything is fine.

minions Over a year ago

I'll try, when i click on Menu, it doesnt expand up or down like it should in jsFid and jsBin. It does nothing. does it have something to do with me having _header.scss, importing header into my main.scss and outputing it into my main.css??

Mat. Over a year ago

@minions you have no error in your console right???also try to add console.log("error") in top of you js file to check if the file beign loaded or you can check it in the source tab in dev tools.

minions Over a year ago

i think i found the problem. i try to copy my index.html js and css to a test folder. it work. everything work. I think prepros compile my main.js into main.dist-.js and so the function isn't in my main.js. UGH.

Collectives™ on Stack Overflow

Script works in html but not in javascript file

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related