Develop Reference

Text flickers when replacing an image (css and jquery)

The transition of the text becoming visible over an image when hovering over the image, was smooth before I put the image and the text into one div. I put the image and text into one div so that I could position the text on top of the image. The transition is now shaky--do you know how I can fix this? Thank you.
$(document).ready(function() {
$("img").hover(function() {
$("img").stop().animate({
"opacity": "0"
}, "slow");
$(".text").css("visibility", "visible");
},
function() {
$("img").stop().animate({
"opacity": "1"
}, "slow");
$(".text").css("visibility", "hidden");
});
});
#image {
display: block;
margin: 0 auto;
height: 35%;
width: 35%;
padding-left: 5%;
overflow: hidden;
}
#imageblock {
position: relative;
overflow: hidden;
}
.text {
color: #000000;
text-align: center;
font-family: "Raleway";
font-size: 90%;
visibility: hidden;
position: absolute;
padding: 3%;
width: 100%;
bottom: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageblock">
<img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png">
<div class="text">
<h5>NBB4 ethylene</h5>
</div>
</div>

Bind the hover event to #imageblock instead of the images:
$(document).ready(function() {
$("#imageblock").hover(function() {
console.log("enter");
$("img").stop().animate({"opacity": "0"}, "slow");
$(".text").css("visibility", "visible");
}, function() {
console.log("leave");
$("img").stop().animate({"opacity": "1"}, "slow");
$(".text").css("visibility", "hidden");
});
});
#image {
display: block;
margin: 0 auto;
height: 35%;
width: 35%;
padding-left: 5%;
overflow: hidden;
}
#imageblock {
position: relative;
overflow: hidden;
}
.text {
color: #000000;
text-align: center;
font-family: "Raleway";
font-size: 90%;
visibility: hidden;
position: absolute;
padding: 3%;
width: 100%;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageblock">
<img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png">
<div class="text">
<h5>NBB4 ethylene</h5>
</div>
</div>
So what was going on? You bound the hover event on the image - and - you have an invisible text block covering part of the image. When you hover on the image somewhere in the middle, the hover event is fired making the text visible. Now that text covers the image making the image no longer hovered triggering the second event handler which makes the text invisible. The image is now hovered again and you have a flickers! Notice that there is no flickering if you mouse over around the edges of image i.e. the area not covered by text.

In Line Text Only Slide Toggle for Menus

I have this: http://jsfiddle.net/QDUQk/1621/
*click on "Menu" to toggle the slide. Code is at the bottom of this post.
How can I make it so that "Menu" does NOT disappear, but rather the "Inner Menu" slides out to the left of it WITHOUT moving the position of "Menu" ("Menu" would be on the far right side of the screen and the "Inner Menu" would slide out to the left of "Menu" without moving the position of "Menu").
Thus clicking "Menu" leaves you with "Inner Menu◀Menu" & clicking again on "Menu" brings you back to just "Menu" being displayed.
Also, how can I make it so that clicking "Inner Menu" does NOT provoke it to slide away?
Thank you!
CSS
#categories {
display: none;
border : none;
width: 100px;
right: 0px;
}
HTML
<div id="cat_icon">Menu</div>
<div id="categories">
<div CLASS="panel_title">Inner Menu◀</div>
</div>
</div>
JS
$('#cat_icon,.panel_title').click(function () {
if($('#cat_icon').is(':visible')){
$('#cat_icon').fadeOut(function () {
$('#categories').toggle('slide', {
direction: 'right'
}, 1000);
});
}
else{
$('#categories').toggle('slide', {
direction: 'right'
}, 1000, function(){ $('#cat_icon').fadeIn();});
}
});

Simplify your JS to
$('#cat_icon').click(function () {
$('#categories').toggle('slide', {
direction: 'right'
}, 1000);
});
and change CSS to
#cat_icon {
float: right;
}
#categories {
float: right;
display: none;
border : none;
width: 100px;
right: 0px;
}
http://jsfiddle.net/zqnL6aqg/2/

I think this covers everything you are asking for:
http://jsfiddle.net/QDUQk/1627/
To ensure that clicking inner-menu doesn't dismiss it, you need to remove ".panel_title" from the .click() handler, like this:
$('#cat_icon').click(function () {
if($('#cat_icon').is(':visible')){
$('#categories').toggle('slide', {
direction: 'right'
}, 1000);
}
else{
$('#categories').toggle('slide', {
direction: 'right'
}, 1000, function(){ $('#cat_icon').fadeIn();});
}
});
Other fixes included positioning elements... and providing a parent that they could be positioned relative to.
<div id="container">
<div id="cat_icon">Menu◀</div>
<div id="categories">
<div CLASS="panel_title">Inner Menu◀</div>
</div>
<div>
and CSS like:
#container {
position: relative;
}
#cat_icon {
position: fixed;
top: 0px;
right: 0px;
}
#categories {
position: fixed;
top: 0px;
right: 50px;
display: none;
border : none;
width: 100px;
}

Here you have a snippet:
$('#cat_icon').click(function () {
$('#categories').toggle( 'slide', { direction: 'right' }, 1000);
});
#container
{
float: right;
/* to avoid the "Full page" div in the snippet iframe*/
margin-top: 50px;
}
#cat_icon
{
background-color: white;
}
#cat_icon, #categories
{
position: absolute;
right: 0px;
line-height: 1.5em;
}
#categories {
margin-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id ="container">
<div id="categories">
<div CLASS="panel_title">Inner Menu◀</div>
</div>
<div id="cat_icon">Menu</div>
</div>
To avoid the overlap you can put a white background to the #cat_icon element.
Also, both #cat_icon and #categories elements don't get correctly
alineated due to the ◀symbol. You can force the line-heightto avoid it.
Hope it helps!

Creating hover-visible buttons

I am trying to create some options that are hidden unless the user goes with the mouse in a specific area. Let's take an example: Google+ profile page:
When you go with the mouse cursor on the picture, the button appears.
Here is what I tried:
var $button = $("#button");
$("#profile-picture").on("mouseover", function() {
$button.show();
}).on("mouseout", function() {
$button.hide();
});
#profile-picture {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 45px;
left: 70px;
opacity: 0.75;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
The problem is that when I go with the cursor over the #button, it flickers. What can I do?

The easiest method is placing them both in the same div, and then using mouseover/out for that div. Example: http://jsfiddle.net/1g24mhhz/
HTML:
<div id="profile-picture">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" class="profile">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
CSS edits:
#profile-picture .profile {
width: 150px;
height: 100px;
}
EDIT: You should probably not use an ID for the div, since you probably have multiple profiles on a page. This was just to show it with the code you had already used.

A simple css approach. You can have a click event on the button :)
$('#button').on('click', function() {
alert('I am clickable');
});
#profile-picture,
.hover-wrap {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
bottom: 0;
right: 0;
margin: auto;
opacity: 0.75;
cursor: pointer;
}
.hover-wrap {
position: relative;
}
.hover-wrap:hover #button {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="hover-wrap">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>

You can use CSS:hover properties to show/hide the button, no Javascript needed.
The trick is a sibling selector:
#profile-picture:hover + #button, #button:hover{
display:block;
}
Try this:
http://jsfiddle.net/6s9200ab/

How do I launch a Lightbox(Fancybox) from a ToolTip(tooltipsy)?

the app I am working on right now requires the user to hover over an icon, which launches a tooltip, which the user can click a link inside of to launch a fancybox with the corresponding product. I am running into the problem of the tooltipster not launching the fancybox.
Here is the code I am currently using.
HTML:
<body class="body">
<div class="main-container">
<div class="column">
<div class="anicontainer">
<a id="p1tooltip" class="overlay" href="javascript:void(0)" >
<img src="icon.png"/>
</a>
</div>
</div>
</div>
CSS:
.main-container {
position: absolute;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
margin: 0;
padding: 0;
z-index: -1;
height: 1080px;
width: 1920px;
background-image: url(../bk.png);
background-size: 1920px 1080px;
background-repeat: no-repeat;
display: inline-table;
border: 1px solid #C0C0C0;
border-radius: 5px;
}
.anicontainer {
z-index: 100;
width: 1530px;
height: 1080px;
margin: 0 0 0 0;
padding 0 0 0 0;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
display: table-cell;
vertical-align: top;
}
.column {
display: table-row;
z-index: 100;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
margin: 0;
padding: 0;
}
#p1tooltip {
top: 440px;
left: 290px;
}
.overlay {
display: table-cell;
height: auto;
width:auto;
position:absolute;
z-index: 5;
}
First Code I tried JS:
$('#mst').tooltipster({
animation: 'fade',
delay: 100,
trigger: 'hover',
position: 'right',
fixedWidth: 30,
interactive: 'true',
contentAsHTML: 'true',
content: $('<p class="font tt">Title</p><hr><p class="tt font"><a id="p1" href="javascript:void(0)"><img src="icon.png"/></a>Product1</p>')
});
Second Code I tried JS:
$('#p1tooltip').tooltipster({
animation: 'fade',
delay: 100,
trigger: 'hover',
position: 'right',
fixedWidth: 30,
interactive: 'true',
content: $('<p class="font tt">Title:</p><hr><p class="tt font"><a class="fancybox" href="javascript:$.fancybox( {href : '
product.html '} );"><img src="icon.png"/></a>Product1</p>')
});
JSFIDDLE

Your problem is that the Fancybox link inside the tooltipster content option doesn't exist in the DOM when the Fancybox trigger initialises everything.
Solution would be to set your tooltipster content option to an element already on the page (a div inside of a hidden div should work fine), or to reinitialise Fancybox inside the tooltipster functionReady callback option.
Javascript is a functional language, you can just pass a new function back through the options.
Example:
$('#p1tooltip').tooltipster({
functionReady: function () {
$("a.fancybox").fancybox();
}
});

first thing I see : do not use $('<p>aaa</p><p>bbb</p>') but $('<div><p>aaa</p><p>bbb</p></div>'). It's important fot Tooltipster to have only one container tag for all your stuff, it makes a difference in some cases.
If that's not enough, please prepare a JSfiddle, it will be easier to debug for everyone.

Can I use <a> tag button classes in fade in/out JQuery function?

I have a jQuery image thumb Slider in which each thumb is an "an tag button that links to different div elements.
When a user clicks on a thumb button, I would like the associated div to animate fading in and when the user clicks on another, the previous div should fade out and fade in/replace with the next.
I'm brand new to jQuery and I have spent a lot of time on researching the use of this function that I'm getting confused with the MANY solutions out there.
I feel like I'm missing something in the code but I don't know what.
Below is what I have so far:
CSS
Slider
#aemcSlider {
list-style:none;
margin-left: 289px;
width: 474px;
height: 97px;
top: 134px;
position: absolute;
overflow: hidden;
left: -3px;
}
#aemcSlider a {
margin-right: -4px;
}
#aemcPkgContainer {
z-index:1;
width: 425px;
height: 675px;
position: absolute;
left: 320px;
top: 233px;
}
#aemcGroundAdContainer {
z-index:2;
display: none;
width: 425px;
height: 675px;
position: absolute;
left: 320px;
top: 233px;
}
#aemcClampOnAdContainer {
z-index:3;
display: none;
width: 425px;
height: 675px;
position: absolute;
left: 320px;
top: 233px;
}
#aemcMetrixContainer {
z-index:4;
display: none;
width: 425px;
height: 675px;
position: absolute;
left: 320px;
top: 233px;
}
Buttons
//4 buttons like this//
a.aemcGroundFlexBut {
position:relative;
float: left;
margin: 0 auto;
display: block;
width: 162px;
height: 114px;
background: url(../Images/AEMC_AD_6472-74.png) no-repeat 0 0;
}
a.aemcGroundFlexBut:hover {
background-position: 0 -114px;
}
HTML
Jquery Slider
<div id="aemcSlider">
<ul>
<li><a class="aemcPkgBut" href="#"></a></li>
<li><a class="aemcGroundFlexBut" href="#"></a></li>
<li><a class="aemcClampBut" href="#"></a></li>
<li><a class="aemcMetrixBut" href="#"></a></li>
</ul>
</div>
Containers:
//There are 4 containers like this//
<div id="aemcPkgContainer">
<div class="workImage">
<img src="Images/AEMC_packaging_image.png" alt="Packaging"
width="295" hspace="0" vspace="0" border="0" title="Packaging"/>
</div>
</div>
JS:
// JavaScript Document
$(document).ready(function () {
$(".aemcPkgBut").click(function () {
$("#aemcGroundAdContainer").fadeOut(2500);
$("#aemcClampOnAdContainer").fadeOut(2500);
$("#aemcMetrixContainer").fadeOut(2500);
$("#aemcPkgContainer").fadeIn(2500);
});
$(".aemcGroundFlexBut").click(function () {
$("#aemcPkgContainer").fadeOut(2500);
$("#aemcClampOnAdContainer").fadeOut(2500);
$("#aemcMetrixContainer").fadeOut(2500);
$("#aemcGroundAdContainer").fadeIn(2500);
});
$(".aemcClampBut").click(function () {
$("#aemcPkgContainer").fadeOut(2500);
$("#aemcGroundAdContainer").fadeOut(2500);
$("#aemcMetrixContainer").fadeOut(2500);
$("#aemcClampOnAdContainer").fadeIn(2500);
});
$(".aemcMetrixBut").click(function () {
$("#aemcPkgContainer").fadeOut(2500);
$("#aemcGroundAdContainer").fadeOut(2500);
$("#aemcClampOnAdContainer").fadeOut(2500);
$("#aemcMetrixContainer").fadeIn(2500);
});
});
This above is not working.
I'm using tag buttons ...could that be the problem?
Any help would be much appreciated.
thank you!

I don't think that should be a problem... I tried to use your code to replicate the behavior.
Check this Fiddle out... Hope that helps.
Fiddle
$(document).ready(function () {
$(".aA").click(function () {
$('#A').fadeIn(1000);
$('#B').fadeOut(1000);
});
$(".aB").click(function () {
$('#A').fadeOut(1000);
$('#B').fadeIn(1000);
}); });