What does this JavaScript do? Trying to edit a EKMPowershop template

Hi,

I’m very new to EKM PowerShop and I have absolutely no knowledge of JavaScript (and can mostly muddle by with HTML & CSS)

I am looking into getting the code from one template with a menu over the top, and insert in into a different template that does not have one.

Now, I’m wanting to know what this code I have taken from the template actually does, because no menu appeared. I could have put it in the wrong place of course, but I thought I’d check if I have the right bit first.

It could be entirely in CSS and I’ve just got it completely wrong…

These are the parts I pulled (as they were the pieces that had the word navigation in them.
I can post the whole template HTML if I have got it completely wrong…

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">

var $j = jQuery;



$j(function(){
$j('#navigation>ul li:has(ul)').addClass('dropable').bind('mouseover', function(){
$j(this).find('ul').slideDown();
$j(this).addClass('hovering');
}).bind('mouseleave', function(){
$j(this).find('ul').stop(true, true).hide();
$j(this).removeClass('hovering');
});
});



function MM_jumpMenu(targ,selObj,restore){//v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}



function sameHeight(c, scope){
if (scope){
$j(scope).each(function(){
var set = $j(this).find(c);
sameHeight(set);
});
}
else {
var h = 0;
$j(c).each(function(){
var th = $j(this).height()
h = (th > h)? th : h;
});
$j(c).height(h);
}
}



// CENTERED IMAGE SCRIPT
function centreImg(c){
$j(c).each(function(){
var imgHeight = $j(this).find('img').height();
var boxHeight = $j(this).height();
var padTop = Math.floor((boxHeight - imgHeight) / 2);
$j(this).find('img').css('marginTop', padTop);
});
}



window.doSameHeight = function(){
sameHeight('.product-image', '.product-row');
sameHeight('.product-name', '.product-row');
sameHeight('.product-desc', '.product-row');
sameHeight('.product-price', '.product-row');
/*sameHeight('.product-cart', '.product-row');*/
sameHeight('.product-image', '.category-row');
sameHeight('.product-name', '.category-row');
centreImg('.category-row .product-image');
centreImg('.product-row .product-image');
centreImg('.wrapper .logo');
}



$j(window).bind('load', function(){
window.doSameHeight();
});

</script>

Or this bit has navigation listed as well… but isn’t JavaScript

  /*NAVIGATION*/
.main-menu {clear: both; background-color:[ekm:colour_5][/ekm:colour_5];}
#navigation {width: 100%;}
#navigation ul {list-style: none; margin: 0px; padding: 0px;}
#navigation li {float: left;}
#navigation li a {padding: 10px; color: [ekm:colour_6][/ekm:colour_6]; font-family: "Open Sans", sans-serif; font-size: 16px; text-decoration: none; display: block; margin: 0;}
#navigation li:first-child a {padding-left: 10px;}
#navigation li a:hover, #navigation li:hover {color:[ekm:colour_8][/ekm:colour_8]; background-color: [ekm:colour_7][/ekm:colour_7]; text-decoration: none;}
#navigation li:hover {border: none;}
#navigation li:hover > a {color: [ekm:colour_8][/ekm:colour_8]; display: block; background-color: [ekm:colour_7][/ekm:colour_7] }
#navigation li ul {position: absolute; display: none; width: 200px; z-index: 5000; margin: 0 0 0 0; padding: 0; background-color:[ekm:colour_7][/ekm:colour_7];}
#navigation li ul li {float: none; font-size: 18px; padding: 0;}
#navigation li ul li:hover {padding: 0;}
#navigation li ul li a {color: [ekm:colour_8][/ekm:colour_8]; font-size: 13px; padding: 8px 10px;}
#navigation li ul li a:hover {background: [ekm:colour_5][/ekm:colour_5]; color: [ekm:colour_6][/ekm:colour_6]; border: none;}

It seems to vertically centre the product and category areas, so that they’re all the same height.

1 Like

ah, well that explains why it didn’t do anything!

Here is the full template code if someone could help identify what section is for a menu!

http://pastie.org/10108991

I see no JavaScript there at all that deals with a menu. Were you expecting any?

1 Like

Yeah, I would be expecting it in the main template section.
They said that most of their menu’s are styled using JavaScript, but it may be all CSS instead.

Or could be on a different template page!

If I was looking for it in another template screen and it was JavaScript, how would I spot that it would be for a menu across the top of the page?

If there is anything, it would attach some kind of event handler on to the menu. For example:

$('.page-menu').on('click', function (evt) {
    ...
});

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.