I have an application, part of which is listing posts for a user profile:
<div class="row">
<%#posts.each do |x|%>
<div class="col-lg-4">
<%=x.body%>
</div>
<%end%>
<div class="row">
<div class="col-lg-12" style="border:1px solid black">
dsafasf
</div>
</div>
If i wasn't using dynamic data (lots of posts), this is what i want to happen ultimately (one row of posts shows up - then on click the large row underneath is toggled):
https://jsfiddle.net/nk2vLhhp/2/
However, I am trouble having this work with dynamic data. It is currently just showing one large row at the end of all posts (not just one row of posts). I want one large col-12 row after every three posts
How would i go about doing this? Any help please?
PS: My end, end goal is something like this: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/
There are many ways to do it.
Method 1 :
$('.col-xs-4').click(function() {
$(".explanation").slideUp().remove();
var $desc = $("<div/>", {
class: 'explanation row'
}); //it can contain a close button like the others.
$desc.html($(this).find('.hidden').html());
$(this).closest('.row').after($desc).slideDown();
});
.col-xs-4 {
border: 1px solid black;
}
.col-xs-12 {
border: 1px solid black;
}
.hidden {
display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
post 1
<div class='desc hidden'>Post 1 description</div>
</div>
<div class="col-xs-4">
post 2
<div class='desc hidden'>Post 2 description</div>
</div>
<div class="col-xs-4">
post 3
<div class='desc hidden'>Post 3 description</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
post 5
<div class='desc hidden'>Post 5 description</div>
</div>
<div class="col-xs-4">
post 6
<div class='desc hidden'>Post 6 description</div>
</div>
<div class="col-xs-4">
post 7
<div class='desc hidden'>Post 7 description</div>
</div>
</div>
Method 2 (with animation) :
Almost same as above but instead of creating the div.explanation everytime, simply define it hidden in the html, beneath every row.
https://jsfiddle.net/nk2vLhhp/13/
$('.col-xs-4').click(function(e) {
var $target = $(e.currentTarget);
$('.explanation').hide();
var targetClass = $target.attr('data-target');
$('.' + targetClass).removeClass('hidden').hide().slideDown();
});
.col-xs-4 {
border: 1px solid black;
}
.col-xs-12 {
border: 1px solid black;
}
.hidden {
display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4" data-target='1-content'>
post 1
</div>
<div class="col-xs-4" data-target='2-content'>
post 2
</div>
<div class="col-xs-4" data-target='3-content'>
post 3
</div>
</div>
<div class='row'>
<div class='col-xs-12 explanation hidden 1-content'>Post 1 description</div>
<div class='col-xs-12 explanation hidden 2-content'>Post 2 description</div>
<div class='col-xs-12 explanation hidden 3-content'>Post 3 description</div>
<div>
<div class="row">
<div class="col-xs-4" data-target='4-content'>
post 4
</div>
<div class="col-xs-4" data-target='5-content'>
post 5
</div>
<div class="col-xs-4" data-target='6-content'>
post 6
</div>
</div>
<div class='row'>
<div class='col-xs-12 explanation hidden 4-content'>Post 4 description</div>
<div class='col-xs-12 explanation hidden 5-content'>Post 5 description</div>
<div class='col-xs-12 explanation hidden 6-content'>Post 6 description</div>
<div>
Related
I have a card detail order, I want the whole card to be clickable and it will trigger a button inside the card to bring up the modal details. I've made the code as below but there is a Maximum call stack size exceeded error and also my console.log('clicked') is triggered hundred times.
how to handle this? please help me
$(document).ready(function(){
$(".order-list-detail-container").each(function() {
$(this).on("click", function() {
console.log('clicked')
$(this).find('.order-detail-trigger').click()
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="order-list-detail-container" style="margin-bottom:30px;">
<button class="hidden order-detail-trigger" hx-get="/order-detail" hx-trigger="click" hx-target="#orderDetailModal">Detail Trigger</button>
<!-- Date -->
<div class="date-container">
<span style="display: inline-block; width: 33%" class="date">9 Nov 2021</span>
<div style="width: 33%;"></div>
<div style="width: 33%;"></div>
</div>
<!-- SO Number, Status, Price -->
<div class="order-info-container" style="display:flex; border-bottom: 1px solid gainsboro; margin-bottom: 5px;">
<div class="order-info with-margin-right" style="width: 33%">
<div class="label">Shipping Order Number</div>
<div class="value no-order-value" style="color: #cb4645;">T123456</div>
</div>
<div class="order-info" style="width: 33%">
<div class="label">Status</div>
<div class="value" style="color: #cb4645;">
In Process
</div>
</div>
<div class="order-info-grand-total" style="width: 33%; text-align: right;">
<div class="label">Total</div>
<div class="value">$1200</div>
</div>
</div>
<div class="products-list">
<div class="product-container">
<div class="product-inner-container">
<div class="product-info-container">
<div class="product-name">Grinder 6", RBG6</div>
<div class="product-catalog-code">RBG6</div>
<div class="product-detail-info">
<div class="product-metadata">
<span class="product-qty">3 Product</span>
<div class="product-weight">(8 kg)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="order-list-detail-container">
<button class="hidden order-detail-trigger" hx-get="/order-detail" hx-trigger="click" hx-target="#orderDetailModal">Detail Trigger</button>
<!-- Date -->
<div class="date-container">
<span style="display: inline-block; width: 33%" class="date">9 Nov 2021</span>
<div style="width: 33%;"></div>
<div style="width: 33%;"></div>
</div>
<!-- SO Number, Status, Price -->
<div class="order-info-container" style="display:flex; border-bottom: 1px solid gainsboro; margin-bottom: 5px;">
<div class="order-info with-margin-right" style="width: 33%">
<div class="label">Shipping Order Number</div>
<div class="value no-order-value" style="color: #cb4645;">T127890</div>
</div>
<div class="order-info" style="width: 33%">
<div class="label">Status</div>
<div class="value" style="color: #cb4645;">
In Process
</div>
</div>
<div class="order-info-grand-total" style="width: 33%; text-align: right;">
<div class="label">Total</div>
<div class="value">$1800</div>
</div>
</div>
<div class="products-list">
<div class="product-container">
<div class="product-inner-container">
<div class="product-info-container">
<div class="product-name">Grinder 8", RBG8</div>
<div class="product-catalog-code">RBG8</div>
<div class="product-detail-info">
<div class="product-metadata">
<span class="product-qty">2 Product</span>
<div class="product-weight">(3 kg)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Working example. You only need to make trigger for a button when you click Container. And when you click button - it's default button behavior. In both ways you will now have hx-get working.
$(document).ready(function() {
$('.order-list-detail-container').on('click.div', function() {
$('.order-detail-trigger').trigger('click.button');
console.log('clicked');
});
Update 1: If you want different buttons and cards to do different stuff, add numbered ID's for buttons and DIV's use this code:
$('#order-list-detail-container-1').on('click.div',function(){
$('#order-detail-trigger-1').trigger('click.button' );
console.log('1 button or DIV clicked');
});
$('#order-list-detail-container-2').on('click.div',function(){
$('#order-detail-trigger-2').trigger('click.button' );
console.log('2 button or DIV clicked');
});
// duplicate the code block for amount of buttons with Divs you are going to have
Update 2: Added functionality to create ID dynamically to every button and DIV. So you won't need to add any ID's manually when you will create more cards! Also, every button or div click will be counted as individual click and button 1 click won't trigger button 2 clicks:
$('.order-detail-trigger').each(function(index) {
$(this).attr('id', 'button-' + index);
});
$('.order-list-detail-container').each(function(index) {
$(this).attr('id', 'container-' + index);
});
$( document ).ready(function() {
$('.order-list-detail-container').each(function(index) {
$('#container-' + index).on('click.div',function() {
$('#button-' + index).trigger('click.button');
let test = $('#container-' + index).attr('id');
let test2 = $('#button-' + index).attr('id');
//console.log('clicked');
console.log(test + ' clicked!');
console.log(test2 + ' AUTO clicked!');
});
});
});
Uncomment //console.log('clicked'); to see that clicking DIV or Button - it only happens 1 time:
I have an HTML table which is as following
Some of the code is below:
<table>
<tr>
<td>
<div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 103px; width:80px;" class="location-block">
<div class="city-img">
<img src="worldwide-location.png" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
<td>
<div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 50px; width:80px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
<div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
the table looks like the following:
enter image description here
As you can see the white space between each column, I am trying to reduce the white spaces between them, but this is not happening, I have tried padding-left and also gave cell spacing to the table, its not changing, can anyone tell me whats wrong with my code? Thanks in advance.
If you decide to use Bootstrap grid you can avoid to use HTML table tag, and use a structure like this:
<div class="row">
<div class="col margin-col">
<div>Images and content 1</div>
</div>
<div class="col margin-col">
<div>Images and content 2</div>
</div>
</div>
usign a proper CSS rule like this to set padding (inside columns) and margin (outside columns):
.margin-col{
padding: 10px;
margin: 20px;
}
I am new in javascript,i have a page consist of different Card layouts and each card has its own chart or buttons or grids,some of them should be hidden by default and some of them should be hide or visible by click,since the page is growing by more demands ,controlling these hid/e/show is becoming a nightmare,i would like you tell me whats the best way to do this?for example i have a following div which has a chart:
<section style="width:100%;margin-top:2%;" >
<div id="btnCurrentStatID" class="card ShowHide" style="float:right;width:20%;height:350px;display:none;">
<div class="wrapper">
<div class="containerBtns" style="width:100%;float:right" >
<button type="button" id="btnErrorStat" class="btnsForCrew-Common "></button>
<button type="button" id="btnIdle" class="btnsForCrew-Common "></button>
<button type="button" id="btnService" class="btnsForCrew-Common "></button>
<button type="button" id="btnLinkDn" class="btnsForCrew-Common"></button>
<button type="button" id="btnDataIn" class="btnsForCrew-Common" ></button>
<button type="button" id="btnrepOff" class="btnsForCrew-Common"></button>
</div>
</div>
</div>
<div id="faultStatChartID" class="card ShowHide" >
<div id="chart">
</div>
</div>
<div id="pieChartID" class="card ShowHide">
<div id="pieChart"></div>
</div>
</section>
<section style="width:100%;float:left;margin-top:3%;" id="faultStatSubGroupsSec">
<div id="subcatNameChartSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subcatNameChart"></div>
</div>
</div>
<div id="subcatErrorChartSectionID" class="card" style="width:49%;float:right;display:none">
<div class="container">
<div id="subcatErrorChart"></div>
</div>
</div>
<div id="subCatIdnameSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subCatIdname"></div>
</div>
</div>
<div id="subCatITurNameSectionID" class="card"style="width:49%;float:right;display:none">
<div class="container">
<div id="subCatITurName"></div>
</div>
</div>
<div></div>
<div></div>
</section>
i gave it showhide class,and by default its hidden,when i click on filter button it will be visible,and other divs should be hidden,it this continues,imagine how many time i should do it and manage to control them all,
$(".ShowHide").css("display", "block");
$("#subcatNameChartSectionID").hide();
$("#subcatErrorChartSectionID").hide();
$("#subCatIdnameSectionID").hide();
$("#subCatITurNameSectionID").hide();
A way would be to use a class for hiding.
.hide {
display: none;
}
And a hideable class for accessing every item that should be able to be hidden. The class hide can be added to hide the element.
<div class="hideable">1 hideable</div>
jQuery offers methods for class manipulation:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
Here is the full snippet code:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="unique1" class="hideable">
1 hideable
</div>
<div id="unique2" class="hideable">
2 hideable
</div>
<div id="unique3" class="hideable hide">
3 hideable
</div>
<div id="unique4" class="hideable hide">
4 hideable
</div>
<div id="unique5" class="hide">
5 other
</div>
below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?
Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>
Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));
In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>
Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>
I'm doing a jeopardy board, and I've given each div (each question square) an id in the index.html so when it's clicked, the correct question appears. I also wanted to set the point value for each div based on its id, so I used the jquery .is and this if/else statement. I've only done the code for A1 and A2, but while A2 should be worth $200, it's coming back worth $100. Why?
if ($('.well').is('#A1', '#B1', '#C1', '#D1', '#E1')) {
questionValue = 100;
}
else if ($('.well').is('#A2', '#B2', '#C2', '#D2', '#E2')) {
questionValue = 200;
}
else if ($('.well').is('#A3', '#B3', '#C3', '#D3', '#E3')) {
questionValue = 300;
}
else if ($('.well').is('#A4', '#B4', '#C4', '#D4', '#E4')) {
questionValue = 400;
}
else if ($('.well').is('#A5', '#B5', '#C5', '#D5', '#E5')) {
questionValue = 500;
}
Thank you in advance. Please let me know if I should include any more code. .well is the div class for the question squares.
Adding html code
<div id="wrapper">
<div class="row">
<div class="title"><h2></h2></div>
<div class="question">
<form> Your Answer:
<input type="text" id="answer" /></form>
<button id="submit">Submit</button>
<p id="instruct">When you're sure about your probably wrong answer, click submit</p>
<!-- <div class = "result"> </div> -->
</div>
</div>
<div class="row">
<div class="well" id="A1"> <p>$100</p> </div>
<div class="well" id="B1"> <p>$100</p> </div>
<div class="well" id="C1"> <p>$100</p> </div>
<div class="well" id="D1"> <p>$100</p> </div>
<div class="well" id="E1"> <p>$100</p> </div>
</div>
<div class="row">
<div class="well" id="A2"> <p>$200</p> </div>
<div class="well" id="B2"> <p>$200</p> </div>
<div class="well" id="C2"> <p>$200</p> </div>
<div class="well" id="D2"> <p>$200</p> </div>
<div class="well" id="E2"> <p>$200</p> </div>
</div>
<div class="row">
<div class="well" id="A3"> <p>$300</p> </div>
<div class="well" id="B3"> <p>$300</p> </div>
<div class="well" id="C3"> <p>$300</p> </div>
<div class="well" id="D3"> <p>$300</p> </div>
<div class="well" id="E3"> <p>$300</p> </div>
</div>
<div class="row">
<div class="well" id="A4"> <p>$400</p> </div>
<div class="well" id="B4"> <p>$400</p> </div>
<div class="well" id="C4"> <p>$400</p> </div>
<div class="well" id="D4"> <p>$400</p> </div>
<div class="well" id="E4"> <p>$400</p> </div>
</div>
<div class="row">
<div class="well" id="A5"><p>$500</p> </div>
<div class="well" id="B5"><p>$500</p> </div>
<div class="well" id="C5"><p>$500</p> </div>
<div class="well" id="D5"><p>$500</p> </div>
<div class="well" id="E5"><p>$500</p> </div>
</div>
<h3> score = </h3>
<div class = "score">0</div>
</div>
And this is how I'm doing each question.
$("#A1").click(function() {
$(".question").show();
$('<h4>The \"MVP\" quarterback whose team is 14-6 when he doesn’t play.</h4>').appendTo('.question');
$('#submit').click(function() {
$("#answer").on('input')
var answer = $('#answer').val(); //what does this mean in words?
if
(answer == "Tom Brady" || answer == "Brady" || answer == "brady" || answer == "tom brady") {
$('.question').replaceWith('<h3>omg you\'re so smart</h3>') //using h3 because it'll be unique, but there must be a better way
score += questionValue;
$(".score").text("$" + score);
}
else
{
$('.question').replaceWith('<h3>could NOT have been more wrong</h3>');
score -= questionValue;
$(".score").text("$" + score);
}
});
});
Whatever you have implemented so far may be correct but I guess its very difficult to maintain that code. Also for any new person t will be quite uneasy to understand that logic. Please have a look at below approach. You may refer it and take an idea out of it:
$(document).ready(function() {
$(".well").click(function() {
var quesVal = $(this).data("questionvalue"); //reading the questionvalue associated with each question
alert(quesVal);
});
});
.questionContainer {
width: 250px;
}
.questionContainer .well {
height: 40px;
width: 40px;
border: 1px solid red;
margin-left: 5px;
margin-top: 5px;
float: left;
/*Here you can also use display: inline-block instead of float:left*/
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="questionContainer">
<!--Putting question value in each and every box along with id and class as a data- attribute -->
<div class="well" id="A1" data-questionvalue="100">A1</div>
<div class="well" id="B1" data-questionvalue="100">B1</div>
<div class="well" id="C1" data-questionvalue="100">C1</div>
<div class="well" id="D1" data-questionvalue="100">D1</div>
<div class="well" id="E1" data-questionvalue="100">E1</div>
<div class="well" id="A2" data-questionvalue="200">A2</div>
<div class="well" id="B2" data-questionvalue="200">B2</div>
<div class="well" id="C2" data-questionvalue="200">C2</div>
<div class="well" id="D2" data-questionvalue="200">D2</div>
<div class="well" id="E2" data-questionvalue="200">E2</div>
</div>
You can try this way
$('.well').click(function(){
if ($(this).is('#A1')||$(this).is('#B1')||$(this).is('#C1')||$(this).is('#D1')||$(this).is('#E1')) {
alert(100);
}
else if ($(this).is('#A2') ||$(this).is('#B2')||$(this).is('#C2')||$(this).is('#D2')||$(this).is('#E2')) {
alert(200);
}
})
it may be length way but works.
Fiddle test
Simplification (this does not address your particular implementation – but simplifies it in a way that could fix your problem)
You could use classes instead of using specific IDs for each cell, and have 5 of each 1 through 5 and A through E:
<div class="row"> <!-- row 1 -->
<div class="r1 a"></div>
<div class="r1 b"></div>
<!-- blah blah -->
<div class="r5 d"></div>
<div class="r5 e"></div>
</div> <!-- row 5 -->
For reference: I use r as a first letter because you can't start a class name with a number.
Then in your JavaScript:
if($('.well').is('.r1')) questionValue = 100;
and so on.
For reference: You can skip the curlybraces {} in an if statement if the contents are one line (such as in this example).