Запоминание положения окон. - Форум
Страница 1 из 11
Форум » Форум веб мастеров » jQuery & JavaScript » Запоминание положения окон.
Запоминание положения окон.

NiKiT0S
VIP
Сообщений 229
+
+2139
-
Ваши награды 10
NiKiT0S написал: В ответ пользователя NiKiT0S Написано 01 Ноября 2012 в 21:55
Сообщение № 1
Здравствуйте уважаемые пользователи сайта webo4ka.ru
Пришол я за помощью. Есть такой сайт:

и у него очень занимательный скрипт, а именно перемещение блоков и запоминание их положения в колонках(вроде используется JavaScript)...
Пытался воспроизвести такую функцию для своих нужд, почистил код, и вот что получилось:


К сожалению у меня не работает:
1) Отображение области перемещения и пунктиры на месте куда встанет блок.
2) Запоминание положения

Я очень надеюсь на вашу помощь, т.к. нечего не соображаю в jQuery и JavaScript . Спасибо.
«Пред. тема След. тема»

Webing
Проверенные
Сообщений 228
+
+321
-
Ваши награды 8
Webing написал: В ответ пользователя Webing Написано 04 Декабря 2012 в 19:19
Сообщение № 2
Cookies в помощь.

Froa
Проверенные
Сообщений 227
+
+132
-
Ваши награды 5
Froa написал: В ответ пользователя Froa Написано 08 Декабря 2012 в 20:14
Сообщение № 3
Code
<div id="bot_panel" style="display:block"><script type="text/javascript" src="http://webo4ka.ru/Ucoz5/jquery-1.4.4.min_permechenie_blokov_cooki.js"></script>   
   <link rel="stylesheet" type="text/css" href="http://webo4ka.ru/Ucoz5/jdashboard_permechenie_blokov_cooki.txt" />   
   <style type="text/css">   
   #jDash {min-height:18px;;-moz-border-radius: 1px;border: 1px solid #bdbdbd;}   
   div.jdash-head-title span.sub-title {display: inline;margin: 0;font-size: 11px;color: #888888;}   
   </style>   
   <script type="text/javascript" src="http://webo4ka.ru/Ucoz5/jdashboard.min__permechenie_blokov_cooki.js"></script>   
   <script type="text/javascript">   
   $(function() {   
   $("#jDash").jDashboard({ columns: 3 });   
   });   
   </script>   

   <div id="jDash">   
   <div class="jdash-item">   
   <h1 class="jdash-head">Таблица 1</h1>   
   <div class="jdash-body">   
   Тут будет что-то   
   </div></div>   
   <div class="jdash-item">   
   <h1 class="jdash-head">Таблица 2</h1>   
   <div class="jdash-body">   
   Тут будет что-то   
   </div></div>   
   <div class="jdash-item">   
   <h1 class="jdash-head">Таблица 3</h1>   
   <div class="jdash-body">   
   Тут будет что-то   
   </div></div></div>   
   <br>
подпись: Люди не добавляйте репы ! Не портите номерок блатной ) Froa

kiidii
Пользователи
Сообщений 4
+
0
-
Ваши награды 0
kiidii написал: В ответ пользователя kiidii Написано 23 Февраля 2014 в 13:24
Сообщение № 4
А как это реализовать с этим ?
Код

<head>

<body style="background: url(http://aniname.clan.su/images/anywalls.com-31980.jpg) no-repeat center center fixed;">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>ANIname</title>
<link type="text/css" rel="StyleSheet" href="http://s44.ucoz.net/src/layer1.css" />
<script type="text/javascript" src="http://s44.ucoz.net/src/jquery-1.3.2.js"></script><script type="text/javascript" src="http://s44.ucoz.net/src/uwnd.js?2"></script><style type="text/css">.UhideBlock {display:none}</style>
</head>
<body>
<style>
body {
padding:0px;

}
#f_panel {
z-index:100;
background:#32323A;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
width:100%;
height:32px;
border-top:1px solid #465774;
position:fixed;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);
bottom:0px;
left:0px;
opacity:0.9;
}
#f_panel:hover {
opacity:1;
}
#POWERED-BY {
text-align:right;
float:right;
padding:6px;
}
#start {
float:left;
display:block;
background:url(images/start.png);
width:32px;
height:32px;
}
#start:hover {
background:url(images/start-hover.png);
}
#start-hover {
z-index:90;
position:fixed;
bottom:13px;
width:250px;
left:0px;
height:0px;
background:#fff;
opacity:0;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
background: #293f56;
background: -moz-linear-gradient(top, #293f56 0%, #101921 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#293f56), color-stop(100%,#101921));
background: -webkit-linear-gradient(top, #293f56 0%,#101921 100%);
background: -o-linear-gradient(top, #293f56 0%,#101921 100%);
background: -ms-linear-gradient(top, #293f56 0%,#101921 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#293f56', endColorstr='#101921',GradientType=0 );
background: linear-gradient(top, #293f56 0%,#101921 100%);
padding:5px;
}
.icon {
height:120px;
width:110px;
margin:10px;
float:left;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.18);
-webkit-box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.18);
}
.icon-head{
width:112px;
height:20px;
background: #585b65;
background: -moz-linear-gradient(top, #585b65 0%, #474a52 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#585b65), color-stop(100%,#474a52));
background: -webkit-linear-gradient(top, #585b65 0%,#474a52 100%);
background: -o-linear-gradient(top, #585b65 0%,#474a52 100%);
background: -ms-linear-gradient(top, #585b65 0%,#474a52 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#585b65', endColorstr='#474a52',GradientType=0 );
background: linear-gradient(top, #585b65 0%,#474a52 100%);
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.icon-bottom {
height:90px;
width:90px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 012px;
-moz-border-radius-bottomright: 12px;
-moz-border-radius-bottomleft: 012px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 012px;
font-size:15px;
color:ffffff;
text-align:center;
background: -moz-linear-gradient(top, rgba(255,255,255,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffff', endColorstr='#00000000',GradientType=0 );
background: linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);
padding:11px;
}
.icon-bottom:hover {
background: -moz-linear-gradient(top, rgba(255,255,255,0.65) 0%, rgba(0,0,0,0) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 80%);
background: -o-linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 80%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffff', endColorstr='#00000000',GradientType=0 );
background: linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 80%);
}
a.icon-bottom {
text-decoration:none;
color:ffffff;
font-weight:bold
}
a.icon-bottom:visited {
text-decoration:none;
color:ffffff;
}
a.icon-bottom:link {
text-decoration:none;
color:ffffff;
}
#content {
width:80%;
height:60%;
padding:20px;
margin:20% auto;
}
#content img {
border-radius:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
width:64px;
height:64px;
}
</style>

<div id="content">

  <a href="#" onclick="openchat();"><div class="icon">
<div class="icon-head"></div>
<div class="icon-bottom"><img src="http://aniname.clan.su/images/rabochij_stol/icon/chat.png"><br />Чат
</div>
</div>
  </a>

  <a href="#" onclick="openhtml();"><div class="icon">
<div class="icon-head"></div>
<div class="icon-bottom"><img src="http://aniname.clan.su/images/rabochij_stol/icon/HTML_Writer.png"><br />Html редактор
</div>
</div>
  </a>

  <a href="#" onclick="openps();"><div class="icon">
<div class="icon-head"></div>
<div class="icon-bottom"><img src="http://aniname.clan.su/images/rabochij_stol/icon/fotoshop.png"><br />Фотошоп
</div>
</div>
  </a>

  <a href="#" onclick="openqr();"><div class="icon">
<div class="icon-head"></div>
<div class="icon-bottom"><img src="http://aniname.clan.su/images/rabochij_stol/icon/qr.png"><br />QR генератор
</div>
</div>
  </a>

  <a href="javascript://" onclick="okno();" ><div class="icon">
<div class="icon-head"></div>
<div class="icon-bottom"><img src="http://aniname.clan.su/images/rabochij_stol/icon/personalizacija.png"><br />Персонализация
</div>
</div>
  </a>

  <a href="#" onclick="openrolka();"><div class="icon">
<div class="icon-head"></div>
<div class="icon-bottom"><img src="http://rolka.clan.su/favicon.ico"><br />Ролка
</div>
</div>
  </a>

  <a href="#" onclick="openya();"><div class="icon">
<div class="icon-head"></div>
<div class="icon-bottom"><img src="http://aniname.clan.su/images/rabochij_stol/icon/poisk.png"><br />Поиск
</div>
</div>
  </a>

  <a href="#" onclick="openphoto();"><div class="icon">
<div class="icon-head"></div>
<div class="icon-bottom"><img src="http://aniname.clan.su/images/rabochij_stol/icon/photo.png"><br />Фото
</div>
</div>
  </a>
</div>

<div id="f_panel"><div style="width:24px;float:right;height:32px;"></div>
<a href="#" id="start"></a>
<div id="POWERED-BY"> $POWERED_BY$</div>
</div>

<div id="start-hover">
  <div style="border-bottom:1px solid #465774;height:60px;width:100%;">
  <div style="float:left;">
<?if($USER_LOGGED_IN$)?>
<a href="$PERSONAL_PAGE_LINK$"><span style="color: rgb(0, 191, 255);">$USER_FULL_NAME$</span></a><br />
<a href="$USERS_LIST_URL$"><span style="color: rgb(0, 191, 255);">$USER_GROUP$</span></a>
<?else?>
<div class="h_prof_n"><a href="$LOGIN_LINK$"><span style="color: rgb(0, 191, 255);">Авторизация</span></a></div>
<div class="h_prof_n"><a href="$REGISTER_LINK$"><span style="color: rgb(0, 191, 255);">Регистрация</span></a></div>
<?endif?>
  </div>
  <div style="float:right;">
  <div style="border:3px solid #fff;border-radius:5px;">
<img style="border-radius:5px;" src="$USER_AVATAR_URL$" height="50" />
</div>
  </div>
  </div>
<br>
Контент
  </div>

<script type="text/javascript">  
$(document).ready(function(){
  $("#start").toggle(
  function(){
  $("#start-hover").animate({height: "+300",opacity:"0.8"}, 1200)
  return false;},
function(){
  $("#start-hover").animate({height: "-300",opacity:"0"}, 1200)
  return false;
  });
});
</script>

</body>


Вот сайт:

FalleN
Пользователи
Сообщений 51
+
+13
-
Ваши награды 2
FalleN написал: В ответ пользователя FalleN Написано 26 Февраля 2014 в 16:04
Сообщение № 5
Ты извини конечно, но за тебя всю работу тут не будут выполнять! Все что тут могут, это направить в нужное русло и дать готовый скрипт в дорогу!
А из твоего ответа "А как это реализовать с этим?" я могу сказать одно, учи HTML и СSS, а затем и js c jquery.

kiidii
Пользователи
Сообщений 4
+
0
-
Ваши награды 0
kiidii написал: В ответ пользователя kiidii Написано 26 Февраля 2014 в 21:55
Сообщение № 6
Цитата ;]undefined[/quote

Простите:(
Больше так не буду
Форум » Форум веб мастеров » jQuery & JavaScript » Запоминание положения окон.
Страница 1 из 11
Поиск:
Топ пользователей: