scaleY property not maintained properly for small screens - javascript

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.

Related

How to position Recaptcha V2 challenge popup in the center of the viewport?

My Recaptcha challenge popup overflows the viewport on mobile and I'm also unable to scroll the page.
I need to always show challenge popup in the center of the viewport (horizontally and vertically). I've looked at Recaptcha API and didn't found how to execute code after challenge popup was rendered. It's rendered with Explicit not automatically.
I've tried:
To change the first parent of the iframe CSS class by adding code after .render function, but the iframe was null.
I tried to detect the click on the Recaptcha checkbox inside iframe in a recursive function (nonblocking loop) and then to change the popup CSS class, but the checkbox is always null, until I go with the chrome inspector to the checkbox, then trying to get the checkbox in the console works.
ReCaptcha v2 causes the issue on smaller (mobile) screens. I managed to work around the issue using CSS.
First scales down the recaptcha container (g-recaptcha in some examples) to take less screen space (optional).
#recaptcha-container
{
transform: scale(0.77);
-webkit-transform: scale(0.77);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
Hide the bubble arrow pointing from the checkbox to the challenge bubble (also optional, but looks nicer IMHO).
.g-recaptcha-bubble-arrow
{
display: none;
}
I believe you're looking for something like the following to find the bubble arrow's sibling div element which contains the iFrame with the challenge and center it on the screen (whatever the size is).
.g-recaptcha-bubble-arrow + div
{
position: fixed !important;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
Note that I'm using CSS transform, so check the browser support for your target browser and version. Also note that this works for the current implementation of ReCaptcha, if the HTML output changes in the future a different solution may be necessary.

CSS/Javascript Auto Scroll To Top

I am currently working on a simple (or so I thought) slide-down menu for both the desktop and mobile versions of a website I am working on. I'm trying to do this in CSS only if possible. Currently the CSS I am using is as follows:
#menu {position: absolute; top: 0; left: 0; width: 100%; max-height: 50px; overflow: hidden; -webkit-transition: all 1s ease; /* For Safari 3.1 to 6.0 */ transition: all 1s ease; padding: 4px; }
#menu:hover {max-height: 75%; overflow: auto}
The reason I have the 'overflow: auto' when on a smaller screen is due to the entire menu not showing when on a smaller screen - even when I have some elements not showing on mobile screens.
The problem I'm running into is when it DOES overflow and the user scrolls through the menu, when they click/hover out of the menu it retracts like it should but it doesn't show the top of the menu anymore, it will show wherever they scrolled to.
I'd like to find a way either via CSS or Javascript to automatically have that div scroll back to the top when the user clicks/hovers out of the menu so it will still show the menu icon + logo instead of random menu text.
I love how it works but can't stand the scrolling issue on smaller screens.
There may be some awkwardness in your idea that might just need a redesign, I certainly have never noticed a menu working like this.
But the jQuery code to scroll to the top is this:
$("html, body").animate({
scrollTop: 0
}, 600);
Where 600 is how long it takes in ms.
You'll have to wrap this in a click() function or something so it triggers when someone presses a menu option.
For example:
$('#menu a').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
});
And of course all of this code should be wrapped in a $(document).ready() (basic jQuery setup)
I know you didn't mention jQuery in your question, but this is a popular approach to solving problems like this.
There is another way to achieve auto scroll on click using html only.
You just need to add an id to some div (the header maybe) and on the link you pass the #id to the href like so:
html
<div id="Header">your header</div>
Go to the top
css
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
I'd suggest to try out the scroll-behavior: smooth; it makes the transitions, well... smooth :D
Here you can find all the documentation you need about this solution
https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior

How to scroll with large pages with jQuery onepage-scroll plugin?

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.

Sliding bottom panel through HTML, CSS, JS by clicking on card/tile

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.

css margin issue with jquery slider

I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.

Categories