Develop Reference

Slidedown form on click

I am trying to show form when user clickes on the button. Form is showing up but there seems to be a bug for a second. form is centered when the slide up function is executing and when it is done it fits normally to the page.
Here is the js:
$(document).ready(function() {
$('.clicked').on('click', function(e) {
var current = $(e.target).next();
var show = current.hasClass('hidden');
if (show) {
current.hide();
current.removeClass('hidden');
current.slideDown('slow');
} else {
current.slideUp('slow', function() {
current.addClass('hidden');
current.slideUp('slow');
});
}
})
});
I do not think there is any bug in js code, most likely missing something in css.
Have a look here and click on blue button "Click Here" http://codepen.io/nikasv/pen/vKEEZr
Thanks.

.trip-form{
width: 100%;
overflow:hidden;
}
will do the trick even with the shaking you experience :)

You should try to set width of class "trip-form" to 100%.

Showing / hiding of divs containing repeaters not working

I'm attempting to show one div containing a slideshow and hide another containing a list of images generated on larger screens i.e desktops. And do the opposite on smaller screens. Both Div's contain repeater controls, not sure if that interferes in any way but I do not think it does. Not sure why it's not working any suggestions would be very appreciated.
My jQuery and the CSS classes it attempts to implement;
$(function () {
$(window).resize(function () { ToggleSlideshow(); });
ToggleSlideshow();
});
function ToggleSlideshow() {
// Apply your condition here to toggle the visibility of the slide show
if ($(window).width() < 500) {
$("#slideShowContainer").addClass(".hiding");
$("#imgList").addClass(".showing");
} else {
$("#slideShowContainer").addClass(".showing");
$("#imgList").addClass(".hiding");
}
}
.showing{
display:block;
}
.hiding{
display:none;
}
When I say it's not working, what I mean is both are being displayed which is not what I am trying to achieve. To see it live please follow this link.

I got it working in the end. I did as follows:
$(function () {
$(window).resize(function () { ToggleSlideshow(); });
ToggleSlideshow();
});
function ToggleSlideshow() {
// Show your slideshow on widths larger than 500, otherwise show your list of images
$("#<%=slideShowContainer.ClientID%>").toggle($(window).width() >= 660);
$("#<%=imgList.ClientID%>").toggle($(window).width() < 660);
}

How to flash a tag in HTML indefinitely using Jquery

In a web page I'm writing a user plays a game, once they win, text is supposed to flash. Once the user hits restart the text flashes. I would like to know how I can use Jquery(I have to use jquery as a requirement) to do this?
Thank you for your help!

Below is a snippet that I believe exhibits the requirements you're looking for.
This depends on setInterval and clearInterval to handle a a repeating callback that toggles a CSS class. You can use further css animations / transitions to spruce up the effect more.
(function() {
var flasherInterval = 0,
$flasher = $('#flasher');
$('#win').on('click', function() {
if (!flasherInterval) {
flasherInterval = setInterval(function() {
$flasher.toggleClass('hidden');
}, 250);
}
});
$('#restart').on('click', function() {
console.log(flasherInterval);
clearInterval(flasherInterval);
if (!$flasher.hasClass('hidden')) {
$flasher.toggleClass('hidden');
}
flasherInterval = 0;
});
}());
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="win">Win</button>
<button id="restart">Restart</button>
<p id="flasher" class="hidden">Flashing text!</p>

$(function(){
// loop showing and hiding for 1.5 seconds
while(blink){
setTimeout(function(){ $('#myDiv').hide() , 1500);
setTimeout(function(){ $('#myDiv').show() , 1500);
}
});
don't actually use this code - it's pretty bad , and meant to get you started ... just an idea - this shows for to set a delay , how to show and hide

You could also use the blink plugin. http://antiyes.com/2009/08/24/jquery-blink-plugin/

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
});
}
});
});
});

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.