Develop Reference

How do I make auto fontSize in Javascript?

I was trying to use the same function of fontSize() in mobile view to make it responsive but I don't know to do it. This is what I'm using in window view
document.getElementById('hakdog').onload = function () {func()};
function func() {
var str = document.getElementById("voter").innerHTML;
var a = str.length;
if(a >= 40) {
voter.style.fontSize = "18px";
} else if(a >=30) {
voter.style.fontSize = "22px";
} else {
voter.style.fontSize = "27px";
}
}
Is there any same function for mobile view? I only know some function but I know its not responsive
$(document).ready(function(){
if($(window).width() < 480) {
$('h1').css('font-size','10px');
$('h2').css('font-size','8px');
$('h3').css('font-size','6px');
$('h4').css('font-size','4px');
}
});
EDIT
I was trying to make it responsive using java just like on the first code I given, normal .css is not gonna work since its only going to give for h1, h2, h3, etc. I was pointing out that I wanted to make the responsive if the full name reached 40 letters then the fontSize would be 18px same with other functions given
EDIT 5:30pm MARCH 29
This is what I tried so far but didn't work as what I expected.
document.getElementById('hakdog').onload = function () {func()};
function func() {
$(document).ready(function() {
function resizes() {
if($(window).width() < 480) {
var str = document.getElementById("voter").innerHTML;
var a = str.length;
if(a >= 40) {
voter.style.fontSize = "9px";
} else if(a >=30) {
voter.style.fontSize = "10px";
} else {
voter.style.fontSize = "15px";
}
}
}
resizes();
$(window).resize(resizes);
})
}

Edit: Made changes to include the font size based on the length of the content.
This should work. You can check this out on the full page in the below code snippet.
$(document).ready(function() {
function resizeMe() {
if ($(window).width() < 480) {
if ($("#name").text().length < 5) {
$('h1').css('font-size', '46px');
} else {
$('h1').css('font-size', '10px');
}
$('h2').css('font-size', '8px');
$('h3').css('font-size', '6px');
$('h4').css('font-size', '4px');
} else {
$('h1').css('font-size', '20px');
$('h2').css('font-size', '18px');
$('h3').css('font-size', '16px');
$('h4').css('font-size', '14px');
}
}
resizeMe();
$(window).resize(resizeMe);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="name">Helo</h1>
<h2>Yes</h2>
<h3>Nooooooooooooooooooooooooooo</h3>
<h4>okkkkkk</h4>

Do you try to change 'px' to 'rem', 'rem' resize in relation to the size of the screen.

This is what i meant for auto sizing for every device
var wid = $(window).width();
if(wid < 320) {
var str = document.getElementById("voter").innerHTML
var a = str.length;
if(a >= 40) {
voter.style.fontSize = "9px";
} else if(a >= 25) {
voter.style.fontSize = "11px";
} else {
voter.style.fontSize = "15px";
}
}
Thanks for everyone commented out!

Need help about this jQuery code

This code works perfectly but I need it to work when I open my browser. Also when I resize my browser to have mobile menu both functions work hover and toggle.
$(window).on('resize', function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
});

My best approach will be replacing the code with:
var reszFn = function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
};
$(document).on('ready', reszFn);
$(window).on('resize', reszFn);

Just trigger the resize function
$(window).on('resize', function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
}).resize();

jQuery Hide/Show Within If/Else Statement Not Working

I'm working on a quick jQuery slideshow and I'm having some issues. I have a variable that increases or decreases when you press the navigation buttons, and the code is supposed to show or hide the images based on the number. It doesn't appear to work however, only showing img1 and not displaying any of the other images. I have verified that the currentImage variable is changing properly. Please let me know what I'm doing wrong.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var currentImage = 0;
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
});
if(currentImage == 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(currentImage == 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(currentImage == 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
});
</script>

You only run the If/Then/Else statements once, on document load, you need to rerun them after the click events:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var currentImage = 0;
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
refreshImg();
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
refreshImg();
});
function refreshImg(){
if(currentImage == 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(currentImage == 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(currentImage == 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
}
});
</script>

The code showing or hiding the images should be executed when the button is clicked. At the moment it is only hiding or showing the button on document ready.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var currentImage = 0;
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
ShowOrHideImage();
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
ShowOrHideImage();
});
function ShowOrHideImage() {
if(currentImage == 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(currentImage == 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(currentImage == 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
}
});
</script>

Your conditional statements are running as soon as the document is ready, at that time the value of currentImage is 0. You can stick it into a function and call it every time there's a click
var toggleImages = function(current) {
if(current== 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(current== 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(current== 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
};
$(document).ready(function(){
var currentImage = 0;
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
toggleImages(currentImage);
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
toggleImages(currentImage);
});
});

your code should be:
$(document).ready(function(){
currentImage = 0;
updateImgae(currentImage);
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
updateImgae(currentImage);
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
updateImgae(currentImage);
});
function updateImgae(currentImage){
if(currentImage == 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(currentImage == 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(currentImage == 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
}
});

a much simpler version - get the source of the image, increment it or decrement it and replace the image with the new source. requires the images to be named 1.jpg, 2.jpg and 3.jpg etc (and placed within the correct folder - I have used images/slideshow/1.jpg etc).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<button type="button" value = "-1">Previous Image</button>
<img id="slideshowImage" src="images/slideshow/1.jpg" alt="Image 1" height="100" width="100"/>
<button type="button" value = "+1">Next Image</button>
<script>
$(":button").click(function() {
var imageSrc=$('#slideshowImage').attr('src').split('/');
var count = parseFloat(imageSrc[2]);
var newSrc = count+parseFloat(($(this).val()))
if(newSrc>3){newSrc=1}else{if(newSrc==0){newSrc=3}};
$('#slideshowImage').attr('src','images/slideshow/'+newSrc+'.jpg').attr('alt','Image '+newSrc)
});
</script>
</body>
</html>
Essentially on the click of either button, a function is called that determines the image source, splits it to get the specific image number, increments or decrements that number based on the button pressed, and sets the new image srouce and alt attributes to the new count. The benefit of this approach apart from the small amount of code, is that it is easy to scale and add more pictures to the slideshow in the future. Hope this helps, gavgrif

Combining 2 JavaScript .scroll functions

var stickyTopbar = $('#mainHeader').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < stickyTopbar) {
$('#mainHeader').addClass('topped');
}
else {
$('#mainHeader').removeClass('topped');
}
});
var stickyTopbar2 = $('#project-content').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < stickyTopbar2) {
$('#close-bar').addClass('off-white');
}
else {
$('#close-bar').removeClass('off-white');
}
});
At the moment just the "stickyTopbar" is working. The "stickyTopbar2" doesn't. I have a feeling I should combine both?!

Try this:
var stickyTopbar = $('#mainHeader').offset().top;
var stickyTopbar2 = $('#project-content').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < stickyTopbar) {
$('#mainHeader').addClass('topped');
}
else {
$('#mainHeader').removeClass('topped');
};
if ($(window).scrollTop() < stickyTopbar2) {
$('#close-bar').addClass('off-white');
}
else {
$('#close-bar').removeClass('off-white');
}
});
jsfiddle: https://jsfiddle.net/vhwuvhrd/1/

javascript to jquery

I am trying to update my javascript to be jquery.
Here is the javascript (this is working correctly)
<script type="text/javascript">
function getWindowHeight() {
var windowHeight = 0;
if (typeof (window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById('content')
var contentHeight = contentElement.offsetHeight;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
contentElement.style.visibility = 'visible';
}
else {
contentElement.style.position = 'static';
contentElement.style.visibility = 'visible';
}
}
}
}
window.onload = function () {
setContent();
}
window.onresize = function () {
setContent();
}
</script>
Here is the jquery (this just returns a blank screen without errors)
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getWindowHeight() {
var windowHeight = 0;
if (typeof (window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if ($.documentElement && $.documentElement.clientHeight) {
windowHeight = $.documentElement.clientHeight;
}
else {
if ($.body && $.body.clientHeight) {
windowHeight = $.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if ($) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = $('content')
var contentHeight = contentElement.offsetHeight;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
contentElement.style.visibility = 'visible';
}
else {
contentElement.style.position = 'static';
contentElement.style.visibility = 'visible';
}
}
}
}
$(document).ready= function () {
setContent();
}
$(document).onresize = function () {
setContent();
}
</script>

Your function bindings at the end are a bit off, they should look like this:
$(setContent);
$(window).resize(setContent);
This will lead to other errors though, $ isn't a replacement for document, overall I think this is what you're looking for:
function setContent() {
var windowHeight = $(window).height();
if (windowHeight > 0) {
var contentHeight = $('#content').height();
if (windowHeight - contentHeight > 0) {
$('#content').css({ position: 'relative',
top: ((windowHeight / 2) - (contentHeight / 2)) + 'px',
visibility: 'visible' });
}
else {
$('#content').css({ position: 'static',
visibility: 'visible' });
}
}
}
$(setContent);
$(window).resize(setContent);​
You can give it a try here, a few notes on this compared to the code in the question:
document.getElementById('content') is $('#content'), notice the # for an #ID selector.
$(window).height() uses .height() to take care of the cross browser/various case heights.
You can't replace document with $, they're very different things :)
.css() takes an object, so you can shorten you style setting above.

try this code..
$(function(){
var windowHeight = $(window).height();
var content = $('content');
if (windowHeight > 0) {
if (windowHeight - content.height() > 0) {
content.css({'position':'relative','top':((windowHeight/2) - (content.height()/2) + 'px','visibility':'visible' });
}else{
content.css({'position':'static','visibility':'visible'});
}
}
});