So basically, i'm actually doing a web app with html/css/javascript and im pretty much a beginner in it (i'm a c++/c# guy). I have seen many kind of solution already, but they always use stuff not related with actual ui-grid. So far, I made my headers (which won't change) and now i'm looking for a way to add rows in the grid. So, here is my headers :
<div class="ui-grid-a" id="currentgrid" style="height: 38px">
<div class="ui-block-a">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e">Info1</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e">Info2</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e">Info3</div>
</div>
</div>
</div>
<div class="ui-block-b">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e">Info4</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e">Info5</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e">Info6</div>
</div>
</div>
</div>
</div>
And here is how i will call the js function to add the rows i will need
Search
For exemple, if i can choose the number of rows added by changing only the value of a number in a loop, that could be awesome.
Help me =(
You can loop and append HTML-elements in this way:
for(var i = 1; i <= 10; i++) {
$('#currentgrid').append('<div class="ui-bar ui-bar-e">Info'+i+'</div>');
}
Related
I´am having trouble printing out an array when I use Bulma. The array consist of 6 elements. I want to print them out horizontally in there own column, but the are all getting printed out vertically in the same column. I´am pretty new to this, and can´t figure out any soultions. Do I need to change the html code or the js code? Anyone got any ideas? Thanks!
HTML:
<section class="section">
<div class="container">
<div class="columns is-multiline">
<div class="column is-2">
<p id="profiler"></p>
</div>
</div>
</div>
</section>
JS:
for (var i = 0; i < employeeArray.length; i++ ) {
profilerDiv.innerHTML += `
<h1 class="is-size-5 title has-text-black">${employeeArray[i].name}</h1>
<h3 class="has-text-black">${employeeArray[i].role}</h3>
<h3><img src="Bilder/Ansatte/${employeeArray[i].pic}" style="max-height: 300px;" ></h3>
<p>${employeeArray[i].birtday}</p>
<br>
<br>
`
console.log(employeeArray[i]);
}
Have you tried to move the markup for the HTML column inside your for loop like:
HTML
<section class="section">
<div class="container">
<div class="columns is-multiline">
<p id="profiler"></p>
</div>
</div>
</section>
JS
for (var i = 0; i < employeeArray.length; i++ ) {
profilerDiv.innerHTML += `
<div class="column is-2">
<h1 class="is-size-5 title has-text-black">${employeeArray[i].name}</h1>
<h3 class="has-text-black">${employeeArray[i].role}</h3>
<h3><img src="Bilder/Ansatte/${employeeArray[i].pic}" style="max-height: 300px;" ></h3>
<p>${employeeArray[i].birtday}</p>
<br>
<br>
</div>
`
console.log(employeeArray[i]);
}
I am attempting to make a searchable database with list.js but the search function is not working. I am not sure if I initialized it correctly or what I am doing wrong. I am sure it is something obvious but I would love another set of eyes.
Here is my HTML
<body>
<div class="hof-list">
<input class="search" placeholder="Search for a member..."/><br>
<div class="list">
<div class="objects">
<div class="name">Lucille Ball</div>
<div class="year">2018</div>
</div>
<div class="objects">
<div class="name">Jeremy Jacobs</div>
<div class="year">2018</div>
</div>
<div class="objects">
<div class="name">Russell Salvatore</div>
<div class="year">2018</div>
</div>
<div class="objects">
<div class="name">John Albright</div>
<div class="year">2017</div>
</div>
<div class="objects">
<div class="name">Lousie Bethune</div>
<div class="year">2017</div>
</div>
<div class="objects">
<div class="name">Glenn Curtis</div>
<div class="year">2017</div>
</div>
<div class="objects">
<div class="name">John Oishei</div>
<div class="year">2018</div>
</div>
<div class="objects">
<div class="name">Mary Burnett Talbert</div>
<div class="year">2017</div>
</div>
</div>
</div>
</body>
Here is my script
var options = {
valueNames: ['name', 'year']
};
var hoflist = new List('hof-list', options);
According to docs it expects the following parameters: new List(id/element, options, values); where id/element is
id or element *required Id the element in which the list area should be initialized. OR the actual element itself.
So you should pass there an actual id (so you need to change it in your html), or, you can pass there an element with
new List(document.querySelector('.hof-list'), options)
I want to create a block of html codes using loop 10 times. I searched in google & got some suggestions also, but I'm not able to create div within div. Below is the code i want to create using loop. I can do this using php, but I want to it using javascript.
<div class="row text-center">
<div class="col-sm-5" id="content">
<div class="containers">
<img data-toggle="magnify" src="images/wallets/w0.png" alt="" id="mainImage">
</div>
<div class="substituteImageContainer">
<img src="images/wallets/w0.png" id="substituteImage0" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
<img src="images/wallets/1.png" id="substituteImage1" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
<img src="images/wallets/2.png" id="substituteImage2" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
<img src="images/wallets/3.png" id="substituteImage3" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
<img src="images/wallets/4.png" id="substituteImage4" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
</div>
</div>
<div class="col-sm-7 text-left">
<h3>Product Name. : Cobbler Men's Leather Wallet - Black</h3>
<p>Description</p>
<ul class="descriptionText">
<li>Tastefully selected best-grade Cow leather, soft touch and feel, artistically handcrafted, classical looks and well-organised interior</li>
<li>2 Note compartments, 3 Credit Card slots, 1 slip pocket, 1 Coin pocket, 1 Key slot</li>
<li>Comes packed in a beautiful Gift-Box</li>
<li>Disclaimer: Actual product colour may vary slightly due to photographic lighting and/or your monitor settings.</li>
</ul>
<div class="container-fluid nomargin nopadding">
<div class="row productSpecifications nomargin nopadding">
<div class="col-sm-4 nomargin nopadding"><strong>Model Number : </strong><span id="modelNo">90876K</span></div>
<div class="col-sm-4 nomargin nopadding"><strong>Material : </strong><span id="modelMaterial">Leather</span></div>
</div>
<div class="row productSpecifications nomargin nopadding">
<div class="col-sm-4 nomargin nopadding"><strong>Item Height : </strong><span id="modelHeight">9.5</span> Cm</div>
<div class="col-sm-4 nomargin nopadding"><strong>Item Length : </strong><span id="modelLength">25</span> Cm</div>
</div>
<div class="row productSpecifications nomargin nopadding">
<div class="col-sm-4 nomargin nopadding"><strong>Item width : </strong><span id="modelWidth">10</span> Mm</div>
<div class="col-sm-4 nomargin nopadding"><strong>Item Weight : </strong><span id="modelWeight">50</span> Gm</div>
</div>
</div>
<br>
Enquire about this product
</div>
Use the document.write method:
for(var i=0; i<10; i++) {
document.write('<div>Your content here</div>');
}
<div id="root">
</div>
I'm working on this code example of collapsible text.
jsfiddle Link
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$(document)
.on('click','.row .question-wrapper',function(){
$(this).find('.answer-wrapper').slideToggle();
$('.arrow').toggleClass('down');
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
$('.arrow').addClass('down');
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
$('.arrow').removeClass('down');
})
There is a issue with the code when i expand the first row. When I click on one row arrow animation is activated also on all rows. How I can prevent this?
Because you use this:
$('.arrow').toggleClass('down');
This will toggle the class for all elements with arrow class
You want to limit it to the question being clicked on
$(this).find(".arrow").toggleClass('down');
//or
$(".arrow",this).toggleClass('down');
Updated Fiddle
I need to use kendo ui to display between 6-60 items. Each using the flip effect here http://demos.telerik.com/kendo-ui/fx/combined
The products will be loaded from the database with the unique id like this:
<div class="row">
<div class="col-md-4 product-container">
<div id="productID1" class="productID">
<div class="product">
<div id="product-back1" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front1" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID2" class="productID">
<div class="product">
<div id="product-back2" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front2" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID3" class="productID">
<div class="product">
<div id="product-back3" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front3" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
The problem is I need multiple panels on the page how can I make each "front" and "back" click unique.
var el = kendo.fx($('div[id^=productID]')),
flip = el.flip("horizontal", $('div[id^=product-front]'), $('div[id^=product-back]')),
zoom = el.zoomIn().startValue(1).endValue(1);
flip.add(zoom).duration(200);
$('div[id^=product-front]').click(function () {
flip.stop().play();
});
$('div[id^=product-back]').click(function () {
flip.stop().reverse();
});
I've tried loading each item into an array but have not found a good way to assure the correct item will be flipped.
Since every div[id^=product-front] is a child of div[id^=productID], you can find the children of that and use it.
replace flip.stop().play(); with
kendo.fx($(this)).flip("horizontal", $(this).children()[0], $(this).children()[1]).stop().play();