I am working on an existing fixed-width desktop site, and the client wants no changes to the existing desktop layout whatsoever, and they want it to be "responsive".
The Problem:
When viewed on a phone (my android, anyhow), the 'mobile' site loads as expected. However, if you touch, move, scroll, etc, or happen to "zoom out", there is a huge amount of whitespace like this:
Background:
For the record: The new specs for the "mobile" view contains some new content, new menu options, etc., which don't always correlate consistently with the existing content.
So, my approach has been to add a css class to elements I want to keep, then use jQuery.clone(), .append(), and appendTo() to re-use as much of the existing content as possible, moving elements into my new "mobile scaffold":
$('.mobile-header').appendTo($('#PH_mobile_header'));
$('.mobile-content').appendTo($('#PH_mobile_content'));
$('.mobile-footer').appendTo($('#PH_mobile_footer'));
The simplified scaffold:
<div id= "PH_mobile_wrapper" class="mobile-wrapper mobile visible-xs">
<div class="row row-offcanvas row-offcanvas-left">
<div id="main" class= "col-xs-12">
<div id="PH_mobile_header" class="visible-xs">
<!-- HEADER -->
</div>
<div id="PH_mobile_content" class="container visible-xs">
<!-- CONTENT -->
</div>
<div id="PH_mobile_footer" class="visible-xs">
<!-- FOOTER -->
</div>
</div>
</div>
</div>
I also rely on 2 sections of a new LESS stylesheet to tweak a few things. For example:
//DESKTOP:
#media(min-width:768px){
h1{
font-size: 2em !important;
}
body{
background-color: #ltgrey;
}
.navbar{
width:1000px;
margin: auto;
border-right: solid black 1px;
}
.mobile{
display: none;
}
}
//MOBILE:
#media(max-width:768px){
li.inverse{
background-color: #dkgrey;
color: white;
a{
color: white;
&:hover, &:focus{
background-color: #olacred;
}
}
}
}
For the record, I'm using bootstrap 3.0 and php if that's relevant. I just mention that in case bootstrap is related to this somehow.
I started with the standard
<meta name="viewport" content="width=device-width, initial-scale=1">
and i've tried
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,maximum-scale=1">
Also read about CSS #viewport, but it doesn't seem to do the trick either.
I've even tried explicitly doing this at the end of my stylesheet:
#layout_wrapper, #layout_container,.dashboard_home_highlights,
.collapse-wrapper,#alpha,#beta,.dashboard_col_1_rotonator,
.orbit > a > img, .orbit > a{
// display: none !important;
max-width:300px !important;
}
blah.
So the questions are:
a. How do I fix this "viewport" issue, and b. is this all-around approach OK?
EDIT: Here is a partial demo: http://myapp.gristech.com/demo/viewport
Grrr...I have failed to completely reproduce the entire problem, but here you can see the approach, and one bug: if you pull this up on a phone, then zoom in, the text correctly squeezes into the view. Then, zoom back out... the text does NOT expand again as it should, leaving extra whitespace so to speak, and scrolling down is thereafter "wobblely". This is kind of what I think is going on on a larger scale in the full project- since the 1000px site loads 'first', then the 'layout viewport' is still 1000px. thank you so much for your time & effort
Related
This is what I want to accomplish
The code is already here, but i do not know how to make it stop at each section.
https://codepen.io/ellie_html/full/dyYjZyB
the part of the css that makes the code above work is this
.container {
height:570px;
width: 325px;
overflow-y: scroll;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(3rem);
scroll-snap-type: y mandatory;
position: relative;
left: 510px;
top: 50px;
z-index: 1;
border-radius: 15px;
border: none;
}
.tiktok {
height: 620px;
width:300px;
background-color: black;
scroll-snap-align: start;
}
A vertical carousel scroller just like above, except, it must stop on each section instead of allowing the use to quicky scroll over each section.
I notice google shorts https://www.youtube.com/shorts/3jqhfmUqgZk behave the same way if you scroll down.
Snappy and crisp to the feel. However it also doesnt allow it to stop on each section. If a user scrolls very fast, it will skip over many.
How can this be done in javascript? I have looked at many libraries so far but they all suffer from the same problem. I am trying to modify the code above to make it work.
Or am i recreating the wheel and there is some tiny code out there that already does this?
I ended up using this library https://mobius1.github.io/Pageable/#page-1
Set it up in freescroll mode and dragmode. Its also free with no cost, and the snap feel of the scrolls is similar.
It is also done in pure javascript with zero dependencies.
Setting it in drag mode also prevents multiple sections from being skipped because a user wont be able to use the scroll wheel.
Have you tried fullpage.js? You can check its official docs here.
fullPage is an Open Source application licensed under a GPLv3 license. This license allows you to use fullPage in Open Source projects but it requires your project to be public, provide attribution and be licensed under GPLv3.
Here's a contrived example, also available on CodePen:
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
// get your license at https://alvarotrigo.com/fullPage/pricing/
licenseKey: 'YOUR LICENSE KEY HERE '
});
.section {
text-align:center;
font-size: 3em;
}
.as-console-wrapper {
display: none!important;
}
<link rel='stylesheet' href='https://unpkg.com/fullpage.js/dist/fullpage.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js"></script>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide" data-anchor="slide1">Slide 2.1</div>
<div class="slide" data-anchor="slide2">Slide 2.2</div>
</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
I'm having a problem with some vanilla JavaScript that I need help with. I know that the title of this question may seem like a double of others, but I believe there may be a slight twist to my issue that is causing me to either be confused or follow the wrong path of thinking. Here is how I will present my problem...
FIRST - I will describe the issue plus provide a temporary link to the page in question. It is my portfolio website... I would like to start looking for a Junior level Frontend Developer position.
SECOND - I will briefly show some research and my take on how to come to a solution.
THIRD - I will provide the code for the problem I'm trying to solve.
**** ONE IMPORTANT NOTE - I firmly believe in the "teach a man to fish, rather than give him a fish" philosophy and so if you have a solution, could you please explain WHY it works or point me to reference materials so I can read up on it?
(1) DESCRIPTION OF ISSUE ----------------------------------->
On the "Project Page" of the portfolio website that I'm building for myself, I am attempting to make it so that when you click on the image of a project I have done, it displays a block of descriptive text about that project on one side of the screen.
If you were to click on another project image, the already displaying block of text would disappear and a new block of text would appear in the same position.
I have managed to come up with code that displays the text blocks once a project image is clicked, but because the previous text block doesn't disappear, the text blocks are stacking on top of each other when a new project image is clicked.
Here is a temporary link to the page in question: [http://s9m00001.site/projects.html][1]
(2) MY RESEARCH AND THOUGHTS TOWARDS A SOLUTION -------------------------->
I have done Google searches and have checked out some of the suggested stack overflow posts that appeared when I typed the title to this question that I am posting. The closest thing I could find to my situation was this: [Remove changes from one element when event occurs on another element?
I tried to apply the concept of what that rather eloquent first solution provided. I even looked up the Array map () method on W3Schools because I was not familiar with it. That article is here: https://www.w3schools.com/jsref/jsref_map.asp
In attempting to solve the problem, my line of thinking was as follows:
use querySelector to grab all of the project images by class and put them into an array.
Add a "click" event listener to the items in the array that enables "function X".
"Function X" changes the css "display" property of the appropriate text blocks from "none" to "block".
Use an if statement to see if there are any other text blocks with a "display of "block" and then to change them to a "display" of "none" if the condition was true.
(3) CODE -------------------->
I am providing the code that I'm using below. Please note that I have included one of my attempts at solving the issue in my JavaScript code, which has been commented out and labeled as "ONE OF MY SOLUTION ATTEMPTS". It was the attempt that I felt I was the closest with to solving the issue.
HTML
<!-- MAIN -->
<div id="upper-project-container">
<!-- Golden Glow Investigative & Protective Services -->
<div class="project-text-left" id="proj-des1">
<h4 class="project-tech">Golden Glow Investigative & Protective Services</h4>
<p class="white-text-two">I have built and maintained the various iterations of the website for this company since 2004, using either Adobe Dreamweaver or proprietary contact management systems. But this redesign project required a much more intimate knowledge of coding than previously needed and a finished product within only 2 days.
</p>
<p class="white-text-two">The needs of this project presented me with the opportunity to use a template and work with source code that was written by someone other than myself, which was something I had not done up until that point.
</p>
<p class="white-text-two">The template came from https://html5up.net/spectral and I modified or restructured appropriate aspects of the code to produce a finished product that fit the client’s needs.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">June, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="golden-glow">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Jay Hunt Designs -->
<div class="project-text-left" id="proj-des2">
<h4 class="project-tech">Jay Hunt Designs</h4>
<p class="white-text-two">Jasmine Hunter is a fashion designer that I met at my local Panera Bread restaurant (I have obtained 3 of my clients from hanging out there!). Miss Hunter wanted a site that had a clean and simple design, but was elegant and utilized the colors black, white, silver and gold.
</p>
<p class="white-text-two">The challenge I was faced with in order to complete this project had to do with the cross browser compatibility of the auto scrolling feature I built into the homepage of the site. I do the testing of my builds on Chrome, Safari, Firefox, Edge, and Opera. The auto scrolling feature worked on all of those browsers except for Firefox.
</p>
<p class="white-text-two">After researching the issue through Google searches I finally found a solution that took care of the issue.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">April, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="jay-hunt">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Goodie Treats -->
<div class="project-text-left" id="proj-des3">
<h4 class="project-tech">Goodie Treats</h4>
<p class="white-text-two">The focus of the Goodie Treats organization is to build the self esteem of minority children, girls in particular, through various activities and events. The request of the client was that I made the entire homepage function as the initial menu for the site and also that it featured images from some of their events, but they wanted the rest of the site to be a simple design that featured big background images.
</p>
<p class="white-text-two">The challenging homepage request from the client provided me with an opportunity to explore using a responsive grid system to build the home page. Building the site’s homepage to spec allowed me to grasp the basic concepts and usefulness of using a grid, as well as experiment with its responsiveness to various screen sizes.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">March, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="goodie-treats">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Rapture Guns -->
<div class="project-text-left" id="proj-des4">
<h4 class="project-tech">Rapture Guns & Knives</h4>
<p class="white-text-two">During a visit to a local gun store for some target ammo, I overheard the store owner that he was in need of a website but didn’t have the knowledge on how to do it. I took that opportunity to introduce myself and shortly afterwards he became my client.
</p>
<p class="white-text-two">Because the majority of his customers were over the age of 50, the client wanted a very simple site that would appeal to the “nothing fancy” character of his customer base and that was modelled after the website for Gunsmoke Guns (now closed) out of Wheat Ridge, Colorado.
</p>
<p class="white-text-two">The challenge that I had in building this website had to do more with content than it did with any technical obstacles. I had to compose all of the copy for the website based on a recorded interview I conducted with the owner.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">January, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="goodie-treats">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Brackets (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
</div>
<div class="project-text-right" id="proj-des1">
</div>
<div id="lower-project-container">
<h3 id="project-heading">projects</h3>
<div class="project-col" id="project01">
<img src="images/project1.jpg" class="project-" id="des1" alt="golden-glow-security-website">
</div>
<div class="project-col" id="project02">
<img src="images/project2.jpg" class="project-" id="des2" alt="jay-hunt-designs-website">
</div>
<div class="project-col" id="project03">
<img src="images/project3.jpg" class="project-" id="des3" alt="goodie-treats-website">
</div>
<div class="project-col" id="project04">
<img src="images/project4.jpg" class="project-" id="des4" alt="rapture-guns-website">
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="scripts/main.js"></script>
</body>
</html>
CSS
/* ========== PROJECTS PAGE ========== */
.wrapper#projects {
background: url(../images/bg02.jpg)fixed no-repeat center;
background-size: cover;
overflow: hidden;
}
#upper-project-container {
width: 100%;
height: 58%;
}
ul.tech-list {
margin-left: 40px;
}
ul.tech-list li {
list-style-type: disc;
font-family: 'Open Sans', sans-serif;
font-size: .8rem;
line-height: .95rem;
color: #ffffff;
}
.project-text-left {
position: absolute;
top: 10%;
left: 4%;
width: 720px;
height: 400px;
}
.project-text-left#proj-des1 {
display: none;
}
.project-text-left#proj-des2 {
display: none;
}
.project-text-left#proj-des3 {
display: none;
}
.project-text-left#proj-des4 {
display: none;
}
.project-text-right {
position: absolute;
top: 10%;
right: 4%;
width: 720px;
height: 400px;
display: none;
}
.show {
display: block;
}
#lower-project-container{
width: 100%;
height: 45%;
}
.project-col {
width: 25%;
margin-top: 20px;
text-align: center;
float: left;
-webkit-transition: transform .4s;
-moz-transition: transform .4s;
-o-transition: transform .4s;
transition: transform .4s;
}
.project-col:hover {
transform: scale(1.1);
-webkit-transition: transform .4s;
-moz-transition: transform .4s;
-o-transition: transform .4s;
transition: transform .4s;
}
img {
max-width: 100%;
box-shadow: 24px 17px 44px rgba(0, 0, 0, .7);
cursor: pointer;
}
JAVASCRIPT
// ----- PROJECT PAGE
Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
/*var showProject = document.querySelectorAll('#lower-project-container .project-');
var siteDescr = document.querySelectorAll('.project-text-left');
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
project.style.display = 'block';
});
});
// ========== ONE OF MY SOLUTION ATTEMPTS ========
/* window.onload = function() {
var showProject = document.querySelectorAll('#lower-project-container .project-');
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
// If another project panel is visible, it is then hidden.
[].map.call(document.querySelectorAll('.project-text-left'), function(e) {
e.classList.remove('show'); // remove from all
});
this.classList.add('show'); // add on current
});
});
} */
(4) CONCLUSION -------------------->
Thank you for whatever help you can provide me and please let me know if there are any questions I can answer or additional code that you may need to look at to better see any relationships.
The first problem is that in main.js you have an incomplete comment block
// ----- PROJECT PAGE
Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
Add a /* before the word Project
// ----- PROJECT PAGE
/* Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
[EDIT]
You could add another variable to track if something is already displayed
var oldID = null;
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
if( oldID != null ) {
document.getELementByID('proj-"+oldID).style.display = "none";
}
project.style.display = 'block';
//--- save current id
oldID - e.target.id;
});
});
This problem was answered by Jeff in the comments. I am only posting this answer to share the final code that actually worked. Essentially, Jeff's answer was correct. However, there were a couple of minor typos and a "getElementById is not a function" error message I was getting on Chrome Developer Tools. The final code that works is below. All credit goes to Jeff for it. Please note the VERY minor changes I made between what Jeff offered and the final working version. I hope this helps someone with a similar issue in the future! Here's the final working code:
// ----- PROJECT PAGE
/*Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
var showProject = document.querySelectorAll('#lower-project-container .project-');
var siteDescr = document.querySelectorAll('.project-text-left');
var oldID = null;
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
if( oldID != null ) {
document.querySelector('#proj-'+ oldID).style.display = "none";
}
project.style.display = 'block';
//--- save current id
oldID = e.target.id;
});
});
I'm currently on a MacBook with the display dimensions of 15.4-inch (2880 x 1800) here is a screenshot of how each section of my website looks for my homepage.
#app (section1)
#section2 (section2)
#section3 (section3)
----------
ISSUE ONE
How can I fix my h3 text to ensure it's responsive on a mobile device and it fits to be seen on a mobile device. Here is a screenshot below of how it looks as you can see it doesn't adjust and fit on the screen correctly. If you look at the JSFIDDLE link to my site at the bottom of the post you can see I have used <div class="col-lg-12"> to ensure it's responsive therefore, no idea why it's going this on mobile devices.
<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
<span>I'm a</span>
<span class="cd-words-wrapper">
<b class="is-visible">Front-End Web Developer</b>
<b>Graphic Designer</b>
</span>
</h3>
Here is a screenshot of a mobile device view of my website showing the issue.
JSFIDDLE
white-space: nowrap will prevent the text from wrapping on small screens. Remove that from .cd-words-wrapper b:
.cd-words-wrapper b {
display: inline-block;
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
}
https://jsfiddle.net/wdafatrx/8/
You could also use vw and vmin units to keep them inside the screen.
.cd-words-wrapper b has white-space:nowrap set - this will cause all text inside it to stay on one line. Removing that is the fix to your responsiveness issue.
Use a media call in your css;
#media screen(max-width: 480px) {
<!--your div class name--> h3 : <!--new font size--> }
I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!
Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;
In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->
I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE
i have searched everywhere and so far can't find an answer specific to what i am looking to do.
here is a website that has what i am trying to, essentially, copy:
http://theeverygirl.com/feature/emily-henderson-of-secrets-of-a-stylist
do you see the contributors text area on the left? it floats with the blog post, but stops floating when it reaches the end of the blog post/footer area, and also does not appear until one scrolls down far enough on the page to view the blog post.
here is my current html/css that i would like to do this with:
<html>
<head>
<style>
a:link{
color: black;
}
a:hover{
color: #83D3E8;
}
a:active{
color: #01B1D1;
}
p.small {line-height:70%;}
</style>
</head>
<body>
<div style="background:clear;border:1px clear;padding:5px 10px;margin: 5px; position: fixed; left: 0%; bottom: 12%; max-width: 130px; height: 280px;opacity: 0.6;">
<h1><span style="font-family:andada,serif;">CONTRIBUTORS</span></h1>
<hr />
<p><span style="font-family:andada,serif;">PHOTOGRAPHY BY</span></p>
<p class="small"><span style="font-family:andada,serif;">braelyn jane smith</span>
</p>
<p><span style="font-family:andada,serif;">STYLING BY</span></p>
<p class="small"><span style="font-family:andada,serif;">joanna lynne smith</span></p>
<p><span style="font-family:andada,serif;">COPY BY</span></p>
<p class="small"><span style="font-family:andada,serif;">joanna lynne smith</span>
</p>
</div>
</body>
</html>
and you can view it live, here: http://bluecactusstyling.com/2014/06/05/test-2-2/
any tips? keep in mind that i am NOT a programmer. i've done all of this so far with google searches and html builders.
The script it is using to do that is here:
http://theeverygirl.com/sites/all/themes/everygirl/js/layout.js?n549sa
(Starts at the "// Make article left sidebars sticky" bit)
Basically, it works by calculating if you are scrolled further down the screen than the beginning of the article. If you are, it adds "position:fixed" css to the contributors area, which fixes it in a static position on the screen.