I'm trying to implement a sliding effect on the text next to the image by using animate and width: toggle once a user clicks on the image (as shown in the jsfiddle below).
The problem I'm encountering is that when it's 'sliding', it glitches between words; my assumption is that it's due to words being moved around in the element.
JSFiddle.
$('img').on('click', function(e) {
$('span').animate({
width: 'toggle'
}, 400)
});
span {
display: inline-block;
max-height: 20px;
width: auto;
position: absolute;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/50x50" alt="">
<span>Name Surname</span>
Is there a way to fix the glitchy effect?
Try this.
$('img').on('click', function(e) {
$('span').animate({width: 'toggle'}, 400);
});
span {
display: inline-block;
max-height: 20px;
width: auto;
position: absolute;
overflow: hidden;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="http://via.placeholder.com/50x50" alt="">
<span>Name Surname</span>
Here is the Updated Fiddle.
The easiest way to fix this is by preventing text wrap by setting white-space: nowrap in your CSS code.
$('img').on('click', function(e) {
$('span').animate({
width: 'toggle'
}, 1200)
});
span {
display: inline-block;
max-height: 20px;
width: auto;
white-space: nowrap;
position: absolute;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/50x50" alt="">
<span>Name Surname</span>
Related
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.
I want to reveal a hidden div when a hyperlink (with an anchor on the hidden div) is clicked. My research has led me to believe that using .switchClass is the way to go, but for the life of me I haven't been able to get it to work. Here's what I've got:
HTML
<!-- link -->
<div id="rightnest">
<p>
You likely have a few questions, and maybe some of them can
<br>be answered
<a href="#questions" class="smoothScroll">
<ins>here</ins>
</a>.
</p>
</div>
<!-- hidden div that should gain .centernest on click -->
<div class="hide">
<p> a lot of text</p>
</div>
CSS
.hide {
height: 400px;
left: 200px;
padding-top: 10px;
position: absolute;
top: 5px;
vertical-align: top;
visibility: hidden;
width: 700px;
}
.centernest {
height: 400px;
left: 200px;
padding-top: 10px;
position: absolute;
top: 5px;
vertical-align: top;
visibility: visible;
width: 700px;
}
there's .hide p, .hide h1, hide p a:link as well – all with visibility:hidden; (same for the .centernest class)
JavaScipt
$(function() {
$("<ins>here</ins>").click(function(){
$(".hide").switchClass("hide", "centernest", 100);
return false;
});
});
Try this:-
$(function() {
$(".smoothScroll").click(function(){
$(".hide").css( "visibility", "visible" );
});
});
Fiddle
Call the click event with the hyperlink class.
$(function() {
$(".smoothScroll").click(function(){
$(".hide").switchClass("hide", "centernest", 100);
return false;
});
});
So, I want to put image over image. The second to be in up corner.
I want to do that with jQuery.
$("#result").on({
mouseenter:function(){
$("#article").attr("src", "button2.png");
}, ".button");
});
I want when someone hovers to article to show image for SHOW MORE
Like everyone else is saying, you can do it with just CSS. The easiest way to do it I think is to have one image as a background and then just having another image on top:
See JSFiddle
HTML:
<div class="image1">
<img src="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" class="image2"/>
</div>
CSS:
.image1 {
width: 650px;
height: 433px;
background: url("http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg");
}
.image1:hover .image2 {
display: block;
}
.image2 {
display: none;
width: 100px;
height: 80px;
}
==== ALTERNATE SOLUTION ====
If you have to do it with img tags you can use the following:
See JSFiddle
HTML:
<img src="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" class="image1"/>
<img src="http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg" class="image2"/>
CSS:
.image1 {
position: absolute;
}
.image1:hover + .image2 {
display: block;
}
.image2 {
display: none;
width: 100px;
height: 80px;
position: absolute;
z-index: 100;
}
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/
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.