I've got this script which fetches stuff from a JSON. Onclick of the thumbnail, it opens up an iframe next to it. Well I want the iframe to pop out and make the background darker ( you know the drill ). How can I do that?
$(function() {
var i=0;
var twitchApi = "https://api.twitch.tv/kraken/streams";
var twitchData;
$.getJSON(twitchApi, function(json) {
twitchData = json.streams;
setData()
});
function setData(){
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length;
for (; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
$('#twitch').append(img);
img.click(function(){
$('#twitch iframe').remove()
$('#twitchframe').append( '<iframe frameborder="0" style="overflow:hidden; margin-left: 25px; width:400px; height:250px; position: fixed; top: 0; margin-top: 23.55%;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
Related
So I've got this script:
<script>
var twitchApi = "https://api.twitch.tv/kraken/streams";
$.getJSON(twitchApi, function(json) {
for (var i = 0; i < 9; i++) {
var streamGame = json.streams[i].game;
var streamThumb = json.streams[i].preview.medium;
var streamVideo = json.streams[i].channel.name;
<!-- var streamViewers = json.streams[i].streamViewers; -->
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
$('#twitch').append(img);
img.click(function() {
$('#twitch iframe').remove()
$('#twitch').append('<iframe src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
});
</script>
And I want to make that once you click on let's say #load ( which is an image ) or on a button or whatever, it adds +9 items from the JSON. How can I modify the code to get the onClick action which calls for another 9 items from the JSON?
I'm running into a problem when trying to add in the search functionality, showList().
It seems to bog down the client so much that Chrome wants to kill the page each time I type into the input field. I'm clearly a novice JS writer, so could I be running an infinite loop somewhere I don't see? Also, any advice to get the search functionality working properly would be hugely appreciated. I don't think I'm using the correct selectors below for the show/hide if statement, but I can't think what else to use.
$(document).ready(function(){
showList();
searchBar();
});
function showList() {
$("#show-records").click(function(){
$.getJSON("data.json", function(data){
var json = data;
$("show-list").append("<table class='specialists'>")
for(var i = 0; i < json.length; i++) {
var obj = json[i],
tableFormat = "</td><td>";
$("#show-list").append("<tr><td class=1>" +
obj.FIELD1 + tableFormat +
obj.FIELD2 + tableFormat +
obj.FIELD3 + tableFormat +
obj.FIELD4 + tableFormat +
obj.FIELD5 + tableFormat +
obj.FIELD6 + tableFormat +
obj.FIELD7 + tableFormat +
obj.FIELD8 + "</td></tr>");
$("show-list").append("</table>");
}
//end getJSON inner function
});
//end click function
});
//end showList()
};
function searchBar() {
//AJAX getJSON
$.getJSON("data.json", function(data){
//gathering json Data, sticking it into var json
var json = data;
for(var i = 0; i < json.length; i++) {
//putting the json objects into var obj
var obj = json[i];
function contains(text_one, text_two) {
if (text_one.indexOf(text_two) != -1)
return true;
}
//whenever anything is entered into search bar...
$('#search').keyup(function(obj) {
//grab the search bar content values and...
var searchEntry = $(this).val().toLowerCase();
//grab each td and check to see if it contains the same contents as var searchEntry - if they dont match, hide; otherwise show
$("td").each(function() {
if (!contains($(this).text().toLowerCase(), searchEntry)) {
$(this).hide(400);
} else {
$(this).show(400);
};
})
})
}
});
};
body {
background-color: lightblue;
}
tr:first-child {
font-weight: bold;
}
td {
padding: 3px;
/*margin: 10px;*/
text-align: center;
}
td:nth-child(6) {
padding-left: 50px;
}
td:nth-child(7) {
padding-left: 10px;
padding-right: 10px;
}
#filter-count {
font-size: 12px;
}
<html>
<head>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script language="javascript" src="process.js"></script>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>
<a href="#" id='show-records'>Show Records</a><br>
<label id="searchBar">Search: <input id="search" placeholder="Enter Specialist Name"></label>
<span id="search-count"></span>
<div id="show-list"></div>
</body>
</html>
Problem appears to be that you can't treat append as if it was a text editor and you are writing html.
Anything that gets inserted needs to be a proper element ... not a start tag, then some text...then a close tag.
We can however modify your code slightly to produce html strings and then add that at the end
$.getJSON("data.json", function(data){
var json = data;
var html="<table class='specialists'>")
for(var i = 0; i < json.length; i++) {
var obj = json[i],
tableFormat = "</td><td>";
html+= "<tr><td class=1>" +
obj.FIELD1 + tableFormat +
obj.FIELD2 + tableFormat +
obj.FIELD3 + tableFormat +
obj.FIELD4 + tableFormat +
obj.FIELD5 + tableFormat +
obj.FIELD6 + tableFormat +
obj.FIELD7 + tableFormat +
obj.FIELD8 + "</td></tr>";
}
html+= '</table>';
$("#show-list").html(html);
//end getJSON inner function
});
I am dynamically generating textboxes and only 5 textbox are allowed.
Now say i have generated 5 textbox with Txtopt1,Txtopt2,Txtopt3 resp..
and i am removing 2nd textbox and then again I am generating 1 new
textbox then i want to assign Txtopt2 to newly generated textbox
instead of Txtopt4.
This is my Code:
var cnt = 1;
var usedIds = [];
var maxNumberOfTextboxAllowed = 5;
function Generatetextbox() {
if (cnt <= maxNumberOfTextboxAllowed) {
var id = findAvailableId();
var OrderingField = $("<div class='OrderingField' id='OrderingField" + id + "'/>");
var LeftFloat = $("<div class='LeftFloat' id='LeftFloat" + id + "'/>");
var RightFloatCommands = $("<div class='RightFloat Commands' id='RightFloat Commands" + id + "'/>");
var upButton = $("<button value='up'>Up</button>");
var downButton = $("<button value='down'>Down</button>");
var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "' name='TxtoptNm" + id + "'/>");
var removeButton = $("<img class='remove' src='../remove.png' />");
LeftFloat.append(fName);
LeftFloat.append(removeButton);
RightFloatCommands.append(upButton);
RightFloatCommands.append(downButton);
OrderingField.append(LeftFloat);
OrderingField.append(RightFloatCommands);
$("#FieldContainer").append(OrderingField);
cnt = cnt + 1;
}
else
alert("Cant create more than 5 route points")
}
function findAvailableId() {
var i = 1;
while (usedIds[i]) i++;
usedIds[i] = true;
return i;
};
function removeId(idToRemove) {
usedIds[idToRemove] = false;
};
$(document).on('click', "img.remove", function() {
$(this).parent().parent().fadeOut(1000, function() {
if (cnt > maxNumberOfTextboxAllowed)
cnt = cnt - 2;
else if (cnt == 1)
cnt = 1;
else
cnt = cnt - 1;
var id = $(this).attr("id").substr(5);
removeId(id);
$(this).remove();
console.log(cnt)
});
});
.LeftFloat
{
float: left
}
.RightFloat
{
float: right
}
.FieldContainer
{
border: 1px solid black;
width: 400px;
height: 300px;
overflow-y: auto;
font-family:tahoma;
}
.OrderingField
{
margin: 3px;
border: 1px dashed #0da3fd;
background-color: #e8efff;
height: 50px;
}
.OrderingField div.Commands
{
width: 60px;
}
button
{
width: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="FieldContainer">
</div>
<button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>
Keep track of the IDs you've assigned, and always take the lowest ones available.
Also, You don't need to use escape characters inside your html, you can use the single quote marks to specify strings.
Something like this should help:
var cnt = 1;
var maxNumberOfTextboxAllowed = 5;
var usedIds = [];
function findAvailableId() {
var i = 1;
while (usedIds[i]) i++;
usedIds[i] = true;
return i;
};
function removeId(idToRemove) {
usedIds[idToRemove] = false;
};
function Generatetextbox() {
if (cnt <= maxNumberOfTextboxAllowed) {
var id = findAvailableId();
var fieldWrapper = $("<div class='fieldwrapper' id='field" + id + "'/>");
var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "' name='TxtoptNm" + id + "' />");
var removeButton = $("<img class='remove' src='../remove.png' />");
fieldWrapper.append(fName);
fieldWrapper.append(removeButton);
fieldWrapper.append('<br />');
fieldWrapper.append('<br />');
$("#abc").append(fieldWrapper);
cnt = cnt + 1;
} else
alert("Cant create more than 5 textbox")
}
$(document).on('click', "img.remove", function() {
$(this).parent().fadeOut(1000, function() {
if (cnt > maxNumberOfTextboxAllowed)
cnt = cnt - 2;
else if (cnt == 1)
cnt = 1;
else
cnt = cnt - 1;
var id = $(this).attr("id").substr(5);
removeId(id);
$(this).remove();
console.log(cnt)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc"></div>
<button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>
I have masonry initialized on some "tiles" that include an image. Most of the time I am not having issues but sometimes the tiles lay out in one column when there should be 3 columns. Do you have any idea what the issue might be?
On ready initialization:
$(document).ready(function() {
var $container = $('#news');
$container.masonry({
itemSelector: '.pageNewsItem',
transitionDuration: 0
});
$container.masonry( 'on', 'layoutComplete', function( msnryInstance, laidOutItems ) {debounced = true;} )
});
Dynamically append tiles:
var count = 0;
function placeNewsTiles(news){ //places news tiles
var length = (news.data.length > 20) ? 20 : news.data.length;
var elems ="";
for(var i = 0; i < length; i++){
elems += '<div class="pageNewsItem inactive" id="'+ count + i + '">\
<div class="outerTextWrap">\
<div class="textWrap">\
<a href="' + news.data[i]._url + '">\
<strong>' + news.data[i]._title + '</strong>\
</a>\
<span class="source">' + news.data[i]._source + '</span>\
</div>\
</div>\
<div class="imageWrap"></div>\
<div class="thumbsOverlay" style="display:none">\
<div class="thumbs">\
<div>\
\
\
</div>\
</div>\
<div class="title">\
<div>\
<a href="' + news.data[i]._url + '">\
<div class="theTitle">Read Article</div>\
</a>\
</div>\
</div>\
</div>\
</div>';
getTileImage({total: news.count, i:count + "" + i, url:news.data[i]._url});
}
elems = $(elems);
$('#news').append(elems).imagesLoaded(function(){
//for(var i = 0; i < length; i++) $('.pageNewsItem').removeClass('inactive'); //$('.pageNewsItem').show(1000);
$('#news').masonry( 'appended', elems);
});
newsPage = 0;
count++;
hoverTiles();
}
getTileImage function is called to conduct an ajax call to obtain the tile image. Masonry layout happens on complete:
var cnt = 0;
function getTileImage(args){
var _t = localStorage.getItem("token"),
url = args.url,
i = args.i;
$.ajax({
type: "GET",
url: apiHost+'/api/tileImg?url=' + url + '&token='+_t,
dataType: "json",
success: function(data) {
var img = (data && data.image.src) ? data.img.src : (data && data.image) ? data.image: "";
if(img.indexOf("spacer") > -1|| img.indexOf("blank") > -1 || img === ""){ $('.pageNewsItem#' + i).hide(); }
else $('.pageNewsItem#' + i).find('.imageWrap').append('<img src="' + img + '" />');
},
error: function(e) {
if (e.status == 404) {
//need to get a new token
getToken(getTileImage, url);
}
}, complete: function(){
cnt++;
if ((cnt ==20) || cnt == args.total) {
var $container = $('#news');
$container.imagesLoaded( function() {
$container.masonry( 'layout' );
$('.pageNewsItem').removeClass('inactive');
//$('.pageNewsItem').show();
});
cnt = 0;
}
/*$('#news').imagesLoaded( function() {
$('.pageNewsItem#' + i + ' .thumbs').height($('.pageNewsItem#' + i).outerHeight() - $('.pageNewsItem#' + i + ' .title').height() - 5);
//$('.pageNewsItem').show();
});*/
}
});//end ajax call
}
CSS:
.pageNewsItem {
width: 33.333%;
padding: 10px;
min-height: 150px;
opacity: 1;
transition: opacity 1s ease;
}
#news {
margin-right: 20px;
margin-top: 25px;
}
Try using the console and manually initialize masonry:
$('#news').masonry();
If it is not working, masonry might be already initialized and therefore it's not repositioning the elements. In that case you have to remove masonry from the div and reinitialize it:
$('#news').masonry('destroy');
$('#news').masonry();
I am using this code on my blogger blog.This is the javascript-
<script type='text/javascript'>
var thumbnail_mode = & quot;
yes & quot;; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx, chop) {
if (strx.indexOf("<") != -1) {
var s = strx.split("<");
for (var i = 0; i < s.length; i++) {
if (s[i].indexOf(">") != -1) {
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length - 1) ? chop : strx.length - 2;
while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
strx = strx.substring(0, chop - 1);
return strx + '...';
}
function createSummaryAndThumb(pID) {
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if (thumbnail_mode == "yes") {
if (img.length >= 1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;">
<img src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/>
</span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
And this is the code i am using in div of post element
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<a class='more' expr:href='data:post.url'> read more </a>
<script type='text/javascript'>
createSummaryAndThumb( & quot; summary < data: post.id / > & quot;);
</script>
This is the result:
Twitter is the second most popular social networking site. It is used by celebrities all around world. It is also called a microblogging website... read more
I want read more link just after ' ...' for example-
It is also called a microblogging website... read more
How can i do it, please help me.
Just one solution of many, but give your div prior to the anchor a display:inline; css styling and the anchor will fall to the right of the div content. Either in another included css file, in a style tag, or within the div tag place a style="display:inline".