Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Css layer issue

Posted on 2012-08-26
10
Medium Priority
?
1,166 Views
Last Modified: 2012-08-27
I have a really simple problem that I can't figure out how to solve.
I have implemented a dropdown mini cart in the Header area of my Magento store.

The mini cart is activated when a user hovers over the "My Cart" link at the top which then displays the dropdown mini cart etc...

The problem is when a user is logged in the "My Cart" link is moved out of its position and  the "logout" link is put in its place. This means that the mini cart layer gets activated whenever the logout button is hovered instead.

I need to know how to either move the mini cart layer to always remain on top of the "My Cart" link or to assign the layer to the link itself?

I hope this all makes sense...
0
Comment
Question by:rafique12
  • 5
  • 3
  • 2
10 Comments
 
LVL 4

Expert Comment

by:TechHelpr08210
ID: 38334580
I understand... you will want to specify the new condition in the javascript that tells your minicart when to appear.

Without being able to see the page code, I decided to write a statement to check for the words My Cart as described in your orginal question.

// Enter the value of the ID field shown in the source of the element where the My Cart text should appear.
var myButton = "mybutton";

//Get either the My Cart or the Logout element by its id.
var myButtonElm = document.getElementByID(myButton).innerHTML;

//Check for whether the My Cart element is shown on your page.
if ( myButtonElm == 'My Cart') {
    //Run the current minicart method from inside here.
}
0
 

Author Comment

by:rafique12
ID: 38334627
Thanks for you response: I'm including the jQuery code that is controlling the dropdown minicart for you refernce.

If you also need to see the PHTML code please let me know.

/**
 * Author: damodar.bashyal
 * Date: 5/10/11
 * Time: 12:26 PM
 */
function slideUp()
{
	jQuery('#topCartContent:visible').slideUp(1000);
	jQuery('.mini-cart-layer').addClass('mini-cart-layer-up');
	jQuery('.mini-cart-layer').removeClass('mini-cart-layer-down');
}

function slideDown()
{
	jQuery('#topCartContent:hidden').slideDown(1000);
	/*startTimer()*/ /* optional*/
	jQuery('.mini-cart-layer').addClass('mini-cart-layer-down');
	jQuery('.mini-cart-layer').removeClass('mini-cart-layer-up');
}

function toggleTopCart()
{
	if(jQuery('#topCartContent').is(':visible'))
	{
		slideUp();
	} else {
		slideDown();
	}
}

var timer;
function startTimer()
{
	timer = setTimeout(function(){
		slideUp();
	}, 5000);
}

jQuery(document).ready(function(){
	jQuery('.mini-cart-layer .top-cart .block-title #cartHeader').mouseover(function(){
		toggleTopCart();
	});

	jQuery('.mini-cart-layer .top-cart .block-title #cartHeader').mouseover(function(){
		clearTimeout(timer);
	}).mouseout(function(){
		startTimer();
	});

	jQuery("#topCartContent").mouseover(function() {
		clearTimeout(timer);
	}).mouseout(function(){
		startTimer();
	});
});

Open in new window

0
 
LVL 4

Expert Comment

by:TechHelpr08210
ID: 38334749
Thanks for the coding but, I will also need to see the  PHP header file that outputs the My Cart and logout Links.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:rafique12
ID: 38334772
Thanks I really appreciate the help...!

<div class="mini-cart-layer">
	<?php if ($this->getIsNeedToDisplaySideBar()):?>
		<div class="top-cart">
			<?php $_cartQty = $this->getSummaryCount() ?>
			<?php if ($_cartQty > 0): ?>
				<?php $_myCart = $this->__('Shopping Cart (%s items)', $_cartQty) ?>
			<?php else: ?>
				<?php $_myCart = $this->__('Shopping Cart (0 item)') ?>
			<?php endif ?>
			
			<?php if ($this->getIsLinkMode() || !$this->getIsNeedToDisplaySideBar()):?>
				<div class="block-title no-items">
					<ul class="links cart-link">
						<li ><a href="<?php echo $this->getUrl('checkout/cart'); ?>" rel="nofollow"><?php echo $_myCart ?></a></li>
					</ul>
				</div>
			<?php else:?>
				<div class="block-title<?php if(!$_cartQty) { echo (' no-items'); } ?>">
					<span id="cartHeader"><?php echo $_myCart ?></span>
				</div>
				<div id="topCartContent" class="block-content" style="display:none">
					<div class="inner-wrapper"><?php /*extra div to smooth slideUp and slideDown*/ ?>
						<?php $_items = $this->getRecentItems() ?>
						<?php if(count($_items)): ?>
							<p class="block-subtitle">
								<span ="toggleTopCart();" class="close-btn"><?php echo $this->__('Close'); ?></span>
								<?php echo $this->__('Recently added item(s)') ?>
							</p>
							<ol id="mini-cart" class="mini-products-list">
								<?php foreach($_items as $_item): ?>
									<?php echo $this->getItemHtml($_item) ?>
								<?php endforeach; ?>
							</ol>
							<script type="text/javascript">decorateList('mini-cart', 'none-recursive')</script>
						<?php else: ?>
							<p class="block-subtitle">
								<span onclick="toggleTopCart()" class="close-btn"><?php echo $this->__('Close'); ?></span>
									<?php echo $this->__('Recently added item(s)') ?>
							</p>
							<p class="cart-empty">
								<?php echo $this->__('You have no items in your shopping cart.') ?>
							</p>
						<?php endif ?>
						<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
							<div class="actions">
								<a href="<?php echo $this->getUrl('checkout/cart'); ?>" rel="nofollow"><?php echo $this->__('Go to Shopping Cart') ?></a>
								<button class="button-grn" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')"><span><span><?php echo $this->__('Checkout') ?></span></span></button>
							</div>
						<?php endif ?>
					</div>
				</div>
			<?php endif;?>
		</div>
	<?php endif;?>
</div>

Open in new window

0
 
LVL 4

Expert Comment

by:TechHelpr08210
ID: 38334829
oh, I dont think you understood me...

You gave me the file that outputs the shopping cart. That wont help.

Rather I need the PHP header template file itself used on your magneto site or even better, send me 2 separate source code outputs taken from a single sample magneto page showing me the header and the mini-cart for users logged in or not.

1) The source needs to be from a non-users page without the Log Out link in the header.
2) The source needs to be include the Log Out link included in the output.
0
 

Author Comment

by:rafique12
ID: 38334878
Arrr.. Okay!
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home page</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="INDEX,FOLLOW" />
<link rel="icon" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/menu2.css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/favicon.ico" type="image/x-icon" />
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
    var BLANK_URL = 'http://localhost:8888/thanedirect/js/blank.html';
    var BLANK_IMG = 'http://localhost:8888/thanedirect/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/bootstrap.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/jqtransform.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/menu2.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/widgets.css" media="all" />
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/varien/js.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/varien/form.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/varien/menu.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/mage/translate.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/cf.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/respond.min.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/select-menu.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/jquery.flexslider.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->

<script type="text/javascript">
//<![CDATA[
optionalZipCountries = ["HK","IE","MO","PA"];
//]]>
</script>
<script type="text/javascript">//<![CDATA[
        var Translator = new Translate([]);
        //]]></script></head>
<body class=" cms-index-index cms-home">
<div class="wrapper">
        <noscript>
        <div class="global-site-notice noscript">
            <div class="notice-inner">
                <p>
                    <strong>JavaScript seems to be disabled in your browser.</strong><br />
                    You must have JavaScript enabled in your browser to utilize the functionality of this website.                </p>
            </div>
        </div>
    </noscript>
    <div class="page layout-grid">
        <div class="header-container">
    <div class="header">
		<div class="quick-access">
			<div class="form-language show-on-phones">
    <label for="select-language">Your Language:</label>
    <select id="select-language" title="Your Language" onchange="window.location.href=this.value">
                    <option value="http://localhost:8888/thanedirect/index.php/?___store=default&amp;___from_store=default" selected="selected">English</option>
                    <option value="http://localhost:8888/thanedirect/index.php/?___store=french&amp;___from_store=default">French</option>
                    <option value="http://localhost:8888/thanedirect/index.php/?___store=german&amp;___from_store=default">German</option>
        </select>
</div>
			    <div class="top-currency show-on-phones">
		<label for="currency">Your Currency:</label>
        <select id="currency" title="Select Your Currency" onchange="setLocation(this.value)">
                    <option value="http://localhost:8888/thanedirect/index.php/directory/currency/switch/currency/GBP/uenc/aHR0cDovL2xvY2FsaG9zdDo4ODg4L3RoYW5lZGlyZWN0L2luZGV4LnBocC8,/" selected="selected">
                British Pound Sterling - GBP            </option>
                    <option value="http://localhost:8888/thanedirect/index.php/directory/currency/switch/currency/EUR/uenc/aHR0cDovL2xvY2FsaG9zdDo4ODg4L3RoYW5lZGlyZWN0L2luZGV4LnBocC8,/">
                Euro - EUR            </option>
                    <option value="http://localhost:8888/thanedirect/index.php/directory/currency/switch/currency/USD/uenc/aHR0cDovL2xvY2FsaG9zdDo4ODg4L3RoYW5lZGlyZWN0L2luZGV4LnBocC8,/">
                US Dollar - USD            </option>
                </select>
    </div>
            Welcome to Thane Direct UK            <div class="mini-cart-layer">
			<div class="top-cart">
																
							<div class="block-title no-items">
					<span id="cartHeader">Shopping Cart (0 item)</span>
				</div>
				<div id="topCartContent" class="block-content" style="display:none">
					<div class="inner-wrapper">																			<p class="block-subtitle">
								<span onclick="toggleTopCart()" class="close-btn">Close</span>
									Recently added item(s)							</p>
							<p class="cart-empty">
								You have no items in your shopping cart.							</p>
																	</div>
				</div>
					</div>
	</div>			<ul class="links">
                        <li class="first" ><a href="http://localhost:8888/thanedirect/index.php/customer/account/" title="My Account" >My Account</a></li>
                                <li ><a href="http://localhost:8888/thanedirect/index.php/wishlist/" title="My Wishlist" >My Wishlist</a></li>
                                <li class=" last" ><a href="http://localhost:8888/thanedirect/index.php/checkout/cart/" title="My Cart" class="top-link-cart">My Cart</a></li>
            </ul>
		</div>

Open in new window

<!-- The "Log in" link is called "My account" --->

////****Taken from Magento header****/////

 <!---Logout link --->
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Account</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="INDEX,FOLLOW" />
<link rel="icon" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/menu2.css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/favicon.ico" type="image/x-icon" />
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
    var BLANK_URL = 'http://localhost:8888/thanedirect/js/blank.html';
    var BLANK_IMG = 'http://localhost:8888/thanedirect/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/bootstrap.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/jqtransform.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/menu2.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/thanedirect/skin/frontend/default/respond/css/widgets.css" media="all" />
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/varien/js.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/varien/form.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/varien/menu.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/mage/translate.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/varien/weee.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/cf.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/respond.min.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/default/respond/js/select-menu.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="http://localhost:8888/thanedirect/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://localhost:8888/thanedirect/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->

<script type="text/javascript">
//<![CDATA[
optionalZipCountries = ["HK","IE","MO","PA"];
//]]>
</script>
<script type="text/javascript">//<![CDATA[
        var Translator = new Translate([]);
        //]]></script></head>
<body class=" customer-account-index">
<div class="wrapper">
        <noscript>
        <div class="global-site-notice noscript">
            <div class="notice-inner">
                <p>
                    <strong>JavaScript seems to be disabled in your browser.</strong><br />
                    You must have JavaScript enabled in your browser to utilize the functionality of this website.                </p>
            </div>
        </div>
    </noscript>
    <div class="page layout-grid">
        <div class="header-container">
    <div class="header">
		<div class="quick-access">
			<div class="form-language show-on-phones">
    <label for="select-language">Your Language:</label>
    <select id="select-language" title="Your Language" onchange="window.location.href=this.value">
                    <option value="http://localhost:8888/thanedirect/index.php/customer/account/?___store=default&amp;___from_store=default" selected="selected">English</option>
                    <option value="http://localhost:8888/thanedirect/index.php/customer/account/?___store=french&amp;___from_store=default">French</option>
                    <option value="http://localhost:8888/thanedirect/index.php/customer/account/?___store=german&amp;___from_store=default">German</option>
        </select>
</div>
			    <div class="top-currency show-on-phones">
		<label for="currency">Your Currency:</label>
        <select id="currency" title="Select Your Currency" onchange="setLocation(this.value)">
                    <option value="http://localhost:8888/thanedirect/index.php/directory/currency/switch/currency/GBP/uenc/aHR0cDovL2xvY2FsaG9zdDo4ODg4L3RoYW5lZGlyZWN0L2luZGV4LnBocC9jdXN0b21lci9hY2NvdW50Lw,,/" selected="selected">
                British Pound Sterling - GBP            </option>
                    <option value="http://localhost:8888/thanedirect/index.php/directory/currency/switch/currency/EUR/uenc/aHR0cDovL2xvY2FsaG9zdDo4ODg4L3RoYW5lZGlyZWN0L2luZGV4LnBocC9jdXN0b21lci9hY2NvdW50Lw,,/">
                Euro - EUR            </option>
                    <option value="http://localhost:8888/thanedirect/index.php/directory/currency/switch/currency/USD/uenc/aHR0cDovL2xvY2FsaG9zdDo4ODg4L3RoYW5lZGlyZWN0L2luZGV4LnBocC9jdXN0b21lci9hY2NvdW50Lw,,/">
                US Dollar - USD            </option>
                </select>
    </div>
            Welcome, Danel Rafique!            <div class="mini-cart-layer">
			<div class="top-cart">
																
							<div class="block-title no-items">
					<span id="cartHeader">Shopping Cart (0 item)</span>
				</div>
				<div id="topCartContent" class="block-content" style="display:none">
					<div class="inner-wrapper">																			<p class="block-subtitle">
								<span onclick="toggleTopCart()" class="close-btn">Close</span>
									Recently added item(s)							</p>
							<p class="cart-empty">
								You have no items in your shopping cart.							</p>
																	</div>
				</div>
					</div>
	</div>			<ul class="links">
                        <li class="first" ><a href="http://localhost:8888/thanedirect/index.php/customer/account/" title="My Account" >My Account</a></li>
                                <li ><a href="http://localhost:8888/thanedirect/index.php/wishlist/" title="My Wishlist" >My Wishlist</a></li>
                                <li ><a href="http://localhost:8888/thanedirect/index.php/checkout/cart/" title="My Cart" class="top-link-cart">My Cart</a></li>
                                <li class=" last" ><a href="http://localhost:8888/thanedirect/index.php/customer/account/logout/" title="Log Out" >Log Out</a></li>

Open in new window

0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 38336056
You say in your opening post that the cart shows when you hover over the My Cart link, but your jQuery is set up to show the cart when you hover over the heading: Shopping Cart (0 item)

This jQuery:

jQuery('.mini-cart-layer .top-cart .block-title #cartHeader')

selects this:

<span id="cartHeader">Shopping Cart (0 item)</span>

If you want to select this:

<a href="http://localhost:8888/thanedirect/index.php/checkout/cart/" title="My Cart" class="top-link-cart">My Cart</a>

Then you need this:

jQuery('.top-link-cart')

The fact that you say it works before a customer logs in indicates that it only looks like you hover of the My Cart link, when in actual fact you are hovering over the Heading. Maybe a CSS position issue.
0
 

Author Comment

by:rafique12
ID: 38336253
Okay, I will implement this and let you know the result. I'm very new to jQuery!!
Thanks again...
0
 

Author Closing Comment

by:rafique12
ID: 38336686
Thankyou so much, I made all the changes that you suggested and now the drop-down cart is working perfect!

I am hugely grateful for your help... :-D
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38336956
Glad to help :)
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question