put eq() of each panel in the title - javascript

<div class="panel panel-default">
<div class="panel-heading">--Here should say 1--</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">--Here should say 2--</div>
<div class="panel-body">
Panel content
</div>
</div>
the following should put if its the 1'st 2'nd 3'rd... panel in the panel header
$(".panel .panel-heading").append($(this).eq());

Use .html() followed by function like below :
$('.panel-heading').html( function ( i, old ) {
return ( i + 1 );
});
DEMO
Did't fully understand what this statement mean the following should put if its the 1'st 2'nd 3'rd, is it you want to put the content only for panel element 1st, 2nd and 3rd only even exist more than that? If that's the case :
$('.panel-heading').html( function ( i, old ) {
if ( i < 3 ) return ( i + 1 );
});

You need to use jquery each along with the index() function with of the panel heading element within the panel heading list.
Elements indexes start from 0 so you need to add 1 to it to view proper numbering:
$(".panel .panel-heading").each(function(){
$(this).append($(this).index('.panel-heading') + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
Panel content
</div>
</div>

$('.panel .panel-heading').each(function(k,v){ $(v).text(k); });
// or if you want to start from 1:
$('.panel .panel-heading').each(function(k,v){ $(v).text(k + 1); });

Related

How to get element position in hidden tab-panel?

There is a script that works fine if the tab-panel is not hidden, but I need to count position, width of the element without to do action with tab-panel display , because that script i use beyond tab-panel like only ".swipeTab".
P.S. Sorry for my English ...
For example:
<div class="tab-panel" style="display: none">
<div class="swipeTab">
<div class="swipeTab__list">
<div class="swipeTab__item">TAB 1</div>
<div class="swipeTab__item">TAB 2</div>
<div class="swipeTab__item">TAB 3</div>
<div class="swipeTab__item">TAB ...</div>
</div>
</div>
</div>
Part of script
var target = $('.swipeTab__item'),
list= $('.swipeTab__list');
position: function(target) {
return {
left : $(target).position().left,
right : parseInt($(list).outerWidth()) - parseInt($(target).position().left) - parseInt($(target).outerWidth())
}
}

How to hide panel-body is empty?

I want to hide panel-body if it is empty.
Here's the example: BootPly
Code Javascript:
$(function() {
$('#container').load(function() {
if($.trim($(this).contents().find("container").find('panel-body').length) == 0) {
$(this).hide();
}
});
Code HTML:
<div class="container">
<div class="row clearfix">
<div class="col-md-9 column">
<div class="panel panel-primary">
<div class="panel-heading">Content</div>
<div class="panel-body fixed-panel">
<div class="form-group">
</div>
</div>
</div>
</div>
</div>
</div>
How about something like this? http://www.bootply.com/bKb0isdzKA
$(function() {
$('.form-group').each(function() {
if ($(this).is(':empty')) {
$(this).closest('.container').hide();
}
});
});
You had a few issues. For one, you were using #container as your selector, despite container being a class. Additionally, you were checking to see if body-panel was empty, but it contained a child div, so it would always have HTML content.
The code above will loop through each .form-group and hide the parent container if it's empty.
If this isn't exactly what you had in mind, let me know and I can make adjustments.

Bootstrap Angular.js accordion not auto collapsing

I'm trying to generate an accordion with ng-repeat much as shown in the following sample:
<div class="panel-group" id="accordion">
<div ng-repeat="One_Item in Items_List track by One_Item.Item_ID">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion_{{One_Item.Item_ID}}" href="This_Page/#collapse_{{One_Item.Item_ID}}">
{{One_Item.Item_ID}}</a>
</h3>
</div>
<div class="panel-collapse collapse in" id="collapse_{{One_Item.Item_ID}}">
<div class="panel-body">
<div class="form-group" style="margin:0px 0px 5px -15px">
<label class="control-label col-sm-3">For Item-ID {{One_Item.Item_ID}} the related text is {{One_Item.Text}}</label>
<!--- Other stuff... -->
</div>
</div>
</div>
</div>
</div>
</div>
All works OK (in terms of the data being shown), except that when expanding on entry in the accordion, other entry(ies) that were expanded do not collapse.
Checked a lot of examples but still cannot figure out why.
I don't know why do you create new one accordion
there is good one at https://angular-ui.github.io/bootstrap/ components
Default settings uibAccordionConfig
closeOthers (Default: true) - Control whether expanding an item will cause the other items to close.
Hope it help you
This worked for me. It may need some tweaking to suit your markup exactly.
The general idea is to problematically collapse the others when one is clicked.
var $triggers = $element.find('[data-toggle="collapse"]');
$triggers.on('click', function () {
var t = $(this);
$.each($triggers, function(i, $trigger) {
if ($trigger !== t) {
$($trigger).parent().find('.collapse').collapse('hide');
}
});
});

Writing HTML in JavaScript

I've got this div in my HTML that I want to add dynamically, but it's a lot of HTML to put inside a JavaScript string I think, is there any other, or better ways to do it?
I am programming in MVC if anyone know some tricks there
My HTML
<div class="container">
<div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
<div class="panel-heading">Random1 - Random2</div>
<div class="panel-body">
<div>Random3</div>
</div>
</div>
</div>
My jQuery
$('#mybtn').click(function () {
$('#mydiv').append('<div class="container"><div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel"><div class="panel-heading">Random1 - Random2</div><div class="panel-body"><div>Random3</div></div></div></div>');
});
You can create a template which can be read when required. By using script with "text/template" as type.
Here's an example.
$(document).ready(function() {
$('button').click(function() {
$('#mydiv').append($('#templateId').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button</button>
<div id="mydiv">mydiv</div>
<script type="text/template" id="templateId">
<div class="container">
<div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
<div class="panel-heading">Random1 - Random2</div>
<div class="panel-body">
<div>Random3</div>
</div>
</div>
</div>
</div>
</script>
You can write HTML-code in Javascript function inside in /* comment */ and convert this function to text with method functionname.toString() and parsig text between "/*" and "*/" that works in all old browsers.
Example:
function myfunc()
{/*
<div class="container">
<div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
<div class="panel-heading">Random1 - Random2</div>
<div class="panel-body">
<div>Random3</div>
</div>
</div>
</div>
*/}
function getLines(func)
{
var myhtml = func.toString();
var htmlstart = myhtml.indexOf('/*');
var htmlend = myhtml.lastIndexOf('*/');
return myhtml.substr(htmlstart+2, htmlend-htmlstart-2);
}
$('#mybtn').click(function () {
$('#mydiv').append( getLines(myfunc) );
});
This simple trick can be used also for sending XML, HTML or plain text via JSONP .
Generally, it's not the best idea to mix interests (HTML, JS, CSS). Keep it separate and use templating engines. However, of course you can put HTML into your Javascript files, I would format it properly.
var myTMPL = '<div class="container">' +
'<div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">' +
'<div class="panel-heading">Random1 - Random2</div>' +
'<div class="panel-body">' +
'<div>Random3</div>' +
'</div>' +
'</div>' +
'</div>';
and then use it like
$('#mydiv').append( myTMPL );
You could try having the html as a hidden element on the page and insert that. It tidies it up a bit:
<div id="myOtherDiv" style="display: none;">
<div class="container">
....... rest of html
</div>
</div>
script:
$('#mybtn').click(function () {
$('#mydiv').append($("#myOtherDiv").html());
});
Something like this: 1. Place all html to add into a new div named addingtext:
<div name="addingtext">
<div class="container">
<div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
<div class="panel-heading">Random1 - Random2</div>
<div class="panel-body">
<div>Random3</div>
</div>
</div>
</div>
</div>
2. get all inner HTML (source) of your div named addingtext:
var stringtoadd = document.getElementsByName("addingtext").innerHTML;
Then
$('#mydiv').append(stringtoadd);
If you know angular.js you could create a separate html file for the text you want to add/replace and instead of replacing all the text through javascript you could just create <div ng-include="'html-with-text.html'"></div> with javascript.
There are many ways to do it (all the answers provided here works fine). But you need to choose an effective method to do it. I'm still learning the JS. So I really can't help you in choosing an effective method. But you can try this method too.
Instead of append(), you can also use load() (reference to the load() api)
Main HTML code:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button</button>
<div id="myDiv">mydiv</div>
<div id = "addHere"> </div>
HTML of what you want to add (Suppose the title of this HTML is addon.html):-
<div class="container">
<div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
<div class="panel-heading">Random1 - Random2</div>
<div class="panel-body">
<div>Random3</div>
</div>
</div>
</div>
Finally, your JS
$('#mybtn').click(function () {
$('#addHere').load('/addon.html');
});
This will place your addon HTML right after your div.

How to - if div has child div, expand this div?

So if an accordion div has information/a body, how can I alert this? The information is dynamically loaded, and if the div has information (not all do) - it looks like this:
<div class="panel panel-default">
<div class="panel-heading"></div>
<div id="collapse_1" class="accordion-body collapse"></div>
</div>
...other wise it's
<div class="panel panel-default">
<div class="panel-heading"></div>
</div>
so, if the icon for the div I'm clicking has a child with the class .accordion-body...how can I use jQuery to traverse this? So far my idea was:
$('.accordion-toggle > i').click(function () {
if ($(this).closest('.panel-default').has('div.accordion-body')) {
//var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
//$.toggle('open');
alert('expandable section')
} else {
alert('nothing to expand')
}
});
Thanks in advance.
$('.accordion-toggle > i').click(function () {
if ($(this).closest(".panel-default").children("div").hasClass('accordion-body')) {
//var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
alert('expandable section')
}else{
alert('nothing to expand')
}
});

Categories