Alternative til jQuery Lazyload - jquery-plugins

I have searched and searched, but didn't find what I was looking for, so sorry if it's already there. I did a photo blog for a friend and used to implement jQuery Jazyload (http://www.appelsiini.net/projects/lazyload) to load all the pictures along the way, however, it doesn't work in all browsers anymore and he stopped developing it. I heard of http://www.sebastianoarmelibattana.com/projects/jail/, but it will need a lot of extra text and code when you have 500-1,000 pictures on one site. Also I want to be able to load the images lets say 1000px, before they appear in the window.
Do anyone have suggestions/solution or else, to get the problem fixed?
You can view his site here: www.theblackguido.com (NSFW)
Thank you in advance.
Kristian

It is the part of automatically removing image src which does not work anymore. Version 1.5 released Dec 23, 2009 provided alternative where you must alter HTML and store image url in original attribute. I renamed it recently to data-originalto be HTML5 friendly. I also updated to documentation which better explains how to use it.
But yes. The way Lazy Load used to work is not possible anymore. Before you could just drop in the JavaScript and it handled everything automagically. Due to changes in new browsers you now must alter the HTML.
PS. Lazy Load is not dead. It was just orphan for a while.

Related

How do you see your html edits after you reload (Firefox DevTools)?

I feel like this should be really easy to find if it exists, but I've been googling for 10 minutes. I don't see it mentioned in the official documentation.
I'm trying to troubleshoot a solution to a problem. The solution requires rearranging the order the head child elements.
It's trivial to make that change with Firefox devtools, but I don't know how to view the page with those changes; if I reload (ctrl+r), the HTML goes back to the server version. Does this feature exist?
FWIW, I can find ways of doing this for CSS and JS changes.
There is currently (as of Firefox 92) no such feature of re-applying HTML changes.
What I found is a feature request in Mozilla's bug tracker.
At the moment, the only workaround for this is to directly transfer the changes on the server side script creating the HTML output once you've done them in the Inspector.
Note: It requires some heuristics to re-apply changes to HTML in the browser because the resources served over the network could change in the meantime.
For CSS, the simple DevTools solution is to replace a file entirely by the saved one. For JavaScript, they have some heuristics to recognize where a line moved when code has changed between two reloads. Though those solutions cannot be transferred to HTML easily, as it is generated dynamically most of the time.

How is this interactive website made?

I am trying to make a website similar to this and I'd like to know how this website was made. The website is also run on desktop and has a mobile app too so there's no HTML or anything in the back end.
Any ideas?
You can use Wappalyzer to identify the technologies used for this Website.
https://www.wappalyzer.com/
Result for https://realtimeboard.com/signup/
as mentioned you can use https://www.wappalyzer.com/ or http://builtwith.com to know the technologies used, further more you can view the webpage source or use the inspect element tool to have a better idea of what is going on. and ofcourse there is HTML used in that page whether it was automatically generated or manually

Wrong URL used when accessing article through a module

I have an annoying problem and am hoping someone will be able to help.
We use quite a few extensions on our Joomla site (Roksprocket mainly but also Global News Filter for instance).
The modules themselves are working fine however when I click on an article in one of these modules the article opens but it doesn't use the nice URL that should be displayed (we have Search Engine Friendly URLs set to Yes and Use URL rewriting set to Yes). This happens for all modules that draw off a category (so I don't think its linked to a specific extension).
For instance on our Case Studies page if you click on Read More on the RSA Case Study you get this URL
http://www.assima.net/en/resources/case-studies/99-home/resources/case-studies/ats-case-studies/649-case-study-rsa
but what you should get is the menu item URL associated with this article which is this
http://www.assima.net/en/resources/case-studies/ats-case-studies/rsa
I don't think there is anything wrong with our .htaccess as I reverted back to the default Joomla one and it still occured.
Also this used to work perfectly. I first noticed it around October or November last year.
If anyone has any ideas I would really appreciate it, I've googled the problem many times and not found any help.
Thanks
Emma
FIXED.
Due to a Joomla bug. Fixed by overwriting the route.php file as described in this post: http://forum.joomla.org/viewtopic.php?f=625&t=831007&start=30

Why do my images break in Visual Studio when they have the word "order" in them?

I've been banging my head trying to find the cause of why my images weren't loading, heres my basic work flow.
create image in Photoshop CS5
export for web/device (PNG/GIF/JPG)
save to images folder
drag the images into visual studio with the
rest of them
Now I've been using this method for a very long time, and after returning from holidays I couldn't figure out why this wasn't working any more. When the page loads it shows the missing image icon. Firebug couldn't locate the image, CSS was not reading it neither would an <img> tag.
A LONG time later it turns out I found the root cause, my image was named "order_header_bg.png" if I dropped the word "order" from the title it appeared!
I can't figure out why its doing it, I can't find any docs on image naming conventions, so the only work around is not to include the word. Its not a problem but I'm more curious as to why is doesn't behave as expected. Is this unique to my environment?
Do you have any ad-blocking software installed on your machine? They can be rather aggressive about what they block.
I had a client who had Norton Ad Blocker installed and was reporting that she could not see the navigation on her site. Her particular problem was that she was running an advertising agency, and thus all of her links were deemed as spam.
To answer my own question: Its goosed.

How can a browser extension alter the image

I have an April fools prank in mind and I will probably need some time to figure it out, so that's why I'm early:
I want to install an extension in the browser (needs to target botch FF and IE, so a cross browser implementation would be best) of my friend so that if he hits the news page he is visiting every morning, a fake image will make him think that he has been selected. The problem is, that I cannot just swap the images. I have to use the actual image from that website and put his head on the body of someone else.
I do have some graphics guys that can do that sort of stuff. My problem over here is to hook into the rendering process and do my own alterations to the image before it gets rendered. That is, taking the image, doing stuff to it and then passing in the modified image to the browser so that it is being redered instead of the original one.
Is that possible using extensions? If it may be only possible with eihter FF or IE, I might get him to use the browser of choice but I'd highly appreciate your suggestions, code snippets and starting points for research. Are there browser extensions that can do similar stuff?
Cheers everyone. There is a lot of reputation in that game so I don't care if it takes weeks or even months to complete the job.
Thank you guys, looking forward to suggestions!
Max
I think your intentions are harmless, but I must warn you: not all people may find your prank funny. But if you are sure that your friend will enjoy such a prank, it's really easy to set up.
You can use BFilter with site-specific filter to replace the image URL (it is very easy, just look at its examples and documentation). So when the user tries to open the web-page he will see your image instead of original picture. BFilter can be used as transparent proxy. I do not know how to setup transparent proxy in Windows, so you have to figure this part yourself. Alternatively, you can configure all installed browsers to use your filtering proxy.
You can use any other filtering proxy instead of BFilter.

Resources