Develop Reference

Wordpress CSS Navigation Menu on hover take effect

so I'm building a wordpress website and I have some products sub-menus in a megamenu. I wanna make so when a hover a sub-menu product link to show a specific image in column 4 of the megamenu. I've tryed many options with css but can't figure it out.
So, as an exemple I've gave one link a special class ".pricomigdale" and the image ".pricomigdale-img" with a "display:none" so when I hover on "Pricomigdale de cocos" to take action like this ".pricomigdale a:hover .pricomigdale-img {display:block}" but nothing happen. Here's the website maybe someone can figure it out: https://thefitbaker.ro
enter image description here

I would like to eat your products ;)
I think it might be helpful if you would post a bit more of your code.
I just recognized that you left out a semicolon here: {display:block}
It should be {display:block;}
But I am not sure if that would solve your problem..

I think this fiddle can help you
The point is that you create attribute with your links, for example data-image with url of necessary image
And use JS to make your image changing on hover
$('a').hover(function(e) {
e.preventDefault();
$('#photo-container').html('<img src="' + $(this).data('image') + '"/>')
});

bootstrap - tooltip break td style

The tooltip breaks the width of td.
Please see this Fiddle snippet http://jsfiddle.net/zhoujiealex/1d1bm9kc/
I want to show tooltip when mouse hover on truncated text in table.
I refere this post Show Bootstrap Tooltip Over Truncated Text
The difference is that above post use a <div> embed in <td>.
In my current project, old codes used <td> directly.
The tooltip can show up, but it breaks the width of table. It's so wired.
No tooltip
tooltip shows:
Anyone can show me the right direction?

Just add container: 'body' in your code
$this.tooltip({
title: $this.text(),
placement: "bottom",
container: 'body'
});
Check this out: http://jsfiddle.net/zhoujiealex/1d1bm9kc/
Read More: http://getbootstrap.com/2.3.2/javascript.html#tooltips

You could use a or span tags inside td and apply tooltip/popover to it.
This will not break the tds of your table.
Or just use the built-in solution tooltip-append-to-body="true"
Please refer to this.

jquery "Cycle2" slider-show pager - How to get square icons?

I'm trying to turn the round default pager buttons into square ones.
I managed to change the color of them by modifying the CSS of ".cycle-pager span", but its not responding to border-radius:0px;
Can't find anything in the documentation. Perhaps i'm looking for a 'too easy' method.
Any ideas?

That is because the 'template' used by default is '•' which places a text bullet (like from an unordered list) in the span.
To change this, you'll need to change that template using the Cycle2 settings.. something like this:
$('.slides').cycle({
pagerTemplate: '<span class="slide-links"></span>'
});
Then you can use your CSS to target and style those links. Hope that helps!

jquery droppable add css after drop

I am using jquery droppable to add divs inside a larger div. I am working on building a layout page.
see fiddle:
Fiddle
What I am trying to do is when the newRow or panel is dropped, add some css to it? i.e. make it draggable, change its color and so on...how can i do that?
i have tried.
$('#panel').append("<div id='"+id+i+" class='subPanel draggable'>"+id+"</div>").addClass('subPanel draggable');
but that adds the css to the #panel div...

You simply forgot to close the single quote:
$('#panel').append("<div id='"+id+i+"' class='subPanel draggable'>"+id+"</div>");
See result

jQuery Tools - Tooltip issue

Have a tooltip issue here. Hope somebody could help tweak the code a little bit.
I'm using the jQuery Tools for implementing a tooltip. I need tooltips to open from separate div where I can use any html code. So far I have just one tooltip to open:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
$("#download_now").tooltip({
offset: [5, 0],
effect: 'slide'
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
</script>
And it works fine except I need more tooltips added.
Could anybody help modifying the script so more tooltips could be added by their id?
Here is the JSFiddle with one tooltip (working)
Here is the JSFiddle with more tooltips (not working)
I'm sure there should be an easy fix. I'm just not a javascript specialist.
Thanks!

Ok i got it. I apologize, I thought you were using jquery-ui tooltip (which provide - according to me - better widgets than the lib you are using).
By reading the documentation i found that :
After this the element next to the trigger is being used as the tooltip
meaning that your tooltip contents (with html as you specified) need to be placed after the element on which you want a tootip, like this :
Lorem ipsum
<a id="download_now1" class="need_tooltip">
<strong>dolor sit amet</strong>
</a>
<div class="tooltip">
<p><strong>Some sample text</strong> with html within...</p>
</div>
Have a look in this jsFiddle.
If you can't put your tooltips contents directly after your elements i would suggest you to use jquery-ui which is more flexible to define tooltips contents.
EDIT to provide a jquery-ui version
jquery-ui tooltips basically closes when element looses focus, so you can't hover the tooltip (to click on a link inside for example). But there is a workaround to prevent tooltip from closing for such case :). Thus i think this new jsFiddle is filling your requirements.