Find Jobs
Hire Freelancers

jQuery Random Layout Algorithm -- 2

$20-40 USD

В роботі
Опублікований over 4 years ago

$20-40 USD

Оплачується при отриманні
Need to create something like [login to view URL] Layout. This is the sample structure: <div class="grid-wrapper"> <div class="flex-grid-1"> <span class="flex-item"></span> <span class="flex-item"></span> <span class="flex-item"></span> </div> <div class="flex-grid-2"> <span class="flex-item"></span> <span class="flex-item"></span> </div> <div class="flex-grid-3"> <span class="flex-item"></span> <span class="flex-item"></span> <span class="flex-item"></span> <span class="flex-item"></span> </div> </div> Basically we have to do these things: 1) Add class to each flex item 2) order and prepend flex-grid class based on random. 3) There are total of 6 css class to be added in flex-item. Lets, say A,B,C,D,E and F class. There is sized allocated for each class. These are: A can occupy 100% width B can occupy 25% of width C can occupy 50% of width D can occupy 100% width E can occupy 50% of width F can occupy 100% of width Now, the condition is we can only have following cases in any flex-grid condition items: A B+B+B+B B+B+C B+B+E D E+E F How do we do it? for each first item of flex-item of flex-grid, we randomize to one of any css class(A,B,C,D,E and F) and check which of the following class can still fit in that flex-grid to have width 100%. For every first item of flex-grid we keep randomizing and add class based on it. By default I will have infinite loop of post list in my site: <div class="flex-grid"> <span class="flex-item"></span> <span class="flex-item"></span> infinite flex item like above </div> So, we have to prepend <div class="flex-grid-3"> based on each random condition. Let me know if you need more info over it. EDIT: Also, one more condition is, check if there if image inside flex-item, which is post image. If has no image, add only class C to the flex-item. The reason we do this is, other than B class flex-item, other class has big size, which we dont want to be empty without image. ////For responsive, for mobile: A,C,D,E,F = 100% width B= 50% for tablet: A: 100% B: 3.33% C: 75% D: 100% E: 75% F: 100% As like in desktop, the above mobile and tablet can also only have condition where the width cant except 100%. if it does, we prepend flex-grid to another flex-item which will have again random class, and based on that(if any item is fillable), we add class on next and so on.
ID проекту: 22769298

Про проект

7 пропозицій(-ї)
Дистанційний проект
Активність 4 yrs ago

Хочете заробити?

Переваги подання заявок на Freelancer

Вкажіть свій бюджет та терміни
Отримайте гроші за свою роботу
Опишіть свою пропозицію
Реєстрація та подання заявок у проекти є безкоштовними
7 фрілансерів(-и) готові виконати цю роботу у середньому за $51 USD
Аватарка користувача
Hi, My name is Heorhii (George), I've read the description and everything looks pretty straight forward. Please tell me how much time do I have? It shouldn't be a lot but asking just in case. I don't have current projects so I could start immediately. Thanks, George
$40 USD за 1 день
5,0 (12 відгуки(-ів))
5,9
5,9
Аватарка користувача
Hello ! Hope you are doing well! can you please come in chat box to discuss the project i am available and ready to start the project I am good at : - Custom PHP, Laravel, CI, NodeJs - HTML5 + CSS3 Styling, Bootstrap - PSD to HTML, Responsive web development - WordPress, Shopify, Magento, Opencart, - ReactJS, js & jQuery. - Joomla web development Please review our portfolio and our profile I am happy to answer any question regarding my Skills and experience Looking forward for your positive response Thanks & Regards Roop
$40 USD за 1 день
5,0 (45 відгуки(-ів))
5,5
5,5
Аватарка користувача
Dear Client! I am very happy to see your project detail. I think it is just my project. :) I read your requirement carefully and understood fully. I am sure I can do your project. As you can see my profile, https://www.freelancer.com/u/dreammate0621 I have much experience with 8+years. It's important to me to build long-term relationships with clients. Please get in touch with me to discuss more. Look forward to working with you. Thank you for taking time to look at my proposal. Warmest regards,
$30 USD за 1 день
5,0 (14 відгуки(-ів))
5,0
5,0
Аватарка користувача
Hello, how are you? As a jqurery expert with abundant experience, I'm glad to see your project. I can do my best to help you. Your project is very suitable for me, hope your good response. Thanks.
$100 USD за 7 дні(-в)
5,0 (10 відгуки(-ів))
4,4
4,4
Аватарка користувача
I have 5 years experience building dynamic and responsive websites using HTML, PHP, MySQL, CSS, jQuery, and AJAX. My areas of expertise are in building web apps using PHP, MySQL,Wordpress,CodeIgniter, Laravel 4-5, Vue.js and Bootstrap. I've built many sites with complex functionality, some of which included: -Invoicing -Accounting systems -Online payments -Scheduling -Customer Relationship Systems -Content Management Systems I take a lot of pride in writing clean well documented and easy to maintain code. I love building apps from the ground up but I can also step in and help on others projects when needed. I understand communication with the client. If you hire me, you will get a honest developer, Looking forward your respond, send my regards. Thanks.
$100 USD за 7 дні(-в)
5,0 (3 відгуки(-ів))
2,7
2,7
Аватарка користувача
Hello and thank you for considering me for this position! after carefully reading the project details, this is a project I can take to completion because: - I have experience with frontend languages like html, css and javascript as well as their accompanying frameworks like jquery - I keep an open communication pipeline with my employer in case any questions or problems arise - also would be happy to work out a timeline that would best suit you and myself
$20 USD за 3 дні(-в)
0,0 (0 відгуки(-ів))
0,0
0,0
Аватарка користувача
Hi, I'm a senior web developer and have good understanding on html structure and javascript-jquery coding. Please contact me on chat if you like to work to discuss more about technical details. best regards.
$30 USD за 3 дні(-в)
0,0 (0 відгуки(-ів))
0,0
0,0

Про клієнта

Прапор UNITED STATES
Houston, United States
5,0
9
Спосіб оплати верифіковано
На сайті з бер. 31, 2018

Верифікація клієнта

Дякуємо! Ми надіслали на вашу електронну пошту посилання для отримання безкоштовного кредиту.
Під час надсилання електронного листа сталася помилка. Будь ласка, спробуйте ще раз.
Зареєстрованих користувачів Загальна кількість опублікованих робіт
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Завантажуємо для перегляду
Дозвіл на визначення геолокації надано.
Ваш сеанс входу закінчився, і сеанс було закрито. Будь ласка, увійдіть знову.