I have a shopping cart with a total at the bottom of the screen. I would like some way of simulating the itunes store method of notifying a purchase by the price flying down to the total. This is going to be on android and iphone/pod so something lightweight would be best. I use jquery on this site (not UI). Any Suggestions?
Basically I want to have text move from one position to another. So far I can work out how to find the to and from postions
var p = $("#"+item).find("small");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top );
var p = $(".total");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top );
Now to figure out how to move text from point A to point B.
Check out http://jquerymobile.com/
Related
setInterval(function() {
var divPosition = $('div').position();
console.log('X: ' + divPosition.left + ", Y: " + divPosition.top");
}, 500);
So I can get the x and y position of this div. left/top but it's a square div on the page. I'm also tracking a section tag that flies around the page, I want to basically do if (_thesectiontag_.left == _thesquarediv_.left || _thesectiontag_.top == _thesquarediv_.top) ... do something so if the section tag is within the div coordinates on the page do something.
But I need to get the full dimensions of the square to be able to do that. I'm a bit lost on where to start and how to go about it.
Can anyone offer some help? Thank you!
Use this two code :
For the Width and Height includes padding :
var Height = document.getElementById('square').clientHeight;
var Width = document.getElementById('square').clientWidth;
For the Width and Height includes padding, scrollBar and borders :
var Height = document.getElementById('square').offsetHeight;
var Width = document.getElementById('square').offsetWidth;
$('div').height($('div').width());
I'm trying to change the color of a gradient background in kind of a trippy manner (The colors are going to be weird)
I wrote the code below but i dont understand why I cant change the background color at all.
var start1 = [0,216,255];
var start2 = [50,255,224];
setInterval(function (){
$("body").css("background", "-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb("+start1[0]+", "+start1[1]+", "+start1[2]+")), to(rgb("+start2[0]+", "+start2[1]+", "+start2[2]+")));");
start1[0] = checknumber(start1[0]+1);
start1[1] = checknumber(start1[1]+1);
start1[2] = checknumber(start1[2]+1);
start2[0] = checknumber(start1[0]+1);
start2[1] = checknumber(start1[1]+1);
start2[2] = checknumber(start1[2]+1);
},100);
I dont get any errors and the background only stays white. I'm guessing it's going to be a little more complicated than I imagined
The the checknumber() function just checks if the number is greater than 255- if it is then it resets back at 0.
Are you looking for something like this:
http://jsfiddle.net/4nuhpmov/
The issue was your CSS syntax, I think you may have been using an old reference.
I changed the CSS manipulation JavaScript as follows:
$("body").css("background",
"linear-gradient(" + degrees + "deg, rgba(" + start1[0] + ", " + start1[1] + ", " + start1[2] + ", 1), rgba(" + start2[0] + ", " + start2[1] + ", " + start2[2] + ", 1))");
I also added a counter for degrees.
This is probably not the best way to do this but it should get you started (I don't think it's as trippy/crazy as you expected but you can play around with the values).
You can use the following link to find the most up-to-date syntax:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
I am trying to write a javascript app which sorts dynamically created divs on a webpage, everything works and it sorts it all as it should, however I want it to animate the divs as they change position due to being sorted, I have code to do this but it moves way too fast, the only way I can see the divs move is if I put an alert in the animation code which looks like this :
function moveAnimation(to,from){
mover1.style.backgroundColor = "rgba(255,100,175,0.8)";
mover2.style.backgroundColor = "rgba(255,100,175,0.8)";
mover1.style.top = parseInt(mover1.style.top) + 10 + 'px';
mover2.style.top = parseInt(mover2.style.top) - 10 + 'px';
from = parseInt(mover1.style.top);
if(from != to && from < to)
{
//alert("TO : " + to + " From : " + from); //This makes it pause so that I can see the divs move
animate = setTimeout(moveAnimation(to,from),1000)
}
else
{
//alert("RET");
return;
}
}
And i call it simply like this :
mover1 = document.getElementById(moving1.id);
mover2 = document.getElementById(moving2.id);
var from = parseInt(in1.style.top);
var to = parseInt(in2.style.top);
moveAnimation(to,from);
When the alert is in place I can see them move frame by frame and it's doing exactly what I want, however it all happens in the blink of an eye with the divs suddenly being sorted, I would like to see them slowly move, any ideas on why my code isn't doing that?
I'm thinking of implementing a custom auto-complete feature so basically my idea now is that i will make an abs positioned div and give it the position here:
(image) http://i.stack.imgur.com/3c5BH.gif
So my question is with a variable referencing the textbox, how do i get the x and y position directly under the left bottom side of the input rectangle?
My script must work in latest versions of IE / FF / Safari / Opera / Chrome
I know i can use a library to do it, but no i'm interested in learning how do they do it (or maybe better ways)?
This question is a lot more complicated than it seems and involves getting the position of the element relative to the document. The code to do so can be pulled from the jquery source (http://code.jquery.com/jquery-1.6.1.js -- search for "jQuery.fn.offset")
in jQuery:
var node = $('#textbox'),
pos = box.offset(); // the complicated piece I'm using jQuery for
node.top += node.height(); // node.offsetHeight without jQuery
node.left += node.width(); // node.offsetWidth without jQuery
The answer can be extremely simplified if you don't care about FF2 or Safari3:
var box = document.getElementById('yourTextBox').getBoundingClientRect(),
left = box.left,
bottom = box.bottom;
x = x offset
y = y offset - ( textbox height +
padding-top + padding-bottom )
Good comments! For my scenario, there is always an offset parent (which is why I use position - http://api.jquery.com/position/). In hopes that it might help someone else wanting a quick fix, here's the code:
// I have a parent item (item) and a div (detail)
// that pops up at the bottom left corner of the parent:
var jItem = $(item);
var pos = jItem.position();
var marginTop = parseInt(jItem.css('margin-top'));
if (isNaN(marginTop)) {
marginTop = 0;
}
$(detail).css("top", pos.top + jItem.outerHeight() + marginTop)
.css("left", pos.left);
$(detail).show();
Just give the box a defined width and height. Then, get its top and left property and add it with the width and height. Simple. I am gonna give you Pseodocode.
<STYLE>
object{width: 100px; height: 20px;}
</STYLE>
<SCRIPT>
x = object.left;
y = object.top;
x = x + object.width;
y = y + object.height;
</SCRIPT>
after exaclty six attempts begging the original auhtor of an image popup javascript code to make his script compatible with the newer JQuery libraries, all six in vain, I decided its time for me to fix it without him the seventh attempt, and salvage this otherwise perfectly working (after numerous customisations by me) image popup script.
Problem: works when JQuery 1.3.2 ~ 1.4.2 is loaded, but NOT when JQuery 1.4.3 ~ 1.5.1 is loaded. On new builds, images don't enlarge after click on the thumbnails, whereas on the old builds, the do!
Any suggesion/help is kindly welcome and appreciated by me highly. Thanks!
The problem lies somehwere here:
//display content
var displayContent = function(img) {
if (visible) {
var newImg = jQuery.extend(true, {}, img);
resizeImg(newImg);
var imgWidth = newImg.width;
var imgHeight = newImg.height;
var outerWidth = imgWidth + hBound;
var outerHeight = imgHeight + vBound;
$lightbox.stop(true).animate({width:imgWidth, height:(imgHeight + cpHeight),
left: Math.round(($(window).width() - outerWidth)/2),
top:Math.round(($(window).height() - outerHeight)/2)},
tranSpeed,
function() {
enableCtrl();
$innerBox.height(imgHeight);
$info.html(langArrows + " " + langImage + " " + (currIndex+1) + "/" + numItems);
$cpanel.css({top:imgHeight, display:"block"});
$mainImg.css({width:imgWidth, height:imgHeight})
.attr("src", newImg.src).animate({opacity:1}, tranSpeed, startTimer);
showDesc();
}
);
}
}
On line 336 add .show() to the end of the chain. While LekisS was on to the right answer, if you add it there, its not properly hidden so the next time you click the image you will see the image display as its thumbnail size for a brief second.