We Keep Coding

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!

How to put this div in center and lock everything else with light blue background

I have a div,
<div id="messagebox" style="display: none; cursor: default">
<asp:DropDownList ID="ddl" runat="server" EnableViewState="true" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged"/>
</div>
On click event, I am showing this div using,
$('#messagebox').show();
How can I put it in center of screen and also make background light dark, I want to dropdown list to trigger code behind so want to disable everything except this div,

I Edited your html and added it inside tabel. Now it's working fine and always
stay in center position even on window resizing. Check below demo
http://jsfiddle.net/NnckT/9/

Sounds like you want this div to function as a modal; you can add a <div> covering the entire background, e.g.:
<div id="cover" style="position:absolute; width:100%; height:100%; background-color: #fff; display:none; "></div>
...and then show it via the same .show() method:
$('#cover').show();
You may also need to play with the z-index property of both to get the layering correct. You could also explore jQuery's Dialog system, if using jQuery UI is in the realm of possibilities.

This is essentially a 'modal pop-up functionality', also called 'dark box' pop-up. You can achieve the 'modal pop-up' functionality either with Javascript, or with 'pure CSS'; the latter will work even in case of Javascript disabled. Here is a link to Modal Pop-Up demo implemented as pure CSS3/HTML5 solution (no any javascripting): http://webinfocentral.com/html5/ModalPopUp.htm
Essential part of it utilizes target attribute as shown in the listing below:
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
Refer to my article (http://www.codeproject.com/Tips/170049/Pure-HTML-5-CSS-3-Modal-Dialog-Box-no-JavaScript) for the complete solution.

I would use som kind of modal plugin: Here is a couple, lots of examples out there. No reason to develop one of your own if no other requirements?
http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html

You can use jQuery BlockUI Plugin to block the screen with your desired div accessible as a popup in centre of the screen
$(document).ready(function() {
$('#someButton').click(function() {
$.blockUI({ message: $('#cover') });
});
});
See demos over here: http://www.malsup.com/jquery/block/#demos

try this ..
var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height();//retrieve current window height
$('#messagebox').css('top',(windowHeight/2)+"px");
$('#messagebox').css('left',(windowHeight /2)+"px");
$('#messagebox').show();

An impressive responsive javascript effect. How to do it?

recently I come accross to a very nice responcive javascript what I would like to implement myself. You can see an example in here:
http://themes.iki-bir.com/alphine-wp/#! (by pressing on any of the thumbnails). Sorting the thumbnails is really an old trick, but to see extra content is something new for me.
As I am new to javascript maybe anybody knows any tutorials or lessons on this? thanks in advance!

This is "Isotope" - demos and tutorials here: http://isotope.metafizzy.co/

I thought you wanted to know how to do the sorting, because everything else is very simple :) if you could tell me how this sorting-trick-works/link, I'll give you my best explanation of the others :)
The More Content part, could be implemented by pure css, without any javascript. with this structure;
<div class="thumb">
<div class="img"></div>
<div class="content"></div>
</div>
and have this css present;
.thumb{
display:block;
width:100px;
height:100px;
}
.thumb div{
position:absolute;
width:inherit;
height:inherit;
}
.thumb div.content{
opacity:0;
}
.thumb:hover div.content{
opacity:1;
}
or you could listen to the ´onMouseOver´ event as soon as mouse enters. for the other part of loading the full description, listen to the ´onClick´ event and grab the information threw xhr.

Hide a div below each row of thumbnails. Change the content on the thumbnails onclick event handler. When the content has changed, make use of jQuerys slidetoggle: http://api.jquery.com/slideToggle/
At least thats how i would do it. Let me know if you want me to elaborate
Some example code:
$(function(){
$('.thumbnail').click(function(){
var $this = $(this);
var $divToShow = $this.nextUntil('div.container');
//fetch the divs content via ajax or however u want to do it here...
$divToShow.stop(true, true).slideToggle();
});
});

I would try http://api.jquery.com/slideDown/ for the very basics...
after that... it's just a mix of imagination and good taste :)
There's a lot of doc on jquery site... http://docs.jquery.com/UI/Effects/Slide

If you don't want to use a library like jQuery the easiest way to do it is to add divs with overflow hidden, position absolute and height 0 under each row and just expand them on onclick.

How to show text/info in certain place on textover using javascript

http://www.baelkopat.com/GECCo/goingGreenTest.html is what I have so far. What I need to learn is how to show the additional text when a user mouseOvers the link. i.e. when a user mouseOvers on "Activity Guide(PDF)" the "Download and print...." shows up.
I have pretty good experience with ActionScript not that very new to JavaScript. I was wondering how to make the mouseOver effect happen.
The hover div is crated using css
overTextA{
position:absolute;
left:190px;
top:7px;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;
}
overTextB{
position:absolute;
left:190px;
top:40px;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;
}
and in HTML
<div id="overTextA"> Download and print a PDF-version of the Junior <i>Going Green with GECCo</i> guide, with activity information, instructions, and resources. </div>
<div id="overTextB"> Take the <i>GECCo Challenge !</i> Help our planet by saving energy AND earning money for conservation.</div>
I am not sure that is the best way to do it but for now I just want to have a workable version working that shows the appropriate text when mouseOver on the nav link.
Thanks, Rex

You could achieve this in a straight forward fashion using a library like jQuery.
Here is a tutorial that will walk you through using a .hover() function:
http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything
Clarification:
Add / remove your classes to the hover element, adding would display it, and removing or hiding it would take the text element away. jQuery is very useful when you don't want to dive into JS too much. Hope that helps!

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.