Add blending javascript function to make content fade into another content inside a column / making this work for two separate columns
Question
javascript blending function -----> one content (text,images) inside a column fades into a second content by pressing a square button (either 1 or 2) with also with the option to go back to the first content again.
Full code of the function with animation of the fade effect on one column with two contents can be found here:
Now adding this on 4 columns : result ----> all the 4 columns got distorted, all on one line vertically and the function distorting the column's size.
Code with the 4 columns , as a disaster once the function is added with it's div. NOTE: I used toogle css/html structure for the 4 columns as it's the best layout.In case you're wondering.
How can I add this function correctly on column 1 and 4 (total of 2 columns with this effect)
- Using two columns with this function, will it need a multifunction script ?
what needs to be added make both work?(don't know much on javascript, iam afraid)
- Using two columns with this function, will it need a multifunction script ?
* *The original structure of the columns that supposed to be 2 columns on each row.
* Cannot put all the codes here because there is not enough space to post it here, just mentioning it, have knowledge that most of the time it has to be added. *
1 answers
solution1
1 ACCPTED 2014-02-10 22:55:09
Edit: Try this out The JQuery Fixed JSFiddle and new HTML
Fixed the HTML glitch Fixed HTML AND CSS Newest HTML looks like this
<div class="wrapper">
<div id="outer" class="cf">
<!-- first -->
<div class="holder f_left">
<div class="column">
<div class="column_title">
2014
</div>
<h4>GOLD</h4>
<hr>
<div class="entry-content" id="box1_c1">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj
rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box1_c1 -->
<div class="entry-content" id="box1_c2" style="display: none">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi
rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box1_c2 -->
</div>
<!-- end of column -->
</div>
<!-- end of holder -->
<!-- second -->
<div class="holder f_left">
<div class="column">
<div class="column_title">
2014
</div>
<h4>PEARL</h4>
<hr>
<div class="entry-content" id="box2_c1">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj
rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box2_c1 -->
<div class="entry-content" id="box2_c2" style="display: none">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi
rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box2_c2 -->
</div>
<!-- end of column -->
</div>
<!-- end of holder -->
<!-- third -->
<div class="holder f_left">
<div class="column">
<div class="column_title">
2013
</div>
<h4>ROSE</h4>
<hr>
<div class="entry-content" id="box3_c1">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj
rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box3_c1 -->
<div class="entry-content" id="box3_c2" style="display: none">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi
rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box3_c2 -->
</div>
<!-- end of column -->
</div>
<!-- end of holder -->
<!-- fourth -->
<div class="holder f_left">
<div class="column">
<div class="column_title">
Sep 2013
</div>
<h4>LIME</h4>
<hr>
<div class="entry-content" id="box4_c1">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj
rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box4_c1 -->
<div class="entry-content" id="box4_c2" style="display: none">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi
rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content box4_c2 -->
</div>
<!-- end of column -->
</div>
<!-- end of holder -->
</div>
<!-- end of outer -->
</div>
<!-- end of wrapper -->
JQuery Looks like this:
$(document).on("click", ".square", function () {
var id = $(this).attr("contentId");
var box_name_full = $(this).closest('div.entry-content').attr('id');
var box_split = $(this).closest('div.entry-content').attr('id').split("_");
var box_name = box_split[0];
var box_c = box_split[1];
//alert("box_name_full = " + box_name_full);
//alert("box_name = " + box_name);
//alert("box_c = " + box_c);
if ($("#" + box_name + "_" + id).is(":visible"))
$("#" + box_name + "_" + id).fadeOut("slow").hide();
if (id == "c1") {
//Make the first square box red color
$("div[id^='" + box_name + "'] div.square[contentId='c1']").css('background', 'red');
//Make the second square box gray color
$("div[id^='" + box_name + "'] div.square[contentId='c2']").css('background', '#CCC');
if ($("#" + box_name + "_" + "c2").is(":visible")) {
$("#" + box_name + "_" + "c2").fadeOut("slow").hide();
}
$("#" + box_name + "_" + id).fadeIn('slow').show();
} else if (id == "c2") {
//Make the second square box red color
$("div[id^='" + box_name + "'] div.square[contentId='c2']").css('background', 'red');
//Make the first square box gray color
$("div[id^='" + box_name + "'] div.square[contentId='c1']").css('background', '#CCC');
if ($("#" + box_name + "_" + "c1").is(":visible")) {
$("#" + box_name + "_" + "c1").fadeOut("slow").hide();
}
$("#" + box_name + "_" + id).fadeIn("slow").show();
}
});
I cleaned up the HTML from that JSFiddle
Any time your HTML gets strange just put it into this website http://jsbeautifier.org/ and you will see any mistakes like extra </div> 's etc...
Before the clean up the end of wrapper ended after the first 2 article box's, now it ends all the way at the bottom of all 4 article box's. Still probably javascript errors but this is a start.
Heres the new JSFiddle with the new HTML only New JSFiddle
First problem you will notice when clicking both those red squares is that the second red square is almost right I guess.. but the first default one is wrong.. that's because the HTML is wrong for the first one you will see
first entry content has
<div class="entry-content" id="c1">
Has inside it a
<div id="details">
<div style="display">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
4 different <div> 's
now the second one has
<div class="entry-content" style="display: none" id="c2">
has only
<div class="shadow">
So maybe the first only needs a <div class="shadow"> and nothing else? I could tell you right now that the first one doesn't need <div style="display"> this line does nothing.
Here below is your whole HTML, I've removed the <div style="display> and the </div> from first one only
<body>
<!-- onload="clickMenu('outer','div','more')" -->
<div class="wrapper">
<div id="outer" class="cf">
<div class="column f_left">
<!-- first -->
<div class="holder">
<div class="column_box">
<div class="column_title">
2014
</div>
<h4>GOLD</h4>
<hr>
<div class="entry-content" id="c1">
<div id="details">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash
hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj</p>
<div class="square" contentId="c1">1</div>
<div class="square" contentId="c2">2</div>
</div>
</div>
</div>
</div>
<!-- end of entry-content c1 -->
<div class="entry-content" style="display: none" id="c2">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_left">
<p>SECOND SIDE erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu
tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash hrhqw jrqwlrqwjrytturtu hjshj hafshfash
hrhqw jrqwlrqwjrytturtu</p>
<div class="square" contentId="c1"></div>
<div class="square" contentId="c2"></div>
</div>
<!-- end of shadow -->
</div>
<!-- end of entry-content c2 -->
</div>
<!-- end of post (column_box) -->
</div>
<!-- end of holder -->
</div>
<!-- end of column f_left -->
</div>
<!-- end of outer cf -->
<!-- second -->
<div class="holder">
<div class="column_box">
<div class="column_title">
2014
</div>
<h4>PEARL</h4>
<hr>
<div class="entry-content">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_left f_left">
<p>rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashrjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashrjrw jrwjrwhwrj jarjearjar jrajrajraj ytre
ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi
rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash</p>
<!-- this is disabled.
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>
<br />
<img src="more/rabbit.jpg" alt="rabbit" title="">
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all</p>
</div> <!~~ close more ~~>
-->
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content -->
</div>
<!-- end of column_box -->
</div>
<!-- end of holder -->
<div class="column f_left">
<!-- third -->
<div class="holder">
<div class="column_box">
<div class="column_title">
2013
</div>
<h4>DIAMOND</h4>
<hr>
<div class="entry-content">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_right f_right">
<p>Universe itself is infinite erj rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjshj hafshfash hrhqw
jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwjhjsw jrqwlrqwjhjshj hafshfash hrhqw jrqwlrqwj rrturtu tyyiyiyi rytturtu hjshj hafshfash hrhqw jrqwlrqwj</p>
<!-- disabled content
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>
<br />
<img src="more/rabbit.jpg" alt="rabbit" title="">
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all</p>
</div> <!~~ close more ~~>
-->
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content -->
</div>
<!-- end of column_box -->
</div>
<!-- end of holder -->
<!-- fourth -->
<div class="holder">
<div class="column_box">
<div class="column_title">
Sep 2013
</div>
<h4>ROSE</h4>
<hr>
<div class="entry-content">
<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
<div class="shadow">
<img src="images/ody.png" width="140" height="147" alt="img" class="img_left f_left">
<p>rjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashrjrw jrwjrwhwrj jarjearjar jrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashrjrw jrwjrwhwrj jarjearjar jrajrajraj
ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu
tyyiyiyi rytturtu hjshj hafshfashjrajrajraj ytre ryeyrey rrturtu tyyiyiyi rytturtu hjshj hafshfash</p>
<!--
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>
<br />
<img src="more/rabbit.jpg" alt="rabbit" title="">
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all</p>
</div> <!~~ close more ~~>
-->
</div>
<!-- end of shadow -->
</div>
<!-- end of post -->
</div>
<!-- end of entry-content -->
</div>
<!-- end of column_box -->
</div>
<!-- end of holder -->
</div>
<!-- end of column f_left -->
</div>
<!-- end of wrapper -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JavaScript make AJAX content fade in
How to add fade out after few seconds in append content in javascript
onclick function fade in fade out content carousel
Split div's content in two columns with Javascript
divide a row to separate columns based on content and without two *ngFor iterations
Fade In and Fade Out JavaScript function for all the content div on main page, on click
Make all JavaScript work as normal on ajax content
Add a table inside a Content Controller using javaScript
How to change/add content inside javascript
How to call javascript function inside modal content?
Related Tags