Coast Line
asked on
a context menu and disabling few items of it
Hi, i have the following context menu with me:
now the issue lies is when i right click on the folders i want to disable make copy/rename/delete
i want to
(function($){
jQuery.fn.vscontext = function(options){
var defaults = {
menuBlock: null,
leftButton: false,
rightButton: true,
offsetX : 8,
offsetY : 8,
speed : 'fast'
};
var options = $.extend(defaults, options);
var menu_item = options.menuBlock;
return this.each(function(){
$(this).bind("contextmenu",function(e){
return false;
});
$(this).mousedown(function(e){
var offsetX = e.pageX + options.offsetX;
var offsetY = e.pageY + options.offsetY;
if((e.button == 2 && options.rightButton == true) || ($.browser.msie && e.button == 1 && options.leftButton == true) || (!$.browser.msie && e.button == 0 && options.leftButton == true)){
$(menu_item).show(options.speed);
$(menu_item).css('display','block');
$(menu_item).css('top',offsetY);
$(menu_item).css('left',offsetX);
}else {
$(menu_item).hide(options.speed);
}
});
$(menu_item).hover(function(){}, function(){$(menu_item).hide(options.speed);})
});
};
})(jQuery);
now the issue lies is when i right click on the folders i want to disable make copy/rename/delete
<div class="vs-context-menu">
<ul>
<li class="regenerate"><a class="insidelink" data-place="0" data-program="5034" data-desk="1031" id="menu_1" data-fancybox-width="300" data-fancybox-height="200" data-fancybox-type="iframe">Regenerate</a></li>
<li class="rename seprator"><a class="fancybox" data-program="5034" data-desk="1031" id="menu_2" data-fancybox-width="450" data-fancybox-height="300" data-fancybox-type="iframe">Rename</a></li>
<li class="copy"><a class="makecopy" data-program="5034" data-delete="0" data-desk="1031" id="menu_3" data-fancybox-width="300" data-fancybox-height="100" data-fancybox-type="iframe">Make Copy</a></li>
<li class="delete seprator"><a class="deleteFile" data-program="5034" data-delete="1" data-desk="1031" id="menu_5" data-fancybox-width="300" data-fancybox-height="100" data-fancybox-type="iframe">Delete</a></li>
<li class="email"><a class="fancybox" data-program="5034" data-desk="1031" id="menu_6" data-fancybox-width="500" data-fancybox-height="500" data-fancybox-type="iframe">Email</a></li>
</ul>
</div>
i want to
ASKER
here is the working link for you and this is what i am trying to do:
now i am trying to do few things
1. as how i am selecting the txt File, i want to do a same like selecting a folder
2. disable the context menu items on folders right click, only keep regenerate and email enabled.
3. can i select 2 or more files from one folder and merge them, i would like to add one more link called merge to context menu, which will let me select 2 or more items from same folder, not from multiple folders and if i can disable merge the folders right click
http://gr-group.in/filefolder/file_explorer.cfm
now i am trying to do few things
1. as how i am selecting the txt File, i want to do a same like selecting a folder
2. disable the context menu items on folders right click, only keep regenerate and email enabled.
3. can i select 2 or more files from one folder and merge them, i would like to add one more link called merge to context menu, which will let me select 2 or more items from same folder, not from multiple folders and if i can disable merge the folders right click
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This is cool, but i am not able to select a directory just like i do with file a text file and then i do right click and perform functions
so how can i do same with dir
so how can i do same with dir
Sorry, but I'm not sure to understand the issue: I don't remember it were different before...
Btw, let me ask where you are including the vscontext.jquery.js plugin: I don't find the reference to it in the page source.
In modifications I did there is nothing which should prevent the correct behavior: in the plugin my code is executed only if the e.button == "2" (that is the right button) nd the other modification refers only to menu items deleteFile and makeCopy. Which is the code that would allow to select a folder?
Btw, let me ask where you are including the vscontext.jquery.js plugin: I don't find the reference to it in the page source.
In modifications I did there is nothing which should prevent the correct behavior: in the plugin my code is executed only if the e.button == "2" (that is the right button) nd the other modification refers only to menu items deleteFile and makeCopy. Which is the code that would allow to select a folder?
ASKER
i just copied ur code to the main contexct.js fie,
only difference is where the
the code works, but if u see clearly when you left click on the file, u see it selected
i want the same, that i should be able to select the folder and then it will open too and right click will behave just like your above code
only difference is where the
e.button == 2
, it is replaced with if((e.button == 2 && options.rightButton == true) || ($.browser.msie && e.button == 1 && options.leftButton == true) || (!$.browser.msie && e.button == 0 && options.leftButton == true)){
the code works, but if u see clearly when you left click on the file, u see it selected
i want the same, that i should be able to select the folder and then it will open too and right click will behave just like your above code
Why did you use this line?
Anyway, where you're including the plugin? nd what is the code which changes the css of folders to make them selected?
if((e.button == 2 && options.rightButton == true) || ($.browser.msie && e.button == 1 && options.leftButton == true) || (!$.browser.msie && e.button == 0 && options.leftButton == true)){
In plain english, this line of code means: "if the user click the right button or the left button", that is every mouse button be clicked open the menu. Try to use onlyif((e.button == 2 && options.rightButton == true)
and see if this mkes the folder be selected on left click.Anyway, where you're including the plugin? nd what is the code which changes the css of folders to make them selected?
ASKER
you can see the css as import venobox.css
i will update the code the right click o the menu
i will update the code the right click o the menu
I see you updated the code and now the folders are correctly selected. About the source, I was looking for vscontext.jquery.js and I didn't realize the code for the menu is in venobox.js :)
Any other issue?
Any other issue?
ASKER
yes but the issue for selecting the folders is this
I have the following code for ul and li, it works all good. you noticed the files have id as the attribute whose class is file. that is missing from the anchor link whose class is dir
i want to add the id too to the dir anchor link too. the following is the html of my code
I have the following code for ul and li, it works all good. you noticed the files have id as the attribute whose class is file. that is missing from the anchor link whose class is dir
i want to add the id too to the dir anchor link too. the following is the html of my code
<ul>
<li><a class="dir" data-place="-1" data-month="5034">July-2016</a>
<ul>
<li><a class="dir" data-place="-1" data-month="July-2016">complete</a></li>
<li><a class="dir" data-place="+1" data-month="July-2016">overview</a>
<ul>
<li><a id="5034/July-2016/overview/1 - Copy (2).txt" class="file" >1 - Copy (2).txt</a></li>
<li><a id="5034/July-2016/overview/1 - Copy.txt" class="file" >1 - Copy.txt</a></li>
<li><a id="5034/July-2016/overview/1.txt" class="file" >1.txt</a></li>
<li><a id="5034/July-2016/overview/2 - Copy (2).txt" class="file" >2 - Copy (2).txt</a></li>
<li><a id="5034/July-2016/overview/2 - Copy.txt" class="file" >2 - Copy.txt</a></li>
<li><a id="5034/July-2016/overview/2.txt" class="file" >2.txt</a></li>
<li><a id="5034/July-2016/overview/3 - Copy (2).txt" class="file" >3 - Copy (2).txt</a></li>
<li><a id="5034/July-2016/overview/3 - Copy.txt" class="file" >3 - Copy.txt</a></li>
<li><a id="5034/July-2016/overview/3.txt" class="file" >3.txt</a></li>
</ul>
</li>
<li><a class="dir" data-place="+1" data-month="July-2016">summary</a>
<ul>
<li><a id="5034/July-2016/summary/22.txt" class="file" >22.txt</a></li>
</ul>
</li>
</ul>
</li>
</ul>
$( "a.dir" ).click( function(){
var jLink = $( this );
var jSelected = $( "a.selected" );
// Remove the selected class.
jSelected.removeClass( "selected" );
// Set the selected status on new link.
jLink.addClass( "selected" );
var jSubDir = jLink.next( "ul" );
ShowFile(jLink.attr("id"));
// Toggle the sub-directory list.
jSubDir.toggle();
}
);
// Hoop up the file click handler.
$( "a.file" ).click(function(){
var jLink = $( this );
var jSelected = $( "a.selected" );
// Remove the selected class.
jSelected.removeClass( "selected" );
// Set the selected status on new link.
jLink.addClass( "selected" );
// Show file name.
$( "span#filename" ).text( jLink.text() );
// Load file.
ShowFile( jLink.attr( "id" ) );
var strFileData = jLink.attr( "id" );
$('div.vs-context-menu ul li a').attr("data-cusip", strFileData);
}
);
// The file might start off with some default elements.
// Show all the selected elements including all of the
// parent directories.
$( "a.selected" ).each(function(intI){
var jLink = $( this );
var jParents = jLink.parents( "ul" );
var jSubDir = jLink.next( "ul" );
// Show the current dir (this will only
// work if this is a directory link).
jSubDir.show();
// Show all the parents to show them.
jParents.show();
// If this is the first one, then we want to load the file.
alert(intI);
if (intI == 0){
// Show the file name.
$( "span#filename" ).text( jLink.text() );
// Load the file.
ShowFile( jLink.attr( "id" ) );
}
}
);
});
for dir class at least this should come, because it does not have file associated
id="5034/July-2016/overview"
the showFile Function
function ShowFile( strPath ){
// Check to see if there is an AJAX request already in
// progress that needs to be stopped.
if (objHttpFileDataRequest){
// Abort the AJAX request.
objHttpFileDataRequest.abort();
}
// Use AJAX to get the text of the file and store the
// new AJAX request object into the global variable.
objHttpFileDataRequest = $.get(
"index.cfm",
{
getdata: 1,
file: strPath //encodeURI( strPath )
},
function( strFileData ){
$( "pre#fileoutput" ).html('<iframe src="http://gr-group.in/filefolder/' + strPath + '" type="text/plain" width="100%" height="100%"></iframe>');
window.location.hash = "content";
}
);
}
I'm a bit confused: isn't this a totally unrelated issue?
ASKER
no it is not, in the view source of the link i shared there is also a script.js file which does the selection of the files work too, probably that might seems a bit unrrelated
but here is the reference question to it
https://www.experts-exchange.com/questions/28960280/Selecting-the-folders-with-current-script-as-follows.html
i updated some of the code to select folders too but how do i bring ID to the a tag who has a class of DIR
but here is the reference question to it
https://www.experts-exchange.com/questions/28960280/Selecting-the-folders-with-current-script-as-follows.html
i updated some of the code to select folders too but how do i bring ID to the a tag who has a class of DIR
@myselfrandhawa, in your question you wrote this:
In addition, I can't understand what you mean saying you want to add id to the anchor link: the function ShowFile already uses the id to get file contents from the server...
now the issue lies is when i right click on the folders i want to disable make copy/rename/deleteThe problem is now solved so this question can be closed. The issue you refer to, adding id to the anchors, is related to the menu for sure but it is a different aspect of the general problem 'How to manage this context menu'.
In addition, I can't understand what you mean saying you want to add id to the anchor link: the function ShowFile already uses the id to get file contents from the server...
ASKER
here i can choose the answer, you gave and that helped solved my issue. Next the question which i shared with you might be wrong
but the main issue is i have tha anchor tag which on looks like this
http://prntscr.com/c0b8cq
but the main issue is i have tha anchor tag which on looks like this
http://prntscr.com/c0b8cq
Maybe I'm a bit stupid today but still I don't understand :(
The anchor is
and how do you wish it be instead?
The anchor is
<a class="dir selected" data-place="+1" data-month="July-2016" href="javascript:void( 0 );">overview</a>
and how do you wish it be instead?
ASKER
can u update ur answer on the question i shared
ASKER
like this
for summary folder it will be like above but overview will be replaced by summary and like this
<a id="5034/July-2016/overview" class="file" href="javascript:void( 0 );">overview</a>
for overview folder for summary folder it will be like above but overview will be replaced by summary and like this
Ah, ok, now I got it. So you have to dd some code in the piece of code which builts the directory tree in order to add that id: can you share the function which builds and print the directory tree?
ASKER
i had already at the top see comment ID: 41737651
In the javascript I don't see the code which builds the directory tree: I only see an each loop for a.selected which shows children list.
I think there is a misunderstanding, so I ask the question in another way: is this markup hardcoded or dinamically built?
I think there is a misunderstanding, so I ask the question in another way: is this markup hardcoded or dinamically built?
<ul>
<li><a class="dir" data-place="-1" data-month="5034">July-2016</a>
<ul>
<li><a class="dir" data-place="-1" data-month="July-2016">complete</a></li>
<li><a class="dir" data-place="+1" data-month="July-2016">overview</a>
<ul>
<li><a id="5034/July-2016/overview/1 - Copy (2).txt" class="file" >1 - Copy (2).txt</a></li>
<li><a id="5034/July-2016/overview/1 - Copy.txt" class="file" >1 - Copy.txt</a></li>
<li><a id="5034/July-2016/overview/1.txt" class="file" >1.txt</a></li>
<li><a id="5034/July-2016/overview/2 - Copy (2).txt" class="file" >2 - Copy (2).txt</a></li>
<li><a id="5034/July-2016/overview/2 - Copy.txt" class="file" >2 - Copy.txt</a></li>
<li><a id="5034/July-2016/overview/2.txt" class="file" >2.txt</a></li>
<li><a id="5034/July-2016/overview/3 - Copy (2).txt" class="file" >3 - Copy (2).txt</a></li>
<li><a id="5034/July-2016/overview/3 - Copy.txt" class="file" >3 - Copy.txt</a></li>
<li><a id="5034/July-2016/overview/3.txt" class="file" >3.txt</a></li>
</ul>
</li>
<li><a class="dir" data-place="+1" data-month="July-2016">summary</a>
<ul>
<li><a id="5034/July-2016/summary/22.txt" class="file" >22.txt</a></li>
</ul>
</li>
</ul>
</li>
</ul>
If it is dynamically built, what is the code which builds it?
ASKER
dynamically build and id the each is missing for files, can we do it for dirctories
In the code you posted I don't see the function which builds that markup...
ASKER
that is build using coldfusion dynamic language, so do i need to do something over there, but do i need to write something on jquery end
Maybe you could tell it before :)
Ok, let me think about a bit...
Ok, let me think about a bit...
ASKER
i did tried it and it created the ID
so thanks for once in all. i will accept your answer.
Thanks for your patience
so thanks for once in all. i will accept your answer.
Thanks for your patience
ASKER
Thanks a ton
Ah, I see. Wonderful! Thanks for points and godd luck with your project.