i am having some trouble configuring my javascript with my css so that when an image is clicked a little caption bar will appear with icons in it. Currently when i hover over the image the caption bar appears but i want to change this so that it will be usable for users on tablets where they have to touch and don't have the hover feature.
View page
<figure>
<img width="158" height="158" alt="Gravatar"
data-bind="attr:{src: GravatarUrl}" />
<figcaption>
<a title="Email" id="emailIcon" class="icon-envelope icon-white"
data-bind="attr:{'href':'mailto:' + Email()}"></a>
<a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
</figcaption>
</figure>
CSS
figure, figcaption {
display: block;
}
figure {
position:relative;
float:left;
margin:20px;
width:158px;
height:158px;
border:1px solid #333;
overflow:hidden;
background: #fff;
padding: 1px;
}
figure figcaption {
position:absolute;
bottom:0;
left:0;
opacity: .75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
}
figure.open figcaption {
margin-bottom:0px;
}
figcaption {
width:160px;
height:25px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
Javascript Not sure if there is a way to do it with just css or not.
<script type="text/javascript">
(function ($) {
$.views.Roster.GetRoster('#url');
$('figure').on('click', function (event) {
$(event.currentTarget).toggleClass('open');
});
})(jQuery);
</script>
It's a great idea to just toggle a class and leave the visible elements to CSS.
$('figure').on('click', function (e) {
$(this).toggleClass('open');
});
In that case, style your figcaption the way you want it to look and then add:
figcaption { display: none; }
.open figcaption { display: block; }
This way, when the figcaption is hidden by default but when you click the target and the javascript adds the class "open" the figcaption will be visible. You certainly don't have to have it display block, it could be most anything other than "none."
If this code
figure:hover figcaption {
margin-bottom: 0px;
}
is showing the figcaption and you are putting open class to the figure when you want to show it, you can use:
figure:hover figcaption, figure.open figcaption {
margin-bottom: 0px;
}
Related
Hover is kind of funny as in this code a new layer .hide which get appear when hover as it transition it response differently I try diffent thing like hide:hover +img{} and other if anybody know about it please help is there is any hack in this issue.
Thing is there is two layer first layer should fade Opacity and another layer transition with animation that is only word. Which is .hide Class that but if then i hover on .hide class which transition when hover cause issue.,
Right Now i using with z index different But then Text hide behind the back of image.
.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}
.catalog img:hover{
transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog img:hover + .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}
<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>
This issue happens because you add the styles on img:hover, simply, by default, these events are triggered for the selector itself or one of its children, in this case, the image and the div.hide are siblings, to avoid this behavior you can update your code to add these styles on catalog:hover, which is a parent of both, so whenever you hover on of them, you will be hovering the parent too
.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}
.catalog:hover img{
transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog:hover .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}
<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>
I'm making a static website, I fixed the navigation menu on the top
as a fixed header section.
The problem is arising that whatever content I add next to it is overlapping on the top of the menu.
Adding a relative position to the content acts in the same way.
Setting position as absolute is obviously the only thing that works but then I will have to add a whole lot of margins and that will make the site too unstable.
This is my CSS for the menu and i don't have really anything in the main CSS due this problem.
nav {
position: fixed;
top: 0;
background:none;
z-index:10000;
width:100%;
font-size:34px;
transition: all 0.5s;
}
nav.navScroll {
background: #013D5F;
font-size:20px;
transition: all 0.5s;
color: #fff;
}
img.logo {
float:left;
display:none;
transition: all 0.5s;
}
img.logoScroll {
display:inline;
width:50px;
padding:5px;
transition:all 0.5s;
}
div.menu {
text-align:center;
}
div.menuScroll {
float:right;
}
ul {
padding-left:0;
margin-left:0;
}
li.nav {
display:inline;
text-decoration:none;
padding-left:15px;
}
li.nav a {
list-style-type: none;
text-decoration:none;
color: white;
font-weight:400;
}
li.nav a:hover {
color: #FFD634;
transition: 1.2s;
}
.navScroll li.nav a {
color:#fff;
}
.navScroll li.nav a.selected {
color: #FFD634;
}
Jaromanda X correctly indicates that fixed position elements are taken out of flow. You must add a margin to the page body, or main container, equal to the height of your nav element. Your 'z-index:10000;' will prevent any scrolling elements from covering up your nav, provided nothing is given a higher z-index ;)
Hi guys i have this code : LINK here
image in this have a link should open it when click .
but when you hover the image the url doesn't working ! (why ?)
sorry for my bad english!
<div class="entry">
<a href="http://google.com">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
</a>
</div>
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.entry:hover:after {
opacity:1;
}
You can do this by adding pointer-events: none to the overlay (or .entry:after in your case). No javascript needed for that. Example:
div.entry:hover {
content:'Click on image for more information';
/* ... other css rules */
pointer-events: none;
}
Now your click will not be 'captured' but it 'bubbles up' to the underlying div.
But, as usual, IE is a troublemaker... This only works for IE11. For other IE versions you'd need javascript anyway...
Your overlay is appearing ABOVE the link, so no click is detected (you're clicking the overlay, not the link). You can change the overlay to be a part of the link instead. See: http://jsfiddle.net/U3QYY/3/
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
a:before {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a:hover:before {
opacity:1;
}
Most probably this part in your CSS is creating the problem.
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Notice when you hover the mouse over the image the div.entry:after properties are hiding the linked image behind hence disallowing you to open it.
So now I think you had got the problem and you can solve it yourself in your way.
Please forgive me if my question is too simple. I am VERY new at this!
I'm trying to create a button for downloading a file on my site.
I want the button to change when a user hovers over it and then when they click it I want it to change to a 3rd image and start downloading the file.
Here's what I have so far (I have the 2 images fading on hover with this)...
<div id="cf">
<img class="download" src="/Images/downloading.png" alt="download3" />
<img class="bottom" src="/Images/PDownloadAllFiles2.png" alt="download2" />
<img class="top" src="http:///Images/PDownloadAllFiles1.png" alt="download1" />
</div>
<head>
<style type="text/css">
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
#cf img.download:transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}
<script type="text/javascript">
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.download").toggleClass("transparent");
});
});
</script>
</head>
This code only fades image 1 into image 2 when hovering over it.
what do I need to add in order for this button to change on click to the 3rd image and start downloading the file?
just add the javascript code to change the source of the image to the third image
function onButtonClick(){
document.getElementById('yourElementId').src = 'third.png';
}
#George Watson I have no idea why you have given .zip file as the source of your tag..anyways lets move
Below I have the code which will work for the background colors. Just see the output of the code and if this is the pattern which you desired then you just have to provide an image in the background of the three div's and you are done.
<html>
<head>
<title>sumitb.mdi</title>
<style>
#container{
display: block;
position: relative;
height:100px;
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
.customButton{
display: block;
position: absolute;
height: 100%;
width: 100%;
}
#myButton1{
background-color: red;
}
#myButton2{
background-color: blue;
opacity:0;
-webkit-transition:opacity 1s linear;
}
#myButton2:hover{
opacity: 1;
}
#myButton3{
visibility: hidden;
background-color: silver;
}
</style>
<script>
function onContainerClick(){
document.getElementById('myButton3').style.visibility='visible';
}
</script>
</head>
<body>
<div id='container' onclick='onContainerClick();'>
<div id='myButton1' class='customButton'></div>
<div id='myButton2' class='customButton'></div>
<div id='myButton3' class='customButton'></div>
</div>
</body>
</html>
To provide the background image in the div do this:
#myButton1{
....
background-image:url('one.png');
...
}
Similarly do for the other two divs
That was all about the client side; after that you have to code the server side for file downloading stuff.
I'm building a drop down menu for a project I'm working on, but I don't get it working entirely as is should. I want it to show the sub-menus when I hover the root-level menus, and then close again after a short delay when the menu or sub-menu is not hovered anymore. Most of it works; the sub-menus are showed when root-level items are hovered and it is hidden when I stop hovering the root-level item. The problem is that the sub-menus are also hidden when I move my cursor from the root-level item to a sub-menu item other than the first and hover that. This is obviously not good, so help would be appreciated.
I created a JSFiddle with the code which shows the issue more clearly.
So, here's my code:
menu.htm
<div id=m_wrapper>
<ul id=menu>
<li onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">Item 1
<div id=s0 onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">
<a href=#>Item 1.1</a>
<a href=#>Item 1.2</a>
<a href=#>Item 1.3</a>
</div>
</li>
</ul>
</div>
menu.css
#m_wrapper {
position:relative;
display:table;
}
#menu {
position:relative;
}
#menu li {
width:100px;
position:relative;
float:left;
list-style-type:none;
}
#menu div {
position:absolute;
visibility:hidden;
display:inherit;
width:100%;
z-index:30
}
#menu div a {
position:relative;
display:block;
z-index:35;
}
menu.js
var countdown = 300;
var timer = null;
var menu_item = null;
window.show_sub_menu = function(cath) {
if (menu_item) {
menu_item.style.visibility = 'hidden'; //Make sure to show one menu at a time
}
menu_item = window.document.getElementById("s" + cath);
menu_item.style.visibility = 'visible'; //Show menu
if (timer) {
window.clearTimeout(timer); //Reset timer, so menu is kept open
timer = null;
}
};
window.start_timer = function() {
timer = window.setTimeout(close_sub_menu, countdown);
};
window.close_sub_menu = function() {
menu_item.style.visibility = 'hidden';
};
you don't have to make it that complex.
ofcourse you can do same through javascript, but see how easy, readable and simple it is through jQuery.
See this DEMO
Just use following script
$('#menu li').hover(
function(){
$(this).stop().animate({height: '100px'},1000,function(){});
$(this).find('div').show(600);
}//gets called upon mousehover
,
function(){
$(this).stop().animate({height: '20px'},1000,function(){});
} //gets called upon mouseout
); //hover ends
and also, I don't know why you have written tonns of CSS. Just use these:
#menu
{
list-style:none;
}
#menu li
{
width:100px;
border:1px Solid #CCC;
text-align:Center;
cursor:pointer;
height:20px;
overflow:hidden;
}
#menu li div
{
border:1px Solid #CCC;
}
#s0
{
height:auto;
}
#s0 a
{
display:block;
}
There's plenty you can do through it, like selected dropdown item. selection through arrow key and what not. jQuery makes it simple for you.
first of all You should avoid <div> in <li> tags, because is not semantic.
Quite good is multi level menu build only with html and css styles.
HTML
<div id=m_wrapper>
<ul id=menu>
<li>Item 1
<ul>
<li><a href=#>Item 1.1</a></li>
<li><a href=#>Item 1.2</a></li>
<li><a href=#>Item 1.3</a></li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
CSS STYLES
#m_wrapper, #menu, #menu li {
position:relative;
}
#m_wrapper {
display:table;
}
#menu li {
float:left;
width:100px;
list-style-type:none;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
margin: 0 10px;
padding: 0;
}
This can quite easily be achieved with HTML and CSS alone. Using CSS transitions we can make the menu fade when we hover off.
Example
I have also put this on JsFiddle
HTML
<nav>
<ul id="menu">
<li>
Home
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS
#menu li
{
position: relative;
display: inline;
list-style: none;
padding-left: 15px;
}
#menu ul
{
margin: 0;
padding: 0;
list-style: none;
opacity: 0;
position: absolute;
top: 20px;
left: 5px;
// Transitions for our fade effect.
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
#menu ul li
{
display: block;
}
#menu li:hover > ul
{
opacity: 1;
// This stops the transition from happening on hover.
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
A pure CSS drop down menu
http://jsfiddle.net/steelywing/GANeX/8/
.nav {
background-color: #def;
height: 20px;
}
.nav * {
transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
}
li {
display: inline-block;
height: 20px;
}
.dropdown li {
display: block;
}
.dropdown ul {
visibility: hidden;
opacity: 0;
margin-top: -2px;
}
.dropdown:hover ul {
visibility: visible;
opacity: 1;
}
Remember that.. if You decide to implement the fade version, You should use crosbrowser opacity, like this:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;