I am using Invisible ReCAPTCHA for my WordPress CF7 forms. The Advanced Captcha settings allow for positioning the badge either at bottom-right, bottom-left, or inline. I like the compact display of just the badge icon with a bottom setting, but I don't like its sticky nature scrolling with the viewport, especially on narrow mobile devices. The inline setting positions the captcha at the bottom of my form just above the Submit button, but unfortunately, it is displayed in its full, expanded state. Can anyone suggest CSS to either:
1) Use bottom-right setting and prevent it from scrolling?
2) Change inline setting to display only the Badge icon (with protected by content revealed on hover)?
Screenshots
I figured it out!
Go to Invisible Recaptcha's Advanced Settings panel, select Badge > bottom-right.
To your CSS stylesheet, add:
.grecaptcha-badge {
width: 70px !important;
height: 60px;
position: static !important;
float: right !important;
transform: translateY(12px); /* Bottom-aligns badge icon & CF7 submit button.
Your value may need to be different */
}
.grecaptcha-badge:hover {
width: 256px !important;
}
Related
I was wondering if it is possible to : when hovering over a toggle menu (has ID 9) in Wordpress to display an hidden image (Lets say has ID 10). It looks like this now https://wortelboeryachting.com/wp-content/uploads/2020/04/Screenshot-2020-04-29-at-20.29.36.png. I want to be able to hover over the toggle menu on the left and make an image, currently hidden behind image on the right, to appear. If possible in CSS addition code because I am not very familiar with JavaScript.
Thanks for the help!
If you only want to use CSS, you can put the images into pseudo-elements of the menu items. Only to show you the concept:
.myMenuItems::after {
width: 100px;
height: 100px;
background-image: url('yourimagepath');
background-size: cover;
opacity: 0;
}
#myMenuItem:hover::after {
opacity: 1;
}
Of course you can use a class and it may better to position the image absolute.
If you want to overlay as you said, you can make this happen with the css property "z-index", instead of "opacity".
I want to have a button that takes me to a specific part of my horizontal scrolling website.
I am using Wordpress. I am willing to use any theme (or customizing any theme) as I've already tried several.
I tried using id, elementor menu anchors, 'page to scroll id' plugin...
Everything works only as long as the website scrolls vertically.
I add custom CSS in WP Customizer to make it horizontal. It works only when scrolling with the mouse.
However, the ids, or anchor links don't make the page scroll horizontally when you click the button (or text, or whatever takes you to the #id_name).
I know it has to do with the CSS, and that I probably need to use a js scrollbar, or something like that, but I can't find something that works so far.
I am using Astra Theme and Elementor.
This is the extra CSS i used:
.elementor-inner {
width: 100vh;
height: 100vw;
overflow-x: hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
.elementor-section-wrap {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
display: flex;
flex-direction: row;
width: 600vw;
}
.section {
width: 100vw;
height: 10vh;
}
::-webkit-scrollbar {
display: none
}
My solution is not specific to a Wordpress theme, but I hope it will help you out nonetheless. If you want to post your HTML markup, I can give a more specific answer for your scenario :)
Assuming your page layout is already set up with horizontal scrolling, here are the steps you'll need to take to get that anchor functionality working:
Set an ID on the element you wish to scroll to.
Set a click listener on the button/link you'd like to trigger this scroll from.
On click of the button, get the offsetLeft property of the element you'd like to scroll to.
Set the parent container's scrollLeft property to that value from above.
HTML:
Scroll to Element!
<!-- your existing markup -->
<div id="my-element">
<p>Content would go here</p>
</div>
<!-- /your existing markup -->
Note: I'm using an anchor <a> tag with an href attribute here, since we should keep this in line with the web accessibility guidelines. You're welcome to use a <button> and maybe a data attribute, if needed.
JavaScript:
// (These class names would be specific to your case)
const myButton = document.querySelector(".my-button");
const scrollContainer = document.querySelector(".scroll-container");
myButton.addEventListener("click", event => {
// Prevents the link's default behavior:
event.preventDefault();
// Gives us the string: "#my-element":
const link = this.href;
// Finds the corresponding element:
const element = document.querySelector(link);
if (element) {
const leftPosition = element.offsetLeft;
// This line actually takes us to the element:
scrollContainer.scrollLeft = leftPosition
}
});
Couple things here:
You will need to change the various class names here, based on what your HTML markup looks like.
The only requirement for the offsetLeft property to be accurate, is that the scroll container has relative positioning.
Animation?
As a bonus, you could animate the scrolling, so it's not just an instant "jump". I would be happy to outline how to do that as well, just let me know.
If I get you right you want to scroll horizontally, to do so you can do it using jQuery:
<script>
$elementToScrollTo = $('#scroll-to');
$whereToScroll = $elementToScrollTo.offset().left - 30; // 30px just to give some space before the element
window.scrollBy($whereToScroll, 0);
</script>
First line to select the element you want to scroll to
Second line to get the offset left (how far is the element from the left [in px])
Third line is to tell window to scroll in X coordinates
I have a navbar set to a fixed position at the top of the screen with a z-index of 1. When I click my iframe to be in full screen mode the navbar still sits on top of the iframe. How do I hide my navbar or move my iframe to the front when I put it in full screen mode?
You can do this two ways, either:
1) Hide the navbar
#navbar{
display: none;
}
or...
2) Put the iframe above the navbar using the z-index property
iframe{
z-index: 2;
}
Here is an example of the second method being applied using jQuery by adding a .fullscreen class: https://jsfiddle.net/gyq7tv9h/
My question pertains to framework7 implementation, but is basically a CSS question:
I have tabs under a popover. I need to make these tabs content vertically scrollable. The default implementation of tabs has scrolling enables, but when these tabs are placed under popover (modal if you like) then these tabs stop being scrollable.
I have made a basic fiddle, to better explain the issue. In the fiddle, if you click "Click Me" and then go to "Account" tab you will notice that the tab is not scrollable.
THanks
There you go, fixed: https://jsfiddle.net/xbvqksu8/3/
This CSS was added:
.popover-inner {
max-height:100vh !important;
}
.list-block ul {
overflow-Y:auto;
}
If you want your menu to fit in the screen better change the 100vh to something lower. Good luck!
#Fausto NA is great.
There is a little problem because the popover has top margin (usual 8px).
Therefore something like that is needed:
.popover-inner {
max-height: calc(100vh - 8px) !important; // last fallback
max-height: -webkit-fill-available !important; // fallback: supported by many webviews
max-height: stretch !important; // still not widely supported
}
References: Can I use Intrinsic & Extrinsic Sizing
Please check : http://shoejunction.net/
In the top menu, if you put your cursor on Shoes by Brand, it will show a really long list of items.
I want these items to be in a floating square drop down. So it will fit inside the page (the top menu goes down with you if you scroll down the page).
Is it possible to change it's style to do that?
I tried Mega Menu plugin, but it changes the style of the menu, and i want to keep the style.
Thanks.
You will have to be more specific about what you want. Here is a solution for showing all the shoes in the menu:
ul.sub-menu {
max-height: 600px;
max-height: calc(100vh - 80px); /* Comment Suggestion :D */
overflow-y: auto;
overflow-x: hidden;
}
Getting it to be the height of the page would require javascript though.