Witam mam menu i jak sobie wejdę np w list motywacyjny to chciałem mieć taka tabelkę jak tu
tabela niestety nie udaje mi się to
bo nie wygląda to jak powinno i nie wiem co mam zrobić zęby mi to działało
pod kodem wrzucał wszystkie plik by odpalić i zobaczyć
kod pliku index.html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Little Boxes Menu or Navigation with jQuery - radnomly animate the menu items to show content, accodion like boxes menu" /> <meta name="keywords" content="jquery, boxes, menu, navigation, animate"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.betterTooltip.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() {
/* object to save the initial positions of each box */
var divinfo = {"initial": []};
/* index of the selected / clicked box */
var current = -1;
/* we save the index,top and left of each one of the boxes */
$('#littleBoxes > div').each(function(){
var $this = $(this);
var initial = {
'index' : $this.index(),
'top' : $this.css('top'),
'left' : $this.css('left')
};
divinfo.initial.push(initial);
});
/* clcik event for the anchors inside of the boxes */
$('#littleBoxes a').bind('click',function(e){
var $this = $(this);
var $currentBox = $this.parent();
/* set a z-index lower than all the other boxes,
to see the other boxes animation on the top*/
$currentBox.css('z-index','1');
/* if we are clicking on a expanded box : */
if(current == $currentBox.index()){
/* put it back (decrease width,height, and set the top and left like it was before).
the previous positions are saved in the divinfo obj*/
$currentBox.stop().animate({
'top' : divinfo.initial[$currentBox.index()].top,
'left' : divinfo.initial[$currentBox.index()].left,
'width' : '122px',
'height' : '122px'
},800,'easeOutBack').find('.boxcontent').fadeOut();
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
var elemTop = divinfo.initial[$ele.index()].top;
var elemLeft = divinfo.initial[$ele.index()].left;
$ele.stop().show().animate({
'top' : elemTop,
'left' : elemLeft,
'opacity' : 1
},800);
});
current = -1;
}
/* if we are clicking on a small box : */
else{
/* randomly animate all the other boxes.
Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
This range is considering the initial lefts/tops of the elements. It's not the exact right
range, since we would have to calculate the range based on each one of the boxes. Anyway, it
fits our needs...
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
$ele.stop().animate({
'top' : (Math.floor(Math.random()*601) - 150) +'px',
'left': (Math.floor(Math.random()*601) - 150) +'px',
'opacity':0
},800,function(){
$(this).hide();
});
});
/* expand the clicked one. Also, fadeIn the content (boxcontent)
if you want it to fill the space of the littleBoxes container,
then these are the right values */
var newwidth = 379;
var newheight = 379;
$currentBox.stop().animate({
'top' : '0px',
'left' : '0px',
'width' : newwidth +'px',
'height': newheight+'px'
},800,'easeOutBack',function(){
current = $currentBox.index();
$(this).find('.boxcontent').fadeIn();
});
}
e.preventDefault();
});
$(document).ready(function(){
$('.tTip').betterTooltip({speed: 150, delay: 300});
// Tabs
$('#tabs').tabs();
});
});
<div id="littleBoxes" class="littleBoxes"> <div class="boxlink bg1" style="top:0px;left:0px;">
<div class="tTip" title="jak krok po kroku pisac curiculum vite">CV
<!-- Tabs -->
<h2 class="demoHeaders">Tabs
</h2> <li><a href="#tabs-1">First
</a></li> <li><a href="#tabs-2">Second
</a></li> <li><a href="#tabs-3">Third
</a></li> <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
</div> <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
</div>
<div class="boxlink bg2" style="top:0px;left:380px;"> <a href="" >LIST MOTYWACYJNY
</a>
<div style="top:190px;left:190px;">
<div class="boxlink bg4" style="top:380px;left:380px;"> <a href="">ROZMOWA KWALIFIKACYJNA
</a>
pliki
Ten post edytował barca45 10.01.2011, 15:04:27
[JavaScript] problem z dodaniem tablicy
