1 Тема від poperechnyi1

  • Дата реєстрації: 03.10.2016
  • Повідомлень: 63
    • Репутація: 21

Тема: як створити стрілочку

Доброго вечора понове.
ПРошу вашої допомоги.
Як зробити такий елемент:
І як зробити так, щоб стрілочка змінювалась при натисканні.
Є такий код по формленню цієї срілочки:

.question-section8{
  display: block;
  margin-bottom:25px; 
  color: #000;
  width: 100%;
}

.question-section8:after{
  content: " "; 
  margin-top: 2px;
  text-align: center;  
  color: #fff;  
  background: url("../img/Medical-Ukraine-Dentistry_0016_icon.png") no-repeat;  
  float: left;  
  position: relative;
  width: 7px;
  height: 14px;
}

Але проблема в тому, що стрілочка одразу прибивається в право із-за float:right. Як зробити так, щоб виглядало як на малюнку. Фіксована ширина не підходить так-як посилання мають різну кількість символів.
Суть у тому що спливає текст, що є скритим.
У мене є скрипт, що показує скриті елементи

function look(t){
     p=document.getElementById(t);
     l=document.getElementById("a-"+t);
    if(p.style.display=="none"){
        l.innerHTML="Cкрыть";        
        p.style.display="block";}
    else{
        l.innerHTML="Подробнее";
        p.style.display="none";}
    }
Post's attachments

Без-имени-1.png 2.29 kb, 224 downloads since 2016-12-22 

Подякували: 221VOLT1

2 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 616
    • Репутація: 13326

Re: як створити стрілочку

poperechnyi1 написав:

Але проблема в тому, що стрілочка одразу прибивається в право із-за float:right.

"Вправо" в одне слово і "через", а не "із-за".
Я не бачу у вашому коді float:right. Ви точно нічого не наплутали? Чи вам телепати потрібні, які зрозуміють без коду, де там той float:right? І де HTML? Викладіть посилання на сайт чи на jsfiddle з відповідним кодом.

Подякували: 221VOLT1

koala вебсайт

3 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: як створити стрілочку

Хм...Можливо щось наплутаю(просто вже очі зліпаються, йшов спати).
Загалом:
1. Можна зробити через якийсь шрифт. Наприклад, Font Awesome. Є там http://fontawesome.io/icon/caret-right/, раптом підійде. В принципі його можна просто поставити після потрібного тексту і за бажанням додати відступи, колір, розмір тощо. Як на мене - це найпростіший варіант.
2. Почитайте оцю статтю: http://htmlbook.ru/blog/treugolniki-cherez-css. Просто почитайте, розберіться і підлаштуйте для себе.

Якщо що, то пишіть. З задоволенням допоможу  *DRINK*

Подякували: 221VOLT, poperechnyi12

4 Відповідь від 221VOLT Востаннє редагувалося 221VOLT (23.12.2016 00:48:27)

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

Re: як створити стрілочку

Викладіть посилання на сайт чи на jsfiddle з відповідним кодом.

+1

проблема вирішується достатньо швидко,
при чому існує більше двох способів вирішення,
проте потрібен живий приклад, який можна відредагувати

Подякували: Monolith, koala2

221VOLT вебсайт

5 Відповідь від poperechnyi1 Востаннє редагувалося poperechnyi1 (23.12.2016 18:56:33)

  • Дата реєстрації: 03.10.2016
  • Повідомлень: 63
    • Репутація: 21

Re: як створити стрілочку

Коротше кажучи.
1. Стрілочку я зробив одразу, але вона прилипала в правий край. І дпотім я здогадався змінити одне поле
з  position: relative; на position: absolute; і все стало виглядати як на картинці.

.question-section8:after{
  content: " "; 
  margin-top: 2px;
  text-align: center;  
  color: #fff;  
  background: url("../img/Medical-Ukraine-Dentistry_0016_icon.png") no-repeat;  
  float: right;  
  position: absolute;
  width: 7px;
  height: 14px;
}

.question-section8-active:after{
  content: " "; 
  margin-top: 2px;
  text-align: center;  
  color: #fff;  
  background: url("../img/Medical-Ukraine-Dentistry_0031_icon.png") no-repeat; 
  float: right;  
  position: absolute;
  width: 14px;
  height: 7px;
}
Подякували: Monolith, 221VOLT2

6 Відповідь від poperechnyi1

  • Дата реєстрації: 03.10.2016
  • Повідомлень: 63
    • Репутація: 21

Re: як створити стрілочку

Ось скрипт, щоб стрілочка змінювалась при натисканні

$('.question-section8').click(function(){
        var id_elm = $(this).attr('data-id');
        if($(this).hasClass('question-section8-active')){
            
            $(this).removeClass('question-section8-active');
            $("#"+id_elm).removeClass('answer1-active');
            
        }else{
            $(this).addClass('question-section8-active');
            $("#"+id_elm).addClass('answer1-active');
            

        }
    });
Подякували: Monolith1

7 Відповідь від poperechnyi1

  • Дата реєстрації: 03.10.2016
  • Повідомлень: 63
    • Репутація: 21

Re: як створити стрілочку

misha_bondar_2012 написав:

Хм...Можливо щось наплутаю(просто вже очі зліпаються, йшов спати).
Загалом:
1. Можна зробити через якийсь шрифт. Наприклад, Font Awesome. Є там http://fontawesome.io/icon/caret-right/, раптом підійде. В принципі його можна просто поставити після потрібного тексту і за бажанням додати відступи, колір, розмір тощо. Як на мене - це найпростіший варіант.
2. Почитайте оцю статтю: http://htmlbook.ru/blog/treugolniki-cherez-css. Просто почитайте, розберіться і підлаштуйте для себе.

Якщо що, то пишіть. З задоволенням допоможу  *DRINK*

Дякую за статті, допомогли розібратись.

Подякували: Monolith1

8 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 616
    • Репутація: 13326

Re: як створити стрілочку

А чи не простіше зробити так:

CSS:
.answer1{...}
.answer1 .active{...}
.question-section8:after{...}
.question-section8 .active:after{...}

JavaScript:
$('.question-section8').click(function(){
        var id_elm = $(this).attr('data-id');
        if(id_elm) {
                $(this).toggleClass('active');
                $("#"+id_elm).toggleClass('active');
        }
});

А ще можна додати їм якусь спільну позначку, на кшталт тієї ж data-id, і робити
$("[data_id='"+id_elm+"']").toggleClass(active);
щоб вони мінялися одночасно.

Подякували: 221VOLT1

koala вебсайт

9 Відповідь від 221VOLT Востаннє редагувалося 221VOLT (24.12.2016 05:52:42)

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

Re: як створити стрілочку

а хто зробить чисто на css, без використання js чи (ой фу фу) jQuery?

залишились ще козаки, залишились ще джедаї?

*задумався де положив свою шаблю свій джедайський меч свій подібний приклад, вирішуваний і вирішений з рік назад (здається я тоді просто додав ще один тег в html, і трошки css збільшилось, щоб не теребонькати js)

221VOLT вебсайт

10 Відповідь від koala Востаннє редагувалося koala (24.12.2016 08:34:11)

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 616
    • Репутація: 13326

Re: як створити стрілочку

Не бачу HTML. А без нього важко.
От якби знати, що щось там вкладене чи поруч, то просто ставимо checkbox з відповідним оформленням і вперед...

Подякували: 221VOLT1

koala вебсайт

11 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: як створити стрілочку

не розумію для чого клік... але то таке

зробив 3 способами тримай

http://codepen.io/anon/pen/MbdJZV

Подякували: 221VOLT1

12 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 616
    • Репутація: 13326

Re: як створити стрілочку

Key написав:

не розумію для чого клік... але то таке

зробив 3 способами тримай

http://codepen.io/anon/pen/MbdJZV

Йому треба спойлер зробити, і невідомо, де знаходиться текст спойлера.

Подякували: 221VOLT1

koala вебсайт

13 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: як створити стрілочку

koala написав:
Key написав:

не розумію для чого клік... але то таке

зробив 3 способами тримай

http://codepen.io/anon/pen/MbdJZV

Йому треба спойлер зробити, і невідомо, де знаходиться текст спойлера.


тоді checkbox не дуже добра ідея, погана підтримка браузерами...
хоча в майбутньому має право на життя

14 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: як створити стрілочку

Можливо я просто не зрозумів задачі...
Просто при наведенні збільшувати відступ стрілочці. Чи ні?

Подякували: 221VOLT1

15 Відповідь від 221VOLT

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

Re: як створити стрілочку

Key написав:

тоді checkbox не дуже добра ідея, погана підтримка браузерами...
хоча в майбутньому має право на життя

чому це не дуже добра ідея?
як один з робочих варіантів

misha_bondar_2012 написав:

Можливо я просто не зрозумів задачі...
Просто при наведенні збільшувати відступ стрілочці. Чи ні?

здається ще колір поміняти + джаваскриптом щось показати чи приховати?

чи мо я також не зрозумів нічого *DONT_KNOW*

221VOLT вебсайт

16 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: як створити стрілочку

Key написав:
koala написав:
Key написав:

не розумію для чого клік... але то таке

зробив 3 способами тримай

http://codepen.io/anon/pen/MbdJZV

Йому треба спойлер зробити, і невідомо, де знаходиться текст спойлера.


тоді checkbox не дуже добра ідея, погана підтримка браузерами...
хоча в майбутньому має право на життя

Як на мене ідея нормальна. Але прошу автора нормально вказати питання. Якщо йому треба поміняти колір/відступ у елементу - це робиться за допомогою чистого CSS буквально у кілька рядків.

Подякували: 221VOLT1