How to make a div popup on a certain screen width - javascript

Hi I'm trying to build a div popup so when a users screen is below a certian (number px) it popups up saying this is recommended for a PC or tablet please help. I'm good at html, css, but i'm not good at JS/JavaScript.
Here is my DIV:
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Recommended to be used on PC or tablet.
</div>
Here is my CSS for the DIV:
.alert {
padding: 10px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
border-radius: 5px;
}
.closebtn {
margin-left: 15px;
color: black;
font-weight: bold;
float: right;
line-height: 15px;
font-size: 20px;
cursor: pointer;
transition: 0.3s;
background-color: white;
border-radius: 20px;
height: 13px;
}
.closebtn:hover {
color: darkred;
}
Please don't dislike this page, But other than that please help me I'm very bad at JavaScript.
I tried looking up so many solutions but found none, but I know there is a solution and I'm expecting a code that gets the job done note again that I want a div not to show unless the screen size is below a certian px number. Thank you.

It's fairly straightforward using media queries. Some info on w3Schools here.
.alert {
display: none; /* at >600px width, don't display this */
/* set the css up below so when we do display it, it appears correctly */
position: fixed; /* position this fixed to the viewport */
inset: 0; /* and make it expand to the top, bottom, left and right edges */
background-color: rgba(255,255, 255, 0.9); /* apply a background to it to fade the contents out a bit using an opacity of 0.9 */
}
#media screen and (max-width: 600px) { /* apply this when the screen is less than or equal to 600 px wide */
.alert {
display: grid; /* use grid ... */
place-items: center; /* .. to put the message in the center of the screen */
}
}
<div class="alert">
<div class='alert-message'> <!-- added this to contain the message details so they appear together -->
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Recommended to be used on PC or tablet.
</div>
</div>
<main>
<h1>This is a title</h1>
<p>This is some text</p>
</main>

Related

Hide text completely if it overflows with css

I would like to hide text completely if it overflows.
overflow: hidden won't work for me here, because it will cut off the text.
I would like to use something that "detects" if the text is cut off, and if so it should be removed or not displayed. In this case only one word (or if you want so the word that would get cut).
A pure CSS solution if this is possible would be great. If there is no other way, JS would also be kind of ok.
For my example see the following images. The arrow is inserted by a pseudo class ::before
How it looks when it's fully displayed
How it looks like now when it overflows
What I want it to look like when it overflows
.somediv {
width: 100%;
}
.somediv_2 {
width: 20px;
}
.someanchor {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
background-clip: padding-box;
border-radius: 0;
background: transparent;
font-weight: 500;
color: #000;
box-shadow: inset 0 0 0 1px #000;
line-height: 1.75rem;
padding: .125rem .625rem .125rem .625rem;
display: inline-block;
}
.someanchor::before {
font-family: "Font Awesome 5 Free";
content: "\f0d7";
width: 100%;
height: 100%;
}
<div class="somediv">
<a class="someanchor">
Info
</a>
</div>
<div class="somediv_2">
<a class="someanchor">
Info
</a>
</div>
I made the second button smaller to simulate it. In my case it gets smaller by resizing the viewport, because it's pushed by other elements in a table.

Hover state does not work when applying z-index

The problem is I have 2 divs: one container a link and another a box shaped container. The link has a position:fixed; and it flies over the container div, so I tried to give the link a z-index with a negative value, turns out the
hover state does not work when applying z-index with a negative value for the anchor Unless I scroll the same amount of the height of the container div. So I scroll like 3 times and the hover state works again.
HTML
<div id="div-1">
<div class="container"></div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
</div>
CSS
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:0;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
an important thing is:
The container is hidden by Jquery, unless I click a certain button.
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
I have resorted to every possible (other ideas) I could think of. I tried to do the opposite meaning giving the container a z-index positive vales and leave the anchor, but that leaves the same problem
update
I will try to change the css property "z-index"but only when the the container button is toggled on
so the link will have z-index:-9; but only when the container is toggled to be viewed and when it is toggled back off the z-index will be removed or not applied.
I can't really figure how this will be written with jquery I tried this
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
$("#div-2 a").css("z-index", -9);
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
this only result when I toggled the container on the z-index will be applied, but when i toggle it of it remains, how to remove the z-index or make it equal to z-inedx:99; when the container is toggled off?
Only any other answer for the problem is appreciated.
It's not clear what you want exactly, but the pics helped, although it appears that you want the link above the container, it looks as if you don't?
the whole purpose is to make the anchor in a lower index, so when the container is toggled on/ viewed, the link won't be setting on top of the container.
But you want the link to always react when hovered upon. So I assume that you can't figure out why it's not hovering when the container is open and you can still see the link, so logically you'd expect to at least be able to hover over the visible portion of the link.
It's not jQuery and it's not the .container. It's the .container's container A.K.A. #div-1. #div-1 width is always 100% and even if you didn't have that style, it would be 100% still because that's what blocks have if there isn't an explicit width assigned to it.
Solution: Give #div-1 a smaller width.
You have a fixed link yet no coords. You can't expect a fixed element to stand it's ground and behave like a fixed element if it doesn't know where to stand. Also if you have any positioned elements and you want interaction between other elements, make those elements positioned as well, div-1 is now position:relative and the z-index properties of the link and div-1 function correctly now.
Solution: Give #div-2 a top and left or right and bottom properties. Give #div-1 a position property so that the z-index functions properly.
All details are commented in the source.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#div-1 {
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
position: relative;
z-index: 1;
border: 1px solid red;
width: 200px;
/*Enable this and it will block link*/
/*width:100%;*/
height: 290px;
}
.container {
/* This saves you an unnecessary step in jQuery */
display: none;
width: 200px;
height: 290px;
background: orange;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
position: fixed;
font-weight: 500;
font-size: 1.09em;
text-align: center;
background-color: none;
text-decoration: none;
outline: none;
/* It's not clear whether you want the link above or
| below the container. If above, simply change to
| z-index: 2
*/
z-index: 0;
/* If you have a fixed element give it coords, otherwise
| it doesn't know where it should stand and behavior
| will be unexpected.
*/
top: 10%;
left: 125px;
}
#div-2 a:hover {
background: red;
color: white;
}
/* FLAG is just to test the accessibility of the link */
#FLAG {
display: none;
}
#FLAG:target {
display: block;
font-size: 48px;
color: red;
}
</style>
</head>
<body>
<button id='button-f'>F</button>
<div id="div-1">
<div class="container">Container is open</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
<span id='FLAG'>This link is accessible now!</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/* This is the jQuery you need to accomplish what you want.
| The rest was redundant and unnecessary.
*/
$(document).ready(function() {
$("#button-f").click(function(e) {
$(".container").toggle();
});
});
</script>
</body>
</html>
Have you tried assigning a z-index to #div-2?
You'll need to assign it a position to be able to give it a z-index. Try this:
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:2;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
position: relative;
z-index:1;
}
I don't know what actually in your code but the js you provide look at the if section you have (##button-f) so we find an error here and do we actually need this line ??like we also don't need the line 'container'.hide() in JS. Now you have to scroll for the 'a' certain height because yous set height for #div-1 which is not hidden. So that's amount of height you have to scroll.
So What I change on your code
1. cut the height of div-1 and place it to .container class. you dont provide the a:hover class so I add that to and remove some unnecessary css you have. If you have any other Question ask me in comment LIVE ON FIDDLE
$(document).ready(function() {
$("#button-f").click(function() {
$(".container").toggle();
});
});
button {
width: 13%;
height: auto;
}
#div-1{
width:100%;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
.container {
height:290px;
display:none;
border: 1px solid red;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
positon:fixed;
float:right;
font-weight: 500;
font-size: 1.09em;
text-align: center;
text-decoration: none;
border-radius: 10px;
}
#div-2 a:hover {
background: black;
color: white;
}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<button id="button-f">
button
</button>
<div id="div-1">
<div class="container">tagasdgasdgasdgas</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
<a href='#'>This is a link</a>
</div>
</body>

Changing positioning of elements depending on user screen size. How do I stack these elements for mobile devices?

I'm currently designing a website and there's a problem regarding the website footer.
When viewed on Desktop, the footer looks like this:
Website Footer viewed on Desktop
The code used to create this look is:
<meta name="color:Footer Background Color" content="#000000">
CSS CODE
/*-----------------------------
footer
-----------------------------*/
.bottom-footer {
background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
color: solid #000000;
}
.footer-message {
display:flex;
justify-content:space-between;
list-style-type:none;
width:500px;
}
.bottom-footer {
clear: both;
height: 80px;
width: 100%;
position: relative;
bottom: 0;
z-index: 1
}
.bottom-footer p {
font-size: 1.4rem
}
.footer-message {
float: left;
margin-top: 33px;
margin-left: 20px
}
.creation {
float: right;
display: block;
margin-top: 33px;
margin-right: 20px;
font-size: 1.4rem
}
.back-to-top {
position: absolute;
margin-top: 20px;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 30px
}
.back-to-top a {
font-size: 3rem;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.back-to-top a:hover {
opacity: .5;
text-decoration: none
}
.back-to-top .fa-angle-up {
font-size: 4rem
}
footer.bottom-footer {
height: 150px
}
.footer-message {
padding: 40px 0 0
}
.creation,
padding: 10px 0 0
}
.creation,
.footer-message {
float: none;
text-align: center;
margin: 0
}
.back-to-top {
margin-top: 0;
top: 0
}
HTML CODE
<footer class="bottom-footer">
<p class="footer-message">
Home
About
News
Musings
Music
Media
Shows
Store
Contact
Ask
</p>
<a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
<div class="creation" style="text-decoration:none">
© 2016 Sam Joel Nang. All Rights Reserved.
</div>
</footer>
Now the problem is, when (for example) the window's width is decreased, the footer elements seem to scatter, the .creation element goes out of the footer and goes below.
What I want to do (when website is viewed in small window width, or on Mobile Devices screens) is to 'center' and 'stack' the footer elements (.footer-message, .back-to-top, and .creation) in the following order: top: .back-to-top, middle: .footer-message, and bottom: .creation, with the Footer Background Color still #ffffff. A small photo edit can represent what I mean:
Ideal Website Footer look on Mobile Device or small Desktop window width
I hope someone can help me. Thank you so much.
Introducing media queries
In order to achieve what you're looking for, you can use media queries in CSS.
For example, if you want to stack the footer elements at a screen width of 480px or less, the following media query will allow you to style for that scenario only:
#media (max-width: 480px) {
// Styles here
}
Given that, let's get on to the point of stacking. You have different position attributes currently on the elements you're trying to stack. The easiest way to stack elements on top of one another is to use the properties display: block; and float: left;. This way, the elements will span the width of their container and appear in the order they are in inside the document's HTML.
Let's take a look at how you might go about that:
#media (max-width: 480px) {
.footer-message {
float: left;
display: block;
}
// center the links inside footer-message
.footer-message a {
text-align: center;
width: 100%;
}
.creation {
margin: 0 auto; // center it
display: block;
}
.back-to-top {
position: relative; // absolute positioning removes the element from document flow so we want to go relative
display: block;
margin: 0 auto; // center it
}
}
Note I simply removed the other properties since they're applied at all screen sizes already. You may want to alter those inside this media query in case the new styles affect their layout or you'd like it to differ for mobile.
Hope that helps!
UPDATE: I just noticed the part about you wanting to center the elements, I've added some code above to do so.

How do I make google maps map mobile friendly?

I have a problem with the size of the google maps map.
What I would like is to have 100% width of the map and div paragraph. See image:
It works on computers as you can see. But it's not responsive width, and that is the problem.
CSS:
#map_canvas { // the map
height:600px;width:800px;
}
.google_map {
position:relative;
float: left;
}
.paragraph { // text and stuff on the right
float: left;
padding-left:5px;
display: inline;
}
HTML
<div class="google_map">
<div id="panel">
<div ><input onclick="deleteMarkers();" type=button value="Rensa"></div>
</div>
<div id="facit"></div>
<div id="map_canvas"></div>
</div>
<div class="paragraph">
blablabla
</div>
If I change the width of map_canvas to 100% the result is ~100 px.
I tried to create a div that holds both map_canvas and paragraph with the width 100% and then to set width of the map to XX% but that again got interpreted as xx px.
Because the map is 800 px wide it becomes very hard to use on mobiles, I have no problem with map_canvas comes above paragraph on mobiles if that is a solution.
In short I need on computers the width to be say 800px and on mobiles 100%.
EDIT:
#map_canvas {
width:100%;
min-height:600px;
}
Becomes:
EDIT:
CSS panel
#panel {
position: absolute;
top: 10px;
left: 65%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;
}
#panel, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}
#panel select, #panel input, .panel select, .panel input {
font-size: 15px;
}
#panel select, .panel select {
width: 100%;
}
#panel i, .panel i {
font-size: 12px;
}
#panel2 {
position: absolute;
top: 10px;
left: 73%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;
}
#panel2, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}
#panel2 select, #panel2 input, .panel select, .panel input {
font-size: 15px;
}
#panel2 select, .panel select {
width: 100%;
}
#panel2 i, .panel i {
font-size: 12px;
}
Panel is the button you see on the image, Panel2 is a button that appears when you click once on the map, positioned to the right of the first button.
Try this:
#map_canvas {
width:100%;
min-height:600px;
}
Hope this help.
You could use CSS3 #media tags in your CSS. Including those you are able to set the width of your map according to the screen size of the device. Take a closer look to this site if you want to determine which device is used. You can define specific rules after which certain parts of your CSS are included or not, depending on the conditions you define in your file. After including this your css file could look like this:
#media (max-width: 800px) {
#map_canvas{
/*youre custom style for devices which have a maximum
screen size of 800px and therefore
can not display your map correctly*/
}
}
You can read more about this topic at this site.
Note that you can also include media tags in your <link> tag like this:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 800px)" href="small-device.css" />
For more information you should take a closer look on this site.
Another way to determine which device is used is to use jQuery, JavaScript or PHP. Since current mobile device browsers should be able to use CSS3 I would recommend to use the media tags.

Javascript function delete media query effect

I am working on a website that's look like this image:
The idea is when clicking on the button of the aside menu the aside menu will close and the bigwrapper will expand its size to fit the blank space so the result will look like this
I have written a function in Javascript to this and it just worked right, however, I wanted to make a media query that let the menu and the menu button disappear when the screen size get less than 840px it also worked
Now the problem is if someone clicked the button before the media query executed the media query effect will get disabled I think that javascript function delete the media query effect how can I fix that here is the code
<div id="mySidenav" class="sidenav">
<img class="menuicons" src="images/icons/menu/home2.png" alt="">Home
<img class="menuicons" src="images/icons/menu/offer.png" alt="">Offers
<img class="menuicons" src="images/icons/menu/cart4.png" alt="">Cart
<img class="menuicons" src="images/icons/menu/about.png" alt="">About us
<img class="menuicons" src="images/icons/menu/contact us.png" alt="">Contact us
</div>
<div id="menu_button" onclick="nav();categoriesScaler()">
<img src="images/icons/menu2.png" alt="Not availabale" />
</div>
<div id="bigwrapper">
<!--Some content goes here-->
</div>
here is the function
<script>
var hidden = false;
function nav()
{
if(hidden == false)
{
closeNav();
hidden = true;
}
else
{
openNav();
hidden = false;
}
}
function openNav()
{
document.getElementById("mySidenav").style.width = "30%";
document.getElementById("bigwrapper").style.width = "60%";
document.getElementById("bigwrapper").style.marginLeft = "35%";
}
/* Close/hide the sidenav */
function closeNav()
{
document.getElementById("mySidenav").style.width = "0";
document.getElementById("bigwrapper").style.width = "90%";
document.getElementById("bigwrapper").style.marginLeft = "5%";
}
</script>
here is the css for bigwrapper and sidenav at the end will be the media query
/* The side navigation menu */
.sidenav {
height: 800px; /* 100% Full-height */
width: 30%; /* 0 width - change this with JavaScript */
/*position: relative; /* Stay in place */
z-index: 1; /* Stay on top */
/* top: 0;
left: 0;*/
background-color: #292929; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.4s; /* 0.5 second transition effect to slide in the sidenav */
float: left;
box-sizing: border-box;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
margin-bottom: 25px;
transition: 0.3s;
font-size: 30px;
font-weight: bold;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/*big wrapper*/
#bigwrapper
{
border : 1px solid #000;
width : 60%;
margin : 0 5% 0 35%;
min-height: 800px;
background: #F5F5F5;
padding: 3%;
box-sizing: border-box;
transition: 0.4s;
}
here is the media query
#media screen and (max-width : 840px)
{
.sidenav,#menu_button
{
display: none;
}
#bigwrapper
{
width: 90%;
margin-left: 5%;
}
}
Sorry cause the question is too long.
The widths set by your openNav and closeNav functions seem to be in line with the css, so we can simply use those functions based on width, testing using resize event.
I think the following should work, and the nav should reappear when the browser goes back to > 840px. Add this at the bottom of your script:
window.onresize=function(){
if (window.outerWidth <= 840) {
closeNav();
} else {
openNav();
}
}
Also your button is not visible (outside media query), so add this to your CSS:
#menu_button {
display: block; /* or similar style */
}
BTW, this would be a lot simpler using a class based system. Instead of setting styles you could add classes. When clicking the button you could add .open class to .sidenav (and next button click remove .open). Then in your media queries you could style .sidenav.open { display:none} You could do similar things with the width of the other elements. You can also check if .sidenav has this .open class instead of using var hidden. Much simpler.

Categories