Here is my problem, follow the steps below as not sure how to explain this without seeing it happen:
https://www.facebook.com/TheBackyrdCricketr/app_203351739677351
1) Click on the "About Us" button" - A section should slide down
2) Click on the "Rules" button (the top left image of the group of 9) - another section should slide down
3) Click on the red "Twenty20" button (the left of the 3 emblem options) - another section should slide down.
4) Minimise all the sections by clicking all the buttons in the reverse order from above i.e.(Twenty20 then, rules then about us)
5) Scroll to the bottom of the page where you will find a large blank section below my footer which hasn't slid back up to the bottom of my footer.
How do I fix this so that this empty space/height of my webpage is always the height of the bottom of my footer even when different divs are sliding down/up?
No one will open the FB through your link, so you need to understand that it's a matter of security.
According to heading of your post I think you need this:
http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-a-floating-div-which-will-come-up-and-down-automatica/
Related
My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?
I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/
I am trying to make a page which which have only two section 1st section which is at top have please see the image . Now I m able to go to div 1 to div 2 easily using pagePiling.js. can anyone tell me how to achieve the horizontal effect in div 1 . and after the end of the content on div 1 it must pagePile to div 2 . and when coming back to div 1 it user also see the effect of horizontal scroll.
In case you want to have a section with large content and therefore create an scroll bar for that section, you can do it by adding the class pp-scrollable to that section:
I have 3 sections (divs) - we'll call them #section1 to #section3. When the page loads, #section1 is the only one of the three visible owing to ngShow - I have a variable visibleSection in the controller that's a value of either 1, 2 or 3 to determine which is visible.
I have a JSFiddle here that's set up with those conditions.
https://jsfiddle.net/46x01Ldm/14/
However, what I'm looking for is a way to make the sections move when you click "Next" or "Previous".
When the user clicks "Previous", I'd like the old section to slide out to the right and the new section to slide in from the left, as if the user has swiped to the right with their finger.
When the user clicks "Next", I'd like the old section to slide out to the left and the new section to slide in from the right, as if the user has swiped to the left with their finger.
How would I go about achieving this?
Thank you very much for any suggestions or assistance! I have jQuery and animate.css to work with, if that helps.
Given that you're using animate.css, just give the section that needs to move out one of the exit classes (Like bounceOutLeft) and the class you'd like to move in one of the entrance classes (Like bounceInRight).
Along with that, to keep track of which section the user is looking at, I'd have a variable that's keeping track of which section the user is looking at. I'd add 1 to the variable when the user presses the next button and the opposite with the previous button. Then just animate the the children you need based on this variable.
I need to jump to the bottom of page after button click. After clicking, some hiden information becomes visible and it expands the page. I tried this:
onclick='if(event.pageY > (document.body.parentNode.scrollHeight - 250)) {window.scrollBy(0, (document.body.parentNode.scrollHeight));}
where:
event.pageY - mouse position on click
(document.body.parentNode.scrollHeight - 250) - i need to do this
action just after clicking last few buttons (250px above bottom)
But this jumps only to the bottom of previous (not expanded) page with hidden lines. Then i need to scroll to see information that become visible. I need to jump to the bottom of expanded page with shown information that was hiden.
2nd problem that it works different in chrome and firefox. Chrome works only with bottom of whole page - 250px and firefox works with visible part of page - 250px.
Any advice?
Thanks in advance
I have a page that has a form and a generated content area that both have section and subsection hiding via checkboxes. (the checkboxes are hidden on the page, but not on the fiddle to show 'checked' state of the checkboxes)
Here is the fiddle. It may look like a lot, but hang in there, it really isn't. I have what should be an easy problem, let me show you where the issue is.
I am trying to add functionality to the page, so that when a user deselects all subsections of a section from the left pane, that the section as a whole hides on the left, and the right side form lets you know the entire section is hidden (RED text in the fiddle), but doesn't allow subsection changing to keep persistance. I can hide all subsections by clicking them in the left pane, with the left section disappearing, and the right subsections hiding themselves, and the right header notifying you it is is hidden on the left. The issue lies when the right header is clicked to unhide the section in the left, the subsections are no longer visible or 'reset'.
Here is the code that deals with checking if all of the subsections are hidden:
if (($('fieldset.abstract > div > input:checkbox:checked').length+1) == 7){
//Left Side
$('.block > .abstract > .superseven > section input').each(function(){
$(this).prop('checked' , true);
});
$('.block > .abstract > .superseven > section').eq(index).hide();
$('.block > .abstract').hide("slow");
//Right Side
$('fieldset.abstract label:first').toggleClass('hidden');
$('fieldset.abstract > div > input').each(function(){
$(this).prop('checked' , false);
});
$('fieldset.abstract > div > label').each(function(){
$(this).hide("slow");
});
How do I 'reset' the checkboxes to a page load, ONLY after all of the subsections were hidden? It should be that once the user clicks the right section header to bring the section back on the left, all of the subsections are visible.
If I apply a regular condition ( similar to the lower section in the JS labeled //Toggle Section completely) when the right section header is clicked, it will not keep persistence from when only a few subsections are hidden and then the entire section.
I was thinking that it might be possible if I keep track with a state variable, but dont know about variable scoping in Jquery (I would assume it would have to be global, which I am under the understanding that is not good practice),
or this entire section of Jquery could be wrapped in a self calling function like this:
(function name() { ... })();
Any other programming approaches I might be able to use?
Sorry for the in-depthness, new to js/jquery, and I hope the fiddle helps, not hurts.
Clarification of what should happen:
Click all of the left side subsections, and they disappear
the right side subsections (labels only, as all checkboxes are not visible in live page) should disappear
the right side section header should turn red
click the right side section header
the left side section should appear (all of this up to here is working, here is where it breaks) AND all subsections in the left should be visible, as if it were reset (the same as when the page loads, but only for this particular section, as there are multiple of these sections), as the user hid all of the subsection, so the entire section was hidden, and now the user wants the left section back, and all subsections should be visible.
Notes:
Current working functionality:
hiding the entire section from the header
hiding all but one of the subsections
hiding subsections, then choosing to hide the entire section, and keeping persistance when unhiding the entire section
for the question of initial block, i think is a width issue, try to change some width, try 14.28 instead of 14.326647564469914, ( I respond via IPad and with this device work correctly )
To sum the comments, this code: reset the initial case and set the correctly width of sub section
if(!$('.block > .abstract').is(':visible')) {
$('fieldset.abstract #abstract_all').prop('checked' , false);
$('.superseven ').children().show();
var width = ((1/7)*100);
$('.superseven ').find('div').css("width", width + '%')