#dropzone js | Explore Tumblr posts and blogs

tak4hir0 · 5 years ago

Link

Motivation behind this I am exploring Lightning Web Components and thought of preparing an use case on drag and drop functionality, but want to leverage native HTML drag-n-drop without using any 3rd party libraries. Also wanted that, this functionality will be build up using two unrelated components and where this drag-n-drop could be challenging. This motivates to me to build a proof-of-concept and share the challenges and knowledge to community members. Let's get started. Use Case Business has a requirement to see a Company's location in the Google Map when Company info is dragged and dropped to map. Developer wants to build using Lightning Web Components without 3rd party libraries and want to leverage native HTML functionalities. Possible End Results After building the use case, it will perform the functionality as following video: Solution Approach Let's first separate the functionalities in the two components as shown in the picture. displayAccount component will have functionality shown on left side and showAccountLocation component will have functionality as right side. Flow Diagram Create a flow diagram like this way to understand the functionalities, flow of control and finalize design approach. Flow diagram shows the preparation and action for drag-n-drop functionality component wise. Before going through this below section, it will be better to go through my post on Salesforce Lightning Web Components Cheat Sheet to have overall idea for all types of properties, methods, event propagation etc. Pre-requisite: Add pubsub component from repo and add it to project folder. This will be used for event communication using publish-subscribe pattern. displayAccount component: displayAccount.html will prepare a screen like this: Code is as follows: <lightning-card title="Lightning Web Components: Drag and Drag functionality with pub-sub pattern event communication" icon-name="custom:custom30" <div class="c-container" <lightning-layout <lightning-layout-item padding="around-small" <template if:true={accounts.data} <template for:each={accounts.data} for:item="account" <div class="column" draggable="true" key={account.Id} data-item={account.Id} ondragstart={handleDragStart} <div class="slds-text-heading_small"{account.Name} < < < as draggable, draggable="true" and ondragstart={handleDragStart} event handler have been used. displayAccount.js This is most important for implementing this functionality and if we follow the flow diagram it is easy to understand which methods are performing which responsibilities. Some important points to be highlighted: import LightningElement, wire which will be used in this class. import CurrentPageReference and getAccountLocations import fireEvent from c/pubsub @wire to function i.e CurrentPageReference and getAccountLocations (to retrieve account from database through Apex method) register dragover event pragmatically and attached it to template. this.template.addEventListener('dragover', this.handleDragOver.bind(this)); handleDragStart method, retrieve AccountId from the div, this is important line. accountId = event.target.dataset.item; After that, retrieve Account record and fire event to the subscribers fireEvent(this.pageRef, 'selectedAccountDrop', selectedAccount); Entire js file as below: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 /* eslint-disable no-console */ import { LightningElement, wire} from 'lwc'; import { CurrentPageReference } from 'lightning/navigation'; import { fireEvent } from 'c/pubsub'; import getAccountLocations from '@salesforce/apex/AccountHelper.getAccountLocations'; let i=0; let accountId; //store id from the div let selectedAccount; //store selected account export default class DisplayAccount extends LightningElement { //get page reference @wire(CurrentPageReference) pageRef; constructor() { super(); //register dragover event to the template this.template.addEventListener('dragover', this.handleDragOver.bind(this)); } //retrieve account records from database via Apex class @wire(getAccountLocations) accounts; //when drag is start this method fires handleDragStart(event) { event.dataTransfer.dropEffect = 'move'; //retrieve AccountId from div accountId = event.target.dataset.item; //console.log('event.target.dataset.item=' + event.target.dataset.item); //loop the array, match the AccountId and retrieve the account record for(i=0; i<this.accounts.data.length; i++) { if(accountId!==null && accountId === this.accounts.data[i].Id){ selectedAccount = this.accounts.data[i]; } } //fire an event to the subscribers fireEvent(this.pageRef, 'selectedAccountDrop', selectedAccount); } handleDragOver(event){ event.dataTransfer.dropEffect = 'move'; event.preventDefault(); } } AccountHelper.cls getAccountLocations method it fetches Account data based on SOQL query. I want to show specific records for demo, that's why filter condition has been added. public with sharing class AccountHelper { @AuraEnabled (cacheable=true) public static getAccountLocations(){ return[SELECT Id, Name, BillingStreet, BillingCity, BillingState, BillingPostalCode, BillingCountry FROM Account WHERE isDisplay__c = true]; } } Let's move to other component. showAccountLocation component showAccountLocation.html will end up like this: Code is as follows: <lightning-card title="Lightning Map component will show dropped Company Location" icon-name="custom:custom30" <div class="c-container" <lightning-layout <lightning-layout-item padding="around-small" <div class="dropcls" dropzone="link" <div class="slds-text-heading_small"{DroppedAccountName} <lightning-map map-markers={mapMarkers} markers-title={DroppedAccountName} zoom-level ={zoomLevel} center ={center} < <lightning-formatted-text value="|--Drop the dragged account here --|" < < < < Important things to note: Need to specify dropzone="link" in the div as attribute (pure HTML attribute) Use lightning-map to show Account location in Google Map showAccountLocation.js This is most important for implementing this functionality and if we follow the flow diagram it is easy to understand which methods are performing which responsibilities. Some important points to be highlighted: import registerListener, unregisterAllListeners from c/pubsub registering event listeners for dragover and drop events only in the constructor. this.template.addEventListener('dragover', this.handleDragOver.bind(this)); this.template.addEventListener('drop', this.handleDrop.bind(this)); connectedCallback and disconnectedCallback methods for registering and unregistering listeners. handleSelectedAccountDrop method to capture parameters passed during listening an event raised from displayAccount component. handleDrop method prepares the map retrieving values from AccountInfo Be sure to use event.preventDefault() wherever necessary. Entire js file as below: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 /* eslint-disable no-console */ import { LightningElement, wire, track } from 'lwc'; import { CurrentPageReference } from 'lightning/navigation'; import { registerListener, unregisterAllListeners } from 'c/pubsub'; let acct; export default class ShowAccountLocation extends LightningElement { @track mapMarkers = []; //holds account location related attributes @track markersTitle = ''; //title of markers used in lightning map. @track zoomLevel = 4; //initialize zoom level @track center; //location will be displayed in the center of the map @wire(CurrentPageReference) pageRef; accountInfo; @track DroppedAccountName = ''; constructor() { super(); //these are two must have events to be listended this.template.addEventListener('dragover', this.handleDragOver.bind(this)); this.template.addEventListener('drop', this.handleDrop.bind(this)); } connectedCallback() { // subscribe to selectedAccountDrop event registerListener('selectedAccountDrop', this.handleSelectedAccountDrop, this); } disconnectedCallback() { // unsubscribe from selectedAccountDrop event unregisterAllListeners(this); } //method is called due to listening selectedAccountDrop event handleSelectedAccountDrop(accountInfo) { this.accountInfo = accountInfo; } //when item is dropped this event fires handleDrop(event){ console.log('inside handle drop'); if(event.stopPropagation){ event.stopPropagation(); } event.preventDefault(); //assigns account records acct = this.accountInfo; this.DroppedAccountName = acct.Name; //prepares information for the lightning map attribute values. this.markersTitle = acct.Name; this.mapMarkers = [ { location: { Street: acct.BillingStreet, City: acct.BillingCity, State: acct.BillingState, Country: acct.BillingCountry, }, icon: 'custom:custom26', title: acct.Name, } ]; this.center = { location: { City: acct.BillingCity, }, }; this.zoomLevel = 6; } //when item is dragged on the component this event fires handleDragOver(event){ event.dataTransfer.dropEffect = 'move'; event.preventDefault(); } } meta files should include where these components are available. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="displayAccount" 46.0 true lightning__RecordPage lightning__AppPage lightning__HomePage I have used .css file googling on the net as I am not good in styling. Create a Lightning App Builder page with two regions and place those components and run the application, it will display the page like this. Finally we are done and thanks for reading. References Further Reading

0 notes

tutorials-website · 5 years ago

Link

Drag and drop file upload is a very successful way to make your web application user-friendly. Generally, this feature allows you to drag an element and drop it to a different location on the web page.

#upload file #drag and drop #dropzone #tutorials website #learn php #mysql

0 notes

wpelegant · 8 years ago

Text

CrossPower - Sport Gym Fitness WordPress Theme

New Post has been published on http://wpelegant.com/crosspower-sport-gym-fitness-wordpress-theme/

CrossPower - Sport Gym Fitness WordPress Theme

CrossPower – Sport Gym Fitness WordPress Theme http://themeforest.net/category/wordpress/retail/health-beauty

CrossPower is our new, modern WordPress Theme, designed specifically for sport websites, gyms, yoga studios, fitness and crossfit clubs.

First and foremost, the Theme features Visual Page Builder Plugins – an incredible tool to create your own, unique web pages. Your website is going to be a total success because we created all the neccessary pages for it. Several blog and gallery options are going to be the best way to show people what you do and share sport transformation stories with them; the shop page will come in handy if you decide to start selling your sport items; the schedule page will help you make sure that your clients are up to date with your club’s timetable and are always in time for the class; the template also features the team page to show the public that your team is the most professional out there.

This theme abounds with widgets and shortcodes. Comes with several options for beardcrumbs and copyright, as well as footers and headers. The template is available in light and dark versions, and boxed or wide layout variations. Features fonts from Google Fonts library and Font Awesome icons. The code of the theme is well formatted and commented. Powered by Twitter Bootstrap v3 this template is going to give you the best user experince!

This template is surely going to make your sport business thrive! Just give it a try and see for yourself! In case anything goes wrong our support team is always ready to back you up!

Use Visual Builder Plugins to create your own unique pages!

Main video presentation sections:

Visual Builder

You can now use Visual Builder to create singlepage or multipage websites with no coding!

Main Visual Builder features:

Drag’n’drop layout building and editing.

Easy to create multipage and single page sites.

Creating other pages based on existing saved page.

Inline content editing.

Easy-to-edit and customize predefined building blocks.

Highlighted HTML source code editing.

Project import and export.

Drag’n’drop images upload.

Easy page preview.

Creating ZIP archive with all files needed for uploading onto production server.

Webserver is not necessary.

Theme Features

Features List

Redux FrameWork based

Clean and Valid Code

Fully Responsive

Boxed and Wide Layouts

Light and Dark versions

Parallax Sections

Animate everything you want

Extreamly Customizable

Free Fonts and Icons

Tones of Shortcodes

Well Documented

Working PHP Scripts and Widgets included:

Flickr Widget

MailChimp Subscribe Form

Twitter Widget

Contact Form

Clean and Valid Code

And much more

What You Get

WordPress Theme, CSS, JS & PHP files

Sample data files

Working PHP scripts

Free Icon Fonts

Good documentation

Credits ans Sources

As we mentioned earlier, we used Twitter Bootstrap v3 as CSS framework and HTML5 Boilerplate for this template.

Fonts:

http://www.google.com/fonts/ – Google WebFonts

http://www.socicon.com/ – Social Icons Font

http://fontawesome.io/ – Font Awesome

http://icomoon.io/ – teaser rt-icons font

Theme feature

modernizr-2.6.2.min.js detecting browsers features.

jquery-2.2.4.min.js is a popular JavaScript library.

bootstrap.min.js is a stantard Twitter Bootstrap library.

respond.min.js is required for Twitter Bootstrap v3 work in older browsers.

html5shiv.min.js adds HTML5 compatibility for older browsers.

superfish.js is a script that enables dropdown menu.

hoverIntent.js is a component for superfish menu.

jquery.flexslider-min.js is a jQuery plugin for main and bottom sliders.

jquery.isotope.min.js is a jQuery plugin for filtrable gallery.

jquery.prettyPhoto.js is a jQuery plugin for displaying lightbox content.

jquery.ui.totop.js is a jQuery plugin for toTop button.

jquery.easing.1.3.js is a jQuery plugin for different types of animation

jquery.scrollTo-min.js and jquery.localscroll-min.js needed for smooth single page navigation.

jquery.easypiechart.min.js is a jQuery plugin that uses the canvas element to render simple pie charts for single values.

jquery.jflickrfeed.min.js plugin makes it easy to pull Flickr feeds and display them on your site.

jquery.tweet.min.js plugin enables twitter widget on your site.

owl.carousel.min.js is a jQuery carousel plugin for “partners” section

jquery.bxslider.min.js is a jQuery slider plugin

jquery.nicescroll.min.js is a plugin used to replace browsers standard scroll bar

jquery.fractionslider.min.js is a great slider plugin for main slider

jquery.parallax-1.1.3.js is used for parallax backgrounds.

jquery.appear.js is used to find out if HTML element is inside browser viewport

jquery.countTo.js is used for teasers with counter

jquery.cookie.js is used for store cookies information in theme

Visual Builder scripts

jquery-ui.min.js is a popular UI library for jQuery

jquery.scrollbar.min.js is a jQuery plugin for custom scrollbar

tinymce.min.js is a popular WYSIWYG editor

dropzone.js is drag’n’drop file upload library

bootstrap-select.min.js is s custom select for Twitter Bootstrap using button dropdown

angular.min.js is a powerfull Google javascript framework

angular-bootstrap-select.js is a Angular module for select input elements

angular-dropzone.js is a module for Angular to work with Dropzone lib

angular-sanitize.min.js is a module for Angular to sanitize HTML code

angular.ngStorage.min.js is a module for Angular to work with browser Local Storage

Images

depositphotos.com

danielezedda.com

foodiesfeed.com

gratisography.com

magdeleine.co

picjumbo.com

picography.co

unsplash.com

freepsdfiles.net

free-logo-design.net

NOTE: The images used in the theme are not included in the main download file, they are only for the preview purpose.

You can find a list of used images in template documentation.

Check WordPress Theme

0 notes

flatlogic · 4 years ago

Text

How to Choose the Best React Drag and Drop? Top 15 Free Libraries to Set Up

New Post has been published on https://flatlogic.com/blog/how-to-choose-the-best-react-drag-and-drop-top-15-free-libraries-to-set-up/

How to Choose the Best React Drag and Drop? Top 15 Free Libraries to Set Up

What is Drag and Drop? Drag and Drop types Basic Concepts How to choose the Drag and Drop? Typescript vs Javascript How to build a custom React Draggable Component? How do I drag and drop in React dnd? React Drag and Drop Library List Wrapping Up About Flatlogic

User experience is crucial when you interact with your website or web app. Though it may seem that choosing a drag and drop element is no big deal, after all, it’s just a basic functionality component! But, the drag and drop module lets you transfer the items between drag handlers, tables and lists, touch devices, animations, previews, and placeholders, thus resolving the simple but still integral step that allows you to ‘take an object’ and drag it to another location.

What is Drag and Drop?

Drag and drop is an action carried out by the user in order to move one or another element to a different place in UI. There are lots of well-known applications where you use the drag and drop function as the basic one, let’s remind ourselves of just a few of them: Trello, Jira, Zapier, Monday, and others, where we one way or another using drag and drop to move things.

This simple action may be comfy not only as a part of the modern user experience, especially for those people who have disabilities or some difficulties with performing manual-type actions.

But why does such a simple element take quite a while to develop? The answer is simple: it takes a lot of code to build high-quality, neat and clean JavaScript forms. And it is much faster to run any ready-made library where you can easily borrow some pieces of code.

Check out React Material Admin Full!

Material UI No jQuery and Bootstrap! Fully Documented Codebase

Drag And Drop Types

There are dozens of open-source libraries that help to create draggable and movable elements (e.g. lists, cards, tables, etc) in your React app. And, this option can simplify the UX route, in comparison to the process of filling in forms, and shortens the time of one or another formal action.

The most common use cases for drag-and-drop in React include: uploading files; replacing the components within created lists and rearranging images and assets.

Basic Concepts

DragDrop Container: where you held and then taken out the component (data)

Children: the content of dataItem; DragDropContext: is the place where drag-and-drop is carried out;

Droppable: the component which allows draggable components to be able to drop at the targeted area;

Draggable: the component which will be replaced;

As well as Droppable, it requires several properties to make the component displaceable;

onDragStart: onDragStart component occurs when the user starts to drag an element;

onDragEnd: the component known as DragEnd occurs after the action has been accomplished;

DataTransfer: the component that can hold data about the dragged object;

DropTarget: component that contains drop data;

How to Choose a Good Drag and Drop?

Surely, this is a relatively controversial question, because if you have enough time at your disposal, you may start coding on your own. Moreover, if you’re a junior programmer, we would not recommend that you use any ready libraries, but try to figure out the problem using your own code. Yes, bugs are inevitable, though after each challenge there will surely be progress.

In Flatlogic we create web & mobile application templates built with React, Vue, Angular and React Native to help you develop web & mobile apps faster. Go and check out yourself! See our themes!

Typescript vs. Javascript Library

The vast majority of drag and drop libraries are written with the help of Typescript prevalence because Typescript is known for being structured, highly secure, and more consistent than vanilla Javascript. At the same time, it takes longer to compile the code in TypeScript, whereas JavaScript is more easy and flexible in terms of development.

Do you like this article? You can read also:

React Pagination Guide And Best React Pagination Libraries

So, if you are an old-school adherent, who is devoted to JS, you should understand that you need to know Typescript peculiarities to write with it. Plus, the size of the code will increase, because Typescript requires extremely detailed and accurate coding.

How to Build Custom Draggable Components in React?

To enable dragging on the component we need to proceed this path:

First off, create a drag component (drop area), in other words — container, where you will further drag dataItem. Set the draggable attribute on the dataItem

Handle onDragStart event Add here event.dataTransfer.setData

event.dataTransfer.setData component will contain some data, dataItem Create a function startDrag event Create a dropTarget component; it will call an event handler when dataItem with children will be dropped in Handle onDragOver event Create event.preventDefault() function that will enable the dropping process of the component Handle onDrop event Set the consent function – getData

Call the dropped component onItemDropped

Finally, return the components to their initial state,

<div onDragOver=dragOver onDrop=drop> props.children </div>);

Voila! This way your component will be ‘transferred’ from the container to the DropTarget.

How to Make Drag and Drop With React dnd library?

React Drag’n’Drops Libraries List

1. React Beautiful Dnd

React beautiful dnd is the most popular library to build React Drag and Drop lists easily. It has already won the heart of 23.8k developers on GitHub, thanks to its high performance. It has a clean and powerful API that is easy to work with and it fits well with any modern browser.

GitHub

2. React Drag and Drop Container

Here the name of the library speaks for itself. React Drag Drop container offers functionality for mouse and touch devices; i.e. it allows you to set up a draggable element, drop a target for it, plus, it highlights the drop target when dragging over it (highlightClassName). Also, you can drag an element copy of the element, or let the element disappear while dragging (disappearDraggedElement).

GitHub

3. Draggable

Another well-deserved library, does not perform any sorting behaviour while dragging, it has the following modulers: Droppable, Sortable, and Swappable. Draggable itself does not perform any sorting behaviour while dragging, but does the heavy lifting, e.g. creates mirror, emits events, manages sensor events, makes elements draggable.

GitHub

4. React Grid Layout

React Grid Layout library has 13,5k stars on GitHub. Inside you will get a fluid layout with sensible breakpoints, static widgets, draggable and resizable widgets. You can drag the elements, and resize them. The closest similar instrument is called Packery, though this is a bin-packing layout library using jQuery, which React Grid Layout doesn’t use.

: React-Grid-Layout works well with complex grid layouts that require drag-and-drop, such as dashboards which can be resized(e.g., looker, data visualization products, etc.)

: Because of the clunky API, React-Grid-Layout may need more calculations and it’s obviously a better fit for large-scale apps.

5. React Dropzone

React Dropzone is an example of simple HTML5 drag and drop zone with React.js. It requires a standard installation process with npm command and using a module bundler like Webpack or Browserify. React Dropzone has 8.2 Github stars and is based on Javascript.

GitHub

6. React DND

React DND got 15.9k stars on GitHub, and was written mainly with the help of TypeScript, as well as JavaScript and CSS. It has the sort option, group option, delay option, delayOnTouchOnly option, swapThreshold option, and many other essential features for implementing drag and drop components. React DND works well with grids, one-dimensional lists, but it’s harder to work with than for instance the well-known react-beautiful-dnd when you need to customize something individually.

GitHub

7. React SortableJS

React sortable is one more brilliant instrument made with Javascript and HTML, commonly used for creating drag-and-drop lists. It has all the basic functionalities of sorting/delaying/swapping/inverting and lots of others. Available on all touch modern browsers and touch devices.

GitHub

8. Interact.js

Snap, resize, customize your drag and drop elements with Interact.js. The library has also an advanced version, check it here. It also supports evoking simultaneous interactions; interaction with SVG and works well with desktop and mobile versions of Chrome, Firefox, and Opera as well as Internet Explorer 9+. Sharp has 10.2 k on GitHub and

GitHub

9. React Kanban

React Kanban is a relatively young but super pluggable library positioning itself as ‘one more Kanban/Trello board lib for React’. Kanban was written with the help of JavaScript, SCSS and HTML. But, be careful using this library with lots of cards (more than 1k), cause then you may face some performance hurdles. In this case, virtual lists may become the solution.

GitHub

10. Juggle and Drop

Juggle and Drop is an instrument to manage your tasks made with pure Javascript, with the help of React, redux, MLAB, express mongodb, Google Analytics. With Juggle and Drop you can add, edit, delete cards and lists; clone the component, navigate to the root directory, and other.

GitHub

11. React Motion

One more highly recommended and really powerful package for working with animation functions in JS. This package has 19.7k on GitHub, and 612,446 installations according to NPM. And among others, it has sorting lists with drag and drop. How to get started? npm install — save react-motion and keep working!

GitHub

12. React Smooth DnD

The React-smooth drag and drop package is a super lightweight and highly customizable library for React with 1,5k stars on GitHub and with lots of configuration options covering d&d scenarios. The cardboard and fonts look really neat and pleasant to the eye.

GitHub

13. Nested DND

Nested DND in juicy colors helps to drag a part of the stack with the items lying on top of the dragged one. Drop it on top of any plays, and see how simple and intuitive it is.

GitHub

14. React Nestable

React Nestable, an example of JavaScript drag and drop library, is a drag & drop hierarchical list made with a neat bit of deduction. This package is finalizing our list of open-source drag and drop libraries recommended while building the dnd option.

GitHub

15. React Files Drag and Drop

One more relatively fresh library to manage and customize your inner drag and drop component easily is React-files-drag-and-drop. It has a list of basic properties and was developed with TypeScript and CSS language.

GitHub

Check more examples of React drag and drop on codesandox or here.

Wrapping Up

Now you know enough about React DnD libraries and it is high time to explore further the rest of the documentation in detail! Stay motivated, don’t be afraid of making mistakes, and debugging them! Well, this is a good place to tell: if you’ve never made a mistake, you’ve probably never done anything.

About Flatlogic

At Flatlogic, we carefully craft dashboard templates on React, Vue, Bootstrap and React Native to bootstrap coding. We are mentioned in the Clutch top-performing agencies from all over the world. In the last 6 years, we have successfully completed more than 50 templates and large-scaled custom development projects for small startups and large enterprises. We love our work and know that only beauty (beautifully designed templates 🙂 ) can save the world.

Suggested Posts:

Top 30 Open Source And Paid React Charts + Examples React Table Guide And Best React Table Examples Best React Open Source Projects

The post How to Choose the Best React Drag and Drop? Top 15 Free Libraries to Set Up appeared first on Flatlogic Blog.

#development #flatlogic #admin dasboard #admin template #javascript

1 note · View note

websolutionstuff · 3 years ago

Text

#websolutionstuff #laravel #laravel8 #laravel7 #laravel6 #php #jquery #example #bootstrap #html #dropzone #drag and drop #files #file upload #dropzone js

0 notes

airman7com · 5 years ago

Text

Laravel 7.x, 6.x Tutorial Mengunggah Gambar Dropzone

Laravel 7 dan 6 mengunggah gambar menggunakan tutorial dropzone js. Dalam tutorial ini, kami ingin membagikan kepada Anda bagaimana Anda dapat menggunakan dropzone untuk mengunggah satu atau beberapa gambar di Laravel. Tutorial contoh ini juga berfungsi dengan laravel 7.x versi.

Tutorial ini menunjukkan kepada Anda hal-hal langkah demi langkah untuk mengunggah gambar menggunakan dropzone di…

View On WordPress

0 notes

opixpk-blog · 6 years ago

Text

AdForest - Classified Ads WordPress Theme

https://opix.pk/blog/adforest-classified-ads-wordpress-theme/ AdForest - Classified Ads WordPress Theme https://opix.pk/blog/adforest-classified-ads-wordpress-theme/ Opix.pk LIVE PREVIEWBUY FOR $49 Classified Ads WordPress Theme – Adforest AdForest is one of the leading and the best Premium Classified Ads WordPress theme with outstanding front-end UI. Get ad posting WordPress theme with different color options and with awesome Wp functionality. Google map is also integrated in WordPress ads theme. Our WordPress classifieds theme usability and overall user-experience is according to modern Era. If you want your classified business stand out from the crowd AdForest is the one stop solution to start and make it easy to sell your products online. Demo Login Credentials Email: [email protected] Password: demo123 AdForest is a Premium Classified WordPress Theme, super flexible, Multiple Reusable sections with a lot of possibilities and has a fully responsive design. We Built it with HTML5 , CSS3 and Latest bootstrap 3.7 and Latest JQuery 3.1 . We Build a Complete Classifieds Solution according to all kind of ad posting requirements. We carefully handcrafted this theme with a strong focus on typography, usability and overall user-experience. It’s very quick to setup and easy to customize. Our Theme comes up with Extensive Documentation to guide you and set up your components correctly. Last but not Least, AdForest is designed with respect to adopting any kind of classified business in the world. Here are some exceptional Features: Features: Rating & Reviews on ads Advance Search Added Multi Currency front end Added Complete New look Multiple new Home Pages added Advanced Google map integration Radius Search Added 3 type of Ad Search Pages added New header Styles added Translation for famous Languages added New User Registration verification added Images Re ordering added Category Based Featured ads feature added Simple ad expiry added Compatible with 100+ social media ad share Ajax Drag and Drop Image Up loader Bad Word Filter Google Map Locations Unlimited Custom Fields Safty Tips and Tricks Featured Ads AD Expiry Limits Free and Paid Package Admin control Auto/Manuel AD Approval Currency Change from Back end AD Related Taxonomies Woo Commerce Payment Option Two Type of Layouts Different Sidebar Widgets Advertisement Spots Mode Of Communication Messaging System Hidden Phone Number Google Map Location Contact Form 7 Built in Coming Soon Theme Related Ads Sticky Sidebar advertisement Ad Status ( Sold, Expired etc) Widget Ready Search Drag & Drop Taxonomies Base Search Price Based Search AD Type Based Search Biding System Seller Public Profile Seller Rating Location Based Search Featured Ads Based Search Title Based Search Side bar Widgets category Based Search (Up to 4 level) Warranty Based Search Advertisement Within Search Result Mail Chimp 1 Click Demo Imp. Lang.Translation ready Redux Framework Visual Composer – Page Builder for WordPress Latest Bootstrap 3.7 Latest JQuery 3.1 HTML5 & CSS3 Truly Responsive Font Awesome Included Classified Icons Included Clean and Creative Design Clean Code Easy to Customize Completely Reusable Section Targeted Ad Spots Smart and creative Category Grid Multiple Listing Style Cross Browser Compatible Multiple Blog Pages 2 type of single ad page Complete User Dashboard User Profile Pages Login and Register Models 404 and Contact Us Page SEO Optimized Well Managed Documentation Advance Search Sidebar NOTE: Kindly update your theme to Modern version as soon as possible if you are using classic version as Classic version will not be supported in future. We are using Woo Commerce for package system in AdForest. we are not using it for shopping products. Note:We are not providing support for any kind of adult website. If you want to buy than you can proceed but do not expect support for illegal or Adult Websites. Attention: Google maps Service has updated his policy. Please read details over here Adforest Update History Change log / Updates: v 3.5.0 ——December 29th, 2018 1). Add 4 New Demo. PetForest, TechForest, MatchForest and Landing Page. 2). Fix css issue on old demos. 3). Fix Categories based date field issue. 4). Fix bidding on/off issue while editing the ad. 5). Update required plugins. Change log / Updates: v 3.4.8 ——December 1st, 2018 1). Update WPBakery for latest WordPress version 5.0 2). Fix css issues. 3). Fix woo-commerce gallery images issue Change log / Updates: v 3.4.7 ——November 23rd, 2018 1). Fix Price Required Issues. 2). Fix css issues. 3). Containner for wpbackery default elements. http://documentation.scriptsbundle.com/docs/adforest-wordpress-theme/#7129 4). On Search Page new option add for Grid/List View. Change log / Updates: v 3.4.6 ——November 15th, 2018 1). RTL css issue fixed. Change log / Updates: v 3.4.5 ——October 27th, 2018 1). Fix css and some other small issue. 2). Update woo-commerce templates. Change log / Updates: v 3.4.4 ——October 19th, 2018 1). Fix Css Issue. 2). Fix Slider issues. Change log / Updates: v 3.4.3 ——October 16th, 2018 Version 3.4.3 1). Fix Bump Ad addition issue. 2). Fix translation issues. 3). Update library for featured ads loop. 4). Added option to show phone number to login users only. 5). Fix css issue. Change log / Updates: v 3.4.2 ——September 15th, 2018 1). Update Plugins. 2). Fix menu issue on mobile. 3). Fix shop page css issue Change log / Updates: v 3.4.1 ——September 4th, 2018 1). CSS and some other bug fixes. Change log / Updates: v 3.4.0 ——August 31st, 2018 1). 2 New Home Pages. 2). New ad details page. 3). New public profile design along with contact form. 4). All seller/buyer page. 5). 2 new grid styles added. 6). Date and URL added in category based custom feilds. 7). Small css bug fixes. Change log / Updates: v 3.3.1 ——August 1st, 2018 1). Woo-Commerce Shop Issues Fixed 2). Fix issue over https:// Leaflet Map. A open source JavaScript library. (google maps alternative) Change log / Updates: v 3.3.0 ——July 20th, 2018 1). Woo-Commerce Shop Added 2). Leaflet Map Added. A open source JavaScript library. (google maps alternative) 3). Added New shortcode of Woo-Commerce for homepage. 4). Fix small css issues. 5). Update Plugins. Change log / Updates: v 3.2.9 ——June 30th, 2018 1- Update the plugins to latest versions. 2- Start price slider from 0 instaead of 1. 3- Fix small css and jQuery issues. 4- Remove multi currency dropdown in widgets when we have only 1 currency. 5- Categories based template issue fixed. Change log / Updates: v 3.2.8 ——June 7th, 2018 1- Update Woocommerce template. 2- Fix Google location auto submit on ad post. 3- Fix Term and Conditions On Check Out Page. 4- Fix Featured ads slider on Radiuos Search. 5- Fix Css issues. Change log / Updates: v 3.2.6 ——May 23rd, 2018 1- Dropzone js issue fixed. Change log / Updates: v 3.2.5 ——May 22nd, 2018 1- General Data Protection Regulation (GDPR) Compliance 2- Delete profile button option to delete account. (Admin has option to allow or not). 3- Small issue fixes. Change log / Updates: v 3.2.4 ——May 6, 2018 1- Featured ad slider on category(taxonomy) pages. 2- Featured grid layout added for featured ads slider. 3- Title limit for grid ads layout. 4- Breadcrumb image can be changeable. 5- Added more images limit for an ad. 6- Fixed small CSS issues. Change log / Updates: v 3.2.3 ——April 24, 2018 1- Radius search avail on all 3 search layout; prior to this only available in map search layout. 2- Feature and bump option also available on "My ads" under user profile. 3- User reviews count issue has been resolved. 4- Small CSS issue has been resolved. Change log / Updates: v 3.2.2 ——April 13, 2018 1- Bid can be deleted from admin panel by admin. 2- User rating issue resolved. Change log / Updates: v 3.2.1 ——April 11, 2018 1- WP all import add-on added. 2- Default currency selected option. 3- Search with currency fixed. 4- Empty query string not display as search tags. 5- Option in search side bar to open widget by default. 6- Sub-categories option to display in sidebar search option. 7- Search map focused on change location in search with map option. Change log / Updates: v 3.2.0 ——March 21, 2018 1- Updated bidding module. 2- Count down timer added on ad details page and list and grid view. 3- Top bidder on ad ad details page. 4- Bidding close after count down timer end. 5- Compatible with latest PHP version 7.2.3. Change log / Updates: v 3.1.9 ——March 15, 2018Updates 1- Compatible with latest php 7.2.3 ( speed improved ). 2- Updated WPBakery Page Builder. 3- Redirect back to action after logged in. 4- Fix images re-ordering issue on mobile devices. 5- Fixed YouTube icon in footer. Change log / Updates: v 3.1.8 ——March 04, 2018Updates Changelogs; 1- RTL CSS Fixes. 2- JS issues resolved. Change log / Updates: v 3.1.7 ——February 25, 2018Updates Changelogs; 1- Get current location in map while ad posting. 2- Speed control of feature ad slider from theme options and also enable loop. 3- Small CSS fixes. Change log / Updates: v 3.1.6 ——February 22, 2018Updates Changelogs; 1- Package order history added in profile. 2- Delete user rating from admin panel by editing the user. 3- Floating value in bidding. 4- Tabs short code issue with list style resolved. 5- Radius search sync with query. 6- Increase ads limit in short codes. 7- Unlimited ads in packages. 8- Auto package order approve option in theme options. Change log / Updates: v 3.1.5 ——February 14, 2018Updates 1- Rating & reviews on ads. (New Feature) 2- updated woo-commerce templates. 3- Expired and Sold out image position fixed. 4- Header black logo link fixed in mobile view. 5- Featured ads slide automatically for more user attraction. 6- Mail_to functionality in contact us page on email(s). 7- Fixed widgets style in ad details page. 8- Price in floating allowed. Change log / Updates: v 3.1.4 ——January 31, 2018Updates 1- Minimum dimension of image mode. 2- Custom location in shortcodes. 3- Change price type order and also add new price type. 4- Small CSS and JS fixes. Change log / Updates: v 3.1.3 ——January 13, 2018Updates 1- Fixed Css Issues Change log / Updates: v 3.1.2 ——January 09, 2018Updates 1- Fixed Css Issues 2- Update Translations Change log / Updates: v 3.1.1 ——January 04, 2018Updates 1- Fix issue From Version 3.1.0 Change log / Updates: v 3.1.0 ——January 03, 2018Updates 1- Phone no. versification by twilio. 2- Bump up ads. 3- Social profiles on user public profile. 4- Map scrolling on mobile phones. 5- Changeable custom locations labels. Change log / Updates: v 3.0.8 ——December 15, 2017Updates 1)- Added Custom location; Country -> State -> City -> Town Change log / Updates: v 3.0.7 ——December 14th, 2017Updates/Fixes 1)- Sticky menu blink issue fixed. 2)- Added author column in ads in admin back-end. 3)- Footer app link corrected. 4)- Breadcrumb issue fixed. 5)- Fixed small CSS issues. 6)- Updated plugins. Change log / Updates: v 3.0.6 ——December 2nd, 2017Updates/Fixes 1)- Update plugins. 2)- Fixed css issue on red color theme. Change log / Updates: v 3.0.5 ——November 25th, 2017Updates/Fixes 1)- Added Overlapping Marker Spiderfier for Google map 2)- Fixed small issues Change log / Updates: v 3.0.4 ——November 17th, 2017Updates/Fixes 1)- Fix Term Taxonomy Issue With WordPress 4.9 2)- Responsive issue fix Change log / Updates: v 3.0.3 ——November 17th, 2017Updates/Fixes 1)- Make Compatible With WordPress 4.9 2)- Update visual composer Change log / Updates: v 3.0.2 ——November 15th, 2017Updates/Fixes 1)- Improve Security 2)- Fix fonts issue for https:// 3)- Small CSS Fixes Change log / Updates: v 3.0.1 ——November 11th, 2017Updates/Fixes 1- Some important fixes. Change log / Updates: v 3.0.0 ——November 10th, 2017New Features 1- Advance Search Added 2- Multi Currency front end Added 3- Complete New look 4- Multiple new Home Pages added 5- Advanced Google map integration 6- Radius Search Added 7- 3 type of Ad Search Pages added 8- New header Styles added 9- Translation for famous Languages added 10- New User Registration verification added 11- Images Re ordering added 12- Category Based Featured ads feature added 13- Simple ad expiry added 14- Compatible with 100+ social media ad share Change log / Updates: v 2.5.7 ——October 26th, 2017Important 1- Ad Post Bug Fix Change log / Updates: v 2.5.6 ——October 23rd, 2017 Change logs 2.5.6: 1- Update Visual Composer 2- Update woo-commerce and templates. Change log / Updates: v 2.5.5 ——September 16th, 2017 Change logs 2.5.5: 1- Ad sort by price on search. 2- Add local address option in ads. 3- Fixed small JS issue. Change log / Updates: v 2.5.4 ——August 19th, 2017 1- Fixed map issue. 2- Reset password fixed. 3- Category based templates fixes. 4- YouTube video update issue fixed. 5- Drop zone translation issue fixed. Change log / Updates: v 2.5.3 ——August 12th, 2017 1- Make ad featured while posting/updating ad. 2- 0.00 price fixed. Change log / Updates: v 2.5.2 ——August 11th, 2017 1- Ad video in popup. 2- Small CSS fixes. Change log / Updates: v 2.5.1 ——August 10th, 2017 1- Password reset with link via email. 2- Email on Ad approval. 3- Email on new user registration. 4- Updated social login features; user will register if not a member on social login. 5- Small CSS fixes. Change log / Updates: v 2.5.0 ——July 28th, 2017 1- Check boxes added in category based custom templates. 2- Select user map while posting ad by using Google maps. 3- Video icon on show on ads if ad has video. 4- updated required plugins. Change log / Updates: v 2.4.7 ——July 15th, 2017 1- Visual Composer Updated 2- Code Optimization Change log / Updates: v 2.4.6 ——July 12th, 2017 1- No price will be hidden instead of 0.00 2- Profile image size increased up to 2MB 3- Hide some variables when woo-commerce is no using on profile. 4- Fixed typo. Change log / Updates: v 2.4.5 — June 17th, 2017 1- Fix sub categories template. Change log / Updates: v 2.4.4 — June 16th, 2017 1- Category based templates up to 4 level. 2- Currency position for packages. 3- Category short codes with option to point it on search page or category page. 4- Price type ( Fixed, Negotiable) Change log / Updates: v 2.4.3 — June 10th, 2017 1- Some issues fixes. 2- Update pre-packed plugins. Fixes : v 2.4.2 — June 6th, 2017 1- Some bug fixes. Change log / Updates: v 2.4.1 — June 4th, 2017 1- Updated footer file. Change log / Updates: v 2.4.0 — June 2nd, 2017 1- Added Price option for right, left, thousand separator, decimals and decimal separator. 2- Added new category style with it sub-category. (Category Classic) 3- Add JS and CSS option in header as well. 4- Order by for ads short-code (Latest, Oldest, Random) 5- Category based template search updated. Change log / Updates: v 2.3.0 — May 25th, 2017 1- Custom category based search (Video: https://goo.gl/pN35le) 2- Ad author select the bidding option from front end if admin allowed. 3- fa icons in menu fixed. Change log / Updates: v 2.2.0 — May 20th, 2017 1- Bidding System 2- Admin can change the ownership of an AD. 3- Phone number required option from back-end. 4- New bid email template added. 5- POT file updated. Updates: v 2.1.1 — May 13th, 2017 1- Updated POT file. 2- Fixed some CSS issues. 3- Some Structure Changes. Updates: v 2.1.0 — May 11th, 2017 1- Seller Rating ( user can give rating to each other ) 2- User badges from Admin. 3- Pretty popup for AD full images. 4- User Public profile. 5- Latitude and Longitude ON/OFF from back end. 6- Email template added for new rating. Updates: v 2.0.0 — May 06th, 2017 1- Category based templates for ad posting. 2- Pin point map by using latitude and longitude. 3- Ad post button changeable text from admin. Knowledge Base For Category Based Form Fields Updates: v 1.5.0 — April 29th, 2017 1- Add email templates for emails. 2 - Small CSS fixes.. Updates: v 1.4.2 — April 27th, 2017 1- Fixed Currency symbol on RTL single ad page. 2 -Sticky Ad text and icon changeable from admin panel 3- Small CSS fixes. Updates: v 1.4.1 — April 22nd, 2017 1- Fix carousel slider issue. 2- Small CSS fixes. Updates: v 1.4.0 — April 21st, 2017 1- Ajax Notification for messages with complete admin settings. 2- Fixed font issue for https. 3- Updated core plugins. 4- Small CSS fixes. Updates: v 1.3.1 — April 17th, 2017 1- Add Link to Ad Images. 2- Fix Translation Strings. 3- Fix some css. Updates: v 1.3.0 — April 16th, 2017 1- Remove some design sections. Updates: v 1.2.1 — April 11th, 2017 1- Sent & received offers under messages tab. 2- Fixed Images upload extension on mobile phones. 3- minor css fixes. Updates: v 1.2-——- April 8th, 2017 1- Add pre-packed watermark plugin for watermark on ads images. 2- Admin can change user default picture on profile from back-end. Updates: v 1.1.1 — April 7th, 2017 1- Updated visual composer from 5.1 to 5.1.1 2- Fixed issue in ad share on social media. 3- Fixed google map on ad details page. Updates: v 1.1.0 — April 6th, 2017 1- User can see their pending ads now. 2- Some string were not translatable, fixed it. 3- Woo commerce CSS fixed in select2. 4- YouTube error fixed. Updates: v 1.0.1 — April 2nd, 2017 1.Added YouTube video option for AD. 2.Add price text fields with price slider on search ads 3.Fixed small issues. Updates: v 1.0 — March 28th, 2017 1. Email Notification On Ad Posting Source

0 notes

laravelnews4u · 6 years ago

Photo

How to use dropzone with Laravel and Angularjs https://t.co/IPhJL0zgub #laravel #php #dev #html5 #js #coder #code #geek #angularjs #coding #developer #vue #vuejs #wordpress #bootstrap #lumen #angular6 https://t.co/aspWlzVFIt

#Laravel #php #web development #web dev

0 notes

laraveltutorial · 6 years ago

Photo

#Laravel #php #webdevelopment #webdev

0 notes

webbygraphic001 · 7 years ago

Text

8 Free JavaScript Image Cropping Scripts & Plugins

You can build some pretty cool stuff with JavaScript. And you can build most of that stuff with plugins to save yourself the trouble of coding from scratch. One of the toughest features to build is an image cropping UI.

This has to support image uploading from the user, then it has to take that image into the frontend and let the user perfect their crop. After that it passes image crop data to the backend so the image can be cropped and saved.

That’s a lot of work!

Save yourself the trouble and use one of these free plugins to offload the heavy lifting…

1. Cropper

Cropper is currently in v4.0 beta and it’s one of the best JS cropping scripts on the web.

This runs entirely on jQuery but there is a non-jQuery version too.

Both versions are identical other than syntax and they have some of the best features around for image cropping with a laundry list of options and methods.

When hovering over the uploaded image you can scroll in and out using your mouse wheel to zoom. This also supports pinching and touch-based input devices.

Not to mention you can add custom tools with the Cropper API. These tools let visitors automatically rotate, zoom, and force-crop certain aspect ratios onto their uploads.

Cropper is just a great plugin hands down.

2. Croppie

Another viable option is Croppie. This comes as a vanilla JS plugin so it doesn’t require jQuery or any other library. Good news for minimalist developers.

It does support npm and Bower if you want to run this through a package manager. Or you can download the source right from GitHub if you fancy that instead.

With Croppie you simply target the crop window element and define the image(can be updated dynamically). This runs on vanilla JS so I hope your classic JavaScript knowledge is still fresh.

And there are tons of options you can call inside the Croppie() function to handle customizations, callback methods, and so much more.

3. jQuery Guillotine

With a name like Guillotine you might not know what to expect.

Rest assured, it’s just a simple image cropper. Although it does have some not-so-simple features. For example you can add zooming functionality into the UI to let users get a closer look at their photos before cropping.

There’s also a really clean drag and drop interface so you can position the image exactly where it needs to be.

All code is naturally available for free and the code itself is pretty small(less than 3KB all together).

Just remember this is a jQuery plugin so if you’re looking for plain JavaScript this is the wrong choice.

4. Croppic

The cleverly-named Croppic plugin is one more free jQuery alternative.

It can handle all your basic image cropping, dragging, zooming, stuff like that. But it stands out because of its many additional features, one of which can automatically handle image uploads right from your browser.

That feature does require a web server and a backend language (PHP is preferred). But if you check out the homepage and click “docs” you’ll find the uploadData method. A fantastic way to handle Ajax image uploads with class.

It’s not to say other jQuery image cropping plugins don’t offer this much support.

But I find Croppic easier to use with more UI customizations like modal windows.

Plus you’ll actually find free PHP scripts on the page that you can pair with the Croppic plugin. How cool is that?

5. React Drop n Crop

There’s a lot to love about React.js. It’s quickly becoming a staple for building dynamic webapps with a JS-heavy stack.

The React Drag and Drop plugin is a combo of two different scripts. This uses the dropzone library to handle image uploads along with the React Cropper as an image cropping React component.

You can see a live demo here if you’re curious how it works in the browser.

That whole demo is dynamic too so you can follow along with each action as it occurs in real time.

If you’re a React developer this is one script you’ll want to know about.

6. Tinycrop

Tinycrop is exactly what the name sounds like.

It runs on plain JavaScript and it supports a slimmed-down version of the many features you’ll find with the bigger libraries. But that doesn’t mean Tinycrop can’t handle your image cropping.

On the contrary, Tinycrop is the perfect choice for developers concerned with bloated pages and slow HTTP requests.

You can find setup directions on the GitHub page along with a full code snippet demonstrating all the options available.

If you’re building dynamic sites that are meant to load fast and efficiently, Tinycrop is gonna be your best friend.

7. Jcrop

The Jcrop plugin has been around for quite a while being one of the first jQuery image cropping tools on the web.

However it’s also got quite a slowdown in updates and support. The repo hasn’t had major updates in a few years and the same can be said of the demo page.

Still, this script works very well for handling image uploads via PHP. Most web developers stick to PHP since it’s easy to learn and it runs on most major web servers, not to mention it plays nice with the largest CMS engines like WordPress.

Jcrop is a fun open source image cropping script that’s worth a glance if you want something made for large browser support.

Just keep in mind it’s unlikely to get new updates or major support in the coming years.

8. Smartcrop.js

Smartcrop.js is one of the few plugins that uses content-aware technology to help users crop their images.

It’s built on vanilla JavaScript and has its own proprietary algorithm to recognize faces, compositions, and ultimately define a “good crop” right after you click the upload button.

That’s quite an accomplishment considering we’re just talking about frontend scripting here.

Have a look at the demo page to see how this works. You can see each original photo, the suggested crop based on the Smartcrop algo, and the finished crop afterwards.

This may seem very complicated but you don’t have to write much of anything. All you have to do is get the plugin setup, add the initial function to run on the page, and then just upload some images.

Smartcrop.js is the first “smart” plugin I’ve seen and it’s one hell of a script.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source from Webdesigner Depot https://ift.tt/2JLVkZU from Blogger https://ift.tt/2KtIuAR

#Blogger

0 notes