ねごとめも背景

    ねごとめも



    作成したプログラムは、こちらでも公開しています。
    よかったら覗いてみてください。_(┐「ε:)_
    → javascript,SVG で作成したプログラム置き場
    → プログラム一覧 - (2)

    css のみで動作するスライドして現れるカラム ( アコーディオンメニュー? )

    css の解説サイトを覗いてたら、新しい発見がっ!( ゚д゚)ハッ!
    現在、公開している fc2 ブログテンプレート [ wi-blue-b ],[ wi-round-a ] では、
    右メニュー( カラム )の表示、非表示を、 javascript で css を操作することによって動作させている。

    こちらのサイトのサンプルをの覗いていると。。。コレって css だけで動作させる事が出来るんじゃ...。
    と思い、作成してみた。

    以下、 javascrit を使用せず css だけで右カラム ( メニュー ) が表示、非表示されるサンプルとソースコード。


    header
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet"  href="style.css">
            <script type="text/javascript" src="column.js"></script>
        </head>
        <body>
            <div id="wrapper">
                <header>
                </header>
                <section id="left_content">
                main_content
                </section><!--/left_content-->
                <section id="right_content">
                <!--
                    <div id="menu" style="width:100%;height:500px;background-color:green">
                    </div>
                -->
                    <div id="recommend_box">
                        <div id="recommend">
                            <ul>
                                <li>menu-a</li>
                                <li>menu-b</li>
                                <li>menu-c</li>
                            </ul>
                        </div><!--/recommend-->
                    </div><!--/recommend_box-->
                </section><!--/right_content-->
                <footer>
                footer
                </footer>
            </div>
         </body>
    </html>
                          
    • menu-a
    • menu-b
    • menu-c



    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <style>
    
            *{
                padding:0;
                margin:0;
            }
            body{
            }
            #wrapper{
                width:80%;
                height:auto;
                padding:5px 0px;
                margin:auto;
            }
            header,footer{
                width:80%;
                height:auto;
                color:white;
                text-align:center;
                padding:40px 0px;
                margin:auto;
                background-color:black;
            }
            #content_box{
                width:80%;
                height:auto;
                white-space:nowrap;
                margin:auto;
                position:relative;
                overflow:hidden;
                background-color:dimgray;
            }
            #left_content *:not(pre):not(code),#right_content *:not(pre):not(code){
                white-space:normal;
            }
            #content_box > #toggle,#content_box > #toggle_skin{
                display:none;
            }
            #content_box > label{
                width:30px;
                height:30px;
                cursor:pointer;
                position:absolute;
                z-index:100;
                right:0px;
            }
            #left_content{
                width:75%;
                height:auto;;
                display:inline-block !important;
                background-color:gray;
            }
            #right_content{
                width:25%;
                height:auto;
                display:inline-block !important;
                opacity:1;
                background-color:darkgray;
                vertical-align:top;
            }
            #right_content > div > ul{
                padding:0px;
                margin:0px;
            }
            #right_content > div > ul > li{
                list-style-position:inside;
            }
            #left_content > div,#right_content > div{
                width:98%;
                height:auto;
                padding:10px;
                margin:auto;
                box-sizing: border-box;
                background-color:lightgray;
            }
            #toggle:checked ~ #left_content{
                width:100%;
            }
            #toggle:checked ~ #right_content{
                opacity:0;
            }
            #left_content,#right_content{
                transition:all .4s ease-in-out 0s;
                /*transition: all 1s ease;*/
            }
            #toggle_box{
                width:30px;
                height:30px;
                position:absolute;
                z-index:1;
                cursor:pointer;
            }
            #toggle_box:before{
                content:"";
                width:30px;
                height:30px;
                background-color:black;
                position:absolute;
                opacity:.8;
                border-radius:5px;
            }
            #toggle_box span{
                width:20px;
                height:4px;
                display:block;
                background-color:white;
                position:absolute;
                left:5px;
                -ms-transition:all 0.4s;
                -moz-transition:all 0.4s;
                -webkit-transition:all 0.4s;
                transition:all 0.4s;
            }
            #toggle_box span:first-child{
                top:7px;
                -ms-transform:translateX(0.5px) translateY(6px) rotate(45deg);
                -moz-transform:translateX(0.5px) translateY(6px) rotate(45deg);
                -webkit-transform:translateX(0.5px) translateY(6px) rotate(45deg);
                transform:translateX(0.5px) translateY(6px) rotate(45deg);
            }
            #toggle_box span:nth-child(2){
                margin-top:-2px;
                top:50%;
                opacity:0;
            }
            #toggle_box span:last-child{
                bottom:7px;
                -ms-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
                -moz-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
                -webkit-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
                transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
            }
            #toggle:checked ~ label > span:first-child{
                top:7px;
                -ms-transform:translateX(0px) translateY(0px) rotate(0deg);
                -moz-transform:translateX(0px) translateY(0px) rotate(0deg);
                -webkit-transform:translateX(0px) translateY(0px) rotate(0deg);
                transform:translateX(0px) translateY(0px) rotate(0deg);
            }
            #toggle:checked ~ label > span:nth-child(2){
                margin-top:-2px;
                top:50%;
                opacity:1;
            }
            #toggle:checked ~ label > span:last-child{
                bottom:7px;
                -ms-transform:translateX(0px) translateY(0px) rotate(0deg);
                -moz-transform:translateX(0px) translateY(0px) rotate(0deg);
                -webkit-transform:translateX(0px) translateY(0px) rotate(0deg);
                transform:translateX(0px) translateY(0px) rotate(0deg);
            }
            pre,code{
                overflow:auto;
            }
            </style>
        </head>
        <body>
            <div id="wrapper">
                <header>
                    header
                </header>
                <div id="content_box">
                  <input type="checkbox" id="toggle" name="tg1">
                  <!--<input type="checkbox" id="toggle_skin" name="tg1">-->
                  <label for="toggle" id="toggle_box">
                        <span> </span>
                        <span> </span>
                        <span> </span>
                  </label>
                  <section id="left_content">
                          <pre><code>
    
            *{
                padding:0;
                margin:0;
            }
            body{
            }
            #wrapper{
                width:80%;
                height:auto;
                padding:5px 0px;
                margin:auto;
            }
            header,footer{
                width:80%;
                height:auto;
                color:white;
                text-align:center;
                padding:40px 0px;
                margin:auto;
                background-color:black;
            }
            #content_box{
                width:80%;
                height:auto;
                white-space:nowrap;
                margin:auto;
                position:relative;
                overflow:hidden;
                background-color:dimgray;
            }
    
                          </code></pre>
                  </section><section id="right_content">
                      <div>
                        <ul>
                            <li>menu-a</li>
                            <li>menu-b</li>
                            <li>menu-c</li>
                            <li>menu-d</li>
                            <li>menu-e</li>
                            <li>menu-f</li>
                            <li>menu-g</li>
                            <li>menu-h</li>
                            <li>menu-i</li>
                            <li>menu-j</li>
                        </ul>
                      </div>
                  </section>
                </div>
                <footer>
                    footer
                </footer>
            </div>
        </body>
    </html>
    


    こちらのサイト様のサンプルを参考にさせて頂きました。 → css だけで作る フォトギャラリー・スライドショー


    2016/03/24 [00:17]

    HTML ソースコードをクリップボードにコピー(4)

    以前作成した HTML ソースコードをクリップボードにコピーする flash。
    javascript で flash を書き出す際に不具合があったので訂正。

    修正前のプログラムの流れ。
    準備
    1)javascript で flash のソースコードを出力する。
    2)書き出す際、 flashvars の値にコピーするソースコードを格納。

    イベント発生時
    1) flash 上で click イベントが起こる。
    2) flashvars に格納されている値を読み込み、クリップボードへコピーする。
    3) flash 側から javascript の関数を呼び出し、"クリップボードへのコピー完了" を通知する。

    不具合(欠陥)は準備 2) の HTML ソースコードの格納方法。
    flashvars では & が区切り文字になっているらしく、
    param タグの flashvars の value の値を設定する場合、

    例):param タグ内 name="flashvars"
    
    value="code=hogehoge&param_a=aaaaa&param_b=bbbbb"
    
    
    
    と値を設定すると、
    actionscript 側で、
    
    var code=flashVars["code"];
    var param_a=flashVars["param_a"];
    var param_b=flashVars["param_b"];
    
    
    
    として、HTML 側から flash 側へと値の受け渡しができる。?

    なので、ソースコード内に & が含まれている場合、
    全てのコードをクリップボードにコピー出来ないという欠陥があった。

    応急処置(確認できた範囲で)として javascript と actionscript を
    それぞれ修正。

    修正したjavascript
    
    
    function copy(args){alert(args);}
    
    addEvent(window,"load",function()
    {
    var code_block=document.getElementsByTagName("code");
    	for(i=0;i<code_block.length;i++)
    	{
    	var par=code_block[i].parentNode.parentNode;
    	var btn_box=document.createElement("div");
    		btn_box.style.textAlign="right";
    	var btn=document.createElement("img");
    		btn.setAttribute("src","http://blog-imgs-75.fc2.com/n/e/g/negotoy/20150329b.png");
    		btn.style.border=0+"px";
    		btn.style.cursor="pointer";
    		btn.style.display="inline-block";
    		btn.style.marginRight=5+"px";
    		btn.textarea=null;
    		btn.btn_box=btn_box;
    		btn.num=i;
    		btn_box.appendChild(btn);
    		par.insertBefore(btn_box,code_block[i].parentNode);
    		addEvent(btn,"click",function()
    		{
    			if(!this.textarea)
    			{
    			var textarea=this.textarea=document.createElement("textarea");;
    			var code_block=this.parentNode.nextSibling.getElementsByTagName("code")[0];
    				textarea.value=code_block.firstChild.data;
    				textarea.style.position="absolute";
    				textarea.style.fontSize=11+"px";
    				textarea.style.top=0+"px";
    				textarea.style.left=50+"px";
    				textarea.style.width=90+"%";
    				textarea.style.height=90+"%";
    			var code=code_block.firstChild.data.split(/\r\n|\r|\n/);
    			var div=document.createElement("div");
    				div.style.overflow="auto";
    				div.style.position="relative";
    			var ol=document.createElement("ol");
    				ol.style.marginLeft=50+"px";
    				
    				for(i=0;i<code.length;i++)
    				{
    					//if(code[j]==""){ continue; }
    				var li=document.createElement("li");
    				var data=document.createTextNode(code[i].replace(/\t/g,"    "));
    					li.appendChild(data);
    				var col=(i%2==1)? "#f0f0f0" : "#f8f8f8";
    					li.style.listStylePosition="outside";
    					li.style.whiteSpace="pre";
    					li.style.backgroundColor=col;
    					li.style.fontSize=12+"px";
    					li.style.fontFamily="Consolas";
    					li.style.color="#000";
    					ol.appendChild(li);
    				}
    				div.appendChild(ol);
    				div.appendChild(this.textarea);
    				this.parentNode.parentNode.insertBefore(div,this.parentNode.nextSibling);
    				this.parentNode.nextSibling.nextSibling.style.display="none";
    				
    				flash=document.createElement("object");
    				flash.style.display="inline-block";
    				flash.setAttribute("data","http://blog-imgs-75.fc2.com/n/e/g/negotoy/Clipboard20150408d.swf")
    				//flash.setAttribute("data","Clipboard20150331a.swf")
    				flash.setAttribute("id","Clipboard");
    				flash.setAttribute("type","application/x-shockwave-flash");
    				flash.setAttribute("height","16px");
    				flash.setAttribute("width","15px");
    
    				obj=document.createElement("param");
    				obj.setAttribute("value","false");
    				obj.setAttribute("name","menu");
    				flash.appendChild(obj);
    
    				obj=document.createElement("param");
    				obj.setAttribute("value","noScale");
    				obj.setAttribute("name","scale");
    				flash.appendChild(obj);
    
    				obj=document.createElement("param");
    				obj.setAttribute("value","false");
    				obj.setAttribute("name","allowFullscreen");
    				flash.appendChild(obj);
    
    				obj=document.createElement("param");
    				obj.setAttribute("value","always");
    				obj.setAttribute("name","allowScriptAccess");
    				flash.appendChild(obj);
    
    				obj=document.createElement("param");
    				obj.setAttribute("value","#000");
    				obj.setAttribute("name","bgcolor");
    				flash.appendChild(obj);
    
    				obj=document.createElement("param");
    				obj.setAttribute("value","transparent");
    				obj.setAttribute("name","wmode");
    				flash.appendChild(obj);
    
    				obj=document.createElement("param");
    				obj.setAttribute("value","code="+code_block.firstChild.data.replace(/&/g,"<and>"));
    				obj.setAttribute("name","flashvars");
    				flash.appendChild(obj);
    				this.btn_box.appendChild(flash);
    				
    				//textarea.focus();
    				textarea.select();
    			}
    			else
    			{
    			var flg=this.textarea.style.display=="none" ? "block" : "none";
    				this.textarea.style.display=flg;
    				if(flg=="block")
    				{
    					this.textarea.focus();
    					this.textarea.select();
    				}
    			}
    		});
    	}
    });
    

    修正したactionscript
    
    package
    {
    	import flash.display.*;
    	import flash.events.*;
    	import flash.net.URLRequest;
    	import flash.system.System;
    	import flash.external.ExternalInterface;
    
    	public class Main extends Sprite 
    	{
    		public function Main() 
    		{
    			if (stage) init();
    			else addEventListener(Event.ADDED_TO_STAGE, init);
    		}
    		
    		public function init(e:Event = null):void 
    		{
    		var loader:Loader = new Loader();
    		var url:String = "http://blog-imgs-75.fc2.com/n/e/g/negotoy/2015040523233445b.png";
    		var urlReq:URLRequest = new URLRequest(url);
    			loader.load(urlReq);
    			addChild(loader);
    			
    			stage.scaleMode = StageScaleMode.NO_SCALE;
    		var flashVars:Object = this.loaderInfo.parameters;
    		var spr:Sprite = new Sprite();
    		var g:Graphics = spr.graphics;
    			g.beginFill (0xFF0000, 0);
    			g.drawRect  ( 0, 0 , 15 , 16);
    			spr.buttonMode = true;
    			spr.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void 
    			{
    				if (flashVars["code"])
    				{
    					System.setClipboard(flashVars["code"].replace(/<and>/g, "&"));
    					if (ExternalInterface.available)
    					{
    						ExternalInterface.call("copy","クリップボードにコピーしました。");
    					}
    				}
    			}); 
    			addChild(spr);
    		}
    	}
    }
    

    受け渡す際にソースコードにある & を一度 javascript で <and> に置き換えて、
    受け取った flash 側で <and> & へ再変換して出力するという。。。

    2015/04/12 [22:47]

    カウンター

    プロフィール

    negotoy

    Author:negotoy
    好きな選手権 :chara選手権
    好きなコーナー :リスナーが凸して
    椎名林檎の丸の内を歌うコーナー

    PC ゲーム歴 :
    モバゲーのタイピングゲームで
    タイピングの練習(サービス終了)
    ニックネーム : クッキー
    以降ゲーム歴なし

    [ YouTube ]

    chara : あいのうた
    椎名林檎 : ありあまる富
    かせきさいだぁ : じゃっ 夏なんで
    阿部真央 : 貴方の恋人になりたいのです

    最新記事

    カテゴリ

    カレンダー

    07 | 2018/08 | 09
    - - - 1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31 -


    PAGE TOP
    広告: