scripting in css with some creativity - javascript

I found the following creative accepted answer
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).css('offset');
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
I wanted to know how .css('offset') is working so I made a jsfiddle but it's alerting "undefined".
Can anyone describes about this, working and is correct way?
Comment:
I know to use .offset() but I don't mean to use this, but my question regards how the accepted answer's code is working ....... with .css('offset')? That's all.

There's no offset property in CSS. with jQuery.css(propertyName) you can only access properties that exist. Everything else will return null.
for example:
jQuery.css('myImaginativePropertyname'); // returns null
jQuery.css('border'); // would return '0px none rgb(0, 0, 0)'
However
You can access the event.target (DOM element) like this:
jQuery('.get-close-to').hover(function(e) {
var elem = e.target;
alert( 'Left: ' + elem.offsetLeft + '\nTop: ' + elem.offsetTop );
}, function(e){});
I added the second function so that the code won't be executed twice. If you have only single function as input on jQuery.hover(), it will execute both in hover and blur. If you add a second function as a parameter, the first one will be executed on hover, while the second will be executed on blur of the element.
Here's the fiddle: http://jsfiddle.net/JLAK4/2/
Some people may argue to use jQuery(this).offset() instead, but why waste cpu cycles for yet another method call while you already have your DOM element populated and at your disposal? jQuery is a nice compatibility layer, I give you that. But abusing and overusing it makes no sense at all.

Do you want to be using .offset() instead?
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});

Try this:
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});

I think he wanted to say like this: working fiddle
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
But mistakenly he has typed .css('offset') may be.

Related

Basic Slideshow

I am creating a slideshow in JavaScript and jQuery to show an array of images.
My idea is to put 3 divs on the page:
One with a left button
one with a right button
one called screen that will display the image.
This is the code I have written, but I don't know what's missing. Maybe an onload event?
var now =0;
var image_array=
[
"../cabinets/001.jpg",
"../cabinets/002.jpg",
"../cabinets/003.jpg"
];
$("#left").click(left( if(now<image_array.length)
{
now++;
$('#screen').css('background-image', 'url("' + array[now] + '")');
}));
$("#right").click( if(now>0)
{
now--;
$('#screen').css('background-image', 'url("' + array[now] + '")');
});
I rewrote your code, here is result:
1) have you included jQuery library into your project?
2) in your jQuery code in lines:
$('#screen').css('background-image', 'url("' + array[now] + '")');
you using bad array name array[now], your array is image_array, so you must rewrite this into image_array[now]
3) your definition of .click function is not correct. You must define it as: .click(function(){ ... });, so your lines will look like:
// left click
$("#left").click(function(){
if(now > 0){
now--;
}
$('#screen').css('background-image', 'url("' + image_array[now] + '")');alert(now);
});
and
// right click
$("#right").click(function(){
if(now < image_array.length-1){
now++;
}
$('#screen').css('background-image', 'url("' + image_array[now] + '")');alert(now);
});
Here is working JSFiddle solution: JSFiddle
Here is the second solution with updated IF terms: JSFiddle

getting top and left position of colorbox at runtime

Been trying to get the top and left coordinates colorbox loaded content, but I keep getting either 0 or auto.
I'm executing the following in onComplete callback:
var cboxLeft = $('#cboxContent').css('left');//.position().left;
var cboxTop = $('#cboxContent').css('top');//.position().top;
console.log( 'cboxLeft: ' + cboxLeft + ' cboxTop: ' + cboxTop );
Right now console gives me: cboxLeft: 0px cboxTop: 0px
What I'm really after is appending custom close button to BODY. I need it accessible outside the cboxLoaded* area and visible. Hence trying to get position of content once colorbox is done with it.
.css() will not return these properties. You'll have to use .offset() instead.
So the code should look like:
var cboxLeft = $('#cboxContent').offset().left;
var cboxTop = $('#cboxContent').offset().top;
console.log( 'cboxLeft: ' + cboxLeft + ' cboxTop: ' + cboxTop );
Note: This gives the position relative to the document. If you want where it is on the current viewport (current view of the browser window), you might want to subtract window.scrollX and window.scrollY respectively.

Setting innerhtml after displaying an element

Is it OK to set the html of the element after the element is displayed. Will the user find any visible difference in this case. For Eg.
$("#abc").show();
$("#abc").append("<div>Test div</div>");
Also I would like to know if this would cause unwanted browser repaints.
Thanks,
Gautham
May be this could help: fiddle
$('button').click(function () {
console.log('Height is ' + $("#abc").height() + ' before show.');
$("#abc").show();
console.log('Height is ' + $("#abc").height() + ' after show.');
$("#abc").append("<div>Test div</div>");
console.log('Height is ' + $("#abc").height() + ' after filling.');
});
outputs:
Height is 0 before show.
Height is 0 after show.
Height is 20 after filling.
browser-reflows-repaint for info

DOM element position based on view

How can I get position of an element based on view? So as viewer scroll I get different values.
jQuery is prefered.
Do you mean relative to the viewable window?
If so, you can use something like this:
$("#element").offset().top - $(window).scrollTop()
That will return a positive number until it is scrolled off the window, at which point it will return a negative number.
$(function() {
$(window).scroll(function() {
var pos = $('#button_id').offset(),
top = pos.top - $(window).scrollTop(),
lft = pos.left - $(window).scrollLeft();
$("#where").html("Top: " + top + "\nLeft: " + lft);
});
});
Try it out with this jsFiddle
HTML something like the following:
<div id="button_id">Button ID</div>
<div id="where"></div>
Maybe something like this?
(jQuery)
var pos = $('#button_id').position();
alert("POSITION: \nLeft: "+pos.left + "\nTop: " + pos.top);
Source:
http://blog.ekini.net/2009/01/30/jquery-find-position-the-exact-position-of-an-element-in-the-browser-window/
Good luck, if you edit your question maybe I´ll be able to helo you better

What's the state of art steps to calculate the position of an event?

Suppose the event is e. How to know where it happened (as in position)?
I'm also using jQuery.
I think you're looking for e.pageX and e.pageY:
$('#something').click(function(e) {
alert('event happended at ' + e.pageX + ', ' + e.pageY)
})
e.target gives the object that triggered the event.

Categories