Good evening!
I am currently developing a website which includes the Facebook Like Button. This button is located at the bottom of the page. When I click the button, the "comment" popup is displayed below the button, which extends my page. I would like to know whether (and, if so, how) it is possible to have the "comment" popup be displayed on top of the button or hide the popup permanently.
The image below depicts my problem (the horizontal white bar is supposed to be at the bottom of the page, notice how the "comment" popup extends the page).
Thank you in advance.
Without seeing the actual website, I imagine you could just use css to select that popup and set it's display property to none. However you might need to use an !important statement to override any css property being set on that popup with javascript.
Example code:
.popup {
display:none!important;
}
You can hide the popup box. Make sure your facebook like button layout type is button i.e. In your code snippet that facebook provides there should be data-layout="button"
and use this css
.fb-like{
overflow: hidden !important;
}
Related
I am building a Wordpress site for my nonprofit using the theme Avada and trying to implement some basic custom code.
I am using a "Modal Text / HTML Link" with an image to link to a modal (a pop-up: https://avada.theme-fusion.com/design-elements/modal-element/ and documentation: https://theme-fusion.com/documentation/avada/elements/modal-element/). To help make it clear to users that they can click the image to produce the modal, I want the opacity to change to 70% on hover over just that image.
I currently have the below in the "text/HTML" field, but it’s causing the hover opacity effect for all images on the page rather than just this one image. How can I amend this code to only cause the effect for the linked image? I know so little about coding but feel like it probably has something to do with divs??? I also get the sense I'm accidentlly mixing css and html.....I think I need the html for this field OR I can have just the image source code in the html, and then implement css.
{<img src="https://staging2.pvdwaterways.org/wp-content/uploads/2021/07/Lilly-Manycolors.png" />
}
img:hover {
opacity: 0.7;
}
Here's a screenshot of the interface with the code entered
Thank you!
As #daniel Theman told already in the comment, you can set a class to your element in element edit on the first page at the bottom and then you add the code to custom css tab in avada theme options. Give your element a unique name as class like hoverop and add this to you custom css tab in theme options:
.hoverop:hover{
opacity:0.7;
}
I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!
this is the code for a button that is currently operating
<a class="ng-click" ng-show="hasSuperUserAccess && !siteIsBeingEdited" class="addRowSite" ng-click="addSite()">
{{ 'SiteManager_AddSite'|translate }}
</a>
Add style="font-size:0px;" to the tag. This sets the font size to 0 pixels, rendering the link invisible but still usable via Tab and Enter key.
http://jsfiddle.net/kL0wm6yd/
#link-name {
visibility: hidden;
}
This will hide the element from the page, you cannot click on it, but using tab you'll be able to select it and use enter to 'click' it. It also still occupies space on the page (which is why you can tab/enter).
I used the fiddle to denote first line and last line, so you can see that the link is still taking up space, however it is not visible. (you can't use tab in jsfiddle so just upload that code to your page and it will work. Any more questions just comment here.
How to make the text/image emerge when you click on the another text/image? For example, a bottom "help" on the top of this website makes appear the image and the text when you click on it. I'm trying to do the same effect with my personal website. Anybody know the way to get it?
Consider using the JavaScript onClick(); event: http://www.w3schools.com/jsref/event_onclick.asp.
Set your the element that you want to show to display:none; then set to display:block; onclick or even use the jQuery fadeIn effect.
I'm not entirely too sure what you're after, but I hope that this is a start.
Set an ID to the element (like ). In your CSS stylesheet, simply add the following:
#hideMe { display:none; }
I am using Twitter's own Search Widget (Which can be seen here) on my site and it is contained in one of many switching tabs, basically consisting of divs that are hidden and shown according to which link is clicked.
There's no need for code here because it's a very simple situation to explain, basically the twitter feed is not being populated with new tweets when it is contained in a div which has display:none.
You can see this by going onto the twitter widget demo page and hiding it in your element inspector. Wait a few seconds and then show it again and you will be able to see that there are no new entries, just a pile of dotted borders.
How can I ensure the feed is being populated even when it is hidden?
Thanks.
Why not use some jQuery to hide and show the widget... without resorting to altering the css? Something like..
$('#example-preview-widget').hide();
$('#example-preview-widget').show();
This worked for me in the console with the issues you mentioned.
EDIT
After more testing, I can see that the above doesn't work. I did find a fix (I think)...
Instead of using hide() and show() or display:none, try to position the div off the screen using
position:absolute;
left:5000px;
or something similar. Then you can toggle it back in position.
When tested in the console, this keeps the tweets loading.
Shrink the div down to nothing, hiding the overflow:
#your-div {
height: 0;
overflow: hidden;
}