Insert image in Bootstrap Popover - javascript

I am using Bootstrap Popver. I have inserted some data in the popover and want to insert a image as well. This is what I have tried.
Code:
var img = '<div id = "image"><img src = "http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" /></div>';
var button = "<button title = " + obj.hostname + ", " + gpu.toUpperCase() +
" data-content = \"" + metric_name[metric] + ": " + display_val + img + "\"" +
" data-id=\"" + detailed_summary + "\"" +
" data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ": " + display_val + "\"" +
" class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
" data-toggle=\"modal\" " +
" data-html=\"true\" " +
" rel=\"popover\" " +
" data-target=\"#hostInfo\" " +
" href=\"#infoModal\"></button>";
Initialisation:
$('button').popover({
trigger: "hover",
placement: get_popover_placement,
html: true
});
I have seen some examples on Stack Overflow, but it didn't work for me as I want to insert it inside the button declaration.

Make use of the content setting of the popover function:
$('button').popover({
trigger: "hover",
placement: get_popover_placement,
html: true,
content: img //loads the image inside the popover container
});
DEMO

I have solved it using the code below.
button = "<button title = " + obj.hostname + ", " + gpu.toUpperCase() +
" data-content = \"" + returnPOContent(metric_name[metric], display_val) + "\"" +
//" data-content = \"" + metric_name[metric] + ": " + display_val + "\"" +
" data-id=\"" + detailed_summary + "\"" +
" data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ": " + display_val + "\"" +
" class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
" data-toggle=\"modal\" " +
" data-html=\"true\" " +
" rel=\"popover\" " +
" data-target=\"#hostInfo\" " +
" href=\"#infoModal\"></button>";
function returnPOContent(mName, dVal) {
var popOverContent = mName + ": " +dVal+"</br><div id='test'><img src='http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg'/></div>";
return popOverContent;
}
$("button").popover({
trigger: "hover",
placement: get_popover_placement,
html: true
});

Related

webview highlighting not working

After loading this code into webView:
String fun = "javascript:function getTextPage(){" +
" if(document.caretRangeFromPoint){" +
" var caretRangeStart = document.caretRangeFromPoint(0, 0);\n" +
" var caretRangeEnd = document.caretRangeFromPoint(window.innerWidth, window.innerHeight);\n" +
" } else {\n" +
" return null;\n" +
" }" +
" var range = document.createRange();\n" +
" range.setStart(caretRangeStart.startContainer, caretRangeStart.startOffset);\n" +
" range.setEnd(caretRangeEnd.endContainer, caretRangeEnd.endOffset);\n" +
" alert(range.toString());" +
"};";
loadUrl(fun);
loadUrl("javascript:getTextPage()");
method findAll() or findAllAsync() find text but doesn't highlisht it

Is it possible to pass a list/array of arguments to a JS function from C#?

For instance Is it possible to pass the following parameters as arguments to a JS function from code-behind?:
ddlLines.Attributes.Add("onchange", "setPanel("
+ " '" + ddlAdd.ClientID + "', "
+ " '" + nCkPTitle.ClientID + "', "
+ " '" + manCkEntry.ClientID + "', "
+ " '" + nCkLabel.ClientID + "', "
+ " '" + txtRefNo.ClientID + "', "
+ " '" + TCEE.pval + "', "
+ " '" + TCEE.ptxt + "', "
+ " '" + ddlLines.ClientID + "' "
+ ");"
At this time my JS function argument list is as follows:
function setPanel(ddlClientId, lblClientId, lblManCLientId,
lblRefNo, altRefNo, altValParm, altTxtParm, ddlLinesClientId){
...
}
I would like to be able to dynamically send an indeterminate list of parameters as arguments to the JS function from the code behind.
I have researched the .apply() function, but have not been able to use it successfully.
You just need to add [] ,it is means Array in js
ddlLines.Attributes.Add("onchange", "setPanel("
+ " ['" + ddlAdd.ClientID + "', "
+ " '" + nCkPTitle.ClientID + "', "
+ " '" + manCkEntry.ClientID + "', "
+ " '" + nCkLabel.ClientID + "', "
+ " '" + txtRefNo.ClientID + "', "
+ " '" + TCEE.pval + "', "
+ " '" + TCEE.ptxt + "', "
+ " '" + ddlLines.ClientID + "'] )"
);
But I suggest that you can use json here,such as
ddlLines.Attributes.Add("onchange", "setPanel("
+ " {'aaaID':'" + ddlAdd.ClientID + "', "
//...
+ " 'zzzID':'" + ddlLines.ClientID + "'} )"
);

next line for a html code on jquery [duplicate]

This question already has answers here:
Can you have multiple lines in an <option> element?
(5 answers)
Closed 8 years ago.
I have here my jquery (coffeescript)
if value.kind != 'Quasi-Judicial'
if value.court_agency !in court_agency_with_branch
if value.court_agency != 'Department of Justice'
#court_agency = "<option value=\"" + value.id + "\"> Branch "+ value.branch_division + ", " + value.court_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
else
#court_agency = "<option value=\"" + value.id + "\">" + value.court_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
else
#court_agency = "<option value=\"" + value.id + "\"> Division "+ value.branch_division + ", " + value.court_agency + "</option>"
else
#court_agency = "<option value=\"" + value.id + "\">" + value.department + ", " + value.govt_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
on this part
"<option value=\"" + value.id + "\">" + value.department + ", " + value.govt_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
I want to put some code \n
"<option value=\"" + value.id + "\">" + value.department + ", " + "\n" + value.govt_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
but nothing happens.
The value looks like:
Department of Blah blah, City of This thing, Province of this stuff
What possible code I can use to create an output like this:
Department of Blah blah,
City of This thing,
Province of this stuff
Take a look at Can you have multiple lines in an <option> element?.
(What you're looking for is a br tag in an option tag)
Please refer this demo
http://shyalika.com/mutiline_select_example
you can find more information here:
http://shyalika.com/multiline_select_control

JS styling 3 per line

I'm trying to make this so there is 3 on a line then a break then 3 more then a break etc..
Any help?
Code so far http://jsfiddle.net/82wNq/69/
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
var t = "";
$.each(e.streams, function (e, n) {
t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>"
});
$("#content").html(t)
})
Example:
http://i.stack.imgur.com/h0xvX.gif
DEMO
Create 3 different content divs instead of 1
<div id="content1" class="panel panel-default"></div>
<div id="content2" class="panel panel-default"></div>
<div id="content3" class="panel panel-default"></div>
Style these divs
.panel.panel-default {
width:430px;
display:inline-block;
}
Distribute the results accordingly
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
var t = u = v = "";
$.each(e.streams, function (e, n) {
switch ((e + 1) % 3) {
case 1:
t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
break;
case 2:
u = u + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
break;
case 3:
default:
v = v + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
break;
}
});
$("#content1").html(t);
$("#content2").html(u);
$("#content3").html(v);
})

Multiple embedded operators ((a AND b) OR (c AND not b)) in Android query

I'm trying to perform a query in Android using: return query(selection, null, null, null), but cannot return the needed results when using multiple operators and parentheses. This is what I'm trying to do:
selection = "(KEY_VARIABLE > '5' AND KEY_VARIABLE2 = 'Yes') OR (KEY_VARIABLE < '5' AND KEY_VARIABLE2 = 'No')"
However, the query returns 0 results, because the query does not recognize the parentheses.
Is there a way to form a query in Android using multiple operators with an operator embedded within an operator statement?
UPDATE: There's no exception in logcat. Everything works fine, except for the embedded OR(AND) statements. Here's the code:
public Cursor getTierSchools() {
String range = "";
String range2 = "";
String range3 = "";
double score = LabValues.myscore;
double scoreplustwo = score + 2;
double scoreminustwo = score - 2;
double scoreplusfive = score + 5;
double scoreminusfive = score - 5;
double scoreminusone = score - 1;
range = "( " + KEY_SCHOOLSCORE + " > " + "'" + scoreplusfive + "'" + " AND " + KEY_SCHOOLSTATEBIAS + " = 'Yes' AND " + KEY_SCHOOLSTATELONG + " = " + "'" + LabValues.mystate + "'" + " )";
range2 = " OR " + "( " + KEY_SCHOOLSCORE + " > " + "'" + scoreminusone + "'" + " AND " + KEY_SCHOOLSTATEBIAS + " = 'Yes' AND " + KEY_SCHOOLSTATELONG + " != " + "'" + LabValues.mystate + "'" + " )";
range3 = " OR " + "( " + KEY_SCHOOLSCORE + " > " + "'" + scoreplustwo + "'" + " AND " + KEY_SCHOOLSTATEBIAS + " = 'No'" + " )";
String selection = range + range2 + range3;
return query(selection, null, null, sorting);
}
private Cursor query(String selection, String[] selectionArgs, String[] columns, String sortOrder) {
SQLiteQueryBuilder builder = new SQLiteQueryBuilder();
builder.setTables(FTS_VIRTUAL_TABLE);
builder.setProjectionMap(mColumnMap);
Cursor cursor = builder.query(mDatabaseOpenHelper.getReadableDatabase(),
columns, selection, selectionArgs, null, null, sortOrder);
if (cursor == null) {
return null;
} else if (!cursor.moveToFirst()) {
cursor.close();
return null;
}
return cursor;
}
Basically, I'm trying to integrate AND statements within parentheses, similar to how you would form an equation like: (4+4)/8 = 1 IS NOT EQUAL TO 4+4/8 = 4.5 .
SOLUTION:
range = "(( " + KEY_SCHOOLSCORE + " > " + "'" + scoreplusfive + "'" + " AND " + KEY_SCHOOLSTATEBIAS + " = 'Yes' AND " + KEY_SCHOOLSTATELONG + " = " + "'" + LabValues.mystate + "'" + " )";
range2 = " OR " + "( " + KEY_SCHOOLSCORE + " > " + "'" + scoreminusone + "'" + " AND " + KEY_SCHOOLSTATEBIAS + " = 'Yes' AND " + KEY_SCHOOLSTATELONG + " != " + "'" + LabValues.mystate + "'" + " )";
range3 = " OR " + "( " + KEY_SCHOOLSCORE + " > " + "'" + scoreplustwo + "'" + " AND " + KEY_SCHOOLSTATEBIAS + " = 'No'" + " ))";

Categories

Resources