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);
Related
I have a generator that generates random entries from people. My goal is to mouseover an entry and have that highlight all of the other entries from that user. Each entry gets assigned two classes, one which is the name of the user.
Here's the code I have below.
$(document).ready(function(){
var $body = $('div.center');
$body.html('<header><p id="headertext">Twittler</p></header>');
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div class = "tweets"></div>');
$($tweet).addClass(tweet.user);
//I'm trying to have two classes here, and the ID. Probably don't need the ID.
$($tweet).attr("id",tweet.user);
$tweet.text('#' + tweet.user + ': ' + tweet.message + Date().toString("hh:mm tt"));
$tweet.appendTo($body);
index -= 1;
}
$("#tweetButton").click('click', function(){
index = 10;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div class = "tweets"></div>');
$($tweet).addClass(tweet.user);
//I'm trying to have two classes here, and the ID. Probably don't need the ID.
$($tweet).attr("id",tweet.user);
$tweet.text('#' + tweet.user + ': ' + tweet.message + Date().toString("hh:mm tt"));
$tweet.appendTo($body);
index -= 1;
}
$('.tweets').on('mouseover',function(){
var idget = $(this).attr('class');
$('div.center').find(idget).css('background-color','pink');
});
});
}); //Ends Script area
The tweets on mouseover entry at the bottom is my attempt at doing this, but when I mouseover an entry nothing happens. I'd definitely appreciate your help on what I'm missing here to make this happen.
so if I'm reading your code right (the onmouseover bit).. you grab the value of the class attribute and place it in the idget variable. In this case that value will be "tweets". Next you request all "tweets" (as a selector) that are children of any div element with a center css class attribute, and set its background color.
If all that is correct, "tweets" is not a valid selector, unless you have markup that looks like: <tweets></tweets>. I believe you want:
$('div.center').find('.' + idget).css('background-color','pink');
I don't know your html page but my best guest is this:
first of all you can't use id for tweet.user because there can't be more than one element with same id so I suggest this code for #tweetButton:
$("#tweetButton").click('click', function(){
index = 10;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div class = "tweets"></div>');
//$($tweet).addClass(tweet.user);
//I'm trying to have two classes here, and the ID. Probably don't need the ID.
$($tweet).attr("userid",tweet.user);
$tweet.text('#' + tweet.user + ': ' + tweet.message + Date().toString("hh:mm tt"));
$tweet.appendTo($body);
index -= 1;
}
for mouseover you should do this :
$('div.center').on('mouseover','.tweets',function(){
var idget = $(this).attr('userid');
$('div.center').find('[userid="'+idget+'"]').css('background-color','pink');
});
I've been trying to get a smooth scroll animation for a while now, but mainly in JS..
This hasn't been working out that well so I decided to try in CSS3.
Now I want to make this animation responsive by calling a JS function which adds the CSS rules for the animation responsive to the object the animation is for. Here is the JS code I've got so far. I'll also leave a Fiddle, but I'm new to that so things might not work right away.
function getTexts() {
var element = document.getElementsByClassName('toplink');
for (x = 0, len = element.length; x < len; x++){
var ID = element[x].textContent.toLowerCase();
var object = document.getElementById(ID);
console.log(object);
addCSSAnimator(ID);
}
}
function addCSSAnimator(el) {
var sheet = document.styleSheets[0];
var DOM = document.getElementById(el);
var Class = DOM.getAttribute("class");
var Parent = DOM.parentElement.getAttribute("id");
var rect = DOM.getBoundingClientRect();
var rule = ".toplink[ id= '"+el+"' ]:target - #"+Parent+" div."+Class+" {\n" +
"-webkit-transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
"transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
"}";
console.log("Stylesheet: ",sheet," object: ",DOM," Class: ",Class," offset X&Y:",rect.x," ",rect.y);
console.log(rule);
sheet.insertRule("body { background-color: 0; }", 1);
}
https://jsfiddle.net/dtj46c64/
You may try moving to jquery for this solution. Use document.ready and window.resize functions to handle the animation and also instead of for loop. use the jquery .each() function to get the elements. Try working around the following code i changed for you to go along with. Hope this puts you in the right direction to achieve your goal:
<script>
function getTexts() {
$(".toplink").each(function () {
let ID = $(this)
console.log(ID);
addCSSAnimator(ID);
});
}
function addCSSAnimator(el) {
var sheet = document.styleSheets[0];
var DOM = el;
var Class = DOM.attr("class");
var Parent = DOM.parent().attr("id");
var rect = DOM[0].getBoundingClientRect();
var rule = ".toplink[ id= '" + el + "' ]:target - #" + Parent + " div." + Class + " {\n" +
"-webkit-transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
"transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
"}";
console.log("Stylesheet: ", sheet, " object: ", DOM, " Class: ", Class, " offset X&Y:", rect.left, " ", rect.top);
console.log(rule);
sheet.insertRule("body { background-color: 0; }", 1);
}
$(window).on('resize', function () {
getTexts();
});
$(document).ready(function () {
getTexts();
});
</script>
Notice i changed the rect.y to rect.top as on some browsers the getBoundingClientRect fucntion does not return x and y values but left and top are always filled.
Also dont know why you are getting id of the parent of the object as there is no id set to the parent of the anchor class="toplink" so it will always return as null or empty.
Sorry for not a 100% answer as got busy but i hope the solution so far i suggested will help you tweak and find what your looking for.
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);
Hi I am trying to use getBoundingClientRect javascript function but the problem is this only seems to work for 1 of my elements. Here is the code.
function getDataXML(getID, cellId) {
var divMain = document.getElementById('Main');
var divCell = document.getElementById(cellId);
var divHoverControl = document.getElementById(getID);
var rectMain = divHoverControl.getBoundingClientRect();
var rectCell = divCell.getBoundingClientRect();
var divWidth = divHoverControl.offsetWidth;
var cellWidth = divCell.offsetWidth;
alert(rectMain.left + " " + rectMain.right + " " + divWidth + " " + cellWidth);
}
Its seems as though the page gets the elements using there ID correctly as I get no error and setting some style attributes works for each element but I only seem to get a result for my rectCell and cellWidth variables but the exact same code for rectMain and DivWidth dont seem to work. Any help would be greatly appreciated.
I know the each function iterates over an array. Is there way to access the indice like (this[i])? I need to be able compare current element's pubDate with the previous element's pubDate and if it's different output a new pubdate.
$(data).find('item').each(function(i, value){
var title = $(this).find('title').text().replace(/\w+\s+\(.*?\)/, "");
var link = $(this).find('link').text();
var pubDate = $(this).find('pubDate').text();
alert(title);
alert(link);
alert(pubDate);
$('#events').append("<p>" + title + "<br/>" + link + "</p>");
});
One of many potential ways would be:
var previous = null;
$(data).find('item').each(function(i, value){
if (previous) {
... do stuff with previous element ...
}
var title = $(this).find('title').text().replace(/\w+\s+\(.*?\)/, "");
var link = $(this).find('link').text();
var pubDate = $(this).find('pubDate').text();
alert(title);
alert(link);
alert(pubDate);
$('#events').append("<p>" + title + "<br/>" + link + "</p>");
previous = this;
});
You have to check to see if previous is not null, since the first iteration will contain a null value (the first element doesn't have any previous element).
How about something like
var previousDate = $(this).prev().find('pubDate');
you can use this and traverse
for example
this.parent()
gives you the index
or
i in your loop