My brand new job is full of wonderful and awful surprises. one of the most interesting part of this job is the will to enhance, accelerate, make everything scale.
And today, first real problem.
Here's the deal : we get up to 20 list elements, each one of them displaying its own Facebook share, Twitter share, and Facebook Like button.
As you can imagine, 60 iframes opening is just a pain for user experience.
My question : anybody has already been facing such problems, and what would you recommend to upscale these performance issues ?
While I'm thinking of an AddThis implementation, I hope there are other solutions I could consider.
Best way to improve performance is not to copy paste the code from facebook plugins.
Facebook 'Like Button' code looks like:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Issue with this is, if you have 20 like buttons, then 20 Divs are created with id="fb-root" and 20 times the script for all.js is called. Best way is to move the
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
to header of page and whenever you want a like button, only use
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Same goes for facebook comments & other plugins.
Also, foir some plugins facebook provides option to either use xfmbl or iframe code. Always pick the iframe code because facebook's js has to parse all xfbml code and convert to iframe. It causes a lot of DOM insertions and slows down the page.
Hope this helps!
Related
I'm working on a news publishing site that needs to load in stories from an RSS feed below the current news page. I've been using InfiniteAjaxScroll (http://infiniteajaxscroll.com/) to some success however, I've hit a brick wall. There is not way for me to dynamically change what story should load in next as you scroll down the page.
Does anyone know of any other plugins, tutorials, examples that replicate behavior like this. I've searched but come up with nothing that meets these requirements.
I'm trying to create something similar to what the Daily Beast has implemented on their site.
http://www.thedailybeast.com/articles/2014/11/05/inside-the-democrats-godawful-midterm-election-wipeout.html
How do they know what stories to load in?
Thanks!
If you're using the InfiniteAjaxScroll library, the "next story" is whatever link you define as the next URL which can be dynamic for each story you load.
Imagine your first story's HTML as something like this
<div class="stories">
<div class="story">
...
</div>
</div>
<div id="pagination">
next
</div>
Then in the storyC.html you have
...
<div id="pagination">
next
</div>
Assuming you're using some sort of dynamic backend, you would use some sort logic to grab a related story and just set that URL as the "next" URL.
I have this problem I'm facing. I have been working on a project using Grails based on the advice from a friend. I'm still a novice in using Grails, so any down to earth explanation would be highly welcomed.
My project is a web application which scans broken or dead links and displays them on a screen. The main application is written in Java, and it displays the output (good links, bad links, pages scanned) continuously on the system console as the scan goes on. I've finished implementing my UI, controllers, views, database using Grails. Now, I will like to display actively in a section of my GSP page say forager.gsp the current link being scanned, the current number of bad links found and the current page being scanned.
The attempts I have tried in implementing this active display include storing the output my application displays on the console in a table in my database. This table has a single row which is constantly updated as the current paged scanned changes, number of good links found changes and number of bad links found changes. As this particular table is being updated constantly, I've written an action in my controller which reads this single line and renders the result to my UI. The problem I'm now facing is that I need a way of constantly updating the result being displayed after an interval of time in my UI. I want the final output to look like
scanning: This page, Bad links: 8, good links: 200
So basically here is my controller action which reads the table from the database
import groovy.sql.Sql
class PHPController {
def index() {}
def dataSource
def ajax = {
def sql = new Sql(dataSource)
def errors = sql.rows("SELECT *from links")
render (view: 'index', template:'test', model:[errors:errors])
}
}
Here is the template I render test.gsp
<table border="0">
<g:each in="${ errors }" var="error">
<tr><td>${ error.address }</td><td>${ error.error}</td><td>${ error.pageLink}</td></tr>
</g:each>
</table>
For now I'm working with a test UI, which means this is not my UI but one I use for testing purposes, say index.gsp
<html>
<body>
<div><p>Pleaseeee, update only the ones below</p></div>
<script type="text/javascript">
function ClickMe(){
setInterval('document.getElementById("auto").click()',5000);
alert("Function works");
}
</script>
<div id="dont't touch">
<g:formRemote url="[controller:'PHP', action:'ajax']" update="ajaxDiv"
asynchronous="true" name="Form" onComplete="ClickMe()" after="ClickMe()">
<div>
<input id="auto" type="button" value="Click" />
</div>
</g:formRemote>
<div id="ajaxDiv">
<g:render template="/PHP/test"/>
</div>
</body>
</html>
The div I'm trying to update is "ajaxDiv". Anyone trying to answer this question can just assume that I dont have an index.gsp and can propose a solution from scratch. This is the first time I'm using Grails in my life so far, and also the first time I'm ever dealing with ajax in any form. The aim is to dynamically fetch data from my database and display the result. Or if someone knows how to directly mirror output from the system console unto the UI, that will also be great.
It sounds like a form would be appropriate for your needs. Check out the Grails documentation on forms. You should be able to render a form with the values you would like without too much trouble. Be sure to pay attention to your mapping and let me know if you have any questions after you have set index.gsp up to render a form for your values.
Rather than add Pin It buttons through our site, I would like to simply control what images show up in Pinterest's "Find Image" results if a user decides to pin one of our URLs.
As of now, "Find Images" allows the user to scroll through the images it finds on the page so they can select which image to pin. The "found" images start with the first jpg in the html file, I'm assuming (could that be a bad assumption??). On our site, this forces a user to scroll through about 15 navigation and promotion images before arriving at the featured product image. Is there any way to specify this image to show first in those results? Maybe through a meta tag, or by adding a class or id to the element?
Without a public Pinterest API, this seems like just guesswork, but I wanted to see if anyone else has run into this, or solved this. Thanks.
A lot of search results including the Pinterest Help Center talk about using nopin in HTML elements, which is invalid HTML. What they don't document is a data attribute to the same (well formed) effect.
<img src="foobar" data-pin-nopin="true" />
Adding the nopin attribute will exclude the image from appearing on Pinterest:
<img src="..." nopin>
I solved this by simply loading the image before all others in the page. In this case, I gave it width="0" and height="0" (you could also give it style="position: absolute; left: -9999px; top: 0;" just to be sure).
This won't break the page layout, but will force Pinterest to find this image first. The only downside is that the browser will load the page a few milliseconds slower, but if you're reusing this image later in the page anyway, you should make up for lost time then.
Pinterest will find any images from <img> tags (it will ignore CSS background images) that are at least 80px x 80px.
The order the images show up on in the Pinterest list is determined by the order they are specified in the HTML.
As you have discovered, you can alter the CSS of an image to "hide it" without actually hiding it by either moving it off the page with absolute positioning or 0 height and width. Any images that are set to display: none will not be picked up by Pinterest.
You can instruct the share preview to only grab specific images from the page by using the “image_include” configuration option. First, set image_include to your desired class name (id selectors are not allowed, only class selectors), then add that same class name to each of the images on the page that should be grabbed. For image_include, don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
</script>
Once image_include has been defined with a class, add that class to the desired images on the page. In this example, the only images on the page that will be grabbed, will be the images with the at_include class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
I was reading this blog which suggests the following:
Use the global no pin flag to prevent pinning on the whole site
Manually add the Pin It widget to those images you want to make pin-able.
Given Pinterest's webmaster tools appear to only have a blacklist, rather than a whitelist option (that you are seeking), this could be a possible solution. Another stated benefit of this is you can also supply suggested pin text through the Pin It widget.
Only downside to this I guess is that it may break the user's own Pin tools. Pinterest does allow you to supply a custom "denied" message, so I guess you can say "please use our site's pin buttons directly".
I've tried this, and it works. It seems like a decent approach, at least until Pinterest sees fit to add some better tools, such as an image whitelist option. The main drawback is needing to add Pin-it buttons on every image you want to enable for your users & your users may be annoyed that they can't pin anything.
Unfortunately, there is no way to mark several images on your page as preferred, but you can mark one image to stay at the top of your images when someone pin it. Specify this meta-tag in <head>:
<meta property="og:image" content="http://YOUR-DOMAIN.com/IMAGE.jpg"/>
I have not found official confirmation for this feature, but it works great with addthis sharing plugin.
Add this script before the actual call to pinterest. And set images that you do not want to show with a class called 'nopin'
<script type="text/javascript">
var addthis_config =
{
image_exclude:'nopin'
}
</script>
<div id="toolbox" class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_pinterest"></a>
</div>
</div>
If anyone is using AddThis, please check this thread: http://support.addthis.com/customer/portal/questions/1570789
AddThis has some, uh, unique functionality that affects the image picker presented. As in, when there is only one image on the page, it ignores the defined og:image.
If you set that lone image to be excluded, then the image picker won't show any images for selection.
The Problem:
I am working on a site where I wanted to use JQTransform to quickly get a good looking form for a contact page. Also, to avoid the customer getting junk, I decided to add reCAPTCHA. I ran into the issue of JQTransform styles for the textbox causing the elements in the reCAPTCHA to be displaced.
It seemed like the type of problem that would have a simple fix but I struggled with it for a while.
I tried the solution at:
JQTransform - Exclude an element from styling?
This did not solve the issue, nor did a few other answers to the "How do you make JQTransform stop JQTransforming an element?" question.
What has produced usable results is adding:
<script type="text/javascript">
var RecaptchaOptions = {
theme: 'clean'
};
</script>
This changes the reCAPTCHA to a format that looks better in the form anyway. But it leaves 2 textbox styles. One that is your normal default textbox and another underneath that is the JQTransform rounded corner, light blue on hover/focus textbox.
Then I added:
$(function () {
$( "#recaptcha_response_field" ).attr('style', 'border: 0px; padding: 5px; solid #3c3c3c; width: 302px;');
});
and this alters the style that reCAPTCHA has for the textbox. Now the textbox looks like the other inputs of the form. I am pretty happy with the result.
(I know you're now asking: "Then why are you here?")
The Question:
Is there a way to have JQTransform ignore any input,checkbox,etc that is in the <form></form> by wrapping those in a div?
If I want to use JQTransform with some other plug-in in the future I would like to be able to just drop it in to a div like:
<div class="donot-jqtransform">
<?php
echo printCaptchaPlugin();
?>
</div>
or
<div class="donot-jqtransform">
<%= PrintPasswordValidationPlugin() >
</div>
That way I don't have to worry about what the code brings into the form and it will work and look as intended. That's the idea of having the abstraction in the first place, right? So if I want to switch out reCAPTCHA with another option, all I do is replace code in the printCaptchaPlugin() function and all should be bacon(good) for any form that uses it.
well i've made a new library - csTransPie – basing it on jqtransform – jqtransform is a great library but it really has many problems
I'm creating regular input fields (css styled) and you won't have those problems
https://github.com/pkoretic/csTransPie
It’s a work in progress but even now it’s better than jqtransform (more than half of the css rewritten, many bugs solved, clean css…)
now you can use it per element with just one class!
all suggestions are welcome!
Sorry if it's bad form to pile in on an old answered question, but I found this as I had the same problem.
I didn't want to add another library to my project, so I amended the jqtransform.js to include this line in the TextArea handler (line 221-ish)
if (textarea.parents().hasClass('jqTransformIgnore')) { return; }
I then just had to add the jqtransformIgnore class to the recaptcha div...
<div class="g-recaptcha jqTransformIgnore" data-sitekey="blahblahblah"></div>
... and that did the trick!
Well I'm having a bit of an issue, I have an application that uses DOMDocument to display some content but it is removing some code that is needed for FBML and a Google +1 button to display.
For example, Facebook's like button is <fb:like>, it is removing fb: from the string. Google's +1 button is like <g:plusone> and it's removing g:.
Is there any way to make it not remove that part of the code?
You can solve both issues.
With Facebook like button, you will want to use the HTML5 version. See: https://developers.facebook.com/docs/reference/plugins/like/
ex: <div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
With Google's Plus one you can use the HTML5 version as well. See: https://developers.google.com/+/plugins/+1button/
ex: <div class="g-plusone" data-size="tall" ... ></div>