?
Solved

jQuery to replace images with content

Posted on 2013-05-20
7
Medium Priority
?
331 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39183477
0
 
LVL 58

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
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 

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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

752 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