I am using the code below to show a message when a mobile device (smartphone or tablet) is in portrait mode. This works fine!
However, I need code that when the user clicks on the X-button, the message does not appear anymore as long as ANY of the pages of the website are being visited in that session.
But if the website is closed; at the next visit the message should appear again when the website is viewed in portrait mode.
How can this be done?
html,
body {
width: 100%;
height: 200%;
}
#warning-message {
display: none;
}
#media only screen and (orientation:portrait) {
#warning-message {
display: block;
}
}
#media only screen and (orientation:landscape) {
#warning-message {
display: none;
}
}
#landscape-button {
background-color: #2A3847;
color: #ffffff;
border-radius: 0px;
border: 1px solid white;
padding: 10px 10px 10px 10px;
float: right;
margin-top: -25px;
margin-right: -15px;
font-size: 1.3em;
}
Please open in "full page" mode and scale your window to a portrait size to see the message appear.<br><br>
<div id="warning-message" style="position:fixed; margin: 0 auto 0 auto; z-index: 99999999; background-color: #2A3847; width: 90vw; min-height: 90vh; text-align:center; padding:25px 15px 35px 15px; right: 0;
left: 0;
margin-right: auto;
margin-left: auto;">
<button type="button" id="landscape-button">X</button>
<p style="font-size: 1.3em; color: #ffffff; positie:absolute; text-align:center;"><span style="margin: 0 0 0 25px; text-align:center; font-size: 2em; letter-spacing: -0.04em;">please rotate your screen</span><br><br>This website is best viewed in landscape mode. So please, rotate your mobile device, and if activated also disable
your screen rotation lock. If you prefer to remain in portrait mode, ignore this message and close it at the "x".</p>
</div>
You'll want to use sessionStorage - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
When user clicks "X":
sessionStorage.setItem('closed', 'true');
When re-loading the page:
var data = sessionStorage.getItem('key');
if (data == 'true') {
// do nothing
} else {
// display block
}
Below is what works, taking into account that the session storage only starts after the "X" button is clicked. So even if the page is reloaded before the close button "X" is clicked, the message will still appear when the window is sized to portrait mode or if the mobile device is held in portrait mode. After the "X" button is clicked, the message will no longer appear upon reload of the page within the same session.
See the example here!
$(document).ready(function() {
var data = sessionStorage.getItem('isfirst');
if (data == undefined) {
$("#warning-message").addClass("shown-modal");
} else {
$("#warning-message").hide();
}
});
//close the pop
$("#landscape-button").on('click', function() {
sessionStorage.setItem('isfirst', 'true');
$("#warning-message").hide();
});
Related
I want to reuse the code and make it work for both mobile devices and other devices. Specifically, when I am on a mobile device I want the same animation but with different text to appear and when I am on a laptop or desktop, I want the same animation with different text to appear.
So essentially, there should be one single animation but it should have text that works differently for mobile devices and another text that works for laptops or desktops or larger screens.
Code:
document.addEventListener("DOMContentLoaded", function(event) {
(function() {
requestAnimationFrame(function() {
var banner;
banner = document.querySelector('.exponea-banner3');
banner.classList.add('exponea-in3');
return banner.querySelector('.exponea-close3').addEventListener('click', function() {
return banner.classList.remove('exponea-in3');
});
});
}).call(this);
});
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html3,
body3 {
width: 100vw;
height: 100vh;
position: relative;
}
.exponea-banner3 {
font-family: Roboto, sans-serif;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #2e364d;
color: #ebeef7;
padding: 30px 80px 30px 35px;
font-size: 16px;
line-height: 1;
border-radius: 5px;
box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
opacity: 0;
transition: opacity 0.2s;
display: none;
}
.exponea-banner3.exponea-in3 {
opacity: 1;
transition-duration: 0.4s;
}
.exponea-banner3 .exponea-close3 {
position: absolute;
top: 0;
right: 0;
padding: 5px 10px;
font-size: 25px;
font-weight: 300;
cursor: pointer;
opacity: 0.75;
}
.exponea-banner3 .exponea-label3 {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
.exponea-banner3 .exponea-text3 {
margin-bottom: 8px;
}
.exponea-banner3 .exponea-count3 {
font-weight: 500;
}
.exponea-banner3 .exponea-label3 {
text-align: left;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
.exponea-banner3,
.exponea-close3,
.exponea-text3,
.exponea-label3,
.exponea-label3 {
z-index: 10;
}
.open3 {
display: block;
}
<div class="exponea-banner3 open3">
<div class="exponea-close3">
×
</div>
<div class="exponea-text3">
Hi There! Thanks For Stumbling Upon My Website!
</div>
<div class="exponea-label3">
- Hussain Omer
</div>
</div>
The text in the above animation should only work on laptops/desktops/larger screens
Now, I want the same animation but the different text that says "Hi, please use a large device for the best experience" to work only on mobile devices.
When the user is on the mobile device, the text should say what I said above and when the user is on laptops/desktops/large screen then the text should say what I sent in the code. Any suggestions on how I can toggle the text in the animation?
tl;dr: I want the same animation but when the user is on a mobile device, it should have a text saying "Hi, please use a large device for the best experience" but when the user is on a laptop/desktop or large screen device, then the text should say what it is in the code I sent above.
Update
This is what my output looks like:
enter image description here
You can use matchMedia to check media queries and change text accordingly.
document.addEventListener("DOMContentLoaded", function(event) {
// Media query example
const isMobile = window.matchMedia('(max-width: 360px)')
(function() {
requestAnimationFrame(function() {
var banner;
banner = document.querySelector('.exponea-banner3');
if(isMobile) {
document.querySelector(".exponea-text3").textContent = "Hi, please use a large
device for the best experience"
}
banner.classList.add('exponea-in3');
return banner.querySelector('.exponea-close3').addEventListener('click', function() {
return banner.classList.remove('exponea-in3');
});
});
}).call(this);
});
I am making a mobile web application (using JavaScript) for chatting, so think of the user interface like Viber or WhatsApp or any other chat application, but in a browser instead.
You can see alive demo here: https://mandarini.github.io/chatsim/
You can access this from your phone. The problem is clearly illustrated.
You can find the code here: https://github.com/mandarini/chatsim
I have an input form box with position fixed that stays at the bottom of the browser window. The messages are above the text box, and they scroll behind it, like the message boxes do in WhatsApp.
When the virtual keyboard on my phone appears, that is when I am about to type something, the text box is indeed pushed up, and is fixed at the bottom of the viewport screen, right above the keyboard as expected.
However, the chat messages are not pushed up. As a result, the latest messages are hidden behind the keyboard.
Image 1: Keyboard is hidden
Image 2: Keyboard is shown, messages are hidden behind it
Image 3: Expected result, keyboard is shown, messages are pushed up
Note 1: One main problem is that there is no javascript event that catches the expanse/collapse of the virtual keyboard.
Note 2: The onfocus event does not necessarily capture the expanse/collapse, since a virtual keyboard can be hidden, but still the text box may remain focused.
Below you can find a simplified version of my code, which mocks the posting of messages.
I want the newly posted messages to appear above the virtual keyboard on mobile devices.
function addMsg(e) {
e.preventDefault();
var message = document.createElement("div");
var user = document.createElement("p");
var text = document.createElement("p");
user.appendChild(document.createTextNode("User"));
text.appendChild(document.createTextNode("Message message"));
message.appendChild(user);
message.appendChild(text);
message.classList.add("chat-msg");
document.getElementById("chats").appendChild(message);
message.scrollIntoView();
return false;
}
.chat-container {}
.chat-messages {
overflow: scroll;
padding-bottom: 66px;
/* leaves space for input */
}
.chat-form {
width: 100%;
margin: 0;
position: fixed;
bottom: 0px;
background-color: #ffffff;
border-top: 1px solid rgba(0, 0, 0, 0.12);
padding: 7px 8px 7px 8px;
}
input[type=text] {
width: 96%;
padding: 17px 20px;
margin: 0;
background-color: #fafafa;
box-sizing: border-box;
border-radius: 1px;
border: 0px;
box-shadow: 0;
}
.hidden {
display: none;
}
.chat-msg {
padding: 8px;
margin-bottom: 8px;
font-size: 14px;
width: auto;
max-width: 90%;
clear: both;
word-wrap: break-word;
border-radius: 3px;
border-style: solid;
border-width: 1px;
}
.chat-msg p {
margin: 0;
padding: 0;
text-align: left;
}
<div id="chat" class="chat-container">
<div id="chats" class="chat-messages">
</div>
<form onsubmit="addMsg(event)" class="chat-form">
<label>
<input type="text">
</label>
<input class="hidden" type="submit" value="Post" />
</form>
</div>
I believe you can use the 'focusout' event for this.
document.addEventListener('focusout', e => {
window.scrollTo(0, 0);
});
Also sent a PR: https://github.com/mandarini/chatsim/pull/1
I have a link at the very top of the page called "Skip Navigation", that appears on the screen every time user presses Tab, and if he presses Enter while "Skip Navigation" is in focus, it takes him to the #main part of the page, so that he skips top navigation and goes directly into the main area. It all works perfect in Chrome, Firefox, Safari. The issue appears in IE (I tested both ie9 and ie11).
Scenario in IE:
Presses Tab - "Skip Navigation" appears on the page - presses Enter -
refreshes the page with #main added into the url - presses Tab - "Skip
Navigation" appears on the page
Does anyone know any solution for IE to force skipping navigation and going to the main part of the page? Any help will be highly appreciated.
#skip a {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip a:focus {
left: auto;
font-size: 20px;
position: static;
width: auto;
height: auto;
}
nav {
background: #847577;
color: white;
padding: 1em;
text-align: center;
}
nav a {
color: white;
}
#main {
background: #E5E6E4;
padding: 1em;
}
#main a {
color: black;
}
<div id="skip">Skip navigation</div>
<nav>
Home
About Us
</nav>
<div id="main">
Main Content On The Page Link
</div>
jsfiddle: https://jsfiddle.net/13p0eo43/
I think you have two options if it doesn't work with the standard way as you describe:
Focus the first focusable element following #main using JavaScript .focus() method. Your difficulty here will be determining which element must be focused, as it might not always be so simple.
Set tabindex=-1 on #main and focus #main using JavaScript .focus() method upon clicking on the link. The next time the user press tab, the next focusable element will take focus, and #main can't be focused again when pressing shift+tab (because of the value -1).
Add tabindex="-1" to the div, no need for javascript.
The following is working for me in IE11.
#skip a {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip a:focus {
left: auto;
font-size: 20px;
position: static;
width: auto;
height: auto;
}
nav {
background: #847577;
color: white;
padding: 1em;
text-align: center;
}
nav a {
color: white;
}
#main {
background: #E5E6E4;
padding: 1em;
}
#main a {
color: black;
}
<div id="skip">Skip navigation</div>
<nav>
Home
About Us
</nav>
<div id="main" tabindex="-1">
Main Content On The Page Link
</div>
i'm trying to make a BTT (Back to Top): it's too easy, when the user scroll the entire window (viewport) appear the BTT on the bottom side of content (for example in web-site near the footer). So if the height's content is less than height's window the BTT is hidden.
The problem is that my code doesn't work on mobile (chrome, safari, firefox), while with desktop browser but with the resize window i don't have problems (eccept with chrome). I don't understand what is the problem...:
if($('body,html').scrollTop()< $(window).height()){
$('#btt').css('display','none');
}
$('#btt').click(function(){
$('body,html').animate({scrollTop: 0},400);
});
$(window).scroll(function(){
if($('body,html').scrollTop()< $(window).height()){
$('#btt').css('display','none');
}
else{
$('#btt').css('display','block');
}
This CSS:
#btt {
background: #a0a0a0 none repeat scroll 0 0;
border: 1px solid #404040;
border-radius: 10px;
float: right;
height: 30px;
margin-bottom: 20px;
margin-top: 20px;
width: 90px;
cursor: pointer;
}
#spanbtt {
align-items: center;
color: #000;
display: flex;
font-size: 15px;
height: 100%;
justify-content: center;
width: 100%;
}
#bttspanid {
font-size: 15px;
margin-left: 10px;
}
And this HTML:
<div id="btt">
<div id="spanbtt">Torna su <span id="bttspanid" class="fa fa-arrow-up"></span></div>
</div>
This is jsfiddle:
https://jsfiddle.net/3z6yka72/
I tried also to replace $(window).height() with window.outerHeight but i have however problems (with mobile browser the BTT is visible, but it is visible also if the height content is less than height window, while with desktop chrome the BTT is hidden)...
I hope that you can help me and sorry for my english.
Thanks a lot!
Setup a var for the height of the window so it is stored.
here is an updated fiddle for you.
$('#btt').click(function() {
$('body,html').animate({
scrollTop: 0
}, 400);
});
$(window).scroll(function() {
var windowH = $(window).height();
if ($(this).scrollTop() < windowH) {
$('#btt').removeClass('show');
} else {
$('#btt').addClass('show');
}
});
https://jsfiddle.net/3z6yka72/1/
Hope it helps.
I've searched high and low but can't find a solution to this exact problem.
On a desktop browser, when the user hovers over an image, a div appears and they can click the link within the div if they want. However, on a mobile device, the hover is triggered by a click. If the user clicks in just the right spot, even though the div isn't visible yet, they can accidentally click the anchor and navigate away from the page. (In other words, the div goes from display:none to display:block at the same time that the link is clicked.)
I want to prevent that accidental click from happening on mobile browsers, however I still want the link to be usable once the div is visible.
My code:
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | Email John
</div>
</div>
Any ideas? HTML, CSS, JS and jQuery solutions are all welcome! (Maybe something more clever than what I can think of using pointer-events:none along with some jQuery?)
I'm actually about to encounter the same problem in a project, and jotted down a potential solution. Haven't tested it yet but it might help you out. The link should only trigger if the element has a display that's not 'none':
var popup = $('.popup'),
display = popup.css('display');
if (!(display === 'none')) {
popup.on('click', function(e) {
e.preventDefault();
});
}
I found a solution but it's not elegant. I wanted to post it in case someone has this problem in the future and just needs something that will work!
I added a fake link in a span with the real link then set new display styles for it and the real link based on the parent span is being hovered over.
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.staffpic a {
display: none; /* Added */
}
.staffpic.link:hover a {
display: inline; /* Added */
}
.staffpic.link:hover .fakelink {
display: none; /* Added */
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | <span class="link">Email John<span class="fakelink">Email John</span></span>
</div>
</div>
I'd still love a cleaner solution without all this added html if someone has it.