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
});
}
});
});
});
Related
I am trying to dim the background of my main content while accenting on a sidebar that needs to show up from the right, so I am using the dim-background jquery plugin. I want to toggle the .dimBackground() method for my element when I click its trigger. It adds a div with the class of dimbackground-curtain and it simply stacks this div when I click the trigger, making everything darker and darker.
I want to be able to toggle both the sidebar and the dimming above the main content. And if possible, to be able to toggle it if I click outside the sidebar as well.
Sample code from the fiddle:
$('.trigger').click(function() {
$('.sidebox').toggleClass('sidebox-open');
$('.sidebox').dimBackground({
darkness: 0.35
});
});
There is no CDN that provides this library, however, here is the Fiddle describing my problem.
According to the Usage guide, there's a .undim method.
It seems that .dimBackground does not toggle, so you will have to store the state on your end and invoke either .dimBackground or .undim depending on the state and switch it.
Example:
var dimmed = false;
$('.trigger').click(function() {
var $sidebox = $('.sidebox'); //avoid searching the element twice
if(dimmed){
$sidebox.removeClass('sidebox-open');
$sidebox.undim();
dimmed = false;
} else {
$sidebox.addClass('sidebox-open');
$sidebox.dimBackground({
darkness: 0.35
});
dimmed = true;
}
});
You could try this and check if it gives you a similar functionality:
$('.trigger').click(function() {
$('.sidebox').toggleClass('sidebox-open');
if($('.sidebox').attr('class') == "sidebox sidebox-open"){
$('.sidebox').fadeTo( "slow" , 1);
}
else{
$('.sidebox').fadeTo( "slow" , 0);
}
/*$('.sidebox').dimBackground({
darkness: 0.35
});*/
});
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);
}
I have a navigation menu that upon hovering (using the hoverIntent plugin and tweenmax to animate) replaces a div with the relevant background image. I have this all working fine, but what i'm stumped with is how to prevent the action being repeated on the element that is currently selected. So for example if you hover over the first and then hover off it I don't want the action to be repeated once you hover over that one again because it is already selected. Attached is the link my fiddle http://jsfiddle.net/olichalmers/5csofnhz/1/
var homeNav = function () {
var tgt = $(this);
$("#homeImageNav a ").hoverIntent({
over: homeNavOver,
out: homeNavOff,
interval: 0
});
function homeNavOver() {
var tgt = $(this);
var bgHold = $("#bgHolder");
var bg = tgt.attr('data-bg');
if (!tgt.hasClass('current')) {
TweenMax.set($("#bgHolder"), {
opacity: 0,
background: bg,
scale: 1.1
});
TweenMax.to(bgHold, 1.5, {
opacity: 1,
scale: 1,
});
}
//tgt.addClass('current');
}
function homeNavOff() {
//if (tgt.hasClass('current')) {
//tgt.removeClass('current');
//}
}
};
And here is the homeNav function.
You just need to make changes in your function - homeNavOff like this:
function homeNavOff() {
$('#homeImageNav a').removeClass('current');
$(this).addClass('current');
}
See it in action on this fiddle
Updated your Fiddle
What I have added is:
One variable to store current selected link
Check it with the hovered link
If it is not the same then perform Background change
Else do nothing.
Update everytime any link(One or Two) is hovered
Look on this :
http://jsfiddle.net/5csofnhz/6/
If any query feel free to ask
I have a DIV with 9 images and I would like to change CSS property of 8 images unlike one that user is hovering.
Here is what I have:
HTML:
<div class="gallery">
<img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" />
<img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" />
</div>
JS:
function hoverPics() {
$(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");
$(this).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
Actual page
The best example of what I'm looking for is Gallery at the bottom of the page after age validation. Here
Cheers
I strongly recommend against using inline JS. Since you're already using jQuery, you can simply listen to the .hover() event (which is basically a shorthand for .mouseenter() and .mouseleave()), and use DOM traversal methods:
$(function() {
$('.image-hover').hover(function() {
$(this).css({
'-webkit-filter': 'grayscale(0%)'
}).parent().siblings().find('.image-hover').css({
'-webkit-filter': 'grayscale(100%)'
});
}, function() {
$('.image-hover').css({
'-webkit-filter': 'grayscale(0%)'
});
});
});
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/5kw2hs7f/
There is also a pure CSS method (slightly hackier), although it allows less granularity over control compared to the jQuery solution. The way is to set all .image-hover to grayscale, but only allow colour on the specific .image-hover:hover.
The only problem is that we are setting all images to greyscale as long as the parent container .gallery is hovered upon, and this might not be the desired behavior. See fiddle here: http://jsfiddle.net/teddyrised/88v8ga5z/
.gallery:hover .image-hover {
-webkit-filter: grayscale(100%);
}
.gallery:hover .image-hover:hover {
-webkit-filter: grayscale(0%);
}
Pass this in function to access them
onmouseover="return hoverPics(this)" onmouseout="return changeMeBack()"
in js
function hoverPics(obj) {
$(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");
$(obj).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
try to verify if is hover, like this:
function hoverPics() {
if( ! $('.image-hover').is(':hover') ) {
$(".image-hover").css({ "filter": "gray", "-webkit-filter": "grayscale(100%)" });
}
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
I do not have much experience with jQuery however if attempting this I would pass through the id of the current element when the function is called, on hover. I would then use a loop to run through the images, within this loop I would check the id against the current image and if true would not change the grey scale.
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.