|
|
| (72 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| − | | + | {{UPMC-Paris/CSS}} |
| − | {{UPMC-Paris/Header}} | + | {{UPMC-Paris/Menu}} |
| | <html> | | <html> |
| − |
| |
| − | <!-- HTML-->
| |
| − |
| |
| − |
| |
| − |
| |
| − | <style>
| |
| − | .honeycombs{
| |
| − | position: relative;
| |
| − | overflow: hidden;
| |
| − | width: 100%;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .honeycombs .inner_span{
| |
| − | display: block;
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | background-color: #f7cd07;
| |
| − | font-family: sans-serif;
| |
| − | color: #000;
| |
| − | }
| |
| − | .honeycombs .inner-text{
| |
| − | padding-top: 30%;
| |
| − | }
| |
| − |
| |
| − | .honeycombs .honeycombs-inner-wrapper{
| |
| − | display: inline-block;
| |
| − | overflow: hidden;
| |
| − | width: 700px;
| |
| − | position: relative;
| |
| − | height: 1200px;
| |
| − | }
| |
| − |
| |
| − | .honeycombs .comb{
| |
| − | position: absolute;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | .honeycombs .hex_l,
| |
| − | .honeycombs .hex_r{
| |
| − | overflow: hidden;
| |
| − | position: absolute;
| |
| − | /* -webkit-backface-visibility: hidden; */
| |
| − | }
| |
| − |
| |
| − | .honeycombs .hex_l{
| |
| − | visibility: hidden;
| |
| − | -moz-transform: rotate(60deg);
| |
| − | -ms-transform: rotate(60deg);
| |
| − | -o-transform: rotate(60deg);
| |
| − | -webkit-transform: rotate(60deg);
| |
| − |
| |
| − | transform: rotate(60deg);
| |
| − | }
| |
| − |
| |
| − | .honeycombs .hex_r{
| |
| − | visibility: hidden;
| |
| − | -moz-transform: rotate(-120deg);
| |
| − | -ms-transform: rotate(-120deg);
| |
| − | -o-transform: rotate(-120deg);
| |
| − | -webkit-transform: rotate(-120deg);
| |
| − |
| |
| − | transform: rotate(-120deg);
| |
| − | }
| |
| − |
| |
| − | .honeycombs .hex_inner{
| |
| − | display: block;
| |
| − | visibility: visible;
| |
| − | -moz-transform: rotate(60deg);
| |
| − | -ms-transform: rotate(60deg);
| |
| − | -o-transform: rotate(60deg);
| |
| − | -webkit-transform: rotate(60deg);
| |
| − |
| |
| − | transform: rotate(60deg);
| |
| − |
| |
| − | background-position: center;
| |
| − | -webkit-background-size: cover;
| |
| − | -moz-background-size: cover;
| |
| − | -o-background-size: cover;
| |
| − | background-size: cover;
| |
| − |
| |
| − | cursor: pointer;
| |
| − |
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − | (function($) {
| |
| − |
| |
| − | $.fn.honeycombs = function(options) {
| |
| − |
| |
| − | // Establish our default settings
| |
| − | var settings = $.extend({
| |
| − | combWidth: 250,
| |
| − | margin: 10
| |
| − | }, options);
| |
| − |
| |
| − | function initialise(element) {
| |
| − |
| |
| − | $(element).addClass('honeycombs-wrapper');
| |
| − |
| |
| − | var width = 0;
| |
| − | var combWidth = 0;
| |
| − | var combHeight = 0;
| |
| − | var num = 0;
| |
| − | var $wrapper = null;
| |
| − |
| |
| − | /**
| |
| − | * Build the dom
| |
| − | */
| |
| − | function buildHtml(){
| |
| − | // add the 2 other boxes
| |
| − | $(element).find('.comb').wrapAll('<div class="honeycombs-inner-wrapper"></div>');
| |
| − | $wrapper = $(element).find('.honeycombs-inner-wrapper');
| |
| − |
| |
| − | $(element).find('.comb').append('<div class="hex_l"></div>');
| |
| − | $(element).find('.hex_l').append('<div class="hex_r"></div>');
| |
| − | $(element).find('.hex_r').append('<div class="hex_inner"></div>');
| |
| − |
| |
| − | $(element).find('.hex_inner').append('<div class="inner_span"><div class="inner-text"></div></div>');
| |
| − |
| |
| − | num = 0;
| |
| − |
| |
| − | $(element).find('.comb').each(function(){
| |
| − | num = num + 1;
| |
| − | var image = $(this).find('img').attr('src');
| |
| − | var css = 'url("'+image+'") ';
| |
| − |
| |
| − | $(this).find('.hex_inner').attr('style', 'background-image: '+css);
| |
| − |
| |
| − | if($(this).find('span').length > 0){
| |
| − | $(this).find('.inner_span .inner-text').html($(this).find('span').html());
| |
| − | }else{
| |
| − | $(this).find('.inner_span').remove();
| |
| − | };
| |
| − | });
| |
| − |
| |
| − | $(element).find('img, span, .inner_span').hide();
| |
| − | }
| |
| − |
| |
| − | /**
| |
| − | * Update all scale values
| |
| − | */
| |
| − | function updateScales(){
| |
| − | combWidth = settings.combWidth;
| |
| − | combHeight = ( Math.sqrt(3) * combWidth ) / 2;
| |
| − | edgeWidth = combWidth / 2;
| |
| − |
| |
| − |
| |
| − | $(element).find('.comb').width(combWidth).height(combHeight);
| |
| − | $(element).find('.hex_l, .hex_r').width(combWidth).height(combHeight);
| |
| − | $(element).find('.hex_inner').width(combWidth).height(combHeight);
| |
| − | }
| |
| − |
| |
| − | /**
| |
| − | * update css classes
| |
| − | */
| |
| − | function reorder(animate){
| |
| − |
| |
| − | updateScales();
| |
| − | width = $(element).width();
| |
| − |
| |
| − | newWidth = ( num / 1.5) * settings.combWidth;
| |
| − |
| |
| − | if(newWidth < width){
| |
| − | width = newWidth;
| |
| − | }
| |
| − |
| |
| − | $wrapper.width(width);
| |
| − |
| |
| − | var row = 0; // current row
| |
| − | var upDown = 1; // 1 is down
| |
| − | var left = 0; // pos left
| |
| − | var top = 0; // pos top
| |
| − |
| |
| − | var cols = 0;
| |
| − |
| |
| − | $(element).find('.comb').each(function(index){
| |
| − |
| |
| − | top = ( row * (combHeight + settings.margin) ) + (upDown * (combHeight / 2 + (settings.margin / 2)));
| |
| − |
| |
| − | if(animate == true){
| |
| − | $(this).stop(true, false);
| |
| − | $(this).animate({'left': left, 'top': top});
| |
| − | }else{
| |
| − | $(this).css('left', left).css('top', top);
| |
| − | }
| |
| − |
| |
| − | left = left + ( combWidth - combWidth / 4 + settings.margin );
| |
| − | upDown = (upDown + 1) % 2;
| |
| − |
| |
| − | if(row == 0){
| |
| − | cols = cols + 1;
| |
| − | }
| |
| − |
| |
| − | if(left + combWidth > width){
| |
| − | left = 0;
| |
| − | row = row + 1;
| |
| − | upDown = 1;
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $wrapper
| |
| − | .width(cols * (combWidth / 4 * 3 + settings.margin) + combWidth / 4)
| |
| − | .height((row + 1) * (combHeight + settings.margin) + combHeight / 2);
| |
| − | }
| |
| − |
| |
| − | $(window).resize(function(){
| |
| − | reorder(true);
| |
| − | });
| |
| − |
| |
| − | $(element).find('.comb').mouseenter(function(){
| |
| − | $(this).find('.inner_span').stop(true, true);
| |
| − | $(this).find('.inner_span').fadeIn();
| |
| − | });
| |
| − |
| |
| − | $(element).find('.comb').mouseleave(function(){
| |
| − | $(this).find('.inner_span').stop(true, true);
| |
| − | $(this).find('.inner_span').fadeOut();
| |
| − | });
| |
| − |
| |
| − | buildHtml();
| |
| − | reorder(false);
| |
| − | }
| |
| − |
| |
| − | return this.each(function() {
| |
| − | initialise(this);
| |
| − | });
| |
| − |
| |
| − | }
| |
| − |
| |
| − | }(jQuery));
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <div class="honeycombs">
| |
| − | <div class="comb"> <img src="images/picture_0.jpg" /> <span>jQueryScript.Net</span> </div>
| |
| − | <div class="comb"> <img src="images/picture_1.jpg" /> <span><b>This is</b><br>
| |
| − | a test</span> </div>
| |
| − | <div class="comb"> <img src="images/picture_2.jpg" /> <span><b>This is</b><br>
| |
| − | a test</span> </div>
| |
| − | <div class="comb"> <img src="images/picture_3.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_4.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_0.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_1.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_2.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_3.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_4.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_0.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_1.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_2.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_3.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_4.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_0.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_1.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_2.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_3.jpg" /> </div>
| |
| − | <div class="comb"> <img src="images/picture_4.jpg" /> </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| | </html> | | </html> |
| | {{UPMC-Paris/Footer}} | | {{UPMC-Paris/Footer}} |
| | + | <html> |
| | + | <div id="footer"/> |
| | + | </html> |
