I have a JQuery-Code like this:
var number_images = 5;
var ct = 1;
// Goto previous Picture
$('#changeImageMinus').on('click', function()
{
if(ct-1>=1 && ct-1<=number_images)
{
ct = ct - 1;
$('.container-bg').css("background-image","url('images/" + ct + ".png')");
}
})
// Goto next Picture
$('#changeImagePlus').on('click', function()
{
if(ct+1>=1 && ct+1<=number_images)
{
ct = ct + 1;
$('.container-bg').css("background-image","url('images/" + ct + ".png')");
}
})
I have images named like 1.png, 2.png ... in the folder images/, so i simply load the images back/forward by pressing a "+" or a "-" button. The problem ist that the loading takes really long and i would like to know if there is a possible way to preload all images into a buffer or something like that. I basically want to load the images all before the site openes so that it will show off faster when i switch them. Thank you very much in advance!
You can do it with JS by using Image class. Create new Image object and set it's src property with path to your picture. Do it for all images before printing page and you should have them preloaded. In this article they describe it (second way).
Just be careful because if you have a lot of pictures it can negatively affect the user experience, especially for the users with slower connection (yes they exist, me for example :D). Imagine that you need to wait few (like 10 or more) seconds for a page to load. The best method in such cases would be preloading the specified amount of images and then loading the rest if needed. The problem of waiting may occure again then but at least user will see your page and not search for some other one :)
Related
I have implemented a basic auto-complete feature using jQuery autocomplete. I am querying DB every time which is making auto-complete thing quite slow. I am looking for ways to make it faster much like Quora.
Here is the code from front-end:
<script type="text/javascript">
var URL2 = '<?php e(SITE_URL); ?>fronts/searchKeywords';
jQuery(document).ready(function(){
var CityKeyword = jQuery('#CityKeyword');
CityKeyword.autocomplete({
minLength : 1,
source : URL2
});
});
</script>
Here is the code from server side:
function searchKeywords(){
if ($this->RequestHandler->isAjax() ) {
$this->loadModel('Expertise_area');
Configure::write ( 'debug',0);
$this->autoRender=false;
$expertise=$this->Expertise_area->find('all',array(
'conditions'=>array('Expertise_area.autocomplete_text LIKE'=>'%'.$_GET['term'].'%'),
'fields' => array('DISTINCT (Expertise_area.autocomplete_text) AS autocomplete_text'),
'limit'=>5
));
$i=0;
if(!empty($expertise)){
$len = strlen($_GET['term']);
foreach($expertise as $valueproductname){
$pos = stripos($valueproductname['Expertise_area']['autocomplete_text'],$_GET['term']);
$keyvalue = "";
if($pos == 0) {
$keyvalue= "<strong>".substr($valueproductname['Expertise_area']['autocomplete_text'],$pos,$len)."</strong>"
.substr($valueproductname['Expertise_area']['autocomplete_text'],$len);
}else {
$keyvalue= substr($valueproductname['Expertise_area']['autocomplete_text'],0,$pos)."<strong>"
.substr($valueproductname['Expertise_area']['autocomplete_text'],$pos,$len)."</strong>"
.substr($valueproductname['Expertise_area']['autocomplete_text'],$pos+$len);
}
$response[$i]['value']=$valueproductname['Expertise_area']['autocomplete_text'];
$response[$i]['label']="<span class=\"username\">".$keyvalue."</span>";
$i++;
}
echo json_encode($response);
}else{
}
}
}
I have researched a bit and so far following solutions are worth looking at:
Query data on page load and store it in COOKIE to be used in future.
Implement some caching mechanism (memcache??). But my website is on Cakephp which does it internal cahcing if I am right. So will it be worth to go in this direction.
Use some third party indexing mechanism like Solr, Lucene etc. Don't know much about this.
Implement a much complex "Prefix Search" myself
What is the right way to go about it? Please help me out here.
I've never tried this but will be doing it soon for a project I'm working on.
I always considered the possibility of during the initial page load recieveing some AJAX (or perhaps just including it in the page) the top 10 words for each alphabet letter.. e.g.
A - apples, anoraks, alaska, angela, aha, air, arrgh, any, alpha, america
B - butter, bob etc.....
This way when user presses A-Z you can instantly provide them with 10 of the most popular keywords without any further requests, as you already have them stored in an array in the JS.
I'm not sure of size/memory usage but this could be extended further to handle the first 2 letters, e.g. AA, AB, AC.....BA, BB, BC.... ZA, ZB, ZZ... of course many combinations such as words starting with ZZ won't have any data unless it's a music site and it's ZZ Top! This means it probably won't take up so much memory or bandwidth to send this data during initial page load. Only when the user types the 3rd letter do you need to do any further data lookups/transfers.
You auto-update this data every day, week or whatever depending on site usage and the most popular searches.
I am adding a solution to my question which I figured out after a lot of research.
Problem was:
I was using Ajax to fetch keywords from database every time a user changes text in search box
I was doing a wild card search to match search item within entire strings and not just starting of keywords for ex. "dev" would return "social development", "development" etc
Solution:
I have a fixed array of keywords (200) which is not going to increase exponentially in near future. So, instead of doing complex indexing I am currently sending all keywords in an array.
I am sending this data in an array on page load since it is small. If it becomes large, I will fetch it in background via some ajax in different indexed arrays.
I am using jQuery's Autocomplete widget to do rest of thing for me.
For highlighting search item, I am using a hack by working around __renderItem. (Copied from Stackoverflow. Thanks to that!!)
Code:
function monkeyPatchAutocomplete() { //Hack to color search item
jQuery.ui.autocomplete.prototype._renderItem = function( ul, item) {
var re = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + this.term + ")(?![^<>]*>)(?![^&;]+;)", "gi");
var t = item.label.replace(re,"<span style='font-weight:bold;color:#434343;'>" +
"$&" +
"</span>");
return jQuery( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + t + "</a>" )
.appendTo( ul );
};
}
function getKeywords(){
//Function that returns list of keywords. I am using an array since my data is small.
//This function can be modified to fetch data in whatever way one want.
//I intend to use indexed arrays in future if my data becomes large.
var allKeywords = <?php echo json_encode($allKeywords); ?>;
return allKeywords;
}
jQuery(document).ready(function(){
monkeyPatchAutocomplete();
var CityKeyword = jQuery('#CityKeyword');
CityKeyword.autocomplete({
minLength : 1,
source : getKeywords()
});
});
Good Morning Justice League of Stackoverflow,
I have here a problem that may stump the panel.
I am creating an interactive post-it for an upcoming event that allows for us to tap into a sql database and post tweets, survey answers and images. We've already tapped into the Twitter API and the survey, so those are A-OK.
The problem lies within loading the images from a location other than the local interactive board's server.
If the image itself is locally hosted, it loads just fine.
If the image is hosted elsewhere, the image will not load, even though I have a trace on the URL of said image.
I'm loading all tweets, surveys and images through an XML load and all the data is loading properly.
I AM loading the image through a smoothing filter so that when the "post-its" are slightly rotated, they are not jagged. Here is THAT code:
import flash.display.*;
var srcImg = _parent._parent.varContent;
urlText.text = srcImg;
var mainHolder = this.createEmptyMovieClip("main", this.getNextHighestDepth());
var original = mainHolder.createEmptyMovieClip("original", mainHolder.getNextHighestDepth());
var smooth = mainHolder.createEmptyMovieClip("smooth", mainHolder.getNextHighestDepth());
var mclListener:Object = new Object();
mclListener.onLoadInit = function() {
var w = original._width;
var h = original._height;
var bmpData1:BitmapData = new BitmapData(w, h, true, 0x000000);//true and 0 color allows for transparency
bmpData1.draw(original);
smooth.attachBitmap(bmpData1,2,"auto",true);//true for SMOOTHING, ;)
reSize(smooth);
original.removeMovieClip();
mainHolder._x = -(smooth._width / 2);
mainHolder._y = -(smooth._height / 2);
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip(srcImg,original);
function reSize(target) {
if (target._width > target._height) {
s = Math.floor((300.85 / target._height) * 100);
}
if (target._width < target._height) {
s = Math.floor((320.90 / target._width) * 100);
}
target._xscale = s;
target._yscale = s;
}
This is a two part script where the bulk loads in the image and places it into an empty movieclip, then adds the smoothing filter. The second part is a resizer that automatically resizes the image and keeps the aspect ratio
Here's the kicker. When I test the flash piece (not embedded in HTML) the thing works 100%.
As soon as I put the swf into an html and view it on a web page, the remote images will not load.
I'm a bit stumped on why this is, could this be a firewall or security issue? Because I work in a high security firewall environment.
Any guidance in this would be most appreciated.
Thank you for your time.
by default flash does not allow cross domain loading of data as a security feature, but it can be overridden.
this may help:
allowDomain (security.allowDomain method) if you can get a swf running on the image server
http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002104.html
A cross domain policy file may also be used on the server to grant access to the swf:
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000470.html
I was wondering if it was possible to query the following:
List of (all) users who like my facebook page, and
Additional information those users have made publicly available (beyond first and last name)
Basically looking to generate detailed marketing stats of users who like my facebook page, if possible. Any suggestions or alternatives welcome.
Thank you.
I am afraid this is NOT possible, follow this bug for more information.
Another proof is the page_fan table you will notice that only the uid field is indexable so you need to know the user id to search it and not the page_id, as you know if a user "likes" a page this would mean he is a "fan" of that page.
After being actively working with the Facebook API for a while now, and following the announcements and API releases (and deprecations) along with the introduction and changes of policies, I can understand that Facebook will only share info about their users by letting them explicitly do so (a.k.a interact/authorize your Apps).
And hence the best thing to do in the absence of such feature is:
Understand your audience through Page Insights
Collect fans interests & info by creating custom apps through Page Tabs and using other Facebook features like Questions
Alright, nobody wants to break Facebook's TOS but they have tied our hands on our own basic data. So, scraping is illegal, but not saving a page. What I have done (and note that I needed this for offline purpose anyway):
Go to https://www.facebook.com/browse/?type=page_fans&page_id={FAN PAGE ID}
Scroll down until you have all of your fans. Save this page on your local machine, let's say, Facebook.html.
Now, using ruby and nokogiri:
require 'nokogiri'
>true
f = File.open('/your_path/Facebook.html')
doc = Nokogiri::HTML.parse(f.read)
doc.xpath('//div[#class="fsl fwb fcb"]/a').each {|link| puts link.content}
Do a graph search likes this: "People who like [your fanpage's name]". You will all the result.
Then create shortcut on your browser with this javascripts code, it will click on the View more link and scrolling until all result are shown in the page:
javascript: i = 0;minutes = 30;counter = minutes * 60;function repeatScroll() {
if (i < counter) {window.scrollTo(0, document.body.scrollHeight);i++;}
setTimeout(repeatScroll, 1000);}repeatScroll();
After that, create other shortcut and run this js code to retrieve all UID from the search result:
javascript:var txt="";e=document.getElementsByClassName("FriendRequestOutgoing");
for(var i=0; i<e.length; i++) {v=e[i].getAttribute("data-profileid");
if(v) txt+=v+"\n"}document.body.innerHTML="<textarea>"+txt+"</textarea>";
A textarea box will appear in the screen with all uid inside. Just copy it to your notepad and import into your Custom Audience in Facebook Ad Manager.
I created and use this code everyday to get all UID with criterial I need.
You can launch any graph search you want.
This is homemade code, so using it without your own responsibility :)
Enjoy them.
It's possible, just not with FQL anymore.
Do a GET of https://www.facebook.com/browse/?type=page_fans&page_id={FAN PAGE ID} and scrape out the users.
Viola.
Now you can get people on your page with this link, or click on Settings button, than on People on the left sidebar. https://www.facebook.com/[PAGENAME]/settings/?tab=people_and_other_pages
If you want to get all the user's photo, press F12 and add these codes to the Console:
javascript:i=0;minutes=30;counter=minutes*60;function repeatScroll(){if(i<counter){window.scrollTo(0, document.body.scrollHeight);i++;}setTimeout(repeatScroll,1000);}repeatScroll();
than, when you reached the bottom of the page:
javascript:var txt="";e=document.getElementsByClassName("img"); for(var i=0; i<e.length; i++) {v=e[i].getAttribute("src"); if(v) txt+="<img src='"+v+"'>\n"}document.body.innerHTML="<textarea>"+txt+"</textarea>";
To display photos: create a HTML page and first insert these lines into that file:
<meta charset="utf-8">
<style>img { width:21px; margin:-1px; }</style>
<div style="width:851px; height:315px;background-color:white;">
<!-- PASTE HERE PHOTOS' CODE YOU GET -->
<span style="color:#3B5998;font-weight:bold;font-size:20px;margin-bottom:4px;">600 like, thank you!</span>
<!-- PASTE HERE PHOTOS' CODE YOU GET -->
</div>
Then create shortcut on your browser with this javascript code, it will click on the View more link and scrolling until all result are shown in the page:
i = 0;
minutes = 30;
counter = minutes * 60;
function repeatScroll() {
if (i < counter) {
window.scrollTo(0, document.body.scrollHeight);
i++;
}
setTimeout(repeatScroll, 1000);
}
repeatScroll();
After that, create other shortcut and run this js code to retrieve all UID from the search result:
var e=document.getElementsByClassName("fsl fwb fcb");
var ids = [];
for(var i = 0 ; i < e.length; i++){
ids.push(JSON.parse(e[i].childNodes[0].getAttribute("data-gt")).engagement.eng_tid);
}
console.log(ids);
load all list
i = 0;
minutes = 30;
counter = minutes * 60;
function repeatScroll() {
if (i < counter) {
window.scrollTo(0, document.body.scrollHeight);
i++;
}
setTimeout(repeatScroll, 1000);
}
repeatScroll();
get id
var e=document.getElementsByClassName("_3cb8");
var ids = [];
for(var i = 0 ; i < e.length; i++){
ids.push(e[i].getAttribute("href"));
}
console.log(ids);
You can get it using facebook open graph.
https://graph.facebook.com/<your-page-name-or-page-id>/likes
For example :
https://graph.facebook.com/chickfila/likes
You need to send graph api call using "id" for more detail about user who like you page.
However, this call will retrieve the other Facebook objects that the page (Chickfila) has liked, NOT the users who have liked the Chickfila page.
I have a site that I want to display ads to 10% of my traffic. I am getting on average around 30,000 hits a day and want 10% of those users to see an ad from one of my advertisers.
What's the best way to go about implementing this?
I was thinking about counting the visitors in a database, and then every 10 people that visit 1 user gets an ad. Or is there a better way of going about it?
I'm no good with math, so I'm not sure what's the best approach.
Generate a random number between 1 and 10, and compare it to a fixed number, and your code will run on average 10% of the time:
if (rand(1,10) == 1) {
echo 'ad code';
}
You can make this per-user instead of per-pageview by storing whether that user was 'chosen' in their session.
session_start();
if (isset($_SESSION['show_me_ads']) || rand(1,10) == 1)
$_SESSION['show_me_ads'] = true;
echo 'ad code';
}
I use Google's DFP (Doubleclick for Publishers) to serve ads on my site. It's pretty robust. You have to have an AdSense account, but that's not very hard to obtain, it's just annoying to wait to be approved.
Once you have it set up and your ads loaded in, you can control how many people see your ad by percentage (such as the 10% you were talking about), total pageviews, etc.
Look into it: http://google.com/dfp
If you'd rather not use 3rd party software, I'd think the simplest way would be to randomize it so 1/10 visitors see your ad. The simple way would be:
if (rand(1,10) == 1) {
echo 'YOUR AD CODE HERE';
}
You said you're not good at math, and I understand that, I'm pretty horrible at it too, but basically, every time the page is loaded, it's "rolling" a 10-sided "dice". Every time it "rolls" a 1 (which would be 1 out of 10 times, or 10%), it'll display the ad. Otherwise, it'll be ignored.
The reason this is better than relying on counting the number of users (aside from simplicity) is that it will still roll 1 10% of the time whether you have 30,000 visitors or 3,000,000.
In its simplest form:
if (rand(1,10) == 1) {
echo $ad_content;
}
if(rand ( 1,10) == 1)
display_ads();
You can use
if(mt_rand(1,10)==10){
//show your code;
}
It will show ads to about 10% users
Why would you show ads to a few unlucky ones instead of randomly deciding per page impression (instead of per visitor)?
In php, you can just go ahead and write:
$adPercent = 10;
if (rand(0, 100) < $adPercent) {
echo '<div class="ads">Buy now!</div>';
}
if this was for google ads, then you would need to make the ad insertion optional (using the prob logic above), suggest something along the lines of Google Ads Async (asynchronous)
<script type="text/javascript"><!--
// dynamically Load Ads out-of-band
setTimeout((function ()
{
// placeholder for ads
var eleAds = document.createElement("ads");
// dynamic script element
var eleScript = document.createElement("script");
// remember the implementation of document.write function
w = document.write;
// override and replace with our version
document.write = (function(params)
{
// replace our placeholder with real ads
eleAds.innerHTML = params;
// put the old implementation back in place
document.write=w;
});
// setup the ads script element
eleScript.setAttribute("type", "text/javascript");
eleScript.setAttribute("src", "http://pagead2.googlesyndication.com/pagead/show_ads.js");
// add the two elements, causing the ads script to run
document.body.appendChild(eleAds);
document.body.appendChild(eleScript);
}), 1);
//-->
</script>
I have some simple JavaScript that determines where a click happens within a browser here:
var clickDoc = (document.documentElement != undefined && document.documentElement.clientHeight != 0) ? document.documentElement : document.body;
var x = evt.clientX;
var y = evt.clientY;
var w = clickDoc.clientWidth != undefined ? clickDoc.clientWidth : window.innerWidth;
var h = clickDoc.clientHeight != undefined ? clickDoc.clientHeight : window.innerHeight;
var scrollx = window.pageXOffset == undefined ? clickDoc.scrollLeft : window.pageXOffset;
var scrolly = window.pageYOffset == undefined ? clickDoc.scrollTop : window.pageYOffset;
params = '&x=' + (x + scrollx) + '&y=' + (y + scrolly) + '&w=' + w + '&random=' + Date();
All of this data gets stored in a DB. Later I retrieve it and display where all the clicks happened on that page. This works fine if I do all my clicks in one resolution, and then display it back in the same resolution, but this, not the case. there can be large amounts of resolutions used.
In my test case, I was clicking on the screen with a screen resolution of 1260x1080. I retrieved all the data and displayed it in the same resolution. But when I use a different monitor (tried 1024x768 and 1920x1080. The marks shift to the incorrect spot.
My question is if I am storing the width and height of the client, and the x/y position of the click. If 3 different users all with different screen resolutions click on the same word, and a 4th user goes to view where all of those clicks happened, how can I plot the x/y position correctly to show that everyone clicked in the same space, no matter the resolution?
If this belongs in a better section, please let me know as well.
:::EDIT::: After applying brock's suggestions, I have attached two screenshots. I clicked on the word If at the beginning of each paragraph in different resolutions. When viewing in both those resolutions, the clicks that happened in the same resolution are directly on the word, when it's a higher or lower resolution, it shifts to the right or left, respectively.
http://img291.imageshack.us/img291/5682/1260x1080.png
http://img27.imageshack.us/img27/8950/1920x1080c.png%20
Update:
Additional issues to consider, the problem may not be perfectly solvable...
At different screen sizes, things like margins (for centered content) will be different. Need to adjust to where "screen size" really becomes the clientWidth after compensating for changing margins.
Also, despite everything, a page just might render differently at different screen resolutions (plus whatever size the user has his browser window at). If this causes lines to wrap differently, it will really throw off comparisons.
Original Answer:
"if I am storing the width and height of the client, and the x/y position of the click. If 3 different users all with different screen resolutions click on the same word, and a 4th user goes to view where all of those clicks happened, how can I plot the x/y position correctly"
This should just be a simple scaling problem.
Pseudo code:
Given:
CapturedMousePosition = {X and Y coordinates of logged machine, in pixels} //-- EG [42, 69]
CapturedScreenSize = {width and height of logged machine, in pixels} //-- EG [1260, 1080]
TargetScreenSize = {width and height of display machine, in pixels} //-- EG [1024, 768]
/*-- Note that client size and/or view-port size, are what we mean by "screen size" here.
This is because the browser will use some unknown fraction of the PC's display resolution.
*/
Then:
TargetMousePosition = CapturedMousePosition * TargetScreenSize / CapturedScreenSize
EG: [42 * 1024 / 1260, 69 * 768 / 1080] -- Be sure to round to *nearest* integer.
If you need to store the place in the document where the user clicked, what you are doing now should be ok.
If you need to store the place in the browser window (why?), you'd have to also store the browser resolution, or a normalized value based on the resolution.