4 buttons toggle 4 different divs, wrapper height transition with jQuery - javascript

I'm a newbie in jQuery and Javascript in general, and what I'm trying to achieve is that 4 buttons show 4 different divs.
The idea is that the 4 divs can be seen together at the same time if you click on the 4 buttons, and if you click them again they close BUT the wrapper does not shrink and stays the size of when the divs are opened.
I know that you can not make a transition to the height of a div. Then I am trying to remove a class from the wrapper if the user "close" all the divs.
This is what i'm trying:
if($('.show-divs').length == 3) {
$('#divs-wrapper').removeClass('expand');
}
But ofcourse is not working, is there way to acomplish what i want?, thanks.
This is a representation of the divs closed
This is a representation of the divs after click all the buttons

Add a different ID attribute to each div you want to show and then add the following attribute to each button.
data-target="#THEID"
then use the following jquery:
$('.show-divs').click(function() {
var target = $(this).attr('data-target');
$(target).toggleClass('expand');
});
Assuming show-divs is your button class, warning, I typed this on my phone.
If you want to animate the heights you could do something like this:
$(".show-divs").toggle(function(){
var target = $(this).attr('data-target');
$(target).animate({maxHeight:1000},200);
},function(){
var target = $(this).attr('data-target');
$(target).animate({maxHeight:0},200);
});
As height would be auto but max-height would animate the height of the div between 0 and its max height (assuming it's less than 1000, you can change that to suit)
Here's a fiddle :)
http://jsfiddle.net/SQHQ2/3328/

Am not sure I completely comprehend what you are tring to accomplish. But if it is to just make a div appear and disappear you can add a css style of
display: none;
this makes it seem as if the div doesn't exist (so it doesn't take up space) then using javascript on the button such as
onclick="this.style.display = 'whatever display value'";
or replace 'display' with 'visibility'
this allows the div to not show yet still take up the space it would if it was showing so from
visibility: hidden -> visibility: visible

Related

Dynamically display page list as one line on mobile

I have a list of anchor elements (it's a page navigator at the bottom of the page). On mobile, the list wraps to two lines. I want to keep it at one line for easier mobile use, and display only the page numbers that will fit within the screen. I don't want to do whitespace: nowrap; or overflow-x: scroll -- I want to have as many elements as possible display on one line without scrolling or disappearing into the horizontal ether.
I was thinking I'd determine the window width with jQuery, and if the width of the list as a whole exceeds the width of the screen, show only the elements on either side of the active page div that will fit on one line. Is there such a thing as "select certain number of siblings"?
I know .siblings() exists in jQuery as well as the CSS sibling selector, but these either select all siblings or only the one immediately adjacent sibling. I want to dynamically select the siblings on either side of the active element (page) depending on screen size.
Without any code, it's hard to tell exactly what you're doing. But I would use whitespace: nowrap; so that the elements are as wide as they can be, then you can loop through them and compare their width to the viewport or container width, and selectively hide them. (or alternatively, hide them by default with opacity: 0; or visibility: hidden; and only show the ones whose widths are less than the container/viewport). Something like this:
var cw = $('.container').width();
$('footer li').each(function() {
if ($(this).width() > cw) {
$(this).addClass('hidden');
}
});
You can set the width of each element to window width/number of items
var numberOfAnchors=$("a").length;
$("a").css("width",$(window).width()/numberOfAnchors+"px");
but make sure that the anchor display is different to display:inline

How to make a div fit to screen without the other divs being visible

One of the divs which i want to display dynamically has to fit to screen. The problem is that if the earlier displayed div has height more than the screen height, when the dynamic div is displayed in the bottom of the page(after scrolling) there is some part of the earlier div still remaining. I dont want any trace of the earlier while displaying the dynamic div. Also i have to achieve this only by using javascript.
to place an div or any element one above another use position:absolute,top:0; left:0 and width and height to 100%
get the div out of your other divs, but still in the body and make it not visible "display:none;"
Give it some attributes, like Mardzis said, height : 100%; width : 100%; z-index:9999;
Then, when you want to display it, just do .show() or .hide() (with jquery if you use it) or .getElementById('#yourDivId').style.display = "none"; .... & so on...
I found a workaround for this.Put focus on the child div and disable scrolling.

Hide part view text in overflow hidden

I making bookReader and one page will fit to user viewport. For this approach i make div
<div id="book">Long text...</div>
with
#book {
overflow: hidden
}
Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.
DEMO: I show in red color what i need find and hide.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
DEMO 2: It can contains anything (header tags, img, <code> , etc.)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
P.S. Make all the same line-height is not solution. Change content styles is not solution too.
IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps
Check this out: http://jsfiddle.net/jd7mum6c/5/

Hover over a hidden element to show it

Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?
Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/
You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});
Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.
You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.
One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.
You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.

Showing and hiding a DIV partially

I need to hide a DIV partially, not totally. When page loads, I want it to show the first, let's say, 100 pixels sitting on the uppermost part of the div. When the user clicks a certain button, the div will open (it could be a sliding effect like jQuery's show()). When the user clicks back the same button, the div will return to its original state showing only the top 100 pixels. I am trying to figure out how to do this with jQuery because it seems to be the best way to do that. Any hints? Thank you.
it could be done by setting div's initial height to 100px and setting its overflow to hidden in CSS. then you can change div's height to auto when you show the full div on javascript button click.
example: http://www.quirksmode.org/css/overflow.html
CSS code:
overflow : hidden;
you will need the toggle method and some animation ,
jquery style :
set the height of the div to 10px with Css.
$("td").toggle(
function () {
$(this).animate( { height:"100px" } , 1000 )
},
function () {
$(this).animate( { height:"10px" } , 1000 )
}
);

Categories