hide/unhide HTML portions by hovering? - javascript

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>>

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
}

How do I change the color of my background smoothly?

Here is the code in question - https://codepen.io/illpill/pen/VbeVEq
function newColor() {
var randomNumber = Math.floor(Math.random() * (colors.length));
document.body.style.backgroundColor = colors[randomNumber];
}
Right now that is the newColor() function...
When the button clicks, I'd like it to smoothly transition into the next quote as opposed to abruptly loading it. I'd also like for the quote to fade into white and then into a new quote... How is this achieved? Is it better to use jQuery?
Thanks!
Add transition to your body for background-color property.
body {
transition : background-color 1s ease-in-out;
}
To add transition to any element you should write,
element-selector {
transition: [CSS property] [duration] [timing-function];
}
For heading tags it will be
h3,h4 {
transition: [css property] [duration] [timing-function]
}
Transition only works when there is a change in the CSS property specified for the given element.
You can use CSS to fade the background (like others have shown here), but you'll have to use JavaScript to fade the text in and out.
Here's a working version with the quote and author fading between random states:
$('#quote').fadeOut(400,function(){
$(this).html(quotes[randomNumber][0]).fadeIn();
});
$('#author').fadeOut(400,function(){
$(this).html(quotes[randomNumber][1]).fadeIn();
});
Keep your code as is and add a css property:
.your-element-selector {
transition: all ease 500ms;
}
Or with JS:
document.body.style.transition = 'all ease 500ms';

How can I animate an element programmaticaly using JavaScript?

I am looking at this code http://codepen.io/optyler/pen/FgDyr and if you hover to the triangle element, you will see the animation. However instead of hovering it, I want to do it programmaticaly using JavaScript. This is what I have done so far:
document.querySelector('.triangle').classList.add('animateSpeak');
and added a new css class
.animateSpeak {
animation: vibrate .5s infinite ease-out;
}
The animation is working though as you can see here http://imgur.com/a/V9JyO the left part is only animating. Am I doing something wrong here?
Since you're using a CSS 3 animation, you would probably need some sort of active class.
Just change the :hover selectors (line 54) to, say, .active instead. i.e.:
.triangle.active,
.triangle.active:before,
.triangle.active:after {
animation: vibrate .5s infinite ease-out;
}
You can start the animation programmatically by adding the .active class or stop it be removing the class.
To answer your second question, it looks like the :before and :after elements need the animation too.
In your CSS add
.animateSpeak,
.animateSpeak:before,
.animateSpeak:after {
animation: vibrate .5s infinite ease-out;
}
Just a quick thought, you can avoid the intersection of the three becoming darker than their constituents by changing the color from rgba to rgb or a solid color,
$font_color: rgb(231,236,241);

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

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');
}

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.

Categories

Resources