Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    can javascript command <script> be put in CSS file?

    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...

    Code:
    <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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    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.

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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....

    Code:
    <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/108...ingproblem.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????

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    A link to the site or your entire code would help tremendously to find a solution.

  • #6
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    its not hosted yet! can zip it up and email if you like

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    No, post the code, that should suffice, too.

  • #8
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <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>

  • #9
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    css for home content, text, background...

    Code:
    #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;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •