вопрос по jquery

C

Chij25

Знаток
Регистрация
9 Апр 2009
Сообщения
280
Реакции
28
вопрос в следующем
на странице есть меню из трех разделов одежда обувь аксессуары
далее идет контент из например 10 товаров одежды, потом 10 товаров обуви, потом 10 товаров аксессуаров.
Как сделать так что бы при клике на обувь автоматом страница прокручивалась и останавливалась на начале товара с обувью, а при клике на аксессуары на товаре с аксессуарами.
 
Используй аттрибут name у ссылки в начале раздела (в том месте куда прокручивать)
<a name="obuv"> Обувь </a>
и укажи в ссылке на которую кликаешь как я корь <a href="#obuv">Перейти к обуви</a>

Вот нашел работающий пример чтобы посмотреть как это работает:
Для просмотра ссылки Войди или Зарегистрируйся
 
это вроде как html-якорями называется
 
Да это называется якорь-ссылка.
Можно делать и через нее, но выглядит не очень красиво, т.к. происходит моментальное перемещение, пользователь может и не понять что он остался на этой странице.
Рекомендую использовать Для просмотра ссылки Войди или Зарегистрируйсяс ним происходит плавное перемещение, что более красивее смотрится и часто используется в модных дизайнах.
 
Вот ещё накопал примерчик плавного скроллинга к якорю
Вот файлик AnchorScroller.js
Код: 
function anchorScroller(el, duration) {
if (this.criticalSection) {
return false;
}
 
if ((typeof el != 'object') || (typeof el.href != 'string'))
return true;
 
var address = el.href.split('#');
if (address.length < 2)
return true;
 
address = address[address.length-1];
el = 0;
 
for (var i=0; i<document.anchors.length; i++) {
if (document.anchors[i].name == address) {
el = document.anchors[i];
break;
}
}
if (el === 0)
return true;
 
this.stopX = 0;
this.stopY = 0;
do {
this.stopX += el.offsetLeft;
this.stopY += el.offsetTop;
} while (el = el.offsetParent);
 
this.startX = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
this.startY = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
 
this. stopX = this.stopX - this.startX;
this.stopY = this.stopY - this.startY;
 
if ( (this.stopX == 0) && (this.stopY == 0) )
return false;
 
this.criticalSection = true;
if (typeof duration == 'undefined')
this.duration = 500;
else
this.duration = duration;
 
var date = new Date();
this.start = date.getTime();
this.timer = setInterval(function () {
var date = new Date();
var X = (date.getTime() - this.start) / this.duration;
if (X > 1)
X = 1;
var Y = ((-Math.cos(X*Math.PI)/2) + 0.5);
 
cX = Math.round(this.startX + this.stopX*Y);
cY = Math.round(this.startY + this.stopY*Y);
 
document.documentElement.scrollLeft = cX;
document.documentElement.scrollTop = cY;
document.body.scrollLeft = cX;
document.body.scrollTop = cY;
 
if (X == 1) {
clearInterval( this.timer);
this.criticalSection = false;
}
}, 10);
return false;
}

А вот собственно сам код странички с якорем

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
 
<head>
 
<title>AnchorScroller</title>
 
<script type="text/javascript" src="AnchorScroller.js"></script>    <em><strong><!--  ПОДКЛЮЧЕНИЕ AnchorScroller --></strong></em>
 
< /head>
 
<body>
<a href="#link" onclick="return anchorScroller(this)">Ссылка</a>  <em><strong><!-- ССЫЛКА НА ЯКОРЬ --></strong></em>
 
<div style="height:1000px;background-color:green;"></div>  <strong><em><!--БЛОК для увеличения отступа от ссылки до якоря (для демонстрации)--></em></strong>
 
<a name="link"></a> <em><strong><!--САМ ЯКОРЬ--></strong></em>
 
<div>
Содержимое для просмотра
</div>
 
</body>
</html>


 
(Прав создавать новые темы нет, поэтому нашел более подходящую тему для своего вопроса :nezn: )
Народ выручайте, скачал я "Uploadify" с ruseller.ком. Суть скрипта, загрузка файлов в папку на jquery.
в директории есть папка uploads, в нее грузятся все картинки. Но надо сделать, чтобы грузилось в папку uploads/date(Y-m-d)/
вот кусочек кода
PHP: 
$(document).ready(function() {
    $("#uploadify").uploadify({
        'uploader'      : 'scripts/uploadify.swf',
        'script'        : 'scripts/uploadify.php',
        'cancelImg'      : 'scripts/cancel.png',
        'folder'        : 'uploads',
Как приписать к 'uploads' новую папку с функцией год-месяц-число на jquery, чтобы было например "uploads/2013-01-06/картинка.png" ?
 
inkvizitor написал(а):
(Прав создавать новые темы нет, поэтому нашел более подходящую тему для своего вопроса :nezn: )
Народ выручайте, скачал я "Uploadify" с ruseller.ком. Суть скрипта, загрузка файлов в папку на jquery.
в директории есть папка uploads, в нее грузятся все картинки. Но надо сделать, чтобы грузилось в папку uploads/date(Y-m-d)/
вот кусочек кода
Нажмите для раскрытия...
Вам придется изменять php код. В целом и сам jquery код тоже. :nezn:
 
recasher2k12 написал(а):
Прикрепи файл scripts/uploadify.php к сообщению, код javascript менять необязательно.
Нажмите для раскрытия...

PHP: 
<?
$targetFolder = '/uploads'; // Relative to the root
 
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
 
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
 
    // Validate the file type
    $fileTypes = array('jpg','jpeg','gif','png'); // File extensions
    $fileParts = pathinfo($_FILES['Filedata']['name']);
 
    if (in_array($fileParts['extension'],$fileTypes)) {
        move_uploaded_file($tempFile,$targetFile);
        echo '1';
    } else {
        echo 'Invalid file type.';
    }
}
?>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху