coolio83000 coolio83000 - 2 months ago 8
HTML Question

Regroup all the javascript function in one

How to regroup all these

javascript
functions in one,

Instead of to have a lots of
<script type="text/javascript"></script>


I want to have only one where I will find all my functions.

Here is all functions:

<script type="text/javascript">
function openNav() { document.getElementById("myNav").style.cssText = "height:100%"; document.body.style.overflow = "hidden";}
function closeNav() { document.getElementById("myNav").style.cssText = "height:0%"; document.body.style.overflow = "scroll";}
</script>

<script type="text/javascript">
$(document).ready(function(){
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 1150) {
$('#fixedbar').fadeIn(100);
}
else if(scrolltop <= 1150) {
$('#fixedbar').fadeOut(100);
}
});
});
</script>

<script type="text/javascript">
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
</script>

<script type="text/javascript">
$("#voirmoins").on("click", function() {
$(this).toggleClass("on");
});
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("fast");
});
});
</script>


Here is what I want:

<script type="text/javascript">
function openNav() { document.getElementById("myNav").style.cssText = "height:100%"; document.body.style.overflow = "hidden";}
function closeNav() { document.getElementById("myNav").style.cssText = "height:0%"; document.body.style.overflow = "scroll";}

$(document).ready(function(){
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 1150) {
$('#fixedbar').fadeIn(100);
}
else if(scrolltop <= 1150) {
$('#fixedbar').fadeOut(100);
}
});
});

$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});

$("#voirmoins").on("click", function() {
$(this).toggleClass("on");
});
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("fast");
});
});
</script>

Answer

There are multiple tools that will allow you to check the syntax of your JavaScript code. Most commonly known as "lints", googling javascript lint will surely help you on your way.

Now to quickly check the syntactical correctness of your code, press F12 in google chrome to open the developer console, paste your js code in here and press enter and it should tell you if there are any syntax errors.

You had two $(document).ready(...) statements.

Here, put this between your script brackets:

function openNav()  {
    document.getElementById("myNav").style.cssText = "height:100%";
    document.body.style.overflow = "hidden";
}
function closeNav() {
    document.getElementById("myNav").style.cssText = "height:0%";
    document.body.style.overflow = "scroll";
}

$(document).ready(function(){
    $(window).on('scroll',function() {
        var scrolltop = $(this).scrollTop();
        if(scrolltop >= 1150) {
            $('#fixedbar').fadeIn(100);
        }
        else if(scrolltop <= 1150) {
            $('#fixedbar').fadeOut(100);
        }
    });

    $(".flip").click(function(){
        $(".panel").slideToggle("fast");
    });
});

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

$("#voirmoins").on("click", function() {
    $(this).toggleClass("on");
});
Comments