Develop Reference

CAPH API widgets in Samsung TV SDK

I have made a very simple CAPH project which consists of a page that has a 3x3 containing images.
I want to be able to do something when I focus on an image.
So far I have read the documentation but I was unable to understand.
What I want to do is just reduce the opacity of an image when focused.
This is the code that needs to be edited:
page1_page.prototype.image_3fzrc_onfocus = function()
{
//should reduce image opacity but don't know how to reference the image
}
Thank you.
PS: I used the visual editor
EDIT: I did something like this but nothing happens.
page1_page.prototype.image_3fzrc_onfocus = function()
{
imgspring= caph.wui.widget._Component.getWidgetById("image_3fzrc");
imgspring.setOpacity(0.5);
};

What you have to do is:
$(document).ready(function(){
$.caph.focus.activate(function(nearestFocusableFinderProvider, controllerProvider) {
controllerProvider.onFocused(function(event, originalEvent) {
$(event.currentTarget).css({
opacity: 0.5
});
});
});
});
But if you have more elements than images, you can make a condition like that to do not affect any element focused, just images:
$(document).ready(function(){
$.caph.focus.activate(function(nearestFocusableFinderProvider, controllerProvider) {
controllerProvider.onFocused(function(event, originalEvent) {
//CONDITION: Just affect to elements with class 'image'
if($(event.currentTarget).attr("class")=== 'image'){
$(event.currentTarget).css({
opacity: 0.5
});
}
});
});
});

Replace image on hover

I'm trying to replace an image with another image.
Since the webpage, that i'm building, has to be viewable in IE8, then CSS based solutions played out quircky.
I tried the
display: none; and display: block; trick
opacity: 0; and opacity: 1; trick
But they both don't function as I want to (centered inside a div, because IE8 plays some stuff differently, then I thought that may-be a simple src="" swaping will do the trick.
I started with jquery, but since I'm pretty bad with understanding the $(this) and DOM, then it isnt working at all, but i think I got my logic right.
So, HTML is here:
<div class="wrapper">
<a href="#">
<img class="original" src="http://placekitten.com/200/200">
<img class="overlay" src="http://placekitten.com/g/200/200">
</a>
…
…
So I have numerous a tags inside a wrapper, each containing two images. As they are responsive and having the same ratio, then no sizes are needed.
And my started jquery:
$('.wrapper a').hover(
function () {
var original = $(this).attr('src');
var overlay = $(this).next().attr('src');
$(this).children('.original').attr('src', overlay);
},
function () {
$(this).children('.original').attr('src', original);
}
);
And here's the JSFiddle .
So, I'm really after this, that each a tag I have inside a wrapper would change the image according to the images inside of that tag.

You don't need javascript here at all. Really. Use CSS:
.wrapper a:hover .original {
display: none;
}
.wrapper a:hover .overlay {
display: inline-block;
}
Demo: http://jsfiddle.net/hHyh6/10/

You should simply show overlay image on hover and hide original image
$('.wrapper a').hover(function () {
$(this).find('.original').toggle();
$(this).find('.overlay').toggle();
}, function () {
$(this).find('.original').toggle();
$(this).find('.overlay').toggle();
});
DEMO

Instead you can try this:
$('.overlay').hide(); //<----------first hide the overlay image
$('.wrapper a').hover(function () {
$(this).find('.overlay').show().add(this).find('.original').hide();
// here find the overlay and show it and hide the original
}, function () {
$(this).find('.overlay').hide().add(this).find('.original').show();
// here find the overlay and hide it and show the original
});
Demo # Fiddle using .end()
Demo # Fiddle using .add(this)

try this js i also tried in your fiddle too it works
var current_cash;
$('.wrapper a').hover(
function () {
current_cash = $(this).find('.original').attr('src');
var overlay = $(this).find('.overlay').attr('src');
$(this).children('.original').attr('src', overlay);
},
function () {
$(this).children('.original').attr('src', current_cash);
}
);

change css of body on mouseover

I want to get an highlighting effect on some various div container while the rest of the site should be dampened down in opacity including the background-image.
Any idea?
Why does this code not work? tried .hover() instead of .mouseover() too but the function won't react on any input...
$(function () {
$('body').mouseover(function () {
$('body').prop({
"background-color": "red";
});
});
});
Another try would be to set a frame around the body tag in the html and then set props to that frame while the hovered frame is in normal state but I have no idea how to do this. Just beginning with js dev. :)
EDIT: did a fail...
$(function () {
$('body').mouseover(function () {
$('body').css({
"opacity": "0.3";
});
});
});
should be that way...
any way to apply the opacity to the background image too?!

fiddle Demo
Use .css()
Set one or more CSS properties for the set of matched elements.
$(function () {
$('body').mouseover(function () {
$(this).css({
"background-color": "red"
});
//or $(this).css("background-color","red");
});
});
this
.prop()
Set one or more properties for the set of matched elements.

.prop() will set the property for a particular element. In your case you have to use .css() to set the style. Please read .prop() and .css() to see the difference.
Try this,
$(function(){
$('body').mouseover(function(){
$(this).css({"background-color":"red"});
});
});
DEMO

Here's a FIDDLE
body {
background: gray;
min-height: 1000px; /* For demo purposes */
}
css
$(function() {
$('body').on('mouseover', function() {
$(this).css({ backgroundColor: 'red' });
});
});
animate
$(function() {
$('body').on('mouseover', function() {
$(this).animate({ backgroundColor: 'red' }, 600);
});
});
*Note: For some reason it doesn't work with jQuery 1.x(edge).

I think this is what you might want: a "dim" DIV element that adds a semi transparent black box on the entire page, that puts itself "below" the DIV you want to highlight, and then some javascript to turn it off and on, and rearrange the z indexes. The HTML would look something like this:
this is some text
<div id="div1" class="dimmable">hello</div>
<div id="div2" class="dimmable">goodbye</div>
<div id="dim"></div>
And then the JS:
$('div.dimmable').hover(function() {
$(this).css('z-index', 101);
$('#dim')
.css('z-index', 100)
.width($(window).innerWidth())
.height($(window).innerHeight())
.fadeIn();
}, function() {
var dimmable = $(this);
$('#dim').fadeOut({complete: function() {
dimmable.css('z-index', 99);
}});
});
You can see it working here.
A slight catch: the DIVs need to have position:relative, otherwise you can't change their z-indexes and you can't put them on top of the "dim" DIV. Also, anything with a higher z-index will not stay behind the "dim", of course, but you can just use higher numbers as a workaround.

Is there an easier way to show/hide an element on a mouse action?

I have this segment of code here, which I seem to use something similar all the time:
$(".fieldv").live('mouseenter', function() {
$(this).children('.edit-icon').show();
}).live('mouseleave', function() {
$(this).children('.edit-icon').hide();
});
Is there an easier, simpler, or cleaner way to show / hide an element on a mouse action whether it be hovering or clicking an element? Or something of the like...

Why use JavaScript?
You will need to hide the icon by default:
.fieldv .edit-icon { display: none; }
Then this CSS applies on hover (and ONLY on hover)
.fieldv:hover .edit-icon { display: block; /* or inline, etc. */ }

You could try this:
$(".fieldv").hover(function(){
//mouseover
,function(){
//mouseout
});

$(".fieldv").hover(function() {
$(this).children('.edit-icon').show();
}, function() {
$(this).children('.edit-icon').hide();
});
use $(".class").hover(function(){}, function(){});

jCarousel next and prev button, disable?

Im using http://sorgalla.com/projects/jcarousel/ as a slider....
It shows one image at a time, and a total of four images... When displaying the first image, i dont want the prev arrow to be visible, and the same if im at number 4 image, i dont want the next arrow to be visible...
How do i do this?
I initialize the script like this:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});

You can use CSS to hide the arrows. Adding the disabled classes is handled by the plugin itself.
.jcarousel-prev-disabled, .jcarousel-next-disabled
{
visibility:hidden;
}
Demo: http://jsfiddle.net/ubanC/88/

You can cheat by using two below options:
Using CSS,you should override to set some below classes:
<style>
jcarousel-prev-disabled,
jcarousel-next-disabled,
jcarousel-prev-disabled-horizontal,
jcarousel-next-disabled-horizontal{
background-position:0 0;
}
</style>
Using Javascript, this solution is same as the first. We should remove the classes: disable for next and previous buttons:
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemFirstOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled");
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled-horizontal");
}
},
itemLastOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-next").removeClass("jcarousel-next-disabled");
$(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");
}
}
});
});
</script>
P/S: I just try to read it's document and use Firebug(~Edit on the fly) to detect. If you could, you can try. It's fun.