Сделать появляющийся комментарий

Тема в разделе "JavaScript", создана пользователем maxi2013, 22 апр 2013.

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

    maxi2013

    Регистр.:
    9 янв 2013
    Сообщения:
    497
    Симпатии:
    207
    Подскажите как на странице оформления заказа стандартный комментарий сделать так, чтобы при нажатии на "Добавить комментарий к заказу" появлялось поле для ввода комента и при этом текст менялся на "Скрыть комментарий к заказу " при нажатии на который поле исчезало и вновь появлялся текст "Добавить комментарий к заказу".
    Может както через яваскрипт или CSS. Подскажите. фывуцйчсм.JPG
    под вот этот код
    Код:
    <?php // Leave A Comment Field ?>
            <div class="customer-comment marginbottom15">
         
            <a h class="comment" >
            <?php echo JText::_ ('COM_VIRTUEMART_COMMENT_CART'); ?>
            </a>
             
                <br/>
                <div style="display:none" >
                <textarea class="customer-comment" name="customer_comment" cols="60" rows="1"><?php echo $this->cart->customer_comment; ?></textarea>
            </div>
            </div>
            <?php // Leave A Comment Field END ?>
     
    r0m41k нравится это.
  2. ne4to

    ne4to Постоялец

    Регистр.:
    16 ноя 2012
    Сообщения:
    107
    Симпатии:
    50
    диву в котором текстареа присвой id="divcomm"
    Код:
    $('a.comment').click(function(){
      if ($("#divcomm").is(":visible"))
        $("#divcomm").hide();
      else
        $("#divcomm").show();
    });
    
     
    r0m41k нравится это.
  3. zardoz

    zardoz Постоялец

    Регистр.:
    6 май 2008
    Сообщения:
    84
    Симпатии:
    60
    Что то подобное можно сделать без задействования js, используя только css
    HTML:
    <style>
    #comment{
        display: none;
    }
     
    #comment + div{
        display: none;
    }
     
    #comment:checked + div{
        display: block;
    }
     
    </style>
    <body>
     
    <label for="comment">Комментарий к заказу</label>
    <input type="checkbox" id="comment">
    <div><textarea></textarea></div>
     
    </body>
    
     
    r0m41k нравится это.
  4. nethare

    nethare Постоялец

    Регистр.:
    27 окт 2012
    Сообщения:
    104
    Симпатии:
    30
    Клик на CSS не повесишь:( Хотя можно извратиться и сделать так, как написано Перейти по ссылке. Но, ИМХО, огород такой городить не стоит.

    ТСу:

    HTML:
    <div class="customer-comment marginbottom15">
       
            <a class="comment" id='a_comment_label' >
            <span id='span_comment_label'><?php echo JText::_ ('COM_VIRTUEMART_COMMENT_CART'); ?></span>
            </a>
           
                <br/>
            <div style="display:none" id='div_commment_text' >
                <textarea class="customer-comment" name="customer_comment" cols="60" rows="3">
               
                    <?php if ($this->cart->customer_comment) echo $this->cart->customer_comment; ?>
               
                </textarea>
            </div>
    </div>
     
    <script>
        $(document).ready(function(){
            $('a#a_comment_label').click(function(){
                    if ($("div#div_commment_text").is(":visible"))
                            $("div#div_commment_text").hide();
                            $("span#span_comment_label").text("<?php echo JText::_ ('COM_VIRTUEMART_COMMENT_CART'); ?>");
                    else
                            $("div#div_commment_text").show();
                            $("span#span_comment_label").text("Скрыть комментарий к заказу");
                });
       
        });
    </script>
    2 ne4to: $("a.comment") вернет массив элементов. Элементов определенного класса может быть несколько, а нам нужна конкретная.

    P.S. span всунул для наглядности:)
     
    r0m41k и maxi2013 нравится это.
  5. maxi2013

    maxi2013

    Регистр.:
    9 янв 2013
    Сообщения:
    497
    Симпатии:
    207
    К сожалению ни одна из версий не работает почемуто. Нажимаю и ничего не происходит.
    Получилась только лишь такая связка

    PHP:
    <script type="text/javascript">
    function 
    otkr(){
    var 
    text=document.getElementById('text');
    if(
    text.style.display=='none')
    {
    text.style.display='block';
    }
    else
    {
    text.style.display='none';
    }
    }
    </script>
    PHP:
    <?php // Leave A Comment Field ?>
            <div class="customer-comment marginbottom15">
         
            <a href="#" class="comment" onclick="otkr()">
            <?php echo JText::('COM_VIRTUEMART_COMMENT_CART'); ?>
            </a>
             
                <br/>
                <div id="text" style="display:none" >
                <textarea class="customer-comment" name="customer_comment" cols="60" rows="1"><?php echo $this->cart->customer_comment?></textarea>
            </div>
            </div>
            <?php // Leave A Comment Field END ?>
    Но минус в том, что когда открывает то перекидыает в самый верх страницы и при закрытии тоже. Тоесть я нажимаю добавить комент. меня кидат в самый верх страницы, потом мне нужно роликом мышки прокрутиться в самый низ до поля ввода коментов. вобщем както плоховато. неужели нельзя чтобы страница оставалась на месте. Нажал "Добавить комент" сразу появилось поле. потом нажал "Скрыть комент" оно скрыло. И страницу не сдвигало все время вверх.
     
    r0m41k нравится это.
  6. lolfika

    lolfika Постоялец

    Заблокирован
    Регистр.:
    18 окт 2011
    Сообщения:
    43
    Симпатии:
    0
    а можно сделать так чтоб с перво начиналось обротный отчет а потом откривалось окно???
     
  7. maxi2013

    maxi2013

    Регистр.:
    9 янв 2013
    Сообщения:
    497
    Симпатии:
    207
    Подскажите как подправить код, чтобы после нажатия на "Добавить комментарий к заказу" этот текст менялся на "Скрыть комментарий "
    PHP:
    <script type="text/javascript">
    function otkr(){
     
    if(comentar.style.display=='none')
    {
    comentar.show();
    }
    else
    {
    comentar.hide();
    }
    }
    </script>
     
     
     
            <?php // Leave A Comment Field ?>
            <div class="customer-comment marginbottom15">
     
            <a  class="comment" style="cursor: pointer;" onclick="otkr()">
                      Добавить комментарий к заказу
            </a>
       
                <br/>
                <div id="comentar" style="display:none" >
                <textarea class="customer-comment" name="customer_comment" cols="60" rows="5"><?php echo $this->cart->customer_comment?></textarea>
            </div>
            </div>
            <?php // Leave A Comment Field END ?>
     
    r0m41k нравится это.
  8. COLOBOCman

    COLOBOCman Постоялец

    Регистр.:
    26 апр 2013
    Сообщения:
    122
    Симпатии:
    30
    не проверял, но вроде так:
    Код:
    <script type="text/javascript">
    function otkr(){
     
    if(comentar.style.display=='none')
    {
    comentar.show();
    document.getElementById('toggle_comment').innerHTML = 'Убрать коментарий';
    }
    else
    {
    comentar.hide();
    }
    }
    </script>
     
     
     
            <?php // Leave A Comment Field ?>
            <div class="customer-comment marginbottom15">
     
            <a  id="toggle_comment" class="comment" style="cursor: pointer;" onclick="otkr()">
                      Добавить комментарий к заказу
            </a>
       
                <br/>
                <div id="comentar" style="display:none" >
                <textarea class="customer-comment" name="customer_comment" cols="60" rows="5"><?php echo $this->cart->customer_comment; ?></textarea>
            </div>
            </div>
            <?php // Leave A Comment Field END ?>
    
     
    r0m41k и maxi2013 нравится это.
  9. etosh

    etosh Создатель

    Регистр.:
    22 июл 2013
    Сообщения:
    32
    Симпатии:
    4
    Так ты повесь return false на обработчик клика. Всё ок будет. Сейчас он по # прыгает.
    Код:
    <a href="#" class="comment" onclick="otkr(); return false;">
     
    r0m41k и maxi2013 нравится это.