We Keep Coding

jQuery isn't working to make navigation icons appear after scrolling past 1vh

I work in a web development environment that uses WordPress. The theme we use is ThemeCo's Pro.
I'm still learning javascript (so please forgive me if I'm really far off), and I'm trying to use jQuery to write a piece of code that will allow an element to appear after scrolling 1vh of the page. Can anyone help me understand why this isn't working? I can't tell if it's my code, or my theme might not be allowing it. The theme itself uses jQuery on the front end, but has a javascript file I may edit, but for the most part, the frontend editor is pretty reliable for code.
I'm using pieces from this question to help me write it, as well as referencing the jQuery library.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var minH = $(window).height() * 1;
if (scroll >= minH) {
$("#circle-menu").fadeTo(500, 1);
}
else {
$("#circle-menu").fadeTo(500, 0);
}
});

Just to make sure I understand what you're trying to do, I'll quickly reiterate what your code does: Basically, minH is supposed to be 1vh, and if scroll is >= minH, you want #circle-menu to fade in.
That being said, I think we have to look at a couple potential issues with the code above:
1vh is really just 1/100 of the viewport height, which can be calculated as:
// this is 1vh, which is what you're going for
$(window).height() / 100
As opposed to:
// this is 100vh
$(window).height() * 1
The second would be that you're using fadeTo. The difference between fadeIn/fadeOut and fadeTo is that fadeTo doesn't affect an element's display property. It only affects an element's opacity property. This means that if the theme's default value for the menu's display property is set to "none", fadeTo is not going to make it fade into sight. To get around this, in my opinion, it would be better to use fadeIn and fadeOut instead, especially since it doesn't seem like you're trying to control different levels of opacity (which is what fadeTo is really needed for).
I made a quick code snippet to demonstrate the above fixes.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var vh = $(window).height() / 100;
var minH = vh;
if (scroll >= minH) {
$("#circle-menu").fadeIn(500);
}
else {
$("#circle-menu").fadeOut(500);
}
});
p {
margin-top: 10vh;
height: 150vh;
border: 2px solid #666;
}
#circle-menu {
font-family: 'Segoe UI', verdana, sans-serif;
font-size: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
box-shadow: 1px 2px 3px rgba(50,50,50,0.1);
z-index: 1;
display: none;
background-color: steelblue;
color: white;
padding-left: 20px;
padding-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="circle-menu">Menu</div>
<p></p>

Javascript If/Else statement checking content:url

I'm having issues with figuring out the correct syntax to have my code check the value of one of my images with the id '#main'. My CSS has the image changing its src based on a media query using the content:url attribute. The reason I'm doing it this way is because I have about 5 different background images that trigger at different widths to provide a frame for my content and I need to be able to adjust the height of my ".text" div based on what image is being used as the frame currently.
I understand how to code all that, all I need is help with how to ask for the value correctly on the first one and I should be able to do the rest from there. Just to clarify once again, the issue is in the if/else statement; the code works without the if/else statement.
Here is what I have:
function updateHeight()
{
if ($("#main").css('content') === 'url("../images/main-bg2-landscape.png")') {
var div = $('.text');
var width = div.width();
div.css('height', width *.57);}
}
Just an example of the CSS in place:
#main {z-index: -1;
position: absolute;}
.text {position: absolute;
background-color: #FFFFFF;
background-position: top;
left: 11%;
width: 78%;
margin-top: 19%;
opacity: .4;}
#media only screen and (min-width: 1025px) {
#main {content:url(../images/main-bg2-landscape.png);}
.text {position: absolute;
background-color: #FFFFFF;
background-position: top;
left: 11%;
width: 78%;
margin-top: 19%;
opacity: .4;}
}
Thanks

The problem is most likely that the "url()" call in the css will result in the full path to the image in the HTML that is ultimately rendered. It will not be the relative path you place in the .css file
Probably something like /images/main-bg2-landscape.png in this case. If you inspect the image element in chrome or the browser of your choice you'll see the full path that ends up in your HTML.
A better option may be to do the comparison on the name of the file only so that you aren't dependent on the location of the image. Something like:
if ($("#main").css('content').indexOf("main-bg2-landscape.png") !=-1) {
var div = $('.text');
var width = div.width();
div.css('height', width *.57);}
}

jQuery - set calculated div width

I tried to set on my page posts as cards to one div with id="content" (like on G+).
#content {
margin-top: 120px;
margin-bottom: 70px;
margin-left: auto ;
margin-right: auto ;
height: auto;
}
.card {
height: 250px;
width: 500px;
margin: 10px;
float: left;
}
and I want to calculate how much .card I can fit into the screen.
So I tried this:
$(document).ready(function () {
"use strict";
var cardAmount = (Math.floor($(window).width/520))*520;
$("#content").css("width", cardAmount);
});
but the problem is(I think) the second parameter of .css must by string and it's not.

The problem is most likely that you need to add a unit to this number so the CSS engine knows what to do with it.
Also, there's another problem with your code - your not calling width function here: $(window).width. Please remember that width is a function from jQuery API, not DOM API parameter that you can simply get like this. So the whole fix is quite simple:
var cardAmount = Math.floor($(window).width() / 520);
$("#content").css("width", cardAmount + "px");
Here - see how it works in this fiddle

I guess you are missing the syntax with the px or % in the css .
$("#content").css("width", cardAmount+"%");#or
$("#content").css("width", cardAmount+"px");#or
$("#content").css("width", cardAmount+"em");

How do I detect the browser viewport to display desired content above the fold?

My problem is that I want specific content of my website to display above the fold on different viewport or screen resolutions. Is this done with Javascript/jQuery (is there a script that automatically does this?) that detects the browser viewport width and height or is it done through media queries?
I have an example of a website that does this:
http://www.themeskingdom.com/
No matter what screen size or viewport the user has, their desired content always appears above the fold. I want to accomplish the same sort of thing. Any help would be much appreciated.

Here is a pure css solution.
By using :
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Allows you to assign a height: 100%; to elements because they can base it off of the parent.
Strong recommendations, make sure to look into css calc() and box-sizing to make life a lot easier when working with percents.
box-sizing allows the padding, margin, border to all be calced inside of the tag and not outside of it.
CSS calc() like so, height: calc(100% - 70px);, is also a great tool to use but does not have the best mobile support. (calc should really only be used when you are mixing percents with pixel sizes)
This is the html:
<div class="mainCont">
<div class="mainHeader">
</div>
<div class="control">
</div>
</div>
Here is the css:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.mainCont {
position: relative;
width: 100%;
height: 100%;
}
.mainHeader {
width: 100%;
height: 75%;
background-image: url("http://www2.ca.uky.edu/forestry/maehrbearky/Forest%20trail.jpg");
background-size: cover;
background-position: center center;
}
.control {
position: relative;
height: 25%;
width: 100%;
background: tan;
}
Finally, a fiddle: Demo

I would go the media-queries way, and focus firstly on width. But if you must take height in consideration, you could use either media-queries or JavaScript to detect height, though JavaScript might be preferable in some cases (considering browser support, like IE7 and IE8).
#media (min-height: 640px) { ... }
#media (max-height: 640px) { ... }
I created this little snippet to load JS conditionally, but it might prove useful in other applications:
// calculate viewport width so that we can load js conditionally
function responsive(){
var scaffolding = 'desktop';
var w = parseInt($(window).innerWidth(), 10);
if (w > 0 && w < 768) { scaffolding = 'phone'; }
if (w >= 768 && w <= 980) { scaffolding = 'tablet'; }
if (w > 980) { scaffolding = 'desktop'; }
return scaffolding;
}
if ( responsive() == phone) {
// do stuff only on phones
}
if ( responsive() != phone) {
// do stuff everywhere else but phones
}
An important concept behind keeping stuff on screen regardless of resolution, is that one may do it with positioning (which might involve positioned parents) or by taking away elements that are not prioritized on small viewports - letting the important elements stay. This can be done with simple media-queries, that either show or hide certain elements depending on resolution.

Simply use a div that is has background-color: transparent, and "border-bottom: 1px solid gray" and put your content in it.

How to resize a div to clients viewport height?

Ok, so i want to have a series of divs which are the exact width and height of the user's browser window, regardless of the screen size. I can easily make the divs stretch horizontally with "width: 100%;" but i cant work out how to make the height stretch itself. I am guessing that i need to use some bit of javascript to judge the height, and then another piece to resize the seperate divs. Unfortunately I am a complete javascript n00b and after two hours of seemingly fruitless searching and coming up with about 100 "solutions" this was as far as id gotten (Im sure that at some point I have probably been closer to the answer):
var viewportHeight = "height:" + document.documentElement.clientHeight;
getElementById('section-1').setAttribute('style', viewportHeight);
<div class="section" id="section-1"></div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
edit:
ah i should be more clear, im attempting to have all three divs take up the entire screen, so you have to scroll down to see each one - almost like seperate slides. The idea is that each one takes up the entire screen so you cant see the next section until you scroll down, rather than having three divs which take up a third of the screen.

If you haven't already tried it, you'll want to look at parent:child inheritance of elements within the DOM by way of using CSS.
What I want to STRESS is that everyone giving you JS hacks to accomplish this is not only providing you with overkill (YOU did ask for a JavaScript solution, so they gave it to you!), but it's also a deviation from standards. HTML is for structure, CSS is for presentation, and JavaScript is for behavioral aspects... setting a div to the width of the viewport on load is a PRESENTATION aspect and should be done in CSS... not JavaScript. If you were trying to change the width based on events or user interaction, then yes JavaScript is your friend... but stick with just HTML and CSS for now.
The trick is that most elements have an undefined height - and height is later defined by the content that the element holds.
If you want to 'trick' an element into having a height other than what it wants to default to, you'll have to explicitly define it. Since you want to inherit your height from the viewport, you'll have to define the height at the top and bring it down...
You might be in luck and can avoid JavaScript altogether (unnecessary). Just use CSS.
Try something like:
html, body {
height: 100%;
width: 100%;
}
Now, when you try to set your div's later on, specify width: 100% and the height gets inherited from the html --> body --> div.
Try that and see if that solves your problem - if not, point us to a website, a pastebin, or a SOMETHING with code in it that we can just show you how to do it (whereas what you posted for code was an attempt in JavaScript which is only 1 part of the code - post the full thing either to a server or temp site like pastebin).
Here is some sample code I wrote (tested in Chromium):
The HTML:
<html>
<head>
<title>Test Divs at 100%</title>
<link rel="stylesheet" type="text/css" href="divtest.css"
</head>
<body>
<div class="test1">aef</div>
<div class="test2">aef</div>
<div class="test3">aef</div>
</body>
</html>
The CSS:
html, body {
width: 100%;
height: 100%;
background-color: #793434;
padding: 0;
margin: 0;
}
div {
height: 100%;
width: 100%;
}
.test1 {
background-color: #E3C42E;
}
.test2 {
background-color: #B42626;
}
.test3 {
background-color: #19D443
}

try this
div#welcome {
height: 100vh;
background: black;
color: white;
}
div#projects {
height: 100vh;
background: yellow;
}
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
it should work for you, but little support in IE

A bit of jQuery should do it:
$(document).ready(function() {
var window_height = $(window).height();
$('#section-1").height(window_height);
});
And if you want to keep 100% height on window resize:
$(document).ready(function() {
function viewport_height() {
var window_height = $(window).height();
$('#section-1").height(window_height);
}
viewport_height();
$(window).resize(function() {
viewport_height();
});
});

try this
window.onload = init;
function init()
{
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;";
document.getElementById('section-1').setAttribute('style', viewportHeight);
}

Here is a script free solution, just CSS. This assumes that the divs are directly in the body element or a parent with position absolute and the parent has no padding.
#section-1 {
position: absolute;
height: 100%;
width: 100%;
background: #ff0000;
}
#section-2 {
position: absolute;
width: 100%;
top: 100%;
height: 100%;
background: #00ff00;
}
#section-3 {
position: absolute;
width: 100%;
top: 200%;
height: 100%;
background: #0000ff;
}
See fiddle: http://jsfiddle.net/QtvU5/1/