Basically I'm using bootstrap CSS with the panels / headers
I have an API going from Twitch.tv's Kraken that grabs 3 streams
My problem is it shows the 3 streams in the one box
http://jsfiddle.net/82wNq/28/
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><div id="content1"></div> - <div id="content2"></div></h3>
</div>
<div class="panel-body">
<div id="content3"></div>
</div>
</div>
If anyone could give me any pointers I'd be really greatful
You are adding all elements together in loop.
Re-Create elements & add separately.
DEMO:
http://jsfiddle.net/82wNq/30/show/
CODE:
http://jsfiddle.net/82wNq/30/
function (data) {
var temp = "";
$.each(data.streams, function (index, item) {
temp = temp + "<div class='panel-heading'><h3 class='panel-title'></h3><div id='content1'>" + item.channel.display_name + "</div><div id='content2'>" + item.viewers + "</div></div><div class='panel-body'><div id='content3'><img src='" + item.preview.medium + "'/></div></div>";
});
$("#content").html(temp); }
Related
I have a page where several status can be found. I would like to count all serviceStatus-OK and serviceStatus-DOWN divs on the page. Unfortunately I cannot modify the page, I need to verify all service is up and running. My idea is that, load the page, count all OK status. If 5 service has 5 OK, we are good. If there is any DOWN, we are not ok.
Any ideas?
Source code:
<span id="content">
<div class="status">
<div class="serviceName">
Some name <br />
http://blablaservice1
</div>
<div class="serviceStatus-OK">
OK
</div>
</div>
<div class="status">
<div class="serviceName">
Some other name <br />
http://blablaservice2
</div>
<div class="serviceStatus-DOWN">
DOWN
</div>
</div>
My code:
Elements services = doc.select("span#conent");
Element content = doc.getElementById("content");
Elements servicesOks = content.getElementsByTag("status");
int upCounter = 0;
int downCounter = 0;
for (Element y : servicesOks) {
if (y.hasClass("status-OK")) {
upCounter++;
}
}
for (Element y : servicesOks) {
if (y.hasAttr("status-DOWN")) {
downCounter++;
}
}
System.out.println("OK Systems: " + upCounter);
System.out.println("DOWN Systems: " + upCounter);
My output is:
OK Systems: 0
DOWN Systems: 0
You can find the number of okays and downs like this:
Document doc = Jsoup.parse(input);
Elements OK = doc.select(".serviceStatus-OK");
Elements down = doc.select(".serviceStatus-DOWN");
System.out.println("OK - " + OK.size());
System.out.println("DOWN - " + down.size());
Find all the elements with the names serviceStatus-OK and serviceStatus-DOWN, and then count the number of items of each kind (elemnts is just a list).
I'm trying to retrieve the country code from our API.
$(document).ready(function() {
$.ajax({
url: "http://api.ourapi",
dataType: "json",
success: function( countries ) {
var selectHTML = "";
selectHTML="<select>";
for(i = 0; i < countries.length; i = i + 1) {
country = countries[i];
selectHTML += "<option value=" + country.countryCode + ">" + country.countryName + "(" + country.countryPrefix +")</option>";
}
selectHTML += "</select>";
document.getElementById("countrycode").innerHTML = selectHTML;
}
});
});
<td>
<div class="form-group">
<label class="control-label" for="countrycode"></label>
<div id="countrycode" class="col-sm-6 col-md-12"></div>
</div>
</td>
I'm getting the results. but the problem is that the Bootstrap is not not working on the select element as it's it displaying in old html form.
How could I make it to display in bootstrap manner and also how to decrease the width of select element?
Try adding the form-control class.
You can do this by changing your selectHTML line to the one below.
selectHTML="<select class='form-control'>";
and to align it properly make the following changes to div#countrycode
<div id="countrycode" class="pull-left" style="width:100%;" ></div>
Add the form-control class to the countrycode div. That should format it correctly. You can checkout the bootstrap form docs here: http://getbootstrap.com/css/#forms
To change the width, you can change the number of columns allocated to it in the class, such as changing col-sm-6 to col-sm-4.
Every time you add a nested col, it should be within a new row. Try adding the row class to your outer div
<div class="form-group row">
<label for="countrycode"></label>
<div id="countrycode" class="form-control col-sm-4"></div>
</div>
I have a little problem with LightGallery plugin (lightGallery - Git). I use jQueryMobile.
My gallery is on a specific page. When I arrive on this page, it will request a remote server to get some pics.
Then I initialize LightGallery. No problem the first time.
But when I leave the Gallery Page and come back after (there is a new request to server), lightGallery is not running.
No error in the browser, I have my photos displayed but I can't click on it to run LightGallery like I've done the first time.
My Code:
HTML:
<div data-role="page" id="pageGallery" data-theme="a">
<div data-role="content" class="center-body">
<h3 class="nomGroupe"></h3><br/>
<div class="demo-gallery">
<ul id="lightgallery" class="list-unstyled row">
</ul>
</div>
</div>
</div>
Javscript :
$( document ).on( "pagecontainerbeforeshow", function ( event, ui ) {
var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );
if (activePage[0].id == "pageGallery" ) {
$('#lightgallery').empty();
$(".groupName").empty().append("group "+localStorage['groupName']);
envoieRequete('http://myServer/', {'idGroup' : localStorage['idGroup'], 'token' : localStorage['token']}, 'post', function(output){
if(output.group.photos.length === 0) {
$("#lightgallery").append('<br/><p>Empty for Group : ' + localStorage['groupName']+'</p>');
}
else {
for(i=0; i<output.group.photos.length; i++) {
$('#lightgallery').append('<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="http://myServer/'+localStorage['token']+'/'+localStorage['idGroup']+'/' + output.group.photos[i].id
+ '" data-src="http://myServer/'+localStorage['token']+'/'+localStorage['idGroup']+'/' + output.group.photos[i].id + '" data-sub-html="<h4>PhotoAlt</H4>"><a href=""><img class="img-responsive"\n\
src="http://myServer/'+localStorage['token']+'/'+localStorage['idGroup']+'/' + output.group.photos[i].id + '"/></a></li>');
}
}
});
}
});
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'pageGallery':
$(document).on("tap", "#lightgallery li", function (){
$('#lightgallery').lightGallery({});
});
}
});
You might be using wrong html markup. you can check the following code for reference. This is sample code.
HTML
<div class="row">
<div class="large-12 columns">
<ul class="small-block-grid-2 medium-block-grid-3" id="lightgallery">
<li> <a class="item" href="img/alchemy_icon1.jpg"><img src="img/alchemy_icon1_th.jpg"></a>
</li>
<li> <a class="item" href="img/chandra1.jpg"><img src="img/chandra1-th.jpg"></a>
</li>
<li> <a class="item" href="img/Fish.jpg"><img src="img/Fish-th.jpg"></a>
</li>
</ul>
</div>
</div>
Javascript
$("#lightgallery").lightGallery({
selector: '.item'
});
I have a simple directive that replaces the directive tag with some template HTML. The HTML includes a <div> with a Bootstrap class of "clearfix" (i.e., <div class="clearfix">). When the <div> is part of the template HTML everything works fine; however, when the <div> surrounds the directive tag the template HTML is not rendered.
THIS WORKS:
<div class="panel-body">
<pr-details pr="selectedPr"></pr-details>
<!-- Additional unaffected content -->
</div>
return {
restrict: 'E',
replace: 'true',
scope: {pr: '=' },
template:
"<div class='clearfix'>\n" +
" <div class='pull-right'>\n" +
" <!-- floated content -->\n" +
" </div>\n" +
" <div>\n" +
" <!-- non-floated content -->\n" +
" </div>\n" +
"</div>\n"
};
THIS DOESN"T WORK:
<div class="panel-body">
<div class="clearfix">
<pr-details pr="selectedPr"></pr-details>
</div>
<!-- Additional unaffected content -->
</div>
return {
restrict: 'E',
replace: 'true',
scope: {pr: '=' },
template:
"<div class='pull-right'>\n" +
" <!-- floated content -->\n" +
"</div>\n" +
"<div>\n" +
" <!-- non-floated content -->\n" +
"</div>\n" +
};
The only thing I can figure out is that having the <pr-details> tag between the parent "clearfix" <div> and the the child "pull-right" <div> interferes with the parent-child relationship for the Bootstrap "clearfix" implementation.
Can anyone shed any light on this? Is there a way to get these two things to work together? I can make this work by refactoring the HTML a bit, but I'm curious about to do this for future use.
I'm trying to create a website content management using asp.net and C# and bootstrap. I already done this using asp.net and C# and a server control like gridview but I want create this version one like as wordpress CMS.
I will describe my project to clear my purpose.
First I fill a DataTable from database. This Datatable has messageId int, Subject varchar, name varchar, email varchar, message text, isRead bit, and so on columns.isRead column is bit type for specifies that the message is read or not.
I Fill my DataTable using below Method:
DataTable dt = cls.Fill_In_DataTable("MessageFetchMessage");
Then I generate html text using another method dynamically: on Page_Load
protected void Page_Load(object sender, EventArgs e)
{
messeges = cls.fetchMessages();
}
messege the string variable, will append generated html code to aspx page:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-clock-o fa-fw"></i> Last messages From users</h3>
</div>
<div class="panel-body">
<div class="list-group">
<%=messeges %>
</div>
<div class="text-right">
View All messages <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
the message content has these text from fetchMessages()method:
public string fetchMessages()
{
string post = ""; string readed = "";
DataTable dt = cls.Fill_In_DataTable("MessageFetchMessage");
if (dt.Rows.Count>0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
DateTime dtTemp = DateTime.Parse(dt.Rows[i]["messageDate"].ToString());
if (dt.Rows[i]["isRead"].ToString() == "True")
readed = "MessageReaded";
else
readed = "MessageNew";
post += "<div class='modal fade' id='myModal" + dt.Rows[i]["messageId"].ToString() + "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>"
+ "<div class='modal-dialog' role='document'>"
+ "<div class='modal-content'>"
+ "<div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button><h4 class='modal-title' id='myModalLabel'><span style='font-weight:bold'>Subject</span> : " + dt.Rows[i]["subject"].ToString() + "</h4></div>"
+ "<div class='modal-header'><p><span style='font-weight:bold'>Date</span> : " + dtTemp.ToString("yyyy/MM/dd") + "</p>"
+ "<p><span style='font-weight:bold'>Time</span> : " + dt.Rows[i]["messageTime"].ToString() + "</p>"
+ "<p><span style='font-weight:bold'>Email</span> : " + dt.Rows[i]["email"].ToString() + "</p></div>"
+ "<div class='modal-body'>" + dt.Rows[i]["message"].ToString() + "</div>"
+ "<div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button><input type='submit' ID='btn" + dt.Rows[i]["messageId"].ToString() + "' class='btn btn-danger' onserverclick='btn_Click' value='Delete message' /></div>"
+ "</div></div></div>";
string narrow = Special.TimeToNarrow(dt.Rows[i]["messageDate"].ToString(), dt.Rows[i]["messageTime"].ToString());
post += "<a data-toggle='modal' data-target='#myModal" + dt.Rows[i]["messageId"].ToString() + "' href='#' class='list-group-item " + readed + "'><span class='badge'>" + narrow + "</span><i class='fa fa-fw fa-comment'></i> <span>"
+ dt.Rows[i]["name"].ToString() + "</span> : <span>" + dt.Rows[i]["subject"].ToString() + "</span></a>";
}
}
return post;
}
finally I add server code behind for btn_Click Event:
protected void btn_Click(object sender, EventArgs e)
{
string id = (sender as Control).ClientID;
//Then give Id to database class for CRUD Intractions
}
but btn_Click never called from client side. I search for similar question within 2 days and didn't get answer. please help me :)
Here I will put my Website screen Shots:
Then after click on one of the rows a pop up window will show using modal bootstrap:
Add your Modal, button and any other mark up you have to the ASPX page (mark up). Then you can get your ID on click event. The dynamic generation of your code is not registering the controls with the server side in Webforms.
Once you have captured your Message ID, you can place it in ViewState, Session or a hidden field on the UI. That way you can have the ID to use whenever you need it.