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
Related
When viewing a website with Chrome for Android, the height of the view-area changes as soon as scrolling causes the URL-bar to hide. When using a fixed background image, this results in annyoing resizing of the image, initially when scrolling down, and also when the user scrolls up again, which enables to URL-bar again.
This topic has already been discussed here:
Background image jumps when address bar hides iOS/Android/Mobile Chrome
There was also a 'fix' announced, that recommends the use of vh instead of % to describe the height of the image:
https://developers.google.com/web/updates/2016/12/url-bar-resizing
Given now a site that contains a fixed background image:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="content">
<div style="padding-bottom:2000px; width:100%;">Test</div>
<div>Test again</div>
</div>
</body>
</html>
using the following CSS:
html, body {
margin: 0;
padding: 0;
}
div {
color:white;
font-size: 30px;
}
#content {
background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
background-size: cover;
}
will rescale the background image as described above, using Google Chrome for Android. Here is a Fiddle.
The methods determined to solve this (see linked JS-thread) make use of JavaScript to determine the window height after resizing of the window has taken place and then update the image height. However, it won't stop the background image from resizing without leaving a part of the page blank.
In order to keep the background image in place, two methods seem suitable:
preventing the URL-bar to hide
render the image with an initial offset to be able to compensate the image shift
Preventing the URL-bar to hide
In order to keep the URL-bar visible all the time, I created a fixed-div that contains a scrollable div-container:
<div id="content">
<div id="fixed">
<div id="scroller">
<div style="padding-bottom:2000px; width:100%;">Test</div>
<div>Test again</div>
</div>
</div>
</div>
CSS:
#fixed {
height:100vh;
width:100vw;
overflow:hidden;
}
#scroller {
overflow-y: auto;
height:100vh;
}
The idea is that since the user is not scrolling the website-body, the URL-bar won't disappear. This Even though this works on my emulator, it doesn't work on a real Galaxy S20. A user would be able to hide the URL-Bar after scrolling to the bottom of the page (the div).
Rendering the image with an initial offset to be able to compensate the image shift
The other idea was to draw the background image 'deeper' by default:
background-size: auto calc(100vh + 100px);
If there is "unused" space on top of the image, it should be possible to catch the resize- or touchmove-event, compare the new window height to the initial window height and then compensate the offset. Unfortunately, this will only affect the y-dimensions of the image and I would probably need to do the same for the x-axis or rescale the image again. However, when trying to determine the current image size in JavaScript (using jQuery, see this thread), I ran into another error; retrieving the image-size via $('#background').css('background-size') returned just auto and ignored the second part.
Most threads about this topic are older than five years. Can someone enlighten me and tell me there is a way to manage this by now?
Update:
I was able to eliminate the resizing using the following technique:
Assuming portrait-mode is active, I calculated the image width from the scaled image height and set the background-size to pixel values:
var initHeight = '';
var initWidth = '';
var imageHeight = 982;
var imageWidth = 1500;
var cssHeight;
var cssWidth;
$(window).on('resize', function () {
if (initHeight == 0) {
initHeight = $(window).height();
initWidth = $(window).width();
cssHeight = parseInt($('#content').css('background-size').split(" ")[1].slice(0,-2));
cssWidth = cssHeight / imageHeight * imageWidth;
$('#background').css('background-size', cssWidth + "px " + cssHeight + "px");
}
Now the background image won't scale, but it will move vertical when toggling the URL-bar.
To get rid of this, I make use of the second method described above and draw the background image with an initial offset:
background: url(../images/bg.jpg) no-repeat right 15% top -100px;
background-size: auto calc(100vh + 200px);
As soon as a resize-event occurs, I update the background image position:
let newHeight = $(window).height();
let newWidth = $(window).width();
let diff = newHeight - initHeight;
$('#background').css('background-position', "85% " + (startHeightOffset + diff) + "px")
This seems to work in my emulator. The background image stays in place now. However, when switching devices, I noticed that this approach works only for devices that have no toolbar in the bottom. Emulating a Galaxy S9, which has a URL-bar on the top as well as a toolbar on the bottom, the background image gets shifted too much, since the space acquired by both toolbars (top and bottom) will be added to the top of the image. In order to make this work, I would need to determine the height of the top URL-bar only and I genuinely don't know if this is possible.
Again, in order to solve this problem, one of the following problems must be solved:
reliably prevent hiding of the URL-bar
determining the height of the bottom toolbar
Update 2:
I was able to prevent hiding of the URL bar like so:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: scroll;
}
body {
-webkit-overflow-scrolling:touch;
}
#content {
width: 100%;
height: 100%;
background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
background-size: cover;
}
#fixed {
height:100%;
width:100vw;
overflow:hidden;
}
#scroller {
overflow-y: auto;
height:100vh;
}
The background image stays in place, since the URL-bar will never collapse. However, this isn't the ideal solution and it would be great if there would be a way to make this work without the need of preventing the URL-bar to collapse.
I am pretty new to coding and javascript and I have been trying to create a navigation block that slides in from the left when I click the logo in the top left-hand corner.
I seem to have got the sliding in and out element of the navigation working fine however, if I scroll further down the page and try to open the nav again, the browser window jumps back up to the top of the page rather than staying where it is. Weirdly it doesn't do it when I close the nav, just open it.
This is the script I am using at the top of my HTML to control the nav opening and closing:
<script>
function openNav() {
document.getElementById("expanded-menu").style.display = "block";
}
function closeNav() {
document.getElementById("expanded-menu").style.display = "none";
}
</script>
and this is the CSS styling the expanding nav:
.expanded-menu {
background-color: #f3f3f3;
height: 100vh;
position: fixed;
display: none;
width: 230px;
text-align: center;
z-index: 100;
overflow-x: hidden;
animation: animateleft 0.4s;
top: 0;
left: 0;
}
The animation effect I have on there doesn't seem to be working either. It just jumps out rather than sliding. But I imagine I need to open another question for that.
Thanks in advance!
EDIT: Here is the associated HTML too.
<div class="expanded-menu" id="expanded-menu">
<!-- MENU -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<img src="images/Backarrow.png">
</a>
and...
<div class="contracted-menu">
<a href="#" onclick="openNav()">
<img src="images/nav icons/Cuttsy.png" class="cuttsy-small" alt="Cuttsy logo">
</a>
you need to disable the default action, you can use the preventDefault method demonstrated below or using javascript:void(0), like you use in your example.
You just used working link to "#". Normally if used with some existing ID it would scroll to it, but if empty it will just scroll to top.
function foo(e) {
e.preventDefault()
console.log('foo');
}
xxx
Your code works. Make sure you are triggering the functions correctly.
For example with a link a with the href attribute linking to a javascript function.
Open<br>
Close<br>
<div id="expanded-menu" class="expanded-menu">
My menu.
</div>
Some Content.
See this codepen for a working version.
Animation
Consider using css3 transitions as a way of displaying animations.
transition: left 1s;
Now, transition between display:none and display:block won't achieve anything, because there are no inbetween states. Instead I would suggest sliding the menu in with the use of the left offset.
You can hide a menu with the width of 200px with a left offset of -200px. (Left, top, right, bottom may be negative.) Transitioning the left offset to 0px will look like a transition.
See a working example in this codepen.
CSS
width: 230px;
left: -230px;
transition: left 1s;
JS
function openNav() {
document.getElementById("expanded-menu").style.left = "0px";
}
function closeNav() {
document.getElementById("expanded-menu").style.left = "-230px";
}
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.
I'm looking for a way to dynamically change a div's height when a page scrolls. This is because I have a fixed panel on the right side of the screen, and a menu banner at the top.
When at the top of the page, the top of the side panel touches the bottom of the banner at the top. Thing is, when the page is scrolled down and the banner leaves the screen, this leaves a gap the size of the top banner between the top of the screen and the top of the side panel. I'd like to put a div between them that would grow in height when the page is scrolled down. Is there a way in css or js to do so ?
I can't just have the side panel have 100% height because it would hide some elements on the top banner, especially on lower resolution screens.
I added some ugly images made on paint to explain :
This is the css for the side panel :
position: fixed;
right: 0;
top: 180px;
height:calc(100% - 180px);
Hello I do not really understand your banner situation.. but regarding what you need, you can just call a js function whenever you scroll:
<body>
<div class="content" onscroll="dynamicheight()">
</div>
<script>
function dynamicheight() {
var content = document.getElementById("content");
var y = content.scrollTop;
document.getElementById('random').style.height = y;
}
</script>
This way the div with the id random will grow according to how much you scroll. Obviously you have to adjust it to your wishes. Hope this could guide you a bit.
As per your question, you have to stick Panel to the top of viewport on scroll right?
For that purpose you can trick some negative margin equal to the height of menu bar like,
Check this fiddle here
$(window).scroll(function() {
if ($(".sidepanel").offset().top > 50) {
$(".sidepanel").addClass("stick-top");
} else {
$(".sidepanel").removeClass("stick-top");
}
});
body{
margin:0;
padding:0;
height:1000px
}
.menu{
width:100%;
height:50px;
background:#111111
}
.sidepanel{
width:200px;
height:200px;
background:#888888;
position:fixed;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
}
.sidepanel.stick-top{
margin-top:-50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="menu"></div>
<div class="sidepanel"></div>
See first based on the content you can adjust it automatically.
How to make sidebar with same height as the content div?
Can anyone point me in the direction of a horizontal and vertically responsive gallery slider plugin or Jscript?
I have tried Flexslider1/2, Galleria, various other plugins, but they are all a set width and don't seem to respond to resizing the browser vertically? I have tried changing all the CSS but no luck.
Any help at would be greatly appreciated.
Example (With Flexslider): If you resize the browser horizontally, the images will automatically resize to fit within the browser window. If you resize vertically this will cut off the image vertically.
Aim: When you resize the browser window vertically the image will change width and height to keep ration and fit within the browser window. Same with Horizontal.
Hopefully I have explained this clearly. If you need clarification please ask rather than down voting.
Having a poke around the code in Flexslider I couldn't find anything specifically excluding the possibility of an image resize on vertical window change. The image resize appears to be purely CSS based which then feeds the width/height inforomation into the javascript. It appears you are stuck with a DOM/CSS issue of the browser not resizing an image on a vertical window change and then a little bit of this not being a tested FlexSlider setup.
It'a always been a bit finicky to get all browsers to understand 100% vertical layouts with no vertical scrolling as it's not the normal layout paradigm. Subsequent CSS versions have helped a bit but there's still a big difference between how browsers react and interpret what you mean by 100%.
I took the slider demo and borrowed most of a stack answer to manage the 100% vertical layout and ended up with this with the detail below.
First, change your image CSS properties to scale the height of the layout and set the width auto to keep the correct aspect:
width: auto;
height: 90%;
This works on an image by itself but the FlexSlider javascript adds some extra elements into the page and also defaults some CSS width values in the demo for the horizontal layout.
.flexslider .slides img {width: 100%; display: block;}
becomes
.flexslider .slides { width: 100%; display: block;}
.img {display: block; }
Now you have a slideshow working in Chrome.
Firefox won't apply the images 100% height to the elements containing the like Chrome so I had to step back through all the elements and apply the 100% height rule in CSS
.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }
.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}
You'll see I did the img there as well. And you end up with the page.
One draw back to this solution is you now have an image that will resize past the horizontal size of the screen. You probably need to build something in to cater for this as you will run into issues if you use the basic carousel which is dependendant on the width to work. Also something funky happens when you mouseOut of the screen adding a horizontal scroll bar but I'll leave that one for you. Also try IE at your own risk.
...and this is why I shy away from front end development =)
Sorry that post ended up being a bit of a running commentary of me poking about.
I also wanted an image slider that was vertically responsive (and horizontally). After not finding anything out-of-the-box that worked they way I wanted I started fiddlin'.
Here's the result.
Here's the key elements (go to the jsFiddle for the full demo). It's not quite perfect but should be enough to get you started.
HTML
<div id="fader">
<img src="http://placehold.it/600x600&text=Slide1" >
<img src="http://placehold.it/600x600&text=Slide2" >
<img src="http://placehold.it/600x600&text=Slide3" >
<img src="http://placehold.it/600x600&text=Slide4" >
</div>
CSS
#fader {
position: relative;
width: auto;
height: 100%;
}
#fader a {
display:block;
width:auto;
height:100%;
}
#media screen and (orientation: portrait) {
img {
width: 100%;
height:auto !important;
}
}
#media screen and (orientation: landscape) {
img {
height: 100%;
min-width:10%;
max-width:100%;
}
}
Special thanks to this jsFiddle for the lightweight jQuery rotator.