Javascript-форум - Кнопки для спичка select

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Кнопки для спичка select (https://javascript.ru/forum/events/60553-knopki-dlya-spichka-select.html)

Alastor

06.01.2016 15:15

Кнопки для спичка select

вот есть такой код как заставить эти кнопки переключать серии без раскрытия списка

<div id="cplayer1" style="display:block;"><iframe name='film_cinemas' id='film_cinemas' src='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3' width='307' height='260' frameborder='0'></iframe>
            <div class='vk_select'><button class="previous">&#8592</button><select size='1' onchange="javascript:if(document.getElementById('film_cinemas')) document.getElementById('film_cinemas').src=this.value;">
<option value='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3'>1 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959836&hash=b095322a1122a202&hd=3">2 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959838&hash=947cc72f8178eb3a&hd=3">3 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959840&hash=c00fa8b2df9ead45&hd=3">4 серия</option></select>

<button class="next">&#8594</button>
</div></div>

Alastor

06.01.2016 15:22

извините за название не могу найти как его поменять(((

рони	06.01.2016 15:43

Alastor,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div id="cplayer1" style="display:block;"><iframe name='film_cinemas' id='film_cinemas' src='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3' width='307' height='260' frameborder='0'></iframe>
            <div class='vk_select'><button class="previous">&#8592</button><select size='1' onchange="javascript:if(document.getElementById('film_cinemas')) document.getElementById('film_cinemas').src=this.value;">
<option value='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3'>1 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959836&hash=b095322a1122a202&hd=3">2 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959838&hash=947cc72f8178eb3a&hd=3">3 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959840&hash=c00fa8b2df9ead45&hd=3">4 серия</option></select>

<button class="next">&#8594</button>
</div></div>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var d = document.querySelector("#cplayer1"),
    s = d.querySelector("select");
    d.addEventListener("click", function(b) {
     var a = b.target, i = s.selectedIndex;
     if(a.classList.contains("previous")) i-- ;
     else if(a.classList.contains("next")) i++  ;
     else return;
     if(i < 0) i = s.options.length - 1;
     i %= s.options.length;
     s.selectedIndex = i;
     s.onchange()
    })
});
</script>
</body>

</html>

Alastor

06.01.2016 15:47

рони,
Спасибо все работает))

Alastor

07.01.2016 00:04

Цитата:

Сообщение от рони (Сообщение 402795)

Alastor,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div id="cplayer1" style="display:block;"><iframe name='film_cinemas' id='film_cinemas' src='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3' width='307' height='260' frameborder='0'></iframe>
            <div class='vk_select'><button class="previous">&#8592</button><select size='1' onchange="javascript:if(document.getElementById('film_cinemas')) document.getElementById('film_cinemas').src=this.value;">
<option value='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3'>1 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959836&hash=b095322a1122a202&hd=3">2 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959838&hash=947cc72f8178eb3a&hd=3">3 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959840&hash=c00fa8b2df9ead45&hd=3">4 серия</option></select>

<button class="next">&#8594</button>
</div></div>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var d = document.querySelector("#cplayer1"),
    s = d.querySelector("select");
    d.addEventListener("click", function(b) {
     var a = b.target, i = s.selectedIndex;
     if(a.classList.contains("previous")) i-- ;
     else if(a.classList.contains("next")) i++  ;
     else return;
     if(i < 0) i = s.options.length - 1;
     i %= s.options.length;
     s.selectedIndex = i;
     s.onchange()
    })
});
</script>
</body>

</html>

а вот прикол заметил теперь когда нажимаешь на список серия что стоит перезагружается, и еще вопрос как то можно сделать тип отметку остановился на

П/С кстати тут в редакторе все нормально показывает но на просто хтмл странице перегружает

рони	07.01.2016 00:31

Цитата:

Сообщение от Alastor

серия что стоит перезагружается

не должно , проверьте есть ли у вас строка 26 ,

Цитата:

Сообщение от Alastor

отметку остановился на

не понял

Alastor

07.01.2016 00:38

Да вы правы, странно чего она не скопировалась, отметку например в смысле смотрел 5 серию вот ее как то запомнить в куки наприме, или там какой то галочкой оьметить

Alastor

07.01.2016 00:52

рони,
как то так)

рони	07.01.2016 01:04

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

Alastor

07.01.2016 01:18

рони,
так можно сделать как то запоминание серии на которой остановился.
так ее как-то отметить

рони	07.01.2016 01:29

Alastor,
можно в localStorage запоминать по onchange() запоминать выбор а при загрузке его устанавливать

рони	07.01.2016 02:05

сохранение выбора селектора при перезагрузке

Alastor,
onchange не ставить в тег

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div id="cplayer1" style="display:block;">
<iframe name='film_cinemas' id='film_cinemas' src='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3' width='307' height='260' frameborder='0'></iframe>
<div class='vk_select'>
<button class="previous">&#8592</button>
<select size='1' >
<option value='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3'>1 серия</option>
<option value="http://vk.com/video_ext.php?oid=177595935&id=162959836&hash=b095322a1122a202&hd=3">2 серия</option>
<option value="http://vk.com/video_ext.php?oid=177595935&id=162959838&hash=947cc72f8178eb3a&hd=3">3 серия</option>
<option value="http://vk.com/video_ext.php?oid=177595935&id=162959840&hash=c00fa8b2df9ead45&hd=3">4 серия</option>
</select>
<button class="next">&#8594</button>
</div></div>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var d = document.querySelector("#cplayer1"),
        a = d.querySelector("select"),
        f = d.querySelector("#film_cinemas");
    a.addEventListener("change", function() {
        f.src = a.value;
        localStorage.setItem("rem", a.value)
    });
    var e = localStorage.getItem("rem");
    e && (a.value = e);
    e = new Event("change");
    a.dispatchEvent(e);
    d.addEventListener("click", function(c) {
        c = c.target;
        var b = a.selectedIndex;
        if (c.classList.contains("previous")) b--;
        else if (c.classList.contains("next")) b++;
        else return;
        0 > b && (b = a.options.length - 1);
        b %= a.options.length;
        a.selectedIndex = b;
        a.dispatchEvent(e)
    })
});
</script>
</body>

</html>

Deff	07.01.2016 05:02

Alastor,
Удобнее все же делать кнопки переключения серий слайдером(по опыту), как на seasonvar: http://seasonvar.ru/serial-11912-Vol...-5-season.html и симпатичнее, принцип запоминания и выбора наверно мало измениться

Alastor

07.01.2016 16:51

Deff,
оно то может и так, ну уже такой плеер стоит потому от него и пляшем, так то как я посмотрю он флеш

Alastor

07.01.2016 16:58

рони,
Да в списке запоминает но в блок инфрейм после перезагрузки не ставит ее)

рони	07.01.2016 19:56

Alastor,
смотрите пост 12 снова

Deff	08.01.2016 02:34

Цитата:

Сообщение от Alastor

оно то может и так, ну уже такой плеер стоит потому от него и пляшем, так то как я посмотрю он флеш

Плеер тут не причем, сделать обертку фрейма HTML слайдером, на на кнопки поставить те же данные, что и у option(к примеру: http://vk.com/video_ext.php?oid=1775...4bb9b25b5&hd=3), в атрибут data="..." ;жмёте кнопку - получаете тот жа эффект, что и от option, можете заказать в разделе работа, если самому трудоёмко

Alastor

09.01.2016 14:24

Цитата:

Сообщение от рони (Сообщение 402916)

Alastor,
смотрите пост 12 снова

не понял(

рони	09.01.2016 16:02

Alastor,
либо вариант работает, либо нет, iframe с нужным src после перезагрузки?

Alastor

09.01.2016 22:36

Ладно то не столь важно, а вот мне интересно а можно как-то этот скрипт заставить работать в експлорере??

Цитата:

Сообщение от рони (Сообщение 402795)

Alastor,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div id="cplayer1" style="display:block;"><iframe name='film_cinemas' id='film_cinemas' src='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3' width='307' height='260' frameborder='0'></iframe>
            <div class='vk_select'><button class="previous">&#8592</button><select size='1' onchange="javascript:if(document.getElementById('film_cinemas')) document.getElementById('film_cinemas').src=this.value;">
<option value='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3'>1 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959836&hash=b095322a1122a202&hd=3">2 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959838&hash=947cc72f8178eb3a&hd=3">3 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959840&hash=c00fa8b2df9ead45&hd=3">4 серия</option></select>

<button class="next">&#8594</button>
</div></div>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var d = document.querySelector("#cplayer1"),
    s = d.querySelector("select");
    d.addEventListener("click", function(b) {
     var a = b.target, i = s.selectedIndex;
     if(a.classList.contains("previous")) i-- ;
     else if(a.classList.contains("next")) i++  ;
     else return;
     if(i < 0) i = s.options.length - 1;
     i %= s.options.length;
     s.selectedIndex = i;
     s.onchange()
    })
});
</script>
</body>

</html>

рони	09.01.2016 22:44

Alastor,
и какая версия ie? ищите полифилы classList, querySelector и если совсем уж старый то и для addEventListener

рони	09.01.2016 23:14

Alastor,
должно работать везде

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div id="cplayer1" style="display:block;"><iframe name='film_cinemas' id='film_cinemas' src='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3' width='307' height='260' frameborder='0'></iframe>
            <div class='vk_select'><button class="previous">&#8592</button><select size='1' onchange="javascript:if(document.getElementById('film_cinemas')) document.getElementById('film_cinemas').src=this.value;">
<option value='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3'>1 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959836&hash=b095322a1122a202&hd=3">2 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959838&hash=947cc72f8178eb3a&hd=3">3 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959840&hash=c00fa8b2df9ead45&hd=3">4 серия</option></select>

<button class="next">&#8594</button>
</div></div>

<script>
window.onload =  function() {
    var d = document.getElementById("cplayer1"),
    s = d.getElementsByTagName("select")[0];
    d.onclick = function(event) {
     event = event || window.event
     var a = event.target || event.srcElement, i = s.selectedIndex;
     if(a.className.indexOf("previous") != -1) i-- ;
     else if(a.className.indexOf("next") != 1) i++  ;
     else return;
     if(i < 0) i = s.options.length - 1;
     i %= s.options.length;
     s.selectedIndex = i;
     s.onchange()
    }
};
</script>
</body>

</html>

Alastor

20.01.2016 11:23

Скажите как-то можно это прикрутить к коду
чтобы при воде номера открывало даную серию

<form name="test" method="post">
  <b>быстрый переход</b>
   <input type="text" size="1" maxlength=3 pattern="\d*">
  <input type="submit" value="ОК">
 </form>

рони	20.01.2016 11:44

Alastor,
:(

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div id="cplayer1" style="display:block;"><iframe name='film_cinemas' id='film_cinemas' src='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3' width='307' height='260' frameborder='0'></iframe>
            <div class='vk_select'><button class="previous">&#8592</button><select size='1' onchange="javascript:if(document.getElementById('film_cinemas')) document.getElementById('film_cinemas').src=this.value;">
<option value='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3'>1 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959836&hash=b095322a1122a202&hd=3">2 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959838&hash=947cc72f8178eb3a&hd=3">3 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959840&hash=c00fa8b2df9ead45&hd=3">4 серия</option></select>

<button class="next">&#8594</button>
</div></div>
<form name="test" method="post">
  <b>быстрый переход</b>
   <input type="text" size="1" maxlength=3 pattern="\d*" name="num">
  <input type="submit" value="ОК">
 </form>

<script>
window.onload =  function() {
    var d = document.getElementById("cplayer1"),
    s = d.getElementsByTagName("select")[0];
    d.onclick = function(event) {
     event = event || window.event
     var a = event.target || event.srcElement, i = s.selectedIndex;
     if(a.className.indexOf("previous") != -1) i-- ;
     else if(a.className.indexOf("next") != 1) i++  ;
     else return;
     if(i < 0) i = s.options.length - 1;
     i %= s.options.length;
     s.selectedIndex = i;
     s.onchange()
    }
   var form =  document.test;
   form.onsubmit = function() {
   var i = (this.num.value - 1)||0 ;
   if(i < 0) i = 0;
   if(i > s.options.length - 1) i = s.options.length - 1;
   s.selectedIndex = i ;
   this.num.value = ++i;
   s.onchange();
   return false;
}
};
</script>
</body>

</html>

Alastor

20.01.2016 13:54

рони,
Вроде все работает, но почему смайл такой?

Alastor

20.01.2016 14:16

рони,
ну вроде норм только когда делаешь клик по списку оно автоматом переключает далее при открытии

Alastor

20.01.2016 14:28

вот так вроде норм

<div id="cplayer1" style="display:block;"><iframe name='film_cinemas' id='film_cinemas' src='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3' width='307' height='260' frameborder='0'></iframe>
            <div class='vk_select'><button class="previous">&#8592</button><select size='1' onchange="javascript:if(document.getElementById('film_cinemas')) document.getElementById('film_cinemas').src=this.value;">
<option value='http://vk.com/video_ext.php?oid=177595935&id=162959834&hash=71483af4bb9b25b5&hd=3'>1 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959836&hash=b095322a1122a202&hd=3">2 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959838&hash=947cc72f8178eb3a&hd=3">3 серия</option><option value="http://vk.com/video_ext.php?oid=177595935&id=162959840&hash=c00fa8b2df9ead45&hd=3">4 серия</option>
</select>

<button class="next">&#8594</button>
</div></div>
<form name="test" method="post">
  <b>быстрый переход</b>
   <input type="text" size="1" maxlength=3 pattern="\d*" name="num">
  <input type="submit" value="ОК">
 </form>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var d = document.querySelector("#cplayer1"),
    s = d.querySelector("select");
    d.addEventListener("click", function(b) {
     var a = b.target, i = s.selectedIndex;
     if(a.classList.contains("previous")) i-- ;
     else if(a.classList.contains("next")) i++  ;
     else return;
     if(i < 0) i = s.options.length - 1;
     i %= s.options.length;
     s.selectedIndex = i;
     s.onchange()
    })
	   var form =  document.test;
   form.onsubmit = function() {
   var i = (this.num.value - 1)||0 ;
   if(i < 0) i = 0;
   if(i > s.options.length - 1) i = s.options.length - 1;
   s.selectedIndex = i ;
   this.num.value = ++i;
   s.onchange();
   return false;
}

});


</script>

Alastor

20.01.2016 14:34

правда скрипт у меня первый тот что ты делал))

Alastor

20.01.2016 14:39

может какие ошибки есть исправь))плиз

правда этот наверное в експлорере работать не будет((( но не переключает серию при открытии списка

Часовой пояс GMT +3, время: 18:33.