We Keep Coding

Create 'focus' circle with blurry background in HTML and CSS

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>

Perform action when div leaves screen (Jquery)

I am very new at jQuery and I want to dive right into it but i need help. I have provided a image below to explain what I need. What i want is when #DivText is scrolled up and no longer visible to the user I want to Animate #ActionDiv.
Please help me out with this I have been looking at jQuery plugins all day and so far none of them do what i want them to do.
The code I have so far ( requested )
<div class="welcomeimage" ></div>
<style> .welcometext{
color:white;
font-size:50px;
position:absolute;
padding-top: 100px;
padding-left: 150px;
float:left;
font-style:italic;
} </style>
I don't have any jQuery associated with it yet because I'm VERY new with jQuery.

What you exactly want is jquery scroll() event.
there are many plugins available to achieve this
this is one of them
refere this link
ref
and click on View the demo demo
If you want to know more basics about scroll() then refer this link

Anchor tags disappearing inside an expanding DIV

HTML:
<li>
Plan Search
<div class="ac_subitem">
<span class="ac_close"></span>
<h2 style="border-bottom:1px #989898 dotted; Margin:0 20px;">Advanced Plan Search</h2>
TEST LINK
<li>Feature Under Construction</li>
</div>
</li>
CSS:
.ac_subitem {
width:1000px;
height:0px; /* animate to 400px */
top:50%;
right:0px;
margin-top:0px; /* animate to -200px */
position:fixed;
z-index:99;
overflow:hidden;
background:transparent url(../images/bg_menu.png) repeat top left;
}
Basically, I have a navigation set up via <ul></ul> each <li> contains an expandable <div>. What I am trying to do is add anchor tags to external links within these <div>s however the text/image used will not show up, the anchor is there and clickable but the contact itself will not appear, thus leaving me with a clickable blank space. any ideas?
Note: I do have the JS used to perform these actions, but it is quite lengthy. If necessary I can post that as well. thanks for your time in advanced!
Edit: Here is the fiddle for whole code used http://jsfiddle.net/8smk6mhs/. It doesn't seem to load properly in jsFiddle, however everything is loading fine using provided code in Dreamweaver6 links to jQuery and http://yourjavascript.com/0073145129/center-menu.js load it properly. Also a link to the completed template purchased for this project in comments.
Edit2: Have since gone through, validated, cleaned up the code. I have been trying to work through this problem for days now, and cannot grasp why this is happening. the fact that the anchor is active and works but Just cannot properly display contents of anchor is what really confuses me.
*I've updated the Fiddle.

Display image left of href hover

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!

SO style alert header

I apologize if this question is vague, but I want to build a drop down header, very similar to the one on StackOverflow that alerts you whenever you have earned a new badge, or on Twitter whenever a new tweet comes in.
I've been looking around on the internet for a tutorial, but I'm having trouble googling exactly what I'm looking for. I assume there is a way to do this in jQuery, or there may be a jQuery plugin for it, but I haven't had any luck finding one.
The idea would probably be to make an AJAX request every so many seconds, and if a new alert-worthy item is found, display it for the user.
If someone could point me to a resource to learn how to build one, and/or an existing plugin, that would be great.
EDIT:
If anyone is curious how I made the actual header using jQuery,
In the success callback function of your ajax:
$("#alertHeader").html("whatever you want to say");
$("#alertHeader").slideDown("slow");
Where "alertHeader" is the id of your alert div.
The corresponding CSS for the header is:
#alertHeader {
position:relative;
background:#313115;
width:100%;
height:30px;
display:none;
float:left;
position:relative;
z-index:10;
}
#alertText {
padding-top: 2px;
margin-left:auto;
margin-right:auto;
color: #FFF;
font-size: 15px;
font-style: italic;
text-align: center;
}

You are basically looking for a periodic polling script. You can achieve that by using setInterval() in a function to call itself recursively and do your AJAX request/status check in it.
http://ajaxpatterns.org/Periodic_Refresh
http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/

For the UI display part of this, you are looking for a fixed header with a link that uses jQuery or whatever javascript to hide the header when clicked.
Edit: this link is probably a better example.