Permalink
Browse files

all arrows in 1 file, animation for arrows

  • Loading branch information...
1 parent aa2d37c commit b32bfc38ae0476728126451be7f61bd4a4b811bd KubaZ committed Oct 20, 2011
Showing with 89 additions and 17 deletions.
  1. +3 −1 about.html
  2. +13 −3 architektura.html
  3. +3 −1 contact.html
  4. +39 −3 css/style.css
  5. BIN img/arrows.png
  6. +3 −1 index.html
  7. +10 −2 js/script.js
  8. +3 −1 news.html
  9. +15 −5 urbanistyka.html
View
@@ -97,7 +97,9 @@ <h5 class="client">Korab /<a href="#">www.producentwozkowwidlowych</a></h5>
<li><a href="about.html">Kontakt</a></li>
<li><a href="about.html">Aktualności</a></li>
</ul>
- <div id="up"><a href="#top">do góry</a></div>
+ <div id="up">
+ <a href="#top"><div class="arrow"></div>do góry</a>
+ </div>
<a href="http://minima.pl" id="minima">Site by Minima</div>
</nav>
View
@@ -90,6 +90,11 @@ <h5 class="info">Projekt 2007 / Realizacja 2009</h5>
<p>Kamienica zlokalizowana na działce narożnej ulic Tylne Chwaliszewo i Czartoria, zawiera 32 mieszkania i miejsca parkingowe , z okien na wyższych kondygnacjach piękny widok na wieże Starego Miasta i Katedry</p>
</article>
<ul id="thumbs">
+ <li id="prevThumb">
+ <a href="">
+ <div class="arrow"></div>
+ </a>
+ </li>
<li></li>
<li></li>
<li></li>
@@ -100,8 +105,11 @@ <h5 class="info">Projekt 2007 / Realizacja 2009</h5>
<li></li>
<li></li>
<li></li>
- <li></li>
- <li></li>
+ <li id="nextThumb">
+ <a href="">
+ <div class="arrow"></div>
+ </a>
+ </li>
</ul>
</section>
<div id="container">
@@ -144,7 +152,9 @@ <h5 class="info">Projekt 2007 / Realizacja 2009</h5>
<li><a href="about.html">Kontakt</a></li>
<li><a href="about.html">Aktualności</a></li>
</ul>
- <div id="up"><a href="#top">do góry</a></div>
+ <div id="up">
+ <a href="#top"><div class="arrow"></div>do góry</a>
+ </div>
<a href="http://minima.pl" id="minima">Site by Minima</div>
</nav>
View
@@ -73,7 +73,9 @@ <h5 class="info">Ankiersztajn, Stankiewicz, Wroński</h5>
<li><a href="about.html">Kontakt</a></li>
<li><a href="about.html">Aktualności</a></li>
</ul>
- <div id="up"><a href="#top">do góry</a></div>
+ <div id="up">
+ <a href="#top"><div class="arrow"></div>do góry</a>
+ </div>
<a href="http://minima.pl" id="minima">Site by Minima</div>
</nav>
View
@@ -500,15 +500,15 @@ h5.client a:hover {
background: url(../img/arrows.png) 0% 0% no-repeat;
}
#prevArticle .arrow.active {
- background: url(../img/arrows.png) 30% 0% no-repeat;
+ background: url(../img/arrows.png) 32% 0% no-repeat;
}
#nextArticle .arrow{
float: right;
margin: 9px 12px 0 0;
background: url(../img/arrows.png) 100% 0% no-repeat;
}
#nextArticle .arrow.active {
- background: url(../img/arrows.png) 70% 0% no-repeat;
+ background: url(../img/arrows.png) 68% 0% no-repeat;
}
/************** nawigacja zdjęciami realizacji ***************/
#thumbs {
@@ -531,20 +531,47 @@ h5.client a:hover {
#thumbs li:last-child {
margin-right: 0;
}
+#thumbs li a {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
#prevThumb {
float: left;
width: 60px;
height: 52px;
margin: 18px 9px 0 0;
border: solid 1px #eee;
}
+#thumbs .arrow {
+ display: block;
+ width: 12px;
+ height: 17px;
+ overflow: hidden;
+}
+#prevThumb .arrow {
+ float: left;
+ margin: 17px 0 0 22px;
+ background: url(../img/arrows.png) 0% 62% no-repeat;
+}
+#prevThumb .arrow.active {
+ background: url(../img/arrows.png) 32% 62% no-repeat;
+}
#nextThumb {
float: right;
width: 60px;
height: 52px;
margin: 18px 0 0 9px;
border: solid 1px #eee;
}
+#nextThumb .arrow {
+ float: right;
+ margin: 17px 23px 0 0;
+ background: url(../img/arrows.png) 100% 62% no-repeat;
+}
+#nextThumb .arrow.active {
+ background: url(../img/arrows.png) 68% 62% no-repeat;
+}
/************** stopka ***************/
#globalfooter {
font-family: 'Times New Roman';
@@ -594,13 +621,22 @@ h5.client a:hover {
width: 74px;
height: 34px;
line-height: 36px;
- background: url(../img/up.png) 2px 11px no-repeat;
color: #808184;
font-size: 14px;
}
#up a:hover {
color: #5f938e;
}
+#up .arrow {
+ float: left;
+ margin-top: 12px;
+ height: 10px;
+ width: 18px;
+ background: url(../img/arrows.png) 0% 100% no-repeat;
+}
+#up .arrow.active {
+ background: url(../img/arrows.png) 100% 100% no-repeat;
+}
#minima {
float: left;
height: 34px;
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -83,7 +83,9 @@
<li><a href="about.html">Kontakt</a></li>
<li><a href="about.html">Aktualności</a></li>
</ul>
- <div id="up"><a href="#top">do góry</a></div>
+ <div id="up">
+ <a href="#top"><div class="arrow"></div>do góry</a>
+ </div>
<a href="http://minima.pl" id="minima">Site by Minima</div>
</nav>
View
@@ -61,22 +61,30 @@ $("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
-$("#prevArticle a").hover(
+$("#prevArticle a, #prevThumb a").hover(
function() {
$(this).children().addClass("active").stop(true,true).animate({marginLeft: '-=4px'},300);
},
function() {
$(this).children().removeClass("active").stop(true,true).animate({marginLeft: '+=4px'},300);
}
);
-$("#nextArticle a").hover(
+$("#nextArticle a, #nextThumb a").hover(
function() {
$(this).children().addClass("active").stop(true,true).animate({marginRight: '-=4px'},300);
},
function() {
$(this).children().removeClass("active").stop(true,true).animate({marginRight: '+=4px'},300);
}
);
+$("#up a").hover(
+ function() {
+ $(this).children().addClass("active").stop(true,true).animate({marginTop: '-=4px'},300);
+ },
+ function() {
+ $(this).children().removeClass("active").stop(true,true).animate({marginTop: '+=4px'},300);
+ }
+);
View
@@ -91,7 +91,9 @@ <h5 class="info">Ankiersztajn, Stankiewicz, Wroński</h5>
<li><a href="about.html">Kontakt</a></li>
<li><a href="about.html">Aktualności</a></li>
</ul>
- <div id="up"><a href="#top">do góry</a></div>
+ <div id="up">
+ <a href="#top"><div class="arrow"></div>do góry</a>
+ </div>
<a href="http://minima.pl" id="minima">Site by Minima</div>
</nav>
View
@@ -66,12 +66,12 @@
<ul id="articleNav">
<li id="prevArticle">
<a href="#">
- <img src="img/arrows.png" class="top"/>
+ <div class="arrow"></div>
</a>
</li>
<li id="nextArticle">
<a href="#">
- <img src="img/arrows.png" class="top"/>
+ <div class="arrow"></div>
</a>
</li>
</ul>
@@ -82,6 +82,11 @@ <h5 class="info">Projekt 2007 / Realizacja 2009</h5>
<p>Kamienica zlokalizowana na działce narożnej ulic Tylne Chwaliszewo i Czartoria, zawiera 32 mieszkania i miejsca parkingowe , z okien na wyższych kondygnacjach piękny widok na wieże Starego Miasta i Katedry</p>
</article>
<ul id="thumbs">
+ <li id="prevThumb">
+ <a href="">
+ <div class="arrow"></div>
+ </a>
+ </li>
<li></li>
<li></li>
<li></li>
@@ -92,8 +97,11 @@ <h5 class="info">Projekt 2007 / Realizacja 2009</h5>
<li></li>
<li></li>
<li></li>
- <li></li>
- <li></li>
+ <li id="nextThumb">
+ <a href="">
+ <div class="arrow"></div>
+ </a>
+ </li>
</ul>
</section>
<div id="container">
@@ -136,7 +144,9 @@ <h5 class="info">Projekt 2007 / Realizacja 2009</h5>
<li><a href="about.html">Kontakt</a></li>
<li><a href="about.html">Aktualności</a></li>
</ul>
- <div id="up"><a href="#top">do góry</a></div>
+ <div id="up">
+ <a href="#top"><div class="arrow"></div>do góry</a>
+ </div>
<a href="http://minima.pl" id="minima">Site by Minima</div>
</nav>

0 comments on commit b32bfc3

Please sign in to comment.