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
Related
I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.
The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show
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 have a webpage that utilizes fullPage.JS. There is a firstPage section with 5 horizontal slides that is navigated to with a header menu via data-menuanchor. Additionally there is a secondPage section with 3 horizontal slides that is navigated with a footer menu, also via data-menuanchor.
I would like for each li menu item to change color when it's corresponding section is navigated to. Right now I am accomplishing MOST of this by using the :focus CSS selector. However this only works when a menu item is clicked. I also need the highlights to change when navigation is done via touchscrolling, keyscrolling, etc.
Initially I thought I could accomplish this by using the "active" class as it is passed to the menu, but I quickly realized that, because of the structure of my page, the "active" class is simultaneously passed to every li in the menu....either all five items in my header menu or all 3 items in my footer menu.
After concluding that I would not be able to use the "active" class to differentiate as needed, I began looking at the "fp-viewing-firstpage-X" class that is given to the body as each section and slide is navigated to...
However, I am not having luck with either approach I've come up with.
First I tried to do it all with CSS with something like this:
.fp-viewing-firstpage-1 .item {
color:white;
}
After not having success with that I tried using this javascript in the onLoad, onLeave, afterRender callbacks, etc...:
if ( $('body').hasClass('fp-viewing-firstpage-1') ) {
$('.item').addClass('white');
}
So far neither approach has accomplished my goal of changing the color of whichever menu item's corresponding section is navigate to, regardless of HOW is is navigated to.
Your assistance is appreciated!
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 + '%')