X-Cart forums - Nice Right-Click Menu some of you might like.

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Nice Right-Click Menu some of you might like. (https://forum.x-cart.com/showthread.php?t=13981)

Nice Right-Click Menu some of you might like.

I've been thinking for some time how best to approach the subject of image theft by somehow stopping people from taking (stealing) images and text from web sites without any regard to copyright laws. And I know some of you dislike copyright messages that pop us when you right-click on an image, and I know there is no easy solution, and I also know that there is no sure fire way of stopping it either, however, I think I may have a solution that some of you may like to use. Basically it's a menu that, when you right click anywhere on the page, pops up in place of the default context menu.

If people want to get at your images they will. You can't stop them, but this menu helps. And the menu itself is just great too. Imagine all the things you can do with it.

I actually found it on the Dynamic Drive web site (great site btw). Visit this link: http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm and right click anywhere on the page to see what it can do.

The good thing about this menu system is that it's relatively small, highly customizable, and easy to setup. You can have any link you like and as many as you want. And the best part about it is it's totally free to use (just so long as you leave all that copyright stuff intact).

Unfortunately I donБ─≥t know how well it works with browsers other than IE and I don't know if the code will work with older versions of X-Cart (can't see why it shouldn't) so if you have any problems getting it to work under Firefox, as an example, it probably means that those browsers don't support it so you'll probably end up with the default context menu instead. :( If you do have an older version of X-Cart and it doesn't work, you may want to ask some of the more experience X-Cart people for assistance as I am not all that experienced to help.

Ok, this is how I got it to work in X-Cart 4.0.13 and IE.

Copy the following CSS code to you skin1.css file (anywhere you like. I place it right at the bottom)

Code:

.skin0{

position:absolute;

width:165px;

border:1px solid black;

background-color:menu;

font-family:Verdana;

line-height:20px;

cursor:default;

font-size:14px;

z-index:100;

visibility:hidden;

}



.body_menuitems{

padding-left:10px;

padding-right:10px;

}

Save the file.

Now create a new file called xcart/skin1/body_menu.tpl and insert the following code:

Code:

{* $Id: body_menu.tpl, 2005/05/13 12:12:00  Exp $ *} 

<head>

<!--Context menu Script- б╘ Dynamic Drive (www.dynamicdrive.com) Last updated: 01/08/22

For full source code and Terms Of Use, visit http://www.dynamicdrive.com -->

<LINK rel="stylesheet" href="{$SkinDir}/{#CSSFile#}">

<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>

<div class="body_menuitems" url="{$xcart}/store/help.php"Help</div>

<div class="body_menuitems" url="{$xcart}/store/help.php?section=about">About Us</div>

<div class="body_menuitems" url="{$xcart}/store/help.php?section=contactus&mode=update">Contact Us</div>

<div class="body_menuitems" url="{$xcart}/store/help.php?section=FAQ">FAQ</div>

<div class="body_menuitems" url="{$xcart}/store/help.php?section=business">Privacy Statement</div>

<div class="body_menuitems" url="{$xcart}/store/help.php?section=conditions">Terms & Conditions</div>

</div>

</head>

<body>

<script language=JavaScript1.2 src="{$SkinDir}/body_menu.js"></script> 

</body>

At this point I need to explain that some of the links above may not exist in your store so you will need to edit them to suite your needs. You may need to remove '/store' and replace it with '/xcart', '/shop' or remove it altogether if X-Cart is in the root directory. The various Help links I used may also not exist so this is where you're on you own. A very simple way of finding out existing links is to place your mouse over one of the links on your page and see the URL displayed on the bottom left corner of your screen.

Save the file.

Now create a new file called xcart/skin1/body_menu.js and insert the following code:

Code:





//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar

var display_url=0



var ie5=document.all&&document.getElementById

var ns6=document.getElementById&&!document.all

if (ie5||ns6)

var menuobj=document.getElementById("ie5menu")



function showmenuie5(e){

//Find out how close the mouse is to the corner of the window

var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX

var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY



//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<menuobj.offsetWidth)

//move the horizontal position of the menu to the left by it's width

menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth

else

//position the horizontal position of the menu where the mouse was clicked

menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX



//same concept with the vertical position

if (bottomedge<menuobj.offsetHeight)

menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight

else

menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY



menuobj.style.visibility="visible"

return false

}



function hidemenuie5(e){

menuobj.style.visibility="hidden"

}



function highlightie5(e){

var firingobj=ie5? event.srcElement : e.target

if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){

if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node

firingobj.style.backgroundColor="highlight"

firingobj.style.color="white"

if (display_url==1)

window.status=event.srcElement.url

}

}



function lowlightie5(e){

var firingobj=ie5? event.srcElement : e.target

if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){

if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node

firingobj.style.backgroundColor=""

firingobj.style.color="black"

window.status=''

}

}



function jumptoie5(e){

var firingobj=ie5? event.srcElement : e.target

if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){

if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode

if (firingobj.getAttribute("target"))

window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))

else

window.location=firingobj.getAttribute("url")

}

}



if (ie5||ns6){

menuobj.style.display=''

document.oncontextmenu=showmenuie5

document.onclick=hidemenuie5

}

Save the file.

Finally, you now need to add the following line (somewhere near the top) to the xtcart/skin1/customer/home.tpl

Code:

{ include file="body_menu.tpl" }

Ok, that's it! You're done. Hope you like it.

That's a very good concept. Thanks for sharing...

weird, I am using 4.0.9. I have managed to get the menu to come up after much fiddling, but none of the menu highlights like a link hence I cannot click on any of them :S

Any help appreciated.

anyone get this to work? if so got a link for viewing?

thanks

QVS, yes i got it to work on 4.0.18, the above code had some errors :(

You can see the finished product at http://www.shisha.co.uk/shopcart/home.php and just right click on the page

I made it a little more simple, only 2 bits of code needed.
Make sure you update your /shopcart/skin1/skin1.css as per instruction above.

Then make a /shopcart/skin1/body_menu.tpl file

Code:

<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>

<div class="menuitems" url="{$xcart}/shopcart/help.php">Help</div> 

<div class="menuitems" url="{$xcart}/shopcart/help.php?section=about">About Us</div> 

<div class="menuitems" url="{$xcart}/shopcart/help.php?section=contactus&mode=update">Contact Us</div> 

<div class="menuitems" url="{$xcart}/shopcart/help.php?section=FAQ">FAQ</div> 

<div class="menuitems" url="{$xcart}/shopcart/help.php?section=business">Privacy Statement</div> 

<div class="menuitems" url="{$xcart}/shopcart/help.php?section=conditions">Terms & Conditions</div>

<hr>

<div class="menuitems" url="{$xcart}/shopcart/help.php?section=Password_Recovery">Forgot Password</div>

</div>

{literal}

<script language="JavaScript1.2">



//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar

var display_url=0



var ie5=document.all&&document.getElementById

var ns6=document.getElementById&&!document.all

if (ie5||ns6)

var menuobj=document.getElementById("ie5menu")



function showmenuie5(e){

//Find out how close the mouse is to the corner of the window

var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX

var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY



//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<menuobj.offsetWidth)

//move the horizontal position of the menu to the left by it's width

menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth

else

//position the horizontal position of the menu where the mouse was clicked

menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX



//same concept with the vertical position

if (bottomedge<menuobj.offsetHeight)

menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight

else

menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY



menuobj.style.visibility="visible"

return false

}



function hidemenuie5(e){

menuobj.style.visibility="hidden"

}



function highlightie5(e){

var firingobj=ie5? event.srcElement : e.target

if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){

if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node

firingobj.style.backgroundColor="highlight"

firingobj.style.color="white"

if (display_url==1)

window.status=event.srcElement.url

}

}



function lowlightie5(e){

var firingobj=ie5? event.srcElement : e.target

if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){

if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node

firingobj.style.backgroundColor=""

firingobj.style.color="black"

window.status=''

}

}



function jumptoie5(e){

var firingobj=ie5? event.srcElement : e.target

if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){

if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode

if (firingobj.getAttribute("target"))

window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))

else

window.location=firingobj.getAttribute("url")

}

}



if (ie5||ns6){

menuobj.style.display=''

document.oncontextmenu=showmenuie5

document.onclick=hidemenuie5

}



</script>

{/literal}

After that just place the { include file="body_menu.tpl" } in your /shopcart/skin1/customer/home.tpl file

This is where i placed my code:

Code:

<BODY leftmargin="0" topmargin="0" rightmargin="0" bottomargin="0" marginwidth="0" marginheight="0" {if $js_enabled}onLoad="{if $body_onload ne ''}{$body_onload};{/if}MM_preloadImages({section loop=8 name='cat_images'}'{$ImagesDir}/custom/cat_item{$smarty.section.cat_images.iteration}','{$ImagesDir}/custom/cat_itemon{$smarty.section.cat_images.iteration}'{if not $smarty.section.cat_images.last},{/if}{/section});"{/if}>



{assign var="fancy_left" value=9}

{assign var="fancy_width" value=140}

{assign var="fancy_ie_background_color" value="D9E9F5"}

{ include file="rectangle_top.tpl" }

{ include file="head.tpl" }

{if $active_modules.SnS_connector}

{include file="modules/SnS_connector/header.tpl"}

{/if}

{ include file="body_menu.tpl" } 



<TABLE border="0" width="100%" cellpadding="0" cellspacing="0" align="center">

<TR>

<TD width="6"></TD>

<TD width="165" valign="top">

{if $categories ne "" and ($active_modules.Fancy_Categories ne "" or $config.General.root_categories eq "Y" or $subcategories ne "")}

{ include file="customer/categories.tpl" }

{/if}

Hey ShishaPipeUK

I noticed that your styling is a little different than what is posted here on that right-click box - would you mind sharing the css or whatever you did to make it a little different?

Thanks!

I dont remember changing anything, but here is my complete skin1.css

Code:

BODY,P,DIV,TH,TD,P,INPUT,SELECT,TEXTAREA {

        FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif; 

        COLOR: #000000; FONT-SIZE: 10px;

}

A:link {

        COLOR: #003834; TEXT-DECORATION: none;

}

A:visited {

        COLOR: #003834; TEXT-DECORATION: none;

}

A:hover {

        COLOR: #6460AD; TEXT-DECORATION: underline;

}

A:active  {

        COLOR: #003834; TEXT-DECORATION: none;

}

H1 {

        FONT-SIZE: 15px;

}

H2 {

        FONT-SIZE: 13px;

}

H3 {

        FONT-SIZE: 12px;

}

HR {

        COLOR: #DDDDDD; HEIGHT: 1px;

}

BODY { 

        MARGIN-TOP: 0 px; MARGIN-BOTTOM: 0 px; MARGIN-LEFT: 0 px; MARGIN-RIGHT: 0 px; 

        BACKGROUND-COLOR: #DFF5F2;

}

.HeadBox {

        BACKGROUND-COLOR: #DFF5F2;

}

.HeadText {

        FONT-SIZE: 12px; FONT-WEIGHT: bold;

}

.HeadLine {

        BACKGROUND-COLOR: #83E1D3;

}

.VertMenuBox {

        BACKGROUND-COLOR: #83E1D3;

}

.VertMenuBorder {

        BACKGROUND-COLOR: #FFFFFF;

}

.VertMenuTitle {

        BACKGROUND-COLOR: #005D57; COLOR: #ffffff; FONT-WEIGHT: bold; FONT-SIZE: 10px;

}

.VertMenuItems {

        COLOR: #000000; TEXT-DECORATION: none;

}

.VertMenuItems:link {

        COLOR: #003834; TEXT-DECORATION: none;

}

.VertMenuItems:visited {

        COLOR: #003834; TEXT-DECORATION: none;

}

.VertMenuItems:hover {

        COLOR: #6460AD; TEXT-DECORATION: underline;

}

.VertMenuItems:active  {

        COLOR: #003834; TEXT-DECORATION: none;

}

.VertMenuHr {

        COLOR: #999999;

}

.CategoriesList {

        FONT-SIZE: 12px;

}

.DialogBox {

        BACKGROUND-COLOR: #ffffff;

}

.DialogBorder {

        BACKGROUND-COLOR: #8C7DCF;

}

.DialogTitle {

        COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 11px;

}

.NumberOfArticles {

        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 10px;

}

.TopLabel {

        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;

}

.Text {

        COLOR: #000000;

}

.AdminSmallMessage {

        COLOR: #FF3300;

}

.AdminTitle {

        COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;

}

.Line {

        BACKGROUND-COLOR: #6460AD;

}

.ProductTitle {

        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;

}

.ProductDetailsTitle {

        COLOR: #6460AD; FONT-WEIGHT: bold; FONT-SIZE: 12px;

}

.ProductDetails {

        COLOR: #000000;

}

.ProductPriceTitle {

        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;

}

.ProductPriceConverting {

        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;

}

.ProductPrice {

        COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;

}

.ProductPriceSmall {

        COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 10px;

}

.MarketPrice {

        FONT-SIZE: 11px;

}

.ItemsList {

        COLOR: #003834; FONT-WEIGHT: bold; FONT-SIZE: 10px;

}

.NavigationPath {

        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 10px;

}

.FormButton {

        COLOR: #003834; FONT-WEIGHT: bold; FONT-SIZE: 10px;

}

.Button {

       FONT-FAMILY: Arial;

           BACKGROUND: URL(images/butbg.gif);

       BACKGROUND-COLOR: #8C7DCF;

       COLOR: #FFFFFF; FONT-WEIGHT: bold; 

       FONT-SIZE: 11px;

       TEXT-DECORATION: none;

}

.CustomerMessage {

        COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 10px;

}

.ErrorMessage {

        COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 10px;

}

.Star {

        COLOR: #FF0000;

}

.HighLight {

                BACKGROUND-COLOR: #FFFFCC;

}

.SaveMoneyLabel {

        COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 10px;

}

.TableHead {

    BACKGROUND-COLOR: #83E1D3;

}

.SmallNote:link {

        COLOR: #8C7DCF; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;

}

.SmallNote:visited {

        COLOR: #8C7DCF; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;

}

.SmallNote:hover {

        COLOR: #8C7DCF; TEXT-DECORATION: underline; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif; 

}

.SmallNote:active {

        COLOR: #8C7DCF; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;

}

.Bottom {

        BACKGROUND-COLOR: #005D57; COLOR: #FFFFFF;

}

.Tab {

        BACKGROUND-COLOR: #83E1D3;

        FONT-WEIGHT: bold;

    TEXT-TRANSFORM: uppercase;

}

.CatMenuItemOff 

{

    BACKGROUND-COLOR: transparent;        /* like "VertMenuBox" */

    BORDER-RIGHT: 1px solid #FF8600;/* like "VertMenuBorder" */

    BORDER-TOP: none;                                /* like "VertMenuBox" */

    BORDER-LEFT: none;                                /* like "VertMenuBox" */

    BORDER-BOTTOM: none;                        /* like "VertMenuBox" */

    MARGIN-BOTTOM: 1px;

    MARGIN-TOP: 1px;

    MARGIN-LEFT: 1px; 

    MARGIN-RIGHT: 2px;

    CURSOR: pointer;

}

.CatMenuItemOffExp

{

    BACKGROUND-COLOR: transparent;        /* like "VertMenuBox" */

    BORDER-RIGHT: 1px solid #FF8600;/* like "VertMenuBorder" */

    BORDER-TOP: none;                                /* like "VertMenuBorder" */

    BORDER-LEFT: none;                                /* like "VertMenuBorder" */

    BORDER-BOTTOM: none;                        /* like "VertMenuBorder" */

    MARGIN-BOTTOM: 1px;

        MARGIN-TOP: 1px;

        MARGIN-LEFT: 1px;

    MARGIN-RIGHT: 2px;  

    CURSOR: pointer;

}

.CatMenuItemOn 

{

    BACKGROUND-COLOR: #005D57;              /* like "VertMenuTitle" */

    BORDER-RIGHT: #005D57 1px solid;        /* like "VertMenuTitle" */

    BORDER-TOP: #005D57 1px solid;          /* like "VertMenuTitle" */

    BORDER-LEFT: #005D57 1px solid;         /* like "VertMenuTitle" */

    BORDER-BOTTOM: #005D57 1px solid;       /* like "VertMenuTitle" */

    MARGIN-LEFT: 1px; 

    MARGIN-RIGHT: 2px; 

    CURSOR: pointer;

}

.CatSubMenu

{

    BACKGROUND-COLOR: #83E1D3;              /* like "VertMenuBox" */

    BORDER-RIGHT: #FFFFFF 1px solid;        /* like "VertMenuBorder" */

    BORDER-TOP: #FFFFFF 1px solid;          /* like "VertMenuBorder" */

    BORDER-LEFT: #FFFFFF 1px solid;         /* like "VertMenuBorder" */

    BORDER-BOTTOM: #FFFFFF 1px solid;       /* like "VertMenuBorder" */

    MARGIN-LEFT: 1px; 

    MARGIN-RIGHT: 2px; 

}

.CatMenuItem

{

    FONT-SIZE: 12px;

    FONT-FAMILY: Arial; 

    CURSOR: pointer;

}

.CatMenuItem:link

{

    COLOR: #000000;                         /* like "VertMenuItems" */

}

.CatMenuItem:visited

{

    COLOR: #000000;                         /* like "VertMenuItems" */

}

.CatMenuItem:hover

{

    COLOR: #FFFFFF;                         /* like "VertMenuTitle" */

}

.CatMenuItem:active

{

    COLOR: #000000;                         /* like "VertMenuItems" */

}

.NavDialogTitle {

    font-size: 11px;

    font-weight: bold;

    color: #330000;

}   

.NavDialogBorder {

    background-color: #83E1D3;

}

.NavDialogBox {

    background-color: #DFF5F2;

}

.SubHeader2 {

    COLOR: #666666;

    font-size: 11px;

    FONT-WEIGHT: bold;

}

.SubHeader2Line {

    BACKGROUND-COLOR: #CCCCCC;

}

.PopupHelpLink {

    FONT-SIZE: 9px;

    COLOR: #330000;

    TEXT-DECORATION: none;

}

.HightLightRow {

        BACKGROUND-COLOR: #B0B0B0;

        font-weight: bold;

}

.HightLightEqualRow {

        BACKGROUND-COLOR: #ffe8af;

}

.VertMenuSubTitle {

        BACKGROUND-COLOR: #005D57;

}

table.chart { background-color: black; color: black; } 

table.chart tr.chart_light td {background-color: #FFFBDC; padding: 1px 3px;} 

table.chart tr.chart_dark td {background-color: #CCCC99; padding: 1px 3px;} 

ul.boxlist li 

{ 

    

   list-style-position: outside; 

   list-style-type: disc; 

   margin-left: -2em;       

   padding-left: 1px; 

    

} 

table.chart { background-color: black; color: black; } 

table.chart tr.chart_light td {background-color: #FFFBDC; padding: 1px 3px;} 

table.chart tr.chart_dark td {background-color: #CCCC99; padding: 1px 3px;} 



.skin0 {

position:absolute;

width:165px;

border:2px solid black;

background-color:menu;

font-family:Verdana;

line-height:20px;

cursor:default;

font-size:14px;

z-index:100;

visibility:hidden;

}



.menuitems {

padding-left:10px;

padding-right:10px;

}

Ok - another question - related to your trust logo thingy...

I have the trust logo as well, but when I try to put it where I think it should go, I get two different results.

When I use Firefox, everything works just fine. If I use IE, anywhere I click on the screen pops up the trust logo box. I have my

var cot_loc0=(window.location.protocol == "ht.... script before the </head tag

But the ...ript language="JavaScript">COT("ht... stuff I think is the problem - do you also have it your home.tpl file as well?