having a strange issue with Google reCAPTCHA (v2, checkbox).
In particular, it is not clickable when the following two conditions match:
The browser is in a "touch device" mode;
The page zoom is not equal to 100% (the exact value seem to depend on the original iframe position)
Here, I've done an example: https://mityukov.github.io/re.html
Is there any way to overcome this issue?
Related
I am trying to build an Unsplash Clone using their API where I display an Image Gallery in Masonary Layout and a Search Feature.
Here is my source code: https://github.com/bhoamikhona/usplash
Here is the live site: https://usplash.vercel.app/
The scroll/search has a bug that I can't seem to find, please help me fix it.
a) When I start scrolling, a number of images are repeating, I keep getting warnings about two items having the same key.
b) When I refresh the page and then search something, the search function works fine but, when I scroll through the home page a little, then go to the search bar, and search something, say for example dog, I keep getting other images.
Picture below is of the state when I scroll through home page i.e. make use of infinite scroll and then use the search bar, you can see other images popping up:
Picture below is when I refresh the website and then search without scrolling at all:
Could you please tell me what is wrong with my code and how to fix it?
My slider component disappears when it should pin to the page. I believe it is related to the page scroll with Locomotive scroll messing up with translating the page. However, this should be possible and I found a tutorial by Greensock. I cannot get it to work though, my content keeps disappearing. Here is a minimal demo: https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx
Here is also a link to the final webpage: https://juliaweber-git-preview-inzn.vercel.app
Any help is greatly appreciated!
I am a beginner in coding and as a challenge, I decided to make my own portfolio website on react.js + tailwind without the use of extra plugins. (I know, I know, as I figured out later, it was not my best idea)
The main complexity was around making a background behind the slider to look similar to the central slide, and to make a smooth transition.
After hosting the website, I found a glitch that is only visible on mobile browsers. Basically, every time when I change a slide, in the moment of changing State, it flicks the next slide in the array of slides for a millisecond.
I was able to see the same issue in dev tools but does not work every time.
100% visible only on mobile browsers
Small clarification: the slider is functioning by rotating elements within the array by the method Splice. So elements [1],[2], and [3] are always visible on the desktop version while elements [0] and [4] exist but have zero opacity (it is made for the sake of the smooth background transitioning).
The glitch itself: On clicking 'left' the image from element [1] is becoming the central image [2] and it flicks somehow the image from [0] for a millisecond. The same behavior is related to the right image from element[3] and background images. Though, it does not affect the left visible slide [1], because its predecessor is only becoming visible after State change.
My best assumption is that the issue is related to the component "Portfolio" 126 line in the code, but I can not find any other solutions which work.
const onChangeSlide = (direction) => {
if (direction === "left") {
setTimeout(() => {
slides.splice(0, 0, slides.splice(length-1, 1)[0]);
setSlider((prev) => ({...prev , ...slides}));
},700);
You can see the hosted website here > https://Othary.github.io/ArtPhoto
Link to the code here > https://github.com/Othary/PortfolioTest.git
GIF of the issue > https://1drv.ms/u/s!ApRsK-vfrh8MrY9guwisAKJl5bJAfA?e=vkjdGX
I will appreciate any help. Thank you in advance.
Regarding the first issue I checked all images, and their order, and removed StrictMode. No luck for me. I can not grasp how the slider shows the element which supposed to be visible only on the next click. And it is not visible on the fast internet desktop version. As stated above, my best guess is that it is related to the way how I change State.
UPDATE: It looks like after scrolling through all carousels BOTH left and right the flick is disappearing.
So, I assume, it somehow connected with the browser's cache, but I don't understand why it needs to be scrolled in both directions first before the issues disappear. All files are supposed to be preloaded after the first scroll in either direction, not both.
Please help🙌
I'm currently developing a mobile web application with AngularJS, ngAnimate, Angular-Material and UI-Router. I'm following Google Material Design specifications for the UI/UX part.
I'd like to animate a state change 'the Angular way' and especially this 'Parent to child' animation
I've no idea on how to achieve this 'lift & expand' animation.
Thanks for your help !
You have to do it yourself, I guess.
Angular-material is not a magic wand that replicates the animation guidelines of Material Design. Material Design guidelines are simply guidelines, and are loose enough to be hacked — or strictly followed, in the case of Google's Android apps (in-house or not).
My feeling is the angular material team is already pushing like maniacs to bring this awesome tool to 1.0, and will take advantage of the new routing system in Angular 2 to provide some animations like the one you wish to attain out of the box.
But it's the bleeding edge of the bleeding edge, at least for the time being.
Good news seem to be that routes will have their own viewports and sibling viewports.
AngularJS somewhat starts to embrace Polymer's web components concept.
Scroll to "Show me the magic!" on this page, and check these demos. Polymer's ecosystem provides a lot of already-made components to build your app with. It's quite large, and makes you wonder why Polymer doesn't get the same momentum as AngularJS. But I digress...
Option 1
create a custom-made function that gets triggered on a list element being clicked/tapped, to place in your controller (or directive).
Once the user clicks/taps the list element, it triggers the function (console test).
The function should :
retrieve the id of the clicked/tapped item (pass it to the function)
animate : here you have several choices, but here's one : use a ui-router absolute named view (#view_name), and wrap it in a div container with overflow:hidden, that has inital dimensions corresponding to the dimensions of a list item.
Detect the x-y position of the list element that has been clicked (an example, assuming you use AngularJS with jQuery), and you pass it to the "item detail" route (see above), so the rectangle grows with origins corresponding exactly to where the UI is a the moment of the click/tap. The animation shown in the video seems pretty complex: the "item detail page" grows slower on the bottom and faster on the top, when the bottom item is clicked.
Why an absolute named view? Because it will allow, with z-indexing, for the list to stay underneath the "item detail" view, so when the user closes/leaves it, you can roll back your animation, and the rectangle will shrink back to exactly the dimensions and position of the list item. Finally, you transition the opacity:0 and leave the route.
Option 2
Here's a rough mockup of a technique stretching/scrolling an ion-item. It would require to detect the y position of the item, and use ionicScrollDelegate to scroll to it. Also, you would freeze the main scroll so the user get "stucked", until he closes the "detail view", which then releases the scroll.
$scope.toggleStretchedMode = function(itemID) {
$scope.stretched = $scope.stretched === false ? true: false;
if(!$scope.stretched){
$('ion-item').removeClass('stretched');
$ionicScrollDelegate.freezeAllScrolls(false);
}
else
{
$location.hash(itemID);
$ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
$ionicScrollDelegate.freezeAllScrolls(true);
$('#'+itemID).addClass('stretched');
};
}
A very basic JSFiddle, which needs to be refined (clicked item should scroll to the middle of the screen, then expand).
Note that the JSFiddle only blocks the mousewheel scroll. If seems to block the first swipe, but then the ng-click releases it, so as it is it's far from perfect. You should not only block the list scrolling, but the up and down swipe events.
Also it initalizes badly, only works the second time. But the concept could be something like this.
My website content loads further down the page than expected on initial load.
The name and other content appear in the middle of the page, instead of the top.
If I grab the browser corner, and resize the window - even slightly - the content pops back to the top of the page.
I'm unsure of what's causing this.
I've tested on Chrome/Safari/FF on Mac Desktop
The response is normal on a tablet or smartphone
The page is at http://www.mac-works.com/dev/MG/mark3
Notice on first load, Michael's name is in the middle of the page, but if you grab the lower corner and move - everything pops to the top where it's supposed to be
I'm aware there are a number of other posts about responsive content, I've reviewed more than 20, but none seem to address the content not loading properly on first load, but correcting when the browser is resized.
It turns out it was the var marg_top = Math.abs function. Intially set to /2 - I changed it to /8 moved the content up towards the top.
So, if you're using floating content with javascript - make sure you're familiar with the math.abs function.
Math.abs in javascript
http://www.tutorialspoint.com/javascript/math_abs.htm