Basically, if I try to pause the carousel programatically it won't work on mobile browsers, it works fine on desktop.
so something like:
$('.carousel').carousel('pause');
won't take any effect on the carousel itself, it keeps cycling through images.
Also tried:
$('.carousel').carousel({
interval: false
});
Then combined it with pause as well with no effect whatsoever.
Is there any particular issue with this or a way to fix it?
Thanks in advance.
Edit: this is the whole code:
$(document).ready(function () {
$('.carousel-indicators').scrollLeft(0);
$('#sme-directory-gallery').carousel('cycle');
$('.video-mask').click(function () {
var iframe = $(this).closest('.item').find('iframe');
var iframe_source = iframe.attr('src');
iframe_source = iframe_source + "?autoplay=1"
iframe.attr('src', iframe_source);
$(this).toggle();
$('#sme-directory-gallery').carousel();
});
$('#sme-directory-gallery').on('slide.bs.carousel', function (e) {
$('#sme-directory-gallery').carousel('cycle');
var iframeID = $(this).find('iframe').attr('id');
if (iframeID != undefined) {
callPlayer(iframeID, 'stopVideo');
}
$('.video-mask').show();
$('#sme-directory-gallery').find('iframe').each(function (key, value) {
var url = $(this).attr('src');
if (url.indexOf('autoplay') > 0) {
var new_url = url.substring(0, url.indexOf('?'));
$(this).attr('src', new_url);
}
});
setTimeout(() => {
var scrollTo = $('.list-inline-item.active').position().left;
if ($('.list-inline-item.active').index() > 0) {
scrollTo = $('.list-inline-item.active').prev('.list-inline-item').position().left;
}
var finalOrFirst = 0;
if (e.direction === 'right') {
if ($('.list-inline-item.active').is(':last-child')) {
finalOrFirst = 99999;
}
} else {
if ($('.list-inline-item.active').is(':first-child')) {
finalOrFirst = -99999;
}
}
var currentScroll = $('.carousel-indicators').scrollLeft();
var scrollResult = currentScroll + scrollTo + finalOrFirst;
$('.carousel-indicators').animate({scrollLeft: scrollResult}, 500);
}, 10);
});
});
Edit 2: this is the html, or blade rather:
<div class='card-body text-center sme-directory-card-body sme-directory-gallery'>
<div id='slider'>
<div id='sme-directory-gallery' class='carousel slide'>
<div class='carousel-inner'>
#foreach($directoryInfo->videos as $index => $video)
<div class='item carousel-item {{ $index === 0 ? 'active' : '' }}' data-slide-number='{{ $index }}'>
<div class='video-mask'></div>
<div class='d-flex justify-content-center'>
<div class='embed-responsive embed-responsive-21by9'>
<iframe class='embed-responsive-item player' src='{{ 'https://www.youtube.com/embed/' . substr($video->url, strrpos($video->url, 'v=') + 2) . '?rel=0' }}' allowfullscreen></iframe>
</div>
</div>
</div>
#endforeach
#foreach($directoryInfo->images as $index => $image)
<div class='item carousel-item {{ ($index + sizeof($directoryInfo->videos)) === 0 ? 'active' : '' }}' data-slide-number='{{ $index + sizeof($directoryInfo->videos) }}'>
<div class='d-flex justify-content-center'>
<img src='{{ asset('storage/' . $image->path) }}' class='img-fluid' alt='imagen'>
</div>
</div>
#endforeach
<a class='carousel-control-prev' href='#sme-directory-gallery' role='button' data-slide='prev'>
<div class='rounded-circle'>
<span class='carousel-control-prev-icon' aria-hidden='true'></span>
<span class='sr-only'>Previous</span>
</div>
</a>
<a class='carousel-control-next' href='#sme-directory-gallery' role='button' data-slide='next'>
<div class='rounded-circle'>
<span class='carousel-control-next-icon' aria-hidden='true'></span>
<span class='sr-only'>Next</span>
</div>
</a>
</div>
<ul class='carousel-indicators list-inline'>
#foreach($directoryInfo->videos as $index => $video)
<li class='list-inline-item my-2 {{ $index === 0 ? 'active' : '' }}'>
<a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' class='sme-gallery-anchor' data-slide-to='{{ $index }}' data-target='#sme-directory-gallery'>
<img src='{{ 'https://img.youtube.com/vi/' . substr($video->url, strrpos($video->url, 'v=') + 2) . '/mqdefault.jpg' }}' class='img-fluid'>
<div class='text-white sme-gallery-middle-icon'>
<span class='fas fa-play'></span>
</div>
</a>
</li>
#endforeach
#foreach($directoryInfo->images as $index => $image)
<li class='list-inline-item {{ $index + sizeof($directoryInfo->videos) === 0 ? 'active' : '' }}'>
<a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' data-slide-to='{{ $index + sizeof($directoryInfo->videos) }}' data-target='#sme-directory-gallery'>
<img src='{{ asset('storage/' . $image->path) }}' class='img-fluid'>
</a>
</li>
#endforeach
</ul>
</div>
</div>
</div>
Related
Have a problem with total count of ajax searche's results.
There is a mistake "Method Illuminate\Database\Eloquent\Collection::total does not exist." if I use directive for example
<div class="searched-item">
{{ __('main.res_found') }} {{$sfilms->total()}} {{ __('main.res_results') }}
</div>
How to fix it correctly?
blade template:
#if($sfilms)
#if($sfilms->count())
<div class="searched-item">
{{ __('main.res_found') }} {{$sfilms->count()}} {{ __('main.res_results') }}
</div>
#else
<div class="searched-item">
{{ __('main.res_found') }} 0 {{ __('main.res_results') }}
</div>
#endif
#foreach($sfilms as $sfilm)
<div class="search-hits">
<ol class="search-hits-list">
<li class="search-hits-item">
<a href="{{ url('films/'.$sfilm->film_id) }}">
<div class="search-img-wrapper">
#if(!is_null($sfilm->films->poster))
<img src="{{$sfilm->films->poster}}" alt="poster" class="news_movies-img">
#else
{{-- <img class="news_movies-img" src="{{ url('/img/no_poster.jpg') }}" alt="poster"/>--}}
<img src="{{asset('storage/poster/' . $sfilm->films->id . '.jpg')}}" alt="poster" class="news_movies-img">
#endif
</div>
<div class="search-hits-wrapper">
<div class="hit-title">
<h3>{{ $sfilm->title }}</h3>
</div>
<div class="hit-title">
<h4>{{ $sfilm->films->orig_title }}</h3>
</div>
<span>
<p class="poster_genre-link">{{ $sfilm->films->country}} {{ $sfilm->films->year }}</p>
</span>
<span>
<p class="poster_genre-link">For age {{ $sfilm->films->age }} +</p>
</span>
</div>
</a>
</li>
</ol>
</div>
#endforeach
#else
<li class="list-group-item">{{ __('search_no_results') }}</li>
#endif
javascript ajax code:
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#search').keyup(function() {
var search = $('#search').val();
if (search == "") {
$("#memlist").html("");
$('#result').hide();
} else {
$.get("{{ URL::to('/search') }}", {
search: search
}, function(data) {
$('#memlist').empty().html(data);
$('#result').show();
})
}
});
});
Controller:
public function search(Request $request) : View
{
$search = $request->input('search');
$locales = app()->getLocale();
if ($locales == NULL) {
$sfilms = Local::where('title_en', 'like', "%$search%")
->orWhere('year', 'like', "$search%")->limit(4)->get();
} else {
$sfilms = Local::where('title' . '_' . $locales, 'like', "%$search%")
->orWhere('year', 'like', "$search%")->limit(4)->get();
}
return view('layouts.found')->with('sfilms', $sfilms);
}
This works correctly with searched results and I see them, but I don't fix to see exactly count of total results from request.
Collection use the count() method to return the total.
So you should be using it like this instead
{{ $sfilms->count() }}
Done
Just replace in controller ->limit(4)->get() to ->paginate(4). According to documentation
public function search(Request $request) : View
{
$search = $request->input('search');
$locales = app()->getLocale();
if ($locales == NULL) {
$sfilms = Local::where('title_en', 'like', "%$search%")
->orWhere('year', 'like', "$search%")->paginate(4);
} else {
$sfilms = Local::where('title' . '_' . $locales, 'like', "%$search%")
->orWhere('year', 'like', "$search%")->paginate(4);
}
return view('layouts.found', ['sfilms'=>$sfilms]);
}
I made simple searchbar for my app. Right now it searching the users by data attribute but when it doesn't find any match it display nothing. I want it to show error message when there is no match. I made if statement but it only display when I type something into input and delete it. How to display error message immediately when searchbar doesn't find any user.
JS
$(document).ready(function () {
// Pokaż/Ukryj wyszukiwarkę
$('.show-hide-search-bar').on('click', function () {
if ($('.searcher-section').is(":visible")) {
$('.searcher-section').hide("slide");
$('.show-hide-search-bar').text('Pokaż Wyszukiwarkę');
} else {
$('.searcher-section').show("slide");
$('.show-hide-search-bar').text('Ukryj Wyszukiwarkę');
}
});
// Zmiana tekstu w zależności od pojawienia się searchera
if ($('#agents').length > 0) {
$('#label-searchbar').html('Imię, Nazwisko, Adres email');
$('#input-searchbar').attr('placeholder', 'Podaj imię, nazwisko lub adres email');
} else if ($('#company').length > 0) {
$('#label-searchbar').html('Nazwa biura');
$('#input-searchbar').attr('placeholder', 'Podaj nazwę biura');
}
//Dynamiczne wyszukiwanie .card dla agentów | .clearfix dla listy
$('.searcher-input').keyup(function (event) {
$('.null-data').hide();
if ($(this).val()) {
var input = $(this).val();
var trimmedInput = input.trim();
var terms = input.split(/\W+/g);
$(".card").hide();
$(".clearfix.alt").hide();
$(".card[data-agent*='" + trimmedInput + "' i]").show();
$(".clearfix[data-name*='" + trimmedInput + "' i]").show();
// $(".card[data-lastname*='" + trimmedInput + "']").show();
// $(".card[data-lastname*='" + trimmedInput + "'][data-firstname*='" + trimmedInput + "']").show();
// $(".card[data-email*='" + trimmedInput + "']").show();
$(".col-xs-12").css("min-height", "0");
$(".col-md-4").css("min-height", "0");
$(".col-sm-5").css("min-height", "0");
if ($('.card').is(':visible').get(0)) {
$('.null-data').show(function () {
$(this).effect("shake");
});
}
if (!$('.clearfix').is(':visible').get(0)) {
$('.null-data').show(function () {
$(this).effect("shake");
});
}
} else {
$(".clearfix.alt").show();
$(".card").show();
$('.null-data').show(function () {
$(this).effect("shake");
});
}
});
});
HTML
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="searcher-section" style="display: none">
<div class="show-hide-searcher">
<div class="input-section">
<div class="label-input-searcher">
<label for="" class="searcher-label" id="label-searchbar"></label>
<input type="text" placeholder=""
class="searcher-input form-control" id="input-searchbar"/>
<div class="null-data" style="display: none;">Wprowadź poprawne dane</div>
</div>
</div>
</div>
</div>
</div>
<div class="show-hide-section">
<button class="btn btn-success show-hide-search-bar" id="searchbar-button">Pokaż wyszukiwarkę</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h3 class="title" id="agents">Doradcy</h3>
<div class="cards">
#foreach($agents as $agent)
<div class="col-xs-12 col-sm-5 col-md-4">
<div class="card" data-agent="{{$agent->firstname}} {{$agent->lastname}} {{$agent->email}}">
<figure>
<div class="img-ref">
<a href=""
class="">
#if(isset($agent->has_avatar) && $agent->has_avatar !== 0)
<div style="background: url(''); background-size: cover;" class="photo"></div>
#else
<div style="background: url(''); background-size: cover;"
class="photo"></div>
#endif
</a>
</div>
<ul>
<li>
<a href=""
class="teamLink agent-color">
<h3 class="agent-name">{{$agent->firstname}} {{$agent->lastname}}</h3> </a>
</li>
</ul>
#if(isset($agent->company_name))
<div class="teams-summary">
{{$agent->company_name}}
</div>
#endif
<div class="contact-position">
{{--telefon kontaktowy--}}
<div class="mobile-info card-contact-info">
{{$agent->phone}}
</div>
{{--adres mailowy--}}
<div class="email-info card-contact-info">
{{$agent->email}}
</div>
</div>
</figure>
</div>
</div>
#endforeach
</div>
{{----}}
</div>
</div>
check element length
........
$(".clearfix.alt").hide();
if($(".card[data-agent*='" + trimmedInput + "' i]").length == 0) {
alert("no result");
return;
}
$(".card[data-agent*='" + trimmedInput + "' i]").show();
....
here's my html code.
<div class='list' ng-repeat='worker in categories' >
<br><a class="item item-thumbnail-left" ng-click="showConfirm(worker.$id)">
<img src="img/tech_support.png">
<p>{{worker.$id}}</p>
<p>Address: {{worker.Address}}</p>
<p><u>more..</u></p>
</a>
</div>
and here's my controller.js
man.controller('categoryCtrl',function($scope,$firebaseArray,
$firebaseObject,$state,$stateParams,$ionicPopup,$window,$timeout){
var category = $stateParams.categoryId;
var categoryRef = Refroot.child('Workers').child(category);
$scope.categories=$firebaseArray(categoryRef);
$scope.showConfirm= function(id){
var workerId = id;
var workRef = Refroot.child('Workers');
var lastRef = workRef.child(category).child(workerId);
$scope.workerlist = $firebaseArray(lastRef);
var confirmPopup = $ionicPopup.confirm({
title: 'Worker Profile',
});
confirmPopup.then(function(res) {
if(res) {
console.log('Sure!');
} else {
console.log('Not sure!');
}
});
console.log(workerId + '' + category + '' + lastRef);
}
});
Hope you guys could help me, it will be a great help for my thesis :)
You should be using $index as below
<div class='list' ng-repeat='worker in categories track by $index' >
<br><a class="item item-thumbnail-left" ng-click="showConfirm($index)">
<img src="img/tech_support.png">
<p>{{$index}}</p>
<p>Address: {{worker.Address}}</p>
<p><u>more..</u></p>
</a>
</div>
I have this div which should be updated from the database with some data.
I want to reload this div here every 5 sec:
<div class="account-left">
<div class="scroll-area" data-spy="scroll" data-offset="0">
<div class="section" id="myscroll">
<!--<h1 style="color:black;">{{hais}}</h1>-->
<div style="text-align: center; background: #eee;">
<span ng-show="tasklist.options.no_tasks" ng-bind-html="tasklist.options.no_tasks.message"></span>
</div>
<ul style="border:1px solid #ddd;border-top:0;">
<li ng-class="{active:task.task_id == activeValue, 'cursor-pointer':1 }" id="{{'taskLists_' + task.task_id}}" ng-model="task_title_list" ng-repeat="task in tasklist.data| filter:{task_status:'!draft'} | filter: taskFilterCriteria as results" ng-class="{active : task.task_id == activeValue, 'cursor-pointer':1 }"
ng-click="mytaskfn(task.task_id, $index + 1, task.taskEscTitle, 'browse-task')" ng-attr-title="{{task.task_is_social_task=='yes' ? 'Donate' : ''}}">
<div class="browse-tasks-sidebar-col-1">
<img ng-src="{{task.user.user_avatar ? task.user._links.avatar.href : 'themes/customer/images/dummy-user-img.png'}}" class="img-circle" alt="avatar">
</div>
<div class="browse-tasks-sidebar-col-2">
<a>{{task.task_title}}</a>
<p class="side-col1-1"><i class="fa fa-map-marker"></i>
{{task.task_type=='online' ? 'online' : task.task_location}}
</p>
<p class="side-col1-2" translate translate-values="{comment_count:task.taskComments[0].commentCount, offers_count:task.taskBids[0].bidCount}">{{'comment_offer_count'}}</p>
<span ng-show="task.task_is_social_task == 'yes'" class="pull-right">
<i class="fa fa-money" style="color:slategrey"></i>
</span>
</div>
<div class="browse-tasks-sidebar-col-3">
<span class="pull-right">
<!-- if assigned, show assigned offer price. Otherwise show initial poster offer price -->
{{task.task_status == 'draft'|| task.task_status=='posted' || task.task_status=='waiting_paypal_approval' ||
(task.task_status=='cancelled' && !task.assignees.assignees_bid_price) ? currencySymbol + task.task_total_cost : currencySymbol + task.assignees.assignees_bid_price}}</span>
<br>
<!-- <button type="button" class="small-btn">EARN</button>-->
<!-- <a ui-sref="home.browse-tasks.details({taskid:task.task_id, task_title:task.task_title})" class="small-btn pull-right" ng-click="mytaskfn(task.task_id, $index + 1)" translate>{{'VIEW'}}</a> -->
<a class="small-btn pull-right" ng-class="{disable:task.task_status != 'posted' && task.task_status != 'waiting_paypal_approval'}">
<span translate="
{{
task.task_status=='posted' || task.task_status=='waiting_paypal_approval' ? 'VIEW':
(
( task.task_status=='assigned' || task.task_status=='poster_paid' || task.task_status=='started' ||
task.task_status=='completed'
) ? 'Assigned' :
( task.task_status=='cancelled' ? 'Cancelled' :
( task.task_status=='expired' ? 'Expired' : 'Completed' )
)
)
}}
"></span>
</a>
</div>
</li>
</ul>
<!-- <button class="signup-btn comnt-btn task-alllocate-green loadmore" ng-click="loadMore()">Load more</button> -->
<a class="loadmore" ng-hide="1" href="javascript:void(0)" ng-click="loadMore(loadvalue, activeTab)">Load more</a>
</div>
</div>
</div>
</div>
I did this but after 5 sec it becomes all black .
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
setTimeout(function() {
// window.location.reload(1);
$('.account-left').load('browse-tasks.html');
}, 5000);
</script>
Is there a way to reload it in the right way?
Thanks!
Yes that is possible.
var w = window.open(url, "test");
w.location.reload();
You can use ajax to update database entries on a button click. but from your point of view what does reload or update another page means ?
Attempting with the below jQuery method: But this does not work in my Angular environment, assuming because I'm attempting to do this outside of angular JS scope methods, but I don't know how to implement this using Angular scope methods (new to angular) any advice?
$('.song-thumb .hover-play').on('mouseenter', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.addClass('hoverclass');
});
$('.song-thumb .hover-play').on('mouseleave', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.removeClass('hoverclass');
});
var count = 0;
$('section.suggestedAlbums img').hover(function() {
count++;
$('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>');
});
Full page code:
<script>
$('.song-thumb .hover-play').on('mouseenter', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.addClass('hoverclass');
});
$('.song-thumb .hover-play').on('mouseleave', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.removeClass('hoverclass');
});
var count = 0;
$('section.suggestedAlbums img').hover(function() {
count++;
$('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>');
});
</script>
<!-- <h2>{{trackListData.listTitle}}</h2>
--><div ng-repeat="track in trackListData.tracks track by $index " class="feature-item-homepage fade-animate-nostagger">
<div class="song-thumb" ng-class="{active: $root.currentPlaying.song_id == track.id}">
<!--3 Cases-->
<!--Not the song being played-->
<div class="hover-play" ng-if="$root.currentPlaying.song_id != track.id" ng-click="$root.playSong(track);">
<i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
<i class="fa fa-play play-song"></i>
<img src="img/producer_icon_white.png" class="prod_logo">
<div class="song-title" style="width: 80%;padding-top:25px;">
<a class="song-linking" href="#/song/{{track.id}}">
<h4>{{track.title}}</h4>
<h5>{{track.artist.user_name}}</h5>
</a>
</div>
</div>
<!--The current song but paused-->
<div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && !$root.isPlaying" play-music>
<i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
<i class="fa fa-play play-song"></i>
</div>
<!--The current song but playing-->
<div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && $root.isPlaying" pause-music>
<i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
<i class="fa fa-pause pause-song"></i>
</div>
<img ng-src="{{(track.albums[0].album_picture? $root.fileServer +'uploads/' + track.albums[0].album_picture:(track.artist.profile_picture? $root.fileServer +'uploads/' + track.artist.profile_picture:'img/defaultalbum.png'))}}" />
</div>
<!-- <div class="song-title-wrap">
<div class="song-title">
<a class="song-linking" href="#/song/{{track.id}}">
<h4>{{track.title}}</h4>
<h5>{{track.artist.user_name}}</h5>
</a>
</div>
</div> -->
</div>
Add a controller to a containing div:
<div ng-controller='MyController'>
Add ngMouseleave and ngMouseenter to the .song-thumb .hover-play element
<div class="hover-play" ng-if="$root.currentPlaying.song_id != track.id" ng-click="$root.playSong(track);" ng-mouseenter='state.hoverPlay=true;' ng-mouseleave='state.hoverPlay=false'>
Add the controller
angular.controller('MyController', [ '$scope', function ($scope) {
$scope.state = {
hoverPlay: false
};
}]);
Use ngClass to add/remove the class
<img ng-class="{ 'hoverclass': state.hoverPlay }" . . . >