We Keep Coding

Making bootstrap menu visible on load

I don't know much about Boostrap and I tried finding the answer online but without success.
I'm building a website for the little company I work for based the the following template:
https://dcrazed.com/bent-app-landing-page-template/
I've customized the texte a little bit of the layouts but my boss wants the menu bar to be always visible. In the template the bar wil appear has you start scrolling down and always be hidden on the home page. I have managed to make it appear and stay on after the first scroll by changing the If conditions of the script.
//MENU APPEAR AND HIDE
$(document).ready(function() {
"use strict";
$(window).scroll(function() {
"use strict";
if ($(window).scrollTop() > 1000) {
$(".navbar").css({
'margin-top': '0px',
'opacity': '1'
})
$(".navbar-nav>li>a").css({
'padding-top': '15px'
});
$(".navbar-brand img").css({
'height': '35px'
});
$(".navbar-brand img").css({
'padding-top': '0px'
});
$(".navbar-default").css({
'background-color': 'rgba(59, 59, 59, 0.7)'
});
} else {
$(".navbar").css({
'margin-top': '0px',
'opacity': '1'
})
$(".navbar-nav>li>a").css({
'padding-top': '15px'
});
$(".navbar-brand img").css({
'height': '35px'
});
$(".navbar-brand img").css({
'padding-top': '0px'
});
$(".navbar-default").css({
'background-color': 'rgba(59, 59, 59, 0.7)'
});
}
});
});
Even when changing the conditions of the If it still needs a least one scroll to appear.

If you add trigger('scroll') you should be able to see it immediately.
$(window).scroll(function(){
// some code
}).trigger('scroll')

Option 1 (JS):
If you still want to use js, you could wrap your logic/method into a function like resizeHandler, then call it on page load resizeHandler();
OR as #a.barbieri said use .trigger('scroll')
$(document).ready(function() {
"use strict";
//scroll handler
$(window).scroll(resizeHandler);
//init
resizeHandler();
function resizeHandler(){
if ($(window).scrollTop() > 1000) {
$(".navbar").css({
'margin-top': '0px',
'opacity': '1'
})
$(".navbar-nav>li>a").css({
'padding-top': '15px'
});
$(".navbar-brand img").css({
'height': '35px'
});
$(".navbar-brand img").css({
'padding-top': '0px'
});
$(".navbar-default").css({
'background-color': 'rgba(59, 59, 59, 0.7)'
});
} else {
$(".navbar").css({
'margin-top': '0px',
'opacity': '1'
})
$(".navbar-nav>li>a").css({
'padding-top': '15px'
});
$(".navbar-brand img").css({
'height': '35px'
});
$(".navbar-brand img").css({
'padding-top': '0px'
});
$(".navbar-default").css({
'background-color': 'rgba(59, 59, 59, 0.7)'
});
}
}
});
Option 2 (CSS):
use a media query to determine screen size to show and hide.
Using media queries
A media query consists of an optional media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
REF: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

jQuery -Function not getting called correctly

Okay this problem is pretty straight forward. I'm trying to call a this tele_in function that I have but I can't get it to run. I'm not sure what the heck I have to do. I dropped an alert in the area where I tried calling the function and it worked... What am I missing? Here is the code: The function I'm trying to call is right at the top there called "tele_in". The place I'm trying to call it has been commented out down towards the bottom. What am I doing wrong here?
Var SpriteVis;
jQuery(document).ready(function tele_in($) { // function to make sprite appear.
$("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/test-sprite.png)',
'height': '120px',
'width': '96px'
});
}, 80);
});
SpriteVis = true;
});
jQuery(function ($) {
$(window).scroll(function () {
if (SpriteVis == true) { //if Sprite is present on screen, run the animation sequence to make it disappear.
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/Teleport-Sprite.png)',
'height': '188px',
'width': '52px',
'left': '330px'
});
$("#sprite").animate({bottom: '2000px'}, 400, 'linear', function () {
});
}), 80;
SpriteVis = false;
} else {
//I need to call the "tele_in" function here .
}
});
});

You'll have to pull that function declaration out of the jQuery call:
function tele_in($) { // function to make sprite appear.
$("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/test-sprite.png)',
'height': '120px',
'width': '96px'
});
}, 80);
});
SpriteVis = true;
});
Query(document).ready(tele_in);
A function created with a function instantiation expression (as in your case) does not have its name exported to the local scope. The name is only visible from inside the function.
By moving that to a function declaration statement, you create a symbol in the containing scope that is visible throughout.
Note that because of the way you've defined that function, you'll have to call it like this:
tele_in($);
or else the value of $ in the function will be undefined.

You have to declare the function outside the jquery ready handler:
function tele_in () {
// ...
}
jQuery(document).ready(tele_in);
$ is available in the global scope and needn't be passed as an argument to tele_in (unless you use multiple jquery objects, i have no experience with that scenario, not even whether it's viable).

Since nothing is going to happen until tele_in is defined at document ready, just combine everything:
Var SpriteVis;
jQuery(document).ready(
function tele_in() { // function to make sprite appear.
$("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/test-sprite.png)',
'height': '120px',
'width': '96px'
});
}, 80);
});
SpriteVis = true;
$(window).scroll(function () {
if (SpriteVis == true) { //if Sprite is present on screen, run the animation sequence to make it disappear.
$("#sprite").css({
'background-image': 'url(/images/Warp-Sprite.png)',
'height': '50px',
'width': '90px',
'left': '300px',
'bottom': '80px'
});
setTimeout(function () {
$("#sprite").css({
'background-image': 'url(/images/Teleport-Sprite.png)',
'height': '188px',
'width': '52px',
'left': '330px'
});
$("#sprite").animate({bottom: '2000px'}, 400, 'linear', function () {
});
}), 80;
SpriteVis = false;
} else {
tele_in();
}
});
});

jquery using same animation on many elements, how to do best?

The animate functions does thre times exactly the same thing.
So how can I do this while writing .animate(.. only once?
There should be an easy way but I couldn't figure out.
This is what I've got: see fiddle
$('.button').on('click',function(){
$('header').animate({
'left': '315px'
}, 500, function() {
});
$('main').animate({
'left': '315px'
}, 500, function() {
});
$('footer').animate({
'left': '315px'
}, 500, function() {
});
});

By using comma separated multiple selectors. This way:
$('header,main,footer').animate({
'left': '315px'
}, 500, function() {
});
Working Fiddle

Open Jquery Div on another page "Hash"

I want to open a div on a different page by using a link.
The links look like this: grid.html # project1 / 2 / 3 / 4 etc..
The code looks like this on the target page:
$(function(){
// Thumbs
$('#thumbs a').hover(function(){
$(this).find('span').stop(true, true).animate({'top': '90px'}, 300)
}, function(){
$(this).find('img').stop(true, true).animate({}, 300);
$(this).find('span').stop(true, true).animate({'top': '124px'}, 300)
}) .bind('click', function(){
$('#content .project').stop(true, true).fadeOut(500);
$($(this).attr('href')).stop(true, true).css('left', 0).fadeIn(500);
$('#content').animate({'min-height' : '450px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '-2px' , 'paddingBottom' : '130px'}, 500);
$('#thumbs').animate({'marginTop' : '30px'}, 500);
$('html,body').animate({scrollTop:0}, 500);
return false;
});
$(".close").click(function() {
$('#content .project').fadeOut(500);
$('#content').animate({'min-height' : '0px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '0px' , 'paddingBottom' : '0px'}, 500);
});
// Carousel
$('.carousel').jcarousel({
scroll: 1,
animation: 800,
easing: 'easeOutQuart',
buttonNextHTML: '<div><div></div></div>',
buttonPrevHTML: '<div><div></div></div>',
initCallback: initCarousel
});
});

var hash = window.location.hash;
var yourDiv = $('#content .'+hash);

How can I add an inline style in jQuery?

Is it possible to style inline the div .trigger on the following code and set its display to block?
$('.trigger').toggle(function() {
$('.greendiv').animate({'height': '300px', 'width': '400px'}, 200);
}, function(){
$('.greendiv').animate({'height': '200px', 'width': '200px'}, 200);
});

You can simply use $('.trigger').css('display', 'block');
if you want to implement it inside your toggle function you can do something like this :
$('.trigger').toggle(function() {
$(this).css('display', 'block');
$('.greendiv').animate({'height': '300px', 'width': '400px'}, 200);
}, function(){
$('.greendiv').animate({'height': '200px', 'width': '200px'}, 200);
$(this).css('display', 'none');
});