Inside a Main Wrapper , I have 5 Divs. The very First div contains 4 Box(box_1, box_2,box_3,box_4) where my click event will occur.
Other 4 divs inside main wrapper , are the content of box_1, box_2, box_3, box_4 respectivly.
All box contain an hyperlink tag with unique Id to Move back to very first div.
For first time, When I click on any menu , corressponding box container appers.
e.g, clicked on redbox > Moved to Box-1 content > Clicked on Back to menu > Moved to 4 Colored box section.
Again clicked on gany box. Lets say , Green box> Moved to Box2 container > Clicked on Back to Menu > Oops !!! My 4 Colored box jut slide out from my screen.
Here is the JS Fiddle lINK. I want the 4 colored div section to stay on the screen.
http://jsfiddle.net/swapnaranjita_nayak/8XcZX/
## HTML ##
<div class="main_wrapper" id="main_wrapper">
<div class="container_fluid" id="menu">
<div class="wrapper">
<div class="row">
<div class="box1" id="box_1"></div>
<div class="box2" id="box_2"></div> <div class="clear"></div>
</div>
<div class="row">
<div class="box3" id="box_3"></div>
<div class="box4" id="box_4"></div> <div class="clear"></div>
</div>
</div>
</div><!---End of Container fluid--->
<div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
<h1>Box1 Content</h1>
Back to #Menu
</div>
<div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
<h1>Box2 Content</h1>
Back to #Menu
</div>
<div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
<h1>Box3 Content</h1>
Back to #Menu
</div>
<div class="container_fluid" id="box_4_sec" style="display:none;margin-right:-170px;">
<h1>Box4 Content</h1>
Back to #Menu
</div>
</div>
css
.container_fluid {
width:100%;
}
.wrapper {
width:1208px;
margin:auto;
}
.row {
padding:3% 3% 3% 3%;
}
.box1 {
height:100px;
width:100px;
background-color:red;
margin-right:2%;
float:left;
}
.box2 {
height:100px;
width:100px;
background-color:green;
margin-right:2%;
float:left;
}
.clear {
clear:both;
}
.box3 {
height:100px;
width:100px;
background-color:black;
margin-right:2%;
float:left;
}
.box4 {
height:100px;
width:100px;
background-color:brown;
margin-right:2%;
float:left;
}
JS
$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});
}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {
$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"+=150%"
},
{
duration: 500,
step: function() {
},
complete: function() {
console.log("finished");
}
});
}
});
});
});
"marginRight":"+=170%"
every time you add 170% or :
"marginLeft":"-=150%"
decrease 150% , this should be set , not increment or decrement the value.
http://jsfiddle.net/prollygeek/8XcZX/1/
$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});
}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {
$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"0%"
},
{
duration: 500,
step: function() {
},
complete: function() {
console.log("finished");
}
});
}
});
});
});
Related
I got these panels which have options to be filtered by Red, Green and Yellow class, and another Show All option. They are behaving ok, but what I would like to achieve is following: When clicked on Show All, and after that on for example on Yellow -> it should hide everything except yellow. Also, you should be able to select only Yellow + Green, Red + Yellow etc., so that only those buttons stay selected then. And when user clicks on all three buttons, it could automatically select "Show All"...
I'm little confused about logic how to set this up so any help would be welcome, thanks a lot!
Here's a pen with example: https://codepen.io/anon/pen/YOgqRX
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
$("#filter-show-all").on('click', function() {
$(".item").each(function(item) {
$(this).removeClass("panel-hide");
$('.main__container').masonry();
});
});
$("#filter-red").on('click', function() {
$(".red").toggleClass("panel-hide");
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
$(".green").toggleClass("panel-hide");
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
$(".yellow").toggleClass("panel-hide");
$('.main__container').masonry();
});
Open my code in codePen:
CodePen
Explainations are comments along with the coding.
Head:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
CSS:
<style>
.main__container {
width: 100%;
}
.item {
width: 100%;
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
padding: 10px;
}
#media(min-width: 800px) {
.item {
width: 49%;
}
}
.red {
background: red;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
/*added css*/
.on{
border: 3px solid blue;
}
.off{
border: none;
}
</style>
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="filters">
<button id="filter-show-all" class="on">Show all</button>
<button id="filter-red" class="on">Show red</button>
<button id="filter-green" class="on">Show green</button>
<button id="filter-yellow" class="on">Show yellow</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main__container">
<div class="item red">
<h4>Red</h4>
</div>
<div class="item green">
<h4>Green</h4>
</div>
<div class="item red">
<h4>Red</h4>
</div>
<div class="item yellow">
<h4>Yellow</h4>
</div>
<div class="item yellow">
<h4>Yellow</h4>
</div>
<div class="item green">
<h4>Green</h4>
</div>
</div>
</div>
</div>
</div>
JQuery:
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
/*
Check if clicked button state is 'on' or 'off'
if it is 'on', After click, let matched color block disappear,
if it is 'off', After click, let matched color block show
*/
/* turn showAll button off, hide all the items */
function showAllOff_hideItems(){
if($('#filter-show-all').attr('class')=='on'){
$('#filter-show-all').click();
}
}
$("#filter-show-all").on('click', function() {
if($(this).attr('class')=="on"){
$(".item").each(function(item) {
$(this).hide();
});
}else{
$(".item").each(function(item) {
$(this).show();
});
}
$('.main__container').masonry();
});
$("#filter-red").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".red").hide();
}else{
$('.red').show();
}
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".green").hide();
}else{
$('.green').show();
}
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".yellow").hide();
}else{
$('.yellow').show();
}
$('.main__container').masonry();
});
/* Esstential Coding here : */
$('.filters button').on('click',function(){
if($(this).attr('id')!="filter-show-all"){
/*Toggle the clicked button*/
if($(this).attr('class')=="on"){
$(this).attr('class','off');
}else{
$(this).attr('class','on');
}
}else{
/* if show all button is clicked */
/* if it is on, turn all the buttons off */
if($(this).attr('class')=="on"){
$('.filters button').each(function(){
$(this).attr('class','off');
});
/* if it is off, turn all the buttons on */
}else{
$('.filters button').each(function(){
$(this).attr('class','on');
});
}
}
});
Use this jquery and if it doesn't work then let me know
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
$("#filter-show-all").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".item").each(function(item) {
$(this).toggleClass("panel-hide");
$('.main__container').masonry();
});
}
else{
$(".item").each(function(item) {
$(this).toggleClass("panel-hide");
$('.main__container').masonry();
});
}
});
$("#filter-red").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".red").removeClass("panel-hide");
}
else
{
$(".red").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".green").removeClass("panel-hide");
}
else
{
$(".green").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".yellow").removeClass("panel-hide");
}
else
{
$(".yellow").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
Consider the following piece of HTML:
<div id="outer">
<div id="inner">
<p id="content">
Some content
</p>
</div>
</div>
I can make #inner slide out to the right from the screen using the following jQuery:
$("#slide").animate(
{
'marginLeft':'100%'
},400,
function(){
$(this).slideUp('fast');
$(this).css("margin-right","100%");
$(this).css("margin-left","0");
}
);
However, how can I make that same element, with new content (from AJAX response), slide back in from the left?
I was thinking about resetting the margins (from margin-left:100% to margin-left:0; margin-right:100%) while it was out of view and then use an animation to slide it in from the left:
$("#slide").animate(
{
'marginRight':'0'
},400,
function(){
$(this).slideDown('fast');
}
);
This slides it back into view, but not from the left of the screen. Any ideas? I got the .slideUp() from a different StackExchange question but don't know why it's needed for a horizontal slide.
Simply reset the margin using .css() method:
$(function() {
$("#outer").click(function() {
$(this).animate({
'marginLeft': '100%',
'opacity': 0
}, 200, function() {
//==================================
//call synchronous ajax here or move this block
//to the ajax done callback function
//some ajax change
$(this).css({
"background": "blue"
}).text("came back with new content");
$(this).css({
'marginLeft': '-100%'
});
$(this).animate({
'marginLeft': '0',
'opacity': 1
}, 200);
//=================================
});
});
});
#outer {
width: 100px;
height: 100px;
display: block;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<p id="content">Click Me</p>
</div>
</div>
Reset the margin using .css, check it out here: https://jsfiddle.net/gdjypc7w/2/
JS
function getSummary(id) {
$.ajax({
type: "GET",
url: 'Your URL',
data: "id=" + id,
success: function (data) {
// the data
$('#summary').html(data);
}
});
}
$("button").click(function () {
$("#inner").animate({
marginLeft: $("body").width()
}, 1000, function () {
//$("#content").text(getSummary(id); Use your id here to retrieve new data
$("#content").text("New content");
$("#inner").css("margin-left", "-100%");
$("#inner").animate({
marginLeft: "0px"
}, 1000);
});
});
I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}
first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need
Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/
Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle
I'm trying to do function to sliding new added content, using jQuery slide effect but I can't apply any solutions to put two divs in a single line. How to fix code below to slide from left to the right side by side? Maybe this code is completely to rebuild?
jsFiddle:
jsfiddle
JS:
$(function() {
$("#hello").html("Hello");
$('#edit').toggle(function() {
var newhtml = '<input type="text" id="hello_input" value="" />';
slideNewContent(newhtml);
}, function() {
var newhtml = $("#hello_input").val();
slideNewContent(newhtml);
});
});
function slideNewContent(c) {
$("#slideOut").empty();
$("#slideIn").children().clone().appendTo("#slideOut");
$("#slideIn").find("#hello").html(c);
var slideOut = $("#slideOut");
var slideIn = $("#slideIn");
slideOutIn(slideOut, slideIn);
}
function slideOutIn(outElement, inElement) {
var hideoptions = { "direction": "right", "mode": "hide" };
var showoptions = { "direction": "left", "mode": "show" };
$(outElement).effect("slide", hideoptions, 1000);
$(inElement).effect("slide", showoptions, 1000);
}
HTML:
<div class="span3">
<div id="slider">
<div id="slideIn" class="content">
<span>
<span id="hello"></span>
<button class="btn btn-mini" id="edit">Edit</button>
</span>
</div>
<div id="slideOut" class="content"></div>
</div>
</div>
CSS:
#slider {
/*float:left;*/
display: inline-block;
}
#slideIn {
width: 270px;
/*display: inline;*/
}
#slideOut {
width: 270px;
/*display: inline;*/
}
#hello_input {
width:160px;
}
Edit to this
$(outElement).effect("slide", hideoptions, 0);
$(inElement).effect("slide", showoptions, 0);
I have this jquery sliding text animator. If you look at the example(http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/), the active text that flies in disappears again after it has made its entrance. I would like each animated text to stay there after appearing and wait until all the text has appeared, then all text should disappear and restart again.(so basically instead of each text disappearing after flying in, it should stay visible only until the last text element has appeared, then restart all over)
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('.container .flying-text').css({
opacity: 0
});
$('.container .active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 4000);
var int = setInterval(changeText, 5000);
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
$activeText.animate({
opacity: 0
}, 1000);
$activeText.animate({
marginLeft: "-100px"
});
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
});
</script>
CSS
.container{
width:500px;
margin:0 auto;
color:#FFF;
overflow:hidden;
}
.flying-text{
margin-left:-100px;
color: #fff;
}
HTML
<div class="container">
<div class="flying-text active-text">I believe</div>
<div class="flying-text">I can</div>
<div class="flying-text">Fly</div>
</div>
Thank You for any help
You need to move the fade out code that runs each time.
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) {
$nextText = $('.container .flying-text:first');
// To fade all out _ MOVED FROM OUTSIDE THIS IF
var $allText = $(".container div");
$allText .animate({
opacity: 0
}, 1000);
$allText .animate({
marginLeft: "-100px"
});
}
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
Here is a jsfiddle to illustrate.
UPDATE
Based on some comments, I updated the fiddle to show how you could use jQuery UI effects.