Javascript の組み込み方を教えてください

2011年8月16日 at 3:05

.js ファイル一つと.css ファイル2つで構成されている flexcroll というシンプルで美しいスクロールバーを組み込もうとしています。 HTML+CSS では思った通り設定できているのですが、concrete5 でどのように関連づければいいのかよくわかりません。header.phpに設定しみましたがFirefox では普通のスクロールとして関知されているのみ、IE ではスクロールが全く関知されていません。
私自身、phpがわかっておりませんのでお手上げ状態です。どなたかご教示いただけると幸いです。

Re: Javascript の組み込み方を教えてください

2011年8月16日 at 13:15
「header.phpに設定してみた」というその作業をどのようになさったのかが分からないので、何とも言えません。該当部分のソースをコピペしていただければ、間違っている所があれば指摘できると思います。
 

Re: Re: Javascript の組み込み方を教えてください

2011年8月16日 at 16:46
ありがとうございます。

header.php には次のようにいたしました。

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
<?php Loader::element('header_required'); ?>
<!-- Site Header Content //-->
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
<script type="text/javascript" media="screen">@import "<?php echo $this->getStyleSheet('flexcroll.js')?>";</script>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('flexcrollstyles.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('tutorsty.css')?>";</style>
</head>
<body>

js ファイルと、ふたつの css ファイルは独自に製作したThemaのディレクトリに入れました。
また、デフォルトphpには以下のように設置しています。

<div id="column_3">
<div id="mycustomscroll" class="flexcroll">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div></div>

アドバイスいただけると幸いです。よろしくお願いいたします。
 

Re: Re: Re: Javascript の組み込み方を教えてください

2011年8月16日 at 17:09
まず、flexcrollについては経験がないので一般的に直したほうが良い点を指摘しますので、動作を保証するものではありません。そのうえで、いくつか修正したほうがいいところがあります。


CSSについてですが、getStyleSheet()を使うと、スタイルシートをPHPで読み取って処理した上で出力します。CSS内のコメントによって一部の色を管理画面から変更できるようにしたりするためですが、この機能が既存のCSSでは不具合を起こすことがあります。このような場合は、getThemePath()を使ってみてください。

<link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/flexcrollstyles.css" type="text/css" />


また、Javascriptの読み込み方法もマズイので(@importはCSSの書き方でJavascriptでは使えない)、下記のように変更してみてください。

<script type='text/javascript' src="<?php echo $this->getThemePath(); ?>/flexcroll.js"></script>
 

Re: Re: Re: Re: Javascript の組み込み方を教えてください

2011年8月16日 at 17:33
hissy 様、ありがとうございます。
いとも簡単に表示されました。感激です。(全く初歩的な問題だったようですね。)
しかもこんなにすぐにご回答いただき、感謝いたします。
今後ともよろしくお願いいたします。