Javascript foreach array key values, output to html - javascript

How do I loop thru array keys to output their values to HTML?
The layout I'm working with is a thumbnail grid, 3 columns by 2 rows. Each thumbnail has a caption below it. Selecting any of the thumbnails opens up a hidden container which is also a grid of 3 columns and 2 rows. Within that hidden container many of the images and captions are going to be identical so rather than have a whole bunch of duplicate HTML I figured I could just store each in an array and reference the values that each is associated with. I'm just stuck on how to create the loop at the moment.
var img=[
'image01.jpg','image02.jpg','image03.jpg','image04.jpg'
]
var details=[
'aaaaaa','bbbbbb','cccccc','dddddd'
];
$( "#yin" ).click(function() {
var img = [0,2];
var details = [0,1];
$(step).each(function() {
document.getElementById("img").innerHTML();
});
$(imgs).each(function() {
document.getElementById("img").innerHTML();
});
});
<div class="container">
<ul class="row-fluid">
<li class="span4" id="yin">
<div class="row-fluid">
<img src="yin.jpg" />
<h3>Yin</h3>
</div>
</li>
<li class="span4" id="yang">
<div class="row-fluid">
<img src="yang.jpg" />
<h3>Yang</h3>
</div>
</li>
</ul>
<div class="row-fluid">
<div class="span12">
<div class="show-details details">
<div class="detail-content">
<div id="img">
<!-- Loop (for yin would be image01, and image03) -->
</div>
<div id="details">
<!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
</div>
</div>
</div>
</div>
</div>
</div>

There's an issue with that code before you get into looping, the img and details variables are being re-declared inside your click function. What are they intended to be? From the comments in your code they seem to be specifying which indices of the array to use.
var images = ['image01.jpg','image02.jpg','image03.jpg','image04.jpg'];
var details = ['aaaaaa','bbbbbb','cccccc','dddddd'];
$( "#yin" ).click(function() {
var imgIndices = [0,2];
var detailIndices = [0,1];
$("#img").html("");
$("#details").html("");
$(imgIndices).each(function(i, o) {
$("#img").append("<img src=\"" + images[o] + "\"/>");
});
$(detailIndices).each(function(i, o) {
$("#details").append("<p>" + details[o] + "</p>");
});
});
<div class="container">
<ul class="row-fluid">
<li class="span4" id="yin">
<div class="row-fluid">
<img src="yin.jpg" />
<h3>Yin</h3>
</div>
</li>
<li class="span4" id="yang">
<div class="row-fluid">
<img src="yang.jpg" />
<h3>Yang</h3>
</div>
</li>
</ul>
<div class="row-fluid">
<div class="span12">
<div class="show-details details">
<div class="detail-content">
<div id="img">
<!-- Loop (for yin would be image01, and image03) -->
</div>
<div id="details">
<!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
</div>
</div>
</div>
</div>
</div>
</div>
I would take the click function out to a named function though and just pass in the arrays.

Related

dynamic image slider into dynamic cards in asp.net mvc c#

I want to display cards in my home page this cards content image slider.
ex: card contains Toyota cars information and slider for cars images.
another card to display BMW cars information and slider for cars images.
I already have the database and model and my code run perfectly with one card only when I enter two or more cards it doesn't work(the images appear only in the first card).
here is my code:
#foreach (var item in Model.BrokenCar)
{
<div class="col-md-4">
<div class="card mb-3">
<h3 class="card-header">#Html.DisplayFor(modelItem => item.Title)</h3>
<form id="form1">
<div class="carousel-inner">
<div id="container">
<p>#Html.DisplayFor(modelItem => item.DescriptionEn)</p>
<div id="banner-fade">
<ul class="bjqs">
#foreach (var image in Model.BrokenCarImage.Where(o => o.BrokenCarID.Equals(item.BrokenCarID)))
{
var base64 = Convert.ToBase64String(image.BrokenCarImg);
var imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
<li>
<img src='#imgsrc' title='#Html.DisplayFor(modelItem => item.Title)' alt="">
</li>
}
</ul>
</div>
</div>
<script src="../assets/js/libs/jquery.secret-source.min.js"></script>
<script>
jQuery(function ($) {
$('.secret-source').secretSource({
includeTag: false
});
$('#banner-fade').bjqs({
height: 320,
width: 620,
responsive: true
});
});
</script>
</div>
</form>
<div class="card-body">
Card link
Another link
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</div>
}
it works after I replaced the static id <div id="banner-fade"> with dynamic id <div id='#item.BrokenCarID'>
also updated it in the script $('##item.BrokenCarID')

Unable to filter data from database due to laravel blade curly braces "{{ }}"

I'm trying to filter data gotten from database with the class="data-groups".
Here is the code:
this.shuffle.filter(function(element, shuffle) {
// If there is a current filter applied, ignore elements that don't match it.
if (shuffle.group !== Shuffle.ALL_ITEMS) {
// Get the item's groups.
var groups = JSON.parse(element.getAttribute('data-groups'));
var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;
// Only search elements in the current group
if (!isElementInCurrentGroup) {
return false;
}
}
var titleElement = element.querySelector('.book-item_title');
var titleText = titleElement.textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
};
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="grid-shuffle">
<ul id="grid" class="row">
#foreach($libraries as $library)
<li class="book-item small-12 medium-6 columns" data-groups='["{{$library->genre}}"]' data-date-created='{{$library->published}}' data-title='{{ $library->title }}' data-color='{{$library->color}}'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('img/001-small.png')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">{{$library->title}}</h3>
<p class="author">{{$library->author}} • {{$library->published}}</p>
<p>{{$library->synopsis}}</p>
Details
</div>
<div class="overlay-details">
Close
<div class="overlay-image">
<img src="img/001.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">{{$library->title}}</h2>
<p class="author">by {{$library->author}}</p>
<p class="published">{{$library->published}}</p>
<p class="synopsis">{{ $library->synopsis }}</p>
Preview
</div>
<div class="overlay-preview">
Back
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>{{$library->details}}</p>
</div>
</div>
</div>
</li>
#endforeach
</ul>
</div>
The problem is it doesn't work unless I hard code the genre like this
data-groups='["fiction"]'
Now since I'm retrieving data from a database using the foreach loop it means any book out the database is automatically given the "fiction" attribute regardless of its db assigned genre.
Any help on how to solve this will be appreciated.
Found the problem
I was Filtering with this lines of code
All Categories
Fantasy
Sci-Fi
Classics
Fairy Tale
The problem was that the data-group items are case sensitive. So for example I was filtering with "classic" while my database was providing "Classic" therefore making the filter function seem faulty.

Get element text through GTM Custom JavaScript Variable

I have two groups of links all with the same class names, the only difference is the text in the .
I need to get the text for the clicked link and pass it to GA through GTM.
<div class="item-set">
<header>Section Title One</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
<div class="item-set">
<header>Section Title Two</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
I have created a custom javascript variable
function() {
$('section.products div.list').click(function() {
return $(this).closest('.item-set').find('header').text();
});
}
But the bleep thing isn't working as I expect (or at all). It returns "undefined".
Any assistance is greatly appreciated.
You shouldn't bind to click event in JS variable. You should use JS variables in GTM only for receiving values
The correct way to achieve your goal is:
1) Enable built-in variable Click Element (if you already have it, you can skip this step)
2) Create trigger, which will fire when you clicking on your links
CSS selector on the screenshot is .item-set .list a
3) Create JS variable
Code is: function() {
return $({{Click Element}}.closest('.item-set')).find('header').text();
}
3) Create a tag, which will send data to GA
Here you can use your variable form step 3 {{Click List Header}}
Maybe you are not capturing/storing the return $(this).closest('.item-set').find('header').text(); from the function?
When you for example immediately invoke your function and click a div, the text of the <header> will be logged to the console.
(function() {
$('section.products div.list').click(function(e) {
e.preventDefault(); // to prevent the default action of the click
console.log($(this).closest('.item-set').find('header').text());
return $(this).closest('.item-set').find('header').text();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-set">
<header>Section Title One</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
<div class="item-set">
<header>Section Title Two</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>

Showing/Hiding divs with randomised links

I have a single page site which shows/hides section on click within the viewport.
This is an example of one of the sections:
<section id="question1">
<div class="container-fluid">
<div class="row">
<div class="question-container">
<div class="question-box">
<p>What is the answer to this question?</p>
</div>
</div>
<a href="#">
<div id="cheetah" class="col-xs-12 col-lg-6">
<img src="images/cheetah.jpg" class="img-responsive" />
</div>
</a>
<a href="#">
<div id="hedgehog" class="col-xs-12 col-lg-6">
<img src="images/hedgehog.jpg" class="img-responsive" />
</div>
</a>
</div>
</div>
</section>
The problem I am having is that I don't want section ID's to be the same as the a tag href within it. If that makes sense? This is the jQuery I have already:
$(document).ready(function(){
//ID array
var questionArray = ['#question1', '#question2', '#question3', '#question4', '#question5', '#question6', '#question7', '#question8', '#question9', '#question10'];
//collect sections and place in array
var sectionArray = [];
$('section').each(function(){
sectionArray.push(this);
})
//randomise id array
questionArray.sort(function() {
return 0.5 - Math.random()
});
//Target a elements - attach ID to next question
for(var i = 0; i < sectionArray.length; i++) {
var aEl = $(sectionArray[i]).find('a');
$(aEl).each(function(){
$(this).attr('href', questionArray[i]);
})
}
}
Any help?
EDIT:
Link to codepen: https://codepen.io/samrbrown/full/aLdgYK/

Create two object Highslide

I faced with problem. I create two objects in highslide at the same time, but one of them don't activated (I can't close or move him). Below I write example:
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
function paint(id){
var element = document.getElementById('highslide-html_' + id);
var frame = hs.htmlExpand(element, { contentId: 'highslide-html_' + id });
return frame;
}
paint("id1");
paint("id2");
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://highslide.com/highslide/highslide.js.php?full=true"></script>
<link rel="stylesheet" type="text/css" href="http://highslide.com/highslide/highslide.css" />
<div class="highslide-html-content highslide-move" id="highslide-html_id1">
<div class="highslide-header">
<ul>
<li class="highslide-close">
Close
</li>
</ul>
</div>
<div class="highslide-body">
Panel 1
</div>
<div class="highslide-footer">
<div>
<span class="highslide-resize" title="Resize">
<span></span>
</span>
</div>
</div>
</div>
<div class="highslide-html-content highslide-move" id="highslide-html_id2">
<div class="highslide-header">
<ul>
<li class="highslide-close">
Close
</li>
</ul>
</div>
<div class="highslide-body">
Panel 2
</div>
<div class="highslide-footer">
<div>
<span class="highslide-resize" title="Resize">
<span></span>
</span>
</div>
</div>
</div>
It doesn't work only when I create two objects at once. If I place paint(...) into the onclick handler, I can create any number of objects, and they will all be interactive.
Maybe anybody can help me?
Ohh, I found a solution.
Necessary add hs.allowSimultaneousLoading = true;

Categories