We Keep Coding

How to display background for a specific bloc

I have joined a GIF below, if you notice the last two wallpapers, they are showing almost at the same time. I'm actually looking for a bit of a time lag between the two when displaying.
Actually, it's a timeline that i copied from : https://codepen.io/knyttneve/pen/bgvmma?editors=1000, but i changed the HTML to adapt it to the project.
This is the js code:
var fn_timeline = function() {
$.fn.timeline = function() {
var selectors = {
id: $(this),
item: $(this).find(".timeline-item"),
activeClass: "timeline-item--active",
img: ".o-timeline__img > img"
};
selectors.item.eq(0).addClass(selectors.activeClass);
selectors.id.css("background-image", "url(" + selectors.item.first().find(selectors.img).attr("src") + ")");
var itemLength = selectors.item.length;
$(window).scroll(function() {
var max, min;
var pos = $(this).scrollTop() + 300;
selectors.item.each(function(i) {
min = $(this).offset().top;
max = ($(this).height() + $(this).offset().top);
var that = $(this)
if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
selectors.item.removeClass(selectors.activeClass);
selectors.id.css("background-image", "url(" + selectors.item.last().find(selectors.img).attr('src') + ")");
selectors.item.last().addClass(selectors.activeClass)
} else if (pos <= max - 40 && pos >= min) {
selectors.id.css("background-image", "url(" + $(this).find(selectors.img).attr('src') + ")");
selectors.item.removeClass(selectors.activeClass);
$(this).addClass(selectors.activeClass);
}
});
});
}
$("#timeline-1").timeline();
}
And the HTML :
<div class="timeline-wrapper timeline1col ">
<div class="timeline-container" id="timeline-1" style="background-image: url("/sites/default/files/2021-01/reunion04-desktop.jpg");">
<div class="timeline">
<div class="timeline-item-wrapper timeline-item">
<div class="timeline-marker"></div>
<div class="timeline__content">
<div class="o-timeline__img timeline-bg">
<img src="/sites/default/files/2021-01/reunion01-desktop.jpg" alt="">
</div>
<p class="timeline__content-date"></p>
<h2 class="timeline__content-title"></h2>
<div class="wysiwyg">
<p>Six personnes, dont une est contaminée, se réunissent dans une.</p>
</div>
</div>
</div>
<div class="timeline-item-wrapper timeline-item">
<div class="timeline-marker"></div>
<div class="timeline__content">
<div class="o-timeline__img timeline-bg">
<img src="/sites/default/files/2021-01/reunion02-desktop.jpg" alt="">
</div>
<p class="timeline__content-date"></p>
<h2 class="timeline__content-title"></h2>
<div class="wysiwyg">
<p>Indépendamment de la distance, <strong>si les cinq autres personnes</strong> passaient quatre heures sans masques</p>
</div>
</div>
</div>
<div class="timeline-item-wrapper timeline-item">
<div class="timeline-marker"></div>
<div class="timeline__content">
<div class="o-timeline__img timeline-bg">
<img src="/sites/default/files/2021-01/reunion03-desktop.jpg" alt="">
</div>
<p class="timeline__content-date"></p>
<h2 class="timeline__content-title"></h2>
<div class="wysiwyg">
<p><strong>Si on utilisait des masques,</strong> ce risque diminuerait jusqu’à quatre contaminations. </p>
</div>
</div>
</div>
<div class="timeline-item-wrapper timeline-item timeline-item--active">
<div class="timeline-marker"></div>
<div class="timeline__content">
<div class="o-timeline__img timeline-bg">
<img src="/sites/default/files/2021-01/reunion04-desktop.jpg" alt="">
</div>
<p class="timeline__content-date"></p>
<h2 class="timeline__content-title"></h2>
<div class="wysiwyg">
<p><strong>Le danger de contamination diminue</strong> jusqu’à moins d’une personne</p>
</div>
</div>
</div>
</div>
https://imgflip.com/gif/4tdd6j OR
https://im.ezgif.com/tmp/ezgif-1-d311b28de417.gif

Tabs with multiple slideshow does not load sliders sometimes

I have created tabs. There are 3 tab items and tabs content is sliders.When i use these slideshows without tabs it works fine. But when used tabs, the slider of tab2 or tab3 sometimes does not load. It only occurs sometimes. What I have learnt that it loads perfectly on page load when using no tabs, But with tabs I have to hide the other 2 tabs on page load. So when click on these tabs, the slideshow does not appear /load sometimes.It also works fine sometimes. Tabs working fine the text content also.
I have been working on shopify, so using slideshow of theme.
Here is the code for html code for tabs:
<ul class="tabs">
<li>
<a data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">Tab 2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">Tab 3</a>
</li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image1.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image2.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image3.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu2">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image21.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image22.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image23.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu3">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image31.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image32.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image33.jpg"/>
</div>
</div>
</section>
</div>
Javascript for tabs
<script type="text/javascript">
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
I am working in shopify and the using the slider of theme, here is the code for slideshow from theme.
var slideshow = {
init: function(){
$('.js-homepage-slideshow').each(function (index, value){
var $homepageSlider = $(this);
var settings = {
slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
adaptiveHeight: $homepageSlider.data('adaptive-height')
}
//initiate the slideshow
if (!$homepageSlider.hasClass('flickity-enabled')){
var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
$homepageSlider.flickity({
adaptiveHeight: settings.adaptiveHeight,
wrapAround: true,
cellAlign: 'left',
imagesLoaded: true,
prevNextButtons: arrowShow,
draggable: arrowShow,
pageDots: usePageDots,
autoPlay: settings.slideshowSpeed,
arrowShape: arrowSize
});
if (settings.slideshowTextAnimation != ''){
var flkty = $homepageSlider.data('flickity');
setTimeout(function() {
$homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
$homepageSlider.on( 'select.flickity', function() {
if($homepageSlider.is(':visible')) {
var currentSlide = flkty.selectedIndex + 1;
setTimeout(function() {
$homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
$homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
}
});
}
}
if ($homepageSlider.find('.gallery-cell').length > 1) {
$homepageSlider.addClass('multi-image');
} else {
$homepageSlider.addClass('single-image');
}
$homepageSlider.find('.gallery-cell').each(function(){
var buttonWidth = 0;
$(this).find('.action_button').each(function(){
$button = $(this);
if($(this).width() > buttonWidth){
buttonWidth = $(this).width();
}
});
$(this).find('.action_button').width(buttonWidth);
});
});
},
unload: function($target){
var $slider = $target.find('.js-homepage-slideshow');
$slider.flickity('destroy');
}
}

Vue.js - on click collapse the nearest div

Below are some snippets of my code. Basically I have a few sections in my code to show some data and all these sections are collapsible. First load all sections expanded. On click on the chevron arrow, div -'ibox-content' will be collapsed.
How do I target only the nearest ibox to collapse? At moment when one arrow is clicked all sections are collapsed.
var vue = new Vue({
el: '#vue-systemActivity',
data: {
loading: false,
collapsed: false,
dateStart: '',
dateEnd: '',
status: 'fail',
msg: '',
meta: '',
data: ''
},
created: function() {
this.fetchData();
},
ready: function() {
this.fetchData();
},
methods: {
fetchData: function() {
var self = this;
if (self.dateStart != '' && self.dateEnd != '') {
this.loading = true;
$.get(baseUrl + '/backend/getSystemActFeed?dateStart=' + self.dateStart + '&dateEnd=' + self.dateEnd, function(json) {
self.data = json.data;
self.status = json.status;
self.meta = json.meta;
self.msg = json.msg;
}).always(function() {
self.loading = false;
});
}
}
}
});
");
<div v-if="data.events">
<div class="ibox float-e-margins" :class="[collapsed ? 'border-bottom' : '']">
<div class="ibox-title">
<h5>Events</h5>
<div class="ibox-tools">
<a v-on:click=" collapsed = !collapsed" class="collapse-link">
<i :class="[collapsed ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>
</a>
</div>
</div>
<div v-for="event in data.events" class="ibox-content inspinia-timeline" v-bind:class="{'is-collapsed' : collapsed }">
<div class="timeline-item">
<div class="row">
<div class="col-xs-3 date">
<i class="fa fa-calendar"></i> {{event.fDateStarted}}
<br/>
</div>
<div class="col-xs-7 content no-top-border">
<!-- <p class="m-b-xs"><strong>Meeting</strong></p> -->
<b>{{event.title}}</b> started on {{event.fDateStarted}} at {{event.at}}
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="data.mentorBookings">
<div class="ibox float-e-margins" :class="[collapsed ? 'border-bottom' : '']">
<div class="ibox-title">
<h5>Mentorship</h5>
<div class="ibox-tools">
<a v-on:click=" collapsed = !collapsed" class="collapse-link">
<i :class="[collapsed ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>
</a>
</div>
</div>
<div v-for="mentorProgram in data.mentorBookings" class="ibox-content inspinia-timeline">
<div class="timeline-item">
<p class="m-b-xs"><strong>{{mentorProgram.programName}}</strong></p>
<div v-for="upcomingBooking in mentorProgram.upcomingBookings">
<div class="row">
<div class="col-xs-3 date">
<i class="fa fa-users"></i> {{upcomingBooking.fBookingTime}}
<br/>
</div>
<div class="col-xs-7 content no-top-border">
#{{upcomingBooking.id}} {{upcomingBooking.mentor.firstname}} {{upcomingBooking.mentor.lastname}} ({{upcomingBooking.mentor.email}}) mentoring {{upcomingBooking.mentee.firstname}} {{upcomingBooking.mentee.lastname}} ({{upcomingBooking.mentee.email}}) on
{{upcomingBooking.fBookingTime}} thru {{upcomingBooking.sessionMethod}}
<!--
<p><span data-diameter="40" class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,4,7,3,2,9,8,7,4,5,1,2,9,5,4,7,2,7,7,3,5,2</span></p> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Each div should have each own collapsed state for control. You can turn collapsed into an array/object to control them.
simple example: https://codepen.io/jacobgoh101/pen/QQYaZv?editors=1010
<div id="app">
<div v-for="(data,i) in dataArr">
{{data}}<button #click="toggleCollapsed(i)">toggle me</button>
<span v-if="collapsed[i]">this row is collapsed</span>
<br/>
<br/>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
dataArr: ["data0", "data1", "data2"],
collapsed: [false, false, false]
},
methods: {
toggleCollapsed: function(i) {
this.$set(this.collapsed, i, !this.collapsed[i]);
}
}
});
</script>

Filtering a property with multiple values for one field - List.js and Filter.js

I am currently using the list.js plugin along with it's filter extension to produce a search results page that allows the user to filter down the end results to make it easier for them to find exactly what they are looking for.
I have been using their API to try and come up with a solution but in all honesty it is a little dated and not sure when it was last updated.
http://www.listjs.com/docs/list-api
My code is as follows:
HTML
<div id="search-results">
<div class="col-md-3">
<div class="panel panel-warning">
<div class="panel-heading">Filters</div>
<div class="panel-body">
<div class="search-filter">
<ul class="list-group">
<li class="list-group-item">
<div class="list-group-item-heading">
<h4>Filter Options</h4>
</div>
</li>
<li class="list-group-item">
<div class="nameContainer">
<h5 class="list-group-item-heading">Name</h5>
</div>
</li>
<li class="list-group-item">
<div class="typeContainer">
<h5 class="list-group-item-heading">Type</h5>
</div>
</li>
<li class="list-group-item">
<div class="difficultyContainer">
<h5 class="list-group-item-heading">Difficulty</h5>
</div>
</li>
<li class="list-group-item">
<label>Tour contains</label>
<input class="search form-control" placeholder="Search" />
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">Results</div>
<div class="list panel-body">
<div class="package well">
<div class="name">Niagra Falls</div>
<div class="type hidden">Boat Trip</div>
<div class="difficulty">Relaxed</div>
</div>
<div class="package well">
<div class="name">Pyramids</div>
<div class="type hidden">History Holiday</div>
<div class="difficulty">Relaxed</div>
</div>
<div class="package well">
<div class="name">Great Barrier Reef</div>
<div class="type hidden">Snorkling Holiday</div>
<div class="difficulty">Dangerous</div>
</div>
<div class="package well">
<div class="name">Boar Hunting</div>
<div class="type hidden">Hunting Trip</div>
<div class="difficulty">Active</div>
</div>
<div class="package well">
<div class="name">Thames Cruise</div>
<div class="type hidden">Cruise</div>
<div class="difficulty">Easy</div>
</div>
</div>
<ul class="pagination"></ul>
</div>
</div>
</div>
Javascript
var options = {
valueNames: ['name', 'type', 'difficulty'],
page: 3,
plugins: [
ListPagination({})
]
};
var userList = new List('search-results', options);
var updateList = function () {
var name = new Array();
var type = new Array();
var difficulty = new Array();
$("input:checkbox[name=name]:checked").each(function () {
name.push($(this).val());
});
$("input:checkbox[name=type]:checked").each(function () {
type.push($(this).val());
});
$("input:checkbox[name=difficulty]:checked").each(function () {
difficulty.push($(this).val());
});
var values_type = type.length > 0 ? type : null;
var values_name = name.length > 0 ? name : null;
var values_difficulty = difficulty.length > 0 ? difficulty : null;
userList.filter(function (item) {
return (_(values_type).contains(item.values().type) || !values_type)
&& (_(values_name).contains(item.values().name) || !values_name)
&& (_(values_difficulty).contains(item.values().difficulty) || !values_difficulty)
});
}
userList.on("updated", function () {
$('.sort').each(function () {
if ($(this).hasClass("asc")) {
$(this).find(".fa").addClass("fa-sort-alpha-asc").removeClass("fa-sort-alpha-desc").show();
} else if ($(this).hasClass("desc")) {
$(this).find(".fa").addClass("fa-sort-alpha-desc").removeClass("fa-sort-alpha-asc").show();
} else {
$(this).find(".fa").hide();
}
});
});
var all_type = [];
var all_name = [];
var all_difficulty = [];
updateList();
_(userList.items).each(function (item) {
all_type.push(item.values().type)
all_name.push(item.values().name)
all_difficulty.push(item.values().difficulty)
});
_(all_type).uniq().each(function (item) {
$(".typeContainer").append('<label><input type="checkbox" name="type" value="' + item + '">' + item + '</label>')
});
_(all_name).uniq().each(function (item) {
$(".nameContainer").append('<label><input type="checkbox" name="name" value="' + item + '">' + item + '</label>')
});
_(all_difficulty).uniq().each(function (item) {
$(".difficultyContainer").append('<label><input type="checkbox" name="difficulty" value="' + item + '">' + item + '</label>')
});
$(document).off("change", "input:checkbox[name=type]");
$(document).on("change", "input:checkbox[name=type]", updateList);
$(document).off("change", "input:checkbox[name=name]");
$(document).on("change", "input:checkbox[name=name]", updateList);
$(document).off("change", "input:checkbox[name=difficulty]");
$(document).on("change", "input:checkbox[name=difficulty]", updateList);
I've also created a working example on Codepen.
http://codepen.io/JasonEspin/pen/bdajKo
What I wish to achieve is for some packages, they may have multiple type values such as:
<div class="package well">
<div class="name">Niagra Falls</div>
<div class="type hidden">Boat Trip</div>
<div class="type hidden">Other trip type</div>
<div class="difficulty">Relaxed</div>
</div>
So in this situation, I would expect my filter to detect that there is a type of Boat Trip and Other trip type and display these options as a filter option. If either is selected, this package is then returned. However, it seems to ignore the second type.
I have even tried it like this as I expected it to act like an array but this was not the case. It just mashed the two items together to create a random option.
<div class="package well">
<div class="name">Niagra Falls</div>
<div class="type hidden"><div>Boat Trip</div><div>Other Trip Type</div> </div>
<div class="difficulty">Relaxed</div>
</div>
So, does anyone have any ideas how I can adapt my code to accept multiple options? My ideal scenario would be for me to attach a number of departure dates to each package and enable the user to filter by these departure dates.
Any help would be greatly appreciated as I believe the issue may be with my Lodash code but as it is my first time using Lodash i'm a little bit unsure of what it is actually doing due to its unusual syntax.

This was actually fairly straightforward to implement using a combination of string.split() definitions and array concatenations.
HTML
<div id="search-results">
<div class="col-md-3">
<div class="panel panel-warning">
<div class="panel-heading">Filters</div>
<div class="panel-body">
<div class="search-filter">
<ul class="list-group">
<li class="list-group-item">
<div class="list-group-item-heading">
<h4>Filter Options</h4>
</div>
</li>
<li class="list-group-item">
<div class="nameContainer">
<h5 class="list-group-item-heading">Name</h5>
</div>
</li>
<li class="list-group-item">
<div class="typeContainer">
<h5 class="list-group-item-heading">Type</h5>
</div>
</li>
<li class="list-group-item">
<div class="difficultyContainer">
<h5 class="list-group-item-heading">Difficulty</h5>
</div>
</li>
<li class="list-group-item">
<label>Tour contains</label>
<input class="search form-control" placeholder="Search" />
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">Results</div>
<div class="list panel-body">
<div class="package well">
<div class="name">Niagra Falls</div>
<div class="type hidden">Boat Trip|Other Trip|My Trip</div>
<div class="difficulty">Relaxed</div>
</div>
<div class="package well">
<div class="name">Pyramids</div>
<div class="type hidden">History Holiday</div>
<div class="difficulty">Relaxed</div>
</div>
<div class="package well">
<div class="name">Great Barrier Reef</div>
<div class="type hidden">Snorkling Holiday</div>
<div class="difficulty">Dangerous</div>
</div>
<div class="package well">
<div class="name">Boar Hunting</div>
<div class="type hidden">Hunting Trip</div>
<div class="difficulty">Active</div>
</div>
<div class="package well">
<div class="name">Thames Cruise</div>
<div class="type hidden">Cruise</div>
<div class="difficulty">Easy</div>
</div>
</div>
<ul class="pagination"></ul>
</div>
</div>
</div>
JAVASCRIPT
var options = {
valueNames: ['name', 'type', 'difficulty'],
page: 3,
plugins: [
ListPagination({})
]
};
var userList = new List('search-results', options);
var updateList = function () {
var name = new Array();
var type = new Array();
var difficulty = new Array();
$("input:checkbox[name=name]:checked").each(function () {
name.push($(this).val());
});
$("input:checkbox[name=type]:checked").each(function () {
if($(this).val().indexOf('|') > 0){
var arr = $(this).val().split('|');
var arrayLength = arr.length;
type = type.concat(arr);
console.log('Multiple values:' + arr);
}else{
type.push($(this).val());
console.log('Single values:' + arr);
}
});
$("input:checkbox[name=difficulty]:checked").each(function () {
difficulty.push($(this).val());
});
var values_type = type.length > 0 ? type : null;
var values_name = name.length > 0 ? name : null;
var values_difficulty = difficulty.length > 0 ? difficulty : null;
userList.filter(function (item) {
var typeTest;
var nameTest;
var difficultyTest;
if(item.values().type.indexOf('|') > 0){
var typeArr = item.values().type.split('|');
for(var i = 0; i < typeArr.length; i++){
if(_(values_type).contains(typeArr[i])){
typeTest = true;
}
}
}
return (_(values_type).contains(item.values().type) || !values_type || typeTest)
&& (_(values_name).contains(item.values().name) || !values_name)
&& (_(values_difficulty).contains(item.values().difficulty) || !values_difficulty)
});
}
userList.on("updated", function () {
$('.sort').each(function () {
if ($(this).hasClass("asc")) {
$(this).find(".fa").addClass("fa-sort-alpha-asc").removeClass("fa-sort-alpha-desc").show();
} else if ($(this).hasClass("desc")) {
$(this).find(".fa").addClass("fa-sort-alpha-desc").removeClass("fa-sort-alpha-asc").show();
} else {
$(this).find(".fa").hide();
}
});
});
var all_type = [];
var all_name = [];
var all_difficulty = [];
updateList();
_(userList.items).each(function (item) {
if(item.values().type.indexOf('|') > 0){
var arr = item.values().type.split('|');
all_type = all_type.concat(arr);
}else{
all_type.push(item.values().type)
}
all_name.push(item.values().name)
all_difficulty.push(item.values().difficulty)
});
_(all_type).uniq().each(function (item) {
$(".typeContainer").append('<label><input type="checkbox" name="type" value="' + item + '">' + item + '</label>')
});
_(all_name).uniq().each(function (item) {
$(".nameContainer").append('<label><input type="checkbox" name="name" value="' + item + '">' + item + '</label>')
});
_(all_difficulty).uniq().each(function (item) {
$(".difficultyContainer").append('<label><input type="checkbox" name="difficulty" value="' + item + '">' + item + '</label>')
});
$(document).off("change", "input:checkbox[name=type]");
$(document).on("change", "input:checkbox[name=type]", updateList);
$(document).off("change", "input:checkbox[name=name]");
$(document).on("change", "input:checkbox[name=name]", updateList);
$(document).off("change", "input:checkbox[name=difficulty]");
$(document).on("change", "input:checkbox[name=difficulty]", updateList);
Codepen
http://codepen.io/JasonEspin/pen/bdajKo

dblClick() not working

I have a big jquery code..
Thing is, i want to create a online banner editor.
I have added two texts which are inside two divs. This divs are draggable. The divs in turn resides under two more divs which are resizable
Now i want to make a feature that when i cleck on the div containing the text, the div must get editable so that i can edit inline
But dont know why, the dblClick isnt working
Here's my code
<script type="text/javascript">
$(function(){
$.contextMenu({
selector: '.context-menu-icon, .context-menu-text',
build: function($trigger, e) {
// this callback is executed every time the menu is to be shown
// its results are destroyed every time the menu is hidden
// e is the original contextmenu event, containing e.pageX and e.pageY (amongst other data)
return {
callback: function(key, options)
{
if(key=='delete')
$(this).remove();
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
};
}
});
});
$(document).ready(function()
{
$.fn.jPicker.defaults.images.clientPath='color-picker-img/';
$('.color_text').jPicker();
$("#blink_icon").dblclick(function()
{
alert( "Handler for .dblclick() called." );
});
$(".edit_text").dblclick(function()
{
alert( "Handler for .dblclick() called." );
});
$("#accept_first_text").click(function()
{
var img_w = $('#target').width();
var img_h = $('#target').height();
var first_text_width = parseFloat(parseFloat(img_w)/2);
var first_left = parseFloat(parseFloat(img_w)-parseFloat(first_text_width))/2;
var first_top = $('#first_text_top').val();
var first_left = $('#first_text_left').val();
var first_color = $('#first_text_color').val();
var first_size = $('#first_text_size').val();
var first_text_desc = $('#first_text_area').val();
$('#drag_first_text').css({"left":first_left+"px",
"top":first_top+"px",
"position":"absolute",
"width":first_text_width+"px",
"z-index":"5"});
$('#first_text').css({'font-weight':'bold',
'color':'#'+first_color,
'font-size':first_size+'px'});
$('#first_text').html(first_text_desc);
$('#first_text').resizable();
});
$("#accept_second_text").click(function()
{
var img_w = $('#target').width();
var img_h = $('#target').height();
var second_text_width = parseFloat(parseFloat(img_w)/2);
var second_left = parseFloat(parseFloat(img_w)-parseFloat(second_text_width))/2;
var second_top = $('#second_text_top').val();
var second_left = $('#second_text_left').val();
var second_color = $('#second_text_color').val();
var second_size = $('#second_text_size').val();
var second_text_desc = $('#second_text_area').val();
$('#drag_second_text').css({"left":second_left+"px",
"top":second_top+"px",
"position":"absolute",
"width":second_text_width+"px",
"z-index":"5"});
$('#second_text').css({'font-weight':'bold',
'color':'#'+second_color,
'font-size':second_size+'px'});
$('#second_text').html(second_text_desc);
$('#second_text').resizable();
});
$("#get_image").click(function()
{
html2canvas([document.getElementById('main_canvas')],
{
onrendered: function (canvas) {
/*document.getElementById('canvas').appendChild(canvas);*/
var Imagedata = canvas.toDataURL('image/png');
var imagename = $('#image_name').val();
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
$.post("save.php",{'image_link':Imagedata,'image_name':imagename},
function(img_data)
{
var final_href = $('<a/>',{'id':'final_href'});
$(final_href).prop({'href':'download.php?download='+img_data,'target':'_blank'});
var final_img = $('<img/>', {'id':'final','src':img_data});
$(final_img).css({"width":"100px","height":"auto"});
$(final_href).append(final_img);
$('#final_image').html(final_href);
ShowModalPopup('div_show_banner');
}
);
}
});
});
$("#get_animated_image").click(function()
{
html2canvas([document.getElementById('main_canvas')],
{
onrendered: function (canvas) {
/*document.getElementById('canvas').appendChild(canvas);*/
var shots = [];
var grabLimit = 400; // Number of screenshots to take
var grabRate = 50; // Miliseconds. 500 = half a second
var count = 0;
function showResults()
{
//console.log(shots);
for (var i=0; i<shots.length; i++) {
document.write('<img src="' + shots[i] + '"/>\n');
}
}
var grabber = setInterval(
function()
{
count++;
if (count>grabLimit)
{
clearInterval(grabber);
showResults();
}
var img = canvas.toDataURL("image/png");
shots.push(img);
}, grabRate);
var Imagedata = canvas.toDataURL('image/png');
var imagename = $('#animated_image_name').val();
}
});
});
$("#blink_icon").click(function()
{
var interval = 100;
var time = 90000000;
var timer = window.setInterval(function()
{
$("#drag_wrapper").css("opacity", "0.1");
window.setTimeout(function()
{
$("#drag_wrapper").css("opacity", "1");
}, 100);
}, interval);
window.setTimeout(function(){clearInterval(timer);}, time);
});
$("#upload_icon_Form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload_icon.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targeticonLayer").html(data);
},
error: function()
{
}
});
}));
$("#upload_template_Form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload_template.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
$(document).ready(function()
{
});
function dump_template(src,close_div)
{
var item_template = $('<img/>', {'id':'target','src':src});
var first_text = $('<div/>', {'id':'first_text','class':'edit_text'});
$(first_text).css({"left":"0px",
"top":"0px",
"color":"#fff",
"position":"relative",
"width":"auto",
"text-align":"center"});
$(first_text).html('Demo First Text');
var second_text = $('<div/>', {'id':'second_text','class':'edit_text'});
$(second_text).css({"left":"0px",
"top":"0px",
"color":"#fff",
"position":"relative",
"width":"auto",
"text-align":"center"});
$(second_text).html('Demo Second Text');
$('#main_canvas').html(item_template);
var width = $("#target").width();
var height = $("#target").height();;
$('#main_canvas').css({'height':height+'px','width':width+'px'});
var drag_first_text = $('<div/>', {'id':'drag_first_text','class':'context-menu-text'});
var drag_second_text = $('<div/>', {'id':'drag_second_text','class':'context-menu-text'});
$(drag_first_text).css({"left":"20px",
"top":"100px",
"position":"absolute",
"width":"auto",
"z-index":"5",
"text-align":"center",
});
$(drag_second_text).css({"left":"20px",
"top":"150px",
"position":"absolute",
"width":"auto",
"z-index":"5",
"text-align":"center"});
$(drag_first_text).append(first_text);
$(drag_second_text).append(second_text);
$('#main_canvas').append(drag_first_text).append(drag_second_text);
$(drag_first_text).draggable({grid:[1,1]});
$(drag_second_text).draggable({grid:[1,1]});
HideModalPopup(close_div);
}
function dump_icon(src,close_div)
{
var dragg_wrapper = $('<div/>', {'id':'drag_wrapper','class':'context-menu-icon'});
$(dragg_wrapper).css({"left":"20px",
"top":"20px",
"position":"absolute",
"width":"50px",
"z-index":"5"});
var item_img = $('<img/>', {'id':'icon_img','src':src});
$(item_img).css({"left":"0px",
"top":"0px"});
$(dragg_wrapper).append(item_img);
$('#main_canvas').append(dragg_wrapper);
$(dragg_wrapper).draggable({grid:[1,1]});
$("#icon_img").resizable();
HideModalPopup(close_div);
}
function choose_template()
{
$.post("showtemplate.php",{'show':'show'},
function(data)
{
$('#div_template_list').html(data);
ShowModalPopup('div_show_template');
});
}
function choose_icon()
{
$.post("showicon.php",{'show':'show'},
function(data)
{
$('#div_icon_list').html(data);
ShowModalPopup('div_show_icon');
});
}
</script>
EDIT
As someone requested, here's the html
<div class="container">
<div class="row">
<div class="span11">
<div class="demo-box">
<div class="page-header">
<h1>Dynamica Banner Creator</h1>
</div>
<h4>Upload Banner Template</h4>
<div style="margin-bottom: 10px; height: auto; overflow:hidden;">
<div class="button_div">
<a href="javascript:void(0);"
onclick="ShowModalPopup('div_upload_template');">
Upload Template
</a>
</div>
<div class="button_div">
<a href="javascript:void(0);"
onclick="choose_template()">Choose Template</a>
</div>
<div class="button_div">
<a href="javascript:void(0);"
onclick="ShowModalPopup('div_upload_icon');">Upload Icon</a>
</div>
<div class="button_div">
<a href="javascript:void(0);"
onclick="choose_icon()">Choose Icon</a>
</div>
</div>
<div style="position:relative;" id="main_canvas">
</div>
</div>
<div id="script_frame">
<h1>Enter your text details details</h1>
<div style="position:relative; height:auto; overflow:hidden;">
<div id="first_text_setter">
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Top-Pos.</span>
</div>
<div class="text_container">
<input id="first_text_top" name="first_text_top"
class="input_text"/>
</div>
</div>
<br/>
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Left-Pos.</span>
</div>
<div class="text_container">
<input id="first_text_left" name="first_text_left"
class="input_text"/>
</div>
</div>
<br/>
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Color.</span>
</div>
<div class="text_container">
<input id="first_text_color" name="first_text_color"
class="color_text"/>
<span class="jPicker">
</span>
</div>
</div>
<br/>
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Size.</span>
</div>
<div class="text_container">
<select id="first_text_size" name="first_text_size"
class="input_text">
<?php
for($i=4;$i<=32;$i=$i+2)
{?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}?>
</select>
</div>
</div>
<br/>
<div class="object_container">
<span class="input_span">First Text Des</span>
<br/>
<textarea id="first_text_area" name="first_text_area" class="input_text_area"></textarea>
</div>
<button id="accept_first_text">Get</button>
<div class="clearfix"></div>
</div>
<div id="second_text_setter">
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Txt Top-Pos</span>
</div>
<div class="text_container">
<input id="second_text_top" name="second_text_top"
class="input_text"/>
</div>
</div>
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Txt Left-Pos</span>
</div>
<div class="text_container">
<input id="second_text_left" name="second_text_left"
class="input_text"/>
</div>
</div>
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Text Color</span>
</div>
<div class="text_container">
<input id="second_text_color" name="second_text_color"
class="color_text"/>
<span class="jPicker">
</span>
</div>
</div>
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Text Size</span>
</div>
<div class="text_container">
<select id="second_text_size" name="second_text_size"
class="input_text">
<?php
for($i=4;$i<=32;$i=$i+2)
{?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}?>
</select>
</div>
</div>
<div class="object_container">
<span class="input_span">Second Txt Des</span>
<br/>
<textarea id="second_text_area" name="second_text_area" class="input_text_area"></textarea>
</div>
<button id="accept_second_text">Get</button>
<div class="clearfix"></div>
</div>
</div>
<br/>
<div style="clear:both; float:left; margin-top:30px; position:relative;">
<div class="object_container">
<span class="input_span">Image Name</span>
<input id="image_name" name="image_name"
class="input_text"/>
</div>
<br/>
<button id="get_image">Save Image</button>
</div>
<div style="clear:both; float:left; margin-top:30px; position:relative;">
<div class="object_container">
<span class="input_span">Animated Gif Name</span>
<input id="animated_image_name" name="image_name"
class="input_text"/>
</div>
<br/>
<button id="get_animated_image">Save Gif Image</button>
<button id="blink_icon">Blink</button>
</div>
</div>
</div>
</div>
</div>
</div>

There is far too much code to wade through, but the most likely cause is dynamic creation of the divs.
Use delegated event handlers instead, attached to a non-changing ancestor (document is the default if nothing closer is available). Try this:
$(document).on('dblclick', "#blink_icon", function()
{
alert( "Handler for .dblclick() called." );
});
$(document).on('dblclick', ".edit_text", function()
{
alert( "Handler for .dblclick() called." );
});
They work by listening for the specified event (dblclick in this case) bubbling up to the ancestor, then it applies the jQuery selector, then it calls the function on any matching elements that caused the event. This means they can work on elements that do not exist yet.