Have a few divs that need to show/hide and the buttons within need to know when it's on and when it's off. Somehow they need to "communicate with another" to know when to be hidden or visible. Oh yeah, I'd like to keep the smooth fadein/fadeout effect on all elements.
Thanks!!
My fiddle is here:
http://jsfiddle.net/Pe9jn/
Here's the code I've got that mostly works, but it's a bit quirky:
//hide maximize link on page load
$('.maximize_menu').css('display','none');
//settings
var opacity = 1, toOpacity = 0, duration = 350;
//set opacity ASAP and events
$('.toggle_all, .toggle_all2').css('opacity',opacity).toggle(function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,toOpacity);
}, function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,opacity);
}
);
// this minimizes the menu and should make the mazimize_menu link visible when toggled off
$('.minimize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,.maximize_menu').fadeTo(duration,toOpacity);
}, function() {
$('.maximize_menu, #menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
$('.maximize_menu').show(duration,toOpacity);
$('.maximize_menu').css('display','block');
}
);
// this maximizes the menu and should disappear once the menu is visible
$('.maximize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,').fadeTo(duration,toOpacity);
}, function() {
$('#menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
}
);
I think that you should rethink all the logic, because you are not actually hiding the elements, you are just setting the opacity to 0. What you should really use is fadeOut() and fadeIn()
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 made a simple content/box slider which uses the following javascript:
$('#left').click(function () {
$('#videos').animate({
marginLeft: '-=800px'
}, 500);
});
$('#right').click(function () {
$('#videos').animate({
marginLeft: '+=800px'
}, 500);
});
Here is the demo: http://jsfiddle.net/tjset/2/
What I want to do and I can't figure out how to show and hide arrows(left and right box) as the all the boxes slided.
So I clicked 4 time to the LEFT and slided all the boxes! then hide "left" so that you can't give more -800px
What can I do?
What you can do is check after the animation completes to see if the margin-left property is smaller or larger than the bounds of the video <div>. If it is, depending on which navigation button was clicked, hide the appropriate navigation link.
Check out the code below:
$('#left').click(function () {
// reset the #right navigation button to show
$('#right').show();
$('#videos').animate({
marginLeft: '-=800px'
}, 500, 'linear', function(){
// grab the margin-left property
var mLeft = parseInt($('#videos').css('marginLeft'));
// store the width of the #video div
// invert the number since the margin left is a negative value
var videoWidth = $('#videos').width() * -1;
// if the left margin that is set is less than the videoWidth var,
// hide the #left navigation. Otherwise, keep it shown
if(mLeft < videoWidth){
$('#left').hide();
} else {
$('#left').show();
}
});
});
// do similar things if the right button is clicked
$('#right').click(function () {
$('#left').show();
$('#videos').animate({
marginLeft: '+=800px'
}, 500, 'linear', function(){
var mRight = parseInt($('#videos').css('marginLeft'));
if(mRight > 100){
$('#right').hide();
} else {
$('#right').show();
}
});
});
Check out the jsfiddle:
http://jsfiddle.net/dnVYW/1/
There are many jQuery plugins for this. First determine how many results there are, then determine how many you want visible, then use another variable to keep track with how many are hidden to the left and how many are hidden to the right. So...
var total = TOTAL_RESULTS;
var leftScrolled = 0;
var rightScrolled = total - 3; // minus 3, since you want 3 displayed at a time.
instead of using marginLeft I would wrap all of these inside of a wrapper and set the positions to absolute. Then animate using "left" property or "right". There's a lot of code required to do this, well not MUCH, but since there are many plugins, I think you'd be better off searching jquery.com for a plugin and look for examples on how to do this. marginLeft is just not the way to go, since it can cause many viewing problems depending on what version of browser you are using.
ive a problem which is driving me crazy. im trying to explain...
i have a very long scrolling page with about 10 divs, one below the other (no space between).
at the bottom of the viewing port is a button with an id and a position: fixed. when i scroll up or down the button is fixed while the divs move up or down.
i want to have different id's on the button depending on which div layer is in the viewing port. that means if one divlayer fills over 50% of the available space the href of the button should change...
i tried the inview.js, but the problem is, that 2 divs at the same time have the inview class...
my current code:
$('#div4, #div5, #div6').bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
var $div4 = $('#div4');
if($div4.hasClass("inview")){
$('#button1').attr('id', 'button2');
}
you see, every div which is in the viewport the button gets a new id.
has anyone of you a solution?
thanks ted
You can try to remove the inview class before adding it.. Something like this:
var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
$divs.not(this).removeClass("inview");
if (visible == true) {
$(this).addClass("inview");
}
});
Another suggestion is to use the Waypoints plugin and fire when the div crosses the 50% mark.
The only difficult part is that depending on the direction you'll need to select the current div or the one above.
Plugin: http://imakewebthings.com/jquery-waypoints/
Demo: http://jsfiddle.net/lucuma/nFfSn/1/
Code:
$('.container div').waypoint(function (direction) {
if (direction=='up')
alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
else
alert('hit ' + $(this).attr('id'));
}, {
offset: $.waypoints('viewportHeight') / 2
});
I'm building a site where I want the certain sections to be hidden until the mouse is moved. They then remain visible whilst the mouse is moving, however, if it remains still for a couple of seconds they hide again.
I'm using jQuery on the site, in my ready state I have:
var hide = setTimeout(function() {
hideNav();
}, 2000);
$('body').mousemove(function() {
clearTimeout(hide);
var hide = setTimeout(function() {
hideNav();
}, 2000);
showNav();
});
And the functions that show/hide content
function hideNav() {
$('#primary').fadeOut(1000);
var lightbox = $('#lightbox');
if (lightbox.length) {
lightbox.fadeOut(1000);
}
}
function showNav() {
$('#primary').fadeIn(1000);
var lightbox = $('#lightbox');
if (lightbox.length) {
lightbox.fadeIn(1000);
}
}
This sort of works, except the timeout for hiding the elements ends up fighting with the function to show it when the mouse moves resulting in a lot of flickering.
EDIT: The mouse movement needs to be for anywhere on the page, not just when hovering over the element that is to be shown/hidden.
Any help would be appreciated.
Thanks
Try using $.stop http://api.jquery.com/stop/
If its in the 1 second of fading out when you move your mouse, it should stop the animation of fading out and fade back in.
function hideNav() {
$('#primary').stop().fadeOut(1000);
var lightbox = $('#lightbox');
if (lightbox.length) {
lightbox.fadeOut(1000);
}
}
function showNav() {
$('#primary').stop().fadeIn(1000);
var lightbox = $('#lightbox');
if (lightbox.length) {
lightbox.fadeIn(1000);
}
}
Also, I would remove var from the var hide = ... in your mousemove function. If hide is a global variable, just reuse it inside mousemove (doesn't need to be redeclared).
I've got a scrollable div with rows (and hidden rows). Clicking on one of the rows causes the next hidden sibling to show.
In Firefox, however, clicking on a row causes the scrollable div to jump back up to the top, and only the first time. Scroll back down and click a row, and the scrollbar stays where it is.
IE and Chrome do not reset the scrollbar, which is extra frustrating.
http://jsfiddle.net/xyan/TH4X3/
HTML:
The HTML is lengthy for the purposes of having enough information to have a scrollbar. Because of its length, I won't post it here.
Javascript:
var trackingresults = {
pos: [],
container: {},
data: {}
}
trackingresults.container = $('#test-tracking');
trackingresults.container.delegate('tr:not(.history)', 'click', function() {
if ($(this).next('tr').is(':visible')) {
$(this).find('td.details').removeClass('collapse').addClass('expand');
$(this).removeClass('current');
$(this).next('tr').hide();
} else {
$(this).find('td.details').removeClass('expand').addClass('collapse');
$(this).addClass('current');
$(this).next('tr').show();
}
return false;
});
trackingresults.container.delegate('tr:not(.history)', 'hover', function() {
if ($(this).find('td.details').hasClass('hover')) {
$(this).find('td').removeClass('hover');
} else {
$(this).find('td').addClass('hover');
}
return false;
});
One of the "Similar Questions" links suggested this problem. This seems similar, but might be different enough to warrant this question.
Is there something I can do to prevent the jumping?
I refactored your code a bit and the problem went away: http://jsfiddle.net/TH4X3/6/
You don't need the .hover() handler or the .hover class, just do it in css via :hover. Replace this selector: #test-shipments td.hover with this:
#test-shipments tr.current, #test-shipments tr:hover td {
background-color: #B1C3C4;
}
You don't need a .collapsed class - just make that the default and let .expanded override the defaults.
Rather than showing and hiding the next row explicitly, just use css to do it, based on the previous siblings .expanded class. Use the adjacent sibling selector - +:
#test-shipments tr.expand + tr.history {
display: table-row;
}
With just those css tweaks* you can reduce your JavaScript to just this:
var trackingresults = {
pos: [],
container: {},
data: {}
}
trackingresults.container = $('#test-tracking');
trackingresults.container.delegate('tr:not(.history)', 'click', function() {
$(this).toggleClass("expand");
});
And as a side-effect, your firefox scrolling issue goes away!
* Plus a couple of IE7 hacks, see the jsFiddle