I would like to make the DIV that appears on hover transparent so the image below it shows through slightly, but instead it is only getting lighter. I have another page with similar functionality, where the DIV slides in horizontally instead of from the bottom; this page has successful transparency. For some reason, the code is not translating.
Here's what I have so far: http://jsfiddle.net/tGEZb/
I've tried rgba instead of the code I have here with no luck, and also searched through the posts here but can't find anything that addresses this exact issue..not sure what else to try. I'm sure it's something obvious that is hiding from me from staring at the code for too long but hopefully someone can help.
I would like to avoid using CSS3 if possible and also maintain the smooth functionality of the slider now (rather than having something that toggles).
Disclaimer: I copied and pasted the JavaScript from a post I found online - unfortunately that is the extent of my JS abilities.
Thanks in advance for any help.
You're hiding the image by setting its parent's height to 0. There is nothing for the div to see-through to, so the white background make's it lighter.
Try moving the bottom div instead. http://jsfiddle.net/tGEZb/6/
$(document).ready(function(){
$('.espot-up-down').mouseover(function(){
$('.espot-slide-onhover').stop().animate({
top: -230
}, 150);
}).mouseout(function(){
$('.espot-slide-onhover').stop().animate({
top: 0
}, 250)
})
});
.espot-up-down needs position: relative;
Related
I have created a segment from a circle but when I try to apply a background image to it, it applies it to the whole circle resulting in the image getting centered somewhere below what the user can't see.
Right now, only the portion of the circle that overlaps with the rectangle gets displayed thanks to overflow: hidden, I have just disabled the hidden for now to show how the image is actually getting rendered.
Can someone please tell me how I can apply a background image only to the portion of the circle that's visible?
This is the result I want:
Demo: https://codesandbox.io/s/segment-background-image-msu63
^ I achieved this by hardcoding the position of the image but I am looking for a CSS oriented approach because that'll be much more dynamic.
EDIT: so I was able to figure it out. The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.
The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.
You can adjust the background-position top top center:
background: url("./360.v1.png") top center no-repeat rgba(85, 112, 24, 0.76);
I've created an example here : http://jsfiddle.net/Ninjanoel/9GEGU/
Basically, I'd like to affix something to the right, in this case, the red box, I want it to appear to just pin itself to the top as it should once the correct amount of page scroll has occurred, but everytime it 'affixes', it jumps to the left, overlapping the content I already have on the left.
It's great that bootstrap has such a volume of documentation, but unfortunately I think I'm missing something regarding this. Please help.
var offsetFn = function() {
return $('#sidebar').position().top;
}
$(document).ready(function(e) {
$('#sidebar').affix({
offset: {top: offsetFn}
});
});
is a code snippet I found on Stack overflow to not have to guess the top offset value, but even if I give it a simple value, when the div becomes affixed it jumps left.
Note about the fiddle : it doesn't appear to be working very well, at least the version on my hdd jumps left, but it is the code i'm using basically, and the small window size may complicate things, green and red boxes are suppose to be vertical columns
Create inner div for sidebar. Affix is setting position: fixed to column therefore making it not working.
Edit: see http://jsfiddle.net/9GEGU/2/ and your function is needless, only causing weird behaviour in FF, so remove {offset: {top: offsetFn}}. It will look the same but scrolling will be smoother.
Also set width of span5 (290px) to the #sidebar because when element has position: fixed it is removed from document flow and isn't limited by parent's width.
I'm animating the width of a li element using jQuery in a simple snippet of code. I'm using hover() as the handler and .animate() to animate the width. Here is my code.
$('li').each(function() {
//store the original width of the element in a variable
var oldWidth = $(this).width();
$(this).hover(
function() {
//when the mouse enters the element, animate width to 900px
$(this).animate({width: '900px'}, 600, 'linear')
},
function() {
//when the mouse leaves, animate back to the original width
$(this).animate({width: oldWidth}, 350, 'linear')
}
);
});
The code is really really simple and works but with one very odd quirk in Chrome. When animating the elements in and out, the li elements "shake" as if they're really cold and were shivering. You can see the behavior here in a live example: http://missmd.org/ (edit: bug is now fixed)
I've animated a bunch of stuff before with jQuery and never seen this behavior. Is there any explanation for why it occurs and how I can get around it? I'm wondering if it's because I've floated the elements to the right and am animating to the left. The bug is maddening and detracts from the overall presentation a lot (at least to me). Anyone else seen this before?
Edit to clarify: it's not the actual li element that "shivers" it's the text within it that shakes slightly but noticeably from left to right very quickly as the animation runs. I'm stumped.
Edit two: after fiddling with the CSS a bit now I can only reproduce the effect in Chrome (21.0.1180.60 beta-m for me). In Firefox it works as intended. It also works great in IE. Very ironic that Chrome (usually great with this stuff) is giving me trouble now. Pulls hair out, checks sanity
Here is my HTML to help get to the bottom of this. We have reproduced the problem in ChrisFrancis' jsFiddle.
<nav>
<ul class="nav">
<li class="one">
<a href="homeandnews/">
<span class="title">Home and News</span>
<br/>
<span class="subtitle">Learn more about me and read general updates!</span>
</a>
</li>
</ul>
<nav>
I'm completely stumped. This could also be a bug in Chrome/V8 JS engine and there's nothing we can do about it.
I was looking to this issue as well and this: -webkit-backface-visibility: hidden; solve my problem. I add this odd shaking while using CSS3 transform on a SVG.
More info can be found here: CSS3 transform rotate causing 1px shift in Chrome
Hope it helps
I changed your css: ul.nav li a, adding float: right to it and that fix the shake.
Anyway if it helps, I had the same problem when animating height of a div within another div with height:auto. Changing the height to a fix width solved it.
Hope it helps.
This seems to be a bug in Chrome version 21.0.1180.60 and may also be present in other versions. Nothing wrong with the code here and I guess we just leave it up to workarounds or submitting a bug report now.
Sigh.
Had similar issue with shaking SVGs when there's a CSS transition applied to parent tag. I tried to apply everything I could randomly, and this fix finally helped:
svg {
transform: translate3d(0, 0, 0);
}
This problem occurred with some divs when I was trying to animate another div within it. What I noticed is that it happens if the div or element has css property display:inline-block. Making the element float would have solved the problem, but inline-block was required in my case.
I noticed that the element had also vertical-align:middle css property. Changing it to vertical-align:text-bottom solved the problem. No more shaking effect in Chrome v23 (may be the bug is still persisting in newer versions).
I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.
Ive done this a number of times with no problem but for some reason it is a problem on Here. The slide down will begin to work (1/3) normally and than all of a suddenly jerk and finish the animation. slideing up works fine. this is the case for slideDown(), slideToggle and .animate()
strangely if i also toggle opacity in the animate function it does not jerk but my text will briefly change color.
HTML:
<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
<p>
Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
</p></div>
CSS: i read else were that margins can cause the jerkiness but this isnt helping
h2{color:#76DEFC; margin:0px;}
.yamikowebsToggler{margin:0px;}
p{margin:0px; color;#000000;}
JQUERY:
$(document).ready(function(){
$(".yamikowebsToggler").fadeOut(0);
$("h2").click(function()
{
$(this).next(".yamikowebsToggler").stop(true, true).animate(
{ height: 'toggle' },
{
duration: 1000,
});
})
});
I found the solution. it had nothing to do with my code but a bug in jquery. jquery has trouble getting the height if it is inherited because when it is getting the height the element is hidden. when elements are hidden they are treated with css properties of
position: absolute;
visibility: hidden;
to fix this you need to specify the height in either the animation which is not doable in my case since i have many that are toggled. the alternative is to set the height to the elements. i personally added a note in my jQuery about it and did it all in line simply adding
style="height: <height in px>;"
to the elements being toggled.
I had a similar issue when animating a division from 100% down to 0% width.
What was happening was that at the start of the animation the division got wider to like 110% for some reason.
Anyway I found the solution was to add max-width: 100%; in the CSS styles on the specific division.
Just thought I'd post that here as I came here looking for a fix to this issue. :)
Have you tried increasing your {duration: ...}? Also, you could just use the built-in jQuery function .slideToggle().
I know this is marked as answer, but would like to provide an update on this issue.
The corresponding issue ticket is here:
http://bugs.jquery.com/ticket/4541
However it's been closed by core devs, and seems like it won't be fixed unless there's a patch that has no performance flaws.
In the mean time, if you still wish to use jQuery to do this, you can either set the height or the width of the element you're trying to slideUp or slideDown. It doesn't have to be in "pixel" unit, it can be in percentage as well.