How to get html of large div - javascript

I have a div which has lots of content. And i want to display an alert when content of that div changes(the div is refreshed every 60 sec). I tried $("div#divName").html() but it is not working as the div has a large content. So what an i do?
var $container = $("#load-scores");
$container.load("/include/home.php?ust=" + url_site + "&tz=" + tz);
var s= $("#load-scores").html();
var refreshId = setInterval(function()
{
$container.load("/include/home.php?ust=" + url_site + "&tz=" + tz);
var p = $('#load-scores').html();
if(p.is(s))
alert("changed");
}, refresh_time);
PS:
console.log(p) and console.log(s) is returns empty

You can use jquery's load() as a function.
var $container = $("#load-scores");
$container.load("/include/home.php?ust=" + url_site + "&tz=" + tz, function(){
alert("Changed");
});
var refreshId = setInterval(function()
{
$container.load("/include/home.php?ust=" + url_site + "&tz=" + tz, function(){
alert("Changed");
});
}, refresh_time);

Related

$(document).height returns incorrect height the first time, correct the second time

I am trying to put a pop up screen, and I want to darken the background when pop up opens.
This is the Javascript.
$(document).on('click', '.item', function(){
$("#popUp").css("display" , "block");
var divId = $(this).attr("id");
$.get('portfolio/portfolio.xml', function(file){
$(file).find('item').filter(function() {return $(this).attr("id") == divId;}).each(function(){
var $item = $(this);
var name = $item.find("name");
var description = $item.find('description');
$("#popUpName").html(name.text()) ;
$("#popUpDescription").html(description.text());
var im; var n=0;
$item.find('image').each(function() {
var i = "<img src='" + $(this).text() + "'></img>";
i += "<div>" + $(this).attr("description") + "</div>";
$("#popUpImage").append(i);
});
setPopUpHeight();
$(document).scrollTop(0);
});
});
});
function setPopUpHeight() {
//alert($(document).height());
$("#popUp").height($(document).height());
alert($("#popUp").height());
}
For example: In one case the first time the value is 3701, the second time it's 4196.
Edit: $(document).height, changed from $(window).height.
Edit: I should add that if uncomment the first alert, the second time document.height returns the right value.
Replace $(document).height() with $(window).height().
Also moved the SetPopUpHeight() and scrollTop() calls which need not be called once per 'item'.
$(document).on('click', '.item', function(){
$("#popUp").css("display" , "block");
var divId = $(this).attr("id");
$.get('portfolio/portfolio.xml', function(file){
$(file).find('item').filter(function() {return $(this).attr("id") == divId;}).each(function(){
var $item = $(this);
var name = $item.find("name");
var description = $item.find('description');
$("#popUpName").html(name.text()) ;
$("#popUpDescription").html(description.text());
var im; var n=0;
$item.find('image').each(function() {
var i = "<img src='" + $(this).text() + "'></img>";
i += "<div>" + $(this).attr("description") + "</div>";
$("#popUpImage").append(i);
});
});
setPopUpHeight();
$(document).scrollTop(0);
});
});
function setPopUpHeight() {
//alert($(document).height());
$("#popUp").height($(window).height());
alert($("#popUp").height());
}
If you do $(window).height().top; it should display correctly

DIV Not Being Generated in IE7 with jQuery

I can't figure out why this script isn't working in IE7 and 8. It works fine in all other browsers, but for some reason, in IE7 and 8 this script is only firing the // thumbs hover bit, and not the // loading images bit (which is actually more important). Everything seems to be fine, does anyone have any ideas?
function featuredJS() {
$("[title]").attr("title", function(i, title) {
$(this).data("title", title).removeAttr("title");
});
// loading images
var last = "featured/01.jpg";
$("#thumbs a").click(function(event) {
event.preventDefault();
var position = $(this).attr("class");
var graphic = $(this).attr("href");
var title = $(this).attr("alt");
var description = $(this).data("title");
var currentMargin = $("#full-wrapper #full").css("marginLeft");
var currentWidth = $("#full-wrapper #full").css("width");
var transitionTest = currentMargin.replace("px", "") * 1;
if(last != graphic && ((transitionTest % 938) == 0 || transitionTest == 0)) {
$("#placeholder").before( "<div class='featured'><div class='description " + position + "'>" + "<h3>" + title + "</h3>" + "<p>" + description + "</p>" + "</div><img src=\"" + graphic + "\" /><div style='clear:both;'></div></div>" );
$("#full-wrapper #full").animate({
marginLeft: "-=938px"
}, 500);
$("#full-wrapper #full").css("width","+=938px");
last = graphic;
};
});
// thumbs hover
$("#thumbs .thumb").hover(
function () {
$(this).find(".red-bar").animate({height:"72px"},{queue:false,duration:500});
},
function () {
$(this).find(".red-bar").animate({height:"3px"},{queue:false,duration:500});
}
);
};
Demo page at http://www.weblinxinc.com/beta/welex/demo/
Your problem is caused by not having a margin set to begin with. transitionTest then becomes NaN because the style is auto, not 0px like you're expecting. Consider trying this instead:
var transitionTest = parseInt("0"+currentMargin,10);
This will trim off the "px" for you, as well as handle the case where the margin is a keyword.

jquery listing HTML elements inside setInterval

I used setinterval to slide number of divs every period of time and that worked fine but the problem happend when i made function"getdata()" that testing this animation and returns the width,left postion,text inside Div for each p...please help me to improve the function "getdata()" to get these information about each p which it changes per sec or i value.
ineed to view data like that
1,left is:0,width:60
2,left is:34,width:40
3,left is:66,width:70
I want to make the data_text which is "1 or 2 or 3" is fixed while the width & data_p_l changes for each data_text "u can consider it it's an ID for the element" 4Ex "
1,left is:0,width:60
1>> this is fixed and this line won't be repeated
left is:20>> changing
width:20>> changing
Ihopt that i've cleared my question.
Thanks alot.
The HTML:
<div id="test"></div>
<div id="center">
<p id="th">3</p>
<p id="s">2</p>
<p id="f">1</p>
</div>
The jQuery:
$(document).ready(function(){
var i = null;
var width = $('#center').width();
var timer = setInterval(function() {
$('p').each(function() {
$(this).css({'left': $(this).position().left + i});
});
getdata('p' ,'#test');
i+=1;
},500);
function getdata(parentdiv,showdiv){
$(parentdiv).each(function(){
var $this = $(this);
var width = $this.width();
var data_p_l= $this.position().left;
var data_text= $this.text();
var dataset = data_text + ",Left value is: "+ data_p_l + ",
width value is: "+ width ;//+ ",id value is: "+ data_id;
$(showdiv).text($(showdiv).text() + ' ' + dataset);
});}
});
I'm not exactly sure what you are trying to do, but This might help. First in this section:
function getdata(parentdiv,showdiv){
$(parentdiv).each(function(){
var len = $( parentdiv ).length;
var width = $(e).width();
var data_p_l= $(e).position().left;
var data_text= $(e).text();
var dataset = data_text + ",Left value is: "+ data_p_l + ",width value is: "+ width;
$(showdiv).text(dataset);
});
}
You want to replace e with this.
function getdata(parentdiv,showdiv){
$(parentdiv).each(function(){
var len = $( parentdiv ).length;
var width = $(this).width();
var data_p_l= $(this).position().left;
var data_text= $(this).text();
var dataset = data_text + ",Left value is: "+ data_p_l + ",width value is: "+ width;
$(showdiv).text($(showdiv).text() + ' ' + dataset);
});
}
Inside the each function, this is used to refer to each element that gets iterated over. At the end of your function, you are putting your results into your div with id test. However, this is running in a loop, so you will only end up with output for the last p tag, and not each one. What I think you want to do is add to the test div like this: $(showdiv).text($(showdiv).text() + ' ' + dataset);

retrieving the twitter search feeds dynamically using ajax

Long back I used JSON and was successful to get the hash tag feeds from twitter and facebook. But presently I am just able to get the feeds but its not being updated constantly that means it not been update dynamically. I guess I need to ajaxify it, but I am not able to do that since I am not aware of ajax. Here is the code which I have used to get the twitter search feeds.
$(document).ready(function()
{
$("#Enter").click(function(event){
var searchTerm = $("#search").val() ;
var baseUrl = "http://search.twitter.com/search.json?q=%23";
$.getJSON(baseUrl + searchTerm + "&rpp=1500&callback=?", function(data)
{
$("#tweets").empty();
if(data.results.length < 1)
$('#tweets').html("No results JOINEVENTUS");
$.each(data.results, function()
{
$('<div align="justify"></div>')
.hide()
.append('<hr> <img src="' + this.profile_image_url + '" width="40px" /> ')
.append('<span><a href="http://www.twitter.com/'
+ this.from_user + '">' + this.from_user
+ '</a> ' + makeLink(this.text) + '</span>')
.appendTo('#tweets')
.fadeIn(800);
});
});
});
});
function makeLink(text)
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
The code below should help you. What I've done is moved the code which fetches the tweets into a function. This function is then called every X seconds to update the box. When the user enters a new search term and clicks "Enter", it will reset the timer.
var fetchSeconds = 30; //Number of seconds between each update
var timeout; //The variable which holds the timeout
$(document).ready(function() {
$("#Enter").click(function(event){
//Clear old timeout
clearTimeout(timeout);
//Fetch initial tweets
fetchTweets();
});
});
function fetchTweets() {
//Setup to fetch every X seconds
timeout = setTimeout('fetchTweets()',(fetchSeconds * 1000));
var searchTerm = $("#search").val();
var baseUrl = "http://search.twitter.com/search.json?q=%23";
$.getJSON(baseUrl + searchTerm + "&rpp=1500&callback=?", function(data) {
$("#tweets").empty();
if (data.results.length < 1) {
$('#tweets').html("No results JOINEVENTUS");
}
$.each(data.results, function() {
$('<div align="justify"></div>').hide()
.append('<hr> <img src="' + this.profile_image_url + '" width="40px" /> ')
.append('<span>' + this.from_user + ' ' + makeLink(this.text) + '</span>')
.appendTo('#tweets')
.fadeIn(800);
});
});
}
function makeLink(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
Hope this helps

jquery get href and text from a tags on a page and show them in a div

This is my jquery code:
$(document).ready(function() {
var contentText = $.ajax({
url: "index.php",
async: false
}).responseText;
$("#defaultData").append(contentText);
$('img').each(function(){
$(this).remove();
});
//delegate?
var test = 0;
var href = 0;
var title = 0;
$('.btn').click(function(){
var href = $('a').each(function() {
$(this).attr('href');
});
console.log(href);
var test = $('a').each(function() {
$(this).text();
});
console.log(test);
$.each(href, function(i, val) {
$("#data").append(i + " => " + val + "<br/>");
});
$.each(test, function(i, val) {
$("#data").append(i + " => " + val + "<br/>");
});
});
//for (var i = 0; 50; i++) {
//var pageNum = $("a#specificLink").attr("href").match(/page=([0-9]+)/)[1];
});
What this code does:
It gets a page (index.php) prints it, removes the images and gets the href and text from all a-tags.
1st question:
text
should give me: link and text
but it gives me link and link :s
I realy don't get this
2nd question:
Alse I want to append the href and text to a div, seperated by semi colons.
So it looks like this:
link;text
link;text
...
Now I get:
link
link
text
text
...
This should give you all the link;text link;text
var test = "";
$('a').each(function() {
test += $(this).attr('href') + ';';
test += $(this).text() + ' ';
});
alert(test);
The reason you end up with link;link;link then text;text.. is because you are processing all links via
$.each(href, function(i, val) {
$("#data").append(i + " => " + val + "<br/>");
});
before even processing the texts. Add them at the same time as shown above.
I don't think that $('slector').each() is designed to return values. You should populate a viariable inside the loop like this:
var href = []
$('a').each(function() {
href.push($(this).attr('href'))
})
console.log(href)
Just to add, it appears that you're using .each the way that .map should be used:
var href = $('a').map(function() {
return this.href + ';' + $(this).text();
}).get();
$("#data").append(href.join(' '));

Categories