PDA

View Full Version : How to change my hover effect with OnClick event



mikamakela
12-02-2013, 09:03 AM
Hi folks,

i’m (still) coding my first responsive site with skeleton framework (http://testi3.aada.fi/aada_web/index.html).

Now site uses HOVER on my content pages to show info behind image. I want change this into ONCLICK event so that user must click image to see content behind it. How I do this?

Here’s css code that makes my hover work:


.view { display:inline-block; width: 100%; height: auto; margin-right: 0px; margin-bottom:20px; overflow: hidden; position: relative; text-align: center; box-shadow: 0px 3px 3px 0px #d3d3d3; cursor: default; background-color: #f0f0f0;

}

.view:last-child { margin-right: 0px; }

.view .mask, .view .content { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; right: 100%;

}

.view img { display: block; position: relative; }

.view h2 { font-family: ‘Arvo’, sans-serif; color: #fff; text-align: left; position: relative; font-size: 14px;

background: #c23b44;
margin: 20px 0 0 20px;
font-weight: bold;
line-height: 20px;

}

.view p { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px 20px; text-align: left; line-height: 18px; }

.view a.info { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; display: inline-block; text-decoration: none; padding: 7px 14px; background: #1eb8ff; color: #fff; box-shadow: 0 0 1px #1eb8ff; }

.view a.info:hover { box-shadow: 0 0 5px #1eb8ff; }

.view-portfolio img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio .mask { background-color: #00afff; -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio h2 { background: #00afff; color: #FFF; }

.view-portfolio p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”; filter: alpha(opacity=0); opacity: 0; color: #FFF; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }

.view-portfolio:hover .mask { right: 0; }

.view-portfolio:hover img { margin-left: 100%; }

.view-portfolio:hover p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; }

and here’s HTML code of sample DIV:


<div>
<div>
<img src="images/sparks_web.png" /> <div>
Sparks ergonomics <p>
Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.
</p>

<a href="http://www.sparkergonomics.com/fi/">Tutustu</a>
</div>

// Mika

Beverleyh
12-02-2013, 09:52 AM
You've posted in the JavaScript forum which suggests that you know you need JavaScript to handle the hide/show behaviour of an element onclick, so what have you found and tried from your research on Google?

There are dozens of JavaScript hide/show tutorials on the web if you look for them - just searching on something like "hide show onclick with JavaScript" or "hide show toggle JavaScript" will bring up plenty of options for you to test and learn from.

Once you've tried a few things out, please feel free to come back and ask for further advice if you need it.

Also, a note about the CSS and HTML you've posted - they do not appear bear any relation to each other (where are the classes?). If you would like specific help, please post exactly what you're using to avoid confusion

vwphillips
12-02-2013, 02:53 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.view img { display: block; position: relative; }

.view h2 { font-family: ‘Arvo’, sans-serif; color: #fff; text-align: left; position: relative; font-size: 14px;

background: #c23b44;
margin: 20px 0 0 20px;
font-weight: bold;
line-height: 20px;

}
.view-portfolio {
position:relative;left:100px;top:100px;width:160px;height:380px;cursor:pointer;
}

.view p { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px 20px; text-align: left; line-height: 18px; }

.view a.info { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; display: inline-block; text-decoration: none; padding: 7px 14px; background: #1eb8ff; color: #fff; box-shadow: 0 0 1px #1eb8ff; }

.view a.info:hover { box-shadow: 0 0 5px #1eb8ff; }

.view-portfolio img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio .mask { background-color: #00afff; -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio h2 { background: #00afff; color: #FFF; }

.view-portfolio p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”; filter: alpha(opacity=0); opacity: 0; color: #FFF; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }

.view-portfolio:hover .mask { right: 0; }

.view-portfolio:hover img { margin-left: 100%; }

.view-portfolio:hover p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; }
/*]]>*/
</style></head>

<body>
<div class="view view-portfolio horizontal">
<img src="http://testi3.aada.fi/aada_web/images/sparks_web.png" class="scale-with-grid">
<div class="mask">
<h2>Sparks ergonomics</h2>
<p>Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.</p>
<a href="http://www.sparkergonomics.com/fi/" target="_blank" class="info">Tutustu</a>
</div>
</div>
<div class="view view-portfolio vertical">
<img src="http://testi3.aada.fi/aada_web/images/sparks_web.png" class="scale-with-grid">
<div class="mask">
<h2>Sparks ergonomics</h2>
<p>Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.</p>
<a href="http://www.sparkergonomics.com/fi/" target="_blank" class="info">Tutustu</a>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Reveal Panel (02-December-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcRevealPanel={

init:function(o){
var clds=document.getElementsByTagName('DIV'),c,i,d,a=[],z0=0,z1=0;
for (;z0<clds.length;z0++){
c=clds[z0].className;
i=clds[z0].getElementsByTagName('IMG')[0];
d=clds[z0].getElementsByTagName('DIV')[0];
if (((' '+c+' ').match(' '+o.ClassName+' '))&&i&&d){
a.push({p:clds[z0],m:o.Slide,i:i,d:d,ms:o.Animate,t:o.EventType});
}
}
for (;z1<a.length;z1++){
this.ready(a[z1]);
}
},

ready:function(o){
var w=o.p.offsetWidth,h=o.p.offsetHeight,s=document.createElement('DIV'),m=typeof(o.m)=='string'?o.m.charAt(0).toUpperCase():'R',sz=(m=='U'||m=='D'?h:w)*(m=='L'||m= ='U'?1:-1),m=m=='U'||m=='D'?['top','left']:['left','top'];
s.style.position=o.d.style.position=o.i.style.position='absolute';
o.d.style.width=o.i.style.width=w+'px';
o.d.style.height=o.i.style.height=h+'px';
s.style[m[0]]=o.i.style[m[0]]='0px';
o.d.style[m[0]]=sz+'px';
s.style[m[1]]=o.d.style[m[1]]=o.i.style[m[1]]='0px';
s.appendChild(o.i);
s.appendChild(o.d);
o.p.appendChild(s);
o.s=[s,m[0],-sz,0];
o.ms=typeof(o.ms)=='number'&&o.ms>20?o.ms:1000;
o.ud=false;
o.p.style.overflow='hidden';
this.addevt(o.p,o.t=='mouseup'||o.t=='mousedown'||o.t=='mouseover'?o.t:'click','slide',o,o.t=='mouseover'?true:null);
o.t=='mouseover'?this.addevt(o.p,'mouseout','slide',o,false):null;
},

slide:function(o,ud){
o.ud=typeof(ud)=='boolean'?ud:!o.ud;
var t=o.ud?o.s[2]:0;
this.animate(o,o.s,o.s[3],t,new Date(),o.ms*Math.abs((t-o.s[3])/o.s[2]));
},

animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[3]=Math.floor(n);
a[0].style[a[1]]=a[3]+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[3]=t;
a[0].style[a[1]]=t+'px';
}
},


addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}

}

zxcRevealPanel.init({
ClassName:'horizontal', // the common class name if the slide parent DIVs. (string)
Slide:'right', //(optional) the slide direction. (string, 'right', 'left', 'up', 'down', default = 'right')
Animate:1000, //(optional) the duration in millisec. (number, default = 1000)
EventType:'click' //(optional) the event type to execute slide. (string, 'click', 'mouseup', 'mousedown', 'mouseover', default = 'click')
})

zxcRevealPanel.init({
ClassName:'vertical', // the common class name if the slide parent DIVs. (string)
Slide:'down', //(optional) the slide direction. (string, 'right', 'left', 'up', 'down', default = 'right')
Animate:1000, //(optional) the duration in millisec. (number, default = 1000)
EventType:'click' //(optional) the event type to execute slide. (string, 'click', 'mouseup', 'mousedown', 'mouseover', default = 'click')
})

/*]]>*/
</script>
</body>

</html>

vwphillips
12-02-2013, 03:18 PM
or using options in the class name


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.view img { display: block; position: relative; }

.view h2 { font-family: ‘Arvo’, sans-serif; color: #fff; text-align: left; position: relative; font-size: 14px;

background: #c23b44;
margin: 20px 0 0 20px;
font-weight: bold;
line-height: 20px;

}
.view-portfolio {
position:relative;left:100px;top:100px;width:160px;height:380px;cursor:pointer;
}

.view p { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px 20px; text-align: left; line-height: 18px; }

.view a.info { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; display: inline-block; text-decoration: none; padding: 7px 14px; background: #1eb8ff; color: #fff; box-shadow: 0 0 1px #1eb8ff; }

.view a.info:hover { box-shadow: 0 0 5px #1eb8ff; }

.view-portfolio img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio .mask { background-color: #00afff; -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio h2 { background: #00afff; color: #FFF; }

.view-portfolio p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”; filter: alpha(opacity=0); opacity: 0; color: #FFF; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }

.view-portfolio:hover .mask { right: 0; }

.view-portfolio:hover img { margin-left: 100%; }

.view-portfolio:hover p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; }
/*]]>*/
</style></head>

<body>
<div class="view view-portfolio Animate:500" >
<img src="http://testi3.aada.fi/aada_web/images/sparks_web.png" class="scale-with-grid">
<div class="mask">
<h2>Sparks ergonomics</h2>
<p>Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.</p>
<a href="http://www.sparkergonomics.com/fi/" target="_blank" class="info">Tutustu</a>
</div>
</div>
<div class="view view-portfolio Slide:down EventType:mouseover" >
<img src="http://testi3.aada.fi/aada_web/images/sparks_web.png" class="scale-with-grid">
<div class="mask">
<h2>Sparks ergonomics</h2>
<p>Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.</p>
<a href="http://www.sparkergonomics.com/fi/" target="_blank" class="info">Tutustu</a>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Reveal Panel (02-December-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcRevealPanel={

init:function(cls){
var clds=document.getElementsByTagName('DIV'),o,c,i,d,a=[],z0=0,z0a,z1=0;
for (;z0<clds.length;z0++){
c=clds[z0].className;
i=clds[z0].getElementsByTagName('IMG')[0];
d=clds[z0].getElementsByTagName('DIV')[0];
if (((' '+c+' ').match(' '+cls+' '))&&i&&d){
o={p:clds[z0],i:i,d:d};
c=c.split(' ');
for (z0a=0;z0a<c.length;z0a++){
i=c[z0a].indexOf(':');
if (i>0){
o[c[z0a].slice(0,i).toLowerCase()]=c[z0a].slice(i+1);
}
}
a.push(o);
}
}
for (;z1<a.length;z1++){
this.ready(a[z1]);
}
},

ready:function(o){
var w=o.p.offsetWidth,h=o.p.offsetHeight,s=document.createElement('DIV'),m=typeof(o.slide)=='string'?o.slide.charAt(0).toUpperCase():'R',sz=(m=='U'||m=='D'?h:w)*(m= ='L'||m=='U'?1:-1),m=m=='U'||m=='D'?['top','left']:['left','top'],ms=o.animate,t=o.eventtype;
s.style.position=o.d.style.position=o.i.style.position='absolute';
o.d.style.width=o.i.style.width=w+'px';
o.d.style.height=o.i.style.height=h+'px';
s.style[m[0]]=o.i.style[m[0]]='0px';
o.d.style[m[0]]=sz+'px';
s.style[m[1]]=o.d.style[m[1]]=o.i.style[m[1]]='0px';
s.appendChild(o.i);
s.appendChild(o.d);
o.p.appendChild(s);
o.s=[s,m[0],-sz,0];
o.ms=isFinite(ms*1)&&ms>20?ms*1:1000;
o.ud=false;
o.p.style.overflow='hidden';
this.addevt(o.p,t=='mouseup'||t=='mousedown'||t=='mouseover'?t:'click','slide',o,t=='mouseover'?true:null);
t=='mouseover'?this.addevt(o.p,'mouseout','slide',o,false):null;
},

slide:function(o,ud){
o.ud=typeof(ud)=='boolean'?ud:!o.ud;
var t=o.ud?o.s[2]:0;
this.animate(o,o.s,o.s[3],t,new Date(),o.ms*Math.abs((t-o.s[3])/o.s[2]));
},

animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[3]=Math.floor(n);
a[0].style[a[1]]=a[3]+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[3]=t;
a[0].style[a[1]]=t+'px';
}
},


addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}

}

zxcRevealPanel.init('view') // the common class name if the slide parent DIVs. (string)

/*
Class Name Options
Slide:'right' //(optional) the slide direction. (string, 'right', 'left', 'up', 'down', default = 'right')
Animate:1000 //(optional) the duration in millisec. (number, default = 1000)
EventType:'click' //(optional) the event type to execute slide. (string, 'click', 'mouseup', 'mousedown', 'mouseover', default = 'click')

*/
/*]]>*/
</script>
</body>

</html>