I'm using the jQuery plugin Quicksand to list some documents for my users to access, I have several hundred documents so I only show a few of them from the beginning.
The list (ul) is built to show about 20 document titles at a time, and the rest is hidden. Like this. At the bottom of the list you have a link to Show more, and when you press it more titles are loaded. Instead of expanding the height of the list the parent div has the property overflow with value auto.
The list is built by a javascript, it loads the documents from a MySQL database and hides all documents but a specified number. When you press "Show more" ("Visa fler" in Swedish, as showed in the pictures) it reloads the documents and excludes some additional documents form the hide function.
The problem is this: When I press Show more it loads more titles but the list ignores overflow: auto and the list expands over the entire page, like this. After a second or so, when it has finished loading, the overflow-property is applied and everything is as it should be, but it doesn't look very good when loading.
Do you have any ideas how to solve this?
Do you need to know anything else?
Thanks in advance!
I found one solution. I added atomic: true, I lost some animation, but it doesn't flow outside of the parent div anymore.
From a quick look it seems that it might be do to plugin setting inline styles (width and height) on the container. You might want to override them after the transition ends, e.g.,
target.quicksand(source, {}, function () {
target.css('width', '');
target.css('height', '');
});
Related
I have been trying to build a multi-level vertical tabs with hidden content which gets visible by some jquery. It is working fine but with it has one problem.
Because of this code:
$(this).nextUntil("li.tabsclose").slideToggle();
When page loads for the first time, all the parent categories are shown but if you click on a category with some sub-categories, jquery hides everything until the next item with "tabsclose" class. Which is a problem because I have some Parent categories towards the end of the list.
Here is the jsfiddle: https://jsfiddle.net/ebf6cdpe/
Thank you very much for your help in advance!
SOLUTION:
After spending some considerable time on searching web, I have used if/else statement to be able to close parent tabs on re-click.
https://jsfiddle.net/ebf6cdpe/5/
This particular piece is causing all the Parent categories without subcategories to be hidden:
$('.subtabs').not(this).nextUntil(".subtabs").slideUp();
If you remove that, all the Parents without subcategories won't disappear permanently. However, there is still an issue with them temporarily disappearing when opening the subcategory.
You need to have a class that is applied to all your parents that you can use as a selector in this loop:
$(this).nextUntil("li.tabsclose").slideToggle();
I'm still not 100% sure this is the exact functionality you want, but here is an updated version:
https://jsfiddle.net/ebf6cdpe/1/
Whatever the case, you may be better off using nested lists for your subcategories. https://www.w3.org/wiki/HTML_lists
Need help with the "our team" section halfway down this page: http://dev.doubleaevents.com/
When you click an image it opens to reveal more information. I'd like to be able to click another image and have the previously opened image collapse, so that a user can't open more than one image at a time.
Would also like to know if making them slide out to the right (instead of down) would be a simple fix?
I'm a js novice so any explanations are appreciated. Here's the js file for quick reference: http://dev.doubleaevents.com/wp-content/plugins/portfolio-gallery/assets/js/view-toggle-up-down.js
Try adding this:
jQuery('.portelement').each(function(){
if(jQuery(this).hasClass('large')){
jQuery(this).removeClass('large');
jQuery(this).animate({
height:240
},300);
}
});
before:
jQuery(this).parents('.portelement').addClass('large');
In your javascript code.
When you click an item you basically want to search for elements that are already open. Then from there remove the 'large' class name and close that element. From there you continue on to opening the selected element. Thats what this code does.
As far as your other question, it shouldn't be too difficult, just mess around with the animate method and css. But maybe look into the isotope documentation. There may be an option for that.
I've created a lightbox function which loads over the top when a user clicks on a post link in the archive. The overlay needs to display images and short paragraphs of text in a slideshow style (with next and prev buttons), those fields are created with as Advanced Custom Fields flexible repeater.
I'm using JS to .append() a div to the body and I need to then query the post, by ID I guess, within my js to fetch the first value from that ACF repeater, then second, then third and so on, when the next/prev buttons are hit. I'm thinking that I could perhaps quickly grab an array of those values when the lightbox is loaded and then cycle through them, but am not sure where to start.
What I don't want to do is simply .load() the post, headers and all, into the lightbox, just the images (and short peices of text) one at a time.
Any pointers greatly appreciated.
I've got around this issue by storing the information that I need in an array during the initial loop so that when the user clicks on the post I .append() an overlay to the body and then create a slide for .each() of the nodes in that array. The information displayed in each slide is pretty minimal in this case, just an image or a single line of text so this solution works more efficiently than querying the database on each click or lightbox load.
I want to dynamically click on a set of unordered list items without displaying the results of the clicks. The intent is to pre-load dynamic content such as images and text that clicking on the list items will normally load and display; I want to preload the content as much as possible before the user begins to click on list items. (I've inherited code from another developer and I'm having to work within the constraints of his routine, so please bear with me.)
Each list item has an ID, like:
id="w273"
id="w175"
id="w123"
These would be my references. The list items are generated dynamically, and each contains an HREF to content that will be displayed in a hashed area of the page (the content consists of server-loaded images and text extracted from a SQL database using a query).
Normally, clicking on a list item changes the content in that area of the page, but it takes time to load. Once it's loaded, though, it can be redisplayed without reloading, of course, and so revisiting it is instantaneous...it's the initial visit that takes time.
I'd therefore like to pre-load all of that content by dynamically clicking on each of the list items in succession without displaying the resulting content, all done in the background, leaving the default content (which is automatically retrieved using the first ID in the click-list) in place. (I mention this detail to explain that the page loads initially with the first list item's content displayed, and that behavior should remain unchanged.)
How could I accomplish this with Javascript or JQuery?
MORE INFO
Okay, here's the skinny. The content is informed by a major containing php script that houses content from an inner php script. The outer script creates an image carousel whose thumbnails reference the inner script as hashes. At any given point, the URL will take this form:
g.php?g_id=45#a.php?a_id=238
The outer script is the "g.php" script. It references a thumbnail image in the carousel identified by the "a.php" script whose GET value is the key to loading the inner content on the page.
The individual thumbnails in the carousel are HREF'd like this:
<li><img src="thumb_image.jpg" /></li>
So clicking on this one would revise the previous URL to:
g.php?g_id=45#a.php?a_id=467
Notice, though, that the content generated by the "g.php" script doesn't change, therefore. The inner "a.php" content switches as a hash change when its corresponding thumbnail in the carousel is clicked. It's a surprisingly effective solution, with a few caveats.
The main caveat is that nothing is preloaded except the content referenced by the first link (which corresponds to the first thumbnail in the carousel), and that behavior is hard coded into the routine and is fine.
I simply want to dynamically click each link in the list to load all of the content, and to do it in the background after the page has loaded with the first link's content exposed (which is its default behavior, and, as I've said, which is fine). And it must be done invisibly.
It also doesn't matter in what order it happens, because the user might immediately advance the carousel and click on the 14th element in it rather than the 2nd element. So, I don't want to preload the content in batches of 10 or similar increments, waiting for the user to interact with the carousel to load more content; that makes no sense, provided the design of the carousel and how it is intended to be used in any non-sequential manner.
I simply need to loop through all of the list item links and load them invisibly—in whatever sequence they should happen to load, provided the asynchronous nature of AJAX. More than likely, the user will click on one of the links that has been preloaded by the preloading routine, but if the user jumps ahead and selects something that's still in the process of preloading, that's not a problem; by the time the user has examined that content, the rest of the content will have been preloaded.
So, that's more info. I hope this provides a better backdrop for understanding what I'm up against. Without completely rewriting the entire routine, the best bet seems to be to accept its own mechanism and accommodate it by looping through an AJAX/JQuery routine that dynamically clicks and preloads all the data in the background once the page has displayed its initial content. And I do have access to the IDs of the links in the unordered list; other identifying information could easily be added to it.
Text is not an issue, what could be an issue is the async loading of many large images - that might not start loading in the desired order.
It would be a nice idea not to load your images somewhere hidden inside the document, but instead get from the server a JSON holding all the needed data.
You don't need to emulate clicks on all your list one by one,
you need to simply get i.e: the first 10 images, and as the user advances, load more and more (here the idea is to avoid loading stuff that the user might never explore/see/use) - but it all depends on the User Interface you have.
JSON example:
[
{
"id" : "w125",
"image" : "path/to/image1.jpg",
"content" : "HTML or whatever"
},{
"id" : "w275",
"image" : "path/to/image2.jpg",
"content" : "HTML or whatever is the content"
}
]
I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.
It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.
What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.