Increasing dimensions on hover without changing the position of other elements - javascript

Suppose I've 10 divs in the form of squares. Lets call it the home page.
Out of these 10,
3 divs have class .event1
5 divs have class .event2
2 divs have class .event3
<div class="boxes event1">
....//3-times
....
</div>
<div class="boxes event2">
....//5-times
....
</div>
<div class="boxes event3">
....//2-times
....
</div>
The boxes are placed next to one another.
When I click event1, all box fadeout except those having the class event1. Similarly, for all classes. On clicking home, all boxes will again fade in.
<div id="navi">
<div id="t0"><span>Home</span></div>
<span>Event1</span>
<span>Event2</span>
<span>Event3</span>
</div>
My JQuery code for fadeOut:
<script type="text/javascript">
$(function () {
$('#t0').click(function() {
$("*").animate({
opacity: 1.0
}, 500 );
});
$("#navi a").click(function() {
c = $(this).text().toLowerCase();
if (c!="home"){
$('.' + c).animate({
opacity: 1.0
}, 500 ).addClass('w1');
$('.boxes').not('.' + c).animate({
opacity: 0.0
}, 500 );
}
});
});
</script>
CSS for the classes:
.boxes, .event1, .event2, .event3 {
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:100px;
height:100px;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
.w1:hover{
background:rgba(0, 0, 0, .30);
float:left;
width:200px;
height:200px;
position:absolute;
overflow:hidden;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
Now I want to make only a particular box increase in size (width:200px; height:200px), when the mouse pointer is hovered. I can't find a way to do it.
When I'm adding the class .w1 in javascript code, it is being applied to all the elements having class event1 or event2 or event3 (whichever one was selected). So, when I'm hovering to a particular box of that class (which was selected), all the boxes undergo transition and the boxes shift.
I want only one box to change dimensions while the other boxes are at their original place.
Also, this hovering event has to be activated for a particular event so that one can't hover on elements when home is selected. I even tried doing this by changing z-index but the page got pretty messed up.

I felt free to rebuild your project. Instead of css i use javascript in this example. The main point of this example is, that i do not resize the existing box. I build a new div, copy the content of the old div, position it absolute and set the opacity of the old one to 0. jsfiddle link: http://jsfiddle.net/56yeQ/8/
html:
<div id="navi">
<div id="t0"><span>Home</span></div>
<span>Event1</span>
<span>Event2</span>
<span>Event3</span>
</div>
<div class="boxes event1">
1
</div>
<div class="boxes event1">
2
</div>
<div class="boxes event1">
3
</div>
<div class="boxes event2">
4
</div>
<div class="boxes event2">
5
</div>
<div class="boxes event2">
6
</div>
<div class="boxes event2">
7
</div>
<div class="boxes event2">
8
</div>
<div class="boxes event3">
9
</div>
<div class="boxes event3">
10
</div>
css:
.boxes, .event1, .event2, .event3 {
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:100px;
height:100px;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
.w1{
background:rgba(0, 0, 0, .30);
float:left;
width:100px;
height:100px;
position:absolute;
overflow:hidden;
margin: 2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
opacity: 1;
}
javascript:
var isHome = true;
$(function () {
$("#navi a").click(function() {
c = $(this).text().toLowerCase();
isHome = c=="home";
if (isHome){
$("*").animate({
opacity: 1.0
}, 500 );
} else {
$('.boxes').not('.' + c).animate({
opacity: 0.0
}, 500 );
$('.' + c).animate({
opacity: 1.0
}, 500 )
}
});
});
function hoverIn(element){
if(!isHome && $(this).css("opacity")==1){
$(".w1").each(function(i){
var oldDiv= $(this).data("oldDiv");
$(oldDiv).css({opacity:1});
$(this).remove();
});
var posX = $(this).position().left+2;
var posY = $(this).position().top+2;
var newDiv = $("<div>").html($(this).html());
$(newDiv).mouseleave(hoverOut);
$(newDiv).addClass("w1");
$("body").append(newDiv);
$(this).css({opacity: 0});
$(newDiv).offset({top:posY, left: posX});
$(newDiv).data("oldDiv",this);
$(newDiv).animate({height:"200px",width:"200px"},500);
}
}
function hoverOut(element){
var oldDiv= $(this).data("oldDiv");
$(oldDiv).css({opacity:1});
$(this).remove();
}
$(".boxes").mouseenter(hoverIn);

Maybe this is what you are looking for:
.w1:hover{
<!--Removed the position absolute-->
background:rgba(0, 0, 0, .30);
float:left;
width:200px;
height:200px;
overflow:hidden;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
margin-bottom: -100px;
}
.w1:hover +div{
margin-left: -100px;
}

Related

stop onload animation loop with button click and find color class of targeted (opacity 1) div

I have an onload looping animation of ten divs that fade in and out sequentially with the use of the opacity property. When the user clicks the red button, I want the animation to stop, leaving the div that is at the opacity of 1 to remain at 1 while the others stay at 0.2. Eventually I want another larger div above these to fill with the same color (class) as the one that is at opacity 1. Can anyone give me a hand? I have a fiddle at http://jsfiddle.net/seifs4/krm6uenj/20/
Here is my html:
<div id="squares-container">
<div class="yellow game-square"></div>
<div class="purple game-square"></div>
<div class="green game-square"></div>
<div class="red game-square"></div>
<div class="blue game-square"></div>
<div class="yellow game-square"></div>
<div class="purple game-square"></div>
<div class="green game-square"></div>
<div class="red game-square"></div>
<div class="blue game-square"></div>
</div><!-- end squares-container -->
<div id="red-button">Red Button</div>
My CSS:
#squares-container{
margin:580px auto 0 auto;
text-align:center;
}
#red-button{
width:140px;
height:30px;
background:#CC0000;
font-size:18px;
font-weight:bold;
color:#fefefe;
text-align:center;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
margin:40px 0 0 180px;
padding:8px 0 0 0;
cursor:pointer;
}
.game-square{
width:65px;
height:65px;
border:1px solid #ddd;
display:inline-block;
margin:0 12px;
opacity:0.2;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-shadow:inset 0 0 7px 7px #fefefe;
box-shadow:inset 0 0 7px 7px #fefefe;
}
.yellow{
background:#FFFF00;
}
.green{
background:#33CC33;
}
.blue{
background:#3366FF;
}
.purple{
background:#D617D7;
}
.red{
background:#F02257;
}
and the jQuery:
$(document).ready(function () {
$.fn.extend({
brighten: function(){
$(this).fadeTo(150, 1);
}
});
$.fn.extend({
fade: function(){
$(this).fadeTo(150, 0.2);
}
});
function animateSequence() {
$('.game-square').each(function (i) {
$(this).delay((i++) * 145).brighten();
$(this).delay((i++) * 5).fade();
});
}
animateSequence()
setInterval(animateSequence, 1700);
$('#red-button').click(function(){
animateSequence().stop();
});
});
Alright, after much effort on this, I could make it 80% work. So just see if that is what you want. Check for the inline comments in below JS
DEMO HERE
$(document).ready(function () {
var current="";
$.fn.extend({
brighten: function(){
$(this).fadeTo(150, 1);
}
});
$.fn.extend({
fade: function(){
$(this).fadeTo(150, 0.2);
}
});
function animateSequence() {
$('.game-square').each(function (i) {
$(this).delay((i++) * 145).brighten();
$(this).delay((i++) * 5).fade();
});
}
animateSequence();
var interval=setInterval(animateSequence, 1690);
$('#red-button').on('click',function(){
clearInterval(interval); //clear the interval
$('.game-square').each(function(){
$(this).stop();//stop its delay
});
setTimeout(function(){
$('.game-square').each(function(){
if($(this).css('opacity')>0.3) //get whose opacity was greater which represents current element
$(this).css('opacity',1); //Make its opacity 1
});
},100);
});
});

Centered sticky menu?

I found a piece of code using script with CSS that allows me to have a menu which sticks to the top of the screen when you scroll down.
At the moment it's aligned left and I want it centered under my title and to stay centered when you scroll down.
I've tried changing a few values and using padding but its creating problems and I figured there must be a easier to do it that I'm probably missing.
HTML
<pre>
<script>
$(function() {
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky_navigation').css({ 'position': 'relative' });
}
};
sticky_navigation();
$(window).scroll(function() {
sticky_navigation();
});
});
</script>
<div id="demo_top_wrapper">
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li>About Me</li>
<li>My Work</li>
<li>Experience</li>
<li>Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
</pre>
CSS
.demo_container { width:980px; margin:0 auto;padding-left:0 auto; }
#demo_top_wrapper { margin:0 0 20px 0; }
#demo_top { height:100px; padding:20px 0 0 0; }
#my_logo { font:70px Georgia, serif; }
#sticky_navigation_wrapper { width:100%; height:50px; }
#sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
Actually, your #sticky_navigation div's width is set at 100%, so it's as big as your page. You have to set the width of the div to "auto" or a precise value (like 400px) or remove it, the set its margin to "auto"
Then, remove "left:0px" from the js code, it sets your div 0px far from the left bound of your page.
css:
#sticky_navigation { width:auto; margin:auto; text-align:center; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
.demo_container { margin:auto; text-align:center; }
js:
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0 });

Why the page is longer on Chrome? [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
Check this page www.danielmalek.bugs3.com/oferta.html, on Chrome you can see its a bit too long so the beam on the left side is not reaching end of site.
On firefox and IE it is seems to be right, also at localhost Chrome displays well.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Strony internetowe - Daniel Małek</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
/*$("body").css("overflow-y", "hidden");*/
/*("#slider").css("overflow", "hidden");*/
function tytul() {
}
$(".galeria").click(
function()
{
$("#ukryte").toggle(200);
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="header2"></div>
<div id="pasek"></div>
</div>
<div id="przedluzenie"></div>
<div id="content">
<div id="menu">
<div id="menu2">
<a class="start" href="index.html"></a>
<a class="galeria" href="#"></a>
<div id="ukryte" style="display: none;">
<a class="webdesign" href="webdesign.html"></a>
<a class="grafika" href="grafika.html"></a>
</div>
<div id="oferta_b"></div>
<a class="omnie" href="omnie.html"></a>
<a class="kontakt" href="kontakt.html"></a>
</div>
</div>
<div id="prawa_strona">
<div id="omnietxt" style="margin-bottom:60px;">
<ul style="margin-left:20px;" class="ofertatxt">
<li>Administracja istniejącymi stronami internetowymi</li>
<li>Hosting, domeny i instalacja stron na serwerze</li>
<li>Projektowanie i kodowanie stron www</li>
<li>Identyfikacja wizualna (tworzenie logo)</li>
<li>Dedykowane systemy CMS</li>
<li>Blogi Wordpress</li>
<li>Oprogramowanie sklepów KQSStore</li>
</ul>
</br>
<p class="ofertatxt">
Ponadto, wraz ze znajomymi programistami tworzymy młody, ambitny zespół, który jest w stanie stworzyć w pełni funkcjonalne i rozbudowane serwisy internetowe.</br></br>
Nie wystawiam faktury VAT, preferowany rodzaj współpracy to umowa o zlecenie lub umowa o dzieło.</p>
</div>
<div id="footerx">
<img src="img/foot_linia.png"></img><br>
<p class="stopka">Copyright © 2013 Daniel Małek </p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 410;
var headerWidth = 410;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);
</script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var content = $('#content').height();
var winh = $(window).height();
if(content>=winh){$('#menu').height(content);}
else{
winh=winh-200;
$('#menu').height(winh);}
});
</script>
</body>
</html>
And CSS:
* { padding: 0; margin: 0;}
.clear {clear: both;}
html{}
html, body, #container, #content{}
body {background: url('img/tekstura.png');background-repeat:repeat-y repeat-x;background-color:#d5d5d5;}
#container {margin: 0 auto; position:relative;}
#content {margin: 0 auto;position:relative;width:960px;overflow:auto;}
#header {background-color:#2099c8;background: url('img/heder/tekstura.png') repeat-x; height:160px; margin:0 auto; position:relative; width:100%;box-shadow: 0 0 30px 9px white;}
#pasek{height:3px;background: url('img/heder/pasek.png') repeat-x;}
#header2{background: url('img/heder/przod2.png') no-repeat;background-repeat:repeat-y repeat-x;margin: 0 auto;width:960px; height:157px;}
#gradient_poziom{height:37px; background: url('img/gradient_poziom.png') repeat-x;}
#prawa_strona{ float:right;width:720px; margin-right:10px;}
#przedluzenie{width:209px; height:40px;background-color:black;margin:0 auto;position:relative;right:376px;background: url('img/gradient_pion.png') repeat-y;}
#menu {float:left;width:209px;margin-right:5px;background: url('img/gradient_pion.png') repeat-y;}
#menu2{float:right;margin-right:20px;}
#ukryte {position:relative;left:23px;}
#start_b {background: url('img/start_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
.start {background:url('img/start.png') no-repeat;display:block;height:29px;width:169px;margin-bottom:15px;}
a.start:hover {background-position: 0px -29px;}
#galeria_b {background: url('img/galeria_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.galeria {background: url('img/galeria.png') no-repeat;display:block;height:29px;overflow:hidden;width: 169px;margin-bottom:15px;}
a.galeria:hover {background-position: 0px -29px;}
#webdesign_b {background: url('img/webdesign_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;}
a.webdesign {background: url('img/webdesign.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:15px;}
a.webdesign:hover {background-position: 0px -20px;}
#grafika_b {background: url('img/grafika_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;}
a.grafika {background: url('img/grafika.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:25px;}
a.grafika:hover {background-position: 0px -20px;}
#oferta{background: url('img/oferta_b.png') no-repeat;height:29px;width: 142px;margin-bottom:15px;}
a.oferta {background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 142px;margin-bottom:15px;}
a.oferta:hover {background-position: 0px -29px;}
#omnie_b{background: url('img/omnie_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.omnie {background: url('img/omnie.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;}
a.omnie:hover {background-position: 0px -29px;}
#oferta_b{background: url('img/oferta_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.oferta {background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;}
a.oferta:hover {background-position: 0px -29px;}
#kontakt_b {background: url('img/kontakt_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.kontakt {background: url('img/kontakt.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;}
a.kontakt:hover {background-position: 0px -29px;}
.minwebd{border: 1px solid #2e2e2e;float:left;position:relative;left:10px;}
.cien{display:block;height:28px;width:216px;float:left;margin-left:22px;}
#cienie{z-index:-1;float:right;position:relative;top:-8px;}
#jrs{margin-top:25px;float:right;margin-left:7px;}
.jrs{background: rgba(255, 255, 255, 0.7);width:218px;float:left;}
.jrs_img{}
.jrs_tekst{margin: 0 10px 15px 10px; text-align:justify;color:#464646;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:12px;}
.znak_plus{position:relative;float:left;width:20px;font-size:20px;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;margin-top:15px;text-align:center;color:#3f3f3f;}
#footerx{float:right;margin:20px 0;width:412px;}
.stopka{float:right;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:0.6em;color:#2e2e2e;position:relative;margin-right:10px;margin-top:5px;}
.obrazek1{
height:159px;
width: 198px;
float:left;
border: 1px solid #417f99;
}
.obrazek2{}
#galgraf{margin-right:30px;float:left;}
#napis{ width:190px;float:right;height:35px;background: white;background: rgba(255, 255, 255, 0.7); display: block; padding: 5px ; margin: 0 0 20px 20px;}
#wstep{float:left; position:relative; width:auto; background: white; background: rgba(255, 255, 255, 0.7);margin: 0 0 30px 66px; padding:10px 15px 10px 15px;color:#464646;}
#gallery{
float:right;
}
#gallery2{
float:left;
width:200px;
}
#webdopisy{
float:left;
}
#webdopis{float:right;width: 430px; background: white;background: rgba(255, 255, 255, 0.7); display: block;margin: 0 0 15px 40px; padding:15px;color:#464646;}
#beczka{margin-bottom:30px;position:relative;float:left;}
.webdopis {}
.opis a {
text-decoration:none;
color:#006c96;
}
.opis a:hover{
text-decoration:underline;
color:#006c96;
}
h1 {
color:black;
font-size:0.9em;
font-family:tahoma,Helvetica,sans-serif;
font-weight:100;
text-align:center;
}
.omnietxt{line-height:20px;color:#464646;font-size:0.9em;float:left;font-family:arial,Helvetica,sans-serif;padding: 0 5px 0 5px;}
.ofertatxt{line-height:20px;color:#464646;font-size:0.9em;font-family:arial,Helvetica,sans-serif;text-align:justify}
#omnietxt{
float:left;
width: 500px;
background: white;
background: rgba(255, 255, 255, 0.7);
display: block;
padding:15px 15px 15px 15px;
margin: 0 0 110px 120px;
}
#wysokosc{
height:420px;
}
/* LAJTBOKS */
.thumb {
float:left;
margin: 0 0 0 20px ;
border: 1px solid #2e2e2e;
}
.clearFloat {
clear:both;
}
/* KONTAKT */
#numery{ padding:20px 20px 20px 20px;float:left;position:relative;left:265px;background: rgba(255, 255, 255, 0.7); margin-top:15px;margin-bottom:150px;}
.gg1 {position:relative;top:2px;left: 13px;}
.gg2 {font-style:italic;font-size:1.2em;position:relative;top:5px;left:15px;}
.adres1 {color:#015d81;font-size:15;font-family:Arial,Helvetica,sans-serif;}
.adres2 {position:relative;top:5px;color:#015d81;font-size:15;font-family:Arial,Helvetica,sans-serif;}
You have two scripts embedded into HTML:
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var content = $('#content').height();
var winh = $(window).height();
if(content>=winh){$('#menu').height(content);}
else{
winh=winh-200;
$('#menu').height(winh);}
});
</script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var content = $('#content').height();
$('#menu').height(content);
});
</script>
Both fire at the same time: $(window).load, and both do the same thing: $('#menu').height(value);, but the value is different.
Obviously, this is erroneous. Probably in Chrome those snippets finish in different order than in other browsers, thus the difference.
UPD #1
I'm opening your link now with Chrome, and the vertical scrollbar does not appear. I assume my solution worked, please don't forget to accept the question. ;)
But do you know that you don't need Javascript to solve this task?
Here's an example how vertical stretching can be done in pure CSS: CSS 3 col template 100% same height
Also, you should not use non-semantic elements for decoration: #przedluzenie, #pasek etc. That can be also solved in pure CSS without messing your HTML.

Change dimensions of HTML/CSS boxes on hover

I've a web page having some equal-sized boxes. Some of them are hidden (.dummy), other are visible having class lets say .A,.B & .C as shown in the image below:[The dummy have only been shown here in the image for simplicity. In actual HTML code they don't have any background/border, hence invisible.]
Now, if a user clicks on link A, all boxes expect those of class '.A' will fadeOut. Similarly, for the other links as shown here.
I want only the div#1 box to change dimensions, when the pointer is hovered. However, when I apply the .hover command, the whole page gets distorted. I want every box to remain as it is and only the width of #div 1 gets increased. Similarly, only the height of #div 2 to increase. For this purpose, do I have to write separate classes for each effect?
EDIT #1
These are my relevant codes:
.dummy {
float:left;
position:relative;
overflow:hidden;
width:6.36896%;
height:22.2287%;
margin:2px;
background:none;
}
.A, .B, .C{
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:6.36896%;
height:22.2287%;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
If all of the Class A divs are under the same parent, you can try nth-of-type selector,
e.g.,
<html>
<head>
<style>
.A {
width: 50px;
height: 50px;
border: 1px solid #CCC;
}
#outer div:nth-of-type(1) .A:hover {
width: 300px;
}
</style>
</head>
<body>
<div id="outer">
<div>
<div class="A"></div>
</div>
<div>
<div class="A"></div>
<div class="A"></div>
</div>
</div>
</body>
</html>
Regerence:
W3C CSS Selector Reference

Minimizing Code for Javascript/jQuery Popup Windows

I'm creating a personal site to showcase demo material, and I would like to allow users to click on a thumbnail which causes a small window to animate downward and display details. Currently, I have it working perfectly, but as I continue to add items, the code is getting very repetitive. I'm having to repeat all of this code for "item2," "item3," etc... Is there a more efficient way to handle this with possibly 1 script and maybe 1 animated containing box for my content? I'm new to jQuery and Javascript, and I'd like to get better at streamlining my code.
Here's what I'm using:
<script type="text/javascript">
$(function() {
$('#activator_item1').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box_item1').animate({'top':'250px'},500);
});
});
$('#boxclose_item1').click(function(){
$('#box_item1').animate({'top':'-500px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
CSS
.box_item1{
position:fixed;
top:-800px;
height:400px;
width:550px;
left:30%;
right:30%;
background-color:#fff;
color:#333;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
text-align:left;
}
.box_item1 h1{
border-bottom: 1px solid #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#1E87BE;
color:#fff;
font-family:"Arial Black", Gadget, sans-serif;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
a.boxclose_item1{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
a.activator_item1{
width:153px;
height:150px;
position:relative;
top:0px;
left:0px;
z-index:1;
cursor:pointer;
HTML
<div id="item1"><a class="activator_item1" id="activator_item1"><img src="images/item1_button.png"/></a></div>
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box_item1" id="box_item1">
<a class="boxclose_item1" id="boxclose_item1"></a>
<h1>Title</h1>
<h2>Content</h2>
<h3><ul><li>Detail 1</li><li>Detail 2</li></ul></h3>
</div>
</div>
You are quite close. Instead of selecting elements by "id", select them using their associated class (using a dot "." rather than "#"), ex. $('.activator_item1') - this will apply the same code to all activator_items.
This can be solved with better naming. You have a distinct class for each element, which robs you of the grouping power of classes. Consider separating the class for better access to the iterator. For example, you have <a class="activator_item1" id="activator_item1"> where you could have <a class="activator item1" id="activator_item1"> instead. This would allow you to select all of the activators in JQuery and iterate over them:
$('.activator').each(function() {
//your code
});

Categories