We Keep Coding

Javascript for twitter-bootstrap's fixed navbar doesn't work when linking multiple pages?

website in question
OK, i don't understand javascript or jquery so, i pose this question to you guys.
I am working on courses from FreeCodeCamp and i created a one page site that worked well in codepen. but, since i already owned a domain/hosting i moved it over (and with some extra work got it to work properly).
My issue currently is with the navbar.
On the index.html it works properly. (when targeting jumplinks on the index.html page) it scrolls down to it and gives enough space above the h1 tags so they don't get behind the navbar.
I wanted to add another link to my page for my resume (which wouldn't work with the current javascript) so i had to add a class to each of the links in my navbar that were targeting ids on the index page, and updated my javascript from it targeting all the a tags to just the a tags with the class=jumps.
So, i thought my issue was fixed, until i went to my second page xp.html.
i changed the links in the navbar to be <a href="index.html#about> so that it would (hopefully) go to the index page and then jump down to the right section of the page with the jump link. but, that didn't work. it would just stay on my xp page.
So, i took the code out of the main.js file and into a index.js file, and linked it only to the index page. which allows me to now navigate properly between my two pages and the jump links, but if you are on the xp page and you click one of the jump link links, it now makes the h1 text go behind the navbar.
I hope this explanation is good?
So, i'm needing help to fix the current issue of my headers going behind my navbar when coming from my xp page (or other pages i add in the future)
I would really appreciate help with this!

using css and jQuery(index.js)
add a custom css in you main.css .pad-top{ padding-top:5%;} and add this in your html like this see the class
<div id="webfolio" class="row c-wrapper smooth nomargin pad-top">
and in your jQuery(index.js) replace the .top - 80 with 5
And If you use only jQuery(index.js) (If you want you can short this Query but I just share the full for understanding )
function anchorScroll(fragment) {
"use strict";
var amount, ttarget;
amount = $('nav').height();
ttarget = $('#' + fragment);
$('html,body').animate({ scrollTop: ttarget.offset().top - amount }, 1000);
return false;
}
function outsideToHash() {
"use strict";
var fragment;
if (window.location.hash) {
fragment = window.location.hash.substring(1);
anchorScroll(fragment);
}
}
function insideToHash(nnode) {
"use strict";
var fragment;
fragment = $(nnode).attr('href').substring(1);
anchorScroll(fragment);
}
$(document).ready(function () {
"use strict";
$("a[href^='#']").bind('click', function () {insideToHash(this); });
outsideToHash();
});

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/

Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});

Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

how to scroll to an anchor point with smooth animation adobe edge

I can't find this seemingly simple answer. I am trying to make an animated button on my site scroll to an anchor point on my site(it's just one huge page)
The code I currently have in the code snippet box in edge doesn't work. It's kind of frustrating because with edge you're not entirely sure where your code is being thrown into the end result.
// insert code for mouse click here
window.scrollTo(0,0);
//want it to scroll to #Main
most of the code in edge starts you off with:
sys.someAction()
Here's my site if you want to look at what I'm trying to do:
www.daniellachman.com
Thanks!
Edit: Here is the full code snippet, provided with the code supplied below:
//Edge binding end
//CUSTOM CODE FROM Monty82
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
//Edge binding end
//Original Mouse Clicking Function Provided by Edge
Symbol.bindElementAction(compId, symbolName, "${_newlogoheader}", "click", function(sym, e) {
// insert code for mouse click here
//Stuff I added to call custom function above
sym.scrollToTag("main")
});
It didn't work. But I feel like I'm on the right track.
www.daniellachman.com
If anyone knows how to look at the javascript for the menu nav buttons "about" "contact" and see what that is referencing for the scroll. I'd love to hear it.

This function in JavaScript/jQuery may help you:
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
The parameter is the name (not the id but the name) of the anchor to which you want to scroll.
Notice that the function is designed for vertical scrolling, your site seems to require vertical and horizontal, so you may need to use scrollLeft too.

Converting existing jQuery from click function to auto display with delay

Currently, homepage text is only displayed via a click function which initiates a slide out.
What I would like to do, is to change this so that it doesn't require a click to display. I'm wanting the text to display (fade in) after about 3 seconds of the page loading.
This is what I have at present:-
$('.introbox span').replaceWith(function(){
return '\
<div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">\
\
<div class="tipVisible">\
<div class="tipIcon"><div class="plusIcon"></div></div>\
<span class="tipTitle">'+$(this).attr('title')+'</span>\
</div>\
\
<div class="slideOutContent">\
<p>'+$(this).html()+'</p>\
</div>\
</div>';
});
It is when the 'plusIcon' is clicked, that the text slides out and is visible.
The listen out for the click function is...
$('.tipVisible').bind('click',function(){
var tip = $(this).parent();
So I'm presuming this is where I need to convert the necessary to use autoload with perhaps a setDelay and FadeIn although I'm not 100%.
Please could someone advise how this can be altered to not use a click but auto display after delay? Thanks in advance.
Attempted to add code in jsfiddle if it is easier to see what I'm trying to do - thanks.

Pretty simple: make a function with what you do at .tipVisible.click and then set a window.setTimeout(yourFunction, 3000);
#Comment: Your JS is already pretty complex, I probably would reorganize and recode everything so I can just give you a hint how it could be implemented (didn't work right away when I added it in your fiddle, but I'm a bit too lazy to find the problem there).
var animate = function(obj) {
var tip = obj ? $(obj).parent() : $(".tipVisible").parent();
/* If a open/close animation is in progress, exit the function */
if (tip.is(':animated')) return false;
if (tip.find('.slideOutContent').css('display') == 'none') {
tip.trigger('slideOut');
}
else tip.trigger('slideIn');
}
window.setTimeout( animate, 3000);
$('.tipVisible').bind('click', function() {
animate(this);
});
EDIT: Well this is doing something at least, now you have to figure out what needs to be done when and how ;)
PS: You used jQuery but loaded Mootools framework... Mootools doesn't know $(document).ready()

html background ad

I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?

Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});

In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.