Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}
Related
So, I'm working on a page implemented with Bootstrap 4 and using anchor/hash-based navigation to take users up and down the page. What I'm unclear about is how to control what is actually in view when the page auto-scrolls to the anchor fragment?
Essentially, what I'm looking to do is somehow ensure that at least the section heading is visible, and more or less aligned to the viewport. I am using a fixed-top navigation bar
So, what determines what is "in frame" when an anchor is clicked and the page scrolls to the anchor location? Is this a question of keeping the anchor elements a certain size? So, in essence, what do I need to do via css or html to get section heading in view when they're clicked?
I am using anchor tags with div id's assigned to them so the user is moved around the page.
Now my problem is when the user clicks the button, they are successfully transferred but I'm trying to make it so that div its brought to appears at the top of the page, not middle... you can see my progress and what i've tried by visiting the link i'm working on, all code is visible there.. you can see what I mean by clicking the home button.
http://eclipse-developers.com/v2/eclipse-developers.com/
This is because there is no enough space at the bottom of the page. try adding some br at the bottom of the page.
I have a fixed menu bar at the top of my site. I have a page that has inline linking by adding a hash tag to the URL making it jump to that particular element. The problem is the element it jumps to is hidden being this fixed menu bar. Is there a way to move the jump down a bit? Here is an example:
Example
Sadly you cannot do that via html, you'd need some JS, or even CSS, depending on your code.
Can you post a sample on jsfiddle.net ?
As a workaround, add another (hidden) element below it and simply link to that one instead:
click me
<!-- further down the page is the content -->
<div id="#element1">Here is what users will be reading!</div>
<div id="#element1-target"
style="visibility:hidden;{make this lower down below the actual text}"></div>
My only question though, is if your header bar is blocking your text that the page 'jumps' to, wouldn't you want the page to link to higher than the target?
Given your question is vague and I don't think your example shows what your problem is, this should do what (i think) you're trying to do.
:)
I am working on a webpage with navigation at the top. I was wondering how to make an area of an html page clickable. That way one could click not just on the text in the navigation bar but a general area around the text in order to navigate from page to page. When I keep trying to do it, it generally messes up the divs I already have on the page.
Any help would be appreciated!
Thanks!
If I understood your problem propertly:
Try setup display: block; for your menu text links, + add them padding. Also possible to use width and height
So active link will be not only the text, but also the area around it.
There are only a small set of HTML elements that you can place inside an <a>, and I am guessing none of them is doing the job for you. For example, a div cannot be placed inside an <a>.
In that case, you can use javascript or jQuery to listen for a click on a certain defined area, say a div, on the page and respond to it by changing the address (say by changing window.location.href). This will have the same effect that you are looking for.
Please note though that usability and design ethics demand that a user of your website knows that a certain area is a link and will take you somewhere else before they click it.
I'm assuming by area you mean an entire div? We can use javascript (jQuery) to do this:
$("#mydiv").click(function() {
window.location = 'http://www.google.com'; // redirect here on click
});
<div id="mydiv">
<!-- this area we can click -->
</div>
For some reason the Facebook Like button on my webpage has only a small hotspot, I'm only able to click in the area just under where it says 'like' rather than the whole Like button.
http://www.melbournedodgeball.com.au/team/3
If I go to a page for a team that does not exist, the problem is not there:
http://www.melbournedodgeball.com.au/team/300
Any ideas why this could be the case?
Upon inspection with chrome inspector, it seems your
<h2> Ya Mum!</h2>
element is somehow blocking part of the like button where it is clickable. if you could somehow shrink the width or get it to stop flowing over the like button, the problem will be solved.
Edit: Tried changing font size for h2 and it also made the whole "like" button clickable.
Looks like its the position:absolute on the iframe, try just using float and you should be right.