Remove instance of CKEDITOR

I was implementing CKEditor with jQuery so that I can load data dynamically and allow the user to edit using CKEditor. I quickly ran into the issue of the editor not showing up after the first display.
The problem was there of the instance of CKEDITOR.
before submitting the ajax form the instance should be destroyed to make changes effect.
I resolved it using 3 lines of code.

if(CKEDITOR.instances['editor'])

                {

                    CKEDITOR.instances['editor'].destroy();

                }

 

How to Select / Deselect All Checkboxes using jQuery

If you are newbie developer and looking for a quick jQuery snippet that selects and deselects multiple checkboxes by clicking “Select All” checkbox (exactly like in ymail), here’s one that might be useful for your HTML form. I've used this one in various occasions and it has proved to be very consistent every time.

As you can see in the picture below, we have multiple checkboxes, and we want toggle the select state of checkboxes when we click “Select All” box.

Make Entire Div Clickable

$(".myDiv").click(function(){     window.location=$(this).find("a").attr("href"); 
     return false;
});

Looks for a link inside div with class of "myBox". Redirects to that links value when anywhere in div is clicked.

Reference HTML:

<div class="myDiv">
     Some elements or text.
    <a href="your link">link</a>
</div>

How to Install Magento Manually

---

Magento Installation Tutorial

---

Follow these steps to install Magento manually:

• Step 1: Download the Magento installation package
• Step 2: Upload the Magento files to your server
• Step 3: Create a MySQL Database for Magento to use
• Step 4: Go through the Magento installation process

Step 1:First you have to download the latest installation package from the official Magento website.

Step 2:Upload the installation package on your hosting account through your cPanel ->File Manager or using an FTP client such as FILEZILLA or other ftp tools.

In case you want the Magento installation to be primary for your domain (i.e. to run from http://example.com), you need to extract the content of the installation package in the public_html folder. On the other hand, if you want it to be in a subfolder like http://example.com/magento/ you need to extract the content topublic_html/magento/.

Step 3:Create a MySQL database and assign a user to it through cPanel -> MySQL Databases. Remember the database details.

Step 3:Go through the Magento installation process

In our example we will install Magento in the public_html/magento folder. Once the package is uploaded and extracted and you have a MySQL database, navigate to http://example.com/magento:

Click on the check box next to "I agree to the above terms and conditions" and click on the Continue button.

Now, choose the preferred Time Zone, Locale and Currency and press the Continue button.

Next, enter the database details: Database Name, User Name and User Password. You can leave the other options intact. Make sure that you place a check on the "Skip Base URL validation before

next step" option. Then, click the Continue button to proceed.

At this point you should enter the personal information and the admin login details which you want to use. You can leave the Encryption Key field empty and the script will generate one for you. Once more, click the Continue button.

Finally, Write down your encryption key; it will be used by Magento to encrypt passwords, credit cards and other confidential information.

Your Magento installation was successfully completed. Now you can navigate to its Frontend or Backend.

This post is written by Kapil Kumar.

Jquery hide and show element

Jquery hide and show element

jQuery - Events Handling

We have the ability to create dynamic web pages by using events. Events are actions that can be detected by your Web Application.

Following are the examples events:

• A mouse click
• A web page loading
• Taking mouse over an element
• Submitting an HTML form
• A keystroke on your keyboard
• etc.

When these events are triggered you can then use a custom function to do pretty much whatever you want with the event. These custom functions call Event Handlers.

Binding event handlers:

Using the jQuery Event Model, we can establish event handlers on DOM elements with the bind()method as follows:

$('div').bind('click', function( event ){ alert('Hi there!'); });

This code will cause the division element to respond to the click event; when a user clicks inside this division thereafter, the alert will be shown. 

The full syntax of the bind() command is as follows:

selector.bind( eventType[, eventData], handler)

jQuery Slide Effect

The Slide effect can be used with show/hide/toggle. 

Here is the simple syntax to use this effect:

selector.hide|show|toggle( "slide", {arguments}, speed );

Parameters:

Here is the description of all the arguments:

• direction: The direction of the effect. Can be "left", "right", "up", "down". Default is left.
• distance: The distance of the effect. Is set to either the height or width of the element depending on the direction option.
• mode: The mode of the effect. Can be "show" or "hide". Default is show.

Example:

Following is a simple example a simple showing the usage of this effect:

<html> <head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/jquery/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#hide").click(function(){ $(".target").hide( "slide", { direction: "down" }, 2000 ); }); $("#show").click(function(){ $(".target").show( "slide", {direction: "up" }, 2000 ); }); }); </script> <style> p { background-color:#bca; width:200px; border:1px solid green; } div{ width:100px; height:100px; background:red; } </style> </head> <body> <p>Click on any of the buttons</p> <button id="hide"> Hide </button> <button id="show"> Show</button> <div class="target"> </div> </body> </html>

How to Get mouse position using jquery

Get mouse cursor x and y axis

This script will display the x and y value – the coordinate of the mouse pointer.

$().mousemove(function(e){

    //display the x and y axis values inside the P element

    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);

});

<p></p> 

how to Disable right-click




Disable right-click contextual menu

There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:

$(document).ready(function(){

    $(document).bind("contextmenu",function(e){

        return false;

    });

});

Most common Magento problems

How to configure Magento to work with a new domain

There are two things you should do in order to configure Magento to work with a new domain:

• Edit the Magento database

Go to your cPanel > phpMyAdmin. Select your Magento database from the  left menu, find the table called core_config_data and click on it. Click the Browse tab and edit the first two fields:

web/unsecure/base_urlweb/secure/base_url

by clicking the pen icon in front of each of them. Replace your old domain name with your new one and click the Go button to save the change.

• Clear the Magento cache.

The Magento cache folder is located in your Magento installation directory > /var/cache. To clear the cache, simply delete the folder. 

Many Magento issues can be fixed just by deleting the cache.

How to reset Magento Admin Password

To change your Magento admin password, go to your cPanel > phpMyAdmin, select your Magento database, click the SQL tab and paste this query:

UPDATE admin_user SET password=CONCAT(MD5('sGnewpass'), ':sG') WHERE username='AdminUsername';

Note: You have to change newpass in the MD5('sGnewpass') with your new password, and change *AdminUsername* to your Magento admin username.

Execute the query by clicking the Go button and your password will be changed.

How to enable Search Engine Friendly URLs in Magento

To enable Search Engine Friendly URLs in Magento, you have to log in to the Magento administration area and click on the Configuration button. Under the System navigation menu, switch to Web page from the sub-navigation panel on the left.

When the page loads, you will see blue lines which represent closed options tablets. Click on the Search Engines Optimization tab and turn on the Use Web Server Rewrites (mark as Yes). Click on the Save Config button and your Magento SEF URLs will be enabled.

How to speed up Magento

Many Magento issues are caused by slow performance. The recommended way to speed up Magento's performance is to enable its Compilation function.  The performance increase is between 25%-50% on page loads.

You can enable Magento Compilation from your Magento admin panel > System > Tools > Compilation.

How to redirect Magento to open through www

For SEO and usability purposes you may want to redirect your visitors to open your site only through www (http://www.yourdomain.com).

To do this in Magento, you should open the .htaccess file in the folder where your Magento is installed. In it locate the RewriteEngine on line and right after it add the following lines:

RewriteCond %{HTTP_HOST} ^yourdomain.com$ [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [R=301,L]

Once you do this, save the .htaccess file and log in to the Magento admin area > System > Configuration menu and from the left panel click the Web button.

Unfold the Unsecured set of options and change the Base URL option from http://yourdomain.com to http://www.yourdomain.com.

Save the changes and your Magento will start working through www.yourdomain.com only! 

How to disable the Compare products functionality

You can disable the Compare products functionality in Magento by following these steps:

• Edit app/code/core/Mage/Catalog/Helper/Product/Compare.php and change the following code: 

public function getAddUrl($product){return $this->_getUrl(’catalog/product_compare/add’, $this->_getUrlParams($product));}

to

public function getAddUrl($product){//return $this->_getUrl(’catalog/product_compare/add’, $this->_getUrlParams($product)); return false;}

• Edit ./app/design/frontend/base/default/layout/catalog.xml (if you are using a different Magento theme, enter its name instead of default) and change the following code:

<block type="catalog/product_compare_sidebar" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>

to

<!-- <block type="catalog/product_compare_sidebar" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/> -->

• Flush the Magento cache from your Magento admin area > System > Cache Management.

How to set up a blog in Magento

It is not difficult to set up a blog in Magento. However, note that this functionality is not included by default and you will have to use a custom extension to add it.

You can search Magento Connect for an extension that will fully suit your needs. One of the popular free extensions that you can use is the Magento Blog – Community Edition.

Once the extension is installed, you will have one additional section in the top menu of your Magento admin area called Blog. From there you can adjust the newly-installed Blog settings, add posts etc.

How to add a Contact Us form in Magento

Magento includes contact form functionality by default. A link to a contact form can usually be found in the footer of your Magento installation.

Of course, you can add a contact form on any page. All you need to do is:

• Log in to the administrator area.
• Go to CMS > Pages.
• Select the page you want to edit or create a new page.

Paste the following code using the HTML option of the WYSIWYG editor:

<!– CONTACT FORM CODE BEGIN–>{{block type='core/template' name='contactForm' template='contacts/form.phtml'}}<!– CONTACT FORM CODE END–>

Save the changes and the contact form will appear on the desired page.

"Access denied" issue

As a solution to the "Access denied" issue, you should log out from the Magento admin area and then log in again.

If the above does not help, you should reset the admin privileges. This can be done through the Magento admin area > System > Permissions > Roles > Administrators.

Click on the Role Resources option from the left menu and make sure that Resource Access is set to All.

Click on the Save Role button and the permissions will be reset.

How to set a custom group of users

You can add a new group from the Magento admin area > Customers > Customer Groups > Add New Customer Group.

Once a customer registers, you can change the group he/she belongs to from the Magento admin area > Customers > Manage Customers. Click on the Edit link next to the customer and change the group from the Account Information > Customer Group. Click Save Customer.

Set the discount from Promotions > Catalog Price Rules > Add New Rule.

In the Customer Groups select the customers' groups for which the promotion is valid. Enter the other details, set the rule actions and conditions.  Finally, click Save Rule.

The above ten tips will hopefully help you resolve at least some of the Magento issues you have faced or are about to face.