テキストを切り替えるプログラムの高さを変える方法
- テキストを切り替えるプログラムの高さを自動で調整する方法について教えてください。
- デモサイトのExemple 4のプログラムでは、テキストの高さを固定していますが、テキストの長さによって自動で調整したいです。
- height: 250の指定を削除した結果、高さがさらに縮んでしまいました。どのようにすればテキストの長さに応じて高さが自動で調整されるのでしょうか？
- ベストアンサー
テキストを切り替えるプログラムの高さを変えるには？
http://www.webinventif.fr/wslide-plugin/ http://www.webinventif.fr/wp-content/uploads/projets/wslide/index.htm このデモサイトのExemple 4のプログラムの高さをテキストの長さによって 自動で調整するにはどうすればいいでしょうか？ $('#parent4').wslide({ width: 400, height: 250, autolink: false, fade: true, duration: 2000 }); 単純にheight: 250,を消してみたんですが、高さがさらに縮んでしまう結果になりました。 どなたか、教えてください、 お願いします。
- egtomo
- お礼率59% (101/170)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
少し中を覗いてみましたが、これは他の動作を見ればわかるようにスライドを目的としているようですね。 仕様上、スライドをベースに作っているので、高さを固定する必要があるようです。 修正となると大変だし、単純にliとかDIVをフェードイン、フェードアウトさせるだけなら、作成しても大した作業でもないし、探せば他にもっと単純なものがあるんじゃないですか。 wSlideに拘る必要はないように思います。 #質問が複数あるのは仕方ないけど、せめて解決してから次を載せたらどうです？ #見た目、全て人任せのように感じます
その他の回答 (1)
- mikemike7
- ベストアンサー率87% (97/111)
>自動で調整するにはどうすればいいでしょうか？ 試してないからわからないけど、 height: 250, 消したらli本来の高さになるからテキストの高さになっていいんじゃないの？ 縮んだってことは、テキストの高さによって調整されたってことじゃないの？ 何がしたいのか良くわからないです。
補足
例えばですが、 Aには長文を入れて、Bには画像、Cにはちょっとしたメモ的な文章 と言う風に分けていた場合、高さが一律じゃないので、 切り替わった各コンテンツの高さに合わせて heightを自動で調整させたいです。 縮んだ場合も一律のheightになっており、 250pxから200pxに縮んだ形です。 どちらにしろ、自動調整はできていませんので、 単純に消しただけでは駄目みたいです。
関連するQ&A
- androidプログラムのエラーについて
自分は今、本を読みながらandroidプログラミングの勉強をしています。 XMLファイルをよく見直して間違いは見当たらないのですが 起動しようとすると「your project contains error」と表示されます。 コンソールには「No resource found that matches the given name (at 'title' with value '@string/menu_settings')」と書いてあります。 ネットで調べたらソースをクリーンすればいいと書いてありましたが クリーンすると今度はjavaファイルにエラーが起きます。 以下が自分が打ち込んだXMLのソースコードです。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text="お申込みフォーム" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_width="fill_parent" android:layout_height="wrap_content"/> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:text="お名前 :" android:layout_width="70sp" android:layout_height="wrap_content"/> <EditText android:id="@+id/name" android:layout_width="200dp" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:text="住所 :" android:layout_width="70sp" android:layout_height="wrap_content"/> <EditText android:id="@+id/address" android:layout_width="200dp" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:text="生年月日 :" android:layout_width="70sp" android:layout_height="wrap_content"/> <Spinner android:id="@+id/month" android:entries="@array/month" android:layout_width="85dp" android:layout_height="wrap_content"/> <TextView android:text="月" android:layout_width="20sp" android:layout_height="wrap_content"/> <Spinner android:id="@+id/day" android:entries="@array/day" android:layout_width="85dp" android:layout_height="wrap_content"/> <TextView android:text="日" android:layout_width="20sp" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout> どうかよろしくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- 背景について・・・
いつもお世話になっております。 今添付画像のようなサイトを付くろうと思っております。 http://snapkidz.biz/wp/ 今回うまくいってない部分は、背景です。 firefoxでみると崩れなどはないのですが、ipadでみるとかなりheadとmainの部分に隙間がうまれてしまいます。 この背景のひき方は間違っているんでしょうか？ html/ [header] <body> <div id="page"> <div id="wrapper"> <div class="header"> <h1><a href="#"><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/logo_03.gif" width="171" height="76" alt="Art・・"></a></h1> </div> [フッダー部分にpageとwrapperの/divの記載はあります。] [CSS] html,body{margin:0;padding:0;} #page{height:580px;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/theme_top_01.jpg);background-repeat:no-repeat;margin:0 auto;background-position:center;padding-top:10px;} #wrapper{width:100%;margin:0 auto;} .header{width:980px;height:100px;margin:0 auto;} .header h1{margin:0;} #main{height:1317px;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/body_02.jpg);background-repeat:no-repeat;margin:0 auto;background-position:center;position:relative;top:450px;} こっちのほうが楽だよ！とか普通はこうだ！などありましたら勉強不足な自分に教えてください。 宜しくお願いします。
- ベストアンサー
- CSS
- htmlを書き替えたら自動更新されるようにしたい
サイト内に <iframe src="http://abccc/wp-content/uploads/abbbb.html" width="200" height="1000" scrolling="yes"></iframe src></iframe> みたいにして iframeでabbbb.htmlを表示しているんですが これを書き変えようと思うと abbbb.html を abbbb.txt にして 内容を書き変えて abvvvv.htmlと名前を変えてまたhtmlにもどして htmlファイルをアップロードして <iframe src="http://abccc/wp-content/uploads/abvvv.html" width="200" height="1000" scrolling="yes"></iframe src></iframe> とhtmlを再度書き変えるという非常にめんどくさい事をしております。 自分がしたい事は 最初のabbbb.html の内容を書き変えた時に、その変更内容が瞬時に自動的に反映される そういったフリーソフトか何かを探しています そのフリーソフトにhtmlファイルを5個10個と登録しておいて、 その中から書き変えたいhtmlファイルを選ぶと編集画面になり そこで書き変えてから保存ボタンを押すと、 <iframe src="http://abccc/wp-content/uploads/abbbb.html" で表示されていた部分が自動的に更新反映されると言うものを探しています 初心者なので良くわかっていませんが 伝わったでしょうか？ guard-livereload というものがそれに近い感じがしたのですが なんか導入の仕方が謎です フリーソフトみたいにインストールして使える見た目にもわかりやすいものってないですかね？？ windowsで使えるものでお願いします。 何かいいアイデアは無いでしょうか
- ベストアンサー
- その他（インターネット・Webサービス）
- 引き出しのガイドレールの交換部品
写真のようなガイドレールを探しています。寸法(Height/Width/Length)は15*9.5*350 です。 下記のようなものだと思いますが、なかなか寸法が合うものが見つかりません。 上記寸法に合うものはありませんか？ スライドレール https://www.monotaro.com/g/00178611/ 具体的にはこれで代用したいところですが、受注生産のようですし、1ロット何十本とか買えません。 http://www.skyrail.co.jp/new2013/wp-content/uploads/2015/02/SKY-U1611_2014.pdf 2本だけ欲しいのでどこかホームセンターにでも売っていればありがたいのですが。
- ベストアンサー
- DIY(日曜大工)
- z-indexについて...
今回添付画像のように画像の上にアイコンを置きたかったのですがうまくいきません。 http://snapkidz.biz/wp/ cssのz-indexを使って熊のアイコンをpngで表示させればうまくいくのかな？と思ったのですが、うまく表示できませんでした。 ソースです。 <div id="header"> <ul class="haeder_bak"> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" /> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_04.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_05.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_06.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_07.jpg" /></li> </ul> <div class="header_slider"> <img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_09.jpg" /> </div> <div class="header_bear"> <img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" /> </div> </div> CSSです。 #header{ width:100%; margin-top:15px; position :relative; z-index:0; } #header li{ float:left; } #header ul{ list-style-type:none; } .haeder_bak{ poaition:abosolute; z-index:10; } .header_slider{ poaition:abosolute; z-index:20; } .header_bear{ poaition:abosolute; z-index:30; } どうすれば添付画像のようにいきますか？
- ベストアンサー
- CSS
- トップのアイキャッチが全部同じ・・・
トップページにアイキャッチを表示させたいのですが、全部一番最新のアイキャッチ画像が表示されてしまいます。。。 どうすれば別々のアイキャッチを表示することができるのでしょうか？ URL : http://blackartcard.com/ <?php get_header(""); ?> <!-- Contents --> <div id="contents"> <!-- 一行目 --> <div class="top-blog"> <div class="top-blog-in"> <h3><a href="/?p=131">Love&Free</a></h3> <div class="boxgrid captionfull"> <p><img src="http://blackartcard.com/wp/wp-content/uploads/2011/10/top-blog1.jpg" alt="" width="300" height="200" /></p> <div class="cover boxcaption"> <p><a href="/?p=131">▶ READ MORE</a></p> </div> </div> </div> <div class="top-blog-in"> <h3><a href="?p=156">Somebody Walked</a></h3> <div class="boxgrid captionfull"> <p><img src="http://blackartcard.com/wp/wp-content/uploads/2011/10/top-blog2.jpg" alt="" width="300" height="200" /></p> <div class="cover boxcaption"> <p><a href="?p=156">▶ READ MORE</a></p> </div> </div> </div> <div class="top-blog-in"> <h3><a href="/?p=75">NewYorkCity / 2011</a></h3> <div class="boxgrid captionfull"> <p><img src="http://blackartcard.com/wp/wp-content/uploads/2011/10/top-blog3.jpg" alt="" width="300" height="200" /></p> <div class="cover boxcaption"> <p><a href="/?p=75">▶ READ MORE</p> </div> </div> </div> </div> <br clear="all"><!--一行目 --> <!-- 二行目 --> <div class="top-blog"> <div class="top-blog-in"> <h3><a href="?p=436">Im Here</a></h3> <div class="boxgrid captionfull"> <p><img src="http://blackartcard.com/wp/wp-content/uploads/2011/10/top-blog4.jpg" alt="" width="300" height="200" /></p> <div class="cover boxcaption"> <p><a href="?p=436">▶ READ MORE</a></p> </div> </div> </div> <div class="top-blog-in"> <h3><a href="#">COMEING SOON...</a></h3> <div class="boxgrid captionfull"> <p><img src="http://blackartcard.com/wp/wp-content/uploads/2011/10/sample.jpg" alt="" width="300" height="200" /></p> <div class="cover boxcaption"> <p><a href="#">▶ READ MORE</a></p> </div> </div> </div> <div class="top-blog-in"> <h3><a href="#">COMEING SOON...</a></h3> <div class="boxgrid captionfull"> <p><img src="http://blackartcard.com/wp/wp-content/uploads/2011/10/sample.jpg" alt="" width="300" height="200" /></p> <div class="cover boxcaption"> <p><a href="#">▶ READ MORE</a></p> </div> </div> </div> </div> <br clear="all"><!--2行目 --> <div class="top-info"> <h3>新着情報</h3> <hr> <div class="info-info"> <?php include_once(ABSPATH . WPINC . '/feed.php'); $rss = fetch_feed(array( 'http://blackartcard.com/?cat=4', //RSSフィード1 )); if (!is_wp_error( $rss ) ) : $rss->set_cache_duration(1800); $rss->init(); $maxitems = $rss->get_item_quantity(5); $rss_items = $rss->get_items(0, $maxitems); date_default_timezone_set('Asia/Tokyo'); endif; ?> <dl> <?php if ($maxitems == 0) echo '<dt>No items.</dt
- ベストアンサー
- PHP
- マップとボタン同時表示|AndroidStudio
下記のサイトを参考にしてボタンとマップを同時に表示させるxmlを記述したつもりなのですが、 実行すると一瞬だけボタンが映り、その後はマップのみが表示されました。 https://groups.google.com/forum/?hl=ja&fromgroups#!topic/shikokugtug/NGseYmNKQQQ 何がおかしいのでしょうか。 記述したxmlは以下の通りです。 ちなみにfragmentをwrap_contentに変更しても同じでした。 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent"> <fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context="com.example.~.MapsActivity" android:id="@+id/map" android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.google.android.gms.maps.SupportMapFragment" /> <LinearLayout android:id="@+id/level" android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:id="@+id/large_up" android:text="@string/large_up" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/large_down" android:text="@string/large_down" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/small_down" android:text="@string/small_down" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/small_up" android:text="@string/small_up" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> </FrameLayout>
- 締切済み
- スマートフォンアプリ開発
- フレームの幅
階層が、 -index-menu -mainframe-mainmenu -main となってる場合に、menuで、画像をクリックすると mainmenuの幅を変更させるにはどうすればいいですか？（触れたら画像の大きさ変更と連携しています） <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> <!--// function ChangeCols(VALUE) { if(document.all) {parent.document.all("mainmenu").cols = VALUE } if(document.getElementById){parent.document.getElementById("mainmenu").cols = VALUE } } //--> </script> </head> <body> <IMG src="imgsoko/menuon.bmp" height="35" width="90" name="chavo2" onMouseOver="document.chavo2.height=35;document.chavo2.width=160" onclick="ChangeCols('100,*')" onMouseOut="document.chavo2.height=35;document.chavo2.width=90"> </body> </html> ↑ではできないので質問させていただきました。
- ベストアンサー
- JavaScript
- テンプレートキングを使ってwordpressでHPを作ろうと思っていま
テンプレートキングを使ってwordpressでHPを作ろうと思っています。 http://www.templateking.jp/manual/wordpressbiz/content/14.html このマニュアルどうりにロゴをアップしたのですがロゴが 表示されません。 CSSの直し方が悪かったのでしょうか？ #header-name a { text-indent: -9999px; display: block; width:177px; /* ロゴ画像の横幅 */ height:73px; /* ロゴ画像の縦幅 */ background:http://mywish.in/happylife/wp-content/uploads/rogo.gif('画像アップロード先のURL'); } このようにしてみました。 HPはhttp://mywish.in/happylife/です。
- ベストアンサー
- ブログ
- Android開発についての初心者質問です。
Android開発についての質問です。初心者でAndroidアプリを作っています。 初心者でAndroidアプリを作っています。 ＸＭＬからの実装をしたいのですが、 やり方がよく分かりません。 どなたかご教授頂けないでしょうか？ よろしくお願いいたします。 やりたいことは、imageButtonをクリックしたら imageViewの画像部分が変わる。 imageButton1をクリック → imageView1が表示 imageButton2をクリック → imageView2が表示 デフォルトでは、imageView1が表示している状態 buttonのリスナーを登録するのが関の山で、ボタンクリック時の imageView表示切替処理等ちんぷんかんぷんです。 ＸＭＬはこういった感じで書いてます。 よろしくお願いいたします。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <FrameLayout android:id="@+id/frameLayout1" android:layout_height="wrap_content" android:foregroundGravity="center" android:layout_width="match_parent" > <ImageView android:layout_height="wrap_content" android:src="@drawable/icon" android:id="@+id/imageView1" android:layout_gravity="center" android:layout_width="match_parent" > </ImageView> </FrameLayout> <LinearLayout android:layout_height="wrap_content" android:id="@+id/linearLayout1" android:layout_width="match_parent" > <ImageButton android:id="@+id/imageButton1" android:layout_height="wrap_content" android:src="@drawable/icon" android:layout_width="wrap_content" > </ImageButton> <ImageButton android:id="@+id/imageButton2" android:layout_width="wrap_content" android:src="@drawable/icon" android:layout_height="wrap_content" > </ImageButton> <ImageButton android:id="@+id/imageButton3" android:layout_width="wrap_content" android:src="@drawable/icon" android:layout_height="wrap_content" > </ImageButton> </LinearLayout> </LinearLayout>
- 締切済み
- その他（プログラミング・開発）
お礼
仰るとおりです。 すみません。