Archive for February, 2014

Brushless gimbal Red Epic Black Magic Cinima 3-axis GB85

Published by editor on February 19th, 2014 - in Uncategorized

The FULL KIT NOW available with Brushless Belt drive for DjI S800, S1000 & droid works Cinestar .

Cinestar

Cinestar Brushless gimbal Belt drive

http://mymobilemms.com/OFFTHEGRIDWATER.CA/index.php?main_page=product_info&cPath=20_22&products_id=659

 

Red Epic 3-Axis hand held Brushless Gimbal includes heavy lift landing gear for the brushless gimbal will fit Cinestar, hoverfly, carbon core, droid works multi copters no modification. For RED Epic, Red Scarlet,free shipping by DHL/FEDEX/UPS/EMS
RED Epic Gimbal :
We have finally developed a suitable RED EIPC Brushless Gimbal, the new RED Brushless Gimbal has three major features:
1, this gimbal has been upgraded from the rack structure , the active rotation axis is more robust and more reliable.
2, the new brushless motor torque is also upgraded, it can take 3-4kg cameras, which means it can afford almost all of the cameras and larger lens combinations.
3, new tube aluminum corner fittings to create integrated structure, which makes installation fast and simple.
Delivery time: 10 days after payment Electronics may be shipped separately by EMS du to battery’s
Included in the RED Epic gimbal frame kit:
Product Data:
Load Weight (Reference Value): 3.5-4kgs
Max Controlled Angle:
Pan axis: +-270°
Tilt axis: +-360°(adjustable)
Roll axis: +-55°
Net Weight without electronics: 1.98kgs Inner size: width 200mmheight 200mmlength 100-175mm(adjustable) Includes:
1 x RED Brushless gimbal Pro User
2 x iPower Gimbal Brushless Motor GBM8017-120T for red epic camera gimbal
2 x iPower Gimbal Brushless Motor GBM5108-120T
1 x lipo charger
1 x Gimbal Stand
1 x power switch battery indicator 11.1V PH-021
1 x BaseCam (AlexMos) SimpleBGC 3-axes stabilization kit
1 x Multi copter Yaw 3-axis motor cage, full LD Gear available by request heavy lift leg tips included for extra cost
3 x CW-021 500mm Servo Y Extension Wire Cable Futaba JR
1 x FS-TH9X FlySky 2.4G 9CH Radio Model Transmitter&Receiver For Airplane
2 x BY002-25C-11.1-2200 Maxforce 11.1V 2200Mah 25C Li-polymer Battery for Trex 450 etc
1 x CW-035 T-shape Adatpor/Dean Style Male W/10CM Wire 14AWG DNMLPT
1 x LC-E4 SKYRC e4 Balance Charger
1 x FV-RC701 Boscam RC701 All-in-one monitor + FPV wireless receivers + Diversity
1 x FV-TS5833 Boscam Thunderbolt2000 2000mW 5.8GHz Video AV Audio Video Transmitter Sender FPV

JQuery Tips & Trix

Published by editor on February 19th, 2014 - in Uncategorized

The jQuery Tips and Tricks

We will now discuss some tips and tricks to use jQuery to its fullest potential. In this section we will discuss a series of such tips.

Disabling Right Mouse Click
$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});

Determine Browser

Suppose you were to determine the browser type of the browser currently in use. You can use the following piece of code to do this:
$(document).ready(function() {
// If the browser type if Mozilla Firefox
if ($.browser.mozilla && $.browser.version >= “1.8” ){
// some code
}
// If the browser type is Opera
if( $.browser.opera)
{
// some code
}
// If the web browser type is Safari
if( $.browser.safari )
{
// some code
}
// If the web browser type is Chrome
if( $.browser.chrome)
{
// some code
}
// If the web browser type is Internet Explorer
if ($.browser.msie && $.browser.version <= 6 ) { // some code } //If the web browser type is Internet Explorer 6 and above if ($.browser.msie && $.browser.version > 6)
{
// some code
}
});

Detect Current Mouse Coordinates

Now, suppose you need to detect the current mouse coordinates in the web browser in use. To do this, you can write the following piece of code:
$(document).ready(function() {
$().mousemove(function(e)
{
$(‘# MouseCoordinates ‘).html(“X Axis Position = ” + e.pageX + ” and Y Axis Position = ” + e.pageY);
});


});

Check if an Element Exists

To check whether an element exists, you can write the following code:
if ($(“#someElement”).length)
{
//The DOM element exists
}
else
{
//The DOM element doesn’t exist
}

Check if an Element Is Visible

To check whether an element is visible, you can use the following piece of code:
if($(element).is(“:visible”) == “true”)
{
//The DOM element is visible
}
else
{
//The DOM element is invisible
}

Set a Timer

The following piece of code can be used to set a timer using jQuery:
$(document).ready(function()
{
window.setTimeout(function()
{
// some code
}, 500);
});

jQuery’s Chaining Feature

Chaining is a great feature in jQuery that allows you to chain method calls. Here is an example:
$(‘sampleElement’).removeClass(‘classToBeRemoved’).addClass(‘classToBeAdded’);

You can also use jQuery to store state information of DOM elements in your web page. It contains the data() method that you can use to store state information of the DOM elements in key/value pairs. Here is an example:
$(‘#someElement’).data(‘currentState’, ‘off’);

Lazy Loading

Lazy loading is a great feature in jQuery that ebales you to load only the content that is needed. To use this, you should incorporate the jquery.lazyload.js script file as shown below:



Next, you can use the lazyload() method as shown below:
$(“imageObject”).lazyload();

Preloading Images

Preloading images in a web page improves performance. This can particularly be useful while an animation is in progress- your web page need not wait for the image to be loaded. You can use jQuery to preload images with simple code. Here is an example:
jQuery.preloadImagesInWebPage = function() {
for(var ctr = 0; ctr“).attr(“src”, arguments[ctr]);
}
}
To use the above method, you can use the following piece of code:
$.preloadImages(“image1.gif”, “image2.gif”, “image3.gif”);
To check whether an image has been loaded, you can use the following piece of code:
$(‘#imageObject’).attr(‘src’, ‘image1.gif’).load(function() {
alert(‘The image has been loaded…’);
});

jQuery Cloning

jQuery supports cloning – you can use the clone() method to create a clone of any DOM element in your web page. Here is an example:

var cloneObject = $(‘#divObject’).clone();

The $(document).ready function is called during page render, i.e., while the objects are still being downloaded in the web browser. To reduce CPU utilization while a page is being loaded, you can bind your jQuery functions in the $(window).load event. Note that this event is fired after all objects have been downloaded successfully. This would improve the application performance to a considerable extent as the page load time would be minimized. Other common ways to improve jQuery performance are by compressing the scripts and limiting DOM manipulation as much as possible.

Consider the following piece of code that appends a DOM element inside a loop:
for (var ctr=0; ctr<=rows.length; ctr++) { $('#tableObject').append(' ‘+rows[ctr]+’

‘);
}
The above code can be replaced by a more efficient piece of code to minimize DOM manipulation and hence improve application performance as shown below:
var str = ”;
for (var x=0; x<=rows.length; x++) { str += ' ‘+rows[x]+’

‘;
}
$(‘#tableObject’).append(str);

References

Here’s a list of links to some useful references on jQuery:
•jQuery Documentation
•20 Tips and Tricks for jQuery Programmers
•Improve Your jQuery
•10 Ways to Increase Your jQuery Performance
•jQuery Performance Rules

Summary

jQuery is a fast, light-weight JavaScript library that is widely popular and has simplified the way you write JavaScript code these days. In this article we discussed some useful tips and tricks in jQuery.

Happy reading!

JQuery

Published by editor on February 8th, 2014 - in Uncategorized

The jQuery dev team has been releasing code updates frequently since the project began. JavaScript developers have never had an easier framework to code on frontend interfaces. For anybody just getting started in web development you can be certain to run into some jQuery code on the web.

I have put together a series of 14 helpful jQuery code snippets you may save and copy to use at your own discretion. These are merely blank templates you can edit to change variables and parameters matching your own script. I’m sure even experienced developers may find some of these snippets beneficial and shaving off time during code sessions.

1. Hover On/Off
$(“a”).hover(
function () {
// code on hover over
},
function () {
// code on away from hover
}
);
Source

The jQuery hover method is a quick solution for handling these events. You can determine whether the user is just hovering over your element, or if the user is just leaving the hover state. This allows for two custom functions where you can run two distinct sets of code.

2. Prevent Anchor Links from Loading
$(“a”).on(“click”, function(e){
e.preventDefault();
});
Source

When you create JavaScript applications there are plenty of times where you need a link or button to just do nothing. This is often for triggering some type of dynamic effect, such as a hidden menu or Ajax call. By using the event object during any click, we can manipulate the data sent back to the browser URL. In this scenario I am stopping the whole href from loading anything at all!

3. Scroll to Top
$(“a[href=’#top’]”).click(function() {
$(“html, body”).animate({ scrollTop: 0 }, “slow”);
return false;
});
Source

You have probably seen this functionality becoming popular on all the new social networking websites. I have definitely seen this technique appear on infinite-scrolling layouts such as Tumblr and Pinterest.

The code is very minimal but powerful in some layouts. You are offering a simple link or button display which behaves like a “back to home” link. By using the animate effect in jQuery users won’t notice the jump all at once, but instead over a brief period of milliseconds.

4. Ajax Template
$.ajax({
type: ‘POST’,
url: ‘backend.php’,
data: “q=”+myform.serialize(),
success: function(data){
// on success use return data here
},
error: function(xhr, type, exception) {
// if ajax fails display error alert
alert(“ajax error response type “+type);
}
});
Source

Passing form data via Ajax is one of the most common uses for jQuery. As a web developer myself I can’t think how many times I am using the ajax method in each project. The syntax can be awfully confusing to memorize, and checking the documentation gets old after a while. Consider copying this small template for usage in any future Ajax-powered webapps.

5. Animate Template
$(‘p’).animate({
left: ‘+=90px’,
top: ‘+=150px’,
opacity: 0.25
}, 900, ‘linear’, function() {
// function code on animation complete
});
Source

As we saw the animate method earlier, this is very powerful for creating dynamic movement on your page. CSS3 transitions are a whole lot easier in some circumstances. But with animate you can manipulate multiple objects or CSS properties all at once!

It’s a very powerful library to get into and start playing with. If you haven’t used any of the jQuery UI library I suggest spending an hour or two practicing with demo stuff. You can animate any object on the page into almost any position or updated style.

6. Toggle CSS Classes
$(‘nav a’).toggleClass(‘selected’);
Source

Adding and removing CSS classes on HTML elements is another fairly common action. This is one technique you may consider with selected menu items, highlighted rows, or active input elements. This newer method is simply quicker than using .addClass() and .removeClass() where you can put all the code into one function call.

7. Toggle Visibility
$(“a.register”).on(“click”, function(e){
$(“#signup”).fadeToggle(750, “linear”);
});
Source

Fading objects out of the document is very common with modern user interfaces. You can always have small popup boxes or notifications which need to display and then hide after a few seconds. Using the fadeToggle function you can quickly hide and display any objects in your DOM. Keep this code handy if you will ever need such functionality in a website interface.

8. Loading External Content
$(“#content”).load(“somefile.html”, function(response, status, xhr) {
// error handling
if(status == “error”) {
$(“#content”).html(“An error occured: ” + xhr.status + ” ” + xhr.statusText);
}
});
Source

Believe it or not you can actually pull external HTML code from a file right into your webpage. This doesn’t technically require an Ajax call, but instead we’re parsing the external files for whatever content they have. Afterwards this new content may be loaded into the DOM anywhere in the page.

9. Keystroke Events
$(‘input’).keydown(function(e) {
// variable e contains keystroke data
// only accessible with .keydown()
if(e.which == 11) {
e.preventDefault();
}
});

$(‘input’).keyup(function(event) {
// run other event codes here
});
Source

Dealing with user input is another grey area I have come across. The jQuery keydown and keyup event listeners are perfect for dealing with such experiences. Both of these methods are called at very different times during the keystroke event. So make sure you have the application planned out before deciding which one to use.

10. Equal Column Heights
var maxheight = 0;
$(“div.col”).each(function(){
if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$(“div.col”).height(maxheight);
Source

This is a small jQuery snippet I ran into while surfing the web earlier in the year. While this is not the most recommended solution for your layout display, this code snippet may come in handy down the line. CSS column heights are not always matched and so this dynamic solution using JavaScript is worthy of some insight.

11. Append New HTML
var sometext = “here is more HTML”;
$(“p#text1″).append(sometext); // added after
$(“p#text1″).prepend(sometext); // added before
Source

Using the .append() method we can quickly place any HTML code directly into the DOM. This is similar to .load() we saw earlier, except these functions can take HTML from any source. You could setup a brand new variable of HTML text or even clone HTML right from your webpage. These properties are often used in conjunction with Ajax response data.

12. Setting & Getting Attributes
var alink = $(“a#user”).attr(“href”); // obtain href attribute value
$(“a#user”).attr(“href”, “http://www.google.com/”); // set the href attribute to a new value
$(“a#user”).attr({
alt: “the classiest search engine”,
href: “http://www.google.com/”
}); // set more than one attribute to new values
Source

This property is relatively straightforward but I always see these problems in StackOverflow. You can pull the .attr() method on any HTML element and pass in the attribute string value. This will return the value of that attribute, whether it’s ID or class or name or maxlength. All HTML attributes may be accessed through this syntax and so it’s a very powerful method to keep in mind.

13. Retrieve Content Values
$(“p”).click(function () {
var htmlstring = $(this).html(); // obtain html string from paragraph
$(this).text(htmlstring); // overwrite paragraph text with new string value
});

var value1 = $(‘input#username’).val(); // textfield input value
var value2 = $(‘input:checkbox:checked’).val(); // get the value from a checked checkbox
var value3 = $(‘input:radio[name=bar]:checked’).val(); // get the value from a set of radio buttons
Source

Instead of appending new HTML content into the document you may also pull out the current HTML content from any area in your webpage. This can be an entire list item block, or the contents of a paragraph tag. Also the .val() property is used on input fields and form elements where you cannot get inside the object to read anything further.

14. Traversing the DOM
$(“div#home”).prev(“div”); // find the div previous in relation to the current div
$(“div#home”).next(“ul”); // find the next ul element after the current div
$(“div#home”).parent(); // returns the parent container element of the current div
$(“div#home”).children(“p”); // returns only the paragraphs found inside the current div
Source

This idea of traversing through object nodes is deep enough to be an article within itself. But for any intermediate or advance jQuery developers who understand this topic, I’m sure these quick snippets will help in future problem solving.

The goal is often to pull data from another element related to the currently active element(clicked, hovered, etc). This could be the container(parent) element or another inner(child) element, too. There are lots of tools for pulling data from around the DOM so don’t be afraid of experimentation.

Final Thoughts
This quick guide should be handy to any jQuery fans or even developers who have heard about jQuery but never studied the language. Feel free to copy these snippets or save this article to your own bookmarks as a reference. Additionally if you have any thoughts or ideas for similar codes feel free to share.

© mymobilemms.com