div position won't reset in responsive page - javascript

I tried to find a solution here but couldn't find it.
I'm working on this responsive design page. On mobile, when you tap menu, the main content div gets pushed aside (via Javascript) to reveal a left-fixed menu underneath. Everything works pretty fine except that when you see the webpage on a computer browser (resided to mimic mobile), open the menu and then expand the browser window till it hits the "desktop" breakpoint, the main content div remains pushed aside.
Is there a way to reset the position of the content (main) div when maximized to the desktop breakpoint? I've tried many alternatives to no avail.
Here's a jsfiddle link with the page: https://jsfiddle.net/luchosoto/wad3pmn0/1/
CSS for the main content div:
#main {
top: 0;
bottom:0;
width: 100%;
position:fixed;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
z-index: 2;
transition: 500ms;
box-sizing: border-box;
}
Javascript that pushes main div aside to show menu:
var counter = 1;
function toggleNav() {
if (counter == 1){
document.getElementById("main").style.transform = "translateX(60%)";
counter = 0;
}else{
document.getElementById("main").style.transform = "translateX(0%)";
counter = 1;
}
}
Thanks in advance.

While Zack Kirby's answer sounds logical and ntgCleaner's comment is very useful, you could also add this CSS which forces the main div position to where you want it: JSFiddle
#media screen and (min-width: 801px) {
#main {
transform: translateX(0) !important;
}
}

Since you are using javascript to move the div, you will also need to use javascript to move it back. You'll need to do that with a window.onresize listener. You can use something like this answer to achieve that.

Related

HTML/CSS Designing a responsive website. An onclick attribute won't function

I'm trying to create a responsive design for a practice website.
The situation is that the below menu-icon image is only displayed while width is less than 701 px. So it does that fine. But the problem is that, when menu-icon image is displayed, screen width less than 701 px, I click on the image and nothing happens. The onclick attribute "togglemenu()" does not seem to function. Can someone help please?
This is a live site:
https://moortje.github.io/HTML-CSS-Project-Bro-Code/
The menuList and menu-icon in question are at the very bottom.
Here is an HTML snippet.
<ul id="menuList">
<li>CSI</li>
<li>CHP</li>
<li>HCSS</li>
<li>JS</li>
</ul>
<img src="moortje2.png" class="menu-icon" onclick="togglemenu()">
<script type="text/javascript">
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if (menuList.style.maxHeight == "0px") {
menuList.style.maxHeight = "130px";
}
else{
menuList.style.maxHeight = "0px";
}
}
</script>
Here is a CSS snippet.
.menu-icon{
width: 25px;
cursor: pointer;
display: none ;
}
#media only screen and (max-width: 700px){
.menu-icon{
display: block;
}
#menuList{
overflow: hidden;
transition: 0.5s;
}
}
Well I went through the code and find out that togglemenu function is working properly and its even opening the menu. But you have given position absolute to ul tag and when you click on toggle image. It opens menu but at the top of page.
So click on image and scroll up to top and you will going to see your menu. You just have to adjust its position to open it below toggle menu button/image.
The problem is that you are setting max-height and max-width
Changing those properties doesn’t change the size of the element, only what its max bounds are.
Use width and height instead.
It's appear at the top of the page because of position: absolute

Cannot scroll to absolute bottom of the page in mobile

Im trying to figure out whats going on in my website that in mobile devices im not able to scroll till the end where the arrow up is.
I need you to help me. Thanks
My website is www.agustinmoles.byethost32.com
EDIT: I have found that the error is in some part of this code, but I don't think its bad... hmmmm
function deSeccion1A2() {
deSeccionXaSeccionY('#section1 #portfolio i','#section2');
}
function deSeccion2A3() {
deSeccionXaSeccionY('#section2 .bottom-arrow','#section3');
}
function deSeccion3AContact() {
deSeccionXaSeccionY('#section3 .bottom-arrow','#contact-section');
}
function deContactATop() {
deSeccionXaSeccionY('#contact-section .bottom-arrow','#section1');
}
function deSeccionXaSeccionY (nombreElemento, nombreDivAMoverse) {
$(nombreElemento).click(function() {
var altoSection = $(nombreDivAMoverse).offset().top;
$('html, body').animate({scrollTop: altoSection},700);
});
}
The javascript on your page scrolls to each section so it fills the screen. On mobile the screen is not tall enough, so it can't fit the whole section, and because there is no next section it stops the scrolling. A lazy fix would be to disable that functionality on mobile or to adjust the bottom position of .adios and bottom-arrow.
If you can reproduce the issue on here using a code snippet, you might get some better solutions.
EDIT:
Try changing the font size of the below selector to font-size:2.8em. The title seems to be breaking out of the DIV which seems to be causing the issue. I am not 100% sure but this could be causing the vh units calculation to be off slightly.
#media screen and (max-width: 768px)
#contact-info h1 {
margin: 0 auto;
padding-top: 100px;
width: 97%;
line-height: 70px;
font-size: 3.8em;
}
}

scaleY property not maintained properly for small screens

I am tryng to fix a css bug for mobile screens
when I click section 1 content opens and if i move till the bottom of the section one content and after that if I click section 1 content closes.
but I dont see section 2 after that I see section 3 since the screen moves upwards.
how to retain the section 2 in our screen.
am I doing anything wrong with the scaleY property.
providing the related code below
I used scrollIntoView but still not point to second one any idea???
I used window.scrollTo(0, 0) but still not point to second one any idea???
.television .chromecast .sun .sunItem > .bulb {
overflow: hidden;
transition: transform .5s, max-height .5s;
transform: scaleY(0);
box-sizing: border-box;
max-height: 0;
transform-origin: center top;
}
.television .chromecast .sun .sunItem.selected > .bulb {
transform: scaleY(1);
max-height: 100%;
}
We need to invoke properly on the select function
onSelect() {
this.props.onSelect(this.props.id);
this.focusDiv();
}
That's the expected behaviour. The scroll position is retained but you remove content from the top of the screen so you end up further down in the page.
It's always a bad idea to collapse the previous elements when expanding a new one, especially on mobile.
To fix that, you will need to script a scrolling to the top of the open section. That could easily be achieved using jQuery.ScrollTo() or something similar, but to be honest, I would just leave the previous sections open, unless the users have a tendency to scroll back up and that would require to much scrolling to get back to the top of the page. Other UX solutions like a scroll to top link might come in handy to solve that.

CSS/Javascript Auto Scroll To Top

I am currently working on a simple (or so I thought) slide-down menu for both the desktop and mobile versions of a website I am working on. I'm trying to do this in CSS only if possible. Currently the CSS I am using is as follows:
#menu {position: absolute; top: 0; left: 0; width: 100%; max-height: 50px; overflow: hidden; -webkit-transition: all 1s ease; /* For Safari 3.1 to 6.0 */ transition: all 1s ease; padding: 4px; }
#menu:hover {max-height: 75%; overflow: auto}
The reason I have the 'overflow: auto' when on a smaller screen is due to the entire menu not showing when on a smaller screen - even when I have some elements not showing on mobile screens.
The problem I'm running into is when it DOES overflow and the user scrolls through the menu, when they click/hover out of the menu it retracts like it should but it doesn't show the top of the menu anymore, it will show wherever they scrolled to.
I'd like to find a way either via CSS or Javascript to automatically have that div scroll back to the top when the user clicks/hovers out of the menu so it will still show the menu icon + logo instead of random menu text.
I love how it works but can't stand the scrolling issue on smaller screens.
There may be some awkwardness in your idea that might just need a redesign, I certainly have never noticed a menu working like this.
But the jQuery code to scroll to the top is this:
$("html, body").animate({
scrollTop: 0
}, 600);
Where 600 is how long it takes in ms.
You'll have to wrap this in a click() function or something so it triggers when someone presses a menu option.
For example:
$('#menu a').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
});
And of course all of this code should be wrapped in a $(document).ready() (basic jQuery setup)
I know you didn't mention jQuery in your question, but this is a popular approach to solving problems like this.
There is another way to achieve auto scroll on click using html only.
You just need to add an id to some div (the header maybe) and on the link you pass the #id to the href like so:
html
<div id="Header">your header</div>
Go to the top
css
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
I'd suggest to try out the scroll-behavior: smooth; it makes the transitions, well... smooth :D
Here you can find all the documentation you need about this solution
https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior

Unwanted border around background image div

I am getting a slight line or border around my background image. I am dynamically changing the height of the parent div via javascript so that the inner div (which has the background image set) will "stick" to the bottom of the window.
No line appears on the desktop browsers, but on the mobile browser after the script runs, there is usually a thin border around it:
The border is on the left and the way it should be is on the right. Any suggestions?
This is the script:
<script type="text/javascript">
function layoutHandler(){
if(window.innerHeight > 1061){
var newsize = 150 + (window.innerHeight - 1061);
document.getElementById("footerwrapper").style.height = newsize+'px';
}
else {
document.getElementById("footerwrapper").style.height = '150px';
}
}
window.onload = layoutHandler;
window.onresize = layoutHandler;
layoutHandler();
</script>
And then the inner div is setup like so:
#inner {
background-color: #FFF;
padding: 0px;
height: 150px;
bottom: 0px;
width: 100%;
position: absolute;
background-image: url(Images/grad.png);
background-repeat: repeat-x;
}
Edit:
Okay, after testing this a bit more I narrowed down when it happens. (This might get frustratingly specific) It happens most noticeably on the iPad in portrait mode. I turned off the "repeat-x" and it goes away completely. That led me to try a much wider background image which would not be repeating within the width of the iPad and it took away this issue. Any ideas why the heck this is happening?
I had the same problem and removing repeat-x solved it. I think it is bug of phone browsers.

Categories