I have simplified something (an HTA) I am working on in hopes that someone can help me (again) achieve what I am going for.
I am trying to get an entire table's styling to change when hovering over the word help. This way the tooltip will "pop" more. I have tried changing the HTML a thousand different ways but the CSS that i think should work, doesn't. I thought if I wrap the entire "help" section in a DIV then another DIV around the table I could use this
.help:hover ~ table { opacity:0.4;}.
the jsfiddle below is the only way I can get the effect i want but the table opacity goes to 0.4 no matter where I hover (assuming because its all in 1 DIV?). Hopefully this all makes sense!
.help:hover table {
opacity: 0.4;
}
http://jsfiddle.net/6DsMg/12/ (please view this in IE only)
I was able to get it working by using what I posted above. Still unsure why it isnt working in my actual finished product though. At least i know it works.
for anyone who comes across this post, the jsfiddle has been updated.
Related
At first, it looks simple, and at the end of scroll event, a margin (or padding) will be applied at the top.
This is useful when there is a sticky element at the top. Then when a link is clicked and scroll down to somewhere on the page, it's nice to have this element "skipped" by the scrolling.
This article explains it pretty well: https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/
I could make it work on really simple examples, and that works. However, I am trying to make this work on a normal website, and I can't. I think there is something not clear for me (or in general?) about how it works.
Please have a look here: https://meowapps.com/media-cleaner/tutorial/#Media_Library_Scan
When a link is clicked on the right, it scrolls but the scroll-padding-top is completely ignored. I have tried many techniques, moving the CSS property in many different places in the code, but that doesn't do anything.
Do you see what's wrong? Ideally, it would be great to find real the cause and maybe have an explanation why it doesn't work in this case and describes what's that case actually is.
Thanks a lot :)
scroll-margin is not useful if scroll behavior is controlled by JS
Looking at your page source, I found easy-table-of-contents WordPress plugin, which relies on smooth-scroll jQuery script. Also, I don't see scroll-behavior: smooth; in your body either (see this MDN page for reference).
It looks to me that your anchor link is not controlled by CSS but by JavaScript. And, as you'd know, when something is controlled by JavaScript, any relevant style declaration via CSS might be ignored.
What to do?
I honestly don't know. Perhaps you could replace the table of contents plugin with something that gives you a finer control. Perhaps you could refactor the said plugin yourself. In any case, should you need to keep the jQuery dependence and a particular WP plugin, you might have a tough luck for this fix.
I got your point, sorry for a long answer but I am sure this will clear your doubt with the output.
scroll-margin-top and scroll-padding-top define the amount of space to be given from within the element or from outside the element whenever a scroll event occurs.
Sometimes we see some text gets cut from the viewport such that it's half visible.
To avoid that kind of thing scroll-margin-top is helpful.
when no scroll event happens:
when scroll event happens but with scroll-padding-top:20px;
see an example from MDN Web Docs
Now applying this logic to your link example
When we click on the link it takes us to the specified div,
But when the scroll-padding-top is applied the output looks like this it gets stuck to the top of the viewport, even if we specify a certain margin with CSS the output is the same because the padding is applied from within the element:
When we apply scroll-margin-top we get the desired output on the link click event or scroll event:
a{
font-size:30px;
text-transform:capitalize;
}
#down{
scroll-margin-top:30px;
background-color:royalblue;
height:100px;
width:50%;
}
<center>
down
<section style="height:1000px;"></section>
<div id="down"></div>
<section style="height:1000px;"></section>
</center>
See Output
Correct me if I am wrong anywhere.
I'm clueless how to get the scrollbar display below the active box - list item.
After searching I have found that the z-index should work on element positioned other than static. But still I'm still unable to produce the desired effect.
This is just one part of my problem, I believe if I understand the solution to this one, I can also fix another similar problem.
Somehow the active box is displayed on top of the scrollbar, but not the scrollbar's handle.
Here's the JsFiddle. Should be quite easy to notice my problem.
The desired effect is that the scrollbar and everything related to it (handle) is displayed below the active(longer, red) box.
Sorry, don't really see a way to accompany this problem with code inside the post or how to make the JsFiddle with less code.
I think you'll have to apply a z-index to the .scrollbar element itself, rather than its child .scroller. Add these styles to your definition of it:
.scrollbar {
z-index:-1;
position:relative;
}
And you should get (what I hope is) your desired behaviour. Here's an updated JSFiddle for you to see what this achieves. If this isn't what you were looking for, feel free to let me know and I'll be happy to help further. Good luck!
I am having trouble getting the facebook pop out dialog to be on top of my nav bar and slideshow here:
http://d14599.u62.c14.ixinstant.com
I have search for several hours and all the solutions have not seemed to work. Here is a list of what I have checked:
-overflow:hidden on other page elements causes problems. I looked into this but my nav bar does not have this property.
-z- index only works for positioned elements. I made sure my elements were positioned relative or absolute.
-I tried directly styling the js created facebook elements using things like
.fb_iframe_widget{
display:block !important;
z-index:9999 !important;
}
I'm not that good with CSS but have never been stuck this long on one single issue.
I am assuming the issue actually is with something I have done wrong elsewhere on the page, like the navbar itself, but I cannot see what it is. Any thoughts would be greatly appreciated.
I searched lot of things and tried it too but no solutions worked for me. I found one quick fix to solve facebook like dialogbox overlap issue here and it worked for me.
Hope it could save others time, Cheers!
It doesn't really solve the issue, but what I have done is to hide the comment box. For this case it was acceptable. In the css file I added:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display:none;
}
What worked for me was to set the z-index for the element that holds the Facebook like button to be higher than the element the comment box was shown behind.
So, CSS is not my strength. I need some help. I'm developing a Wordpress Plugin, and while I have the PHP down, I need help with getting the CSS to work with me. The page can be seen at http://www.airupt.com/?page_id=386. The issue is that I have called a shortcode for the search box below the call for the search results. This is for demo purposes only and the link will die soon after this is fixed.
Please type something in and search, you will see what I mean. The Search box background will appear at the top of the results, over the first one. The search box itself will appear after the results, as expected.
Can anyone tell me where the code went wrong and how it can be fixed? :D
Are you testing this in more than one browser? It doesn't seem like it. To answer your question:
give it a float:left;, like the rest of the elements in the <div class="entry">
.search-custom {
float:left;
/* all the other styles for search-custom that it normally has*/
}
I'd say rather set clear:both on .search-custom.
overflow:hidden will get you into more/different trouble because your sizes are a bit out
Set overflow:hidden; on your .search-custom div, then go get yourself a copy of Firebug. It'll get you out of 80% of these jams.
I'm currently working with a set of links that are getting their background images replaced when they are focused, hovered over, and non-focused; but right now I also need to fix it so that when you hover a focused link you'll get yet another result. My searching hasn't found anything and my experiments with anything like:
a:focus:hover { background:url(image.url) no-repeat;}
have met with less than desired results. Does anyone know of way to simply do what I'm trying for?
This should work, but focus won't work in IE without a valid doctype, so I doubt :focus:hover will fare any better.
Solution found, that method does work; but only when you remember to include the class and sub-class names that you are applying to an item.