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.
Related
This is the Example UI.
So, the results I want:
Accordion (expand/collapse) blue circled sections, and level 1 (##level1) to be the title and closed all the time when we scroll down or click on, it should expand and get active on whatever line we are.
And when we scroll, it should inactive state as usual, but when we come to the 2nd section, the first stay there and 2nd expands auto and that happens to that too.
Also, I want the content to be shown only for the expanded section when we go at the end, there should be previous and next section title and link. which will lead us to that, but the page should stay the same.
This is on the roadmap for implementation as part of the brand new Material for MkDocs Insiders: https://squidfunk.github.io/mkdocs-material/insiders/#prairie-fire
I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/
It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!
The script so far(checking the JSfiddle will make more sense):
var icon = $('.icon');
var slideshow = $('.cycle-slideshow');
icon.on('click', function(e){
e.preventDefault();
slideshow.cycle('next', function(){
});
});
You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.
See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck
I am forced to have my navbar in the middle, because the width of my dropdownbox is 300 px; I would like the button "login" to be in the right side, and when you hover over the "Login", the width slides from right to left, so the dropdownbox width fits the page. And when you remove the mousepointer, the button slide from left to right, to be in the "normal" position.
I have been playing around with this, but how can I solve that it does not slides back again automatically, instead of pushing a button?
you're post is a little confusing to understand. At the moment the code requires you to press the button to first display and then hide the element. What I got is that you'd like this to be automatic.
One way to do this is for a desktop only solution is to use hover instead of click. But this creates some issues of its own (can't click sign-in fast enough), I'm not sure you want to go down this road.
$(".myButton").hover(function () { /* Do this */ });
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/
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 + '%')