Posts

Showing posts with the label jquery

Slick slider different autoplay for each slide

Slick slider different autoplay for each slide I have a slick carousel with both an image and a video, I have it so when it reaches the video it autoplays and when it finishes it goes to the image. What I would like is to have autoplay and autoplay speed only for the image and not for the slide with the video as when the video finishes it's waiting for the autoplay speed to finish and then move to the image which doesn't look right. Is there a way to set the autoplay speed to 0 for the video slide...You can see the carousel in action here: http://foley13.webfactional.com/grid-website/carousel-test/ Here is my javascript for the slider: jQuery(function($){ var slider = $('.homeslider').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, autoplay: true, autoplaySpeed: 1000, initialSlide: 1, }); slider.on('afterChange', function(event, slick, currentSlide) { var vid...

jquery.easyPaginate.js all page numbers in pagination

jquery.easyPaginate.js all page numbers in pagination click here for image in the above images pagination is taking all avaliable number of pages I want to limit pagination 10number ,when u click last one then the 1st 10 has to hide and next 10 has to display Iam using below code $.fn.easyPaginate = function(options) { var defaults = { paginateElement: 'li', hashPage: 'page', elementsPerPage: 10, effect: 'default', slideOffset: 200, firstButton: true, firstButtonText: '<<', lastButton: true, lastButtonText: '>>', prevButton: true, prevButtonText: '<', nextButton: true, nextButtonText: '>' } return this.each(function(instance) { var plugin = { nav: null, el: $(this), settings: { pages: 0, objElements: null, cu...

Load Random Images from Directory

Load Random Images from Directory I'd like to randomly load images from a directory and have a button somewhere that refreshes the entire page. Here's the current code I have now: <?php $a = array(); $dir = '../public/wp-content/uploads/2012/01'; if ($handle = opendir($dir)) { while (false !== ($file = readdir($handle))) { if (preg_match("/.png$/", $file)) $a = $file; elseif (preg_match("/.jpg$/", $file)) $a = $file; elseif (preg_match("/.jpeg$/", $file)) $a = $file; } closedir($handle); } foreach ($a as $i) { echo "<img src='" . $dir . '/' . $i . "' />"; } ?> The problem is it loads all 400,000 images at once. I only want 30 to load. 30 random images from the directory. I tried looking up some code such as modifying the above to this: <?php $a = array(); $dir = '../public/wp-content/uploads/2012/01'; if ($handle = opendir($dir)) { while (false !== ($file = re...

Bootstrap carousel doesn't slide

Bootstrap carousel doesn't slide I absolutely do not understand why the bootstrap carousel code doesn't work at all with me. It's strange, i took the example which is on the bootstrap website, just customized some little things it should be work. I think it's a problem of version of bootrstrap or jquery but both of them are the last ones i found so i do not see where the problem come from. If anyone could help me, please ^^ #carouselReactions { margin-top: 25px; display: flex; flex-direction: row; justify-content: center; width: 100%; height: auto; } #carousel-left-control { width: 5%; display: flex; justify-content: center; align-items: center; } #carousel-text { width: 50%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } #carousel-text h3 { color: #0C0C0D; } .carousel-inner, .carousel-item { position: relative; text-align: center; } #carousel-right-control { width: 5%; dis...

Focus on Collapse Div

Focus on Collapse Div How can I focus the div of a bootstrap collapse using jquery. Here is my script: <div class="tab-pane fade in active" id="home1"> <div id="treeMapCategory"> <h2 class="m-b-xxs">Defect Categories<span class="btn btn-primary btn-xs pull-right" id="defectCategories" data-toggle="collapse" data-target="#insightDefectCategories"><i class="fas fa-comments"></i> Add Insights</span></h2> </div> </div><br/> <div class="collapse" id="insightDefectCategories" tabindex="1"> <div class="ibox-content box"> <div class="insightsTitle"><br/> <h3> <i class="fas fa-comments"></i> Insights for Defect Categories</h3> </div> </div> </div> Possible duplicat...

MVC sql table data to html table

MVC sql table data to html table Hi guys i am new to mvc i am trying to get the sql table details to html table for that what i done is i have created a controller and model and view i also created sql table with fields of voucher number and amount. here is how i created the controller here i have referenced the model modeldemo <HttpGet> Function getVoucherDetails() As JsonResult Return Json(New ModelDemo().getVoucherDetails(), JsonRequestBehavior.AllowGet) End Function the model demo code consists of sql connection Public Function getVoucherDetails() As List(Of Hashtable) Dim listCharts As List(Of Hashtable) = New List(Of Hashtable) Dim arrayCharts As Hashtable Try Dim conn = New SqlConnection(connStringLocal) conn.Open() Using query = New SqlCommand("SELECT vchNum,totalAmount FROM BillHeader", conn) Using resultSet = query.ExecuteReader If resul...

DataTable is not a function on Liferay 7

DataTable is not a function on Liferay 7 This is my current code on liferay : liferay <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.js"></script> <html> <table id="table_id" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody>...

When, if ever, should you use `jQuery` over `$`?

When, if ever, should you use `jQuery` over `$`? I was looking through some code and noticed: button: function(e) { e.preventDefault(); var $target = jQuery(e.target); var link = $target.attr('href'); I was just a little unclear about the line var $target = jQuery(e.target); . var $target = jQuery(e.target); Why use jQuery here? jQuery $target is just a variable name...it can be anything – Aravind S Jul 2 at 6:18 $target Possible duplicate of What is jQuery(document) vs. $(document) – Esko Jul 2 at 6:18 If you are looking for $ vs jQuery.. $ is an alias/shorthand of jQuery period – Saurabh Sharma Jul 2 at 6:20 ...

There are two new lines in database, but only one new line counted in Javascript

Image
There are two new lines in database, but only one new line counted in Javascript I really confused with this, I have a value taken from database which has two new lines. But then, I'm using .length in jQuery, and it only counts 1 line. this is the code I'm using: let text = $('#signature').text().length; console.log(text); It should be '9' (7 + 2 newlines), but the result is '8' this is the data in the database: This is the value that I print in the console: Thanks for the help It's kind of hard to digest your database information. Does SELECT COUNT(*) return 9 records, or just 8? – Tim Biegeleisen Jul 2 at 6:19 SELECT COUNT(*) @TimBiegeleisen No, it's only 1 record, what I need to count is the length of the string – rhog23 Jul 2 at 6:2...

How to paginate more than two object lists in one page - Django get_context_data()

How to paginate more than two object lists in one page - Django get_context_data() Suppose I have two or more than two object lists objects_a and objects_b in Views.py with get_context_data() of Django , and I would like to paginated for objects_a and objects_b, I pasted my objects_list.html as below too, which can only paginated one of objects, objects_a or objects_b, how to paginated both of objects? objects_a objects_b get_context_data() of Django I have more than two object lists, four or five lists, how to paginate more than two object lists in one page? Thank you so much for any advice. class ObjectListView(PaginationMixin, ListView): model = Object ordering = ('name', 'department') context_object_name = 'objects' template_name = '' paginate_by = 20 def get_queryset(self, **kwargs): queryset = Permit.objects.all() return queryset def get_context_data(self, **kwargs): ................. ob...

Ajax/jQuery autocomplete in search box (Shopify)

Ajax/jQuery autocomplete in search box (Shopify) I am looking to get autocomplete setup on my search bars within my Shopify shop- this uses Liquid and ajax I found this tutorial, and implemented it as it says, however it is not working, nothing gets autocompleted on any search bar on the site- I think it may be quite old and was written before the updates/changes to Minimal/Shopify search functionality. https://help.shopify.com/themes/customization/store/enable-autocomplete-for-search-boxes I can follow it through with Chrome dev tools, and it seems like it gets stuck where it adds the search-results list $('<ul class="search-results"></ul>').appendTo($(this)).hide(); , this doesn't appear when tracing the HTML of the page. This means that when it later tries to find this list var resultsList = form.find('.search-results'); it doesn't find it, and thus cannot populate with items. $('<ul class="search-results"></ul...

Change color Image in Canvas

Image
Change color Image in Canvas I want to change color a Image in canvas this is the Image You can see there is a Image transparent I was try using PutImgData but my transparent is changing color Is there anyway to change color the car and money only ? I was using this code : var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), image = document.getElementById("testImage"); canvas.height = canvas.width = 100; ctx.fillStyle = 'red'; ctx.fillRect(10,10,20,10); ctx.drawImage(image,0,0); var imgd = ctx.getImageData(0, 0, 45, 45), pix = imgd.data; for (var i = 0, n = pix.length; i <n; i += 4) { if(pix[i+3]==0) {continue;} pix.length[i]=r|pix.length[i]; pix.length[i+1]=g|pix.length[i+1]; pix.length[i+2]=b|pix.length[i+2]; pix[i + 3] = 255; } ctx.putImageData(imgd, 0, 0); 1 Answer 1 To mix manually you would have to...

How to get 1st and last date of a Month and Year where Month Is in Alpabet [closed]

How to get 1st and last date of a Month and Year where Month Is in Alpabet [closed] i have a textbox in which date is coming as March 2016 .now i want 1st and last date of that Month textbox Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question. I guess the first date of the month is always starts with 1? So in your case, it would be March 1, 2016. When getting the last date of the month I guess you can refer here: stackoverflow.com/questions/222309/… – David Angulo Jul 2 at 5:12 3 Answers 3 here...

window.onload vs $(document).ready()

Image
window.onload vs $(document).ready() What are the differences between JavaScript's window.onload and jQuery's $(document).ready() method? window.onload $(document).ready() possible duplicate of $(document).ready equivalent without jQuery – Kzqai Mar 15 '15 at 14:34 14 Answers 14 The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded. ready onload The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all...