Solved

jQuery to replace images with content

Posted on 2013-05-20
7
326 Views
Last Modified: 2013-05-30
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
Comment
Question by:mar2195
  • 4
  • 2
7 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39183477
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39183554
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
 

Author Comment

by:mar2195
ID: 39185415
@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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:mar2195
ID: 39185683
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
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 500 total points
ID: 39196350
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
 

Accepted Solution

by:
mar2195 earned 0 total points
ID: 39196392
@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
 

Author Closing Comment

by:mar2195
ID: 39207048
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now