Been beating my head against this problem for a bit... It is probably either really easy to do and I am a dolt, or really hard to do and not worth it. Basicly I have a wordpress theme that has a nice Event widget included. It works great but it puts a lame "Free Entry" button on every event. All of our events are free so it's just kind of an eyesoar. I have been trying to edit the stylesheet to remove it but I can't figure it out. Here is the site I am working on: http://comerestministries.com/wordpress/homepage3/
The code I am looking at I think is this:
<li class="ecs-event">
<a href="http://comerestministries.com/wordpress/event/awakening-of-love-2/">
<p>May/12</p>
<p>18:30</p>
<h3>Awakening of Love</h3>
<span>Free entry</span></a></li>
Is there an easy way to remove that final Span tag every time it tries to display... like a "display: none !important;" tag? I tried to add that to the style sheet but couldn't quite figure it out.
The above answer is correct. That hides the span. This fixes the aftermath of the space left behind.
.ecs-event-list li.ecs-event a > span{
display: none;
}
.ecs-event-list li.ecs-event a {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
looking at your wp theme, you can like this:
.ecs-event-list li span {
display: none;
}
Related
This is the HTML
<li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li>
This is the CSS
.navs:after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #0d0d0d;
opacity: 0.5;
transform: scaleY(0);
transform-origin: 0 100%;
transition: all .2s ease-out;
}
.navs:hover:after{
transform: scaleY(1);
}
.navs:active:after{
background: #FFFFFF;
}
I think the reason why i can't click the button is because when i click the button, the overlay forms. I do not want to remove the overlay though. Is there any way to click through the overlay?
Option one
You can give your element a higher z-index. This will move your button above the overlay, so you will be able to click it
Option two
You can disable all mouse events on your overlay using pointer-events:none; so the click event will 'fall through' it and the button will register it
Edit: Use pointer-events when you can, let z-index be your backup plan. If you fall back to it, I suggest that you don't use it inline, but write a specific selector for it in your CSS.
use span instead of before and after,
something like
<a href="my link"><img class="" src="my_image" alt="">
<span class="rig-overlay"></span>
<span class="rig-text">
<span>name</span>
<span>function</span>
</span>
</a>
the span will not cover the clickable region
It could be many different things...
Definitely try to check if you've used any z-index properties for other elements that are the parents of the element.
I encountered the exact same problem and I fixed it by troubleshooting:
what I did was pull up a javascript file and console log the target className of where I was clicking (can be done by:
window.addEventListener('click' , (e) => {
const target = e.target.className;
console.log(target);
})
)
Once I did that, click on the button that doesn't seem to be working. Make sure to add a class to your button before this and check if the class is displayed properly. Sometimes, in my case, I had to move the console out of the window.
From this, I found my SVG Animation was actually taking up invisible space that covered the button. All I had to do to fix this problem was give the SVG a z-index of -1.
Hope this helped! I know I took a long time to find a solution so I hope my solution can help others too.
Note: Also check your pointer events (make sure it isn't set to none) for the button and other elements
I have some code which displays images from imgur.
When hovering over an image, I want the title attribute to appear at the top of the image.
I have achieved all of this, but when the text becomes visible, it only appears on one line and writes over itself when it runs out of space, as in the image.
I would like the text to start on a new line once it reaches the end of it's container.
I have tried adding word-wrap: break-word; to each of the CSS selector below, as well as to a P selector (as the link is wrapped in a p-tag).
Any advice on how to resolve this is much appreciated!
I have the following html:
<section id='photos'>
<p>
<a class='hovertext' href='http://i.imgur.com/gallery/eWlGSdR.jpg' title='Opened my window shade while flying over Japan, noticed a volcano was erupting. (OC) [2448x2448]'>
<img src='http://i.imgur.com/eWlGSdR.jpg' alt=''>
</a>
</p>
And the following CSS:
a.hovertext {
position: relative;
text-decoration: none !important;
text-align: left;
}
a.hovertext:before {
content: attr(title);
position: absolute;
top: -1;
padding: 0.5em 20px;
width: 90%;
text-decoration: none !important;
color: red;
opacity: 0.0;
}
a.hovertext:hover:before, a.hovertext:focus:before {
opacity: 1.0;
}
As Dinesh said in the comments, this was caused by poor code awareness, as elsewhere in the code, I was calling 'line-height:0;' on the #photos element.
Removing this solved the problem.
i think you coul use some java script on this, if you only want to make it add a extra line to it, correct me if im wrong.
Here's an example what i think you mean:
First add this text next your class="hovertext" :
id="HoverText"
Add this part after your body or paste the code between script into a .js file and call it with
<script src="filename.js"></script>
<script>
HoverText=document.getElementById("HoverText");
HoverText.onclick=function(){ClickToShowText()};
function ClickToShowText(){
HoverText.innerHTML+="<br>New line with text";
}
</script>
just use the break tag at the end of the text that's supposed to be on the first line.
</br>
easy
I am having trouble aligning LinkedIn share button on a website. Check the screenshot below -
You can find it live here. The button aligns well on other parts of that page but when it is placed above or below title then it somehow misbehaves.
How can I fix this?
I think this will solve your problem
span.IN-widget > span{
display:block !important;
}
Then clear <br> whick is between them and don't forget to clear element style to display.
In a custom CSS file, add the following:
.IN-widget > span > span {
height: 30px;
}
Make sure the Custom CSS file order is the last.
Output:
Thanks to all those who tried to help! I finally managed to get it aligned.
Solution:
Since the issue occurs only when the buttons are positioned above or below title text so first of all I programatically added a custom class to the LinkedIn button container - btnsx-li-height. Then I applied the below CSS -
.btnsx-li-height .IN-widget {
position: relative;
}
.btnsx-li-height .IN-widget > span > span > span {
position: absolute;
left: -30px;
bottom: -20px;
}
I have a page with a left sidebar that I want to be able to toggle on or off based on whether or not the user clicks it. Unfortunately entering JavaScript code on this website has been disabled and I only have access to CSS.
The left sidebar has
its main div (parentBlock)
a div for the show/hide, (toggleBlock)
a div for the logo, (div1)
a div for the navbar, and (div2)
a div for social icons (div2)
When the user clicks on "Show / Hide" I want to:
Hide (display:none) the logo, navbar, and social div's, and
Set the height of the main div to something smaller (say 30px).
Is there any way to do this in CSS?
<div class="parentBlock">
<div class="toggleBlock">Show / Hide</div>
<div class="divBlah">div1</div>
<div class="divBlah">div2</div>
<div class="divBlah">div3</div>
</div>
Then if the user clicks "Show / Hide" again, it will unhide the div's and set the height back to filling the screen.
Is this possible?
I found some code that would work if the "Show / Hide" button was in "parentBlock" but it didn't work if it was within "toggleBlock" (and I have to have the Show/Hide button in toggleBlock)
(http://tympanus.net/codrops/2012/12/17/css-click-events/)
I realize onClick events require JavaScript. Those are not possible since I can't use JavaScript :( Some people try to get around it by using either :active or creating checkboxes and having the checkbox:clicked value load the action ... but it only works with certain relations that I can't seem to nail down.
Unfortunately I cannot alter the ultimate structure of "toggleBlock", div1, div2, and div3 ... only what's in them and their CSS. Also making it even more difficult is that the website randomly generates ID="" each time the page loads so the TARGET method isn't possible. Also, the 3 div's (div1 thru div3) have the same class name. I'm beginning to think it's impossible :(
(For reference, I'm trying to use the tools on the New SmugMug and they're rather restrictive)
Here is a CSS only solution using target
DEMO http://jsfiddle.net/kevinPHPkevin/r4AQd/
.button {
display: block;
width:60px;
background: red;
z-index:1;
}
#element {
display: none;
background:#fff;
margin-top:-20px;
z-index:2;
}
#element:target {
display: block;
}
#show:target {
display: block;
}
#hide {
background: #000;
color: #fff;
}
As Joum has pointed out this is not possible to do via click events but using hover on siblings you might be able to achieve a similar effect. for example try adding this css:
div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }
for more information see this: http://css-tricks.com/child-and-sibling-selectors/
I'm not able to click links inside a div the is position:absolute. It seems to not work on mobile android as it works fine on the desktop in Chrome and even ie8.
As soon as I remove the style it works. The class msg-inner is only for jQuery which has it scrollTop no styling on it. I've read many answers and to use z-index or position:relative on the inner div but none works. I even tried using position:fixed on msg_container and same problem. The inner div scrolls and everything looks right but just the links are broken, BTW sporadically some will work and some don't. I took away all styling and just put plain links inside to see if it was a format issue and still nothing.
<div id="msg_container" class="absolute" style="overflow-y:auto;width:100%;height:75%">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.absolute {
position: absolute;
}
Your #msg_container shouldn't have a position of absolute, the .msg_inner should. Try this:
HTML
<div class="msg_container">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.msg_container {
position: relative;
width: 400px;
height: 400px;
}
.msg_inner {
position: absolute;
top: 0px;
left: 0px;
}
Also note that I made msg_container a class, not an ID. It's considered bad practice to have multiple ID's of the same name. While I don't know your code of course, I assumed that you might have multiple msg_containers on a page... so I used a class instead.