Best approach for "Fade in/fadeout" menu bar on mouse over - javascript

First off, my apologies for a lengthy post. I am trying to use CSS, HTML and JavaScript, so please don't recommend using std. libraries.
1)I have found people using different approaches in CSS,HTML and JavaScript to achieve the "fade in/ fade out effect" on navigation bars, some of the approaches using CSS and JavaScript are:
a) Use property "left" to get the submenu outside the screen. Default left :-500px ;onmouseover- left:-10px
b) Use property "visibility". Default visibility: "hidden" and onmouseover-
visibility: visbile
c)use property "display". Default display:none and onmouseover- display:block
My question is which one is the best approach and why?
2)I have used the method a) in this jsfiddle: http://jsfiddle.net/A7TND/.
CSS
.teal-box{
left:-10px;
}
HTML
<div class="level1" onmouseover="showSubs("+")">
Javascript
switch (vwFlg){
case "+" :
elmt.style.left = "-10px";
...
}
In the example, I am not sure whether the function gets called over and over when I am moving between the main item(favorite) and subitems(jsfiddle, google), my questions are:
a) does it get called over and over during the mouse movement between main items(favorites) and sub-items(google and jsfiddle)?
b) how does that(calling javascript function over and over) affect the responsiveness of the page?
3.The approach I did for having multiple images(see the jsfiddle link) separated by , is have multiple divs - where top has different values, is that the best approach? This would mean , I would have to write a div for each image, is there a some spiffy way of using "position" properties absolute and relative to achieve that without creating as many divs as images?
I want to have a table ,how do I get that "button popping out of the page" look ? I tried to debug a commercial web app, it seems they seem to repeat a background image, which I tried, but that did not work.
CSS
.sel-row {
border-style:solid;
border-width:1px;
background-image:url("\lb_sel.gif");
background-repeat:repeat-x-y;
background-color:#CDD2D7 ;
border-color:#8B96A2 ;
height:20px;
}

My approach for something like this, is to have the hidden element be a child of the hover element, then use absolute positioning + display for the hide/show
<li>
Button Copy
<span>HIDE SHOW ME</span>
</li>
li {
position:relative;
}
li:hover span {
display:block;
}
li span {
position:absolute;
top:25px;
left:0;
display:none;
}
Are you animating the opacity as well?
Use javascript to add a class to the element, CSS3 to animate but understand the browsers that don't use CSS3. Also, don't use display anymore.
<li>
Button Copy
<span>HIDE SHOW ME</span>
</li>
li {
position:relative;
}
li.show span {
opacity:0;
}
li span {
position:absolute;
top:25px;
left:0;
opacity:1;
-webkit-transition: all .8s ease-in;
-moz-transition: all .8s ease-in;
-o-transition: all .8s ease-in;
-ms-transition: all .8s ease-in;
transition: all .8s ease-in;
}
With a browser that doesn't support css3, I use Modernizr + jQuery for the fallback. You'd have to turn this into a toggle.
if (!Modernizr.csstransitions) { // if browser doesn't support css3.transitions
$('li span').animate({ "opacity": '1' }, 800);
} else { // if browser does support css3.transitions
$('li').addClass('show');
}

Related

CSS: Adding a Delay to Submenu Dropdown on Hover (Bootstrap 3 / MegaNavbar 2.2)

Now i am officially desperated. I bought a Script to use a MegaMenu on my Site.
The Script is MegaNavBar 2.2
http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282
I wanted the script to open the submenus on hover, so i configured it as described on the Demo-Page (see above).
This worked fine. But i wanted to add a delay, because its irritating users, if they move the mouse pointer from top to bottom, and everytime the menu is open immediately while hovering.
What i tried:
Asking the support - No Answer
Trying to add an animation and animation-delay
The Animation is working, but the delay is not working, i assume because of the "display:block"
Trying to add an transition
The Transition is not working, because Transition is not working with "display:block".
Is there anybody out there, who can help me with this stuff?
Here is my Bootply:
https://www.bootply.com/A50M0Wk9NK
(The assumed css rule is in line 29 of pasted css-code)
Best Regards,
Michael
You can try to use Visibility instead of Display, and thus use transitions.
e.g.:
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
transition-delay:2s; //set delay here
}

Ionic - disable view transition animation but only for single view

How can I disable transition animation for a certain view completely?
I do not want to:
disable for the whole app with configuration
use navTransition directive which simply hacks the next transition and works only on element when clicked: https://github.com/driftyco/ionic/blob/e2727d2e8f0815c3418e1fc29c92e2180e513408/js/angular/directive/navTransition.js
Ideally I am looking for an attribute to set on ion-view or ion-nav-view
ui-view supports noanimation="...", but it doesn't work in ionic
The only thing I could find was:
HTML
<ion-nav-view>
<link ng-href="css/styleSlide.css" rel="stylesheet" />
styleSlide.css
/* untested */
[nav-view-transition="ios"] [nav-view="entering"],
[nav-view-transition="ios"] [nav-view="leaving"] {
-webkit-transition-duration: 0ms;
transition-duration: 0ms;
}
Answer from malix is a step in good direction, however there is no need for such conditional css. What I ended up using is an id on the ion-view element and I used:
#header-sub-content ion-view[nav-view="entering"] {
transition-duration: 0ms;
}
#header-sub-content ion-view[nav-view="leaving"] {
transition-duration: 0ms;
}
However, this leaves a slightly strange flicker effect which I didn't bother to solve because what I acually needed is to hide the animation which is leaving and only show the one which "enters":
#header-sub-content ion-view[nav-view="entering"] {
display: block;
}
#header-sub-content ion-view[nav-view="leaving"] {
display: none;
}

hide/unhide HTML portions by hovering?

more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere.
as an example, go to http://www.tsunamitsolutions.com/
my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.
In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?
It can be done in the CSS.
Assuming the dots/arrows are child elements of banner container, you can do something like:
.bannerContainerClass .dotClass {
display: none;
}
.bannerContainerClass:hover .dotClass {
display: block;
}
You can also do it in jQuery if you need effects like fade:
$(".bannerContainerClass").hover(function() {
$(this).children(".dotClass").fadeIn(500);
}, function() {
$(this).children(".dotClass").fadeOut(500);
});
The jQuery method can be modified to work even if the dots aren't children of banner container.
You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points.
Suppose.
<div id="header_image">
..code for header image..
</div>
which is header tag. and there is a tag which cointains the points.
<div id="points_container">
..code for points...
</div>
Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.
$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});
You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:
.dots:hover
{
opacity:0;
}
Makes anything with the dots class invisible on mouse over.
Or if you don't want it to take up any space when invisible:
.dots:hover
{
display:none;
}
Try this with simple CSS transitions, like this
HTML
<div id="parent"><br/><span class="bullets">* * * *</span></div>
CSS
.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
FIDDLE HERE>>

I want to turn this flash element on my page into javascript/jquery...?

http://floorsofstone.com/sample-request/
^ The table with stone samples on is the element in question.
How would I even go about describing this so I can find a javascript/jquery alternative to make it easily editable.
If anybody has anything similar please pass on the link...
Thanks very much.
I could tell you it is possible to do something like that, I don't think you would find an out-of-the-box plugin to handle everything for you.
You would have to have a grid of divs with all your tiles.
Hook each of the div's (per tile) to a mouseover, mouseout and click events.
On click hide/remove the element from the main grid
Show it in the selection.
I would think it would be better to do the whole thing without any animations first.
Then you can add animated effects to make it all look better. Look at JQuery's animate and JQueryUI animation for the little mouse over effects.
Update:
Once you are done creating your client behavior (selection..et) and animations. You can then hook the whole thing up to your server with jquery.ajax()
I checked out how that page works. On submit, it loads up a form for some details and posts the data off to this url : http://floorsofstone.com/sample-request/post-data.aspx
The popup dialog also contains hidden fields with the selected TileID's, something like this:
<input id="TileIDs" type="hidden" value="4005,4004,4003,4002," name="TileIDs">
<input id="Tile1" type="hidden" value="Adobe Quarry Tile" name="Tile1">
<input.....
So your jquery on submit would be something like:
$.ajax({
type: "POST",
url: "/sample-request/post-data.aspx",
data:"TileIDs=" + $("#TileIDs").val() + "&ClientName=" + $("#ClientName").val()
//the "TileIDs"= is the name your server expects and
//#TileID is the id of the html field that contains the value
}).done(function( msg )
{
alert( "Data Saved: " + msg );
});
Personally, I wouldn't use javascript or jquery for this.
I would go with CSS3 transitions. When you hover over a div, the tile-image should shrink, with css3 transitions, we can do that in an animated fashion.
HTML
<div class="tile">
<span>sometext</span>
<img src="tile-1.jpg">
</div>
CSS
.tile {
width: 100px;
height: 100px;
}
.tile img {
width: 100px;
height: 100px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.tile:hover img {
width: 80px;
height: 80px;
}
NOTE: I haven't tested this, but I think it should be fine.
NOTE 2: this doesn't work in IE 9 and lower. In this example, I personally wouldn't mind that IE doesn't have the nice transition. If you really must, test for css3 transitions with Modernizr, and provide a jquery fallback.

jQuery Mouseenter and mouseleave actions

I am using the following jQuery script:
$("#divid").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
$("#hldiv").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
As you can see, when the mouse hovers over a hyperlink called #hldiv, the #divid should be shown. The main goal is to keep the DIV shown if the mouse is over the DIV - but the #divid should not be visible initially.
If the mouse moves over the hyperlink, the DIV should appear, and when the mouse then moves over the DIV, it should stay until the mouse leaves.
The problem is that with my current code, when the user moves over the hyperlink and then out - the DIV appears/disappears correctly, but when the user moves out of the hyperlink and over the DIV itself, the DIV also disappears.
How should I fix this?
Why don't you add a container and do:
<div id='container'>
<a ID="hlDiv">hlink</a>
<div ID="divId">Test Test Test</div>
</div>
$(document).ready(function() {
$("#hlDiv").hover(function() {
$('#divId').show(1000);
})
$('#container').mouseleave(function(){
$('#divId').hide(1000);
});
});
fiddle here: http://jsfiddle.net/w68YX/8/
If I understood right, rewriting
$("#divid").mouseenter(function() {
$('#divid').stop(true);
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
Might help, since it stops the current animation (fading out) and fades it back in (if it has already turned a bit transparent).
However this depends on your HTML, and might not work in your case, so please post the structure also.
I am very late to this party - but there is a far better way to do this, so I want to add it for the sake of future browsers. You don't need jQuery for this effect at all.
First, wrap the two items in a container (here I'm using a div with class container), and apply a class to the item you want to appear/disappear on hove (here I'm using the show-on-hover class on the #divId element)
<div class="container">
<a id="hlDiv" href="...">link text</a>
<div class="show-on-hover" id="divId">popup stuff</div>
</div>
Next, set up your CSS as follows:
.container > .show-on-hover { display: none; }
.container:hover > .show-on-hover { display: block; }
#divId { /* whatever styles you want */ }
The effect is that the hover is now controlled entirely by CSS - but, it doesn't have the 1s transition you originally had. This is a little more complicated (and currently doesn't work in IE - but will be supported as of IE10).
Simply change the CSS as follows:
.container { position: relative; }
.container > .show-on-hover { opacity: 0.0; position: absolute; }
.container:hover > .show-on-hover { opacity: 1.0; }
.show-on-hover {
-webkit-transition: opacity 1s; /* Chrome / Safari */
-moz-transition: opacity 1s; /* Firefox */
-o-transition: opacity 1s; /* Opera */
}
The relative positioning on the .container means that the container sets its own bounding boxes for its child elements and their positioning. This means that when you then set the > .show-on-hover styling to position: absolute;, it will still be constrained to its parent (if you set left: 0; as an example, it will move to the left edge of the .container, rather than the screen).
The opacity toggle now simply makes the absolutely positioned item show/disappear wherever you've placed it (and you would update the CSS to put it exactly where you want, relative to the hyperlink). Because we're no longer using display: none - the DIV will always take up space on the screen - even when hidden (which is probably not what you want).
Finally - the last block, which sets transitions, tells modern browsers that whenever the opacity changes on elements of class .show-on-hover, make that change happen as a tween over 1s of duration.
Here is a jsFiddle showing the transitions: http://jsfiddle.net/TroyAlford/nHrXK/2
And here is a jsFiddle showing just the toggle: http://jsfiddle.net/TroyAlford/nHrXK/3/

Categories

Resources