I do not find, there is any option or event to make the feel of accordion as my expectation in AMP's accordion library. However, I have done many changes using jquery but now I need to expand and collapse item smoothly. Is there any way to do this.
You can try using amp-selector and add CSS animations to achieve the same effect.
You can use this trick to animate from heigh 0 to auto. How can I transition height: 0; to height: auto; using CSS?
You may find this thread helpful to solve your issue. It stated that:
Currently there is no animation for the expand/collapse action. This means that it may be difficult for the user to track the behavior of the interface if multiple items are collapsing at the same time that their target element is expanding.
There is no scrolling adjustment when amp-accordion closes or opens, which means if a large enough (or large enough set of) amp-accordion(s) closes above the current viewport, the content inside the viewport could shift dramatically (even entirely out of view)
Needs some way for multiple amp-accordion elements to communicate with each other (could be a parent element with an attribute something like "auto-collapse-children")
Also, check this Content Collapse jQuery plugin to smoothly collapse and expand content by clicking the panel header, which acts as an accordion.
Related
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
I have a background that is a set of fairly complex gradients (done with CSS, not images). In the middle of the page is a fixed frame, and the content sits inside this frame. I can set overflow-y: auto on this frame to scroll the content, but I would like to be able to use the window to scroll instead.
Here is what the page looks like now:
I would like the scroll bar to be on the window instead. I can take the content outside of the frame and add margins as necessary, but the problem is that then the content will appear outside the frame. I could then cover it up on the top and bottom, but this is difficult/impossible because the background is not an image and is not solid.
Is there any way to have a transparent element at the top/bottom block text that scrolls under it? Can you somehow apply styles to content that overlaps?
Even the fanciest single-browser only solution that requires JavaScript is perfectly acceptable.
if all you're aiming at is hiding the scrollbar (and assuming you're ok with jQuery), i'd suggest to use something like slimScroll.
what's going on under the hood is simple: the designated container is assigned with overflow: hidden;, and attached with a hover handler - with the sole purpose of simulating a custom scrollbar in response to mouse-over events.
Try to explore jScrollPane features.
It's powerfull flexible JQuery plugin for working with scrollbars, possibly you will find solution with it.
The following is the script I am using:
http://www.webdeveloper.com/forum/archive/index.php/t-152085.html
How can you have a container around a multiple step webform without the height/absolute positioning screwing stuff up?
Some of the steps I have have are different heights, and also with absolute positioning you can't have a wrapper with a background color.
My problem is the height is crazy because div's are being hidden but the height is still taken
Any alternative with the same script that allows a wrapper bg color and a height that alternates, instead of flooding the scrollbar?
EDIT: Here is a live example (notice the scrollbar issue?)
http://fastfolio.com/div-test/test.html
if the steps are different heights, the scrolling hurts. maybe some kind of #top fix or something? how do you get it to read the height and adjust accordingly?
Check jQuery as this will make handling the scroll easier.
In your example HTML page, replace the onclick with a function that checks current height of the div ( $(this).parent().parent().height() ) and the scroll position of the body ( $(body).scrollTop() ).
If the height is smaller than scrolTop then use the scrollTop to move the body up.
jQuery will take you 30 minutes to get your head around, but it's well worth it and wil solve a lot of queries like this.
You should not be using visibility to toggle the element shown but rather the CSS style of "display" (between "block" and "none" will do what you're after).
The pagination should also not rely on IDs - far better for you to use an array, and a "current state" holder. The "next" submit entity for should
http://consulting.euphemize.net/jack.shepherd/pagination-form/
Better options held in here :)
In the context of SharePoint, I call a dialog. SharePoint basically created a lightbox div and puts my html inside. I have no control over where it decides to display the dialog, nor of its dimensions, and not even of the CSS used for the containing page. In other words, whatever I can do must be included inside my own html/javascript/CSS.
The problem arrives because my html contains this one div that is sometimes
too high for the dialog,
which I would then naturally like to have a vertical scrollbar. I therefore define it with the CSS style of "overflow:auto".
But what I get instead is a scrollbar over the entire dialog, while the div is contained entirely in the dialog with no scrollbar at all.
I have traced the DOM, and I believe that the source of the problem is that the lightbox div containing my dialog is also defined with "overflow:auto". Apparently this takes precedence over the inner div, so that the vertical scrollbar is put on the containing div rather than on my inner div.
I am looking for a way to move the scrollbar from the dialog to the inner div. Please remember that I cannot change the CSS to get rid of the "overflow:auto" in the lightbox div that contains my html.
I can fix the problem by setting the height of the inner div to an absolute pixel value, but as I cannot predict in advance how much screen space is allocated to the other elements of the dialog or to the dialog itself, the visual results could be rather ugly.
Any ideas ?
Below is a simplistic example of the layout of the problem :
<div style="overflow:auto"> <!-- lightbox div -->
<!-- start of my html -->
<div style="overflow:auto !important">
<!-- high div -->
</div>
<div>
<button></button>
<button></button>
</div>
<!-- end of my html -->
</div> <!-- end of lightbox div -->
I should also mention that I am using Internet Explorer 9.
SharePoint has a funny way of calculating the height of the html I supply it for using inside the dialog. It probably calculates it while it is detached from the page, so that CSS positioning cannot work. Any attempt to use a clever CSS schema, such as proposed by Alexey Ivanov, therefore fails totally, with SP miscalculating the html as being extremely short. The best solution is this way butchered by SP not supplying a framework with a size for the CSS to position the elements inside.
So we are left with a javascript solution. As my html is not inserted at the topmost level of the iframe, I have no access to any body events. The only solution is then to use the onload event of an img element, as the only hookable event available, as counseled by Ann L. Unfortunately, a real image must successfully be loaded for this event to fire, so if necessary one can add a minimal 1-by-1 pixel image, which even it can be gotten out of the way with a style of "display:none".
The onload event is to contain javascript commands that will calculate the size of the dialog, subtract the total size of all elements except our maybe-too-high div, and set the height of this div to the calculated difference.
As DOM-traversal is quite broken in Internet Explorer, jQuery can be used to "fix" it by working around the bugs. If jQuery is not available, strong-arm methods can be used, such as looping on document.getElementsByTagName('div') to locate the divs of interest.
The SP divs that contain the supplied html can be identified by their className :
ms-dlgContent : the dialog itself
ms-dlgFrameContainer : the inner div that contains our html as its innerHTML and has the style of "overflow:auto" that conflicts with our own.
For the later, I have not managed to find any way of overriding its style of "overflow:auto". I finally settled for deleting its className by setting it to null. Not too big a loss, as the only style it contains is this same troublesome "overflow:auto".
All in all, quite a lot of work, both mental and programming, just because the SP programmers lacked a big enough imagination to take CSS positioning into account.
How about this? If you have an image in your inner div, it would have a jQuery "load" event. Since images tend to lag behind the rest of the document in loading, it would probably not fire until after the full DOM was complete. You could attach a handler to that.
Or, if you could stand having the scrollbars on screen for a second or two, you could use a timer inside your div and fire a method to change the outer div's style after enough time has passed that everything is loaded and set up.
First, I made this assumptions:
SharePoint lightbox do one of the following:
It's set width and height on itself.
OR It's positioning itself with position: absolute/relative.
OR It's loads content inside iframe.
Content that is not inside the inner overflow block (i. e. buttons) have fixed height.
If this assumptions are valid, then you probably can achieve described effect by position inner div div with "position: absolute", and entering left, right, top and bottom coordinates.
Example: http://jsfiddle.net/GxDcW/
You cannot get rid of the overflow: auto from the lightbox div with css or HTML, but you can with javascript. You don't need jquery or Mootools, a snippet of inline javascript should be fine
<script type="text/javascript">
var lightbox = document.body.getElementsByTagName("div")[0];
ligthbox.style.overflow = "visible";
</script>
This assumes the lightbox div is the first div on your page. If it's not, you can perhaps target it with it's id using getElementById or by targeting some wrapper div first.
Any other solution with css or html would most probably involve making it (over)complicated and error prone.
I'm experiencing some strange behavior with a project i'm working on:
http://daft.net76.net/yah/
When you click the rules link the entire layout shifts to the left by a pixel or three. I've attributed this to the amount of content in that div, because when you click the 'Scores' link, which has a smaller content height.
The lower div structure looks like the following:
<div id="lowercontent">
<div id="rulesDiv" >
<h1>Rules</h1>
<p>Clicking the roll button rolls the dice. You have 3 rolls per turn.
After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn.
Submit a combination of dice by clicking an option and clicking Score Roll.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.</p>
</div>
<div id="scoresDiv">
<h1>Scores</h1>
<p>1</p>
</div>
<p id="closeTest"><span id="close">close</span></p>
</div>
I'm using jquery functions to swap between the scores and rules.
lowercontent is a fixed width div. The inner rules and scores divs have no width.
Any ideas? Let me know if more detailed css on the divs is needed.
When the Rules div is shown, it is causing the scrollbar to appear. First, its really not a big deal.. I would just leave it alone.
If it really bothers you, add this to your CSS:
html { height: 100% }
body { height: 101% }
This will force a scrollbar to always be present so the layout won't shift.
My original answers are below but the truth is, there's only one good answer to this if you feel you need to do anything at all: modal windows.
A modal window is one that pops to the foreground and needs to be actioned before you can carry on doing what you were doing. You've used one before even if you didn't know the name. One example is an open file dialogue in an application. You have to pick a file or cancel to carry on.
On the web, you can replicate this functionality quite easily. It involves "overlay" over the content to stop the user touching it and the modal box on top of the overlay. Most web-examples shade the overlay to let the user know what has focus.
This fixes your problem because it stops the content getting longer by putting the new content over the old content and therefore the scroll-bar doesn't need to show.
Luckily for you, there are prefab solutions (see the last line of this) but I think the one that will work best for you is Facebox. It's light and sexy and does the job of just showing some information. it doesn't look like you need to get too bogged down in other actions.
Here, at least, it's because the scrollbar on the window pops up.
There are a few ways to fix this but all are pretty hacky or imperfect:
Use a left-aligned design.
On load, if the height is bigger than the computed height of the content (no scroll bar) force the content to create a scrollbar. Compare widths. Deduct half this from your left margin on your content. Yuck!
Manually centre the content using onload and onresize hooks to change the margin on the content. Probably the cleanest and you can leave it on margin:auto just in case. This won't work for IE6 but I guess that's expected.
You can put the content into tabs that the user has to switch between.
Use pop-in modal layers instead of attaching the content to the bottom of the page. I'm thinking something like LightBox but with content instead of images. I think there's probably a script out there that does this with content already.
Edit: See this for more tips on modal windows.