I have a javascript that draws pattern as users use my site. I want this script to be implemented in the back of an html page that I can add the top layer content to. So pattern drawn on mouse movement should be background of my html page. I tried with transparent div but in this case active dicv would be trasparent(div) but my pattern is in background so it cant track mouse moves. please suggest any solution
dimanche 19 avril 2015
codeigniter : getting ajax result issues
i have this simple exams system and i want to use ajax when a user answer
this is my form :
when i use action="<*?=site_url("exams/check_answer")?>" it gives 302 error
<form action="<?=site_url('exams/'.$result->id.'/check_answer');?>" method="post" id="answer-exam-frm">
<div>
<p><input type="radio" name="response" value="first"><span class="choice-exam"><?php echo $result->choice1;?></span></p>
<p><input type="radio" name="response" value="second"><span class="choice-exam"><?php echo $result->choice2;?></span></p>
<p><input type="radio" name="response" value="third"><span class="choice-exam"><?php echo $result->choice3;?></span></p>
<input type="hidden" name="examid" value="<?php echo $result->id;?>">
<input type="submit" class="btn btn-default" value="اجابة">
</div>
</form>
this is my controller :
public function check_answer(){
$user_answer = $this->input->post('response') ;
$exam_id = $this->input->post('examid') ;
$result = $this->style_model->check_answer($user_answer,$exam_id) ;
$this->output->set_content_type('application/json') ;
if($result){
$this->output->set_output(json_encode(['result' => 1 ])) ;
return false;
}
$this->output->set_output(json_encode(['result' => 0 ])) ;
}
And this is my model :
public function check_answer($user_answer,$exam_id)
{
$this->db->where('response' , $user_answer);
$this->db->where('id' , $exam_id);
$get = $this->db->get('exam') ;
return $get->result() ;
}
Increase Font Size in Bootstrap?
Is it possible to increase font size in Bootstrap? A functionality to allow the user to increase the font of the whole website.
Is this possible? If there is a way to manually increase the font-size will be helpful too instead of the automated way.
Find a jQuery dialog by its title
I previously created a jQuery dialog like this:
dialog.dialog({
title: 'Hello',
closeOnEscape: true,
width: "auto",
maxWidth: "500",
close: function(event, ui) { dialog.remove(); }
});
Now I need to check if some dialog with the title 'Hello' exists.
How can I do that?
Thanks.
Return a Radio Button Value in MeteorJs
I am trying to follow this tutorial to implement a, in my case, radio button. I am iterating over the categories but in my case, Job Types:
Views:
<label>Category</label>
{{#each jobTypes}}
<label class="checkbox inline">
<input id="jobType_{{_id}}" type="radio" value="{{_id}}" name="jobType" {{hasJobType}} /> {{name}}
</label>
{{/each}}
My Submit js:
Template.jobCreate.events({
'submit form': function(e) {
e.preventDefault();
var job = {
jobTitle: $(e.target).find('[name=jobTitle]').val(),
aboutRole: $(e.target).find('[name=aboutRole]').val(),
howToApply: $(e.target).find('[name=howToApply]').val(),
aboutCandidate: $(e.target).find('[name=aboutCandidate]').val(),
benefits: $(e.target).find('[name=benefits]').val(),
// for the radio button. This feels wrong:
jobTypes: $(e.target).find('input[name=jobType]:checked').val(),
};
Meteor.call('jobInsert', job, function(error, result) {
// display the error to the user and abort
if (error)
return alert(error.reason);
Router.go('jobPage', {_id: result._id});
});
}
});
My helper js:
Template.jobCreate.helpers({
hasJobType: function() {
return _.contains(job.jobTypes, this.name) ? 'checked' : '';
}
});
If I echo return {{jobTypes}}, I get the radio button _id but if I replace value {{_id}} with {{name}}, in the views, I get the name but the tutorial uses the id instead. Am I missing something is my js?
I have yet to implement an edit/delete js.
jQuery Taggd plugin (Edit mode) get back value in input fields
Im using the jQuery taggd plugin, so far so good. I modified a small bit, im using it in edit mode. So when a user types in a value in the textbox it checks if it is a URL or or string, if its a URL it runs a ajax call to a php file which scrapes some data from the url. Url title, description and image. I have created 3 hidden input fields which get populated once the ajax call is finished. Once you click on the SAVE icon it saves the data to the DOM. But i want it to display again once a user clicks on the tag again. At the moment its only displaying the value of the standard input field.
This is the taggd plugin with some small modifications:
/*!
* jQuery Taggd
* A helpful plugin that helps you adding 'tags' on images.
*
* License: MIT
*/
(function($) {
'use strict';
var defaults = {
edit: false,
align: {
x: 'center',
y: 'center'
},
handlers: {},
offset: {
left: 0,
top: 0
},
strings: {
save: '✓',
delete: '×'
}
};
var methods = {
show: function() {
var $this = $(this),
$label = $this.next();
$this.addClass('active');
$label.addClass('show').find('input').focus();
},
hide: function() {
var $this = $(this);
$this.removeClass('active');
$this.next().removeClass('show');
},
toggle: function() {
var $hover = $(this).next();
if($hover.hasClass('show')) {
methods.hide.call(this);
} else {
methods.show.call(this);
}
}
};
/****************************************************************
* TAGGD
****************************************************************/
var Taggd = function(element, options, data) {
var _this = this;
if(options.edit) {
options.handlers = {
click: function() {
_this.hide();
methods.show.call(this);
}
};
}
this.element = $(element);
this.options = $.extend(true, {}, defaults, options);
this.data = data;
this.initialized = false;
if(!this.element.height() || !this.element.width()) {
this.element.on('load', _this.initialize.bind(this));
} else this.initialize();
};
/****************************************************************
* INITIALISATION
****************************************************************/
Taggd.prototype.initialize = function() {
var _this = this;
this.initialized = true;
this.initWrapper();
this.addDOM();
if(this.options.edit) {
this.element.on('click', function(e) {
var poffset = $(this).parent().offset(),
x = (e.pageX - poffset.left) / _this.element.width(),
y = (e.pageY - poffset.top) / _this.element.height();
_this.addData({
x: x,
y: y,
text: '',
url: '',
url_title: '',
url_description: '',
url_image: ''
});
_this.show(_this.data.length - 1);
});
}
$(window).resize(function() {
_this.updateDOM();
});
};
Taggd.prototype.initWrapper = function() {
var wrapper = $('<div class="taggd-wrapper" />');
this.element.wrap(wrapper);
this.wrapper = this.element.parent('.taggd-wrapper');
};
Taggd.prototype.alterDOM = function() {
var _this = this;
this.wrapper.find('.taggd-item-hover').each(function() {
var $e = $(this),
$input = $('<input id="url" type="text" size="16" />')
.val($e.text()),
$url_title = $('<input type="text" id="url_title" class="url_title" />'),
$button_ok = $('<button />')
.html(_this.options.strings.save),
$url_description = $('<input type="text" class="url_description" id="url_description" />'),
$url_image = $('<input type="text" class="url_img" id="url_img" />'),
$url_preview = $('<div id="content"></div>'),
$button_delete = $('<button />')
.html(_this.options.strings.delete);
$button_delete.on('click', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y');
_this.data = $.grep(_this.data, function(v) {
return v.x != x || v.y != y;
});
_this.addDOM();
_this.element.triggerHandler('change');
});
// Typing URL timer
var typingTimer;
var doneTypingInterval = 2000;
$input.keyup(function() {
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
$input.keydown(function() {
clearTimeout(typingTimer);
$url_preview.empty();
});
// Process URL scrape request
function doneTyping() {
var getUrl = $input.val();
if(isURL(getUrl)) {
console.log('Typed text is a URL');
$url_preview.append('<img src="images/loader.gif" style="width:24px; padding-top:10px; height:24px; margin:0 auto;">');
// Get url data by ajax
$.post('ajax/Crawl.php', {
'url' : getUrl
},function(data) {
$url_preview.empty();
var content = '<h3 class="url_title">' + data.title + '</h3><p class="url_description" style="font-size:11px;">' + data.description + '</p><img class="url_image" src="' + data.images + '" style="width:100%; height:auto;">';
$url_preview.append(content);
$url_title.val(data.title);
$url_description.val(data.description);
$url_image.val(data.images);
console.log(content);
}, 'json');
} else {
console.log('Typed text is a string');
}
};
function isURL(url) {
var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
if(!pattern.test(url)) {
return false;
} else {
if(!/^(https?|ftp):\/\//i.test(url)) {
url = 'http://'+url;
$input.val(url);
}
return true;
}
};
$button_ok.on('click', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y'),
item = $.grep(_this.data, function(v) {
return v.x == x && v.y == y;
}).pop();
if(item) item.text = $input.val();
if(isURL(item.text)) {
if(item) item.url = item.text;
} else {
if(item) item.url = null;
}
if(item) item.url_title = $url_title.val();
if(item) item.url_description = $url_description.val();
if(item) item.url_image = $url_image.val();
_this.addDOM();
_this.element.triggerHandler('change');
//_this.hide();
});
/*$input.on('change', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y'),
item = $.grep(_this.data, function(v) {
return v.x == x && v.y == y;
}).pop();
if(item) item.text = $input.val();
_this.addDOM();
_this.element.triggerHandler('change');
});
*/
$e.empty().append($input, $button_ok, $button_delete, $url_preview, $url_title, $url_description, $url_image);
});
_this.updateDOM();
};
/****************************************************************
* DATA MANAGEMENT
****************************************************************/
Taggd.prototype.addData = function(data) {
if($.isArray(data)) {
this.data = $.merge(this.data, data);
} else {
this.data.push(data);
}
if(this.initialized) {
this.addDOM();
this.element.triggerHandler('change');
}
};
Taggd.prototype.setData = function(data) {
this.data = data;
if(this.initialized) {
this.addDOM();
}
};
Taggd.prototype.clear = function() {
if(!this.initialized) return;
this.wrapper.find('.taggd-item, .taggd-item-hover').remove();
};
/****************************************************************
* EVENTS
****************************************************************/
Taggd.prototype.on = function(event, handler) {
if(
typeof event !== 'string' ||
typeof handler !== 'function'
) return;
this.element.on(event, handler);
};
/****************************************************************
* TAGS MANAGEMENT
****************************************************************/
Taggd.prototype.iterateTags = function(a, yep) {
var func;
if($.isNumeric(a)) {
func = function(i, e) { return a === i; };
} else if(typeof a === 'string') {
func = function(i, e) { return $(e).is(a); }
} else if($.isArray(a)) {
func = function(i, e) {
var $e = $(e);
var result = false;
$.each(a, function(ai, ae) {
if(
i === ai ||
e === ae ||
$e.is(ae)
) {
result = true;
return false;
}
});
return result;
}
} else if(typeof a === 'object') {
func = function(i, e) {
var $e = $(e);
return $e.is(a);
};
} else if($.isFunction(a)) {
func = a;
} else if(!a) {
func = function() { return true; }
} else return this;
this.wrapper.find('.taggd-item').each(function(i, e) {
if(typeof yep === 'function' && func.call(this, i, e)) {
yep.call(this, i, e);
}
});
return this;
};
Taggd.prototype.show = function(a) {
return this.iterateTags(a, methods.show);
};
Taggd.prototype.hide = function(a) {
return this.iterateTags(a, methods.hide);
};
Taggd.prototype.toggle = function(a) {
return this.iterateTags(a, methods.toggle);
};
/****************************************************************
* CLEANING UP
****************************************************************/
Taggd.prototype.dispose = function() {
this.clear();
this.element.unwrap(this.wrapper);
};
/****************************************************************
* SEMI-PRIVATE
****************************************************************/
Taggd.prototype.addDOM = function() {
var _this = this;
this.clear();
this.element.css({ height: 'auto', width: 'auto' });
var height = this.element.height();
var width = this.element.width();
$.each(this.data, function(i, v) {
var $item = $('<span />');
var $hover;
if(
v.x > 1 && v.x % 1 === 0 &&
v.y > 1 && v.y % 1 === 0
) {
v.x = v.x / width;
v.y = v.y / height;
}
if(typeof v.attributes === 'object') {
$item.attr(v.attributes);
}
$item.attr({
'data-x': v.x,
'data-y': v.y
});
$item.css('position', 'absolute');
$item.addClass('taggd-item');
_this.wrapper.append($item);
if(typeof v.text === 'string' && (v.text.length > 0 || _this.options.edit)) {
$hover = $('<span class="taggd-item-hover" style="position: absolute;" />').html(v.text);
$hover.attr({
'data-x': v.x,
'data-y': v.y
});
_this.wrapper.append($hover);
}
if(typeof _this.options.handlers === 'object') {
$.each(_this.options.handlers, function(event, func) {
var handler;
if(typeof func === 'string' && methods[func]) {
handler = methods[func];
} else if(typeof func === 'function') {
handler = func;
}
$item.on(event, function(e) {
if(!handler) return;
handler.call($item, e, _this.data[i]);
});
});
}
});
this.element.removeAttr('style');
if(this.options.edit) {
this.alterDOM();
}
this.updateDOM();
};
Taggd.prototype.updateDOM = function() {
var _this = this;
this.wrapper.removeAttr('style').css({
height: this.element.height(),
width: this.element.width()
});
this.wrapper.find('span').each(function(i, e) {
var $el = $(e);
var left = $el.attr('data-x') * _this.element.width();
var top = $el.attr('data-y') * _this.element.height();
if($el.hasClass('taggd-item')) {
$el.css({
left: left - $el.outerWidth(true) / 2,
top: top - $el.outerHeight(true) / 2
});
} else if($el.hasClass('taggd-item-hover')) {
if(_this.options.align.x === 'center') {
left -= $el.outerWidth(true) / 2;
} else if(_this.options.align.x === 'right') {
left -= $el.outerWidth(true);
}
if(_this.options.align.y === 'center') {
top -= $el.outerHeight(true) / 2;
} else if(_this.options.align.y === 'bottom') {
top -= $el.outerHeight(true);
}
$el.attr('data-align', $el.outerWidth(true));
$el.css({
left: left + _this.options.offset.left,
top: top + _this.options.offset.top
});
}
});
};
/****************************************************************
* JQUERY LINK
****************************************************************/
$.fn.taggd = function(options, data) {
return new Taggd(this, options, data);
};
})(jQuery);
I thought this would do what i want, since it works with the standard text input box, using .val($e.text()), works fine but as soon as i do the same to the url_title box, for example .val($e.url_title()), i get the error below.
$input = $('<input id="url" type="text" size="16" />')
.val($e.text()),
$url_title = $('<input type="text" id="url_title" class="url_title" />'),
$button_ok = $('<button />')
.html(_this.options.strings.save),
$url_description = $('<input type="text" class="url_description" id="url_description" />'),
$url_image = $('<input type="text" class="url_img" id="url_img" />'),
$url_preview = $('<div id="content"></div>'),
$button_delete = $('<button />')
.html(_this.options.strings.delete);
But if for example i change the $url_title to
$url_title = $('<input type="text" id="url_title" class="url_title" />').val($e.url_title()),
I get a error back in the console: Uncaught TypeError: undefined is not a function
This is the init code on the main page:
$(document).ready(function() {
var options = {
edit: true,
align: {
y: 'top'
},
offset: {
top: 15
},
handlers: {
//mouseenter: 'show',
click: 'toggle'
}
};
/*var data = [
{ x: 0.22870478413068845, y: 0.41821946169772256, text: 'Eye' },
{ x: 0.51, y: 0.5, text: 'Bird' },
{ x: 0.40, y: 0.3, text: 'Water, obviously' }
];*/
var data = [];
var taggd = $('.taggd').taggd( options, data );
taggd.on('change', function() {
console.log(taggd.data);
});
});
In the console log it logs the values fine:
[Object]0: Objecttext: "http://ift.tt/gbk8l4"url: "http://ift.tt/gbk8l4"url_description: "Q&A for professional and enthusiast programmers"url_image: "http://ift.tt/1HGxN5r"url_title: "Stack Overflow"x: 0.41141586360266863y: 0.19444444444444445
I hope someone can shine a light on it and point me in the right direction of what i'm doing wrong.
To simplify it, i want to be able to have a title input and a description input for my tags, how would i achieve this?
Thank you.
Google Pie chart tooltip z-index
I have a google pie chart where tooltips are rendered behind an adjacent image.
How can I make sure the tooltips are displayed on top? I have set 0 for the image z-index, 10 for the chart overall z-index but it's not working.
Here in image :
Javascript Edit-Delete Function from a looped Textbox with Values
I am new to web development and I am trying to add an add/edit/delete function to my displayed form values using Javascript. Well, I cant really find the words to explain but this is what Im trying to accomplish.
I have this loop that lists discounts from a database:
@foreach (var discount in Model.Discounts)
{
<div class="editor-label">
<label for="@discount.Key.DiscountCode">@discount.Key.DiscountName</label>
</div>
<div class="editor-field">
<input class="@discount.Key.DiscountCode" name="@discount.Key.DiscountCode" readonly="true" type="text" />
<a class="remove" data-key="@discount.Key.DiscountCode" href="javascript:void(0);">Remove</a>
<a class="edit" data-key="@discount.Key.DiscountCode" href="javascript:void(0);">Edit</a>
</div> <br />
}
<a class="add-discount" href="javascript:void(0);">Add Discount</a>
As you can imagine this will loop into this kind of output:
Label1 [Textbox for Label1] Delete Edit
Label2 [Textbox for Label2] Delete Edit
Label3 [Textbox for Label3] Delete Edit
How can I make these commands work using javascript/jquery.
Please note that the delete/edit function only applies to the displayed data and not the database. what I meant is if I click Delete, it will delete its corresponding Label and Textbox from the display only and not in the database, also when Edit is clicked, it will only enable the textbox to alter the data inside it.
Any help will be greatly appreciated. Thank you so much!!
I am using Visual Studio 2013 and developing this using ASP.NET MVC4
Angular-js: ng-repeat on a select element with a attribute directive
I have a directive on a element called on-change. The idea is when the selected value changes it gets saved in a scope variable and then another element picks it up.
My problem is if the elements of the are static the above works fine but if I use ng-repeat, the onchange stops working.
<select on-change="myvar" ng-repeat="(key, value) in dataset">
<option value="{{key}}">{{value.name}}</option>
</select>
here's my onchange directive:
.directive('onChange', function() {
return {
restrict: 'A',
scope:{'onChange':'=' },
link: function(scope, elm, attrs) {
scope.$watch('onChange', function(nVal) { elm.val(nVal); });
elm.bind('blur', function() {
var currentValue = elm.val();
if( scope.onChange !== currentValue ) {
scope.$apply(function() {
scope.onChange = currentValue;
});
}
});
}
};
})
Any idea's on how I can overcome this issue?
Thanks
How to use free jqgrid properties to conditionally add actions buttons
free jqgrid shows orders. Posted orders should have yellow background and only open action button. Unposted orders shoudl have white button and also standard delete and custom post action button:
colmodel for actions column:
{"hidden":false,"label":"Activity","name":"_actions","search":false,"width":94
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":false,"onSuccess":function (jqXHR) { jqXHRFromOnSuccess=jqXHR;return true;}
,"delbutton":true,"delOptions":{"url":"http://localhost:52216/admin/Grid/Delete?_entity=DoklstlT","afterComplete":function (response, postdata, formid) {
summarefresh($grid);
$grid[0].focus();
}
}}},
posted state is detemined by boolean Kinnitatud column :
{"label":null,"name":"Kinnitatud","index":"Kinnitatud","editoptions":{"value":"True:False","readonly":"readonly","disabled":"disabled"},"template":"booleanCheckboxFa","editable":true,"width":0,"classes":null,"hidden":true,"searchoptions":{"sopt":["eq","ne"],"value":":Free;true:Yes;false:No"},"dataEvents":[{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
},"",{"type":"click","fn":function(e) {dataChanged(e.target)}
},{"type":"blur","fn":function(e) {summarefresh()}
}]}],
in other grid posted state is determined by Kinkuup column which is not filled for unposted documents:
{"template":DateTemplate
,"label":null,"name":"Kinkuup","index":"Kinkuup","editoptions":{"dataInit":null,"size":10,"readonly":"readonly","disabled":"disabled"},"searchoptions":{"dataInit":initDateSearch
,"size":10,"attr":{"size":10}},"width":0,"classes":null,"hidden":true,"dataEvents":[]}],
Both columns can hidden or visible in grid. depending on user preferences.
Custom actions buttons are created in loadComplete for all rows:
loadComplete: function() {
var iCol = getColumnIndexByName($(this),'_actions');
$(this).children("tbody").children("tr.jqgrow")
.children("td:nth-child("+(iCol+1)+")")
.each(function() {
$("<div>",
{
title: "Confirm (F2)",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
resetSelection();
idsOfSelectedRows = [$(e.target).closest("tr.jqgrow").attr("id")];
$("#grid").jqGrid('setSelection', $(e.target).closest("tr.jqgrow").attr("id"), false);
$('#grid_postbutton').click();
}
}
)
.addClass("ui-pg-div ui-inline-post")
.append('<span class="fa ui-state-default fa-fw fa-lock"></span>')
.prependTo($(this).children("div"));
$("<div>",
{
title: "Open (Enter)",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
openDetail($(e.target).closest("tr.jqgrow").attr("id"));
}
}
)
.addClass("ui-pg-div ui-inline-open")
.append('<span class="fa ui-state-default fa-folder-open-o"></span>')
.prependTo($(this).children("div"));
});
After that buttons are conditionally removed using code from How to remove action buttons from posted rows in free jqgrid using Fontawesome checkbox formatter
disableRows('Kinkuup', false);
disableRows('Kinnitatud', true);
var disableRows = function (rowName, isBoolean) {
var iCol = getColumnIndexByName($grid, rowName),
cRows = $grid[0].rows.length,
iRow,
row,
className,
isPosted,
mycell,
mycelldata,
cm = $grid.jqGrid('getGridParam', 'colModel'),
iActionsCol = getColumnIndexByName($grid, '_actions'), l,
isPostedStr;
l = cm.length;
for (iRow = 0; iRow < cRows; iRow = iRow + 1) {
row = $grid[0].rows[iRow];
className = row.className;
if ($(row).hasClass('jqgrow')) {
isPostedStr = $.unformat.call($grid[0], row.cells[iCol],
{ rowId: row.id, colModel: cm[iCol] }, iCol);
//if (cm[iCol].convertOnSave) {
// isPosted = cm[iCol].convertOnSave.call(this, {
// newValue: isPostedStr,
// cm: cm[iCol],
// oldValue: isPostedStr,
// id: row.id,
// //item: $grid.jqGrid("getLocalRow", row.id),
// iCol: iCol
// });
//}
isPosted = isPostedStr !== "False" && isPostedStr.trim() !== "";
if (isPosted) {
if ($.inArray('jqgrid-postedrow', className.split(' ')) === -1) {
// todo: how to disable actions buttons and form editing:
row.className = className + ' jqgrid-postedrow not-editable-row';
$(row.cells[iActionsCol]).attr('editable', '0');
$(row.cells[iActionsCol]).find(">div>div.ui-inline-del").hide();
$(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide();
$(row.cells[iActionsCol]).find(">div>div.ui-inline-edit").hide();
}
}
}
}
};
How to use free jqgrid actions options to simplify this code ?
Someone is claiming they wrote this code [on hold]
I'm close to releasing my app and my friend added the collision-detection code in the beginning. If this looks familiar please let me know:
function collides(a, b) {
var aTop = a.offset().top;
var aLeft = a.offset().left;
var bTop = b.offset().top;
var bLeft = b.offset().left;
return !(
((aTop + a.height()) < (bTop)) ||
(aTop > (bTop + b.height())) ||
((aLeft + a.width()) < bLeft) ||
(aLeft > (bLeft + b.width()))
);
}
//colliding stuff and responce.
function handleCollisions() {
if (collides($('#firstObs'),$('#player'))) {
$('#levelOne').stop();
$('#player').css('border', 'solid 1px red');
}
else { // if not collision
$('#player').html("<p></p>");
}
}
Is there a source on the web that he might of got this code from, to prove he did write it himself?
Dynamic droppable issue
I am having a list of fruits and each element in this list is draggable. I can drag and drop it in the basket element, which contains element that is droppable. In idle situation the droppable is hidden and shows only when drag started. All going good until there is a page scroll appears, and then the calculation of the draggable probably going wrong and drop box cannot be reached with cursor:
$('ul.fruits li').draggable({
cancel: 'a.ui-icon'
, revert: 'invalid'
, containment: 'document'
, helper: 'clone'
, cursor: 'move'
, refreshPositions: true
, start: function (event, ui) {
$('li.drop').show();
}
, stop: function (event, ui) {
$('li.drop').hide();
}
, refreshPositions: true }).on('scroll', function() {
$('.basket').scrollTop($(this).scrollTop());
});
$('ul.basket li.drop').droppable({
accept: 'li'
, activeClass: 'ui-state-highlight'
, hoverClass: 'ui-state-active'
, greedy: true
, refreshPositions: true
, drop: function (event, ui) {
$(this).parent().prepend('<li>' + ui.draggable.context.innerHTML + '</li>');
}});
This is the code example I used to describe the problem.
Jasmine: stub an ajax success call and pass the function an argument
I am looking to write a test in Jasmine that expects a string to be displayed in the browser when a button is clicked, that triggers an AJAX call returning a JSON object from an API which then has a function run on it, to extract the required data.
Using the Jasmine Ajax documentation I have come up with the following solution, which is working, but I have noticed a weakness in this test.
beforeEach(function(){
jasmine.getFixtures().fixturesPath = '.';
loadFixtures('thermostat.html');
});
describe("displaying weather from open weather map api", function() {
it("can display current temp for London", function(){
jasmine.Ajax.install();
var weatherobject = {"main": {"temp": 12.09}}
jasmine.Ajax.stubRequest('http://ift.tt/1mGUATE').andReturn({
success: loaddata(weatherobject)
});
$("#London").click();
expect("#weatherapidata").toContainHtml("12.09");
jasmine.Ajax.uninstall();
});
});
Below is the javascript and jQuery it is testing. If the function contents, in the success response, of this code, are changed to something other than loaddata the tests will still pass, as loaddata is also called in the test, as I could not work out how to pass the success function an argument of the weatherobject in the test.
$(document).ready(function(){
$('#London').click(function(){
$.ajax({
url: "http://ift.tt/1mGUATE",
data: {
q:"London",
units:"metric",
APPID: weatherapikey
},
success: function(data){
loaddata(data);
}
});
});
});
function loaddata(data) {
$("#weatherapidata").text(data.main.temp);
};
Therefore my question is; is it possible to construct the jasmine test stub to pass the data parameter of function in the success response an argument of the weatherobject?
My thoughts were to pass the object as a string in responseText, in the following way
jasmine.Ajax.stubRequest('http://ift.tt/1mGUATE').andReturn({
responseText: weatherobject
});
(I also tried JSON.stringify(weatherobject) as the responseText callback in this format) but I could not get this to work and hence my above solution was the workaround.
Javascript for google map not responding correctly to ajax request in rails
In rails I have a bunch of 'notices' in the html, each of which has latitude and longitude attributes for a corresponding marker on a google map. I send an ajax request to the notices controller when the google map boundaries change. It returns all notices with coordinates inside the map boundaries, and also an array containing all the information necessary for the map to place the corresponding markers.
javascript in the view:
var initialize, map, mapOptions;
var markers = [];
initialize = function() {
mapOptions = {
center: {lat: 51, lng: 0},
zoom: 9
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'zoom_changed', dealWithNewWindow);
google.maps.event.addListener(map, 'dragend', dealWithNewWindow);
function dealWithNewWindow(event) {
var bounds = map.getBounds();
var nelat = bounds.getNorthEast().lat();
var swlat = bounds.getSouthWest().lat();
var nelng = bounds.getNorthEast().lng();
var swlng = bounds.getSouthWest().lng();
var mapBounds = {NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng};
$.ajax({
type : 'POST',
url : '/maprequest',
dataType : 'script',
data : { NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng }
});
};
dealWithNewWindow(e);
};
makeMarkers = function(markerArray) {
// alert("Alert 1.");
for (m = 0; m < markerArray.length; m++) {
// alert("Alert 2.");
(function(marka) {
var goomap = google.maps;
var marker = new goomap.Marker({
map: map,
position: new goomap.LatLng(marka.lat, marka.lng),
infowindow: marka.infowindow,
id: marka.id
});
markers.push(marker);
}(
markerArray[m]
));
}
};
notices controller show action:
def show
respond_to do |format|
format.html
format.js do
@notices = noticefeed
@markers = []
@notices.each do |notice|
marker = Marker.new(notice.latitude, notice.longitude, notice.content, notice.id)
@markers.push(marker)
end
gon.markers = @markers
end
end
end
private
def noticefeed
nelat = params[:NElatitude]
swlat = params[:SWlatitude]
nelng = params[:NElongitude]
swlng = params[:SWlongitude]
Notice.where(" latitude < ?
AND latitude > ?
AND longitude < ?
AND longitude > ? ", nelat, swlat, nelng, swlng )
end
show.js.erb:
$("#notice_list").html("<%= escape_javascript(render @notices) %>")
makeMarkers(gon.markers);
The browser console shows that the ajax is sent correctly and that the server responds without a problem. The line $("#notice_list").html("<%= escape_javascript(render @notices) %>") is providing the correct html. The problem is that the markers on the map are not created or updated. (I'm using gon to communicate between rails and jquery). When I uncomment alert("Alert 1."); the alert appears, meaning it is successfully calling the makeMarkers method, but alert("Alert 2."); never appears when it is the only one uncommented. Therefore makeMarkers is being called, but it never makes it into the for (m = 0; m < markerArray.length; m++) loop. Therefore it mustn't be happy with being passed gon.markers.
Why are neither the #notice_list nor the map markers being updated?
EDIT:
In show.js.erb, when I replace makeMarkers(gon.markers); with makeMarkers([1,2,3]) it successfully enters the for loop ("Alert 2" appears). There must be something wrong with gon.markers. gon.markers is an array that was created in the notices controller inside ruby, do I have to somehow turn it into a javascript array? I thought gon did this for you? I've checked using debugger that gon.markers and @markers are arrays or markers, and they are:
gon.markers:
[#<Mymodule::Marker:0x0000010ded1c38 @lat=51.9714995840941, @lng=-1.60000814589637, @infowindow="This is great!!", @id=904>]
So when this object is handed to makeMarkers, something goes wrong.
Use one ajax call for different page and div?
I use this code to make ajax call to change the content of div in main page without reloading the page :
function ajaxcall()
{
$.ajax({
type: "POST",
url: "/create.php",
success: function( returnedData ) {
$( '#container' ).html( returnedData );
}
}); }
and I call it like that :
<p><a onclick="ajaxcall()" >Create</a></p>
The issue is very complicated because I have to call 4 pages in the same div :
create.hmtl ; update.html; delete.html ; read.html
Also I have 2 different forms in the same page that required the same thing, I mean I should do the same thing for the second form with another div "container-1",then I have 2 div for exmaple in create.html :
create.html :
<div id="container">
....
</div>
<div id="container-1">
....
</div>
So I call create.html everytime but different div for different form, the question is to use a minimum clean code to do all what I explained above?
Checkbox not filled
In my database there's a bool filed called IsAvailable.In my edit function i wanted to fill that checkbox is IsAvailable or not but in here always checkbox not filled.
($("#chkcomp").prop('checked') == msg._prodlng[0].IsAvailable);
but
msg._prodlng[0].IsAvailable // thisone returns true or false correctly according to database value
jQuery keyUp never fires [duplicate]
This question already has an answer here:
Simple code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://ift.tt/1apAubC
latest.min.js"></script>
<script type="text/javascript">
$( "#target" ).keyup(function() {
alert( "Handler for .keyup() called." );
});
</script>
</head>
<body>
<form>
<input id="target" type="text">
</form>
</body>
</html>
I can type to the input field but no alert is shown. I have also tried Chrome and Mozilla.
Serving a different set of images for mobile
I'm using jQuery-backstretch to serve fading background images on my page. This works well for desktop, but because of how detailed these images are, I need to use another set of of images for mobile users only.
So far I found out how to disable the script for mobile (or use different images for individual pages: Using Backstretch for different images for individual pages), but I would love to find out how to serve a totally different set of images just for mobile.
<script>
function detectmob() {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
}
if(!detectmob()){
$.backstretch(["imgs/1.jpg"
, "imgs/2.jpg"
, "imgs/3.jpg"
, "imgs/4.jpg"
], {duration: 1800, fade: 4000});
}
</script>
Does anyone has a solution? Many thanks.
Datatables Ajax and Laravel 4 - Tables not rendering, Ajax Error
I have been banging my head all last night and today. I have a Laravel 4.2 project where I have larger tables (2000+) records for some of my users. I want to use the ajax features to pull data dynamically. I used the PHP example from datatables but I am getting a '' with no response in the Network tab of Firefox inspector
Here is my jquery on the page:
jQuery(document).ready(function() {
jQuery('#table_large').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/pets/records/data/",
"type": "POST"
}
});
});
Here is my Route:
Route::post('/pets/records/data/', 'PetsController@ajax');
And here is my Repository:
public function ajax(){
$aColumns = array( 'custom_id', 'pet_name', 'pet_type', 'age', 'breed','gender','status','intake_date' );
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "pet_id";
/* DB table to use */
$sTable = "pets";
/* Database connection information */
$gaSql['user'] = \Config::get('database.connections.mysql.username');
$gaSql['password'] = \Config::get('database.connections.mysql.password');
$gaSql['db'] = \Config::get('database.connections.mysql.database');
$gaSql['server'] = \Config::get('database.connections.mysql.host');
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/
/*
* Local functions
*/
function fatal_error ( $sErrorMessage = '' )
{
header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
die( $sErrorMessage );
}
/*
* MySQL connection
*/
if ( ! $gaSql['link'] = @mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) )
{
fatal_error( 'Could not open connection to server' );die();
}
if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
{
fatal_error( 'Could not select database ' );die();
}
/*
* Paging
*/
$sLimit = "";
if ( isset( $_POST['iDisplayStart'] ) && $_POST['iDisplayLength'] != '-1' )
{
$sLimit = "LIMIT ".intval( $_POST['iDisplayStart'] ).", ".
intval( $_POST['iDisplayLength'] );
}
/*
* Ordering
*/
$sOrder = "";
if ( isset( $_POST['iSortCol_0'] ) )
{
$sOrder = "ORDER BY ";
for ( $i=0 ; $i<intval( $_POST['iSortingCols'] ) ; $i++ )
{
if ( $_POST[ 'bSortable_'.intval($_POST['iSortCol_'.$i]) ] == "true" )
{
$sOrder .= $aColumns[ intval( $_POST['iSortCol_'.$i] ) ]."
".($_POST['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .", ";
}
}
$sOrder = substr_replace( $sOrder, "", -2 );
if ( $sOrder == "ORDER BY" )
{
$sOrder = "";
}
}
$sWhere = "";
if ( isset($_POST['sSearch']) && $_POST['sSearch'] != "" )
{
$sWhere = "WHERE (";
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( isset($_POST['bSearchable_'.$i]) && $_POST['bSearchable_'.$i] == "true" )
{
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_POST['sSearch'] )."%' OR ";
}
}
$sWhere = substr_replace( $sWhere, "", -3 );
$sWhere .= ')';
}
/* Individual column filtering */
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( isset($_POST['bSearchable_'.$i]) && $_POST['bSearchable_'.$i] == "true" && $_POST['sSearch_'.$i] != '' )
{
if ( $sWhere == "" )
{
$sWhere = "WHERE ";
}
else
{
$sWhere .= " AND ";
}
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_POST['sSearch_'.$i])."%' ";
}
}
/*
* SQL queries
* Get data to display
*/
$sQuery = "
SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
FROM $sTable
$sWhere
$sOrder
$sLimit
";
$rResult = @mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
/* Data set length after filtering */
$sQuery = "SELECT FOUND_ROWS()";
$rResultFilterTotal = @mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
$iFilteredTotal = $aResultFilterTotal[0];
/* Total data set length */
$sQuery = "
SELECT COUNT(".$sIndexColumn.")
FROM $sTable
";
$rResultTotal = @mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
//$rResultTotal = \DB::select(\DB::raw($sQuery));
$aResultTotal = mysql_fetch_array($rResultTotal);
$iTotal = $aResultTotal[0];
/*
* Output
*/
if(isset($_POST['sEcho'])){
$sEcho = intval($_POST['sEcho']);
}else{
$sEcho = 0;
}
$output = array(
"sEcho" => $sEcho,
"iTotalRecords" => $iTotal,
"iTotalDisplayRecords" => $iFilteredTotal,
"aaData" => array()
);
try {
while ($aRow = mysql_fetch_array($rResult)) {
$row = array();
for ($i = 0; $i < count($aColumns); $i++) {
switch($aColumns[$i]){
case 'version':
/* Special output formatting for 'version' column */
$row[] = ($aRow[$aColumns[$i]] == "0") ? '-' : $aRow[$aColumns[$i]];
break;
default:
$row[] = $aRow[$aColumns[$i]];
break;
}
}
$sanitized_row = [];
foreach($row as $cell){
$encoding = mb_detect_encoding($cell, mb_detect_order(), false);
if($encoding == "UTF-8") {
$cell = mb_convert_encoding($cell, 'UTF-8', 'UTF-8');
}
$cell = iconv(mb_detect_encoding($cell, mb_detect_order(), false), "UTF-8//IGNORE", $cell);
$sanitized_row[] = $cell;
}
$output['aaData'][] = $sanitized_row;
}
}catch (Exception $e){
echo 'Error: ';
var_dump($row);
}
$json = json_encode( $output );
if(json_last_error()) {
print "json last error: ".json_last_error().'\n';
print "json last error msg: ".json_last_error_msg().'\n';
}
return $json;
}
I was getting an encoding error but I added a UT8 filtering which is no throwing an error anymore but not sure if its a solution of a problem. Does anyone see anything glaring with this code or does anyone have a better solution for Laravel 4.2? Thanks and let me know!
How to retrieve and list data from sdcard in Firefox OS
link.onclick = function() {
console.log("display started");
link.style.background = "red";
link.style.color = "black";
listContents('music');
}
function listContents(storagename) {
//Clear up the list first
// results.html("");
var files = navigator.getDeviceStorage(storagename);
console.log("files object "+files);
var cursor = files.enumerate();
console.log("cursore object "+cursor);
cursor.onsuccess = function () {
//alert("Got something");
var file = this.result;
if (file != null) {
var imageElement = $('<img height="100" width="75">');
imageElement.attr('src', window.URL.createObjectURL(file));
$("<p>" + file.name + "," + file.lastModifiedDate + "," + file.type + "," + file.size + "</p>").appendTo('#results');
imageElement.appendTo("#results");
this.done = false;
} else {
this.done = true;
}
if (!this.done) {
this.continue();
}
}
}
Here, on click of link button I want all the audio files to be displayed in a list. A sample function for it is given, but it is in jquery. I want to implement the function listContents() using pure JavaScript.
Can anyone help, please?
jQuery: Hide an element on mouseup except when it has a content
I have some elements I want to hide once document body is clicked. And I have this code from an answer given in SO.
$(document).mouseup(function (e){
var container = $(".time-stamp, .full-name, .comment-box .search-result");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // nor a descendant of the container
{
container.hide();
}
});
It works fine but my page displays 10 different articles at a time and each article has textbox (comment-box) attached to them where users can submit their comments. These comment boxes are set to hidden by default until a user clicks on Comment button. The problem is if a user has enterred some text in the comment box and clicks elsewhere, the comment-box gets set to hidden and the content is lost completely.
How can I be able to cancel .hide() if comment-box already has some content in it?
jQuery Binding on the same element
I've got problem with jquery
page1.html
<div id="gold">gold value</div>
<!-- NAVIGATE -->
<a href="page2.html">Go to page 2</a>
page2.html
<div id="gold">gold value</div>
<!-- NAVIGATE -->
<a href="page1.html">Go to page 1</a>
main.js
$(document).on('pagebeforeshow', function () {
$('#gold').html(100);
});
This code working for page1.
When I navigate from page1 to page2 on page2 is string "gold value".
One ajax call for more than one div content and page?
I use this code to make ajax call to change the content of div in main page without reloading the page :
function ajaxcall()
{
$.ajax({
type: "POST",
url: "/create.php",
success: function( returnedData ) {
$( '#container' ).html( returnedData );
}
});
}
and I call it like that :
<p><a onclick="ajaxcall()" >Create</a></p>
The issue is very complicated because I have to call 4 pages in the same div :
create.hmtl ; update.html; delete.html ; read.html
Also I have 2 different forms in the same page that required the same thing, I mean I should do the same thing for the second form with another div "container-1",then I have 2 div for exmaple in create.html :
create.html :
<div id="container">
....
</div>
<div id="container-1">
....
</div>
So I call create.html everytime but different div for different form, the question is to use a minimum clean code to do all what I explained above?
How does this fiddle each just return one value at each time?
I see this fiddle that was answered to this question, I know how does each work in jquery and it will do one thing on all element that we gave it. But in this fiddle it just return one thing according to scroll, I made something like that in my own computer and in my own project but it was returning all element with separator class
How to Add class to all images inside div using jQuery?
Inside div I am dynamically loading inner text and it also contains img tags. After rendering dynamically I want to add class to all images present insdie that div.
I have tried this but its not working for me.
src of every img tag inside div is starting from data:image
function loadDiv() {
// loading successfully div elements
$("img[src*=data:image]").addClass("img-responsive");
}
jquery Append don't work
I trying to update active/suspend button using ajax and jquery, after user clicked on "suspend" -> I have to change the status to "Suspended" + active button. After user clicked on "active" button -> I change the status to "Activated" + suspend button.
Here is the HTML/PHP code :
Status :
<?php
if($row['active']==2) // 2 = Suspended
{
?>
<span id="status<?php echo $row['id']; ?>">Suspended
<button type="button" class="active-button" value="<?php echo $row['id']; ?>">active</button>
</span>
<?php
}
else if($row['active']==1) // 1 = Activated
{
?>
<span id="status<?php echo $row['id']; ?>">Activated
<button type="button" class="suspend-button" value="<?php echo $row['id']; ?>">suspend</button>
</span>
<?php
}
?>
This is the jquery/ajax code :
$(function()
{
$('.active-button').click(function(){
var add_active = 1;
var add_id = $(this).val();
var status = "#status"+add_id;
$(status).text('Loading...');
$.post('active.php',{id: add_id, active: add_active}, function(){
$(status).html("").append("Suspended <button type='button' class='active-button' value="+add_id+">active</button>");
});
});
$('.suspend-button').click(function(){
var add_active = 2;
var add_id = $(this).val();
var status = "#status"+add_id;
$(status).text('Loading...');
$.post('active.php',{id: add_id, active: add_active}, function(){
$(status).html("").append("Activated <button type='button' class='suspend-button' value="+add_id+">suspend</button>");
});
});
});
But The problem is that the span "status" doesn't change(in the DB it works well). I almost sure that the problem is in this line :
$.post('active.php',{id: add_id, active: add_active}, function(){
$(status).html("").append("Activated <button type='button' class='suspend-button' value="+add_id+">suspend</button>");
});
Creating slider and slide will not reset position upon sliding left
'use strict';
$(function(){
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $slidesleft = $slideContainer.find('.left');
var $slidesright = $slideContainer.find('.right');
var interval;
function startSlider(){
interval = setInterval(function(){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
},pause);
}
function stopSlider(){
clearInterval(interval);
};
$('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$('#slidebttn .right').on('click', function (){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
} );
$('#slidebttn .left').on('click', function (){
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){
currentSlide--;
if (currentSlide === 0) {
currentSlide = $slides.length;
$slideContainer.css('margin-left', 720);
}
});
} );
});
Ok here is my code I am working with. Everything works fine until I try and slide my slider to the left. It will not repeat back to the right position. As of right now the slide right button works just fine with no problems but it refuses to slide left. Any reason I it might not be sliding left appropriately?
How to add multiple input fields to jQuery Taggd plugin?
I am using the jQuery Taggd Plugin
Please see also Taggd Project page / examples
I am using the plugin with edit: true. You can tag something in a image and add a text note to it, but i would like to be able to add a Title and a Description for a tag. I've been trying to modif the plugin for some time now, but nothing seems to do what i want.
I want both the input fields to keep the values when you toggle the tag.
I hope someone can shine a light or get me going in the right direction?
/*!
* jQuery Taggd
* A helpful plugin that helps you adding 'tags' on images.
*
* License: MIT
*/
(function($) {
'use strict';
var defaults = {
edit: false,
align: {
x: 'center',
y: 'center'
},
handlers: {},
offset: {
left: 0,
top: 0
},
strings: {
save: '✓',
delete: '×'
}
};
var methods = {
show: function() {
var $this = $(this),
$label = $this.next();
$this.addClass('active');
$label.addClass('show').find('input').focus();
},
hide: function() {
var $this = $(this);
$this.removeClass('active');
$this.next().removeClass('show');
},
toggle: function() {
var $hover = $(this).next();
if($hover.hasClass('show')) {
methods.hide.call(this);
} else {
methods.show.call(this);
}
}
};
/****************************************************************
* TAGGD
****************************************************************/
var Taggd = function(element, options, data) {
var _this = this;
if(options.edit) {
options.handlers = {
click: function() {
_this.hide();
methods.show.call(this);
}
};
}
this.element = $(element);
this.options = $.extend(true, {}, defaults, options);
this.data = data;
this.initialized = false;
if(!this.element.height() || !this.element.width()) {
this.element.on('load', _this.initialize.bind(this));
} else this.initialize();
};
/****************************************************************
* INITIALISATION
****************************************************************/
Taggd.prototype.initialize = function() {
var _this = this;
this.initialized = true;
this.initWrapper();
this.addDOM();
if(this.options.edit) {
this.element.on('click', function(e) {
var poffset = $(this).parent().offset(),
x = (e.pageX - poffset.left) / _this.element.width(),
y = (e.pageY - poffset.top) / _this.element.height();
_this.addData({
x: x,
y: y,
text: ''
});
_this.show(_this.data.length - 1);
});
}
$(window).resize(function() {
_this.updateDOM();
});
};
Taggd.prototype.initWrapper = function() {
var wrapper = $('<div class="taggd-wrapper" />');
this.element.wrap(wrapper);
this.wrapper = this.element.parent('.taggd-wrapper');
};
Taggd.prototype.alterDOM = function() {
var _this = this;
this.wrapper.find('.taggd-item-hover').each(function() {
var $e = $(this),
$input = $('<input type="text" size="16" />')
.val($e.text()),
$button_ok = $('<button />')
.html(_this.options.strings.save),
$button_delete = $('<button />')
.html(_this.options.strings.delete);
$button_ok.on('click', function() {
_this.hide();
});
$button_delete.on('click', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y');
_this.data = $.grep(_this.data, function(v) {
return v.x != x || v.y != y;
});
_this.addDOM();
_this.element.triggerHandler('change');
});
$input.on('change', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y'),
item = $.grep(_this.data, function(v) {
return v.x == x && v.y == y;
}).pop();
if(item) item.text = $input.val();
_this.addDOM();
_this.element.triggerHandler('change');
});
$e.empty().append($input, $button_ok, $button_delete);
});
_this.updateDOM();
};
/****************************************************************
* DATA MANAGEMENT
****************************************************************/
Taggd.prototype.addData = function(data) {
if($.isArray(data)) {
this.data = $.merge(this.data, data);
} else {
this.data.push(data);
}
if(this.initialized) {
this.addDOM();
this.element.triggerHandler('change');
}
};
Taggd.prototype.setData = function(data) {
this.data = data;
if(this.initialized) {
this.addDOM();
}
};
Taggd.prototype.clear = function() {
if(!this.initialized) return;
this.wrapper.find('.taggd-item, .taggd-item-hover').remove();
};
/****************************************************************
* EVENTS
****************************************************************/
Taggd.prototype.on = function(event, handler) {
if(
typeof event !== 'string' ||
typeof handler !== 'function'
) return;
this.element.on(event, handler);
};
/****************************************************************
* TAGS MANAGEMENT
****************************************************************/
Taggd.prototype.iterateTags = function(a, yep) {
var func;
if($.isNumeric(a)) {
func = function(i, e) { return a === i; };
} else if(typeof a === 'string') {
func = function(i, e) { return $(e).is(a); }
} else if($.isArray(a)) {
func = function(i, e) {
var $e = $(e);
var result = false;
$.each(a, function(ai, ae) {
if(
i === ai ||
e === ae ||
$e.is(ae)
) {
result = true;
return false;
}
});
return result;
}
} else if(typeof a === 'object') {
func = function(i, e) {
var $e = $(e);
return $e.is(a);
};
} else if($.isFunction(a)) {
func = a;
} else if(!a) {
func = function() { return true; }
} else return this;
this.wrapper.find('.taggd-item').each(function(i, e) {
if(typeof yep === 'function' && func.call(this, i, e)) {
yep.call(this, i, e);
}
});
return this;
};
Taggd.prototype.show = function(a) {
return this.iterateTags(a, methods.show);
};
Taggd.prototype.hide = function(a) {
return this.iterateTags(a, methods.hide);
};
Taggd.prototype.toggle = function(a) {
return this.iterateTags(a, methods.toggle);
};
/****************************************************************
* CLEANING UP
****************************************************************/
Taggd.prototype.dispose = function() {
this.clear();
this.element.unwrap(this.wrapper);
};
/****************************************************************
* SEMI-PRIVATE
****************************************************************/
Taggd.prototype.addDOM = function() {
var _this = this;
this.clear();
this.element.css({ height: 'auto', width: 'auto' });
var height = this.element.height();
var width = this.element.width();
$.each(this.data, function(i, v) {
var $item = $('<span />');
var $hover;
if(
v.x > 1 && v.x % 1 === 0 &&
v.y > 1 && v.y % 1 === 0
) {
v.x = v.x / width;
v.y = v.y / height;
}
if(typeof v.attributes === 'object') {
$item.attr(v.attributes);
}
$item.attr({
'data-x': v.x,
'data-y': v.y
});
$item.css('position', 'absolute');
$item.addClass('taggd-item');
_this.wrapper.append($item);
if(typeof v.text === 'string' && (v.text.length > 0 || _this.options.edit)) {
$hover = $('<span class="taggd-item-hover" style="position: absolute;" />').html(v.text);
$hover.attr({
'data-x': v.x,
'data-y': v.y
});
_this.wrapper.append($hover);
}
if(typeof _this.options.handlers === 'object') {
$.each(_this.options.handlers, function(event, func) {
var handler;
if(typeof func === 'string' && methods[func]) {
handler = methods[func];
} else if(typeof func === 'function') {
handler = func;
}
$item.on(event, function(e) {
if(!handler) return;
handler.call($item, e, _this.data[i]);
});
});
}
});
this.element.removeAttr('style');
if(this.options.edit) {
this.alterDOM();
}
this.updateDOM();
};
Taggd.prototype.updateDOM = function() {
var _this = this;
this.wrapper.removeAttr('style').css({
height: this.element.height(),
width: this.element.width()
});
this.wrapper.find('span').each(function(i, e) {
var $el = $(e);
var left = $el.attr('data-x') * _this.element.width();
var top = $el.attr('data-y') * _this.element.height();
if($el.hasClass('taggd-item')) {
$el.css({
left: left - $el.outerWidth(true) / 2,
top: top - $el.outerHeight(true) / 2
});
} else if($el.hasClass('taggd-item-hover')) {
if(_this.options.align.x === 'center') {
left -= $el.outerWidth(true) / 2;
} else if(_this.options.align.x === 'right') {
left -= $el.outerWidth(true);
}
if(_this.options.align.y === 'center') {
top -= $el.outerHeight(true) / 2;
} else if(_this.options.align.y === 'bottom') {
top -= $el.outerHeight(true);
}
$el.attr('data-align', $el.outerWidth(true));
$el.css({
left: left + _this.options.offset.left,
top: top + _this.options.offset.top
});
}
});
};
/****************************************************************
* JQUERY LINK
****************************************************************/
$.fn.taggd = function(options, data) {
return new Taggd(this, options, data);
};
})(jQuery);
What do i have to add to the code above to get this working?
Thank you very much!!!
jQuery remove or group by same nodes in xml dom
I'm fairly new on jQuery and manupulating xml doms. So if my question is not releavnt forgive me.
Sample Of My XML:
<Urunler>
<Urun>
<ID>21955</ID>
<Mensei>Coke</Mensei> /* Contains Same Value */
</Urun>
<Urun>
<ID>21956</ID>
<Mensei>Coke</Mensei> /* Contains Same Value */
</Urun>
<Urunler>
My Ajax Call and Jquery code to show them into html dom:
$.ajax({
url: 'webservice/Resim/Stokkart.xml',
dataType: 'xml',
cache:true,
success: parseXml
});
function parseXml(xml) {
$(xml).find("Urun").filter(function () {
return $(this).find("ASTipNo").text() == categoryCode;
}).each(function () {
$('#product-list').append(
'<div class="product-name col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>'+
'<h5 style="color:red;">' + $(this).find("Mensei").text() + '</h5>'+
'</div>'
);
});
}
What i'm trying to achieve; i want to remove repeating <Urun> nodes if they has the same <Mensei> values in my xml document or can i merge them into one node (Like GROUP BY in SQL)?
PS: I can not do it in server side because i'm developing an offline mobile app on cordova.
Any help will greatly appricated.
Jquey Autocompletion with php file [on hold]
I am following this tutorial. It works fine. What I want now is to get the var availableTags through http request to php file at my server containing same words as defined here. Basically what i want is autocompletion for multiple words and the words suggestions should be get from the file present at server not as defined in the array variable in jquery/javascript.
Can't use javascript within jpanelmenu
I'm trying to use this autocomplete search:
<script type="text/javascript">
jQuery(function() {
var availableTags = [
"Comedy",
"Music",
"Radio"
];
jQuery( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
Inside this script:
/**
*
* jPanelMenu 1.4.1 (http://jpanelmenu.com)
* By Anthony Colangelo (http://acolangelo.com)
*
* */
(function($){
$.jPanelMenu = function(options) {
if ( typeof(options) == "undefined" || options == null ) { options = {}; };
var jP = {
options: $.extend({
menu: '#menu',
panel: 'body',
trigger: '.menu-trigger',
excludedPanelContent: 'style, script',
clone: true,
keepEventHandlers: false,
direction: 'left',
openPosition: '250px',
animated: true,
closeOnContentClick: true,
keyboardShortcuts: [
{
code: 27,
open: false,
close: true
},
{
code: 37,
open: false,
close: true
},
{
code: 39,
open: true,
close: true
},
{
code: 77,
open: true,
close: true
}
],
duration: 150,
openDuration: options.duration || 150,
closeDuration: options.duration || 150,
easing: 'ease-in-out',
openEasing: options.easing || 'ease-in-out',
closeEasing: options.easing || 'ease-in-out',
before: function(){ },
beforeOpen: function(){ },
beforeClose: function(){ },
after: function(){ },
afterOpen: function(){ },
afterClose: function(){ },
beforeOn: function(){ },
afterOn: function(){ },
beforeOff: function(){ },
afterOff: function(){ }
},options),
settings: {
transitionsSupported: 'WebkitTransition' in document.body.style ||
'MozTransition' in document.body.style ||
'msTransition' in document.body.style ||
'OTransition' in document.body.style ||
'Transition' in document.body.style
,
transformsSupported: 'WebkitTransform' in document.body.style ||
'MozTransform' in document.body.style ||
'msTransform' in document.body.style ||
'OTransform' in document.body.style ||
'Transform' in document.body.style
,
cssPrefix: '',
panelPosition: 'static',
positionUnits: 'px'
},
menu: '#jPanelMenu-menu',
panel: '.jPanelMenu-panel',
timeouts: {},
clearTimeouts: function() {
clearTimeout(jP.timeouts.open);
clearTimeout(jP.timeouts.afterOpen);
clearTimeout(jP.timeouts.afterClose);
},
setPositionUnits: function() {
var foundUnit = false,
allowedUnits = ['%','px','em']
;
for (var unitID = 0; unitID < allowedUnits.length; unitID++) {
var unit = allowedUnits[unitID];
if ( jP.options.openPosition.toString().substr(-unit.length) == unit )
{
foundUnit = true;
jP.settings.positionUnits = unit;
}
}
if ( !foundUnit ) { jP.options.openPosition = parseInt(jP.options.openPosition) + jP.settings.positionUnits }
},
computePositionStyle: function(open, string) {
var position = (open)?jP.options.openPosition:'0' + jP.settings.positionUnits;
var property = {};
if ( jP.settings.transformsSupported ) {
var direction = (open && jP.options.direction == 'right')?'-':'';
var translate = 'translate3d(' + direction + position + ',0,0)';
var transform = 'transform';
if ( string ) {
property = '';
if ( jP.settings.cssPrefix != '' ) { property = jP.settings.cssPrefix + transform + ':' + translate + ';' }
property += transform + ':' + translate + ';';
} else {
if ( jP.settings.cssPrefix != '' ) { property[jP.settings.cssPrefix + transform] = translate; }
property[transform] = translate;
}
} else {
if ( string ) {
property = '';
property = jP.options.direction + ': ' + position + ';';
} else {
property[jP.options.direction] = position;
}
}
return property;
},
setCSSPrefix: function() {
jP.settings.cssPrefix = jP.getCSSPrefix();
},
setjPanelMenuStyles: function() {
var bg = 'background:#fff',
htmlBG = $('html').css('background-color'),
bodyBG = $('body').css('background-color');
var backgroundGenerator = function(element){
var bgs = [];
$.each(['background-color','background-image','background-position','background-repeat','background-attachment','background-size','background-clip'], function(i,value){
if( element.css(value) !== '' ) {
bgs.push(value+':'+element.css(value));
}
});
return bgs.join(';');
};
if ( bodyBG !== 'transparent' && bodyBG !== "rgba(0, 0, 0, 0)") {
bg = backgroundGenerator($('body'));
} else if ( htmlBG !== 'transparent' && htmlBG !== "rgba(0, 0, 0, 0)") {
bg = backgroundGenerator($('html'));
}
if ( $('#jPanelMenu-style-master').length == 0 ) {
$('body').append('<style id="jPanelMenu-style-master">body{width:100%}.jPanelMenu,body{overflow-x:hidden}#jPanelMenu-menu{display:block;position:fixed;top:0;'+jP.options.direction+':0;height:100%;z-index:-1;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch}.jPanelMenu-panel{position:static;'+jP.options.direction+':0;top:0;z-index:2;width:100%;min-height:100%;' + bg + ';}</style>');
}
},
setMenuState: function(open) {
var position = (open)?'open':'closed';
$(jP.options.panel).attr('data-menu-position', position);
},
getMenuState: function() {
return $(jP.options.panel).attr('data-menu-position');
},
menuIsOpen: function() {
if ( jP.getMenuState() == 'open' ) return true;
else return false;
},
setMenuStyle: function(styles) {
$(jP.menu).css(styles);
},
setPanelStyle: function(styles) {
$(jP.panel).css(styles);
},
showMenu: function() {
jP.setMenuStyle({
display: 'block'
});
jP.setMenuStyle({
'z-index': '1'
});
},
hideMenu: function() {
jP.setMenuStyle({
'z-index': '-1'
});
jP.setMenuStyle({
display: 'none'
});
},
enableTransitions: function(duration, easing) {
var formattedDuration = duration/1000;
var formattedEasing = jP.getCSSEasingFunction(easing);
jP.disableTransitions();
$('body').append('<style id="jPanelMenu-style-transitions">.jPanelMenu-panel{' + jP.settings.cssPrefix + 'transition: all ' + formattedDuration + 's ' + formattedEasing + '; transition: all ' + formattedDuration + 's ' + formattedEasing + ';}</style>');
},
disableTransitions: function() {
$('#jPanelMenu-style-transitions').remove();
},
getCSSEasingFunction: function(name) {
switch ( name )
{
case 'linear':
return name;
break;
case 'ease':
return name;
break;
case 'ease-in':
return name;
break;
case 'ease-out':
return name;
break;
case 'ease-in-out':
return name;
break;
default:
return 'ease-in-out';
break;
}
},
getJSEasingFunction: function(name) {
switch ( name )
{
case 'linear':
return name;
break;
default:
return 'swing';
break;
}
},
getVendorPrefix: function() {
// Thanks to Lea Verou for this beautiful function. (http://ift.tt/1O4znoZ)
if('result' in arguments.callee) return arguments.callee.result;
var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
var someScript = document.getElementsByTagName('script')[0];
for(var prop in someScript.style)
{
if(regex.test(prop))
{
// test is faster than match, so it's better to perform
// that on the lot and match only when necessary
return arguments.callee.result = prop.match(regex)[0];
}
}
// Nothing found so far? Webkit does not enumerate over the CSS properties of the style object.
// However (prop in style) returns the correct value, so we'll have to test for
// the precence of a specific property
if('WebkitOpacity' in someScript.style) return arguments.callee.result = 'Webkit';
if('KhtmlOpacity' in someScript.style) return arguments.callee.result = 'Khtml';
return arguments.callee.result = '';
},
getCSSPrefix: function() {
var prefix = jP.getVendorPrefix();
if ( prefix != '' ) { return '-' + prefix.toLowerCase() + '-'; }
return '';
},
openMenu: function(animated) {
if ( typeof(animated) == "undefined" || animated == null ) { animated = jP.options.animated };
jP.clearTimeouts();
jP.options.before();
jP.options.beforeOpen();
jP.setMenuState(true);
jP.showMenu();
var animationChecks = {
none: (!animated)?true:false,
transitions: (animated && jP.settings.transitionsSupported)?true:false
};
if ( animationChecks.transitions || animationChecks.none ) {
if ( animationChecks.none ) jP.disableTransitions();
if ( animationChecks.transitions ) jP.enableTransitions(jP.options.openDuration, jP.options.openEasing);
var newPanelStyle = jP.computePositionStyle(true);
jP.setPanelStyle(newPanelStyle);
jP.timeouts.afterOpen = setTimeout(function(){
jP.options.after();
jP.options.afterOpen();
jP.initiateContentClickListeners();
}, jP.options.openDuration);
}
else {
var formattedEasing = jP.getJSEasingFunction(jP.options.openEasing);
var animationOptions = {};
animationOptions[jP.options.direction] = jP.options.openPosition;
$(jP.panel).stop().animate(animationOptions, jP.options.openDuration, formattedEasing, function(){
jP.options.after();
jP.options.afterOpen();
jP.initiateContentClickListeners();
});
}
},
closeMenu: function(animated) {
if ( typeof(animated) == "undefined" || animated == null ) { animated = jP.options.animated };
jP.clearTimeouts();
jP.options.before();
jP.options.beforeClose();
jP.setMenuState(false);
var animationChecks = {
none: (!animated)?true:false,
transitions: (animated && jP.settings.transitionsSupported)?true:false
};
if ( animationChecks.transitions || animationChecks.none ) {
if ( animationChecks.none ) jP.disableTransitions();
if ( animationChecks.transitions ) jP.enableTransitions(jP.options.closeDuration, jP.options.closeEasing);
var newPanelStyle = jP.computePositionStyle();
jP.setPanelStyle(newPanelStyle);
jP.timeouts.afterClose = setTimeout(function(){
jP.disableTransitions();
jP.hideMenu();
jP.options.after();
jP.options.afterClose();
jP.destroyContentClickListeners();
}, jP.options.closeDuration);
}
else {
var formattedEasing = jP.getJSEasingFunction(jP.options.closeEasing);
var animationOptions = {};
animationOptions[jP.options.direction] = 0 + jP.settings.positionUnits;
$(jP.panel).stop().animate(animationOptions, jP.options.closeDuration, formattedEasing, function(){
jP.hideMenu();
jP.options.after();
jP.options.afterClose();
jP.destroyContentClickListeners();
});
}
},
triggerMenu: function(animated) {
if ( jP.menuIsOpen() ) jP.closeMenu(animated);
else jP.openMenu(animated);
},
initiateClickListeners: function() {
$(document).on('click touchend',jP.options.trigger,function(e){
jP.triggerMenu(jP.options.animated); e.preventDefault();
});
},
destroyClickListeners: function() {
$(document).off('click touchend',jP.options.trigger,null);
},
initiateContentClickListeners: function() {
if ( !jP.options.closeOnContentClick ) return false;
$(document).on('click touchend',jP.panel,function(e){
if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
e.preventDefault();
});
},
destroyContentClickListeners: function() {
if ( !jP.options.closeOnContentClick ) return false;
$(document).off('click touchend',jP.panel,null);
},
initiateKeyboardListeners: function() {
var preventKeyListeners = ['input', 'textarea', 'select'];
$(document).on('keydown',function(e){
var target = $(e.target),
prevent = false;
$.each(preventKeyListeners, function(){
if (target.is(this.toString())) {
prevent = true;
}
});
if ( prevent ) return true;
for ( mapping in jP.options.keyboardShortcuts ) {
if ( e.which == jP.options.keyboardShortcuts[mapping].code ) {
var key = jP.options.keyboardShortcuts[mapping];
if ( key.open && key.close ) { jP.triggerMenu(jP.options.animated); }
else if ( (key.open && !key.close) && !jP.menuIsOpen() ) { jP.openMenu(jP.options.animated); }
else if ( (!key.open && key.close) && jP.menuIsOpen() ) { jP.closeMenu(jP.options.animated); }
e.preventDefault();
}
}
});
},
destroyKeyboardListeners: function() {
$(document).off('keydown',null);
},
setupMarkup: function() {
$('html').addClass('jPanelMenu');
$(jP.options.panel + ' > *').not(jP.menu + ', ' + jP.options.excludedPanelContent).wrapAll('<div class="' + jP.panel.replace('.','') + '"/>');
var menu = ( jP.options.clone )?$(jP.options.menu).clone(jP.options.keepEventHandlers):$(jP.options.menu);
menu.attr('id', jP.menu.replace('#','')).insertAfter(jP.options.panel + ' > ' + jP.panel);
},
resetMarkup: function() {
$('html').removeClass('jPanelMenu');
$(jP.options.panel + ' > ' + jP.panel + ' > *').unwrap();
$(jP.menu).remove();
},
init: function() {
jP.options.beforeOn();
jP.setPositionUnits();
jP.setCSSPrefix();
jP.initiateClickListeners();
if ( Object.prototype.toString.call(jP.options.keyboardShortcuts) === '[object Array]' ) { jP.initiateKeyboardListeners(); }
jP.setjPanelMenuStyles();
jP.setMenuState(false);
jP.setupMarkup();
jP.setPanelStyle({ position: (( jP.options.animated && jP.settings.panelPosition === 'static' )?'relative':jP.settings.panelPosition) });
jP.setMenuStyle({ width: jP.options.openPosition });
jP.closeMenu(false);
jP.options.afterOn();
},
destroy: function() {
jP.options.beforeOff();
jP.closeMenu();
jP.destroyClickListeners();
if ( Object.prototype.toString.call(jP.options.keyboardShortcuts) === '[object Array]' ) { jP.destroyKeyboardListeners(); }
jP.resetMarkup();
var childrenStyles = {};
childrenStyles[jP.options.direction] = 'auto';
jP.options.afterOff();
}
};
return {
on: jP.init,
off: jP.destroy,
trigger: jP.triggerMenu,
open: jP.openMenu,
close: jP.closeMenu,
isOpen: jP.menuIsOpen,
menu: jP.menu,
getMenu: function() { return $(jP.menu); },
panel: jP.panel,
getPanel: function() { return $(jP.panel); },
setPosition: function(position) {
if ( typeof(position) == "undefined" || position == null ) {
position = jP.options.openPosition
}
jP.options.openPosition = position;
jP.setMenuStyle({ width: jP.options.openPosition });
}
};
};
})(jQuery);
</script>
<script type="text/javascript">
jQuery(function() {
var jPM = jQuery.jPanelMenu();
var jPM = jQuery.jPanelMenu({
menu: '#menu-selector',
trigger: '.menu-trigger-selector',
duration: 300
});
jPM.on();
})
</script>
The HTML looks like
<div class="menu-trigger-selector"><img src="http://ift.tt/1JV7ytJ" alt="Menu Button" title="Menu Button"></div>
<div id="menu-selector" style="display:none;">
<ul class="info">
<li id="about" class="noselect"><a href="#">Home</a></li>
<li id="faq" class="noselect"><a href="#">About</a></li>
<li id="contribute" class="noselect"><a href="#">Contact</a></li>
</ul>
<ul class="login-register">
<li id="login" class="noselect"><a href="#">Login</a></li>
<li id="register" class="noselect"><a href="#">Register</a></li>
</ul>
<div class="ui-widget">
<input id="tags" placeholder="Search"></input>
</div>
<ul class="podcast-list">
<li>Main1
<ul class="podcasts">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
</ul>
</div>
<div class="container">
...
</div>
Loading resources in this order
<script src="http://ift.tt/1yCEpkO"></script>
<script src="../jquery.once.js?v=1.2"></script>
<script src="../drupal.js?nmk3bg"></script>
<script src="http://ift.tt/1DG5WSS"></script>
<link rel="stylesheet" href="http://ift.tt/1BoDuVn" />
<link href='http://ift.tt/19nU1g7' rel='stylesheet' type='text/css'>
<script src="http://ift.tt/IWF2gG"></script>
No jquery works at all though. Scripts work fine anywhere in the body, but not inside the side menu. There are no console errors. I've tried 2 other side menus but javascript doesn't work within them either. I need help either fixing this one or finding another one that supports javascript.
Inscription à :
Articles (Atom)