Solved

jQuery to replace images with content

Posted on 2013-05-20
7
321 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
Comment Utility
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
@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 to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:mar2195
Comment Utility
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
Comment Utility
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
Comment Utility
@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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 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

16 Experts available now in Live!

Get 1:1 Help Now