вопрос по jquery

Тема в разделе "JavaScript", создана пользователем Chij25, 3 ноя 2012.

Модераторы: ZiX
  1. Chij25

    Chij25

    Регистр.:
    9 апр 2009
    Сообщения:
    272
    Симпатии:
    27
    вопрос в следующем
    на странице есть меню из трех разделов одежда обувь аксессуары
    далее идет контент из например 10 товаров одежды, потом 10 товаров обуви, потом 10 товаров аксессуаров.
    Как сделать так что бы при клике на обувь автоматом страница прокручивалась и останавливалась на начале товара с обувью, а при клике на аксессуары на товаре с аксессуарами.
     
  2. begemot3

    begemot3 Постоялец

    Регистр.:
    18 янв 2009
    Сообщения:
    52
    Симпатии:
    13
    Используй аттрибут name у ссылки в начале раздела (в том месте куда прокручивать)
    <a name="obuv"> Обувь </a>
    и укажи в ссылке на которую кликаешь как я корь <a href="#obuv">Перейти к обуви</a>

    Вот нашел работающий пример чтобы посмотреть как это работает:
    http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_a_name
     
  3. ordoss

    ordoss Писатель

    Регистр.:
    24 июл 2012
    Сообщения:
    2
    Симпатии:
    0
    это вроде как html-якорями называется
     
  4. dazed

    dazed

    Регистр.:
    31 мар 2007
    Сообщения:
    208
    Симпатии:
    55
    Да это называется якорь-ссылка.
    Можно делать и через нее, но выглядит не очень красиво, т.к. происходит моментальное перемещение, пользователь может и не понять что он остался на этой странице.
    Рекомендую использовать ScrollTo с ним происходит плавное перемещение, что более красивее смотрится и часто используется в модных дизайнах.
     
    Extalionez нравится это.
  5. Dimik

    Dimik Создатель

    Регистр.:
    18 сен 2011
    Сообщения:
    21
    Симпатии:
    0
    Вот ещё накопал примерчик плавного скроллинга к якорю
    Вот файлик 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>

     
  6. inkvizitor

    inkvizitor Создатель

    Регистр.:
    27 фев 2008
    Сообщения:
    39
    Симпатии:
    0
    (Прав создавать новые темы нет, поэтому нашел более подходящую тему для своего вопроса :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" ?
     
  7. Alex.Volk

    Alex.Volk Охотник

    Регистр.:
    16 мар 2012
    Сообщения:
    371
    Симпатии:
    1.023
    Вам придется изменять php код. В целом и сам jquery код тоже. :nezn:
     
  8. inkvizitor

    inkvizitor Создатель

    Регистр.:
    27 фев 2008
    Сообщения:
    39
    Симпатии:
    0
    Жаль, но моих знаний на jquery не достаточно, придется реализовывать на простых input`ах :(
     
  9. recasher2k12

    recasher2k12

    Регистр.:
    19 фев 2012
    Сообщения:
    156
    Симпатии:
    78
    Прикрепи файл scripts/uploadify.php к сообщению, код javascript менять необязательно.
     
  10. inkvizitor

    inkvizitor Создатель

    Регистр.:
    27 фев 2008
    Сообщения:
    39
    Симпатии:
    0
    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.';
        }
    }
    ?>