• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 333
  • Last Modified:

jQuery to replace images with content

GOAL:
To fadeIn() the 'company-content' when the logo image is CLICKED ON  _AND/WHILE_ fading out all of the other content in the 'tiles-wrapper' DIV.  The COMPANY CONTENT will be the same width as the full 'tiles-wrapper' display DIV.

THEN...
When the 'company-content' is displayed, the BACK link returns the page to it's original state.

Do I need to use 2 separate UL's with unique class names for 'company-logos' and 'company-content' (= trash the 'li.content-wrapper' idea) vs. the posted code?


**I have actually done this before.  I'm losing my mind.  I can't remember how I did this.  Any suggestions are appreciated.


<div class="tiles-wrapper">
	<ul class="tiles-list">
		<li class="company-wrapper">
			<div class="company-logo"><a class="company-logo-btn" href="#"><img src="company1.png" alt="" border="0" /></a></div>
			<div class="company-content">
				<h1>Company 1</h1>
				<div class="goback"><a class="goback-btn" href="#">&larr; BACK TO ALL</a></div>
			</div>
		</li>
		<li class="company-wrapper">
			<div class="company-logo"><a class="company-logo-btn" href="#"><img src="company2.png" alt="" border="0" /></a></div>
			<div class="company-content">
				<h1>Company 2</h1>
				<div class="goback-btn"><a class="goback-btn" href="#">&larr; BACK TO ALL</a></div>
			</div>
		</li>
		<li class="company-wrapper">
			<div class="company-logo"><a class="company-logo-btn" href="#"><img src="company3.png" alt="" border="0" /></a></div>
			<div class="company-content">
				<h1>Company 3</h1>
				<div class="goback-btn"><a class="goback-btn" href="#">&larr; BACK TO ALL</a></div>
			</div>
		</li>
	</ul>
</div>

Open in new window


Thanks.
0
mar2195
Asked:
mar2195
  • 4
  • 2
2 Solutions
 
Jagadishwor DulalBraces MediaCommented:
0
 
Julian HansenCommented:
Is this the total markup or will there be multiple instances of logos with attached content?

You should look at the fadeToggle() function - hide what you don't want to see and trigger the fadeToggle when the logo is clicked - but depending on what your full content looks like this might require a bit of modification.
0
 
mar2195Author Commented:
@jagadishdulal - not the correct setup, goal or solution.  Thank you tho.

@julianH - The multiple instances is actually part of the originally posted code (only 3 in the example).  "Multiple Instances" meaning... many logos that have their associated content to be displayed.  The final page will have about 27 of these.  I will need a php LOOP to handle this.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mar2195Author Commented:
Here are some images to help describe my end result.

Initial display:
Initial Display
After clicking the COMPANY1 image, jQuery would fade out all other images and fade in the full sized COMPANY1 DETAILS display in the exact area (in the same 'wrapping' DIV).
 Resulting Display

Thanks.
0
 
Jagadishwor DulalBraces MediaCommented:
Wow that's the point see the script:

<script type="text/javascript">
	$(document).ready(function () {
		$('.the-comp').click(function(){
			$(this).each(function(index, element) {
            var id=($(this).attr('id')); 
			$('#compwrapper').hide()
			$('#comdetails'+'-'+id).show();
        });
			
		});
		$('.back').click(function(){
			var pdiv=$(this).parents('div').attr('id');
			var id=pdiv.split("-");
			$(this).hide();
			$('#comdetails'+'-'+id[1]).hide();
			$('#compwrapper').show();
		});
	})
	</script>

Open in new window


And Now get full html with scripts:
<!DOCTYPE html>
<head>
  <title>Test</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		$('.the-comp').click(function(){
			$(this).each(function(index, element) {
            var id=($(this).attr('id')); 
			$('#compwrapper').hide()
			$('#comdetails'+'-'+id).show();
        });
			
		});
		$('.back').click(function(){
			var pdiv=$(this).parents('div').attr('id');
			var id=pdiv.split("-");
			$(this).hide();
			$('#comdetails'+'-'+id[1]).hide();
			$('#compwrapper').show();
		});
	})
	</script>
    
<style type="text/css">
#compwrapper{
	width:600px;
	margin:0 auto;	
}
#compwrapper .the-comp{
	width:190px;
	float:left;
	height:50px;
	background:#CCC;
	margin:0 10px 10px 0;
	display:block;
}
.clear{
	clear:both;
}
</style>
</head>
<body>
<div id="compwrapper">
	<div class="the-comp" id="1">
    
    </div>
    <div class="the-comp" id="2">
    
    </div>
    <div class="the-comp" id="3">
    
    </div>
    <div class="the-comp" id="4">
    
    </div>
    <div class="the-comp" id="5">
    
    </div>
    <div class="the-comp" id="6">
    
    </div>
</div>
<div class="clear"></div>
<div id="comdetails-1" style="display:none">
<p>1. First Company Details</p>
<pre>



</pre>
<div class="back">Back</div>


</div>
<div id="comdetails-2" style="display:none">
<p>2. First Company Details</p>

<pre>



</pre>
<div class="back">Back</div>

</div>
<div id="comdetails-3" style="display:none">
<p>3. First Company Details</p>
<pre>



</pre>
<div class="back">Back</div>


</div>
<div id="comdetails-4" style="display:none">
<p>4. First Company Details</p>

<pre>



</pre>
<div class="back">Back</div>

</div>
<div id="comdetails-5" style="display:none">
<p>5. First Company Details</p>
<pre>



</pre>
<div class="back">Back</div>


</div>
<div id="comdetails-6" style="display:none">
<p>6. First Company Details</p>
<pre>



</pre>
<div class="back">Back</div>


</div>

</body>
</html>

Open in new window

0
 
mar2195Author Commented:
@jagadishdulal ...
Thank you so much for you help.  Your solution works fine.  However, in the time that I was awaiting an answer, I developed my own coding for this.


Full Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>tile2</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".company-logo-btn").on("click",function(){
          $(".company-detail").html($(this).parent().next(".company-content").html()).fadeIn(1000).find(".goback-btn-wrapper").fadeIn();
          $(".tiles-list").hide();
    });
    $("body").on("click",".goback-btn",function(){
          $(".tiles-list").fadeIn();
          $(".company-detail").hide();
    })
});
</script>

<style>
ul.tiles-list {
	padding-left:8px;
}
ul.tiles-list li{
    list-style-type:none;
}
.company-wrapper {
    float:left;
    width:170px;
    height:90px;
    border:solid 1px #B2B2B2;
    text-align:center;
    margin:8px;
    border-radius:5px;
    background: -webkit-linear-gradient(#FBFBFB,#DFDFDF);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
      inset 0 1px 2px rgba(255, 255, 255, 0.75);
    color: #444;
}
.company-content{
    display:none;
}
.company-logo {
	padding-top:33px;
}

.tiles-wrapper {
	padding:24px;
	margin:0 auto;
}
.tiles-wrapper {
   width:580px;
   clear:both;
   padding:0;
}
.tiles-list {
   width:580px;
   clear:both;
   padding:0;
}
.company-detail {
	display:none;
    border:solid 1px #B2B2B2;
    border-radius:6px;
    background: -webkit-linear-gradient(#FBFBFB,#DFDFDF);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
      inset 0 1px 2px rgba(255, 255, 255, 0.75);
    color: #444;font-weight:bold;
    /* W & H = -2px from TOTAL WRAPPER W & H of because of 1px border */
   	width:578px;
}
a.goback-btn {
	display:block;
	padding:24px 0 24px 0;
}
</style>

</head>

<body>
<table align="center">
	<tr>
		<td align="center">

<div align="center" class="tiles-wrapper">
    <ul class="tiles-list">
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);"><span>Company 1</span></a></div>
            <div class="company-content">
                <h1>Company 1</h1>
                <div class="content">
Something about Company1,Something about Company1,Something about Company1,Something about
Company1,Something about Company1,Something about Company1,Something about
Company1,Something about Company1,Something about Company1,Something about
Company1,Something about Company1
				</div> <!-- /content -->
				<div class="goback-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 2</a></div>
            <div class="company-content">
                <h1>Company 2</h1>
                <div class="content">
Something about Company2,Something about Company2,Something about Company2,Something about
Company2,Something about Company2,Something about Company2,Something about
Company2,Something about Company2
				</div> <!-- /content -->
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 3</a></div>
            <div class="company-content">
                <h1>Company 3</h1>
                <div class="content">
Something about Company3,Something about Company3,Something about Company3,Something about
Company3,Something about Company3,Something about Company3,Something about
Company3,Something about Company3
Something about Company3,Something about Company3,Something about Company3,Something about
Company3,Something about Company3,Something about Company3,Something about
Company3,Something about Company3
				</div> <!-- /content -->
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 4</a></div>
            <div class="company-content">
                <h1>Company 4</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 5</a></div>
            <div class="company-content">
                <h1>Company 5</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 6</a></div>
            <div class="company-content">
                <h1>Company 6</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>

        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);"><span>Company 7</span></a></div>
            <div class="company-content">
                <h1>Company 7</h1>
                <div class="content">
Something about Company1,Something about Company1,Something about Company1,Something about
Company1,Something about Company1,Something about Company1,Something about
Company1,Something about Company1,Something about Company1,Something about
Company1,Something about Company1
				</div> <!-- /content -->
				<div class="goback-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 8</a></div>
            <div class="company-content">
                <h1>Company 8</h1>
                <div class="content">
Something about Company2,Something about Company2,Something about Company2,Something about
Company2,Something about Company2,Something about Company2,Something about
Company2,Something about Company2,Something about Company2,Something about
Company2,Something about Company2
				</div> <!-- /content -->
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 9</a></div>
            <div class="company-content">
                <h1>Company 9</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 10</a></div>
            <div class="company-content">
                <h1>Company 10</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 11</a></div>
            <div class="company-content">
                <h1>Company 11</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 12</a></div>
            <div class="company-content">
                <h1>Company 12</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 13</a></div>
            <div class="company-content">
                <h1>Company 13</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 14</a></div>
            <div class="company-content">
                <h1>Company 14</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="javascript:void(0);">Company 15</a></div>
            <div class="company-content">
                <h1>Company 15</h1>
                <div class="goback-btn-wrapper"><a class="goback-btn" href="javascript:void(0);">&larr; BACK TO ALL</a></div>
            </div>
        </li>

    </ul>
    <div class="company-detail"></div>
</div>

		</td>
	</tr>
</table>
<div align="center" style="width:100%;height:200px;background:#ffffde;margin-top:24px;padding-top:24px;"><p>FOOTER</p></div>

</body>
</html>

Open in new window

0
 
mar2195Author Commented:
My code simply handles the project/question more efficiently and elegantly than the other code.  I did wait for a solution, but I had to try to solve the problem myself because I couldn't wait any longer.  Keep in mind, I did assign the 500 points to the 'expert.'
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now