Sometimes you just need a quick image swapping script so here is one you can use quickly. You could always do this right inline too but why? I want to use the same script over and over and want to be able to place the images anywhere so this is how I do this.
- Create your HTML image statement and give it an ID tag.
<img src="images/image1.gif" ID="TestID"/>
- Now add a script section and create a name for your new function. ImageID will be the images ID tag and ImageFileName will be the file name and path that will be passed to the function.
<script type="text/javascript">
function changeImage(ImageID,ImageFileName)
{
}
</script>
- Now we need to add the function which is very easy, it's one line long and the script will look like this.
<script type="text/javascript">
function changeImage(ImageID,ImageFileName)
{
document.getElementById(ImageID).src = ImageFileName;
}
</script>
- Now we just need to add the calls in the image tag. It will look something like this.
<img src="images/image1.gif" id= "TestID"
onmouseover="changeImage('TestID','images/image2.gif')"
onmouseout="changeImage('TestID','images/image1.gif')" />
That's it. It's a pretty basic function but now you can re-use this all the time for image swapping.
Posted in Javascript by .
Google Analyticator is a plugin for WordPress that connects your site to your Google Analytics account. Now that Google has also set it up so that you can track a users page speed on your analytics, you should track how fast your connection is for your visitors.
- Log into your WordPress administration site.
- Scroll down to your Settings section and select Google Analytics.
- Scroll down the page to the Additional Tracking Code: (before tracking initialization) section.
- Add the following code inside of this section:
_gaq.push(['_trackPageLoadTime']);
- Scroll to the bottom of the page and select the Save button and you are done.
You should now see the added line in your source and you should see the tracking show up in your Google Analytics within a day.
For some products, or all of your products, on a Virtuemart product, you may want to add a comments or notes section to your products in a Textarea. There is no easy way to do this but I have come up with one way to do it. Use the following steps to use this method:
- Open your addtocart_custom_attribute.tpl.php file with your favorite editor. This file is found in your components/virtuemart/themes/templates/product_details/includes/ folder. You may want to make a copy of your original file so that you can easily return to the standard file if you do not want to use this change.
- Look for the lines that look similar to the following: (this is from line 15 in Virtuemart version 1.1.8).
<input type="text" class="inputboxattrib" id="<?php echo $attribute['titlevar'] ?>_field" size="30" name="<?php echo $attribute['titlevar'].$attribute['product_id'] ?>" />
- Make changes similar to the following:
<textarea type="text" class="inputboxattrib" rows="5" id="<?php echo $attribute['titlevar'] ?>_field" cols="45" name="<?php echo $attribute['titlevar'].$attribute['product_id'] ?>" style="margin-left: 5px; margin-bottom: 10px;"> </textarea>
- In Virtuemart, in the product, select the Product Status tab, add your name for the Comment or Note or whatever you want to call it in the Custom Attributes List.
There really isn't much difference to make this work. Now if you want to make this work with multiple types of inputs you will need to make more adjustments to this file with some if or select statements. Let's say you want to have a custom attribute called Burgers that will be a checkbox and every other type of custom attribute is going to be a textarea, you would do something that looks similar to the following:
- We are going to add the if statement after the following lines:
foreach( $attribute as $attr => $val )
{
// Using this we make all the variables available in the template
// translated example: $this->set( 'product_name', $product_name );
$this->set( $attr, $val );
}
- Add lines similar to the following:
if ($attribute[title]=="Burger")
{
?>
<div style="width: 400px; margin: 0 auto; padding-left :5px;">
<div style='float: left; width: 140px; text-align: right; padding-right: 5px; vertical-align: middle;'><?php echo $attribute['title'] ?>: </div>
<div style='float: left; width: 40px;'>
<input type="checkbox" class="inputboxattrib" id="<?php echo $attribute['titlevar'] ?>_field" size="30" name="<?php echo $attribute['titlevar'].$attribute['product_id'] ?>" />
</div>
<?php
}
else
{
?> <div style='float: left; width: 140px; text-align: right; padding-right: 5px;'><?php echo $attribute['title'] ?>: </div>
<div style='float: right; width: 40px;'>
<input type="checkbox" class="inputboxattrib" id="<?php echo $attribute['titlevar'] ?>_field" size="30" name="<?php echo $attribute['titlevar'].$attribute['product_id'] ?>" />
</div>
<?php
}
- In Virtuemart, in the product, select the Product Status tab, add your name for the Comment or Note or whatever you want to call it in the Custom Attributes List and also add your Burger. Your Custom Attributes List would look something similar to the following:
Burger; Notes; Comments;
In this example Notes and Comments will be Textarea's and Burger will be a checkbox.
Posted in Joomla by .