Here is my HTML code:
<div class="mitcsinaltunk" style="position:absolute;left:5px;top:3px;text-align: left">
<div class="triangle"><img src="images/triangle.png"></div>
<img id="kep1" src="mitcsinaltunk/img1_s.jpg" class="mitcsinaltunk">
</div>
on #kep1.hover() starts an animation and fadeIn triangle.png. triangle.png is on #kep1. When I take the mouse on triangle.png, stops #kep1.hover() animation.
Can I make triangle visible, but disabled?
Try binding your .hover() event to the .mitcsinaltunk container instead. Your question is a little hard to understand (please post your JS), but my guess is that when the mouse hovers over triangle.png, mouse focus on the original image is lost, stopping the fade in animation. Binding to the containing element will solve this.
Related
I am trying to make the "cloth" text and icon to change its opacity as soon as the mouse is entering parent's div area. At the same time I want to cancel the effect once the mouse is over the "opt" button, and change its color to blue
This what I was able to achieve, but if I hover over the "opt" button, the text and icon above still have the opacity effect:
.options-btns:hover {
background-color: #72b7f8;
}
#Cloth-Tool:hover #Cloth-Tool-img,
#Cloth-Tool:hover #Cloth-Tool-Text {
opacity: 0.6;
}
#cloth-option-btn:hover #Cloth-Tool-img,
#cloth-option-btn:hover #Cloth-Tool-Text {
opacity: 1;
}
<div onclick="runCloth()" id="Cloth-Tool" class="tools">
<img class="toolIcons" id="Cloth-Tool-img" src="./images/cloth.svg">
<p class="tools-text" id="Cloth-Tool-Text">Cloth</p>
<button class="options-btns" id="cloth-option-btn">OPT</button>
</div>
I also what to be able to detect where user clicks: parent div(including cloth text and icon area) or on "opt" to be able run functions such as "runCloth()" or "openOptions()" later on JS side
You can use an alternate method to achieve the same output. By using JavaScript and adding an event listener on the option button in which you will add hover as the event listener apply your required properties within JavaScript they will overwrite your properties of CSS. I you still can not get me idea let me know I will write a code for it.
Hi I tried to have a marquee gif on my website. And the gif only happens when u don't move your mouse for 4 secs. But I can't seem to figure out why this only happens when you land on the page, but when you start scrolling the marquee gif doesnt happen.
Check it out on my website here. Any help is deeply appreciated.Thank you
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=29 height=582 style='position:absolute; left:48%; top:57px; width:32; height:582px;'> <img src=http://transit7.cargocollective.com/1/8/265975/3801686/icecream.gif border=0> </marquee>
In your JavaScriptyou have:
$('html').mousemove(100, function() {
$('#hi').fadeOut(400);
});
This is the cause - it basically means "If you move the mouse over the <html> element (which is anywhere on the whole page) then fadeout the specified stuff (in the #hi div)". And mousemove includes moving the mouse to scroll.
I'm trying to develop an overwolf app and am having issues receiving mouseLeave events.
Overwolf App:
<div id="menu" onMouseDown="dragMove();">
<div id="close" onclick="closeWindow();"></div>
</div>
<iframe src="URL_to_Webpage"></iframe>
<div id="scale" onmousedown="dragResize('BottomLeft');"></div>
<div id="sliderBg">
<div id="slider"></div>
</div>
The menu, close, scale and slider elements are overlayed ("position: absolute; left:...") over the iframe and work as window control elements (scaling, closing,...)
Webpage (iframe content):
$('html').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
I always get the hover class applied to my iframe as expected. CSS :hover selectors get applied as well.
The mouseLeave event though is only triggered, when leaving the iframe without "touching" the overlayed window control elements.
So if I touch those elements on my way out with my mouse, the "hover" class isn't removed (event simply not triggered) and all things applied with a css ":hover" selector aren't removed either.
Any help would be appreciated
Try add 'id' name on the iframe and imstead of directly using html.
I would like to see how it works to fully picture what you want to do.
Could you please paste your code at http://jsbin.com and let me know the link?
here's the project I'm developing.
Test Project Link
Go to Products.
Click/Toggle Flush Mounts and Press Books
Observe the image below fades-in and out. As you can see, the first image fades out nicely but the second one pops-up instantly. How to make them both fade smooth and nicely?
HTML:
<div class="text-center font-zero">
<a class="category" ng-class="{active: flushMount}" ng-click="flushMount = true" ng-init="flushMount = true">
Flush Mounts
</a>
<a class="category" ng-class="{active: !flushMount}" ng-click="flushMount = false">
Press Books
</a>
</div>
<div class="container">
<div class="book-markers text-center">
<div class="book-item" ng-show="flushMount">
...
</div>
<div class="book-item" ng-hide="flushMount">
...
</div>
</div>
</div>
SCSS
.book-item{
#include transition(all 0.5s ease);
opacity: 1;
&.ng-hide-add,
&.ng-hide-remove{
display: inline-block !important;
}
&.ng-hide{
opacity: 0;
}
}
It's better to use the Angular most important feature, use ng-view and split the two views into two partials....when "Flush Mounts" is clicked the flush mounts div fade in smoothly and when you click "Press Books" the press books div fade in smoothly too.
ng-view example : http://jsfiddle.net/carpasse/mcVfK/3/
<ng-view>
</ng-view>
Part of the problem is that you always see "Flush Mounts" (on the top), either fading in or fading out. Fading out takes twice as long. I think that has to do with Angular's animation process and the fact that animations run in one cycle.
You have defined transition on your base class and display: inline-block; for ng-hide-add / remove. The animation process first adds the add and remove classes. In your case this already adds a transition display: none -> inline-block. Then ng-hide is added, which adds another transition opacity: 1 -> 0. Fading in on the other hand only has one transition.
I'm not entirely sure whose fault it is. I'd suggest that at first you position the divs above each other in terms of z-index instead of y coordinate. You should do that anyway. Then you can put the transition on the hide class (or .book-item.ng-hide), not directly on book-item.
I have an Element object that I'm currently calling .hide() on. Instead, I'd like to fade out the opacity of the entire Element (and its children) to 100% (hidden) as a transition effect over maybe 500 ms or 1000 ms.
Can Fx.Tween be used for this? Is this possible--does the MooTools framework have an effect like this in its UI library?
$('myElement').fade(0.7);
sets the element opacity to 70%. Or
$('myElement').fade('out'); // fades the element out.
http://mootools.net/docs/core/Fx/Fx.Tween#Element:fade
Element Method: fade Element shortcut
method for tween with opacity. Useful
for fading an Element in and out or to
a certain opacity level.
In MooTools 1.3 you can set the 'tween' options, such as duration or transition, like this:
$('tweener').set('tween', {duration: 2000}).fade('out');
See also jsfiddle example http://jsfiddle.net/tofu/VU7Es/
and the docs http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween
Use
$('myElement').fade('toggle')`;
it will automatically fade in and fade out the object depending upon its state.
Example : HTML
<div style='background-color:black;color:white' id="tweener">
HELLO WORLD
</div>
<button onclick="javascript:doTween()">TWEEN</button>
<script type='text/javascript'>
function doTween()
{
$('tweener').fade('toggle'); // out, in are other options available.
}
</script>
MooTools has a fade() method in it's FX.Tween package, as seen here.