I'm having a simple (I hope it's simple) question. I'm using 10 divs (div1, div2...) and I want to calculate the distance between two of them. I've already clicked one, that takes the class (img.home). I have the function to calculate the distance between two objects showdistance(div1, div2), but How can I use it to calculate showdistance($('img.home').parent()[0], $(this) ) where (this) is the div, that my cursor is point at at the moment ( .mouseenter(function() {$(this).text(showdistance)}); )
Thanks in advance,
If needed, I can make a jsfiddle with the whole code, but as I believe it is a rather easy thing, that I don't know and the code is a large piece it's easier this way.
Best regards.
Store your last clicked element in a variable.
Then compare the position when you enter an element.
You can apply top, left, right or bottom, if you like.
var clicked = null;
$("someSelection").click(function() {
clicked = $(this);
});
$("someSelection").mouseenter(function() {
// if-statement to ensure that the event won't fire if you haven't clicked one
if(clicked !== null) {
console.log($(this).position().top - clicked.position().top);
console.log($(this).position().left - clicked.position().left);
}
});
Related
http://www.jsfiddle.net/Akmedrah/1cf6obpu/
Here is a fiddle of a picture button 'scroller' that I have. It is crappy but what I am really trying to figure out is the easiest way to make the arrow buttons that move the pictures right or left fade in and out when at the end of the order of pictures.
I was thinking of a java script function that essential knew the total number, something like this (I have no idea what i'm doing when it comes to JS but here is the best of what I guess it would look like):
function fadeinout(){
var total = 2; //because two in fiddle example, but theoretical could have hundreds
var current = //somehow get the current image based off id or class or some other identifier, or file name.
if (current < 2) { //set up so i can expand??? maybe?
document.getElementById("left-arrow").style.display = "true";
document.getElementById("right-arrow").style.display = "true";
}
if (current == 1) {
document.getElementById("left-arrow").style.display = "false";
}
if (current == 2) {
document.getElementById("right-arrow").style.display = "false";
}
}
I just want to know if I am headed in the right direction or if I am making this way to complicated. Thanks!
Tou can use jquery for this
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_id
$("#left-arrow").hide();
$("#left-arrow").show();
You can also use the following to toogle show and hide
$("#left-arrow").toggle();
To check if an elemnent is visible or not you can use this:
$("#left-arrow").is(":visible")
How to get first visible DOM element currently showing on the screen ?
I tried something like
var el = document.elementFromPoint(x, y)
and increasing the y coordinates in a while loop, but the problem is it does not work when there are css multi columns on the document, in that case the < html > tag is returned, not the actual element. Is there any way I can really get the element on the (top,left) of the screen which works for css columns ?
This is a very basic example that just gets the element that is the furthest to the top. It's just a start, because you may want to take into consideration the left offset as well.
You'll want to exclude the body and html elements (as shown below), since they will always be first.
Fiddle
var first;
$(':visible').not('body, html').each(function() {
if (typeof first == 'undefined') {
first = $(this);
} else if ($(this).offset().top < first.offset().top) {
first = $(this);
}
});
first.addClass('highlight');
I seem to be doing something wrong in the following code: http://jsfiddle.net/yunowork/qKj6b/1/
When you click next, the text within the span .hiddentext should be displayed in the span .showtext on top and correspond to the right Race (Rn). For example when R3 is highlighted the content of that .hiddentext "Race 3Oregon 14:30" should be displayed within the span .showtext.
This is the line where I make a mistake:
$('.showtext').text($('.hiddentext').first('td:first').text());
What am I doing wrong here?
Let's start simple:
Your problem:
$('.showtext').text($('.hiddentext').first('td:first').text());
you are saing, that, grab all .hiddentext, choose the first that has a td ... witch is not what you have in code, you have, td that contains hiddentext... so, the other way around.
What you want to do is simply get the current NEXT td and grab the hiddentext, so, just change to:
$('.showtext').text($nextCol.find('.hiddentext').text());
Now, can you see that the <br/> is not correctly rendered? That's because you are setting the text property, and you should set the html property.
the final code should be something like:
$('.showtext').html($nextCol.find('.hiddentext').html());
live example: http://jsfiddle.net/qKj6b/8/
Your code:
every time you need to have placeholders to provide some data to a context, please, DO NOT USE HTML TAGS to hold such values and hide them... make the use of the data- attribute, witch is a HTML5 complience, and works very well in any browser even if it does not have not HTML5 support, like IE6.
your table definition (td) that currently is:
<td class="visible" id="r2">
<span class="hiddentext">Race 2<br />Santa Fe 12:00</span>
<strong>R2</strong>
</td>
should be something like:
<td class="visible" id="r2" data-text="Race 2<br />Santa Fe 12:00">
R2
</td>
witch is way easier to read, and from your javascript code, you can easily get this as:
var hiddenText = $nextCol.data("text");
Your code (part 2):
This one is quite simple to know
Every time you are repeating yourself, you're doing it wrong
You have the methods for Next and Prev almost exactly as each other, so, you are repeating everything, for this, you should refactor your code and just use one simple method, this way, any future change only happens in one place, and one place only.
$(".next").click(function(e){
e.preventDefault();
var $nextCol = $('.highlighted').next('td');
MoveCursor($nextCol, 'next');
});
$(".previous").click(function(e){
e.preventDefault();
var $prevCol = $('.highlighted').prev('td');
MoveCursor($prevCol, 'prev');
});
function MoveCursor(col, side) {
var maxCol = 8;
if((side === 'next' && col.length != 0) ||
(side == 'prev' && col.length != 0 && col.index() >= maxCol)) {
$('.highlighted').removeClass("highlighted");
col.addClass("highlighted");
// show current title
$('.showtext').html(col.data('text'));
if (col.hasClass("invisible")) {
col.removeClass("invisible");
col.addClass("visible");
var $toRem;
if(side == 'prev')
$toRem = col.next('td').next('td').next('td').next('td').next('td').next('td');
else
$toRem = $nextCol.prev('td').prev('td').prev('td').prev('td').prev('td').prev('td');
$toRem.removeClass("visible");
$toRem.addClass("invisible");
}
}
}
Live Example: http://jsfiddle.net/qKj6b/22/
It should be
$('.showtext').html($('.highlighted .hiddentext').html());
Similar for the prev link...
or even better, thanks to #balexandre:
$('.showtext').html($nextCol.find('.hiddentext').html());
$('.showtext').html($prevCol.find('.hiddentext').html());
Fiddle
Update to match #balexandre hint: Fiddle 2
Do the following:
var $currCol = $('.highlighted'); //to get the current column
$('.race strong').text($currCol.closest('.highlighted').first('td:first').text());
.hiddentext class selects all the spans and the first() will always return you the first td.
Just make sure you select .hiddentext from the currently highlighted column and you are good to go.
$('.showtext').text($('.highlighted .hiddentext').first('td:first').text());
Try this (Same for both)
$('.showtext').html($currCol.find('span.hiddentext').html());
Working Example.
I am trying to create a simple text accordion which calculates each panel's height and return this value as a variable. I can get values with if statements like if ( i === 0 ) { $(this).height(); } but can't get this variable to the outside.I can do this without using variable but it became useless in long term.
Brıefly: I want to calculate each element's height and use this variable inside click function.
Here is jsFiddle which includes the problem.
var panel = $('.holder div');
var trigger = $('a');
panel.each(function(i) {
//problem starts when i try to calculate each ele's height
var eachEleHeight = i.height();
trigger.click(function() {
$(this).prev('div').animate({'height':eachEleHeight+'px'},500);
//this works widthout var eachEleHeight but became useless
//$(this).prev('div').animate({'height':'300px'},500);
});
//this is for hiding text at doc.ready
panel.css('height','56px');
});
If I well understood, try this :
panel.each(function(i, el) {
// create a reference to te current panel
var $el = $(el);
// execute a function immediately, passing both the panel and its height
(function(p, h) {
// the trigger is targeted as the next link after the current panel
p.next('a').click(function() {
p.animate({ height : h + 'px'},500);
});
}($el, $el.height()));
// set each panel height
$el.css('height','56px');
});
Example fiddle : http://jsfiddle.net/Aw39W/55/
There is a problem with the code you posted. i is the index of the current element. Not the element itself.
Try var eachEleHeight = $(this).height();
Fiddle
The sequence of events you've used seems a bit weird. You're actually binding a click event to all a tags for each panel element. Try this: Fiddle
I just used the min-height and max-height css attributes to store the initial to/from height variables. This will automatically get you your starting heights.
If I understand the question, you want to have the elements height for the accordion animation function. This is a trick but it works. I frequently use Mootools so I'll write using it. You should be able to figure it out.
var orgHeight = i.offsetHeight;
i.setStyle('height','100%');
var eachEleHeight = i.offsetHeight;
i.setStyle('height',orgHeight);
Essentially you would be flipping the element to reveal it's height and flipping it back before the document has time to make it visible on screen.
Not sure this is exactly what you were looking for, but hope it helps.
On eventRender of the fullcalendar, I want to identify the element belongs to which row of the calendar.
eventRender: function(event, element) {
//find calendar row of the element
}
What happens if the event is wrapped over two columns? (i.e. because it is 10 days long)
I'm looking at the source for FullCalendar, and I don't think you're going to find what you want - the element is an absolutely positioned div, and eventRender is called for each "segment" of the event, so if it wraps, you end up with two eventRender calls.
Anyways, if those "gotchas" don't dissuade you, here's a crack at figuring it out. I used the row widths/heights vs the element top to figure it out, I don't really see a more elegant way. Note you'll want to change the .fc-view-month bit to a selector that starts from your actual calendar ID.
eventAfterRender: function(event,element){
var level = undefined;
var elTop = $(element).position().top;
$('.fc-view-month tr[class^="fc-week"]').each(function(){
var rowTop = $(this).position().top;
var height = $(this).height();
if (elTop >= rowTop && elTop < rowTop + height){
level = $(this).attr('class').replace('fc-week','');
return false;
}
});
alert(level);
}
That will alert you with the "row" as defined by the calendar, i.e. the first row is actually "0"
EDIT: just realized that eventRender is called before the element is placed on the calendar, so my idea pretty much won't work. I've changed it to eventAfterRender. I think if it was important enough to you, the thing to do would be to modify FullCalendar so that whenever it sends you the "element" in the eventRender function, it also sends you the placement info (which it has in a structure called segs in the calling function).