My dear community. I just got back to some html / css coding after a pause of several years (10 to be precise). Actually, my main focus was always on php these times, wherefore I had never been a markup pro. Long story short: I'm rebuilding my parent's website, for what I used a themeforest HTML template to adapt it (no WP! It's called "Porto" by Themeforest). And I'm really seeking for some help...
I'm not able to get the following fixed:
The goal: If a user visits our site via his mobile phone, there should be permanently shown a "Call Us Now" bar full width on the bottom of the screen. There shall be two links in it, one linking to the phone no and the second one to an "Callback-Option".
It is as simple as that. A permanently fixed div shown on the bottom of the screen (like the well-known cookie warning by the GDPR). But, unfortunately, it doesn't work.
I created two divs with "position:fixed;" and "bottom:0;", one for each link and each width 50% of the screen.
.mobileShow1 {
display: none;
}
.mobileShow2 {
display: none;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.mobileShow1 {
display: block;
width: 50%;
position: fixed;
bottom:0;
left: 0;
min-height:50px;
margin: 0 0 0 0;
background-color:#47648B;
font-size:20px;
}
.mobileShow2 {
display: block;
width: 50%;
position: fixed;
bottom:0;
left: 50%;
min-height:50px;
margin: 0 0 0 0;
background-color:#47648B;
font-size:20px;
}
}
And the divs are:
<div class="mobileShow1"><div style="margin-left:15%; padding-top:5%;"><i class="icon-phone icons"></i> Call Us</div></div><div class="mobileShow2"><div style="margin-left:3%; padding-top:5%;"><i class="icon-call-in icons"></i> Callback-Service</div></div>
Basically, this does work perfect. I tried it out with my iPhone X and it worked smoothly. Nevertheless, on "older" iPhones (iPhone 8, iPhone SE), the bottom bar flickers horribly. I made over 6 hours of debugging but I cannot get it fixed. It is definitely due to the "bottom:0;" value. If it is changed to "top:0;" it works fine; but - you will imagine - the bar is on top. There was no way for me to get the bar on the bottom permanently without any flickering.
I found out that there could GPU issues / GPU performance be one reason for the flickering issue. As the website template uses quite a lot of Javascript, and the flickering is happening more on sites with some pictures and sliders, this sounds quite likely. But I cannot (and will not) accept that there is no way to bring down a div bar on the bottom of an iPhone screen just because some Javascript is loaded.... I hardly cannot understand why it works perfectly with the value "top:0;" set, but if it changes to "bottom:0;" the flickering starts again. Why is there such a huge difference for the GPU?
I tried everything I found on the web, to modify the attributes as follows, to get the GPU "quicker", for example:
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0) ;
transform-style:preserve-3d;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition : none !important;
-ms-transition: none !important;
transition: none !important;
-webkit-overflow-scrolling:touch;
z-index:9990;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
Nothing worked. The flickering does not stop or get any better. My dear community - I know I'm new here but as I have seen you always found a solution. It is really absurd that I cannot get a div bar fixed on the bottom line without any flickering....
The HTML5 template I use is "Porto Theme" by Themeforest. The theme uses the typical Javascript Packages (jQuery, some Sliders, etc).
Please, is there anyone that could help me? I would implement anything to get this done. I cannot believe I am the only one who wants that... Thank you so much in advance. Please let me know if you need any further informations.
All the best from Vienna.
PS: Please forgive me my poor HTML/CSS markup skills...
The Code is here: http://www.proganize.org,
A Video of the flickering can be found here: http://file.io/5YVFjg
Related
I am tryng to fix a css bug for mobile screens
when I click section 1 content opens and if i move till the bottom of the section one content and after that if I click section 1 content closes.
but I dont see section 2 after that I see section 3 since the screen moves upwards.
how to retain the section 2 in our screen.
am I doing anything wrong with the scaleY property.
providing the related code below
I used scrollIntoView but still not point to second one any idea???
I used window.scrollTo(0, 0) but still not point to second one any idea???
.television .chromecast .sun .sunItem > .bulb {
overflow: hidden;
transition: transform .5s, max-height .5s;
transform: scaleY(0);
box-sizing: border-box;
max-height: 0;
transform-origin: center top;
}
.television .chromecast .sun .sunItem.selected > .bulb {
transform: scaleY(1);
max-height: 100%;
}
We need to invoke properly on the select function
onSelect() {
this.props.onSelect(this.props.id);
this.focusDiv();
}
That's the expected behaviour. The scroll position is retained but you remove content from the top of the screen so you end up further down in the page.
It's always a bad idea to collapse the previous elements when expanding a new one, especially on mobile.
To fix that, you will need to script a scrolling to the top of the open section. That could easily be achieved using jQuery.ScrollTo() or something similar, but to be honest, I would just leave the previous sections open, unless the users have a tendency to scroll back up and that would require to much scrolling to get back to the top of the page. Other UX solutions like a scroll to top link might come in handy to solve that.
I've found that the contact section of the following site keeps spilling over at the bottom, especially when the window width is reduced to mobile size:
http://phixhut.com/test/1page/onepage.html#contact
The CSS I have for the overlay section is:
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
padding: 55px 0 15px 0;
width: 100%;
background-color: #83aa30;
background-color: rgba(131, 170, 48, 0.6);
background-image: url("../images/GPlay.svg");
position: absolute;
bottom: 0px;
top: 0px;
The spill at the bottom disappears if I remove the "top: 0px" but then it appears to spill over at the top.
Not sure how to go about getting the contact section to resize pefectly to stop these spills. Any help would be greatly appreciated!
The solution, albeit inefficient, would be overflow: hidden
You shouldn't use that, however, because the majority of the time the use of that is to basically hide unwanted code. Rather, try to fix the issue in CSS without using the overflow: hidden, so that when you resize nothing overflows.
You could do that by making sure certain items aren't set to a fixed width or height, because if a screen resolution is smaller than that, it will overflow.
Hope that helps.
There is a few thing's causing your problem but the easiest way to sort it would be to remove the current height you have for class="contact" and set it to the height of your overlay container.
Personally I would re write your code.
It would make more sense to have your map and overlay as one background image and remove your absolute positioning and the extra div's you have in there.
It would A. Streamline your code and B. Reduce the amount of HTTP request's & C. your site would act in the fluid nature you are after.
I found this great plugin called onepage-scroll, which meets my needs, except for one thing. Some of my pages (<section> tags) can be larger than one screen. How can I customize it so that it only scrolls when it finished the "regular" scrolling, inside the section ?
I tried to change the css rule :
.onepage-wrapper {
width: 100%;
/*height: 100%;*/
height:200%;
display: block;
position: relative;
padding: 0;
-webkit-transform-style: preserve-3d;
}
but it still scrolls to the next page, with one scroll movement.
I'm trying to make it scroll to the bottom of the section (height > 100%), then scroll to the next page.
Any help will be appreciated. Thanks !
You may want to use fullPage.js instead. There's an option called scrollOverflow which allow you to have scrolling inside section as you can see in this example
While it's a less ideal solution, we ran into the same issue and found that using an iframe works with jquery onepage scroller as a solution for providing this.
I'm beginner and trying to display details of a card/tile from the sliding bottom of the page over click action. I already found one of the template with my requirements and trying to customize. I found few code samples on how can I do sliding effect from the bottom. I was able to findout solution but it works with hover action where as I am trying to do is as below.
Scenario:
As shown in the mockup screenshot >> Cards will be displayed in the home screen >> users clicks on one of the Card >> background should be transparent 50% and movie details should get displayed in sliding button panel >> PLAY NOW should be active
Like the left menu loading in the given template below - playdo template
one of the similar example I found is this but as I mentioned this is hover feature - Sliding bottom panel through HTML, CSS and JS
An other from the top sliding - http://hoveralls.design-way.ro/
Template in the screenshot that i am using is - https://github.com/tomclaus/playdo
Hi and welcome to the front-end world.
What you need to do is to create two different css classes that contain the things you want to change (in this case the top and the transparency). One for when your card/tile is "minimized" and one for when is "maximized".
.minimized{
background-color: rgba(255,255,255, 0.5);
top: 90%;
}
.maximized{
background-color: rgba(255,255,255, 1);
top: 75%;
}
and then apply a click event to your card/title using jQuery or Javascript and swap those classes to give the proper behavior.
$("#card").click(function(){
if($(this).hasClass('minimized')){
$(this).removeClass('minimized');
$(this).addClass('maximized');
}
else{
$(this).removeClass('maximized');
$(this).addClass('minimized');
}
});
Make sure that the CSS for your card/tile includes this:
-webkit-transition: all ease 1s;
That line will give a smooth transition when you swap the minimized and maximized classes.
Please check this jsfiddle to see the code in action.
ps. Since I'm using the "-webkit-" prefix for the transition this example only will work with webkit browsers (safari and chrome)
Ok I finally understood what you want to do with the mockup.
Well the idea is the same, and I'm sure it can be implemented in many other ways but I hope this one helps you to understand what is going on.
Pretty much you need two states (classes) for the actions you want to achieve.
A Minimized and Maximized for the div that holds the movie details.
#details{
z-index: 4;
position: absolute;
-webkit-transition: all ease 1s;
background-color: #2980b9;
color: white;
padding: 30px;
width: 100%;
height: 300px;
}
.minimized{
top: 100%;
}
.maximized{
top: 40%;
}
And other two for the "gray courtain" that sits on top of the cards when the details are show.
#courtain{
position:absolute;
background-color: rgba(100,100,100, 0.5);
width: 100%;
height: 100%;
}
.active{
z-index: 2;
}
.deactive{
z-index: -1;
}
All these must be controlled or toggled using Javascript with a click event for the Card.
function hideAndShow(){
var details = $('#details');
var courtain = $('#courtain');
if(details.hasClass('minimized')){
courtain.removeClass('deactive');
courtain.addClass('active');
details.removeClass('minimized');
details.addClass('maximized');
}
else{
courtain.removeClass('active');
courtain.addClass('deactive');
details.removeClass('maximized');
details.addClass('minimized');
}
}
It is important to check the "z-index" values on the states to place them correctly above the other, the one with the highest z-index value is the one that remains on top.
I've updated the JSFiddle, check it out and hopefully all this makes sence.
My goal is to have the slider 1280px wide and centered on the page. I would like the edges of the content to have hidden overflow on both sides. For example I want the center of content to always stay in the center of the page with each side being cut off as the browser is resized, with no horizontal scroll bar appearing.
Is there a straightforward way to accomplish this?
I ended up with a somewhat interesting solution that worked for me in (at least) Chrome, Firefox, and Safari where I tested it. It may be slightly hacky, but the result was cool.
So here's what I did: I put a .wrapper with a width of 1280px. The margin is 0 auto except the left margin which is where it all happens. The left margin needs to be set to half of the div width. In this case that would be 640px. However, because it must overflow outside of the left screen it must be set to a negative number (i.e. -640px). Then in order to reverse that effect when the screen is larger then screen a left:50% pushed it over the correct amount. Obviously in order for the margin:0 auto to actually work, the position must be set to relative (or absolute if you would like).
.wrapper { width:1280px;
margin:0 auto 0 -640px;
position:relative;
left:50%
}
the one problem
I found one problem with it, though. Because we are using negative margin, it pushes the div to the left to where one can not see if their screen or browser window is too small. Let me know if this is a problem and makes it to where it doesn't work for you.
Add this css class
.overflowbothsides{
vertical-align: middle;
margin: 0 auto;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
solution with code and example
enter link description here