I am using this contextmenu plugin: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/
DEMO: http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/
SOURCE-CODE: http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/jquery.contextMenu.js
DEFAULT CALL:
$("#myDiv").contextMenu({
menu: 'myMenu'
},
function(action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element ID: ' + $(el).attr('id') + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});
I want to call this context menu on a left click rather than a right click, how can I achieve this ?
or any other plugin suggestions?
Do a regular click handler:
$("#myDiv").on('click', function() {
$(this).contextmenu(...)
})
Inside the source code, looking for the following codes:
if( evt.button == 2 ) {...
According to W3C its values should be:
Left button = 0,
Middle button = 1,
Right button = 2,
According to Microsoft its values should be:
Left button = 1,
Middle button = 4,
Right button = 2,
You may change the value depending on what you need.
Related
So i spent some time over night adding user pictures to a voting feature we have, and all is working nicely, however we notice that as users pictures show up as who voted, it repeats the results twice, instead of a row of pictures going across per item.
So per item, users picture (who voted on the poll ID) shows up but duplicates the row.
Does this have to do with $.each() ? How can I iterate the photos across each row (id column) without creating a copy of the answer and not show only 1 picture?
function fetchPollData() {
$(function(){});
$.ajax({
url: "ajax_pollresults.php",
method: "GET",
dataType: 'JSON',
success: function (data) {
var html_to_append = '';
$.each(data, function (i, item) {
var scase = (item.votes > 1) ? 'votes' : 'vote';
html_to_append +=
'<div class="content poll-result"><div class="wrapper"><div class="poll-question"><p>' +
item.title +
' - <span style="font-weight:bold">' + item.votes + ' ' + scase + ' <img class="tooltip-polluser" title="' + item.username + ' - Voted: ' + item.title + '" href="/user/?id=' + item.user_id + '" style="width:25px;height:25px;border-radius:50%;margin-left:10px;vertical-align:middle" src="/' + item.avatar + '" /></span></p><div class="result-bar" style="width:' + roundVotes(item.votes) + '%"><b>' + item.votes + '</b> ' + scase + ' </div></div></div></div>';
});
$("#recent-poll").html(html_to_append);
$('.tooltip-polluser').tooltipster({
animation: 'grow',
delay: 200,
theme: 'tooltipster-punk'
});
}
});
}
fetchPollData();
setInterval(function () {
fetchPollData()
}, 10000);
The bug we cant figure out a fix for:
It seems it is only showing 1 user per voted item, and ignoring the rest of the row.
our SQL query:
SELECT
poll_answers.id AS id,
IFNULL(poll_users.user_id, '') AS user_id,
IFNULL(users.username, '') AS username,
poll_answers.poll_id,
poll_answers.title,
poll_answers.votes,
poll_users.added AS date,
IFNULL(users.avatar_thumb,
'images/poll_avatarfix.png') AS avatar
FROM
poll_answers
LEFT JOIN
poll_users ON poll_users.poll_id = poll_answers.poll_id
LEFT JOIN
users ON users.user_id = poll_users.user_id
And the database results:
I spent a fair bit of the evening writing this SQL query, so I'm not sure if this is the query not bringing all avatars out or if its jQuery.
Any help is greatly appreciated!
You will want to get each voter image in an inner loop. You can do something like the following...
Instead of using just the one record, call something like getVoteImages() and pass in the poll id you are looking for. This will get all of your images and append them to a string then return it. There may be faster, more elegant ways to do it, but this should work.
$.each(data, function (i, item) {
var scase = (item.votes > 1) ? 'votes' : 'vote';
html_to_append +=
'<div class="content poll-result"><div class="wrapper"><div class="poll-question"><p>' +
item.title +
' - <span style="font-weight:bold">' + item.votes + ' ' + scase + getVoteImages(data, item.poll_id) + "</span></p><div class="result-bar" style="width:' + roundVotes(item.votes) + '%"><b>' + item.votes + '</b> ' + scase + ' </div></div></div></div>';
});
function getVoteImages(data, poll_id) {
var images = "";
$.each(data, function (i, item) {
if (item.poll_id == poll_id) {
images += ' <img class="tooltip-polluser" title="' + item.username + ' - Voted: ' + item.title + '" href="/user/?id=' + item.user_id + '" style="width:25px;height:25px;border-radius:50%;margin-left:10px;vertical-align:middle" src="/' + item.avatar + '" />';
}
});
return images;
}
I'm pretty new to web programming so, making a logic for a web-page, I made a mistake and now I'm in trouble.
I named some divs like "Dv_1.2.1.3" (without knowing the problems linked to using the dot) and I have issues trying to clone (via jquery called by button) some of these.
The button id contains the id of the div I want to clone, so, my logic is:
1) extract the id of the div;
2) get the div and clone it (giving a new id).
I'm stuck with getting the div because of the dots in the id.
The below code is what I've done so far:
$('.CloneDiv').click(function () {
var SplittedId = (this.id).split('_');
if (SplittedId[0]=='Clone'){
alert('SplittedId 1 =' + SplittedId[1]);
//Modify id to use it to find the div to clone
var UsableId = SplittedId[1].replace(/\./g, '\\\\.');
alert('UsableId =' + UsableId);
//Count existing elements
var ClonedNum = $('#' + 'Dv_' + UsableId + '_').length;
ClonedNum++;
var OrigElem = $('#' + 'Dv_' + UsableId).length;
alert('OrigElem =' + OrigElem); //THIS IS 0
//NO ELEMENTS FOUND BUT THE ELEMENT EXISTS
//Clone the element and give new id
var ClonedElem = $('#' + 'Dv_' + UsableId).clone().attr('id', function( i, val ) {
return val + '_' + ClonedNum;
});
ClonedElem.find("input").val("");
if (ClonedNum > 1){
ClonedNum--;
var AnteId = '#' + 'Dv_' + UsableId + '_' + ClonedNum;
alert(AnteId);
$(AnteId).after(ClonedElem);
}else{
var AnteId = '#' + 'Dv_' + UsableId;
alert('AnteId = ' + AnteId);
$(AnteId).after(ClonedElem);
};
}else if(SplittedId[0]=='Del'){
alert(SplittedId[0]);
alert('Del');
}else{
//error
};
});
Might these help: developer.mozilla.org/en-US/docs/Web/API/CSS/escape , Polyfill: github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js
I have a searchbar included with the livesearch.com functionality from ajaxlivesearch.com
The problem is when i click on a result nothing happens. I want to send a query and show a result page when i click on the result. Before i included the ajaxlivesearch funtion i just typed in a keyword and pushed enter and then my result page showed up, this happens with an query. But after i included the ajaxlivesearch funtion pressing enter was not an option anymore, nothing happens.
I think the problem is within these jQuery lines;
jQuery(".mySearch").ajaxlivesearch({
loaded_at: <?php echo $time; ?>,
token: <?php echo "'" . $token . "'"; ?>,
maxInput: <?php echo $maxInputLength; ?>,
onResultClick: function(e, data) {
// get the index 1 (second column) value
var selectedOne = jQuery(data.selected).find('td').eq('1').text();
// set the input value
jQuery('.mySearch').val(selectedOne);
// hide the result
jQuery(".mySearch").trigger('ajaxlivesearch:hide_result');
},
onResultEnter: function(e, data) {
// do whatever you want
// jQuery(".mySearch").trigger('ajaxlivesearch:search', {query: 'test'});
},
onAjaxComplete: function(e, data) {
// do whatever you want
}
});
I hope someone can help me out
Cheers!
Before you do anything, go to the ajaxlivesearch.js file, and find this line of code ->
// disable the form submit on pressing enter
form.submit(function () {
return false;
});
Basically it's disabling anything form happening when you press enter, which is kind of the opposite of what you're trying to do. So obviously you need to change it, ex.
$("#search_ls_query").submit(function(){
return true;
});
Now, (This is not an entirely vital addition but nonetheless, submit the form in the "onResultEnter" area that you add to your index page. Ex.
jQuery(document).ready(function(){
jQuery(".mySearch").ajaxlivesearch({
loaded_at: <?php echo $time; ?>,
token: <?php echo "'" . $token . "'"; ?>,
maxInput: <?php echo $maxInputLength; ?>,
onResultClick: function(e, data) {
// get the index 0 (1st column) value
var selectedOne = jQuery(data.selected).find('td').eq('0').text();
// set the input value
jQuery('.mySearch').val(selectedOne);
// hide the result
jQuery(".mySearch").trigger('ajaxlivesearch:hide_result');
},
onResultEnter: function(e, data) {
$("#search_ls_query").submit();
},
/* #search_ls_query is the id of the default form that is submitted when you press enter (Find in ajaxlivesearch.js)*/
onAjaxComplete: function(e, data) {
}
});
})
Now go to the ajaxlivesearch.js file and find this:
var wrapper = '<div class="' + ls.container_class + '">' +
'<form accept-charset="UTF-8" class="' + ls.form_class + '" id="' + ls.form_class + '_' + elem_id + '" name="ls_form">' +
'</form>' +
'</div>';
And add an action to this form as this is what is being activated when you press enter in the search bar. So make it this:
var wrapper = '<div class="' + ls.container_class + '">' +
'<form accept-charset="UTF-8" action="search.php" class="' + ls.form_class + '" id="' + ls.form_class + '_' + elem_id + '" name="ls_form">' +
'</form>' +
'</div>';
This way it actually has a destination to send the values to. So the name of the value being sent is "ls_query", so whatever you type in the bar will now be inserted into the value of "ls_query". Therefore, once you press enter and arrive at your new page, you can then use this variable to filter your search options, or whatever you need. For example, on your search page you could write:
$ls_query = secure($_GET['ls_query'],$mysqli);
$sql = "SELECT *
FROM users
WHERE username ='$ls_query'";
This took me a while to figure out as well. But if you're still looking for the answer, this worked for me. Let me know how it went!
Currently, I am using this for server monitoring :
http://bl.ocks.org/d3noob/9692795
The problem is, I am not getting how to add buttons (start, stop) in a tooltip.
I have gone through d3js tooltip doc:
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
But not able to do this. Can anyone help me please.
Current Code:
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click)
// add tool tip for ps -eo pid,ppid,pcpu,size,comm,ruser,s
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(
"PID: " + d.name + "<br/>" +
"Command: " + d.COMMAND + "<br/>" +
"User: " + d.RUSER + "<br/>" +
"%CPU: " + d.CPU + "<br/>" +
"Memory: " + d.SIZE
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
The problem is that the tooltip doesn't respond to mouse events (pointer-events: none; in the CSS). This is done to avoid triggering the mouseout event on the node as soon as the tooltip appears above it. (Normally, the element on top would capture the mouse event, by turning off pointer-events the mouse movements are passed through to the elements underneath).
If you want the tooltip to be interactive, with buttons or links, you'll need to remove that CSS line and figure out a different way of closing/hiding the tooltip. For example, you could hide the tooltip when the tooltip <div> is moused-out, or you could add a dedicated close button on the tooltip.
I have jquery function that calls a php script some data from my mysql database, the jquery function is called as below :
$(document).ready(function(){
getTopFiveDeals();
When this runs it gets the data fine and builds some HTML and inserts it into the webpage. As shown below:
$('ul.special-list').append("<li><a href='#' class=restaurantItem restaurant= '" + item.estName + "' adddress='" + item.estAddr + "'><img src= " + item.img_link +
" width='60' height='60' alt='" + item.estName + "'><div class='img-det'><strong class='title'> " + item.title + " </strong><p> " + item.desc_short +
" <br>Expires: " + item.expiry_date + " </p><em class='price'>" + item.price + "</em></div></a><a href='dealDetail.html?id=" + item.id +
"' class='det-link'>Detail</a>");
The problem starts when i have a simple jquery function below. The function is not called instead the page reloads to index.html#
$("a.restaurantItem").click(function (event) {
alert('Hello');
}
Any help and or advice would be much appreciated.
Many Thanks
$("a.restaurantItem") is called once. It doesn't look for new elements. You need to use the event delegation syntax of .on() to match those dynamically created elements:
$('ul.special-list').on('click', 'a.restaurantItem', function(e) {
e.preventDefault(); // To stop the link from redirecting the browser
});
You'll need delegated event handlers for dynanic elements, and to prevent the default action on anchors (to avoid scrolling to top or following the href)
$('ul.special-list').on('click', 'a.restaurantItem', function(event) {
event.preventDefault();
alert('Hello');
});
use .on() this way
$(document).on('click',"a.restaurantItem",function (event){
event.preventDefault();
alert('Hello');
});