Javascript

Hi, I am Sumaiya Javed PHP Web developer and this is my personal blog or collection of tutorials, scripts, tips and tricks used or created personally by me in my five years of web development. And yeh ... click here to view my online portfolio, for any freelancing projects.

The jquery mouseenter and mouseleave methods were not working for me.

Then after an hour of googling I found out that if I used bind() it works.

$(document).ready(function() {
 $(‘.menu li’).bind(‘mouseover’, function() {
        $(‘ul’, this).show();
    });
 $(‘.menu li’).bind(‘mouseleave’, function() {
        $(‘ul’, this).hide();
    });
});

I am working on Drupal 6, jquery 1.2. It could be drupal or jquery version issue too.

I wanted to have a single level menu where the second and third level are shown of the taxonomy menu. Like barnesandnoble.com.

I had taxonomy_menu module to create a menu from my taxonomy. Then I had used block_menu module to extract the desired level from my multi level taxonomy menu.

Then I used the jquery below to show hide the menu.

$(document).ready(function() {
 $(‘.menu li’).bind(‘mouseover’, function() {
        $(‘ul’, this).show();
    });
 $(‘.menu li’).bind(‘mouseleave’, function() {
        $(‘ul’, this).hide();
    });
});
Note: I have used mouseover and mouseleave.
Used the below css to theme the menu

.block-menu_block ul {
height: 29px;
list-style: none outside none;
margin: 0;
padding: 0;
}
.block-menu_block ul li ul {
list-style: none outside none;
margin: 0 0 0 -1px;
padding: 0;
}
.block-menu_block li a {
display: block;
}
.block-menu_block ul li ul {
width: 314px;
display: none;
}
.block-menu_block ul li {
float: left;
position: relative;
width: 150px;
}

And this is the html like

<div class=”block-menu_block”>

<ul class=”menu”>

<li></li>

<li>

<ul class=”menu”>

<li></li>

</ul>

</li>

</ul>

</div>

Note: I  am using drupal 6;

Use the debug version by clicking on the ‘debug bookmarklet’ on page https://getfirebug.com/firebuglite

Then click on F12 and use internet explorer’s developer tools normally and you will notice that the firebug has been integrated in it, making all the difference needed. It took me sometime to figure that firebug was working, and boy was it frustrating … hopefully someone will come across this post before poking here and there, save your time and blood.

I had three jcarousel view blocks on my home page . On page load I wanted to hide two and only show one. Then by clicking on navigational links I wanted to show the other two while hiding the first one.

To achieve that I was using display: none, but that was screwing up the jcarousel. The solution is to use zindex

document.getElementById(‘block-views-bestsellers_newhome-block_1′).style.display=’none’

correct

document.getElementById(‘block-views-bestsellers_newhome-block_1′).style.zIndex=’1′

In other words I was loading a list of items in x category I wanted to show the items in y and z category by clicking on specific links. This could be done by ajax but I wanted to load all items and use javascript hide and show property to achieve it.

To update cart contents in checkout I have this module http://www.ubercart.org/project/updatecartcheckout

But I made the following changes to make it work

function cart_in_checkout_ajax_submit()

- print_r($qty);

function ajax_cart_in_checkout_validate_form_addtocart($items) {

-form_set_error(“items][$k][qty", $error);
+form_set_error("items][$k][qty", $error['msg']);

 

To put the an image background on an image (probably to give a fancy border) use imagecache module and imagecache canvas actions module

Then create a preset with the following actions:
Scale and Crop – Set dimensions of the inner image
Define Canvas – Set the canvas with the final dimension of the image. Give margin in the “relative size” section
Underlay (Background) – Give the background image here, select option “background”

I have used uc_migs payment gateway with ubercart.

To skip review page you have to do the following:

open uc_migs.module rewrite function uc_migs_form_alter(&$form, &$form_state, $form_id)  as

/**
* Implementation of hook_form_alter().
*/
function uc_migs_form_alter(&$form, &$form_state, $form_id) {

if($form_id == ‘uc_cart_checkout_form’) {

$form['continue']['#value'] = variable_get(‘uc_checkout_submit_button’, t(‘Place order’));
// Add our submit handler.
$form['#submit'][] = ‘uc_migs_form_submit’;

}

}

rewrite function uc_migs_form_submit($form, &$form_state)  as

function uc_migs_form_submit($form, &$form_state) {
if ($_SESSION['do_review'] && $form_state['redirect'] == ‘cart/checkout/review’) {
// Clear the previous redirect because we’re going to override it anyway.
unset($form_state['redirect']);

// Cause the review form to be loaded because some modules may
// do some of their processing here.
uc_cart_checkout_review();

$order = uc_order_load($_SESSION['cart_order']);

$vpc_Amount = $order->order_total * 100;
$vpc_OrderInfo = $order->order_id;
$vpc_MerchTxnRef = $vpc_OrderInfo . ‘_’ . time();

$vpc_AccessCode  = variable_get(‘uc_migs_access_code’, ”);
$vpc_Locale      = variable_get(‘uc_migs_locale’, ‘en’);
$vpc_Merchant    = variable_get(‘uc_migs_mid’, ”);
$vpc_ReturnURL   = url(‘cart/migs/complete/’. uc_cart_get_id(), array(‘absolute’ => TRUE));
$vpc_Version     = variable_get(‘uc_migs_version’, ’1′);

$secure_secret = variable_get(‘uc_migs_secure_hash_secret’, ”);

$md5HashData = $secure_secret . $vpc_AccessCode . $vpc_Amount . ‘pay’ . $vpc_Locale . $vpc_MerchTxnRef . $vpc_Merchant . $vpc_OrderInfo . $vpc_ReturnURL . $vpc_Version;

// add the start of the vpcURL querystring parameters
$vpcURL = ‘https://migs.mastercard.com.au/vpcpay?’;

// urlencode overkill!
$vpcURL .= urlencode(‘vpc_AccessCode’) . ‘=’ . urlencode($vpc_AccessCode) .
‘&’ . urlencode(‘vpc_Amount’) . “=” . urlencode($vpc_Amount) .
‘&’ . urlencode(‘vpc_Command’) . “=” . urlencode(‘pay’) .
‘&’ . urlencode(‘vpc_Locale’) . “=” . urlencode($vpc_Locale) .
‘&’ . urlencode(‘vpc_MerchTxnRef’) . “=” . urlencode($vpc_MerchTxnRef) .
‘&’ . urlencode(‘vpc_Merchant’) . “=” . urlencode($vpc_Merchant) .
‘&’ . urlencode(‘vpc_OrderInfo’) . “=” . urlencode($vpc_OrderInfo) .
‘&’ . urlencode(‘vpc_ReturnURL’) . “=” . urlencode($vpc_ReturnURL) .
‘&’ . urlencode(‘vpc_Version’) . ‘=’ . urlencode($vpc_Version) .
‘&’ . urlencode(‘vpc_SecureHash’) . ‘=’ . strtoupper(md5($md5HashData));

// redirect to MIGS URL for payment
$form_state['redirect'] = $vpcURL;
} else  $form_state['redirect'] = ‘cart/checkout/review’;
}

When I transferred my drupal website on my client’s server the webform submissions were taking forever though they were fine on my test server.

My client was using a virtual SMTP on their mail server hence I had to use the IP address for SMTP authentication instead of the server name ie something like 198.132.34.23 instead of mail.mydomain.com

Hope that helps.

 

To solve this I opened the uc_ajax_cart.js (modules/uc_ajax_cart/js) and added  jQuery.blockUI.defaults.baseZ = 20000; to give the notification jquery block preference over any other div.

I had this issue here http://www.phpjavascript.com/drupal-ubercart-product-quick-look/

Its simple (but takes forever to figure out), just make a view and make the link of the image in the following way:

<a href=”node/1532/lightbox2″ rel=”lightframe”>View</a>

Then make a template file page-node-lightbox2.tpl and upload to your theme. Remove all the unwanted structures from this file, like sidebar, header etc. I got this info from http://drupal.org/node/252260 (thanks druplicate)

Note:  I have used the carousel effect with views. The lightbox does not work with jcarousel. The solution to that is here http://drupal.org/node/1079236

It is obvious but still specify that we need lightbox2 and views along with ubercart to enable this feature.

———

Ok I had a problem with the above approach. What was happening was that the ajax cart block on header was not getting updated when the product was being added through the lightbox. So what I did was that I used colorbox instead of lightbox. But now the system messages from the cart was not visible. To solve this I opened the uc_ajax_cart.js (modules/uc_ajax_cart/js) and added  jQuery.blockUI.defaults.baseZ = 20000; to give the notification jquery block preference over any other div.

Now how to add colorbox in the view. First display in view all the nodes of the product in div with id =  colorbox-nid (<div id=”colorbox-130″). And <a href=”?width=500&height=500&inline=true#colorbox-130″>Click here to view the node in the colorbox</a>