Использовать идеальный плагин полосы прокрутки в textArea

Здравствуйте, друзья, я хочу использовать идеальную полосу прокрутки в текстовом поле в Angular, пожалуйста, помогите мне.

<div>
                <textarea class = "form-control textarea-box comment-box" maxlength = "1000" [formControl] = "form.controls['comment']" ></textarea>
                </div>
                <span class = "maxTxt"><strong>Note:</strong> {{showMessage}}</span>

jquery

22.05.2018 05:26

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

815

Ответы 4

Вы можете настроить таргетинг только на h2, которые являются прямыми потомками #faqs, тем самым исключив те, которые являются потомками aside, с #faqs > h2:

(Я заменил стили .plus и .minus на background-color, чтобы изменения были видны здесь, на SO)

$("#faqs > h2").addClass('plus');
$("div").addClass('close');
$("#faqs > h2").click(function() {
  $(this).toggleClass('minus');
}); // end click
$("div").click(function() {
  $(this).toggleClass('open');
}); // end click

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  margin: 20px;
  padding: 10px;
}

section {
  padding: 15px 25px;
  width: 650px;
  margin-top: 20px;
  margin-left: 25px;
}

h1 {
  font-size: 150%;
}

h2 {
  font-size: 120%;
  padding: .25em 0 .25em 25px;
  cursor: pointer;
}


/* classes that you will use */

.plus {
  background-color: yellow
}

.minus {
  background-color: red
}

.close {
  display: none;
}

.open {
  display: block;
}

ul {
  padding-left: 45px;
}

li {
  padding-bottom: .25em;
}

p {
  padding-bottom: .25em;
  padding-left: 25px;
}

aside {
  margin-top: 50px;
}

aside h2,
header h2 {
  cursor: auto;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id = "faqs">

  <h2>What is jQuery?</h2>
  <div>
    <p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop web sites.
    </p>
  </div>

  <h2>Why is jQuery becoming so popular?</h2>
  <div>
    <p>Three reasons:</p>
    <ul>
      <li>It's free.</li>
      <li>It lets you get more done in less time.</li>
      <li>All of its functions are cross-browser compatible.</li>
    </ul>
  </div>

  <h2>Which is harder to learn: jQuery or JavaScript?</h2>
  <div>
    <p>For most functions, jQuery is significantly easier to learn and use than JavaScript. But remember that jQuery is JavaScript.
    </p>
  </div>

  <aside>
    <h2>Resources:</h2>
    <div>
      <p>jQuery Website - <a href = "http://jquery.com" target = "_blank">http://jquery.com</a>
      </p>
    </div>
  </aside>
</section>

</body>

</html>

22.05.2018 05:29

Просто найдите элемент H2 внутри #faqs с помощью find(). И для события click привязать событие щелчка к дочернему элементу H2#faqs с $("#faqs").on("click", "h2",function(){ });

$(document).ready(function(){
$("#faqs").find("h2").addClass('plus');
$("#faqs").find("div").addClass('close');
$("#faqs").on("click", "h2", function(){
    $(this).toggleClass('minus');
    }); // end click
    $("div").click(function(){
   $(this).toggleClass('open');
}); // end click


}); //end ready;

* {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        margin: 20px;
        padding: 10px;
    }

    section {
        padding: 15px 25px;
        width: 650px;
        margin-top: 20px;
        margin-left: 25px;
    }

    h1 {
        font-size: 150%;
    }


    h2 {
        font-size: 120%;
        padding: .25em 0 .25em 25px;
        cursor: pointer;
    }


    /* classes that you will use */

    .plus {
        background: url(plus.png) no-repeat left center;
        background-color: lightblue;
    }

    .minus {
        background: url(minus.png) no-repeat left center;
        background-color: yellow;
    }

    .close {
        display: none;
    }

    .open {
        display: block;
    }

    ul {
        padding-left: 45px;
    }

    li {
        padding-bottom: .25em;
    }

    p {
        padding-bottom: .25em;
        padding-left: 25px;
    }

    aside {
        margin-top: 50px;
    }

    aside h2, header h2{
        cursor: auto;
    }

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>jQuery FAQs</h1>
  <h2>Frequently Asked Questions</h2>
</header>

<section id = "faqs">

    <h2>What is jQuery?</h2>
    <div>
        <p>jQuery is a library of the JavaScript functions that you're most 
         likely to need as you develop web sites.
        </p>
    </div>

    <h2>Why is jQuery becoming so popular?</h2>
    <div>
        <p>Three reasons:</p>
        <ul>
            <li>It's free.</li>
            <li>It lets you get more done in less time.</li>
            <li>All of its functions are cross-browser compatible.</li>
        </ul>
    </div>

    <h2>Which is harder to learn: jQuery or JavaScript?</h2>
    <div>
        <p>For most functions, jQuery is significantly easier to learn and 
            use than JavaScript. But remember that jQuery is JavaScript.
        </p>
    </div>

    <aside>
      <h2>Resources:</h2>
        <div>
            <p>jQuery Website - <a href = "http://jquery.com" 
             target = "_blank">http://jquery.com</a>
            </p>
          </div>
           </aside>
         </section>

22.05.2018 05:44

Использовать document.querySelectorAll("#faqs >h2");. При этом будет получен элемент, чей id является часто задаваемым вопросом, и будет выбран непосредственный дочерний элемент h2.

var l = document.querySelectorAll("#faqs >h2");
// just for testing
l.forEach(function(item) {
  item.classList.add("test")
})

.test {
  color: green;
}

<header>
  <h1>jQuery FAQs</h1>
  <h2>Frequently Asked Questions</h2>
</header>

<section id = "faqs">

  <h2>What is jQuery?</h2>
  <div>
    <p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop web sites.
    </p>
  </div>

  <h2>Why is jQuery becoming so popular?</h2>
  <div>
    <p>Three reasons:</p>
    <ul>
      <li>It's free.</li>
      <li>It lets you get more done in less time.</li>
      <li>All of its functions are cross-browser compatible.</li>
    </ul>
  </div>

  <h2>Which is harder to learn: jQuery or JavaScript?</h2>
  <div>
    <p>For most functions, jQuery is significantly easier to learn and use than JavaScript. But remember that jQuery is JavaScript.
    </p>
  </div>

  <aside>
    <h2>Resources:</h2>
    <div>
      <p>jQuery Website - <a href = "http://jquery.com" target = "_blank">http://jquery.com</a>
      </p>
    </div>
  </aside>
</section>

22.05.2018 05:45

Я упростил HTML следующим образом:

<section id = "faqs">
  <h2>
  Header 1
  </h2>
  <div>
    <p>
      Paragraph 1
    </p>
  </div>
  <h2>
  Heading 2
  </h2>
  <div>
    <p>
    Paragraph 2
    </p>
  </div>
  <aside>
    <h2>
    Heading 3
    </h2>
    <div>
      <p>
      Paragraph 3
      </p>
    </div>
  </aside>
</section>

Я сделал класс в css следующим образом, чтобы стало понятно, какой h2 выбран, когда:

.bg-color{
  background-color:yellow;
}

И я использовал следующий jquery для выбора другого h2 в данном HTML:

let heading1 = $("section#faqs > h2:first-child");
heading1.addClass("bg-color");
alert(heading1.text());
let heading2 = $("section#faqs div").next("h2");
heading2.addClass("bg-color");
alert(heading2.text());
let heading3 = $("section#faqs aside h2");
heading3.addClass("bg-color");
alert(heading3.text());

Вот рабочий пример, отображающая результат:

https://jsfiddle.net/thisisdg/dzer6nv9/1/

Надеюсь, это поможет.

22.05.2018 06:07