2015-01-23 4 views
-2

Мне удалось изменить свой горизонтально-горизонтальный регулятор громкости на вертикальный стиль в CSS, однако ползунок громкости все еще функционирует так, как будто он по-прежнему горизонтальный, то есть я должен щелкнуть по горизонтали, чтобы изменить объем, а не вертикально.Как вертикально изменить громкость

HTML

<div class="jp-volume-bar wolf-volume"> 
         <div class="jp-volume-bar-value"></div> 
        </div> 

CSS

.wolf-jplayer-playlist .wolf-volume{ 
    display:none 
} 

.wolf-jplayer-playlist .jp-volume-bar{ 
    position:absolute; 
    height: 50px; 
    width: 5px; 
    padding:0; 
    overflow:hidden; 
    top:85px; 
    left:278px 
} 

.wolf-jplayer-playlist .jp-volume-bar:hover{ 
    cursor:pointer 
} 

.wolf-jplayer-playlist .jp-volume-bar-value{ 
    height: 300px; 
    width: 20px; 
    background-color: #db2537 
} 

Jquery (довольно длинный код):

http://djacademynegypt.com/wp-content/plugins/wolf-jplayer/assets/js/min/jquery.jplayer.concat.min.js?ver=2.1.7.3 
+1

Это своего рода трудно отлаживать код когда вы не публикуете ... –

+0

Некоторые фрагменты кода того, что вы сделали, были бы полезны. – Henrik

+0

Хотя живой сайт - хорошая вещь для публикации (спасает нас от необходимости создавать JSFiddle), вы также ** должны предоставить код, который, по вашему мнению, вызывает проблему. Таким образом, мы можем проверить и сравнить. –

ответ

2

использование jQuery UI Slider:

example

Чтобы действительно изменить громкость, вы должны взаимодействовать с jPlayer API в 'слайд' обратного вызова:

$(".jp-volume-bar").slider({ 
    orientation: 'vertical', 
    slide: function(event, ui) {  
     $(".jp-volume-bar-value").text(ui.value); 
     $("#jpId").jPlayer("volume", ui.value/100); // jpId is the player id 
    } 
}); 

HTML:

<div class="jp-volume-bar wolf-volume"></div> 
<div class="jp-volume-bar-value"></div> 

full example here.

+0

Как? Вы также хотите поделиться, как это волшебным образом изменяет громкость? Это неполный ответ. –

+0

Тогда я его отредактирую. –

+0

CodeFreaks, ... почему бы вам не стилизовать CSS так, как вам нравится? –

Смежные вопросы