Develop Reference

Jquery script doen't load in a logical order

I got this code here in a JS file, where I've put two console.log(), one at the beginning and one at the end, to see why I'm having problems targeting the with a specific ID / class. Now I see that the console.log() at the end loads before the one in the beginning. Even when I place a console.log() outside of the file underneath the <script> tag which loads this JS file, it loads before the JS file, which doesn't make any sense to me. How can I fix this problem?
/*!
* jquery.instagramFeed
*
* #version 1.2.7
*
* #author Javier Sanahuja Liebana <bannss1#gmail.com>
* #contributor csanahuja <csanahuja10#gmail.com>
*
* https://github.com/jsanahuja/jquery.instagramFeed
*
*/
(function($){
var defaults = {
'host': "https://www.instagram.com/",
'username': 'username',
'tag': '',
'container': '#instagram',
'display_profile': true,
'display_biography': true,
'display_gallery': true,
'display_igtv': false,
'get_data': false,
'callback': null,
'styling': true,
'items': 8,
'items_per_row': 4,
'margin': 0.5,
'image_size': 640
};
var image_sizes = {
"150": 0,
"240": 1,
"320": 2,
"480": 3,
"640": 4
};
var escape_map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'`': '`',
'=': '='
};
function escape_string(str){
return str.replace(/[&<>"'`=\/]/g, function (char) {
return escape_map[char];
});
}
$.instagramFeed = function(opts){
//console log at the beginning of the function
console.log("Beginning instagramFeed");
var options = $.fn.extend({}, defaults, opts);
if(options.username == "" && options.tag == ""){
console.error("Instagram Feed: Error, no username or tag found.");
return false;
}
if(typeof options.get_raw_json !== "undefined"){
console.warn("Instagram Feed: get_raw_json is deprecated. See use get_data instead");
options.get_data = options.get_raw_json;
}
if(!options.get_data && options.container == ""){
console.error("Instagram Feed: Error, no container found.");
return false;
}
if(options.get_data && options.callback == null){
console.error("Instagram Feed: Error, no callback defined to get the raw json");
return false;
}
var is_tag = options.username == "",
url = is_tag ? options.host + "explore/tags/"+ options.tag + "/" : options.host + options.username + "/";
$.get(url, function(data){
try{
data = data.split("window._sharedData = ")[1].split("<\/script>")[0];
}catch(e){
console.error("Instagram Feed: It looks like the profile you are trying to fetch is age restricted. See https://github.com/jsanahuja/InstagramFeed/issues/26");
return;
}
data = JSON.parse(data.substr(0, data.length - 1));
data = data.entry_data.ProfilePage || data.entry_data.TagPage;
if(typeof data === "undefined"){
console.error("Instagram Feed: It looks like YOUR network has been temporary banned because of too many requests. See https://github.com/jsanahuja/jquery.instagramFeed/issues/25");
return;
}
data = data[0].graphql.user || data[0].graphql.hashtag;
if(options.get_data){
options.callback(data);
return;
}
//Setting styles
var styles = {
'profile_container': "",
'profile_image': "",
'profile_name': "",
'profile_biography': "",
'gallery_image': ""
};
if(options.styling){
styles.profile_container = " style='text-align:center;'";
styles.profile_image = " style='border-radius:10em;width:15%;max-width:125px;min-width:50px;'";
styles.profile_name = " style='font-size:1.2em;'";
styles.profile_biography = " style='font-size:1em;'";
var width = (100 - options.margin * 2 * options.items_per_row)/options.items_per_row;
styles.gallery_image = " style='margin:"+options.margin+"% "+options.margin+"%;width:"+width+"%;float:left;'";
}
var html = "";
//Displaying profile
if(options.display_profile){
html += "<div class='instagram_profile'" +styles.profile_container +">";
html += "<img class='instagram_profile_image' src='"+ data.profile_pic_url +"' alt='"+ (is_tag ? data.name + " tag pic" : data.username + " profile pic") +"'"+ styles.profile_image +" />";
if(is_tag)
html += "<p class='instagram_tag'"+ styles.profile_name +"><a href='https://www.instagram.com/explore/tags/"+ options.tag +"' rel='noopener' target='_blank'>#"+ options.tag +"</a></p>";
else
html += "<p class='instagram_username'"+ styles.profile_name +">#"+ data.full_name +" (<a href='https://www.instagram.com/"+ options.username +"' rel='noopener' target='_blank'>#"+options.username+"</a>)</p>";
if(!is_tag && options.display_biography)
html += "<p class='instagram_biography'"+ styles.profile_biography +">"+ data.biography +"</p>";
html += "</div>";
}
//image size
var image_index = typeof image_sizes[options.image_size] !== "undefined" ? image_sizes[options.image_size] : image_sizes[640];
if(options.display_gallery){
if(typeof data.is_private !== "undefined" && data.is_private === true){
html += "<p class='instagram_private'><strong>This profile is private</strong></p>";
}else{
var imgs = (data.edge_owner_to_timeline_media || data.edge_hashtag_to_media).edges;
max = (imgs.length > options.items) ? options.items : imgs.length;
html += "<div class='instagram_gallery'>";
for(var i = 0; i < max; i++){
var url = "https://www.instagram.com/p/" + imgs[i].node.shortcode,
image, type_resource, caption, date, likes, comments;
switch(imgs[i].node.__typename){
case "GraphSidecar":
type_resource = "sidecar"
image = imgs[i].node.thumbnail_resources[image_index].src;
date = new Date(imgs[i].node.taken_at_timestamp * 1000);
likes = imgs[i].node.edge_media_preview_like.count;
comments = imgs[i].node.edge_media_to_comment.count;
break;
case "GraphVideo":
type_resource = "video";
image = imgs[i].node.thumbnail_src
break;
default:
type_resource = "image";
image = imgs[i].node.thumbnail_resources[image_index].src;
date = new Date(imgs[i].node.taken_at_timestamp * 1000);
likes = imgs[i].node.edge_media_preview_like.count;
comments = imgs[i].node.edge_media_to_comment.count;
}
console.log(date);
console.log(likes);
console.log(comments);
if(
typeof imgs[i].node.edge_media_to_caption.edges[0] !== "undefined" &&
typeof imgs[i].node.edge_media_to_caption.edges[0].node !== "undefined" &&
typeof imgs[i].node.edge_media_to_caption.edges[0].node.text !== "undefined" &&
imgs[i].node.edge_media_to_caption.edges[0].node.text !== null
){
caption = imgs[i].node.edge_media_to_caption.edges[0].node.text;
}else if(
typeof imgs[i].node.accessibility_caption !== "undefined" &&
imgs[i].node.accessibility_caption !== null
){
caption = imgs[i].node.accessibility_caption;
}else{
caption = (is_tag ? data.name : data.username) + " image " + i;
}
html += "<a id='instagramID" + i + "' class='instagramimg instagram-" + type_resource + "' rel='noopener' target='_blank'>";
html += "<img class='instagramicon' src='https://cdn.shopify.com/s/files/1/0278/9644/7113/files/instagram-icon.svg?v=1592246117' alt='instagramicon'>";
html += "<div class='instagramhover'></div>";
html += "<img src='" + image + "' alt='" + escape_string(caption) + "'"/* + styles.gallery_image*/ +" />";
html += "</a>";
}
}
}
if(options.display_igtv && typeof data.edge_felix_video_timeline !== "undefined"){
var igtv = data.edge_felix_video_timeline.edges,
max = (igtv.length > options.items) ? options.items : igtv.length
if(igtv.length > 0){
html += "<div class='instagram_igtv'>";
for(var i = 0; i < max; i++){
html += "<a href='https://www.instagram.com/p/"+ igtv[i].node.shortcode +"' rel='noopener' target='_blank'>";
html += "<img src='"+ igtv[i].node.thumbnail_src +"' alt='"+ options.username +" instagram image "+ i+"'"+styles.gallery_image+" />";
html += "</a>";
}
html += "</div>";
}
}
$(options.container).html(html);
}).fail(function(e){
console.error("Instagram Feed: Unable to fetch the given user/tag. Instagram responded with the status code: ", e.status);
});
return true;
};
// Ending of the code
console.log("Ending instagramFeed");
})(jQuery);
This function gets called like this in the html part. Also here, the console.log("before instagramFeed.JS"); loads together with console.log("after instagramFeed.JS");, and after that I receive the
console.log(date);
console.log(likes);
console.log(comments);
which are inside the for loop of the function.
<script src="{{ 'jquery.instagramFeed.js' | asset_url }}"></script>
<div id="instagram"></div>
<script>
console.log("before instagramFeed.JS");
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'username',
'container': "#instagram",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 10,
'items_per_row': 5,
'margin': 0.2
});
});
})(jQuery);
console.log("after instagramFeed.JS");
</script>

Your code is executed in the following order:
first snippet (definition of instagramFeed plugin) is executed during page load. console.log statements outside of that plugin are executed as well.
window is loaded (all script tag contents are read and executed), your window load handler kicks in. It calls your instagramFeed function the way you set it in the second snippet. before/after instagramFeed.JS logs are executed here. instagramFeed function starts a network call the result of which is processed after the load handler finishes running.
network call response is processed. comments, likes and date are logged at this stage.
As a result, everything is working as expected if I understand the purpose correctly.
UPD: to use the elements generated by network call response handler (provided you have an opportunity to edit the plugin code directly) you can add a function into options object, say onImageElementsCreated and call it after the loop in the plugin. Then you can provide your function as another option in the second snippet.

I can't say this with 100% certainty, as I haven't run the code.
However, I think the line console.log("Ending instagramFeed"); is being run before the line console.log("Beginning instagramFeed");, because it's outside the function $.instagramFeed = function(opts).
The function is created, then the ending log line is called, then something is calling the function, then the beginning log line is called.
Where in your code do you call $.instagramFeed()?

how to create dots in pagination or breadcrumb if they are too much in number

I want to create dots in breadcrumb if they exceeds some specific limit of numbers. I added script, to create breadcrumb but it's not working.
I am stuck where i have to add dots so that when bread crumb item exceeds it hides and create dots
function getBreadCrumb() {
if (window.ActiveTab != 'local') {
$('#fr-h-r-3 .breadcrumb.fr-breadcrumb').html('');
return false
}
/*alert(window.ActiveTab);
if(window.ActiveTab == 'fb'){
$('#fr-h-r-3 .breadcrumb.fr-breadcrumb').html('<li>Facebook-Images</li>');
return false;
}else if(window.ActiveTab == 'ig'){
$('#fr-h-r-3 .breadcrumb.fr-breadcrumb').html('<li>Instagram-Images</li>');
return false
}*/
var currentPath = b.opts.userFolderDefaultPath;
if (b.opts.imageManagerFolders.length > 0) {
currentPath = b.opts.userFolderDefaultPath + b.opts.imageManagerFolders.join('/') + '/';
}
var sArray = currentPath.split('/');
var fArray = currentPath.split('/');
fArray.pop();
fArray.shift();
sArray.shift();
sArray.shift();
sArray.shift();
sArray.pop();
var html = '<li><span class="fa fa-home"></span></li>';
/*console.log('sArray: '+sArray);
console.log('fArray: '+fArray);*/
function getPath(i) {
var hisPath = '';
for (var j = 2; j < (i + 3); j++) {
if (fArray[j] != 'undefined') {
hisPath += fArray[j] + '/';
}
}
return hisPath;
}
if (sArray.length > 6) {
as = 4;
al = (sArray.length - 3)
}
sts = false;
for (var i = 0; i < sArray.length; i++) {
if ((i + 1) != sArray.length) {
if (typeof as != 'undefined' && i == as) {
sts = true;
}
if (typeof al != 'undefined' && i == al) sts = false;
if (sts == false) {
html += '<li><a onClick="$(document).trigger(\'ImageManager.LoadBreadCrumbFolder\',[this]);" href="javascript:void(0);" data-name="' + sArray[i] + '" data-hist="' + getPath(i) + '" data-path="/' + fArray[0] + '/' + fArray[1] + '/' + getPath(i) + '">' + sArray[i] + '</a></li>';
}
} else {
html += '<li class="active">' + sArray[i] + '</li>';
}
//html += '<li class="active">'+sArray[i]+'</li>';
}
$('#fr-h-r-3 .breadcrumb.fr-breadcrumb').html(html);
}

Thank you for your efforts, i was working on this, i solved this by only adding this code into function.
if(typeof as != 'undefined' && i==as) { sts = true; html += '<li>...</li>'; }
where the line is
if (typeof as != 'undefined' && i == as) {
sts = true;
}
this script is generating a pagination you can see in script. and the final output is this.
simple pagination without dots.
checkttttNew-Folder-1New-Folder-1New-Folder-1
when exceeds 6 li then it creates dots. like this.
checkttttNew-Folder-1New-Folder-1...New-Folder-1htesttes2

Is there a cleaner solution for this conditional statement? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Is there a cleaner, more concise way to write the following conditional statement that creates a string in Javascript?
var search;
if (text === '' && user === '' && filter !== '') {
search = filter;
} else if (filter === '' && text === '' && user !== '') {
search = 'email="' + user + '"';
} else if (filter === '' && user === '' && text !== '') {
search = 'text~"' + text + '"';
} else if (text !== '' && user !== '' && filter === '') {
search = 'text~"' + text + '" ANDemail="' + user + '"';
} else if (text !== '' && filter !== '' && user === '') {
search = 'text~"' + text + '" AND ' + filter;
} else {
search = 'text~"' + text + '" AND ' + filter + '" ANDemail="' + user + '"';
}

// using computed switch
var TEXT = 1, haveText = (text !== "") << 0;
var FILTER = 2, haveFilter = (filter !== "") << 1;
var USER = 4, haveUser = (user !== "") << 2;
switch(haveText + haveFilter + haveUser)
{
case FILTER: search = filter; break;
case USER: search = 'email="' + user + '"'; break;
case TEXT: search = 'text~"' + text + '"'; break;
case TEXT+USER: search = 'text~"' + text + '" AND email="' + user + '"'; break;
case TEXT+FILTER: search = 'text~"' + text + '" AND ' + filter; break;
case TEXT+FILTER+USER: search = 'text~"' + text + '" AND ' + filter + '" AND email="' + user + '"'; break;
case FILTER+USER: search = filter + '" AND email="' + user + '"'; break;
default: search = ""; // no search criteria
}
makes two possible errors in the compound if statement version stand out:
The case of FILTER+USER was not tested for and produced a search using TEXT,
The case of no criteria was not tested in the if statement and also produced a search using TEXT.

Off the top of my head, one thing you can do to simplify this is to use the js rule that '' falsy which simplifies this. Also, short circuits with return would help.
var search;
function getSearch(user, text, filter) {
if (!text && !user && filter) return filter;
if (!filter && !text && user) return 'email="' + user + '"';
if (!filter && !user && text ) return 'text~"' + text + '"';
if (text && user && !filter) return 'text~"' + text + '" ANDemail="' + user + '"';
if (text && filter && !user) return 'text~"' + text + '" AND ' + filter;
return 'text~"' + text + '" AND ' + filter + '" ANDemail="' + user + '"';
}
search = getSearch(user, text, filter);
I think that's a little cleaner. It could be cleaned up a lot if the formatting of your string wasn't so strange, but I'm assuming it's specific and required so this maintains the exact formatting you're after in the "search" string.

You can make a function to build the search string, that way you can easily add more variables in the future. The builder is messy, it's a messy process, but it won't get much more messy, no matter how many variables you add. As a side-note, remember that in some cases like this (with a lot of conditionals) you can consider refactoring using polymorphism, that probably wouldn't work for you here, though. The fiddle for this is here: https://jsfiddle.net/ytg1rxu8/
function buildSearchString(text, user, filter) {
var returnString = '';
var strings = [];
if (text) {strings.push('text~ =' + text);}
if (user) {strings.push('email = ' + user);}
if(filter){
strings.push(filter);}
var length = strings.length;
for(var i =0; i < length; ++i){
var s = strings[i];
if(i ===length -1){
returnString += s;
}
else{
returnString += s+' AND ' ;
}
}
return returnString;
}
alert(buildSearchString('', 'there', 'guy'));

The following may fit the criterion "concise", but it may not fit "cleaner":
var text = 'someText';
var filter = '';
var user = 'aUser';
var search = text? 'text~"' + text + '"' : '';
search += search && filter? ' AND ' + filter : filter? filter : '';
search += search && user? ' AND email="' + user + '"' : user? 'email="' + user + '"' : '';
document.write('Search: ' + search); // text~"someText" AND email="aUser"

var search;
if (filter)
search = appendFilter(search, filter);
if (text)
search = appendFilter(search, 'text~"' + text + '"');
if (user)
search = appendFilter(search, 'email="' + user + '"');
function appendFilter(search, f) {
return search ? search + ' AND ' + f : f;
}

How can I open with blank page on this rss javascript nor html?

I have a website which includes this RSS JavaScript. When I click feed, it opens same page, but I don't want to do that. How can I open with blank page? I have my current HTML and JavaScript below.
HTML CODE
<tr>
<td style="background-color: #808285" class="style23" >
<script type="text/javascript">
$(document).ready(function () {
$('#ticker1').rssfeed('http://www.demircelik.com.tr/map.asp').ajaxStop(function () {
$('#ticker1 div.rssBody').vTicker({ showItems: 3 });
});
});
</script>
<div id="ticker1" >
<br />
</div>
</td>
</tr>
JAVASCRIPT CODE
(function ($) {
var current = null;
$.fn.rssfeed = function (url, options) {
// Set pluign defaults
var defaults = {
limit: 10,
header: true,
titletag: 'h4',
date: true,
content: true,
snippet: true,
showerror: true,
errormsg: '',
key: null
};
var options = $.extend(defaults, options);
// Functions
return this.each(function (i, e) {
var $e = $(e);
// Add feed class to user div
if (!$e.hasClass('rssFeed')) $e.addClass('rssFeed');
// Check for valid url
if (url == null) return false;
// Create Google Feed API address
var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + url;
if (options.limit != null) api += "&num=" + options.limit;
if (options.key != null) api += "&key=" + options.key;
// Send request
$.getJSON(api, function (data) {
// Check for error
if (data.responseStatus == 200) {
// Process the feeds
_callback(e, data.responseData.feed, options);
}
else {
// Handle error if required
if (options.showerror) if (options.errormsg != '') {
var msg = options.errormsg;
}
else {
var msg = data.responseDetails;
};
$(e).html('<div class="rssError"><p>' + msg + '</p></div>');
};
});
});
};
// Callback function to create HTML result
var _callback = function (e, feeds, options) {
if (!feeds) {
return false;
}
var html = '';
var row = 'odd';
// Add header if required
if (options.header) html += '<div class="rssHeader">' + '' + feeds.title + '' + '</div>';
// Add body
html += '<div class="rssBody">' + '<ul>';
// Add feeds
for (var i = 0; i < feeds.entries.length; i++) {
// Get individual feed
var entry = feeds.entries[i];
// Format published date
var entryDate = new Date(entry.publishedDate);
var pubDate = entryDate.toLocaleDateString() + ' ' + entryDate.toLocaleTimeString();
// Add feed row
html += '<li class="rssRow ' + row + '">' + '<' + options.titletag + '>' + entry.title + '</' + options.titletag + '>'
if (options.date) html += '<div>' + pubDate + '</div>'
if (options.content) {
// Use feed snippet if available and optioned
if (options.snippet && entry.contentSnippet != '') {
var content = entry.contentSnippet;
}
else {
var content = entry.content;
}
html += '<p>' + content + '</p>'
}
html += '</li>';
// Alternate row classes
if (row == 'odd') {
row = 'even';
}
else {
row = 'odd';
}
}
html += '</ul>' + '</div>'
$(e).html(html);
};
})(jQuery);

try change this:
html += '<li class="rssRow '+row+'">' +
'<'+ options.titletag +'>'+ entry.title +'</'+ options.titletag +'>'
to
html += '<li class="rssRow '+row+'">' +
'<'+ options.titletag +'>'+ entry.title +'</'+ options.titletag +'>'

Add TabIndex to buttons built by JavaScript

I have buttons built with JavaScript and want to add TabIndex for keyboard accessibility. I added accesskey values in this code and in this code:
button41 = new ObjButton('button41',null,679,0,53,32,1,54,'div')
button41.setImages('images/0807_help.jpg','images/0807_help_over.jpg','images/0807_help_over.jpg')
button41.onUp = button41onUp
button41.hasOnUp = true
button41.capture=4
button41.setAccessKey(2)
button41.setTabIndex(2)
button41.build()
But when I tried to add TabIndex, the TabIndex number didn't work. Any suggestions? Here is the script:
function ObjButtonBuild() {
this.css = buildCSS(this.name,this.x,this.y,this.w,this.h,this.v,this.z)
this.div = '<' + this.divTag + ' id="'+this.name+'" style="text-indent:0;"></' + this.divTag + '>\n'
this.divInt = '<a name="'+this.name+'anc" href="javascript:void(null)"'
if(this.accessKeyValue && this.accessKeyValue!=null) {
this.divInt+=' accessKey='+this.accessKeyValue+' ';
}
if( this.altName )
this.divInt += ' title="'+this.altName+'"'
else if( this.altName != null )
this.divInt += ' title=""'
this.divInt += '><img name="'+this.name+'Img" src="'+this.imgOffSrc
if( this.altName )
this.divInt += '" alt="'+this.altName
else if( this.altName != null )
this.divInt += '" alt="'
this.divInt += '" width='+this.w+' height='+this.h+' border=0'
if( !is.ns4 )
this.divInt += ' style="cursor:pointer"'
this.divInt += '></a>'
}

You shouldn't be building your elements that way. Use document.createElement() instead:
var el = document.createElement("a");
if (el){
el.name = "foo";
el.href = "somepage.htm";
el.tabIndex = 3;
}
You can also do it this way:
var el = document.createElement("a");
if (el){
el.setAttribute("class", "someclass");
el.setAttribute("name", "foo");
el.setAttribute("href", "somepage.htm");
el.setAttribute("tabIndex", "3");
}
You can also use jQuery for this:
var el = $("<a>", { name : "foo", href : "somepage.htm", tabIndex : "6" });