I am searching using algolia search. Everything works but instead of the search result to displaying in columns it's only showing in a list format
This is the display in normal html code
but when algolia search result is used to populate the container using the code below this is what it shows
I have this html file
<div class="row isotope-grid" id="hits" >
<!-- Load more -->
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
this is the JS format
var search = instantsearch({
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: `
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="images/product-03.jpg" alt="IMG-PRODUCT">
<a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
Quick View
</a>
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
Only Check Trouser
</a>
<span class="stext-105 cl3">
$25.50
</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
`
,
}
})
);
search.start();
I have been able to rule out the css and discovered that ALgolia is overriding the display. How do I modify the code to show a custom display of columns instead of the default Algolia list display?
after implementing Dipen Shah's answer, it partially worked and produced to wierd overlap upon rendering but the overlapp disappears if the window is width or height is decreased and return back to full size.
here is what the overlap looks like
Your code is missing very crucial function call which is why your search result is not being rendered properly.
Remove isotope-grid class from div#hits
<!-- Load more -->
<div class="row" id="hits">
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
Initialize hits div with isotope grid after search result is render.
search.on('render', function(){
$grid = $("#hits");
$grid.isotope('destroy');
$grid.isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
After this changes, search result will be rendered correctly.
Explanation:
In the original theme file, on page load event script calls following call to initialize grids.
$(window).on('load', function () {
var $grid = $topeContainer.each(function () {
$(this).isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
});
When algolia widget renders search result, your template sets correct css classes but you still need to initialize isotope grid for your search result container. My code does exactly that by intercepting render event of the widget.
Problem
I don't think you're using the correct method for a template.
The docs for Aloglia gives this example:
Javascript:
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="hit">
<div class="hit-image">
<img src="{{image}}" alt="{{name}}">
</div>
<div class="hit-content">
<h3 class="hit-price">${{price}}</h3>
<h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
<p class="hit-description">{{{_highlightResult.description.value}}}</p>
</div>
</div>
</script>
Solution
This means you need something like this: (replacing the placeholders accordingly)
Javascript:
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: document.getElementById('hit-template').innerHTML,
}
})
);
search.start();
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="{{image}}" alt="{{name}}">
Quick View
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
${{product_name}}
<span class="stext-105 cl3">${{price}}</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
</script>
Related
I am using PhotoSwipe to display images within my web page developed using wordpress, using the code from the library to display an image as follows
<button id="btn">open</button>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close"></button>
<button class="pswp__button pswp__button--share"></button>
<button class="pswp__button pswp__button--fs"></button>
<button class="pswp__button pswp__button--zoom"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left"></button>
<button class="pswp__button pswp__button--arrow--right"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</div>
Then I implement the javascript function to show two images
<script>
var openPhotoSwipe = function(){
var pswpElement = document.querySelectorAll(\'.pswp\')[0];
var items = [{
src: \'https://empresas.blogthinkbig.com/wp-content/uploads/2019/11/Imagen3-245003649.jpg\',
w: 1440,
h:1024
},
{
src: \'https://empresas.blogthinkbig.com/wp-content/uploads/2019/11/Imagen3-245003649.jpg\',
w: 1440,
h:1024
}];
var options = {
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
openPhotoSwipe();
document.getElementById(\'btn\').onclick = openPhotoSwipe;
</script>
Everything works fine, but when I go to my page to see the result, I find that the menu is above my PhotoSwipe
I tried to add a z-index, but it didn't work and the image is still hidden by the highlighted elements in the image
.pswp {
z-index: 9999999999999999999;
}
Problem
I'm currently implementing non-refresh page loading in my website, and I am using ajax to load the page accordingly to the content section of my website when a user selects a page on the sidebar.
However, when I try to load a page, it loses all of its Bootstrap functionality (such as drop-downs, toggleables, etc') and the DataTables don't load either.
Example: I have a function that adds the class 'active' to the initial tab which works if I load the page through the URL.
However, it does not seem to get called through the dynamic page loading method that gets triggered when a person clicks on the page on the menu. Also, the DataTables won't load.
This is the no-refresh page-loading part after attempts to remedy the issue:
$(document).on('click', 'a[name=user], a[name=moderator], a[name=admin], a[name=groups]', function(e) {
e.preventDefault();
var href = $(this).attr('href');
$.get('preloader.html', function(html) {
$("#inner_content").append(html);
});
if(location.pathname != href) {
loadContent( '#css', href, '#css' );
loadContent( '#script_elements', href, '#script_elements' );
window.history.pushState('page2', 'Title', href);
}
loadContent( '#inner_content', href, '#inner_content' );
});
//Content Loading Function
function loadContent(target, url, selector) {
$.ajax({
url: url,
success: function(data,status,jqXHR) {
$(target).empty();
$(target).html($(data).find(selector).addBack(selector).children());
}
});
}
The structure of the page that should be loaded is something along those lines (blade):
#extends('user.layouts.main')
#section('extra_css')
<style>
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.dataTables_length !important {
margin-left:20px;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.colorpicker-alpha {display:none !important;} .colorpicker{ min-width:128px !important;}
</style>
#endsection
#section('title', 'Group')
#section('content')
<div class="row" id="content">
<div class="col">
<div class="tabs tabs-dark rounded-0 shadow">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#group1" name="groupSelector" data-toggle="tab" value="{{ $user->group->id }}">{{ $user->group->name }}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="group1">
<div id="#{{ $user->id }}" class="tab-pane active ">
<div class="row">
<div class="col-xl-12">
<section class="card">
<header class="card-header">
<div class="card-actions">
<div class="dropdown-menu" role="menu">
<a class="dropdown-item text-1 popup-with-zoom-anim ws-normal" href="#chooseRole">Choose Role</a>
<a class="dropdown-item text-1" href="#" id="admin">Admin</a>
<a class="dropdown-item text-1" href="#" id="moderator">Moderator</a>
<a class="dropdown-item text-1" href="#" id="user">User</a>
</div>
<i id="loading" class="fa fa-spinner fa-spin fa-fw"></i>
<a href="#" class="card-action-toggle" data-card-toggle></a>
</div>
</header>
<div class="card-body pt-0" style="margin-top:-13px;">
<table class="table table-bordered table-striped" id="{{ $user->id }}" style="border: 1px solid #E3E4E7;" name="usersTable">
<thead>
<tr>
<th>#</th>
<th>{!! __('groups.user') !!}</th>
<th>{!! __('groups.rank') !!}</th>
<th>{!! __('groups.lastOn') !!}</th>
<th>{!! __('groups.activity') !!}</th>
<th>{!! __('groups.xyz') !!}</th>
<th></th>
</tr>
</thead>
</table>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('bottom_elements')
<script>
$(document).ready(function() {
var id = $(this).attr('id');
var usersTable = $('table[name=usersTable]#' + id).DataTable({
autoWidth: false,
"processing": true,
"serverSide": true,
"paging": true,
"fnInitComplete": function() {
$('#loading').hide();
},
"order": [ 2, 'desc' ],
dom: "<'row mt-0 mb-0 pt-4 pb-0'<'col-sm-12 col-md-5 pt-0 mb-0 pb-0 'B<'pt-3 mt-4 mb-0'l>><'col-sm-12 mt-4 mb-0 pt-0 col-md-7'p>>",
"buttons": [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'CSV'
}
],
"ajax":{
"url": "/groups/populate",
"type": "POST",
"dataType": "json",
"headers": { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
"data": function ( d ) {
d.group = group;
return $.extend( {}, d, {
group: group,
type: 'members'
});
},
error: function (xhr, error, thrown) {
console.log(xhr);
}
},
"columns": [
{ "data": "user" },
{ "data": "rank" },
{ "data": "lastOn" },
{ "data": "activity" },
{ "data": "xyz" }
]
});
});
$('.dataTables_processing').addClass('dataTables_empty');
$('.dt-button').addClass('btn btn-default btn-sm');
$('.tab-content div:first').addClass('active');
});
</script>
#endsection
The main file looks like so:
<!doctype html>
<html class="fixed">
#include('user.includes.head')
<section id="css">
#yield('extra_css')
</section>
<body>
<section class="body">
#include('user.layouts.navbar')
<div class="inner-wrapper">
#include('user.layouts.sidebar')
<section role="main" class="content-body">
<header class="page-header">
<h2 id="title">#yield('title')</h2>
</header>
#if (session('message_error'))
<div class="row message">
<div class="col-xl-12">
<div class="alert alert-danger">
<strong>Error:</strong> {{ session('message_error') }}
</div>
</div>
</div>
#endif
<div id="innerContent">
#yield('content')
</div>
</section>
</div>
</section>
#include('user.includes.footer')
<div id="bottom_elements">
#yield('bottom_elements')
</div>
</body>
</html>
What have I tried so far?
I tried to change the sequence of the loadContent function calls, however, the functionality of the bootstrap classes still did not work (such as drop-downs, etc').
What am I looking for?
I need that when you click on the menu to load the page (groups), it will load the page and retain all the content of it as well as the bootstrap functionality, as it does not get loaded once the content of the target page loads.
Thanks.
I would suggest including jQuery and bootstrap .js files in your page file, the file that is being loaded dynamically.There is possibly a better way of doing this but this works fine.
I'm making slider with Angularjs using modal. I'm trying to accomplish when clicking on picture modal pops up displaying image that I have clicked.
.html
<div class="float" ng-repeat="a in $ctrl.f">
<div class="column is-narrow topIcons">
<div class="photo topIconsHover" ng-click="$ctrl.togglePicture()">
<figure class="image is-128x128">
<img ng-src="{{a.imageSrc}}">
</figure>
</div>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-background" ng-repeat="a in $ctrl.f"></div>
<div class="modal-content">
<p class="image is-4by3">
<img ng-src="{{togglePicture(a.id)}}">
</p>
</div>
<button class="modal-close" ng-click="$ctrl.closeModal()"></button>
</div>
component.js
function PhotoController($scope){
var vm = this;
vm.f = [{
albumName: "Name",
imageSrc: 'app/images/bio.jpg',
owner: "OwnerName",
id: 1
},
{ albumName: "Name",
imageSrc: 'app/images/bio.jpg',
owner: "OwnerName",
id: 2
}];
vm.togglePicture = function(id) {
$('#myModal').addClass('is-active');
};
I'm trying to get imageSrc by passing id of an image as a function parameter but is not working. What should I do in my function to select correct imageSrc using id and then to display it and how my imageSrc should look like?
Was thinking something like this <img ng-src="{{togglePicture(a.id)}}">?
Pass Selected image in funnction.
<div class="photo topIconsHover" ng-click="$ctrl.togglePicture(a)">
Then set selcted image in controller
vm.selectedImgsrc='';
vm.togglePicture = function(a) {
$('#myModal').addClass('is-active');
vm.selectedImgsrc=a.imageSrc;
};
Then modify modal to view selected image
<p class="image is-4by3">
<img ng-src="{{$ctrl.selectedImgsrc}}">
</p>
I trying to use instafeed.js for my local site. But I don't understand why images from my account don't show?
My code
Connected instafeed.js and file where I write the script
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Section for images
<section class="instagram-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="instagram-content">
<h3>Latest Photos</h3>
<div class="row photos-wrap">
<div id="inst"></div>
</div>
</div>
</div>
</div>
</div>
</section>
and app.js with instafeed value
$(function() {
var feed = new Instafeed({
get: 'user',
userId: ID,
accessToken: 'Token',
target: 'inst',
links: true,
limit: 8,
useHttp: true,
sortBy: 'most-recent',
resolution: 'standard_resolution',
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="photo-box">
<div class="image-wrap">
<img src="http:{{image}}"/>
</div>
<div class="description">{{caption}} </div>
</div>
</div>'
});
feed.run();
});
Your code works except for this error regarding your template definition:
SyntaxError: unterminated string literal
Put all the template in one line or use \ at the end of each line to have a multi-line string literal.
Try write the template parameter inline like this:
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><img src="http:{{image}}"/></div><div class="description">{{caption}} </div></div></div>'
or on line break insert \
I have a problem with my code, i word at a new website where i want make the thing more attractive. My code is:
<div class="portfolioFilter">
<ul class="portfolio-isotope-filter clearfix">
<li class="selected"><span>All</span></li>
<li><span>Concerte</span></li>
<li><span>Spectacole</span></li>
<li><span>Prezentari</span></li>
</ul>
</div>
<div id="imagini-artists">
<div class="portfolioContainer cf">
<div class="objects">
<img src="img/artists/1.png" alt="image">
</div>
<div class="people places">
<img src="img/artists/2.png" alt="image">
</div>
<div class="food">
<img src="img/artists/3.png" alt="image">
</div>
<div class="people places">
<img src="img/artists/4.png" alt="image">
</div>
<div class="places objects">
<img src="img/artists/5.png" alt="image">
</div>
<div class="people food objects">
<img src="img/artists/6.png" alt="image">
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
$(window).load(function(){
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>
The problem is: i can`t find where i can set the Height of 'portfolioContainer' in the chrome show me a value but is from html tag style=".." . And the second problem is with the number of images, i want to put 3 images, so maybe need to change the width for that.
http://jsfiddle.net/wC4tw/
I want some help,
Thanking you in advance