Intercooler (+ JQuery)

Intercooler is very simple to use if you have any web development experience. Anyone reading this should be familiar with anchor tags in HTML:

Additionally, this makes intercooler a great tool for adding AJAX incrementally to an existing web app: there is no need for a huge rewrite, you can just start using it in the high value parts of your app quickly and simply.

http://intercoolerjs.org/docs.html#installation

Storing HTML Form data locally

<script type=”text/javascript”>

$(document).ready(function() {

var formElements = {};
var current_siteurl = window.location.href;
//console.log( ‘current_siteurl: ‘+ current_siteurl);

//WRITE
$(“form :input”).each(function(){
var input = $(this);
// console.log( input.attr(‘name’));

$(“textarea[name='”+input.attr(‘name’)+”‘]”).keyup(function() {

// console.log(‘click:’+ $(“textarea[name='”+input.attr(‘name’)+”‘]”).val());
formElements[input.attr(‘name’)]  = $(“textarea[name='”+input.attr(‘name’)+”‘]”).val();
formElements_str = JSON.stringify(formElements);
// A süti neve az aktuális oldal neve, egyedi azonosító
Cookies.set(current_siteurl, formElements_str , { expires: 3 });

});
});

//READ
$(“#show_saved_btn”).click(function() {

formPack_str = Cookies.get(current_siteurl);
//console.log( ‘suti: ‘+ formPack_str);
if(formPack_str){
formPack = JSON.parse(formPack_str);
for (var k in formPack ){
if (formPack.hasOwnProperty(k)) {
$(“textarea[name='”+k+”‘]”).val(formPack[k]);
}
}
}

});
});

</script>

 

 

Autosave form content to Local Storage, a cookie if LS is not available, as changes are made realtime in forms

https://github.com/BenGriffiths/jquery-save-as-you-type

The jQuery.autosave plugin automatically and unobtrusively saves form data based on a set of critera. : https://github.com/nervetattoo/jquery-autosave

Guide to have Persistent Form data using jQuery: http://time2hack.com/2013/09/guide-to-have-persistent-form-data-using-jquery.html

The idea is to store the form data in the cookies and refill tht data if the form is called once again. And if the for submission goes successful; we will just clear the cookies.

JQuery Cookie Lib: https://github.com/js-cookie/js-cookie

JQuery – Converts minutes into days, week, months and years

<script>

$(function() {

MINS_PER_YEAR = 24 * 365 * 60;
MINS_PER_MONTH = 24 * 30 * 60;
MINS_PER_WEEK = 24 * 7 * 60;
MINS_PER_DAY = 24 * 60;
MINS_PER_HOUR =  60;

$(“.minutes”).each(function() {

minutes = $(this).text();
minutes  = parseInt(minutes);
years = Math.floor(minutes / MINS_PER_YEAR);
minutes = minutes – (years * MINS_PER_YEAR);
months = Math.floor(minutes / MINS_PER_MONTH);
minutes = minutes – (months * MINS_PER_MONTH);
weeks = Math.floor(minutes / MINS_PER_WEEK);
minutes = minutes – (weeks * MINS_PER_WEEK);
days = Math.floor(minutes / MINS_PER_DAY);
minutes = minutes – (days * MINS_PER_DAY);
hours = Math.floor(minutes / MINS_PER_HOUR);
minutes = minutes – (hours * MINS_PER_HOUR);

if(years){current_years_part =  years +’ year(s) ‘; }else{ current_years_part = ”; }
if(months){current_months_part =  months +’ month ‘; }else{ current_months_part = ”; }
if(weeks){current_weeks_part =  weeks +’ week ‘; }else{ current_weeks_part = ”; }
if(days){current_days_part =  days +’ day ‘; }else{ current_days_part = ”; }
if(hours){current_hours_part =  hours +’ hour ‘; }else{ current_days_part = ”; }

$(this).text(current_years_part +’ ‘+current_months_part +’ ‘+current_weeks_part +’ ‘+current_days_part  +’ ‘+current_hours_part +’ ‘+minutes+ ‘ minutes’ );

});
});

</script>

<body>

<span class=’minutes’>654321</span>

<span class=’minutes’>341834321</span>

<span class=’minutes’>5452334321</span>

</body>

similar source: http://stackoverflow.com/questions/7812742/converts-minutes-into-days-week-months-and-years

Simple jQuery gallery

Template system: Laravel Blade

The my_gallery_pics  DIV contains the pics. First the script  collected to array, then show first item.

 

<script>

function addImageTodiv(current_pic) {
$(‘#picture_place’).prepend($(‘<img>’, {
id: current_pic,
src: “{{ URL::to(‘/uploads/pics’) }}” + ‘/’ + current_pic,
width: 360,
height: 425,
class: “img-responsive”}));
}

$(document).ready(function() {
picArr = new Array();
$(“#my_gallery_pics img”).each(function() {
//console.log(‘id:’ + $(this).attr(“id”));
picArr.push($(this).attr(“id”));
});
curr_pic = picArr[0];
$(‘#picture_place’).prepend($(‘<img>’, {id: picArr[0], src: “{{ URL::to(‘/uploads/profile_images/resized/medium’) }}” + ‘/’ + picArr[0]}));

arr_index = 0;
$(‘#gallery_arrow_right_box, #gallery_arrow_right’).click(function() {

$(‘#gallery_arrow_left’).show();

if (picArr.length – 1 > arr_index) {
arr_index++;
}
if (picArr.length – 1 == arr_index) {
$(‘#gallery_arrow_right’).hide();
}

//console.log(picArr.length + ‘ current_index: ‘ + arr_index);
addImageTodiv(picArr[arr_index]);

});

$(‘#gallery_arrow_left_box, #gallery_arrow_left’).click(function() {
$(‘#gallery_arrow_right’).show();
if (arr_index > 0) {
arr_index–;
}
if (arr_index == 0) {
$(‘#gallery_arrow_left’).hide();
}

// console.log(picArr.length + ‘ current_index: ‘ + arr_index);
addImageTodiv(picArr[arr_index]);

});

});
</script>

 

<div class=”pic” >
<div class=’left_box’  id=’gallery_arrow_left_box’ ></div>
<div class=’right_box’ id=’gallery_arrow_right_box’></div>
<a class=”arrow left”  id=’gallery_arrow_left’ ></a>
<a class=”arrow right”  id=’gallery_arrow_right’></a>
<div id=’picture_place’></div>
<div class=”text”>Lorem Ipsum</div>
<i class=”triangle”></i>
</div>

<div id=”my_gallery_pics” style=’display:none;’ >

@foreach ($pictures as $item)
@if($item->filename !=”)
{{ HTML::image(‘/uploads/pics/’.$item->filename, ‘profile picture’, array(‘style’ => ‘height:50px;’, ‘id’=> $item->filename)) }}
@endif
@endforeach
</div>

 

Creating Image Gallery with jQuery with swipe gestures

How to Make an Elegant Sliding Image Gallery with jQuery: http://www.elated.com/articles/elegant-sliding-image-gallery-with-jquery/

jQuery Swipe, a jQuery plugin that we can use to detect swipe gestures on mobile devices. We’ll use this to let users swipe left and right to move between the gallery images.

Other image gallery creating tutorial without swipe gestures:

http://w3lessons.info/2013/06/14/simple-image-gallery-with-jquery/

http://www.frontendwebhelp.com/javascript/jquery-photo-gallery.php

tooltip, popover, JQuery

JQuery ui equivalent for wz_tooltip.js

I need to convert a website which uses TagToTip() of wz_tooltip.js. : http://stackoverflow.com/questions/9990916/tagtotip-in-jquery

JQuery Tooltip with div content: http://iamceege.github.io/tooltipster/

Boostrap popover:

http://stackoverflow.com/questions/14265616/how-do-i-use-the-bootstrap-popover-to-display-the-content-of-a-sibling-or-child

http://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp