Button behind text only on mobile - javascript

I am trying to do a very simple quiz like this one:
https://www.sitepoint.com/simple-javascript-quiz/
I tried to make it more responsive and added this line:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
It worked fine but when I add a long text on the alternatives of each question, the button "Next Question" stay behind the text, only on mobile (iphone 6, safari).
I tried to add a z-index: 1000; and nothing changed:
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
z-index:1000;
}

So, there's a few things wrong here. As said above you need to remove the height from .quiz-container and remove the absolute positioning from .slide.
What I would suggest is that you add display: none; to slide then your active style to display:block - this will correctly display the button where it should be. With that said, you will lose the fade effect. You'd need to add this CSS to get it back. Hope this helps!
.quiz-container {
position: relative;
margin-top: 40px;
}
.slide {
width: 100%;
opacity: 0;
display: none;
}
.active-slide {
opacity: 1;
display: block;
}

You set position: absolute to your quizz questions, so they will ignore the space of every element you set in HTML.
A large z-index will only put an element above another, that's the why you see the quizz questions above the button.
The problem will be solved if you increment the height of quiz-container on mobile screen (try use #media screen).
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I recomend you to find another way to put your questions at the top of page instead using position: absolute

The problem really is that your quiz-container div has a fixed height of 200px, and you can't make it fluid because your slides have position:absolute, which removes them from the flow and prevents the parent growing in height accordingly.
So you need to re-think how to go about this.
An interesting approach would be to use flexbox, controlling which slide to show with the order property.
.quiz-container {
margin-top: 40px;
overflow: hidden;
}
#quiz{
display: flex;
}
.slide {
opacity: 0;
transition: opacity 0.5s;
/*gives each slide 100% width and prevents it from growing or shrinking*/
flex: 0 0 100%;
}
.active-slide {
opacity: 1;
/*sets the order to -1, so it's positioned before all other flex-items*/
order: -1;
}

Related

Fixed content changing position in responsive mode in chrome during carousel image change

I have a webpage here.I have a carousel in which an image is animated as coming from right. When it comes from right I can see a strange thing that all the fixed content (walk me through and chat icon) suddenly change their position when the image comes from right.This is the normal position.This is when the image comes from right.The walk me through and the chat icon are fixed relative to the body element. I have a raw guess that the two images due to being part of the page with display not none, change the calculated height of the body element. But the problem is that it happens in responsive mode only in chrome and otherwise it works fine when viewed without responsive mode on chrome.
Edit1: The culprit is translateX(100%) in animation come-from-right, without it, everything seems to be fine.
Edit2:If we replace translate(100%) with translate(-100%) in animation come-from-right,it works fine.
Edit3:The problem is that the webpage width is increasing when it comes from right, you could see scroll bar's size increasing.
Edit4:Even if we set the width of the body to 100px,even then the carousel is taking much space.
Edit5: If we add .slider img {width:200px;} everything is back to normal
Hope this will help you
<div class="fixedbtn" style="
height: 100vh;
position: absolute;
display: flex;
align-items: center;
">
<div class="walk-me-through-container"><div class="walk-me-through-container-before">?</div><div class="walk-me-through-text-container">Walk me Through
</div></div>
</div>
Comment top 50%
.walk-me-through-container {
position: fixed;
border: 0.1rem solid var(--white);
background-color: var(--white);
height: 18rem;
width: 4.5rem;
left: 0;
/* top: 50%; */
transform: translateY(-50%);
cursor: pointer;
z-index: 10000000000000;
}
Using percentages is the real culprit here as the unstable right and top are changing due to the fact that carousel loaded image is adding to the dimensions. Do top and left in vw and vh instead of percentages.Also use only top and left as right and bottom are unstable in the case.To totally solve the problem do html {overflow-x:hidden}, this make all sides stable.Do
.chat {
display: flex;
align-items: center;
justify-content: center;
background-color: #369cd9;
position: fixed;
top:calc(100vh - 8rem);
left:calc(100vw - 8rem);
height:5rem;
width:5rem;
border-radius: 50%;
box-shadow: 0 0 3rem 1rem rgba(0,0,0,0.2);
z-index: 10000000000001;
cursor:pointer;
}
and
.walk-me-through-container {
position: fixed;
border:0.1rem solid var(--white);
background-color: var(--white);
height:18rem;
width:4.5rem;
left:0;
top:50vh;
transform: translateY(-50%);
cursor:pointer;
z-index: 10000000000000;
}

Stop 'JavaScript function triggering css width' from affecting scrolling-screen position (On Mobile device)

This might be a simple issue to fix but I struggled:
On this website index page, if you scroll a bit down to interactive map.
This problem also arises on web browser on laptop as well.(just discovered!
ps. This was an embedded map as iframe html!
See source html:
<iframe id="iframe" width="100%" height="620px" src="leaflet_v1/index.html"></iframe>
Basically after you click a lot (area), the info section will show up. (this is made from leaflet web map from QGIS)--> I changed JS code here to make slider info appear:
function popup(){
document.getElementById('slider').style.width='75%';
document.getElementById('slider').style.zIndex='1000';
//..then insert data
//.. put a inline html for js Close function
}
layer.bindPopup(popup, {maxHeight: 400});
At the end of the leaflet index page, I got a section closer JS function:
<script>
function CloseSlider(){
document.getElementById('slider').style.width='1px';
}
</script>
BUT weird thing is that when you close the section using that button on "MOBILE DEVICES", the screen will JUMP UP and make the map stick at the top of the screen.
I wish I can cancel this effect.
:) Can anyone solve it ? :)
If you need to see the css setting for that slider , here you go:
<style>
.slider{
height: 100%;
width:2px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:rgb(39,57,66);
opacity: 0.90;
padding-left: 20px;
padding-top: 20px;
overflow-x: hidden;
transition: 0.3s;
}
.slider a{
padding: 5px 20px 5px 0px;
text-decoration: none;
font-size: 15px;
color: pink;
display: block;
transition: 0.3s;
}
.slider a:hover{
background-color:rgb(39,57,66);
color: white;
}
.slider .btn-close{
position: absolute;
top:0;
right: 10px;
font-size: 35px;
margin-left: 30px;
}
</style>
Hope this is not too complex :)
Surprisingly, the Solution is so silly:
Get rid of the:
href="#"
from <a> element...

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.

Android Chrome fixed menu popping in and out with url disappearing

EDIT: Here's a Youtube video that illustrates my problem:
http://youtu.be/OguwjZR_GdU
On my website Black Star Opal I've been trying to implement a sticky menu, much like this one Dansk Kids. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).
Here's my css for #carttrans, the menu div:
position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);
I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#carttrans').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if ($(window).width() < 500)
{
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#carttrans').css({ 'position': 'fixed' });
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.
Any help with this would be amazing.
EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.
Cheers,
Rob
HTML
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery (remember to include the jquery library)
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
transition: all 0.4s ease;
}
REFERENCES:
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
PREVIOUS SAME QUESTION ON STACK OVERFLOW:
CSS Sticky header
I used firebug for firefox and just added the following to your #carttrans ID i am assuming you only want this to stick? If so check the css below replace your #carttrans with the below and lemme know if that is what you want?
#carttrans {
background: none repeat scroll 0 0 white;
position: fixed;
text-align: right;
top: 40px;
z-index: 999;
}
Hi i looked at your youtube clip and i see that it could be that the jquery you are using is affecting your main div for the top section #carttrans make sure on this div that your css is marked as important for the top 0px !important so that the jquery won't be able to change it have a try and see if this works?

Adjust vertical position of different elements when display inline-block

I have a bunch of img elements that I want to display in a line inside a div. So I did something like this
css:
#imageContainer {
height: 90px;
padding-left: 50px;
padding-right: 50px;
text-align: justify;
text-justify: distribute-all-lines;
}
#imageContainer > img {
/*width: 150px;
height: 125px;*/
/*vertical-align: middle;*/
display: inline-block;
*display: inline;
zoom: 1;
}
#imageContainer:after {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
html:
<div id="imageContainer">
<img class="imageOne" src="images/sample2.jpg" />
<img class="imageTwo" src="images/sample.jpg" />
</div>
This will make sure no matter how many img tag I put in the div it will be evenly distributed across the screen width. Now what I want to do is to be able to adjust vertical position of different elements. I tried to add padding in individual img tag but that will adjust the position of whole line. Is there a way to work around this?
JSFiddle: http://jsfiddle.net/g244H/
Update:
Found two solutions so far:
Don't use display inline block, use float and do something similar as Auto-growing margins when screen width get streched
But this means implementing a bunch of code to get the auto margin adjustment
With a bit of hack I have this work around, surround a div to each of img element and have display inline-block applied to div instead of img. Then in each div I can applied margin-top to adjust the height. JSFiddle link above is updated
position: relative;
top: the-amount-that-you-want-it-to-move;
Relative will make it appear to the other elements as if it's still where it was without it, but it's visible part will be moved according to top, bottom, left, and right.
For the images that you would like to raise and or lower you could do a.
margin-top:1em; margin-bottom:-1em
Add overflow:visible to the #imageContainer.
Also add position:relative; When ever positioning elements they need a position set and so does their parent.
#imageContainer {
position:relative;
height: 90px;
padding-left: 50px;
padding-right: 50px;
text-align: justify;
text-justify: distribute-all-lines;
overflow:visible
}
#imageContainer > img {
position:relative;
/*width: 150px;
height: 125px;*/
/*vertical-align: middle;*/
display: inline-block;
*display: inline;
zoom: 1;
}
The same amount you add you subtract for the opposite side.

Categories