I have an existing site, and like most of my cases I have to use a jQuery override to change some css. I can resize the element and give it a background image, but I can't get the hover state to work.
You can see my working JSfiddle here: http://jsfiddle.net/wdNF6/
The big that seems to not work is
$('.slideshow-screen .slide-item-current .play-button').hover( function(){
$(this).css('background-position', 'something something');
}
I used the .hover() from examples I found throughout stackoverflow. When you go to the example, the button should be blue with an image in it. Hovering over it should reposition the bg image. But when you go to the example, the default css pre-jQuery shows. If you remove the second bit of jquery, the first part works.
Any suggestions?
Missing the closing brace for the function
$('.slideshow-screen .slide-item-current .play-button').hover( function(){
$(this).css('background-position', 'bottom center');
}); <--- Missing this
Also this can be simply be written as
$('.play-button').css({
width: '90px',
height: '90px',
'background-color': '#0000ff',
'background-position': 'top center',
'background-image': 'url(http://www.lessardstephens.com/layout/images/slideshow_big.png)'
});
$('.play-button').hover(function() {
$(this).css('background-position', 'bottom center');
});
Check Fiddle
Did you check? Your code had a typo.
You missed an ending ); at the end.
$(document).ready(function () {
$('.slideshow-screen .slide-item-current .play-button').css({
width: '90px',
height: '90px',
'background-color': '#0000ff',
'background-image': 'url(http://www.lessardstephens.com/layout/images/slideshow_big.png)',
'background-position': 'top center'
});
$('.slideshow-screen .slide-item-current .play-button').hover(function () {
$(this).css('background-position', 'bottom center');
},
// Also you need to reset
function () {
$(this).css('background-position', 'top center');
});
});
Fixed: http://jsfiddle.net/Vc84h/
Related
I have used jquery and css to show a loader with gray background during an ajax call. The thing is I need the loader and the gray background to be visible only within a box like as shown below with loading text and icon in center
My code is working fine but the loader with gray background is showing for the full page like as shown below.
Can anyone please tell me some solution for this
My code is as given below
JSFiddle
ajaxindicatorstart('loading data.. please wait..');
function ajaxindicatorstop()
{
$('#resultLoading .bg').height('100%');
$('#resultLoading').fadeOut(300);
$('.myBox').css('cursor', 'default');
}
function ajaxindicatorstart(text)
{
if($('.myBox').find('#resultLoading').attr('id') != 'resultLoading'){
$('.myBox').append('<div id="resultLoading" style="display:none"><div><img src="http://w3lessons.info/demo/ajax-indicator/ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
}
$('#resultLoading').css({
'width':'100%',
'height':'100%',
'position':'fixed',
'z-index':'10000000',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto'
});
$('#resultLoading .bg').css({
'background':'#000000',
'opacity':'0.7',
'width':'100%',
'height':'100%',
'position':'absolute',
'top':'0'
});
$('#resultLoading>div:first').css({
'width': '250px',
'height':'75px',
'text-align': 'center',
'position': 'fixed',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto',
'font-size':'16px',
'z-index':'10',
'color':'#ffffff'
});
$('#resultLoading .bg').height('100%');
$('#resultLoading').fadeIn(300);
$('.myBox').css('cursor', 'wait');
}
Your loader has a position of fixed, this takes the position of the viewport rather than the position of your element.
$('#resultLoading>div:first').css({
'width': '250px',
'height':'75px',
'text-align': 'center',
'position': 'absolute',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto',
'font-size':'16px',
'z-index':'10',
'color':'#ffffff'
});
$('#resultLoading').css({
'width':'100%',
'height':'100%',
'position':'absolute',
'z-index':'10000000',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto'
});
Also give your myBox a position of relative.
My goal was to create a simple button which once clicked would hide/show a navigational menu, and change the footer's padding alternatively, I'd have used toggle() if not for the latter condition. How do I make the button serve both purposes, that is first hide the menu and decrease footer padding, and then upon another click show the menu and increase the padding, and so forth, so that upon clicking the button one effect would occur and upon another click the other? Any help, suggestions, or alternatives, will be much appreciated.
function collapseOrCondense(event) {
if ($('#block-panels-mini-footer-nice-menu:visible')) {
$('#footer').css({
'padding-bottom': '2.5%'
});
$('#block-panels-mini-footer-nice-menu').hide();
} else {
$('#footer').css({
'padding-bottom': '5.5%'
});
$('#block-panels-mini-footer-nice-menu').show();
}
};
$('#footer').append('<button type=button class=cbutton>*</button>');
$('#footer .cbutton').css({
'position': 'absolute',
'left': '1%',
'top': '1%',
'width': '2%',
'height': '1.5%'
});
$('#footer .cbutton').on('click', collapseOrCondense);
I have made an example here. http://jsfiddle.net/wdakLfcc/2/
var visible = true;
function collapseOrCondense(event) {
if (visible) {
$('#footer').css({
'padding-bottom': '2.5%'
});
$('#block-panels-mini-footer-nice-menu').hide();
visible = false;
} else {
$('#footer').css({
'padding-bottom': '5.5%'
});
$('#block-panels-mini-footer-nice-menu').show();
visible = true;
}
};
$('#footer').append('<button type=button class=cbutton>*</button>');
$('#footer .cbutton').css({
'position': 'absolute',
'left': '1%',
'top': '1%',
'width': '2%',
'height': '1.5%'
});
$('#footer ').on('click', '.cbutton', collapseOrCondense);
On button click different effect will be played - Collapse Or Condense.
It looks like from my analysis that your conditional is always evaluating to true. I propose you add some other form of indicator to better distinguish the toggle.
I jury rigged a simple implementation: http://plnkr.co/edit/y8BugzI89s0i5kxM95H9?p=preview
function collapseOrCondense(event){
if($('#block-panels-mini-footer-nice-menu').css('display') === 'block'){
$('#footer').css({'padding-bottom':'2.5%'});
$('#block-panels-mini-footer-nice-menu').hide();
}
else{
$('#footer').css({'padding-bottom':'5.5%'});
$('#block-panels-mini-footer-nice-menu').show();
}
}
The aforementioned snippet is one way of handling this case given my demo environment -- I am sure there are many ways but the underlying problem is your condition (at least in my scenario with the data provided) is always evaluating to true.
The problem is in this line you have:
if ($('#block-panels-mini-footer-nice-menu:visible')) {
Because that will return a jQuery object with one or zero elements inside. You could fix that by adding .length. But I think using the is function is more clear.
Here I fixed that, and applied some changes that may help you to do the same in a more concise manner:
function collapseOrCondense(event) {
var menu = $('#block-panels-mini-footer-nice-menu');
$('#footer').css({
'padding-bottom': menu.is(':visible') ? '2.5%' : '5.5%'
});
menu.toggle();
}
$('<button type=button class=cbutton>*</button>').css({
'position': 'absolute',
'left': '1%',
'top': '1%',
'width': '2%',
'height': '1.5%'
}).on('click', collapseOrCondense).appendTo('#footer');
Working fiddle: http://jsfiddle.net/yj5evps2/
I'm new to jQuery so please work with me here. :)
[Site Image] http://imgur.com/zx803Ct
So I'm trying to have the bottles here to animate with cursor interaction.
Goal: I want the hovered image to come to the foreground and the rest to shrink into the background.
Undesired Results: The code seems to shrink all the bottles without condition. I seem to be running into trouble with the "if, then, else" section.
Process:
Store 'mouseEntered' element, do for each bottle, check if match, apply effects.
Code:
$(".sauce_bottle").mouseenter( function(){
var $active = $(this); //The "entered" image
//For each (div) bottle, check if "entered", apply effects
$('.sauce_bottle').each( function(){
if ( $active == $(this) ) {
//Shrink
alert($active.attr("alt"));
$(this).animate({
height: "230px",
width: "70px",
opacity: ".70"},
150);
} else {
//or Enlarge
$(this).animate({
height: "279px",
width: "85px",
opacity: "1"},
150, function(){});
}
});
});
If I'm missing a concept (scope) or if you guys have an alternative way of doing this that would be fantastic!
Thanks guys! :)
I would do it like this:
$(".sauce_bottle").mouseenter( function() {
$(this).animate({
height: "279px",
width: "85px",
opacity: "1",
}, 150);
$(".sauce_bottle").not(this).animate({
height: "230px",
width: "70px",
opacity: ".70",
}, 150);
});
I want to make the effect like, after click the box, the box disappeared after expanding its both top and bottom, I did some work, but expends only on bottom. and the effects not quite good, I'd like to make the box bigger. http://jsfiddle.net/wY8Wb/ if someone could help me out? thanks
Check this demo: http://jsfiddle.net/wY8Wb/3/
Code:
$('#videoimg').click(function(){
$(this).fadeOut('slow');
$('#color')
.css({
top: ($(this).offset().top + $(this).height()/2) + 'px',
height: 0
})
.animate({
// the hard-coded "9" you see below is half of the
// difference between the final heights of the 2 divs == (300-282)/2.
// Given here so as to have the color div expand out
// equally at top and bottom
top: ($(this).offset().top - 9) + 'px',
height: '300px'
}, 'slow');
})
JSFiddle : http://jsfiddle.net/wY8Wb/17/
$(document).ready(function(){
$('#videoimg').click(function(){
$(this).fadeOut('slow');
$('#color').animate({height: '300px', top: '0px'}, 'slow');
})
});
changed css also
Hi! I really try to find a topic related to my issue here, but I had no luck...
Some simple code: I have two divs, placed in the same position -
<div id="fader1" style="display:inline-block;position:absolute;background-image:url(images/fader1.png);opacity:1;width:296px;height:435px;margin:-215px 50px -20px"></div>
<div id="fader2" style="display:inline-block;position:absolute;background-image:url(images/fader2.png);opacity:0;width:296px;height:425px;margin:-215px 50px -20px"></div>
The idea is when the mouse passes over the div "fader1", the opacity changes to 0, and the opacity of fader2 changes to 1. And turn back like the beginning if I put the cursor out of the div.
I've tried to achieve this with mootools but I'm now in a dead-end.
Mootools Demos have the example of Fx.Morph like this:
$('myElement').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 0.6,
'background-color': '#E79D35'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
As you can see, I can only manage ONE element (this.morph). I try to put other element like: "('fader1').morph" with no results... But I think that I'm doing it wrong.
I really appreciate any help you can give me to achieve this in mootools. Regards!
you should read the manual and not copy/paste from examples.
$('myElement').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 0.6,
'background-color': '#E79D35'
});
}
});
in the above function, the scope this refers to myElement. if you need to reference a different element, then simply do so.
(function(){
var other = $('myOtherElement').set('moprh', {
link: 'cancel'
}); // save a reference and set link to cancel existing morphing
$('myElement').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
other.morph({
'opacity': 0.6,
'background-color': '#E79D35'
});
},
mouseleave: function(){
// Morphes back to the original style
other.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
}());
read up on what $ (documentid) returns (an element), saving an element into a variable and referencing it later - this is standard javascript.