1. ホーム
  2. 質問と答え
  3. は私がコンテンツを追加することができているdiv要素がある...私は私は私自身のプライベートなプロジェクトのために使用したいが不足しているものがあるテンプレートを見つけたテンプレート

は私がコンテンツを追加することができているdiv要素がある...私は私は私自身のプライベートなプロジェクトのために使用したいが不足しているものがあるテンプレートを見つけたテンプレート

2017-01-28 15 views
0

内側のdivはスクロール可能は私がコンテンツを追加することができているdiv要素がある...私は私は私自身のプライベートなプロジェクトのために使用したいが不足しているものがあるテンプレートを見つけたテンプレート

してください。大丈夫です。しかし、十分なスペースがないにもかかわらず、コンテンツを追加するとどうなりますか？右...ホールのウェブサイトはスクロール可能です....しかし、私はホールのウェブサイトがスクロール可能であることを望んでいません。 divだけがスクロール可能でなければなりません...

私は体の部分を固定しました（位置：固定;）が、テンプレートのレイアウトを破壊します。

穴テンプレート厥（ここではHow to make a DIV scrollable instead of BODY?のような）...

を私はスクロールするdiv要素を辞退しようとしましたが、何も起こりません：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 

<!--––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– 
jquery.mb.components                                – 
                                        – 
file: demo.html                                 – 
last modified: 09/07/14 23.11                              – 
                                        – 
Open Lab s.r.l., Florence - Italy                             – 
                                        – 
email: [email protected]                              – 
site: http://pupunzi.com                               – 
     http://open-lab.com                               – 
blog: http://pupunzi.open-lab.com                             – 
Q&A: http://jquery.pupunzi.com                             – 
                                        – 
Licences: MIT, GPL                                – 
    http://www.opensource.org/licenses/mit-license.php                        – 
    http://www.gnu.org/licenses/gpl.html                           – 
                                        – 
Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi);                        – 
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––--> 

<title>youtube Chromeless Player - mb.YTPlayer</title> 

<link href='http://fonts.googleapis.com/css?family=Lekton|Lobster' rel='stylesheet' type='text/css'> 
<link href="jquery.mb.YTPlayer-3.0.10/dist/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css"> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script src="jquery.mb.YTPlayer-3.0.10/dist/jquery.mb.YTPlayer.min.js"></script> 
    <script src="assets/apikey.js"></script> 
<style> 
*:focus{ 
    outline: none; 
} 

body { 
    border: none; 
    margin: 0; 
    padding: 30px; 
    background: #222c2f; 
    font: normal 16px/20px Lekton, sans-serif; 
} 

input, textarea, select, button { 
    font-family: "helvetica neue", sans-serif !important; 
} 

h1{ 
    text-align: center; 
    font-size: 50px; 
    font-family: 'Lobster', cursive; 
} 

h2{ 
    font-family: "Open Sans", sans-serif; 
    font-size: 35px; 
    text-align: left; 
    line-height: 60px; 
} 

h1, h2{ 
    font-family: 'Lobster', cursive; 
    text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.30); 
    color: #000000; 
    font-weight: 200; 
} 

#wrapper{ 
    position: relative; 
    min-width: 1280px; 
} 

.console{ 
    margin-top: 70px; 
    text-align: center; 
} 

#debug { 
    position: absolute; 
    width: 450px; 
    padding: 5px; 
    height: 100%; 
    top: 0; 
    right: 0; 
    background: rgba(0, 0, 0, .8); 
    overflow: auto; 
    color: #fff; 
    font-size: 13px; 
    z-index: 10000; 
} 

.dida{ 
    color: #fff; 
    font-size: 20px; 
    margin-top: 20px; 
} 

button, .button { 
    transition: all .4s; 
    display: inline-block; 
    padding: 0px 10px; 
    font-size: 12px; 
    font-weight: bold; 
    text-transform: uppercase; 
    cursor: pointer; 
    background-color: rgba(248, 248, 248, 0.4); 
    box-shadow: 0 0 4px rgba(0,0,0,0.4); 
    color:#000; 

    border: 1px solid transparent; 

    text-decoration: none; 
    line-height: 30px; 
    margin: 3px; 
    border-radius: 10px; 
} 

button:hover, .button:hover { 
    background-color: rgb(0, 0, 0); 
    color: #FFF; 
} 

#togglePlay{ 
    margin-top: 20px; 
    font-size: 20px; 
    width: 100px; 
    height: 100px; 
    line-height: 70px; 
    border-radius: 100%; 
} 

#togglePlay.pause{ 
    background-color: rgb(0, 0, 0); 
    color: #fff; 
} 

#togglePlay.pause:hover{ 
    background-color: #fff; 
    color: #333; 
} 

#togglePlay.play{ 
    background-color: #fff; 
    color: #333; 
} 

#togglePlay.play:hover{ 
    background-color: rgb(0, 0, 0); 
    color: #fff; 
} 

.goto { 
    position: absolute; 
    left:0; 
    top: 360px; 
    right: 0; 
    margin: auto; 
    text-align: center; 
    width: 100%; 
    height: 50px; 
} 


.goto .button{ 
    font-size: 30px; 
    font-family: 'Lobster', cursive; 
    padding: 10px; 
    text-transform: none; 
} 


#filtersControl{ 
    position: absolute; 
    top:0; 
    left: 10px; 
    width: 350px; 
    margin: 30px auto; 
    z-index: 1000; 
    display:none; 
} 

#changeVideo { 
    position: absolute; 
    top: 0; 
    right: 10px; 
    width: 350px; 
    margin: 30px auto; 
    z-index: 100; 
    padding: 10px; 
    /*background-color: rgba(25, 34, 37, 0.35);*/ 
    border-radius: 10px; 
    color: #FFFFFF; 
    box-sizing: border-box; 
} 

#changeVideo label { 
    padding: 10px; 
    display: block; 
} 

#changeVideo input { 
    padding: 10px; 
    display: block; 
    width: 250px; 
    border-radius: 10px; 
    border: none; 
    font-size: 20px; 
    color: #fff; 
    font-weight: 700; 
    background-color: rgba(168, 168, 168, 0.20); 
} 

#changeVideo input[type=number] { 
    display: inline-block; 
    width: 100px; 
} 
#changeVideo input[type=checkbox] { 
    display: inline-block; 
    width: 20px; 
} 

#loadBox{ 
    background-color: rgba(168, 168, 168, 0.20); 
    border-radius: 10px; 
    padding: 20px; 
    display:none; 
} 

/*Slider START ************************************************/ 

#filterScript { 
    margin-top: 20px; 
    padding: 10px; 
    background-color: rgba(25, 34, 37, 0.35); 
    color: #fff; 
    border-radius: 10px; 
} 

.slider { 
    position: relative; 
    width: 100%; 
    height: 25px; 
    border: 0 solid transparent; 
    background-color: rgba(255, 255, 255, 0.20); 
    border-radius: 4px; 
    margin-top: 10px; 
    overflow: hidden; 
} 

.slider:hover { 
    background-color: rgba(255, 255, 255, 0.46); 
} 

.slider .level { 
    background-color: rgba(255, 255, 255, 0.80); 
    height: 100%; 
    border-right: 5px solid rgba(168, 168, 168, 0.60); 
} 

.slider .desc { 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding: 5px; 
    font-size: 12px; 
    line-height: 18px; 
    color: #222222; 
} 

.slider span { 
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
    /*text-transform: uppercase;*/ 
    position: absolute; 
    top: 0; 
    font-size: 12px; 
    line-height: 18px; 
    color: #222222; 
    padding: 4px; 
    text-align: left; 
    width: 100%; 
    box-sizing: border-box; 
} 
/*Slider END ************************************************/ 
    a:link{ 
     color: cadetblue; 
     text-decoration: underline; 
    } 
    a:visited{ 
     color: IndianRed; 
     text-decoration: underline; 
    } 
    a:hover, a:active { 
     color: Chocolate; 
     text-decoration: none; 
    } 
</style> 

<script> 

    var myPlayer; 
    jQuery(function() { 

     /*var isIframe=function(){var a=!1;try{self.location.href!=top.location.href&&(a=!0)}catch(b){a=!0}return a};if(!isIframe()){var logo=$("<a href='http://pupunzi.com/#mb.components/components.html' style='position:absolute;top:0;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");$("#wrapper").prepend(logo),$("#logo").fadeIn()}*/ 

     jQuery.mbYTPlayer.controls.mute="A"; 
     jQuery.mbYTPlayer.controls.unmute="M"; 
     myPlayer = jQuery("#bgndVideo").YTPlayer({align:"center,left"}); 
//  myPlayer = jQuery("#bgndVideo").YTPlayer(); 

     myPlayer.YTPApplyFilters({ 
      grayscale: 50, 
      sepia: 83, 
      opacity: 29 
     }); 

     /* DEBUG ******************************************************************************************/ 

     var YTPConsole = jQuery("#eventListener"); 
     // EVENT: YTPStart YTPEnd YTPLoop YTPPause YTPBuffering 
     myPlayer.on("YTPReady YTPStart YTPEnd YTPPlay YTPLoop YTPPause YTPBuffering YTPMuted YTPUnmuted YTPChangeMovie", function (e) { 
      YTPConsole.append("event: " + e.type + " (" + jQuery("#bgndVideo").YTPGetPlayer().getPlayerState() + ") > time: " + e.time); 
      YTPConsole.append("<br>"); 
     }); 

     // EVENT: YTPChanged 
     myPlayer.on("YTPChanged", function (e) { 
      YTPConsole.html(""); 
     }); 

     myPlayer.on("YTPChangeMovie", function(e){ 
      // console.debug("videoId :: ", e.videoId); 
     }); 

     // EVENT: YTPData 
     myPlayer.on("YTPData", function (e) { 

      $(".dida").html(e.prop.title + "<br>@" + e.prop.channelTitle); 
      $("#videoData").show(); 

      YTPConsole.append("******************************"); 
      YTPConsole.append("<br>"); 
      YTPConsole.append(e.type); 
      YTPConsole.append("<br>"); 
      YTPConsole.append(e.prop.title); 
      YTPConsole.append("<br>"); 
      YTPConsole.append(e.prop.description.replace(/\n/g, "<br/>")); 
      YTPConsole.append("<br>"); 
      YTPConsole.append("******************************"); 
      YTPConsole.append("<br>"); 

     }); 

     // EVENT: YTPTime 
     myPlayer.on("YTPTime", function (e) { 
      var currentTime = e.time; 
      var traceLog = currentTime/5 == Math.floor(currentTime/5); 

      if (traceLog && YTPConsole.is(":visible")) { 
       YTPConsole.append(myPlayer.attr("id")+ " > " + e.type + " > actual time is: " + currentTime); 
       YTPConsole.append("<br>"); 

       if(myPlayer.YTPGetFilters()) 
        console.debug("filters: ", myPlayer.YTPGetFilters()); 

      } 
     }); 

     /* END DEBUG ******************************************************************************************/ 

     /* FILTER SLIDERS ******************************************************************************************/ 
     // create sliders for filters adjustment 
     $(".slider").each(function(){ 
      var $slider = $(this); 
      $slider.simpleSlider({ 
       initialval: 0, //function (el) {return Math.random() * el.opt.scale}, 
       scale  : 100, 
       callback : function (el) { 
        var filter = $(el).data("filter"); 
        myPlayer.YTPApplyFilter(filter, +(el.value).toFixed(0)); 

        $("span",el).html(filter + "  (" + (+(el.value).toFixed(0)) + ")"); 

        var applFilters = []; 
        var desc = "$(selector).YTPApplyFilters({"; 

        for (var x=0; x < $(".slider").length; x++){ 
         var slider = $(".slider").eq(x).get(0); 
         var $slaider = $(slider); 

         if(slider.value) 
          applFilters.push($slaider.data("filter") + ": " + (+(slider.value).toFixed(0))); 
        }; 

        for (var y in applFilters){ 
         var comma = y < applFilters.length-1 ? "," : "<br>"; 
         desc += "<br> &nbsp;&nbsp;&nbsp;" + applFilters[y] + comma; 
        } 

        desc += "})"; 

        $("#filterScript").html(desc); 
       } 
      }); 
     }); 
     //update applied filters 
     myPlayer.on("YTPFiltersApplied", function(){ 
      var filters = myPlayer.get(0).filters; 
      for (var key in filters){ 
       $(".slider[data-filter="+key+"]").updateSliderVal(filters[key].value); 
      } 
     }); 
     /* END FILTER SLIDERS ******************************************************************************************/ 

    }); 

    /** 
    * 
    * @param state 
    */ 
    function changeLabel(state){ 
     $("#togglePlay").html(state != 1 ? "pause" : "play"); 

     $("#togglePlay").removeClass(state != 1 ? "play" : "pause"); 
     $("#togglePlay").addClass(state != 1 ? "pause" : "play"); 
    } 

    /** 
    * 
    * @param val 
    * @returns {*|number} 
    */ 
    function checkForVal(val){ 
     return val || 0; 
    } 


       jQuery(document).ready(function(){ 
        jQuery('.scrollbar-inner').scrollbar(); 
       }); 


</script> 
</head> 
<body> 
<div id="wrapper" style="position:relative; padding:10px 0;z-index:10"> 
    <div class="console"> 
     <button onclick="jQuery('#bgndVideo').YTPToggleVolume()">mute/unmute</button> 
     <button id="debugBtn" class="command" onclick="jQuery('#debug').toggle()"> show/hide the console</button> 
    </div> 
    <br> 
    <br> 
    <h1 style="color:white"><a href="http://www.fatalityshooterclan.de/">Fatality Shooterclan</a></h1> 
    <h2 style="color:white; text-align: center">Youtube-Music at our<br>TTT-Server</h2> 


    <div id="filtersControl"> 

     <h2 style="color:white">Apply filters</h2> 
     <h3 style="color: white">* Filters don't work in IE.</h3> 

     <button id="toggleFilters" 
       onclick="jQuery('#bgndVideo').YTPToggleFilters(function(a){if(!a) {$('#toggleFilters').html('enable filters')} else {$('#toggleFilters').html('disable filters')}})"> 
      disable all filters 
     </button> 
     <script>   
      function rFCallback(f){ 
       $(".slider[data-filter="+f+"]").updateSliderVal(0); 
      } 
     </script> 
     <button id="removeFilters" 
       onclick="jQuery('#bgndVideo').YTPRemoveFilter(rFCallback)"> 
      remove all filters 
     </button> 

     <div class="slider" 
      data-filter="grayscale"><span>grayscale</span> 
     </div> 

     <div class="slider" 
      data-filter="sepia"><span>sepia</span> 
     </div> 

     <div class="slider" 
      data-filter="hue_rotate" 
      data-scale="360"><span>hue rotate</span> 
     </div> 

     <div class="slider" 
      data-filter="invert"><span>invert</span> 
     </div> 

     <div class="slider" 
      data-filter="opacity"><span>opacity</span> 
     </div> 

     <div class="slider" 
      data-filter="saturate" 
      data-scale="1000"><span>saturate</span> 
     </div> 

     <div class="slider" 
      data-filter="brightness" 
      data-scale="200"><span>brightness</span> 
     </div> 

     <div class="slider" 
      data-filter="contrast" 
      data-scale="500"><span>contrast</span> 
     </div> 

     <div class="slider" 
      data-filter="blur" 
      data-scale="50"><span>blur</span> 
     </div> 

     <div id="filterScript"></div> 

    </div> 

    <div id="changeVideo"> 
     <h2 style="color:white">Change video</h2> 
     <div id="ScrollableContent"> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button> 
     <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button> 
     <br> 
     <br> 
     <div id="loadBox"> 
      <label for="videoID">Or insert here the ID or the complete URL of the Youtube video:</label> 
      <input id="videoID" type="text" value="r1xohS2u69E" onfocus="$('#loadOptions').slideDown()"> 

      <div id="loadOptions" style="display: none"> 
       <br> 
       <input id="startAt" type="number" placeholder="starts at"> 
       <input id="stopAt" type="number" placeholder="stops at"> 
       <br> 
       <br> 
       <input id="audioOff" type="checkbox" checked> Audio is OFF 
       <br> 
      </div> 
      <br> 
      <button onclick="$('#loadOptions').slideUp(); jQuery('#bgndVideo').YTPChangeMovie({videoURL: $('#videoID').val(), startAt: checkForVal($('#startAt').val()), stopAt: checkForVal($('#stopAt').val()), mute: $('#audioOff').is(':checked') })">change video</button> 

      <div id="videoData" style="display: none"> 
       <h2 style="color: #FFFFFF; text-align: left">Current video:</h2> 
       <div class="dida"></div> 
      </div> 
      <br> 
      <button onclick="jQuery.mbYTPlayer.removeStoredData()"> Remove stored data </button> 
     </div> 
    </div> 
    </div> 

    <div class="goto"> 
     <button id="togglePlay" class="command pause" onclick="jQuery('#bgndVideo').YTPTogglePlay(changeLabel)">play</button> 
    </div> 



    <!--7SnmCUwOsts--><!--BsekcY04xvQ--><!--r1xohS2u69E--><!--Fk9EBOOAYiU--><!--sEuXfDtrco8--><!--9d8wWcJLnFI--> 
    <div id="bgndVideo" class="player" data-property="{videoURL:'zPonioDYnoY',containment:'body', showControls:true, autoPlay:true, loop:false, vol:50, mute:false, startAt:0, stopAt:0, opacity:1, addRaster:true, quality:'large', optimizeDisplay:true, stopMovieOnBlur:false}">My video</div> 

</div> 

<div id="debug" style="display: none"> 
    <h2 style="color: #FFFFFF; text-align: left">Events console: </h2> 
    <div id="eventListener"></div> 
</div> 
</body> 
</html>

を私はスクロール可能になりたいdiv要素が " 「ここ

ScreenshotItLooksLikeNow

が、私は誰かが私の問題で私を助けることを願って...それが今のように見えるのスクリーンショットです...

出典

2017-01-28 TheSoulrester

+0

があなたのCSSでdivの上の高さを設定し、オーバーフロー-Yを追加するには、CSSにこれを追加します。それにオート - これは高さが指定された高さを超えた場合ことを意味します - それを垂直方向にスクロールします。 – gavgrif

答えて

1

DIVの高さと幅を設定します。次に、単にオーバーフローをスクロールするように設定します。

div{ 
overflow: scroll; 
width: 500px; 
height: 500px; 
}

出典

2017-01-28 23:12:44

+1

応答性を保つには、vh（高さ）とvw（幅）単位を使用する必要があります:) – Ashiv3r

0 

#ScrollableContent { 
    overflow: scroll; 
}

出典

2017-01-28 23:17:12 Imulate

 関連する問題

  • 関連する問題はありません^_^