Joomla 3.4 Hosting UK - HostForLIFE.eu :: How to Add Javascript Code to Articles and Custom HTML Modules in Joomla

April 29, 2015 07:54 by author

By default, text editors in Joomla administrator interface work in visual (WYSIWYG) mode. WYSIWYG editors allow editing the HTML markup when you just need to publish some text and throw bolds and headers here and there, but when you try to publish a Javascript code through it, it will do its best to reformat it in the way that it shows up as a readable text, not as an actual working code. Moreover, there are security settings in Joomla that can prohibit using of Javascript codes within an HTML, in such cases the text editor just strips all <script> blocks.

Therefore, adding some custom Javascript in your article or custom HTML module, you might find out that it doesn't work in the front end or even disappears from HTML sources. Please follow these instructions in order to solve such problems:

Step 1: Set up general text filtering options for being able to use Javascript safely inside HTML source editor

Open Content → Article Manager in your Joomla administrator panel and click on the 'Options' button in top right corner
In the new popup window with Article Manager Options, open the 'Text Filters' tab and select 'No Filtering' under your user group (it is usually 'Super Users')
Click 'Save'

Step 2: Configure your text editor so that it allows you to have <script> elements in your code

The text editor that you use in Joomla may set its own security settings, which can affect code formatting. By default, the 'TinyMCE' is used in Joomla administrator interface. Here is how to configure it properly:

In your administrator panel, go to Extensions → Plug-in Manager, find the 'Editors - TinyMCE' line and click it
In TinyMCE options on right, find 'Prohibited elements' section and remove a mention of 'script' from it
Click 'Save'

There can be different filtering settings in different text editors plugins though. For example, if you are using JCE editor, you don't need to change any of its settings, it doesn't strip scripts by default. Please refer to the documentation of the plugin you use.

Step 3: Use the 'HTML' mode when pasting the javascript codes into HTML

No matter what editor you're using, when trying to insert a javascript code you need to switch the editor into the HTML mode first - look for HTML button or tab somewhere around the editor area. With that mode the codes that you enter into editor are to be treated as exactly the codes and should work. Joomla administrator interface sometimes also features a button reading 'Toggle editor' below the actual editor - you can switch from WYSIWYG into the code editor by hitting that button:

By using the above recomendations, you'll be able to make Javascript codes work inside your HTML sources in Joomla.

HostForLIFE.eu Joomla 3.4 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

Comments (0) | RSS comment feed

Comment RSS

AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Checkout Utility Methods on AngularJS?

April 28, 2015 08:15 by author

Peter

In this tutorial, I will tell you about how to checkout some utility methods that returns BOOLEAN values on call. In AngularJS you can find many utility method like isObject, isString, isDefined, etc to check the type of the input.

All these method has similar signature like isXxxxx(). In the following code, will show you some utility methods that are present inside the angular object.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <meta charset="utf-8">
<title> How to Checkout Utility Methods on AngularJS? </title>
</head>
<body ng-controller="MyController" ng-cloak>
<h3>angular.isArray : {{isArray}}</h3>
<h3>angular.isDate: {{isDate}}</h3>
<h3>angular.isDefined : {{isDefined}}</h3>
<h3>angular.isElement : {{isElement}}</h3>
<h3>angular.isFunction : {{isFunction}}</h3>
<h3>angular.isNumber : {{isNumber}}</h3>
<h3>angular.isObject : {{isObject}}</h3>
<h3>angular.isString : {{isString}}</h3>
<h3>angular.isUndefined : {{isUndefined}}</h3>

<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope",
function($scope) {
var fruitList = ["Apple", "Orange"];
$scope.isArray = angular.isArray(fruitList);
$scope.isDate = angular.isDate(new Date());
$scope.isDefined = angular.isDefined(fruitList);
$scope.isElement = angular.isElement("Hello");
$scope.isFunction = angular.isFunction(new Date().getFullYear);
$scope.isNumber = angular.isNumber(5);
$scope.isObject = angular.isObject({});
$scope.isString = angular.isString("Peter");
$scope.isUndefined = angular.isUndefined(null); } ]); </script>
</body>
</html>

And here is the output from the above code:

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.

Comments (0) | RSS comment feed

Comment RSS

AJAX with Free ASP.NET Hosting - HostForLIFE.eu :: How to Solve JQuery which Only Send Partial Data to AJAX Post

April 27, 2015 07:06 by author

Rebecca

JQuery is a great JavaScript framework that makes web developer life much easier. But like all framework, you need to learn its gotchas in order to work effectively with it.

Here is one of the gotchas. Jquery POST method lets you create Ajax HTTP POST request to the server. It is actually a shorthand to the JQuery Ajax method:
$.ajax({
type: "POST",url: "save.php",
data: "param1="+paramValue1
+"&param2=paramValue2",
complete: function(){ }, //manage the complete if needed
success: function(){}}//get some data back to the screen if needed
});

Today, I'm gonna tell you how to solve the problem when JQuery only send partial data to AJAX Post. Maybe you've found that when executing the AJAX call, only part of the data is passed to the server and the rest vanishes. You usually see that some or all of the parameters you tried to pass are missing or cut in the middle. It's because JQuery uses ‘&’ as a separator between the parameters. If you have a ‘&’ within your key or value parameters, then the JQuery AJAX request gets really messed up.

You can solve this problem by encoding the parameters, replace & with %26 which is the standard encoding for that character. There are 2 ways to encode the parameters:

Semi-Automatic

Use .replace(/&/g, “%26″) –

Here is a working example:
$.ajax({
type: "POST",url: "save.php",
data: "param1="+paramValue1.replace(/&/g, "%26")
+"&param2=paramValue2.replace(/&/g, "%26")",
complete: function(){ }, //manage the complete if needed
success: function(){}}//get some data back to the screen if needed
});

Fully Automatic

A more elegant way is to slightly change the way we call the meethod and let JQuery do that encoding for you –

Here is a working example:
$.ajax({
type: "POST",url: "save.php",
data: { "param1": paramValue1,
"param2": paramValue2 },
complete: function(){ }, //manage the complete if needed
success: function(){}//get some data back to the screen if needed
});

AJAX with Free ASP.NET Hosting
Try our AJAX with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.

Tags: european ajax hosting, free ajax hosting, best ajax hosting, recommended ajax hosting, russia ajax hosting, spain ajax hosting, united kingdom ajax hosting, belgium ajax hosting, italy ajax hosting, germany ajax hosting, netherlands ajax hosting, france ajax hosting, estonia ajax hosting, ukraine ajax hosting, turkey ajax hosting, denmark ajax hosting, slovenia ajax hosting, portugal ajax hosting, romania ajax hosting, poland ajax hosting, austria ajax hosting, greece ajax hosting, sweden ajax hosting, sweden ajax hosting, finland ajax hosting, norway ajax hosting, croatia ajax hosting, romania ajax hosting
Categories: AJAX Hosting
Actions: E-mail | Kick it! | Permalink | comment

Comments (0) | RSS comment feed

Comment RSS

Drupal CMS with Free ASP.NET Hosting - HostForLIFE.eu :: Fixing Drupal Fatal Error "Allowed memory size of A bytes exhausted (tried to allocate B bytes)"

April 24, 2015 07:30 by author

Rebecca

Sometimes when working with Drupal, you suddenly see this error:
Allowed memory size of A bytes exhausted (tried to allocate B bytes)
or
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 3669969 bytes) in ../public_html/includes/theme.inc on line 1987

How to handle this error? That error message tells you that Drupal needed more memory than PHP was allowed to give it. In this article, I will explain to you 3 methods to increase PHP memory size, pick one that you like:

1. Fix the error in Drupal 6/7 using php.ini file

You will probably see this error message when you install new modules/themes. By default, Drupal 6/7 allocates 64M (megabytes) of memory on your website and so, to fix this issue you need to increase memory limit to higher value (128MB is fine).

Here is the solution:

1. Connect to your Drupal web hosting using SSH/FTP connection

2. Check if there’s php.ini file in root folder of your hosting

3. If it’s existing, open the file with text editor (notepad) and add the value php_value memory_limit = "128M"

4. If there’s no php.ini file in root folder, then you need to create one. Use notepate, wordpad or whatever can edit and save text file as .ini file add the value php_value memory_limit = "128M"

5. Save the file if check the error’s gone

(Note: remember to save file with name: php.ini, not php.ini.txt)

2. Increase PHP memory using .httaccess

Edit the .htaccess file in the Drupal root directory. Look for the section:

Override PHP settings. More in sites/default/settings.php

But the following cannot be changed at runtime

Now add the following line:
php_value memory_limit 64M
This method will only work if PHP is running as an Apache module.

3. Using settings.php

If Drupal is already installed, you can edit sites/default/settings.php. This method will affect only the site using this file.
Locate the PHP settings section and add the following line at the end of that section:
ini_set('memory_limit', '64M');

That’s all for today, hope you will solve this issue immediately after reading this!

Drupal CMS with Free ASP.NET Hosting
Try our Drupal CMS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.

Tags: european drupal 7 hosting, best drupal 7 hosting uk, netherlands drupal 7 hosting, recommended drupal 7 hosting, drupal 7 hosting france, top italy drupal 7 hosting, high performance drupal 7 hosting, reliable drupal 7 hosting, good drupal 7 hosting russia, drupal 7 hosting spain, drupal 7 hosting greece, drupal 7 hosting belgium, drupal 7 hosting germany, drupal 7 hosting sweden, drupal 7 hosting usa, drupal 7 hosting kuwait, drupal 7 hosting uni emirates arab, drupal 7 hosting portugal, drupal 7 hosting india, drupal 7 hosting norway, drupal 7 hosting iran, drupal 7 hosting finlandia, drupal 7 hosting austria
Categories: Drupal Hosting
Actions: E-mail | Kick it! | Permalink | comment

Comments (0) | RSS comment feed

Comment RSS

Orchard CMS 1.8 with Free ASP.NET Hosting - HostForLIFE.eu :: Creating Custom Workflow Activity for Unpublished

April 20, 2015 06:28 by author

Rebecca

If you needed to tap into a list of activities of orchard, unpublished activity is one of the requirements. For your information, Orchard default Workflow activity list didn’t have a unpublished activity. Maybe you had built a module that added your own custom Workflow Activities, then you had successfully creating the activities and making them work. But there's a problem that you had no idea how to bind one of these with an event. Even if you copied the publish activity which is found in the default activity folder of Workflow module, the copied activity didn’t get bind to any event. So, in this post, I will tell you the simple way to create costum workflow activity for unpublished.

First thing, you have to find that Orchard.Workflows.Activitieshas a file ContentActivity. In this file there are other classes that inherits the ContentActivity class ContentCreatedActivity,ContentUpdatedActivity and ContentPublishedActivity. All these classes are activities that subscribe to ContentActivity that is an event activity. They subscribe to the Create, Update and Publish events of the Orchard core. If you look into Orchard.ContentManagement.Handlers.ContentHandler you’d see the list of default events provided by Orchard CMS core.

I was interested in the OnUnpublished event, so in this tutorial, I created a handler that would listen to that event. Here are the codes:

using System.Collections.Generic;
using Orchard.ContentManagement;
using Orchard.ContentManagement.Handlers;
using Orchard.Workflows.Services;
namespace MyModule.Handlers {
public class WorkflowContentHandler : ContentHandler {
public WorkflowContentHandler(IWorkflowManager workflowManager) {
OnUnpublished<ContentPart>(
(context, part) =>
workflowManager.TriggerEvent("ContentUnpublished",
context.ContentItem,
() => new Dictionary<string, object> { {"Content", context.ContentItem } }));
}
}
}

After which you create your custom workflow activity for Unpublished. This class inherits from ContentActivity like its siblings, so it can start workflow and would be an event.

using System;
using System.Collections.Generic;
using System.Linq;
using Orchard.Localization;
using Orchard.Workflows.Models;
using Orchard.Workflows.Services;
using Orchard.Workflows.Activities;
namespace MyModule.WorkFlow
{
public class ContentUnpublishedActivity : ContentActivity
{
public override string Name
{
get { return "ContentUnpublished"; }
}
public override LocalizedString Description
{
get { return T("Content is Unpublished."); }
}
}
}

That’s it. Once you’ve done this the new Content Unpublished activity would show up in the Workflow activity list. You can use it in conjunction to other Activities to execute your own workflow after any content has been unpublished.

Orchard CMS 1.8 with Free ASP.NET Hosting
Try our Orchard CMS 1.8 with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.

Comments (0) | RSS comment feed

Comment RSS

AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Show ngCloak usage with AngularJS?

April 17, 2015 07:42 by author

Peter

In this post, I will explain you about How to Show ngCloak usage with AngularJS. AngularJS gives ngCloak directive to control the glimmering issue when application is bootstrapping. AngularJS adds the ngCloak class to the component if the application is not bootstrapped and removes this class once the application is bootstrapped and prepared. Now, write the following code:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-resource.min.js"></script>
<meta charset="utf-8">
<title>AngularJS ngCloak Example</title>
<style> [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } </style>
</head>
<body ng-controller="MyController" ng-cloak>
<h3>ngCloak Example</h3>
<ol >
<li ng-repeat="item in myData"> {{item.title}} </li>
</ol>
</body>
<script> var myApp= angular.module("myApp",['ngResource']); myApp.controller("MyController", ["$scope", "$resource","$timeout", function($scope,$resource,$timeout){ $scope.myData =[]; var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published"); youtubeVideoService.get() .$promise.then(function(responseData) { angular.forEach(responseData.data.items, function(aSingleRow){ console.log(aSingleRow); $scope.myData.push({ "title":aSingleRow.title }); }); }); }]); </script>
</html>

I hope this tutorial helps you!

AngularJS with Free ASP.NET Hosting

Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.

Comments (0) | RSS comment feed

Comment RSS

Umbraco 7.2.2 with Free ASP.NET Hosting - HostForLIFE.eu :: Removing Orphaned or Missing Umbraco Nodes

April 15, 2015 12:28 by author

Rebecca

If you try copying nodes within the back office, you may encounter the error. You'll receive an error relating to a method called 'umbraco.dialogs.moveOrCopy.CheckPermissions'. And here is a little tip on how to remove missing or orphaned nodes within Umbraco.

To find any orphaned nodes and remove them, run the following script against your Umbraco database. Make sure you backup your database first. It's a little long winded but the script finds any nodes and dependancies that do not have a version, are not trashed and is of type content.

delete from cmsPropertyData where contentNodeId in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972')
delete from cmsDocument where nodeId in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972')
delete from cmsPreviewXml where nodeId in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972')
delete from cmsContentVersion where ContentId in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972')
delete from cmsContentXml where nodeId in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972')
delete from cmsContent where nodeId in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972')
delete from umbracoUser2NodePermission where nodeId in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972')
delete from umbracoNode where id in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972')

You may encounter a situation where some of your orphaned nodes have child nodes. You'll need to remove these as well. To identify and remove child nodes of orphaned children, use the following script before the script above. Make sure you backup your database.

delete from cmsPropertyData where contentNodeId in (select id from UmbracoNode where parentID in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972'))
delete from cmsDocument where nodeId in (select id from UmbracoNode where parentID in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972'))
delete from cmsPreviewXml where nodeId in (select id from UmbracoNode where parentID in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972'))
delete from cmsContentVersion where ContentId in (select id from UmbracoNode where parentID in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972'))
delete from cmsContentXml where nodeId in (select id from UmbracoNode where parentID in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972'))
delete from cmsContent where nodeId in (select id from UmbracoNode where parentID in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972'))
delete from umbracoUser2NodePermission where nodeId in (select id from UmbracoNode where parentID in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972'))
delete from umbracoNode where parentID in (select id from UmbracoNode where id not in (select nodeid from cmsContentXml) and id in (select nodeId from cmsDocument where published = 1) and trashed = 0 and nodeObjectType = 'C66BA18E-EAF3-4CFF-8A22-41B16D66A972')

Hope it works for you!

Umbraco 7.2.2 with Free ASP.NET Hosting

Try our Umbraco 7.2.2 with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.

Comments (0) | RSS comment feed

Comment RSS

SQL Server 2014 with Free ASP.NET Hosting - HostForLIFE.eu :: How to Create an Encrypted Backup in SQL Server 2014?

April 14, 2015 07:18 by author

Peter

Encryption for Backups could be a new feature introduced in SQL Server 2014 and therefore the advantages of this feature are:

Encrypting the database backups helps secure the data.
Encryption also can be used for databases that are encrypted encryption TDE.
Encryption is supported for backups done by SQL Server Managed Backup to Windows Azure, that provides extra security for off-site backups.
This feature supports multiple encoding algorithms as well as AES 128, AES 192, AES 256, and Triple DES

You'll be able to integrate encryption keys with Extended Key Management (EKM) providers. The following are pre-requisites for encrypting a backup:
Let’s Create a Database Master Key for the master database.
USE master;
GO
CREATE MASTER KEY ENCRYPTION BY PASSWORD = 'yourpassword@word123';
GO

And then Create a certificate or asymmetric Key to use for backup encryption and write the following code:
Use Master
GO
CREATE CERTIFICATE CertforBackupEncryption
   WITH SUBJECT = 'Certificate for Backup Encryption ';
GO

Then Backup the database with encryption:
BACKUP DATABASE [PeterSQL]
TO DISK = N'C:\Backup\PeterSQL.bak'
WITH
  INIT,
  COMPRESSION,
  ENCRYPTION
   (
   ALGORITHM = AES_256,
   SERVER CERTIFICATE = CertforBackupEncryption
   ),
  STATS = 10
GO

Restoring the encrypted backup:
SQL Server restore doesn't need any encryption parameters to be specified during restores. It will need that the certificate or the asymmetric key used to encrypt the backup file be out there on the instance that you simply are restoring to. The user account performing the restore should have read DEFINITION permissions on the certificate or key. If you're restoring the encrypted backup to a different instance, you must confirm that the certificate is offered on it instance.

SQL Server 2014 with Free ASP.NET Hosting

Try our SQL Server 2014 with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.

Tags: sql 2014 hosting. europe sql 2014 hosting, uk sql 2014 hosting, cheap europe sql 2014 hosting, best europe sql 2014 hosting, cheap uk sql 2014 hosting, best uk sql 2014 hosting, recommendation sql 2014 hosting, recommendation sql 2014 hosting europe, sql 2014 hosting uk, best mssql 2014 hosting uk, cheap mssql 2014 hosting uk, reliable mssql 2014 hosting uk, free mssql 2014 hosting uk, top mssql 2014 hosting uk, recommended mssql 2014 hosting uk
Categories:
Actions: E-mail | Kick it! | Permalink | comment

Comments (0) | RSS comment feed

Comment RSS

Joomla 3.4 Hosting France - HostForLIFE.eu :: Creating Lightbox for Images and Videos on Joomla Website

April 11, 2015 05:12 by author

Rebecca

In this tutorial, I will show you how to create a 'Lightbox' effect for your Joomla website using the plugin YOOeffects. Using a Lightbox is a great way to show off your images on your website, as a slideshow or for individual pictures. Videos can also be shown using the Lightbox javascript - both from your own website or streamed from another site (such as YouTube).

What is Lightbox?

Lightbox is a simple javascript that creates an effect that when a user clicks on the image, it pops up, is magnified using a smooth animation and is set on a darkened background. Lightbox is triggered by a 'rel' attribute in the HTML which is used in the <a> tag which surrounds the target image. The Lightbox script is great because it works on all browsers and eliminates the need for Flash animation. Flash although popular is notoriously bad for SEO as Google's bots struggle to read the data within the flash animation.

Here is an example of the lightbox:

Lightbox effect for Images

If the YOOEffects plugin has been successfully installed, it's time to see how to write the code to ensure the plugin works for your chosen images. The code looks a little daunting, but it is really quite simple once you break it down, especially if you are used to using HTML.

The following is an images is the Lopes Mendes beach, on Ihla Grande, Brazil. If you click on the image you will see the lightbox effect.

The code should be entered into the article that you are wanting to display the image in. It is key not to copy and paste this code as text into your article, but click on the 'HTML' editor within your chosen editor then paste it.

You will notice i have changed the title of the image for each part of the code. This is to show you that the 'Lopes Mendes Beach' is the description that appears when the lightbox is engaged, and Ihla Grande appears when you hover over the image in its present state. It can be a useful way of providing more information about your chosen image to your users.

The second part of the code determines the size of the thumbnail that is displayed to click on, be sure to keep the same proportions, to ensure the image is not distorted!

Lightbox Image Slideshow

Having slideshows of images is a clean, easy and convenient way to display images and this can be done using a Lightbox effect too.

The code you would insert to create a slideshow of images is the following:

title="Lightbox Slideshow"rel="lightbox[group];width=500;height=333">
Click here to see a lightbox slideshow.

title="butterfly photo"rel="lightbox[group];width=500;height=333">

title="waterfall photo"rel="lightbox[group];width=333;height=500">

The best way to construct a slideshow is to add the "rel=lightbox" attribute to your links first so that they open in lightbox. Once you have done this, you need to remove the names of the links so they become invisible. The final step is to add in [group] in the rel attribute. You can name this anything you want, but all of the links must have to same name, so they appear in the same slideshow. witYou can see how i have done this in the code above. You can add in as many images as you like, and you can do this with videos too, not just images. The code is very simple, but it can be easy to make mistakes, so check through your work carefully if it does not work first time!

Display Videos using Lightbox

The great thing about this plugin is that you can use the same script to show videos on your website. It is far easier for users to focus on a video if the rest of the screen is darkened, so this plugin can be used to great effect. Importantly, this plugin means that people can watch videos hosted on other sites within your own - so there is no reason for visitors to leave you site.

The code is very similar and is as follows:

<a href="http://www.youtube.com/v/jtK6qITij5k&hl=en&autoplay=1"
title="Open Source Content Management Systems"
rel="shadowbox;width=425;height=355">Joomla and Google's Summer of Code</a>

You can play any type of video file as long as your browser can, so this tool is very useful. The key is to ensure you have the linked to the video directly - make sure you are not just linking to the page, otherwise lightbox will not play the video.

HostForLIFE.eu Joomla 3.4 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

Comments (0) | RSS comment feed

Comment RSS

Angular.js Hosting Italy - HostForLIFE.eu :: AngularJS Directive for Email

April 7, 2015 11:52 by author

Peter

In this article, I will explain you about AngularJS directive for email. At the point when executing a Single Page Application utilizing WebAPI and AngularJS, you experience numerous uses of filters and directives to meet requirements specified by clients. The accompanying code tokenizes the info and presentations it in a different square inside a particular placeholder, in any case it checks the data for a substantial email address first and then the information token is not rehashed inside the same placeholder. And now, write the following code:

<body ng-app="tokenizer">
    <div ng-controller="tokenizerController">
        <tag-input taglist='email' placeholder="Emails"></tag-input>
    </div>
</body>

    var sample = angular.module('tokenizer', ['ngRoute']);
    sample.controller('tokenizerController', function ($scope) {
      });
             sample.directive('tagInput', function ()
    {
           return
            {
               restrict: 'E',
               scope:
                {
                  inputTags: '=taglist',
                   autocomplete: '=autocomplete'
                  },
                   link: function ($scope, element, attrs)
                  {
                   $scope.defaultWidth = 200;
                   $scope.tagText = '';
                   $scope.placeholder = attrs.placeholder;
                   $scope.tagArray = function ()
                      {
                       if ($scope.inputTags === #ff0000)
                       {
                           return [];
                       }
                       return $scope.inputTags.split(',').filter(function (tag)
                       {
                           return tag !== "";
                       });
                   };
                   $scope.addTag = function ()
                       {
                       var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
                       var tagArray;
                       if ($scope.tagText.length === 0) {
                           return;
                        }
                       if (!EMAIL_REGEXP.test($scope.tagText))
                       {
                           return $scope.tagText = "";
                       }
                       tagArray = $scope.tagArray();
                       if (!(tagArray.indexOf($scope.tagText) >= 0))
                       {
                           tagArray.push($scope.tagText);
                           $scope.inputTags = tagArray.join(',');
                       }
                       return $scope.tagText = "";
                   };
                   $scope.deleteTag = function (key)
                       {
                       var tagArray;
                       tagArray = $scope.tagArray();
                       if (tagArray.length > 0 && $scope.tagText.length === 0 && key === #ff0000)
                      {
                           tagArray.pop();
                       }
                       else
                         {
                           if (key !== undefined)
                           {
                               tagArray.splice(key, 1);
                           }
                       }
                       return $scope.inputTags = tagArray.join(',');
                   };
                   $scope.$watch('tagText', function (newVal, oldVal)
                    {
                       var tempEl;
                       if (!(newVal === oldVal && newVal === undefined))
                          {
                           tempEl = $("<span>" + newVal + "</span>").appendTo("body");
                           $scope.inputWidth = tempEl.width() + 5;
                           if ($scope.inputWidth < $scope.defaultWidth)
                           {
                               $scope.inputWidth = $scope.defaultWidth;
                           }
                           return tempEl.remove();
                       }
                   });
                   element.bind("keydown", function (e) {
                       var key;
                       key = e.which;
                       if (key === 9 || key === 13) {
                           e.preventDefault();
                       }
                       if (key === 8) {
                           return $scope.$apply('deleteTag()');
                       }
                   });
                   return element.bind("keyup", function (e) {
                       var key;
                       key = e.which;
                       if (key === 9 || key === 13 || key === 188) {
                           e.preventDefault();
                           return $scope.$apply('addTag()');
                       }
                   });
               },
               template: "<div class='tag-input-ctn'><div class='input-tag' data-ng-repeat=\"tag in tagArray()\">{{tag}}<div class='delete-tag' data-ng-click='deleteTag($index)'>×</div></div><input type='text' data-ng-style='{width: inputWidth}' data-ng-model='tagText' placeholder='{{placeholder}}'/></div>"
           };
       });

HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

Comments (0) | RSS comment feed

Comment RSS

Full Trust European Hosting

Joomla 3.4 Hosting UK - HostForLIFE.eu :: How to Add Javascript Code to Articles and Custom HTML Modules in Joomla

Step 1: Set up general text filtering options for being able to use Javascript safely inside HTML source editor

Step 2: Configure your text editor so that it allows you to have <script> elements in your code

Step 3: Use the 'HTML' mode when pasting the javascript codes into HTML

AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Checkout Utility Methods on AngularJS?

AngularJS with Free ASP.NET Hosting

AJAX with Free ASP.NET Hosting - HostForLIFE.eu :: How to Solve JQuery which Only Send Partial Data to AJAX Post

Semi-Automatic

Fully Automatic

Drupal CMS with Free ASP.NET Hosting - HostForLIFE.eu :: Fixing Drupal Fatal Error "Allowed memory size of A bytes exhausted (tried to allocate B bytes)"

1. Fix the error in Drupal 6/7 using php.ini file

2. Increase PHP memory using .httaccess

3. Using settings.php

Orchard CMS 1.8 with Free ASP.NET Hosting - HostForLIFE.eu :: Creating Custom Workflow Activity for Unpublished

AngularJS with Free ASP.NET Hosting - HostForLIFE.eu :: How to Show ngCloak usage with AngularJS?

AngularJS with Free ASP.NET Hosting

Umbraco 7.2.2 with Free ASP.NET Hosting - HostForLIFE.eu :: Removing Orphaned or Missing Umbraco Nodes

Umbraco 7.2.2 with Free ASP.NET Hosting

SQL Server 2014 with Free ASP.NET Hosting - HostForLIFE.eu :: How to Create an Encrypted Backup in SQL Server 2014?

Joomla 3.4 Hosting France - HostForLIFE.eu :: Creating Lightbox for Images and Videos on Joomla Website

What is Lightbox?

Lightbox effect for Images

Lightbox Image Slideshow

Display Videos using Lightbox

Angular.js Hosting Italy - HostForLIFE.eu :: AngularJS Directive for Email

About HostForLIFE.eu

Other Important BLOGs

Featured on

Month List

Step 1: Set up general text filtering options for being able to use Javascript safely inside HTML source editor

Step 2: Configure your text editor so that it allows you to have <script> elements in your code

Step 3: Use the 'HTML' mode when pasting the javascript codes into HTML

AngularJS with Free ASP.NET Hosting

Semi-Automatic

Fully Automatic

1. Fix the error in Drupal 6/7 using php.ini file

2. Increase PHP memory using .httaccess

3. Using settings.php

AngularJS with Free ASP.NET Hosting

Umbraco 7.2.2 with Free ASP.NET Hosting

What is Lightbox?

Lightbox effect for Images

Lightbox Image Slideshow

Display Videos using Lightbox

About HostForLIFE.eu

Other Important BLOGs

Featured on

Month List

Tag cloud