Develop Reference

How could I place a responsive, relative position button under JS typewriter text?

I'm new to web dev and am encountering an issue - I have text with a simple JS typewriter effect, and below it is a button with relative position (for responsiveness. Absolute position technically solved the problem on desktop, but on smaller screens, the button ran over the typewriter words.)
When the page first loads, the button jumps around because at first it has nothing to be relative to. Then when the typewriter text appears, the button jumps down really fast. It happens really quickly as soon as the page loads.
Thanks for any insight!
var quoteArray = ["My name is Sam, nice to meet you."];
var textPosition = 0;
// speed in milliseconds
var speed = 50;
typewriter = () => {
document.querySelector("#typewriter").innerHTML = quoteArray[0].substring(0, textPosition);
if(textPosition++ != quoteArray[0].length)
setTimeout(typewriter, speed);
}
window.addEventListener("load", typewriter)
a.linky {
display:inline-block;
padding:0.35em 1.2em;
border:0.1em solid black;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
font-weight:300;
color: black;
text-align:center;
transition: all 0.2s;
}
a.linky:hover {
background-color: #555;
}
a.linky:active {
background-color: black;
}
.aboutbuttonposition
{
text-align: center;
/*Made position relative to be responsive. */
position: relative;
padding-top: 30px;
}
/*Styling typewriter sentence.*/
#typewriter
{
font-size: 40px;
text-align: center;
}
<!--Has corresponding javascript to create typewriter effect-->
<p id="typewriter"></p>
<!-- Messy button div -->
<div class="aboutbuttonposition">
About Me
</div>

Your problem is not clear...
On absolute mood, you can add media queries to apply different styles on different screened devices.
like:
// Small Screens.
#media (max-width: 767px) {
// YOur CSS codes goes here...
}
// Medium Screens.
#media (min-width: 767px) and (max-width: 1439px) {
// YOur CSS codes goes here...
}
// Desktop Screens.
#media (min-width: 1440px) {
// YOur CSS codes goes here...
}

Applying display:none in mobile/tablet view in html/css

I have a fiddle which is working perfectly fine in desktop view. On desktop view, it is working in a way that on click of any product item (as shown in the screenshot below), the description box gets displayed at the bottom.
In mobile view I am seeing all the description boxes gets displayed at the bottom without being clicked at the top.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
At the moment. I am seeing all the the boxes getting display at the bottom even it is not clicked.
I have feeling that I am using display: inline-block !important which is overriding display:none from the html
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
I am wondering what changes I should make in the CSS codes so that I can apply display: inline-block !important only to one product item instead of all items.

Just add this jquery for all the sections
$(window).resize(function(){
if ($(window).width() <= 767) {
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add this condition for all sections
}
});
And remove this css :
#media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label {
display: inline-block !important;
}
}

You are setting all the boxes in the bottom to display:none except for the one thats active in your click handler. In that case you don't need the below css at all. I tried your fiddle and removed this css style and it works as you need in screen widths less than 767px as well
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}

When you use !important in your css (external or internal) it overrides the inline style. So though you are setting it to display:none inline using jQuery , the internal style with !important overrides the inline style.
You can add a class like 'active-category' to the div thats selected instead of setting the display:inline-block and a class 'default-category' to all the default ones instead of setting display:none every time. And then target the active-category class in your css and set the style
eg.
#media only screen and (max-width: 767px) {
div.active-category {
display: inline-block;
}
div.default-category {
display: none;
}
}

Just add jquery as below:
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add for all items
Try if it works.
Hope this is what you want.

creating my own image gallery grid using jquery

I'm stuck on a problem, it's creating an image grid and I can't figure out how to start laying out items on the next line when I reach the end of the container. I'm aware I could use masonry but the problem with that is my gallery needs to be full width and with masonry, you get that 1px whitespace issue masonry 1px issue. and just using regular floats also won't work for me because my items have varying heights. any thoughts on how I could tackle this issue would be awesome
function layout() {
var itemPos = 0;
var itemHeight = [];
$('.gallery__item-list .gallery__item').each(function(index) {
itemHeight.push($(this).height());
$(this).css({
transform: "translate3d(" + itemPos + "px,0px,0)"
});
itemPos += $(this).width();
});
}
css
.gallery__item,.grid-sizer {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#media screen and (min-width: 400px) {
.gallery__item,.grid-sizer {
width: 50%;} }
#media screen and (min-width: 600px) {
.gallery__item,.grid-sizer {
width: 33.333%;}
.gallery__item--body-posts{
margin-bottom: 0px;
} }
#media screen and (min-width: 1000px) {
.gallery__item,.grid-sizer {
width: 25%;
} }

You can set image width in percentage if that allows in your case. Suppose you have three images in a row you can set width:33% which will take the full width of a row. So according to count you should change the width of images. When you get first three images in row, next three will come in the second row.
I hope this solves your problem

Responsive menu disappearing on window resize

I'm a bit of a novice with script but have been trying to find a solution that fits my responsive menu solution. I've seen other people with a similar issue but they seem to be using a different method for their menus.
Here is my code:
HTML:
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast');
} else {
$(e).slideDown('fast');
}
};
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
}
<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a>
<div id="menu-items">
Link
Link
Link
Link
Link
</div>
<!--#menu-items-->
The menu works great but the main issue I am having is that when the user decreases the window size to show the responsive menu toggle, then uses the toggle to open and then close the menu, the menu never returns to the normal view when the window is resized back to desktop view.
Oddly it does return if the user leaves the responsive menu open in mobile view and resizes back to desktop, but not if the user closes the menu.
The only other thing I'd love to work on this menu is if the user clicks anywhere else in the page but the menu, the menu closes. At the moment the user has to click the Menu toggle link to close it.
Any help would be really appreciated!!!
Thanks so much.

Try this :
#media only screen and (min-width: 680px) {
#menu-items {
display: block
}
.mobile-menu {
display: none;
cursor: pointer;
}
}

Using slideUp() and slideDown() here is a little tricky because they set/remove the inline style 'display: none;' which isn't removed when you resize the window. That's why the menu isn't reappearing: the inline style hiding the menu is still active.
What you need to do is use classes to do handle the display at different device widths and add hooks to slideUp's complete callback: (JSFiddle)
CSS:
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
.collapsed {
display: none;
}
}
#media only screen and (min-width: 681px) {
.collapsed {
display:block;
}
}
JS:
function toggle_collapsed_class(e) {
$(e).css('display', '').addClass('collapsed');
};
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast', function(){
toggle_collapsed_class(e)
});
} else {
$(e).removeClass('collapsed').slideDown('fast');
}
};

Responsive Nav Javascript

I am trying to make a responsive nav. I am using some jquery but I don't know javascript very well. I would like the toggle to take place when the window is a certain width (e.g. 1050px) this is the script
function adaptMenu() {
/* toggle menu on resize */
$('nav').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ($(this).parent().width() < $width * 1.05) {
$(this).children('.nav-main-list').hide(0);
$(this).children('.nav-toggled').show(0);
} else {
$(this).children('.nav-main-list').show(0);
$(this).children('.nav-toggled').hide(0);
}
});
}

You can solve this by fixing the given javascript, but javascript is inefficient to handle responsive design. CSS engine is written in c++ and works faster, and automatically when browser is resized.
Better use CSS media query
The following snippet does the same as your javascript but with pure CSS.
<style>
#media (max-width: 1049px) {
nav .nav-main-list {
display: none; /* hide .nav-main-list when browser windows width < 1050px */
}
nav .nav-toggle {
display: initial; /* show */
}
}
#media (min-width: 1050px) {
nav .nav-main-list {
display: initial; /* show .nav-main-list when browser windows width > 1050px */
}
nav .nav-toggle {
display: none; /* hide */
}
}
</style>
EDIT:
As #Roko commented, media query does not work in IE8 and earlier. If you need support that browser, this post may help.