...

View Full Version : can javascript command <script> be put in CSS file?



nickphonics18
05-22-2010, 12:42 PM
basically im doing a website, and i want to have javascript rotating a few tinted background images fading in to the next image...

but i want to have the body text over the image.

i have made the image fade in work but when you put text in the div it pushes it below the image. the script code is placed in the div like so...


<script type="text/javascript">
new fadeshow(fadeimages, 950, 545, 0, 4000, 1, "R")

</script>;


if it was a simply background image id just place the image as a background in the CSS so text will flow over it, but person im doing it for wants mulitple fade in images!

so what i was wondering.....is it possible to place the above command script into the CSS file under the 'background-image:' ???

if so how does it need to be typed??

thanks

VIPStephan
05-22-2010, 12:50 PM
No, you can’t. You’ll have to position the images absolutely behind the text content or the text in an own element in front of the images in order to get it layered.

nickphonics18
05-22-2010, 12:57 PM
ok thanks will try that. how do i make the absolute positioned div move with the browser resize? as i have my site centred at a 950px width

nickphonics18
05-22-2010, 01:30 PM
managed to position the absolute divs but.....the image is still going over the top of text, and text is moving to the left

this what i done....


<div id="home-content">

<div id="home-text">
<p>text here</p>
</div>

<div id="home-background">
<script type="text/javascript">
new fadeshow(fadeimages, 950, 545, 0, 4000, 1, "R")
</script>
</div>


</div>

'home-text' (Z-set to 10) and 'home-background' (Z-set to 1) are positioned absolute.

this is what is happening... http://img13.imageshack.us/img13/1086/layeringproblem.jpg (by the way that isnt the actual image just a one im using to test to get it working haha)

do i need to float any divs or have a clear div etc????

VIPStephan
05-22-2010, 01:39 PM
A link to the site or your entire code would help tremendously to find a solution.

nickphonics18
05-22-2010, 01:45 PM
its not hosted yet! can zip it up and email if you like

VIPStephan
05-22-2010, 02:22 PM
No, post the code, that should suffice, too.

nickphonics18
05-22-2010, 02:54 PM
<body onload="MM_preloadImages('images/home2.png','images/courses2.png','images/contact2.png','images/trainers2.png')">
<div id="container">
<table width="1000" border="0" cellpadding="0" cellspacing="0" id="header">
<tr>
<td width="300" rowspan="2"><img src="images/enrich-training-logo.png" width="287" height="219" alt="Enrich Training Logo" /></td>
<td height="151" colspan="7"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="169" id="FlashID" title="Grow Empower Strengthen Trust">
<param name="movie" value="images/animation.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/animation.swf" width="700" height="169">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></td>
</tr>
<tr>
<td width="4" valign="bottom">&nbsp;</td>
<td width="116" valign="bottom"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home Tab','','images/home2.png',1)"><img src="images/home1.png" alt="Home" name="Home Tab" width="116" height="60" border="0" id="Home Tab" /></a></td>
<td width="116" valign="bottom"><a href="courses.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Courses Tab','','images/courses2.png',1)"><img src="images/courses1.png" alt="Courses" name="Courses Tab" width="116" height="60" border="0" id="Courses Tab" /></a></td>
<td width="116" valign="bottom"><a href="trainers.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Trainers Tab','','images/trainers2.png',1)"><img src="images/trainers1.png" alt="Trainers" name="Trainers Tab" width="116" height="60" border="0" id="Trainers Tab" /></a></td>
<td width="116" valign="bottom"><a href="friends.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Friends','','images/friends2.png',1)"><img src="images/friends1.png" alt="Friends" name="Friends" width="116" height="60" border="0" id="Friends" /></a></td>
<td width="116" valign="bottom"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Tab','','images/contact2.png',1)"><img src="images/contact1.png" alt="Contact" name="Contact Tab" width="116" height="60" border="0" id="Contact Tab" /></a></td>
<td width="116" valign="bottom"><a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery Tab','','images/gallery2.png',1)"><img src="images/gallery1.png" alt="Gallery" name="Gallery Tab" width="116" height="60" border="0" id="Gallery Tab" /></a></td>
</tr>
</table>
<!-- InstanceBeginEditable name="maincontent" -->

<div id="home-content">

<div id="home-text">
<p>Enrich provides bespoke training courses, specialising in the domiciliary and residential care sector.
Our accessible and engaging training is brought to life by a dedicated and passionate team who have decades of experience and a wealth of illustrative stories to share.
Our trainer's knowledge is imparted in a relaxed environment where delegates receive the most current and relevant information through thought-provoking practical examples and lively discussions. We can tailor courses specifically for your needs, interspersing your own unique requirements with mandatory training material.
enrich training was born from a strong desire to inspire an individual to be the very best they can be.
Through our training courses your organisation will gain exceptional ambassadors at work in the community who are making a tangible difference to people’s lives.</p>
</div>



<div id="home-background">
<script type="text/javascript">
new fadeshow(fadeimages, 950, 545, 0, 4000, 1, "R")
</script>
</div>

<div class="clear"></div>
</div>


<!-- InstanceEndEditable -->
<div id="footer">Please contact us for more information:<br />
Tel: 01304 829235 Mob: 07540 782794 Email: <a href="mailto:info@enrich-training.co.uk">info@enrich-training.co.uk</a></div>

</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>

nickphonics18
05-22-2010, 02:57 PM
css for home content, text, background...


#home-content {
height: 545px;
width: 950px;
margin-left: 50px;

}
#home-text {
position: absolute;
width: 950px;
z-index: 10;
visibility: visible;
float: left;
}

#home-background {
height: 545px;
width: 950px;
position: absolute;
z-index: 1;
visibility: visible;
float: left;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum