Develop Reference

Popover shows when hovering inner iframe

I have a small issue with a series of non-bootstrap popover made by me that contains social buttons each one and have to be shown when hovering or clicking an element that contains the popover.
The html of one of the items is like this:
<li class="social__list-item js-show-popover">
<div class="media social__popover">
<div class="media-left">
<span class="popover__img"></span>
</div>
<div class="media-body">
<p class="popover__title">Síguenos en Google+</p>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="https://plus.google.com/104645458102703754878" data-rel="community"></div>
</div>
</div>
</li>
I am hiding .social__popover with opacity: 0; and visibility: hidden; and turn visible with jquery.
Everything works as expected, the problem is when you hover over the area where the iframe embedded buttons are when the popover is hidden and they make the popover to show.
Using display:none on the popover solves the issue, but it makes to break the rendering of some of those embedded buttons (mainly google buttons)
I prepared a Jsfiddle example: https://jsfiddle.net/victorRGS/dcv2g973/1/
It seems that we can live with it but I would like to work as expected, also the area of the facebook widget (not working in the example, idk why) is quite bigger and this one could be a real annoyance.
Any help will be welcome

If I am understanding your problem right, you should try this.
Adjust pointer-events:none; to the popover when they are hidden, and set back to auto when you hover the icon.
See example: https://jsfiddle.net/y6Ldjuwd/
Is this what you want?

I solved this adding the z-index property and worked fine, with no behavior problems in touch devices.
Updated example: https://jsfiddle.net/victorRGS/dcv2g973/2/

Alternative to Toggle

I have a basic show hide toggle. It works on everything but iPhone and it's driving me crazy.
Is there an alternative to the following javascript that does not use the toggle function?
Javascript
$(document).ready(function(){
$(".pic_you_click_on").on('click', function(){
$("#display").toggle();
});
});
HTML
<img class="pic_you_click_on" src="images.png"></img>
<ul id="display" class="div_to_appear">
<li>About</li>
<li>Home </li>
</ul>
CSS
#display {
display:none;
}

Okay so I know what the problem is.
Animate Css. I used it to apply an animation effect to my header that flies in. What I did not know, it that using animations can often mess with your stacking order, particularly fixed elements. See article below.
http://daneden.me/2012/04/22/css-transforms-and-z-index/
I had to strip back the whole site and place each element one by one, checking it each time.
The moment I added the effect, it turned to custard. Apparently this is common knowledge... Not to me! I've removed it and the button now functions.

3D rolling link with different content

Is it possible to realize a 3D rolling link (click for example) with a different content when rolling? So let's say there is a DIV, and when the user hover over the DIV, the DIV spins (like in the example) and shows another DIV with another (clickable and with different action) content? Do you think this is possible just in CSS, or is there JS needed?

yes, see here an example: demo rotating cube
and here you can find a description description

The example you gave allows it.
JSfiddle
You just have to change the data-title in the HTML...
<div id="reveal">
<a href="http://zsitro.com/" class=" roll">
<span data-title="****CHANGE-ME****">H5BP build script</span>
</a>
</div>

How to do page / content transitions

I'm quite new to this all so sorry for my lack of terminology.
I was looking at this site and I was wondering how I do the content/page change without reloading the page.
Could someone point me in the right direction? What is that JavaScript? CSS transitions? jQuery? Or could you show me some code? Any help would be amazing; I've been looking around for a while can't find anything like it...

That's a simple slider, just instead of slide images, it slide content (nested divs, img, lists). I checked the code for you and is using this jQuery plugin: SudoSlider plugin
Do not reinvent the wheel by writing your own plugin, you can see few demos here, but this one is very close to the example using auto height. This is how you can use it on your site:
Jquery
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
HTML
<div id="slider" >
<ul>
<li><div> .... </div></li>
<li>Lorem ipsum text + image</li>
<li>List, maps, ...</li>
</ul>
</div>

It's JQuery animation. It's a (very slick, but still) typical carousel effect, where you have a slider div that extends beyond the visible screen, and its left margin is animated to create the effect.
It's straightforward to create the basic effect (but of course a lot of work to create something that looks as good as the link):
Set overflow-x: hidden to a container div
Add a slider div inside the container, and slide elements within the slider
Add navigation buttons, and on click animate the slider's left offset (keeping track of the current position)
Here's a really basic example.

I could say that it's possible to use all of the mentioned options :)
Basically you can use something like http://bxslider.com/ to achieve what you want just instead using of img elements inside list items use some content items.

Ignore mouse interaction on overlay image

I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.

The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.

So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.

Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.

Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.

If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>