Forums

spuncky

Hi there-
Using the fading jquery menu/content code from here:

http://css-tricks.com/learning-jquery-f ... g-content/

it's works great, but i have a problem with divs which are inside at "content"--> inside "photo" for instance. I want to try more divs inside the buttons.when i write some divs inside photo no fading is shown and the content is not shown,..why? I think the poblem is the javascript code but im not smart enough to find and write javascript code to solve the problem..can someone help me?

the javascript code:


// JavaScript Document
$(function(){
		
			$(\"#about-button\").css({
				opacity: 0.3
			});
			$(\"#contact-button\").css({
				opacity: 0.3
			});
			$(\"#design-button\").css({
				opacity: 0.3
			});
			$(\"#flashdesign-button\").css({
				opacity: 0.3
			});
			$(\"#photo-button\").css({
				opacity: 0.3
			});	
			$(\"#page-wrap div.button\").click(function(){
				
				$clicked = $(this);
				
				// if the button is not already \"transformed\" AND is not animated
				if ($clicked.css(\"opacity\") != \"1\" && $clicked.is(\":not(animated)\")) {
					
					$clicked.animate({
						opacity: 1,
						borderWidth: 5
					}, 600 );
					
					// each button div MUST have a \"xx-button\" and the target div must have an id \"xx\" 
					var idToLoad = $clicked.attr(\"id\").split('-');
					
					//we search trough the content for the visible div and we fade it out
					$(\"#content\").find(\"div:visible\").fadeOut(\"fast\", function(){
						//once the fade out is completed, we start to fade in the right div
						$(this).parent().find(\"#\"+idToLoad[0]).fadeIn();
					})
				}
				
				//we reset the other buttons to default style
				$clicked.siblings(\".button\").animate({
					opacity: 0.5,
					borderWidth: 1
				}, 600 );
				
			});
		});

and here is something i tried to build... see at photo!


 <div id=\"content\"><!-- CONTENT-->

    <div id=\"about\"> 
    <a href=\"http://hannes.mindmaze.de\" target=\"_blank\">Hannes' Portfolio 2009</a>
     </div>
    <div id=\"contact\">
        <p>saskdasjdkajsndkajklllklllllllll</p>
    </div>
    <div id=\"design\">
<!--            <object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\" width=\"850\" height=\"600\">
          <param name=\"movie\" value=\"iTunesAlbumArt.swf\">
          <param name=quality value=high>
          <param name=\"wmode\" value=\"transparent\">
          <embed src=\"iTunesAlbumArt.swf\" width=\"500\" height=\"400\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=								\"application/x-shockwave-flash\" wmode=\"transparent\"></embed>
        </object>-->
    </div>
    <div id=\"photo\">
  <div id=\"test\">
  <p> askldjkladlkj</p>
  </div>
    </div>
   </div><!-- CONTENT ENDE-->
</div><!-- WRAP ENDE-->
</body>
</html>

the divs about , contact, design works but div in div not...

thanks for help

spuncky

jamy_za

This is just a work around, but how necessary is it to have the div inside the div? What is it you are trying to do? I am fairly certain you don't need an extra div to achieve that.

spuncky

Hey jamy_za,

well, i want to add a sliding menu, also from this side: ;)

http://css-tricks.com/examples/MovingBoxes/

i tried to add this code inside my divs but the content is not fading out/in.

here you can see it:

http://mindmaze.de/hannes/Portfolio2009/design.html

here i have tried to use more than one html side, and i put the content/the sliding menu directly inside from the div,but there is no fading and the menus are jumping.

but i think this is not a good idea, i want to call the specials divs with content in one html side. like here:

<div id=\"content\"><!-- CONTENT-->

    <div id=\"about\">
    <a href=\"http://hannes.mindmaze.de\" target=\"_blank\">Hannes' Portfolio 2009</a>
     </div>
    <div id=\"contact\">
        <p>saskdasjdkajsndkajklllklllllllll</p>
    </div>
    <div id=\"design\">
<!--            <object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\" width=\"850\" height=\"600\">
          <param name=\"movie\" value=\"iTunesAlbumArt.swf\">
          <param name=quality value=high>
          <param name=\"wmode\" value=\"transparent\">
          <embed src=\"iTunesAlbumArt.swf\" width=\"500\" height=\"400\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=                        \"application/x-shockwave-flash\" wmode=\"transparent\"></embed>
        </object>-->
    </div>
    <div id=\"photo\">
  <div id=\"test\">
  <p> askldjkladlkj</p>
  </div>
    </div>
   </div><!-- CONTENT ENDE-->
</div><!-- WRAP ENDE-->
</body>
</html>

the div photo is called from javascript code, but the div inside is not recognized.

and this is how i look like if i add the menu inside the div:

<div id=\"content\"><!-- CONTENT-->

    <div id=\"about\">
    <a href=\"http://hannes.mindmaze.de\" target=\"_blank\">Hannes' Portfolio 2009</a>
     </div>
    <div id=\"contact\">
        <p>saskdasjdkajsndkajklllklllllllll</p>
    </div>
    <div id=\"design\">
<!--            <object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\" width=\"850\" height=\"600\">
          <param name=\"movie\" value=\"iTunesAlbumArt.swf\">
          <param name=quality value=high>
          <param name=\"wmode\" value=\"transparent\">
          <embed src=\"iTunesAlbumArt.swf\" width=\"500\" height=\"400\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=                        \"application/x-shockwave-flash\" wmode=\"transparent\"></embed>
        </object>-->
    </div>
    <div id=\"photo\">
  <div id=\"test\">
  

        <div id=\"slider\">    

            <img class=\"scrollButtons left\" src=\"images/leftarrow.png\">

			<div style=\"overflow: visible;\" class=\"scroll\">
	
				<div class=\"scrollContainer\">
	
	                <div class=\"panel\" id=\"panel_1\">
						<div class=\"inside\">
							<img src=\"images/1.jpg\" alt=\"picture\" />
							<h2>Heading</h2>

							<p>beschreibung...<a href=\"#\">more link</a></p>
						</div>
					</div>

	                <div class=\"panel\" id=\"panel_2\">
						<div class=\"inside\">
							<img src=\"images/2.jpg\" alt=\"picture\" />
							<h2>Heading</h2>

							<p>beschreibung... <a href=\"#\">more link</a></p>
						</div>
					</div>
				
	                <div class=\"panel\" id=\"panel_3\">
						<div class=\"inside\">
							<img src=\"images/3.png\" alt=\"picture\" />
							<h2>Heading</h2>

							<p>beschreibung... <a href=\"#\">more link</a></p>
						</div>
					</div>
					
					<div class=\"panel\" id=\"panel_4\">
						<div class=\"inside\">
							<img src=\"images/4.jpg\" alt=\"picture\" />
							<h2>Heading</h2>

							<p>beschreibung... <a href=\"#\">more link</a></p>
						</div>
					</div>
					
					<div class=\"panel\" id=\"panel_5\">
						<div class=\"inside\">
							<img src=\"images/5.jpg\" alt=\"picture\" />
							<h2>Heading</h2>

							<p>beschreibung...<a href=\"#\">more link</a></p>
						</div>
					</div>
				
                <div class=\"panel\" id=\"panel_6\">
						<div class=\"inside\">
							<img src=\"images/6.jpg\" alt=\"picture\" />
							<h2>Heading</h2>

							<p>beschreibung...<a href=\"#\">more link</a></p>
						</div>
					</div>
                    
                    <div class=\"panel\" id=\"panel_7\">
						<div class=\"inside\">
							<img src=\"images/7.jpg\" alt=\"picture\" />
							<h2>Heading</h2>

							<p>beschreibung... <a href=\"#\">more link</a></p>
						</div>
					</div>
                    
                     <div class=\"panel\" id=\"panel_8\">
						<div class=\"inside\">
							<img src=\"images/8.jpg\" alt=\"picture\" />
							<h2>Heading</h2>

							<p>beschreibung... <a href=\"#\">more link</a></p>
						</div>
					</div>
                
                  <div class=\"panel\" id=\"panel_9\">
						<div class=\"inside\">
							<img src=\"images/9.jpg\" alt=\"picture\" />
							<h2>Heading</h2>

							<p>beschreibung... <a href=\"#\">more link</a></p>
						</div>
					</div>
                
                </div>

				<div id=\"left-shadow\"></div>
				<div id=\"right-shadow\"></div>

            </div>

			<img class=\"scrollButtons right\" src=\"images/rightarrow.png\">

        </div>
  </div>
    </div>
   </div><!-- CONTENT ENDE-->
</div><!-- WRAP ENDE-->
</body>
</html>

buuuut it doesn't work...merry christmas

jamy_za

Why don't you try making the div.#slider a span instead. and also try making the #slider a .slider. I'm not able to change the javascript with firebug :( or maybe I can, but I'm still a noob with firebug lol.

Edit: Try this script: http://www.stunicholls.com/various/tabbed_pages.html
You can add the jquery fade on click ontop of that. And there shouldn't be any div restrictions or anything.

spuncky

ah ok thanks, i will try it....

kobylecki

"spuncky" said:

the javascript code:


// JavaScript Document
$(function(){
		
			$(\"#about-button\").css({
				opacity: 0.3
			});
			$(\"#contact-button\").css({
				opacity: 0.3
			});
			$(\"#design-button\").css({
				opacity: 0.3
			});
			$(\"#flashdesign-button\").css({
				opacity: 0.3
			});
			$(\"#photo-button\").css({
				opacity: 0.3
			});

I think instead of this ^ is better to write like this:


// JavaScript Document
$('#id1, #id2, #id3, #id4').css(...);

Am I right? This question is for the specialists of jQuery.

spuncky

jup you are right, it have the same functionality and less code, thanks ;)

treehouse : what would you like to learn today?

Forums

div in div at" Learning jQuery: Fading Menu"