I coded this script. If the window size is smaller than 1000px, it is possible to unfold the menu points.
But, if you collapse the menu points and increase the window size, the menu points still stay hidden. I don't get it to fade them in then again.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<nav>
<h2>S U P E R</h2>
<button class="button" onclick="fold()">FOLD</button>
<div id="folding">
<a>Under Construction 1</a><br>
<a>Under Construction 2</a><br>
<a>Under Construction 3</a><br>
<a>Under Construction 4</a><br>
</div>
</nav>
</body>
</html>
CSS:
#folding {
display: block;
}
.button {
display: none;
}
#media screen and (max-width: 1000px) {
.button {
display: block;
}
#folding {
display: none;
}
body {
background-color: red;
}
}
JS:
function fold() {
var x = document.getElementById("folding");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
Your problem is with css specificity (See Specificity).
A simple and quick(not great) solution to achieve your goal is to invert media logic and apply important for the property to override inline rule display:none;:
.button {
display: block;
}
#folding {
display: none;
}
#media screen and (min-width: 1000px) {
#folding {
display: block !important;
}
.button {
display: none;
}
}
When you do x.style.display = "none"; you are adding an inline-style that has priority against classes and id styles. The best way to you do what you want is to create different classes (.folding-visible, etc...) and control which class will be applied depending on the viewport.
Related
I want to make add some code to the HTML dom according to the screen sizes. I want to totally remove the code when the screen size is something instead of still having the code and doing display: none. How can I do it?
<div id="main">
<h1>One</h1>
</div>
const main = document.getElementById('main');
if(window.innerWidth <= 400) {
main.innerHTML = '<h2>Added By js</h2>';
}
else {
main.innerHTML = '';
}
Simply use the #media screen of css, I think you need to do this:
h1{
display: block;
}
h2{
display: none;
}
#media screen (max-width: 400px) {
h1{
display: none;
}
h2{
display: block;
}
}
doing this you tell the browser to set display:none of the h1 when the screen width is over 400px, you can do it too with height
If you want to do it with javascript, all you're missing are the events that will trigger your code
function yourFunction() {
const main = document.getElementById('main');
if(window.innerWidth <= 400) {
main.innerHTML = '<h2>Added By js</h2>';
} else {
main.innerHTML = '';
}
}
window.onload = yourFunction;
window.onresize = yourFunction;
So i want to make this responsive menu. On Desktop it looks like this:
And on Mobile it should look stacked overlapping everything under it but not pushing it down. So not like this:
(Before button pressed)
(After button pressed)
You can see that the Slideshow below is pushed down and the obvious misplacement of the menu on the button in general.
Plese help me to fix this, im a poor backend dev.
Here is my code:
function myFunction() {
var x = document.getElementById("menu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
.menu .icon {
display: none;
}
#media screen and (max-width: 965px) {
.menu a {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */
#media screen and (max-width: 965px) {
.menu.responsive {
background-color: white;
position: relative;
}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: left
}
}
<div class="mainheader">
<div class="logo">
<img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg">
</div>
<div id="menu" class="menu">
Unternehmen
Leistungen
Referenzen
Kontakt
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img class="bigicon" src="../bilder/menu.png">
</a>
</div>
</div>
So the anwer to fix the issue was to set the responsive menu class to absolute, also you have to use right: 0; so it stays in place.
After that i figured out that i could just move the menu links down since they are also absolute now in order to prevent them from overlapping the button.
Thanks for the effort of helping everyone ;)
function myFunction() {
var x = document.getElementById("menu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
.menu .icon {
display: none;
}
#media screen and (max-width: 965px) {
.menu a {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */
#media screen and (max-width: 965px) {
.menu.responsive {
background-color: white;
position: relative;
}
.menu.responsive a {
float: none;
display: block;
text-align: right
}
}
<img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg">
</div>
<div id="menu" class="menu">
<img class="bigicon" src="../bilder/menu.png">
<span>
Unternehmen
Leistungen
Referenzen
Kontakt
</span>
</div>
</div>
with out looking at whole page code here is what you need to do or something I would always check before going forward.
for css to work properly add this meta tag in head <meta name="viewport" content="minimal-ui, height=device-height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
secondly menu is something that should be stacked higher up on the interactive and display layer so it does not mess with other elements on the page. One way of doing this is to place the tag at the bottom of everything last on page (remember to css absolute positioning on the menu div) or zoom it up like +10000 should do.
please try not to add responsiveness after the fact like when user clicks this will create whole lot of problem going forward as computed vs initial values collide. Leave things to css as much as possible. It is good code from w3school follow its instructions as stated.
For the positioning issue calculate height of the image;
it is actually your icon that is being positioned every thing else is relative to where it should be. so move your icon as first item then every other anchor tag below it. this should solve your positioning issue.
Add z-index property to .menu.responsive class.
First time posting here and new to programming with just 3 days of experience.
I'm having some trouble getting my default button to be active instead of just focused. I've attempted to read other posts about this, but my lack of experience makes it hard for me to put 2 and 2 together.
The page is going into squarespace so I'm trying to do it all in one code block. I don't want the buttons to deactivate when the user clicks on other parts of the website, which it currently happens. (Even if they click on blank areas).
Thank you very much for any advice you can give me.
/* Change Button Size/Border/BG Color And Align To Middle */
.services {
width: 210px;
height: 135px;
padding: 0px;
border: 0px;
outline: 0px;
cursor: pointer;
color: #999999;
font-size: 20px;
text-align: center;
background: url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat;
/* As all link share the same background-image */
}
/* Set Mouseover Button Text and Current/Active Color */
.services:focus,
.services:hover,
.services:active {
color: black;
}
/* Position Button Text*/
divtext {
position: relative;
top: 90px;
}
/* Div Wrapper to format button areas. */
.servicesbuttonwrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* Div Wrapper to format revealed description text. */
.servicestextwrapper {
text-align: left;
margin-left: 100px;
margin-right: 32px;
top: 50px;
position: relative;
}
/* Change Image rollover position depending On Focus. */
.assets {
background-position: 0 0;
}
.assets:focus,
.assets:hover,
.assets:active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
.viz:focus,
.viz:hover,
.viz:active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
.software:focus,
.software:hover,
.software:active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
.more:focus,
.more:hover,
.more:active {
background-position: 0 -945px;
}
/* Hides intitial button descriptions. */
#assets,
#viz,
#software,
#more {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<body>
<!--Div wrapper so we can format positioning of buttons in CSS-->
<div class="servicesbuttonwrapper">
<!--Base buttons plus javascript functions for click behavior. This used to be <button class> instead of <a href> but I read somewhere this is better... seems to work ok.-->
<a href="javascript:void(0)" id="defaultstate" onclick="show('software');" class="services software">
<divtext>INTERACTIVE SOFTWARE</divtext>
</a>
<a href="javascript:void(0)" onclick="show('assets');" class="services assets">
<divtext>3D ASSET CREATION</divtext>
</a>
<a href="javascript:void(0)" onclick="show('viz');" class="services viz">
<divtext>3D VISUALIZATION</divtext>
</a>
<a href="javascript:void(0)" onclick="show('more');" class="services more">
<divtext>IMAGE CREATION</divtext>
</a>
</div>
<!--Base description text.-->
<div class="servicestextwrapper">
<div id="assets">3D Assets Description.</div>
<div id="viz">3D Visualization Description.</div>
<div id="software">Interactive Software Description.</div>
<div id="more">And More Description.</div>
</div>
<!--Javascript function to hide/show elements based on button press.-->
<script type="text/javascript">
function show(elementId) {
document.getElementById("assets").style.display = "none";
document.getElementById("viz").style.display = "none";
document.getElementById("software").style.display = "none";
document.getElementById("more").style.display = "none";
document.getElementById(elementId).style.display = "block";
}
</script>
<!--Javascript function to set first button as focus.-->
<script>
window.onload = function() {
document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>
Welcome to Stack Overflow.
So first thing to note, the :active pseudo element only applies when the user clicks (mouse-down) on something. You can see it here
The most common method is to apply the css class "active", and have a .active selector on whatever element you want to style.
Right now you have the buttons affected by hover and focus, so when the user clicks outside the button it loses focus.
You can solve this by changing a bit of CSS and javascript. The edited portions are marked by /* EDIT */
I would not recommend the last line where I exploit the fact that your function passes in the element ID, and that element ID matches the class of the button that was used to select it. A better way would to have show take the Javascript event as argument, then use the event.target to get the a tag clicked on, then use a getElementById on something like a data-target="more" attribute. This will allow you to change the CSS class without coupling the class to the implementation of the Javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<style>/* Change Button Size/Border/BG Color And Align To Middle */
.services {
width:210px;
height:135px;
padding: 0px;
border:0px;
outline:0px;
cursor: pointer;
color: #999999;
font-size: 20px;
text-align: center;
background: url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat; /* As all link share the same background-image */
}
/* Set Mouseover Button Text and Current/Active Color */
/* EDIT */
.services:focus, .services:hover, .services.active {
color: black;
}
/* Position Button Text*/
divtext {
position: relative;
top: 90px;
}
/* Div Wrapper to format button areas. */
.servicesbuttonwrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* Div Wrapper to format revealed description text. */
.servicestextwrapper {
text-align: left;
margin-left: 100px;
margin-right: 32px;
top: 50px;
position: relative;
}
/* Change Image rollover position depending On Focus. */
.assets {
background-position: 0 0;
}
/* EDIT */
.assets:focus, .assets:hover, .assets.active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
/* EDIT */
.viz:focus, .viz:hover, .viz.active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
/* EDIT */
.software:focus, .software:hover, .software.active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
/* EDIT */
.more:focus, .more:hover, .more.active {
background-position: 0 -945px;
}
/* Hides intitial button descriptions. */
#assets, #viz, #software, #more {
display: none;
}
</style>
<body>
<!--Div wrapper so we can format positioning of buttons in CSS-->
<div class="servicesbuttonwrapper">
<!--Base buttons plus javascript functions for click behavior. This used to be <button class> instead of <a href> but I read somewhere this is better... seems to work ok.-->
<divtext>INTERACTIVE SOFTWARE</divtext>
<divtext>3D ASSET CREATION</divtext>
<divtext>3D VISUALIZATION</divtext>
<divtext>IMAGE CREATION</divtext>
</div>
<!--Base description text.-->
<div class="servicestextwrapper">
<div id="assets">3D Assets Description.</div>
<div id="viz">3D Visualization Description.</div>
<div id="software">Interactive Software Description.</div>
<div id="more">And More Description.</div>
</div>
<!--Javascript function to hide/show elements based on button press.-->
<script type="text/javascript">
/* EDIT */
function show(elementId) {
document.getElementById("assets").style.display = "none";
document.getElementById("viz").style.display = "none";
document.getElementById("software").style.display = "none";
document.getElementById("more").style.display = "none";
document.getElementById(elementId).style.display = "block";
// get a list of the buttons with ".services" class
const buttons = document.querySelectorAll(".services");
for(let button of buttons) {
// remove ".active" class
button.classList.remove("active");
}
// add the active class to element button specified by argument
document.querySelector("." + elementId).classList.add("active");
}
</script>
<!--Javascript function to set first button as focus.-->
<script>
window.onload=function(){
document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>
Background: I am using a snippet of JQuery to assign an event to an element based on its ID. That event slides a menu from the left side of the screen.
Question: When the screen size changes to < 710px I am going to hide the original element and show a new element (which is just a different icon). But I want that new element to trigger the same event.
Should I just assign the event to both elements one after another or can I combine that into one Event?
Below is an example of my HTML JS and CSS
PLEASE NOTE THE TRIGGER WILL NOT WORK UNLESS THE TEST WINDOW IS ABOVE 711PX
window.onload = function(){
document.getElementById('megga-nav-toggle').addEventListener('click', function () {
var documentBody = $('#megga-global-menu');
documentBody.toggleClass('is-active');
if (documentBody.hasClass('hide-megga')) {
documentBody.removeClass('hide-megga');
return;
}
documentBody.addClass('hide-megga');
});
document.getElementById("megga-global-menu").addEventListener("mouseleave", menuHide);
};
function menuHide() {
document.getElementById("megga-global-menu").classList.add('hide-megga');
}
#megga-global-menu {
background: red ;
position: fixed;
top: 50px;
bottom: 0;
left:0px;
width: 200px;
z-index: 1000000;
transition: ease all .6s;
}
#megga-global-menu.hide-megga {
left: -200px;
transition: ease all .6s;
}
#megga-nav-toggle {
display: inline-block;
z-index:999998;
font-size: 30px;
color: #000;
cursor: pointer;
}
#media screen and (min-width: 710px) {
#megga-navmobile-toggle {
display:none;
}
}
#media screen and (max-width: 710px) {
#megga-nav-toggle {
display:none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="megga-nav-toggle">FULL SCREEN</span><Bn/><Br/>
<span id="megga-navmobile-toggle">MOBILE SCREEN</span>
<div id="megga-global-menu" class="">
My slide out menu goes here!
</div>
I'm not sure I understand your problem, but if you want just show different icon based on screen size, why not put both of them in the same element and display the wanted icon with #media?
#media screen and (min-width: 710px) {
#megga-navmobile-toggle-icon { display: none; }
}
#media screen and (max-width: 710px) {
#megga-nav-toggle-icon { display: none; }
}
And your html should be:
<div id="megga-nav-toggle">
<span id="megga-nav-toggle-icon">FULL SCREEN</span><Bn/><Br/>
<span id="megga-navmobile-toggle-icon">MOBILE SCREEN</span>
</div>
I am using this code to print a specific div
CSS
<style type="text/css" media="print">
* {
display:none;
}
#printportion {
display:block;
}
</style>
Script
<script>
var printCalender=function () {
setTimeout(window.print, 1500);
}
</script>
When I run my page in google chrome, the print preview window is blank and shows 'print preview failed'
The issue is that regardless of where your targeted element is positioned in the DOM, your * selector will match any and all parents it has (including <html> and <body>) so the element will never be shown.
See the below example:
* {
display: none;
}
#showme {
display: block;
}
<div id="showme">This will never be shown</div>
As Nit said the problem is with your * selector. You can use one selector with #media print like this:
#media print {
body.print-element *:not(.print) {
display: none;
}
}
Here you have a working example where you can print any clicked element and/or the entire normal HTML document:
function print_this(elem) {
document.body.classList.add('print-element')
elem.classList.add('print')
window.print()
document.body.classList.remove('print-element')
elem.classList.remove('print')
}
document.querySelectorAll('div').forEach(elem =>
elem.onclick = () => print_this(elem))
div {
display: inline-flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: #e9a9c7;
color: #39464e;
cursor: pointer;
}
#media print {
body.print-element *:not(.print) {
display: none;
}
}
<div>Print 1</div>
<div>Print 2</div>
Note: if you cannot see colors remember to click Background Graphic (Chrome) or similar in your print options.