We Keep Coding

How can show and hide a <li> inside the panel?

I have an app that has a login page. In order to login the user has the permission to see two voice inside the panel (if user is admin). If user is not admin I’d like to not display this voices. My problem is how to hide and show its. I have the panel inside index.html.This are the voice that I'd like to display or not in order users permission.
<li id="company" display="none">
<a href="/aziende/" class="panel-close" >
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">home</i>
<i class="material-icons md-only">home</i>
</div>
<div class="item-inner">
<div class="item-title">Company</div>
</div>
</div>
</a>
</li>
<li id="users" display="none">
<a href="/users/" class="panel-close">
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">person</i>
<i class="material-icons md-only">account_circle</i>
</div>
<div class="item-inner">
<div class="item-title">Users</div>
</div>
</div>
</a>
</li>
this is app.js
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageInit: function(){
app.navbar.hide('.navbar');
if(user.checkPermission() == 'true'){
app.router.navigate('/home/');
}
}
},
},
{
name: 'home',
path: '/home/',
url: './pages/home.html',
on: {
pageInit: function(e, page) {
app.navbar.show('.navbar');
if(user.checkPermission() == 'true'){
addVoicesToNavbar();
}
}
page.router.clearPreviousHistory();
}
},
}
this method said me that Cannot set property ‘display’ of null
function addVoicesToNavbar(){
document.getElementById("company").display = "block";
document.getElementById("users").display = "block";
}

display is not a valid html attribute, it is a CSS property.
So setting display="none" on your <li> in the example doesn't do anything.
Instead in your markup you need to set an inline CSS style like this to initially hide the element:
<li id="users" style="display:none;">
And in your function change that inline CSS style like this to show it:
document.getElementById("users").style.display = "block";

Here is an example of what you could do:
function addVoicesToNavbar(){
companyElement = document.getElementById("company");
companyElement.style.display = "block";
...
}
Hope it helps!

Algolia search result is overidding css format

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>

add this share to Facebook not sharing image

I'm using the addthis toolbox to share pages on my site to social media. This is my entire addthis section:
<div class="print_share">
<ul>
<li>
<!-- addthis print button begin -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_print"><svg class="icon icon--print"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="/images/icons/svg-sprite.svg#icon-print"></use></svg> Print</a>
</div>
<!-- addthis print button end-->
</li>
<li>
<!-- addthis email button begin -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_email"><svg class="icon icon--email"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="/images/icons/svg-sprite.svg#icon-email"></use></svg> Email</a>
</div>
<!-- addthis email button end-->
</li>
<li>
<!-- addthis menu button begin -->
<div class="addthis_toolbox addthis_default_style" data-media="http://i.imgur.com/sI5mrZP.png">
<div class="share_interstitial" style="display: none">
<span class="at16nc at300bs at15nc at15t_compact at16t_compact"><span class="at_a11y">More Sharing Services</span></span>
<a>Share</a>
<div class="share_loading" style="display: none"><img height="50" src="/images/loading.gif"/><span>Generating thumbnail image...</span></div>
</div>
<a class="addthis_button_compact"><svg class="icon icon--share"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="/images/icons/svg-sprite.svg#icon-share"></use></svg> Share</a>
</div>
<!-- addthis menu button end-->
</li>
<li><span>Hello</span></li>
</ul>
</div>
I also have this script, which I added the $(document).ready() method to:
<script language="javascript" type="text/javascript">
var addthis_share = {
url_transforms: {
shorten: {
twitter: 'bitly'
}
},
shorteners: {
bitly: {}
},
media: "http://i.imgur.com/sI5mrZP.png"
};
var addthis_config = {
ui_click: true,
services_compact: 'facebook,twitter,more',
services_exclude: 'gmail,email,print,printfriendly,favorites,blogger,w3validator'
};
$(document).ready(function() {
console.log(addthis);
if (typeof addthis !== 'undefined') {
addthis.update('share', 'image', "http://i.imgur.com/sI5mrZP.png");
if (addthis_share.passthrough) {
addthis_share.passthrough.pinterest_share.media = "http://i.imgur.com/sI5mrZP.png";
}
addthis.toolbox('.addthis_toolbox', addthis_config, addthis_share);
}
});
</script>
but the image is never getting included. Why is it not sharing the image when I have the property data-media set on the addthis_toolbox element?

How to view active arrow (next / previous) by slides?

I have a very simple slideshow on my website, I use a great plugin for slideshow - cycle plugin. My problem is with the arrows (next, prev). I would like to be active only arrow followed by another slide.
If I have a three slides. When the first slide shows the active button next active. When you view the second appears as active next and prev. When you view the third slide appears as only active prev.
Example:
3 slides:
first slide - only button next show
second slide - button prev and next show
third slide - only button prev show
Live examples:
Live demo on my website
Testing example on jsfiddle
jQuery:
$('.slideshow > ul')
.before('<div class="wrapper"><div class="content"><div class="slide-nav">')
.cycle({
fx: 'scrollLeft',
speed: '600',
timeout: 4000,
pager: '.slide-nav',
next: '#next',
prev: '#prev'
});
HTML:
<div id="slideshow">
<div class="slideshow">
<div class="wrapper">
<div class="content">
<div class="slide-ntx-prv">
<a id="prev" href=""><span class="fa fa-chevron-left"></span></a>
<a id="next" href=""><span class="fa fa-chevron-right"></span></a>
</div>
</div><!-- /.content -->
</div><!-- /.wrapper -->
<ul>
<li class="slide1">
<div class="wrapper">
<div class="content">
<div>cena/noc od <span class="green-bold">67 EUR</span></div>
<h2>Vysoké tatry<span>876 apartmánů</span></h2>
</div><!-- /.content -->
</div><!-- /.wrapper -->
</li>
<li class="slide2">
<div class="wrapper">
<div class="content">
<div>cena/noc od <span class="green-bold">68 EUR</span></div>
<h2>Střední tatry<span>50 apartmánů</span></h2>
</div><!-- /.content -->
</div><!-- /.wrapper -->
</li>
<li class="slide3">
<div class="wrapper">
<div class="content">
<div>cena/noc od <span class="green-bold">69 EUR</span></div>
<h2>Nízké tatry<span>236 apartmánů</span></h2>
</div><!-- /.content -->
</div><!-- /.wrapper -->
</li>
</ul>
</div><!-- /.slideshow -->
</div><!-- /#slideshow -->

if you have access to the slides array and you know which is the current slide you can show/hide parts of the slide navigation.
Here is one working jsfiddle based on yours.
jQuery:
$('.slideshow > ul')
.before('<div class="wrapper"><div class="content"><div class="slide-nav">')
.cycle({
fx: 'scrollLeft',
speed: '600',
timeout: 4000,
pager: '.slide-nav',
next: '#next',
prev: '#prev',
nowrap: true,
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement) {
if(zeroBasedSlideIndex == 0) {
$('#prev').hide();
} else {
$('#prev').show();
}
if(zeroBasedSlideIndex == ($('#slideshow ul li').length - 1) ) {
$('#next').hide();
} else {
$('#next').show();
}
}
});
Nowrap prevents the slides from looping.
onPrevNextEvent is the main part.

jCarouselLite not working on this page

I am using jCarouselLite on this page
Here is the code
//jcarousel 1.0.1
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:7,start:0,scroll:2,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var f=$("li",ul),itemLength=f.size(),curr=o.start;c.css("visibility","visible");f.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});c.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var g=o.vertical?height(f):width(f);var h=g*itemLength;var j=g*v;f.css({width:f.width(),height:f.height()});ul.css(sizeCss,h+"px").css(animCss,-(curr*g));c.css(sizeCss,j+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return f.slice(curr).slice(0,v)};function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px");curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px");curr=a==itemLength-v+1?v+1:v+o.scroll}else curr=a}else{if(a<0||a>itemLength-v)return;else curr=a}b=true;ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());b=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(a,b){return parseInt($.css(a[0],b))||0};function width(a){return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')};function height(a){return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}})(jQuery);
jQuery(document).ready(function($) {
$(".slider").jCarouselLite({
btnNext: null,
btnPrev: null,
visible: 7,
scroll: 2,
vertical: false,
circular: true,
itemFallbackDimension: 150,
start: 0,
auto: 4000,
speed: 1000
});
});
On that way it's working some times with showing 7 images and sometimes it's showing only 5 images and sometimes no images and stopped working.
Please help me to fix it.
Thanks

can you post your html, please?
normally you can slide with the jcarousel just by preparing the html on the right way
like this:
<div class="jcarousel-container jcarousel-container-horizontal" id="pictureslide">
<div class="jcarousel-clip jcarousel-clip-horizontal" id="pic" style='position: relative;'>
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal' id='jcarousel-item-1'>
<img src="pic/slide1.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-2-horizontal' id="jcarousel-item-2" >
<img src="pic/slide2.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-3-horizontal' id="jcarousel-item-3" >
<img src="pic/slide3.jpg" alt="slide" />
</li>
</ul> </div>
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display:'block'">
<a class="controls prev" href="#"><img id="arrow-left" src="pic/arrow_left.png" alt="arrow-left" /></a>
</div>
<div class="jcarousel-next jcarousel-next-horizontal" style="display:'block'">
<a class="controls next" href="#"><img id="arrow-right" src="pic/arrow_right.png" alt="arrow-right"/></a>
</div>
</div>
<!-- END #pictureslide -->
in Javascript you only have to write this (the id is at the ul):
$('#mycarousel').jcarousel({
"wrap": 'circular',
"scroll": 2
....
});