This is kind of a nit-picky issue but it's driving me crazy. I've built a boostrap responsive web template that uses Font Awesome icons throughout.
When I go to load or reload a page what seems to happen is that a split second before the font awesome icons load the grid loads and then is populated by the icons. Now because the template is responsive it shutters/jiggles when it loads from a grid without the icons in it to the correct size when the icons come in and take up their respective places.
Does anyone have a suggestion on how to either change the order of what loads first or to hold back the entire page until everything has loaded and then display in one go?
I've attempted to re-arrange what order the CSS files load in (tried swapping bootstrap with font-awesome CSS links)
I'm wondering if there is a JavaScript event that will wait until everything loads before displaying. While this approach found more info on the intertubes it was decided not condoned. However, I didn't see an alternative put forward in the answers I read through.
I've got a crazy feeling that this is so basic that I can't see the wood for the trees, so if I'm just not using the right vocabulary to find this, just give me the terms of what I need to be searching and I'll go off and learn something new.
You could use WebfontLoader to load the font awesome fonts. That way you can use their events and classes to show and hide the grid.
https://github.com/typekit/webfontloader
Related
i want to create some kind of widget/badge that will be included on several websites. It will not be placed inside the page, it shall be shown as overlay on top of the website at a defined position (like on center rightside, bottom left).
You might know those kind of widgets from TrustedShops.
How can i ensure that this included widget always looks same? No matter which css/javascript is active on the website that includes the widget?
Somebody already have experiences which those stuff? Any pitfalls/ideas?
Can i somehow define a css sandbox (like with a iframe?) Or do i need to set all possible values also to their defaults to ensure that including page might not change it?!
One other thought of mine: It could be imported as image. Then you ensure that layout is static, but its somehow hardcoded. The external website creates a dynamic image (via PHP) and this is just shown on including website, but then no interaction is possible ... :(
BR
Marius
I've been searching for a way to implement a gallery in my first ever website (written in HTML).
I basically want to make a page with thumbnails, and, when clicking the thumbnail, a bigger picture to show up (over the gallery, not exiting the gallery), eventually with a title under it, and , when clicking the big picture, to return to the gallery (eventually with a fading effect)
The problem is that I don't even know what I should be looking for, exactly, in this case.
If you don't need to build the gallery from scratch, I recommend using one of the many libraries that you can find online.
Here's a list of some very useful JavaScript/jQuery photo galleries:
Top 10 Free Responsive Image Galleries.
Hope it helps,
Regards.
There are many libraries online that do exactly this. My first google search came up with the following PhotoSwipe. Included in the webpage is a link to their documentation and git repo. If you would like other choices, this website lists 10 libraries that do exactly what you want
I have a table set up on a website I use it to display 9 images with descriptions. I want to be able to click on an image and have it be displayed larger like in a gallery but i would like to not have it change the layout of the page.
I am just starting to work on this web page so almost any way to do this will be helpful.
Lightbox is a pretty commonly used one, but I'd suggest you try and build your own. It's not a terribly difficult thing to program and it will help you grow as a programmer.
Recently I'm working with jQuery UI Carousel (1.0.2) on my Drupal website. So far so good, everything is working without a problem but I'm looking for a way to add some external controls. You know, those little dots beneath the images where the user can navigate from and pinpoint a certain slide.
I took a look to the JS file (you can see it here), but didn't find any proof of such a controls.
Right now, I was only able to write some crappy code who didn't work at all... (so I'm not gonna post it to save you some laughs :))
Anyone with some experience regarding this subject?
Thanks in advance!
I don't have specific experience with the jQuery UI Carousel module, but if you are using Views to generate the content in the carousel, you could always use Views Slideshow. It allows you to add a pager (either numbers or thumbnail images) to your slideshow (carousel).
I am attempting to build out a visual jQuery based browser for thumbnailed assets grouped by the upload date of the asset. The backend part is fine, but I'm having a really hard time finding a workable visual solution that can handle (potentially) hundreds to thousands of assets smoothly. The display of the content is not an issue as it is being handled by a lightbox, I just need to figure out a way to actually display the thumbnails.
I've been trying to interface with this plugin but have been running into a lot of problems once it gets over 100 records, everything just becomes horribly unresponsive. Ideally I want to be able to build ajax into this for loading media as needed rather than a bulk get on page load. Does anyone know of a good plugin that can be leveraged to achieve this effect or at least provide a good user interface for browsing large amounts of content?
To clarify: I have properly generated thumbnails being made when an asset is uploaded, these are what are displayed on the page, and the full size image is only loaded in the lightbox when the thumbnail is clicked. I'm just trying to determine a good way to browse a large quantity of thumbnails sorted by upload date.
It sounds like your scaling the full size images down which will ruin performance. Do the images have a small version counterpart you can use for the thumbnails?
Turns out there really wasn't a good way to implement a prebuild plugin for this situation, the best way to do it for me was to implement a jQuery UI slider and on the stop event of that I then do an ajax get to load the appropriate data into a div with vertical scrolling.
Maybe not the most elegant or prettiest solution, but it works for the situation and looks nice enough.