So i've got wall of text with links, when hovering over the href it should display a image on the exact same line and always on the left of the full text, so not next to the link itself (meaning background image won't do the trick :( ). I've been tinkering around a bit, but without succes, so hoping you guys can help me out with this one :)
As seen in the second screenshot, "kalender" and "menssana#home" are hrefs and need the same image next to the text. Wether it's javascript or css, any help is appreciated!
Html-example can be found here: http://www.menssanahealth.be/diensten/particulieren/
I would nest a hidden image in the link and create a CSS rule on hover to show the image.
Basically this:
A IMG {
display:none;
}
A:hover IMG {
display:inline;
}
But here is a more fleshed out example using absolute positioning for the image so that it doesn't affect the layout of the link but instead shows up to the left of it.
http://jsfiddle.net/HLKQ3/
You can use CSS :before for this like so
.link:before{
content:'';
width:50px;
height:20px;
background:url('urlToYourFeatherThing.png') no-repeat top left;
position:absolute;
top:0;
left:-20px; // width of image
display:none;
}
.link:hover .link:before{
display:block;
}
Oh, and you may need your .link to be position:relative; so that the leaf is positioned absolutely to the parent.
This has not been tested, if you encounter any problems please let me know.
Good Luck.
#Connor
If you have an span with classname 'leaf' with in the a tag you can write code like below in jquery,
HTML should be like this,
<span class='leaf'> </span><strong>Sauna</strong>
Jquery should be like this,
$("#dienst-content a").hover(
function () {
$(this).find('span.leaf').show();
},
function () {
$(this).find('span.leaf').hide();
}
);
and the CSS,
span.leaf
{
width:50px;
height:20px;
background:url('url-to-leaf-image.png') no-repeat top left;
display: none;
}
Off topic, I have a couple of observations:
the page seems to contain a list of services so using a <ul><li> ... would seem more appropriate markup than <p>-
Some list items have links, others don't it would be more user
friendly to differentiate a list item with a link from a list item
without link -- e.g. use bold text, different color, add an arrow or underline etc
Back on topic:
Using a background image is totally feasible by using a combination of left padding and left negative margin. However if you really don't want to that direction then I would add an extra span within the <a>, and hide it unti the link is hovered.
I've found a solution with jquery :)
You can see it in action here
i've added the following script
<script>
$('<img src="<?php echo get_template_directory_uri(); ?>/images/bloemblaadje.png" class="bloemblaadje"/>').prependTo("#dienst-wrapper a");
</script>
And the css
#dienst-content{
position:relative;
}
.bloemblaadje {
display:none;
position:absolute;
left:0;
margin-left:-60px;
text-align: center;
}
#dienst-content a:hover .bloemblaadje{
display: inline;
}
It might be heavy on a page with alot of links, but this seems the best solution for this design.
Thanks for the many suggestions!
Related
Today i found amazing filter button with 'circle black background' and i really liked it.
I want to integrate it in my website to study how to create it but i dont know how to start?
Maybe with create circle?
I have created floating button on my site (bottom right corner).You can find it here.When you scroll down to my website, the button will appear.So now i dont know how to create this circle with blurry background like example below?
My floating button
Sorry for my bad English!
I just created a playground for you here https://jsfiddle.net/rxnc3zb7/.
In general I added the following:
width:400px;
height:400px;
bottom:-150px;
right:-150px;
to the .go-top:hover. Set width, height, bottom and right values according to your needs. I've no tested it with the icon but I think you should hide it on hover (so .go-top:hover i {opacity:0}). But, if you want to center it you should set .go-top like this:
display:flex;
align-items:center;
justify-content:center;
In this way your icon will be aligned in any case.
Blur effect
For the blur effect I added a js code that simply add the class blur-content to the content container (in the example is .content) when the mouse is over on .go-top and remove it when mouse is out.
$('.go-top').hover(function(){
$('.content').addClass("blur-content");
},function(){
$('.content').removeClass("blur-content");
})
Additionally, I defined the blur-content class like this:
.blur-content{
filter:blur(3px);
}
The basic idea would be something like this. You can use CSS further to make it look more elegant. These applications generally have an Overlay in place which reacts to user button click or hover and display it.
You can use the below link to blur out your page contents or something similar
Full Page Blur in CSS
onBtnClick = ()=>{
document.getElementById("idBgOverlay").classList.toggle("overlayDisp");
}
.fullBg{
width:100%;
height: 300px;
background:orange;
}
.mybutton{
border:none;
border-radius: 50%;
color:#000;
background:#fff;
width:3rem;
height:3rem;
font-size:2rem;
z-index:2;
position:absolute;
}
.bgOverlay{
background:#101010c7;
position:absolute;
height:13rem;
width:13rem;
border-radius:50%;
top:-2rem;
left:-2rem;
display:none;
}
.overlayDisp{
display:block;
}
<div class="fullBg">
<div id="idBgOverlay" class="bgOverlay"></div>
<button class="mybutton" onclick="onBtnClick()"> + </button>
<div>
I've been searching for hours trying to fix this issue, but it doesn't seem like anyone else has had this problem.
I have two divs, one normal (and inline-block) on the left, and one floated nicely to the right of it. When I use .toggle() on them to hide/show, the floated one reappears below its original position.
Even with all my other code stripped away, this problem persists:
//Html
<div class="tableWrapper">
<div class="redDiv"></div>
<div class="greenDiv"></div>
</div>
//Css stuff here:
.tableWrapper{width:100%}
.redDiv, .greenDiv{width:49%; height:150px;}
.redDiv{
display:inline-block;
background-color:red;
}
.greenDiv{
float:right;
background-color:green;
}
//My two measly jquery calls...
$(" .redDiv").toggle();
$(" .greenDiv").toggle();
Or here on JSFiddle: http://jsfiddle.net/0hxc8rr4/
Note: I tried swapping out "style.display = stuff" calls for the jQuery, and that didn't seem to help.
jQuery will redefine the display property once you toggle. You can simply add float:left to the red block class and it should fix it. Or as mentioned, redefine it after each call. But if you're already floating one element, it'd make sense to float the other.
http://jsfiddle.net/0hxc8rr4/2/
It is simple. jQuery shows the element using display:block which then needs a row instead of a cell.
You can manually toggle it yourself to inline-block
change slideToggle() behaviour to display:inline-block instead of display:block?
(jQuery) Toggle div style "display:none" to "display:inline"
In your case you should just use float:left on the first div.
http://jsfiddle.net/v1etme23/1/
.redDiv{
display:inline-block;
background-color:red;
float:left;
}
Only get the above problem on Mac Chrome (not Safari or Firefox). The below gets it to work on Chrome too;
.redDiv{
position: relative;
background-color:red;
float: left;
}
.greenDiv{
position: relative;
background-color:green;
float: right;
}
I am trying to bring in a overlay that comes on the top of a image when you hover with your mouse. Currently I have it coming just from the top, and eases down to the bottom. What I am trying to achieve though, is have the overlay split into 2 sections, coming from the top left and bottom right and join in the middle. I know this is hard to understand with just text, so I created an image.
I have seen this done before, but am not sure what it is called, or how to achieve the effect. Help would be appreciated
Here's my stab at it: http://jsfiddle.net/
The basic idea is that you're just doing this, but with the wrapper element rotated. This solution would obviously need to checked for compatibility.
This could be achieved without a .slide element, but would require more manual positioning of the elements.
Here is a basic example using jquery.
Note, the cool kids would do this with css3.
http://jsbin.com/eyilog/1/edit
In this example the divs are absolutely positioned outside the containing element. overflow:hidden; makes sure they are invisible. On hover jquery animates their positions back inside the div, overlaying the content of the div.
To make it diagonal just use transparent images.
$(".text").hover(function() {
$(".topleft").animate({top: "+0px"}, 500);
$(".bottomright").animate({bottom: "+0px"}, 500);
});
<div class="text">
<div class="topleft"></div>
text
<div class="bottomright"></div>
</div>
.text {
background-color:red;
width:100px;
height:100px;
margin:auto;
overflow:hidden;
position:relative;
}
div div {
background-color:black;
height:50px;
width:100px;
position:absolute;
}
.topleft {
top:-50px;
}
.bottomright {
bottom:-50px;
}
In this fiddle you will fill when i hover on "action" a dropdown is showed.
The problem is when we see the last item it goes below the scroll and it is not seen.
in .scrollable class i have used the position:relative;
.scrollable
{
overflow: auto;
height: 300px;
position:relative;
width:100px;
}
and the child class "drop" has the position:absolute;
i dont want to change the position:relative of .scrollable class and i want the .drop element to comeout of the scrollable on hover and .drop should not be shown below the scroll;
here is the fiddle : http://jsfiddle.net/napper7/XPxsx/15/
THanks in advance!!
here is a working code,i added a bit of js to get the current cursor position
$('.navItem').each(function() {
$(this).hover(function(e) {
$(this).find(".drops").css('left',e.pageX-20);
$(this).find(".drops").css('top',e.pageY);
}, function(e) {});
});
http://jsfiddle.net/XPxsx/43/
.scrollable
{
position:relative;
height:300px;
width:100px;
}
I think your best bet is to drop off the overflow behavior. As far as I know, it is not possible to display nested divs outside their parent when it has an overflow value different from visible. Ever other values clip the outside box content of some sort (either by adding a scrollbar or by hiding completely the content)
I edited a jsfiddle that does what you want but without a scrollbar :
http://jsfiddle.net/XPxsx/42/
And here is some documentation on overflow behavior :
http://www.w3.org/TR/CSS21/visufx.html
Anything out of this, will be using js to display the content in a different place DOM wise.
Also, as a more general opinion : it is good to use sass (i guess from css indentation), but even better to order your selectors in a meaning order, that would be from the most general to the most specific (such as html, then body, then div.. in your case .scrollable, then .actionTools, then .navItem..)
hope that helps
I have made a tabbed menu: http://jsfiddle.net/zWMYp/
However when I add it to my webpage, it does not open the tab content like above: http://jsfiddle.net/vL5VJ/
I am unsure what is interfering with the tabs.
.css-tabs ul.noint11_menu li > div {
z-index: -1;
}
is the culprit. remove it (and add color: #fff) and it will work
http://jsfiddle.net/vM5VJ/2/
two issues here in your code
1) the z-index in the div under the a href have z-index of -1 thus it's behind everything else
2) the color of the text is almost the same as background
i've changed this css class as an example, you can use other methods such as define a css color for the div text;
.css-tabs ul.noint11_menu li:target > div
{
display:block;
z-index:1;
color:white;
}
here is the updated jsfiddle link
http://jsfiddle.net/vM5VJ/3/
my advise is to use google chrome to inspect the element, and incrementally remove or add css to figure out where is the problem. I never liked looking at the whole code to figure out a very focus issue