Solved

jQuery to replace images with content

Posted on 2013-05-20
7
327 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 55

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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

838 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