CTRL-F (FIND) together with LAZYLOAD feature of FULLPAGE.JS - image

A question about the Fullpage plugin: http://alvarotrigo.com/fullPage/
Fullpage.js creates a fullpage scrolling website design if you use this Jquery plugin on your website.
If you prefer you can add image tags to this website using attribute "data-src" instead of "src" which will lazy load images (they only show up when you scroll to them). This works perfectly, but not when you do a search on the page (CTRL-F). In that case it jumps to the right section and the right word on the page, and if that is a page with images, those images will not show up.
There undoubtedly would be a solution for that, but does anybody knows a solution?

There undoubtedly would be a solution for that,
Not really.
There's an open issue in fullpage.js issues forum and no solution has been found for it yet.
The only solution is using the fullpage.js options scrollBar:true or autoScrolling:false. which will create a normal scroll bar on the site.

Related

How would I push content without overlapping using sidebar menu?

I have tried pushing my sites content using sidebar menu that toggles like the following site:
http://watchmore.co/
Although mine does not seem to be resizing the content/images, what should I do to solve this problem?
I have looked over the site and found that he is using class='img-responsive' on all the images. And also he is using bootstrap grid system that helps you to resize your contents for different screen sizes. You need to integrate your project with bootstrap css from http://getbootstrap.com

Joomla articles and modules not showing on small screens

I'm really quite new to Joomla and I've encountered a problem. On my homepage the article is showing just fine, but all the other modules (except for the menu bar) disappear when I switch to a smaller screen size. On my other pages the article doesn't even show anymore, just the menu bar. I'm using the purity III template. I have no idea what's going on since the settings in the layout of the template indicate that all modules that are showing on a desktop should also be displayed on a mobile device, and I've found no difference in settings in the articles itself. My site.
Thanks for your help!
It sounds like the responsive design hides them on purpose.
Just from a quick peek at your code using inspect element I can see that the class "slideshow hidden-xs" gets a display:none on smaller screen sizes and all of your main content is wrapped in that element. If all of your content is not supposed to be wrapped in that element (which I'm guessing it's not) you're most likely missing a closing tag on a div or something.
Find the missing closing tag (ie: /div, /a, etc) and it will probably solve your problem.
You can update the latest version of Joomla and check again that some problem is coming or not. I yes then download new theme for your website which is compatible with your theme.

Timthumb image thumbnails not appearing on wordpress site

I'm trying to put together a page at http://www.sketch360.com/store/home/ which should show featured products and thumbnails for those products. For some reason the images aren't showing on page load, even though they immediately appear when you either right-click on the image, click on a next/previous arrow, or open 'developer tools' in chrome.
The status of the image styling in css I've noticed, changes from display:none to display:inline-block when you perform any of the above actions to get the images to show.
I've been through the timthumb troubleshooting steps at http://www.binarymoon.co.uk/2010/11/timthumb-hints-tips/ and have changed permissions on all directories according to these instructions. Any help would be much appreciated in getting these images to show up on page load.
The images show up (also using the timthumb method, I believe) on this alternative page: http://www.sketch360.com/store/shop/ but not on the first page (that is going to form the home page for the site: http://www.sketch360.com/store/home/ ).
Any suggestions would be gratefully received.
It isn't a timthumb or wordpress issue. It looks like it is a stylesheet / jQuery issue - where the div that covers the image (used for the highlight on hover) is opaque and covering the images. The funny thing is that when I "Inspect Element", the images all appear.
Double-check your starting styles for class "overdefult" - make sure it has the right opacity or set the background color to transparent. (You could also try removing it temporarily to prove that this div is indeed your issue.)
After many hours banging my head against a brick wall, I have discovered an updated script available that controls the bxSlider used to display these images in li's - and having upgraded the minified script, the problem seems to have resolved itself - just in case there are others needing help on this too.

I can't get the first modal, in the series of modals, to open

Greeting and thanks for your generosity in providing this wonderful forum,
I'm using jQuery Orbit Slider and Reveal Modal. I setup the slider to include content and within the content are hotlinks to a series of modals.
I can't get the first modal, in the series of modals, to open. It appears the plugin is programmatically generating inline CSS that is overriding my CSS stylesheet. Mainly z-index selector is keeping the first modal hidden (or invisible). The subsequent modals in that series work as intended.
When viewed using Chrome Inspect Console shows the inconsistency please note at "featuredContent10" which is where the slide4 resides (it's actually a background image). The data-reveal-id="slide4-1" is the first one in the series of modals. I did not add the inline styles it's in the reveal.js file.
Unfortunately, I don't know enough about reveal and can't find any information regarding a solution. The information I came away with is to ask for assistance on stackoverflow.com. 99.9% of the time I find solution on my own, however, I'm at a lost and my client likes the features of both plugins. Any help you can give me would be very much appreciated.
If it helps here’s a link to the beta site: http://www.partnershipwithearth.com/thecooperationway-1/
Go to Slide 11 lower left link is the culprit. You'll notice the dialog box and close button do appear without the image (slide4-1).
Your expertise is greatly appreciated

Ajax permalink in wordpress Pluto Theme

Having an issue with a wp theme and creator can't seem to help. It's Ajax driven and doesn’t support custom permalink...
So as soon as the website appeared on Google all link referred send to some black page which seem to be out of the website:
Link appearing in Google: www.thaiorchid.be/menus/ (black page)
Compared to the real webpage: www.thaiorchid.be/#menu-item-21
I start to have an idea of solution with: AJAX navigation in Wordpress - Trouble with Permalinks and tried it on the contact page www.thaiorchid.be/contact which doesn't redirect to the black page anymore but it's still not perfect compared to www.thaiorchid.be/#menu-item-19...
Any idea would be really welcome.
Thanks a lot,
Jonathan
Your site does not provide an appropriate fallback for non–JS browsers (e.g. most Google bots to my knowledge). This seems a (serious) shortcoming of the theme without knowing it any further.
If built properly, an “AJAX–enhanced” site like this should allow access to all content through basic HTML requests. If Javascript is available in a client, preferably the same content should be loaded using AJAX requests, allowing e.g. for faster page loads and nice transitions.
Another problem comes from a missing sub navigation. Since your sub menu (fly-out) is not available without Javascript, you would need to provide an alternative way to reach pages two levels deep and deeper.
Here's an example on how this page could/should work without Javascript:
1. Visit homepage
2. Click “Menus” in navigation
3. Opens “Menus” page, showing what the “black page” currently shows
+ proper header/footer
+ main navigation
+ sub navigation for all elements in “Menus” fly–out (“Potages, Entrées, …”)
4. Click “Potages”
5. View “Potages” page, again with proper
header/footer
+ main navigation
+ sub navigation for all elements in “Menus” fly–out
I know, you’re looking probably for a quick solution, maybe a snippet of code or a plugin to resolve your situation. Unfortunately — unless your theme provides you with some help — such a silver bullet doesn’t exist. The current implementation simply approaches the topic of an “AJAX site” in a fairly reckless way IMHO (you will be “happy” to know, that most screen readers won’t be able to access your content either) and until you re–build the theme or fix the structure you’re pretty much stuck with an unaccessible site.

Resources