[jQuery] Re: $('#id').width()
Can you put up a test page or link to the main page? If I saw the
source I may notice the problem.
On Nov 18, 5:18 am, Lee Mc [EMAIL PROTECTED] wrote:
Hi, i'm having an issue with setting the width of a field using $
('#field_id').width(). My setup is as follows:
- I have a form with multiple divs, on load I run some code to turn
these divs into tabbed content i.e. only one div showing at any
point. When tab=x appears in the URL, my code opens that tab
instead of the default 1st tab
- There is a field on the first (and default) tab which I'm a)
reducing the width of and b) placing an image next to using the
following:
$('#field_id').width($('#field_id').width() - 25)).after
('img_html')
- I then add a click event handler to the newly inserted image using $
('#img_id').click(function(){js_to_run});
This works completely as expected when the form opens to the default
tab.
My problem is that when I open the form to a different tab (e.g. using
tab=3 in the URL), the width of the field is not being updated. The
image is still inserted and the image click is still handled. It
appears that the only thing not being updated is the field width.
Has anyone come across this before or have any ideas if (and where)
I'm going wrong?
Cheers,
Lee
[jQuery] Re: $('#id').width()
I think the how the tabs are set up is whats affecting it. But I'm not
sure how they function, or are set up. That code would be most helpful
at this point in time.
On Nov 18, 8:36 am, Lee Mc [EMAIL PROTECTED] wrote:
Hi, here is the JS. I haven't pasted the form_tabs.build() function
but can do if you think that might help.
$(function(){
// Build the tabs on the form. form_tabs is contained in the js/
tabs.js lib
form_tabs.build();
// Set up the field
field_setup();});
function field_setup(){
// Create image which does something when clicked
var img = 'img src=images/icons/user.gif id=field_img
alt=blah';
// Append image to the requested_for field
$('#test_field').after(img).width($('#test_field').width() - 23);
// catch the image being clicked
$('#field_img').click(function(){
// code for image click here
});
}
Cheers,
Lee
On Nov 18, 1:17 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Can you put up a test page or link to the main page? If I saw the
source I may notice the problem.
On Nov 18, 5:18 am, Lee Mc [EMAIL PROTECTED] wrote:
Hi, i'm having an issue with setting the width of a field using $
('#field_id').width(). My setup is as follows:
- I have a form with multiple divs, on load I run some code to turn
these divs into tabbed content i.e. only one div showing at any
point. When tab=x appears in the URL, my code opens that tab
instead of the default 1st tab
- There is a field on the first (and default) tab which I'm a)
reducing the width of and b) placing an image next to using the
following:
$('#field_id').width($('#field_id').width() - 25)).after
('img_html')
- I then add a click event handler to the newly inserted image using $
('#img_id').click(function(){js_to_run});
This works completely as expected when the form opens to the default
tab.
My problem is that when I open the form to a different tab (e.g. using
tab=3 in the URL), the width of the field is not being updated. The
image is still inserted and the image click is still handled. It
appears that the only thing not being updated is the field width.
Has anyone come across this before or have any ideas if (and where)
I'm going wrong?
Cheers,
Lee
[jQuery] Re: $('#id').width()
That all seems like it would work fine. I went back and re-read your
original post. I found that I may have misunderstood the problem.
In your original post is #field_id within the content of the first
tab, or is it the content warpper of the first tab?
If it is the wrapper, then you are putting the image outside of what
is hidden, if not then changing that field width shouldn't affect any
other tabs.
From what I now understand you don't want the image there unless you
are on the first tab? So placing it within the content of that tab may
be the solution?
On Nov 18, 9:30 am, Lee Mc [EMAIL PROTECTED] wrote:
Here is the code which sets the tabs up:
/*
* JS to handle the building of tabs within forms
* Pre-requisites:
* - jQuery
* - tab links i.e. a tags to have a class of 'tab'
* - the title attribute of the a.tab links and the id attribute
of the div containing that tab's content to be called content_n
where n is the number representing the tab
*/
var form_tabs = {
build: function(){
// Define what happens when a tab is clicked
$(a.tab).click(function(event){
event.preventDefault();
// switch all tabs off
$(.active).removeClass(active);
// switch this tab on
$(this).addClass(active).blur();
// hide all elements with the class 'content' up
$(.tab_content).hide();
// Now figure out what the 'title' attribute value is and
find the element with that id. Then display that.
var content_show = $(this).attr(title);
$(# + content_show).show();
});
// Get the global settings object and figure out which tab
should be displaying, show it and hide the rest
var tab_display = '';
if (settings) {
// We have found the settings object, get the
'tab_display' property
tab_display = settings.tab_display;
}
else {
tab_display = '1';
}
// tab_display has been set so set the class for the active
tab
$('a.tab').each(function(){
// 'this' now represents the tab
if ($(this).attr('title').substr(8) == tab_display) {
// we have the correct tab so apply the 'active' class
$(this).addClass(active);
}
})
$('.tab_content').each(function(){
// 'this' now represents the div container. Test for the
id and see if we should hide this div
if (this.id.substr(8) != tab_display) {
// we have a tab whose content we don't want to see so
hide it
$(this).hide();
}
})
}
}
I'm pretty new to jQuery so apologies if there are some silly or
obvious comments, just my way of remembering whats happening when I
look back at it!!
Cheers,
Lee
On Nov 18, 2:49 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I think the how the tabs are set up is whats affecting it. But I'm not
sure how they function, or are set up. That code would be most helpful
at this point in time.
On Nov 18, 8:36 am, Lee Mc [EMAIL PROTECTED] wrote:
Hi, here is the JS. I haven't pasted the form_tabs.build() function
but can do if you think that might help.
$(function(){
// Build the tabs on the form. form_tabs is contained in the js/
tabs.js lib
form_tabs.build();
// Set up the field
field_setup();});
function field_setup(){
// Create image which does something when clicked
var img = 'img src=images/icons/user.gif id=field_img
alt=blah';
// Append image to the requested_for field
$('#test_field').after(img).width($('#test_field').width() - 23);
// catch the image being clicked
$('#field_img').click(function(){
// code for image click here
});
}
Cheers,
Lee
On Nov 18, 1:17 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Can you put up a test page or link to the main page? If I saw the
source I may notice the problem.
On Nov 18, 5:18 am, Lee Mc [EMAIL PROTECTED] wrote:
Hi, i'm having an issue with setting the width of a field using $
('#field_id').width(). My setup is as follows:
- I have a form with multiple divs, on load I run some code to turn
these divs into tabbed content i.e. only one div showing at any
point. When tab=x appears in the URL, my code opens that tab
instead of the default 1st tab
- There is a field on the first (and default) tab which I'm a)
reducing the width of and b) placing an image next to using the
following:
$('#field_id').width($('#field_id').width() - 25)).after
('img_html')
- I then add a click event handler to the newly inserted image using $
('#img_id').click(function(){js_to_run});
This works completely as expected when the form
[jQuery] Re: not a standard .attr task - needs a filter
I'm not really sure on this, but would there need to be quotes around the # in the filter? Actually its possible there would be more quotes? var link = $(this+[href^='#']).val(); Just a guess, but worth a try. -CodingCyb.org On Nov 18, 7:57 pm, daniel [EMAIL PROTECTED] wrote: Maybe it's the really late night I had but I can't figure this one out. First the html: div a href=#internalInternal Link/a a href=http://external.com;External Link/a a href=#internal2Internal Link2/a /div in order to do something on the page instead of going to the link I need to filter it based on if it contains a # at the start. It's the perfect problem for the [attribute^=value] solution but this doesn't work... var link = $(this[href^=#]).val(); I just know it's an issue with how to put this and the attribute qualifier together... and I don't know what to put afterwards .val()?! I've also tried: var link = $(this).attr([href^=#]); thanks
[jQuery] Re: non-programmer
Hello, From my personal experience, I learned basic javascript sometime last year. Then about a month ago a friend showed me this cool thing he found called jQuery. jQuery allowed me to do everything I had learned about javascript with a simple .nameofthing such has .hide() or .animate() which made majority of my javascript obsolete. The upside to having done javascript first was I learned the proper format for creating Functions with parameters and the syntax for if elseif else statements as well as loops ect. But a lot of that is very simple and can be picked up while learning jQuery. I suggest just jumping into jQuery, there are many examples out there and its not too tough. -CodingCyborg On Nov 16, 7:04 am, ncriptide [EMAIL PROTECTED] wrote: I've been a graphic designer for the past 25 years. Only programming I know is HTML and a little CSS. I'm about to try my hand at learning JavaScript and AJAX . . . . should I learn JavaScript first - and then learn JQuery, or will I be okay just diving into JQuery? Just to let you know - being a designer and working off that side of my brain - I have to tell you - even the most simple programming concepts come hard to me. The books, For Dummies are over my head. . . I tried learning PHP/MySQL . . . had to put it aside for now. Just can't wrap my brain around it. With that said, I am dogged determined to learn all the above, but figure I need JavaScript first. What do you recommend? Dive into JQuery?
[jQuery] Re: Need JQuery guidence
http://codingcyb.org/jQueryFun/Robot/robotHumor.html http://codingcyb.org/jQueryFun/Robot/js/humor.js Its pretty simple, and shows a fun application. On Nov 15, 8:47 am, bharani kumar [EMAIL PROTECTED] wrote: Hi Dear Friends I am new to jquery program, ya i already did small snipets in jquery, but am not expert , I very much intrested to learn Jquery from start point Ya i Read some tutorial like jquery.com, But i am basically very much intrested in discussions, Can any one tell me and send me , sample snipet That please write small (Basic) Jquery program and send to me, Please dont redirect to some site likewww.jquery.com Because i already visited that sites and all, good tutorial with example , But i expect more then that , Thank you -- உங்கள் நண்பன் பரணி குமார் Regards B.S.Bharanikumar POST YOUR OPINIONhttp://bharanikumariyer.hyperphp.com/
[jQuery] Re: this and z-index changes
Would it be plausible to create a custom tag of drag /drag? I
think part of the problem is because all of the windows have 2
classes. One is the .draggableWindow the other defines the group they
are in. With a custom tag it would allow for each to have one class.
On Nov 14, 3:02 pm, CodingCyborg [EMAIL PROTECTED] wrote:
http://arkaydea.com/zIndexTest.php
That is the closest thing I can get to the real thing.
On Nov 14, 12:38 pm, ricardobeat [EMAIL PROTECTED] wrote:
Right. This is getting a bit complex. Judging by your code things
should be going well, could you put up a test page?
the global vars suggestion was a shot in the dark, if you a run loop
they will be overwritten for every iteration unless the assignment
doesn't execute.
On Nov 14, 2:23 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I have confirmed that when one of a group of windows is clicked, it
runs as if every window in that group was clicked at the same time and
runs the code for each of them.
This causes quite an awkward outcome, but I have no idea why its
happening, nor how to stop it.
On Nov 14, 9:03 am, ricardobeat [EMAIL PROTECTED] wrote:
I haven't looked througly at your code, but I see you're using global
variables, that might be an issue:
$('.draggableWindow').mousedown(function(){
var numWindows=$('.draggableWindow').length + 500;
var zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
var newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){ //being greater
doesn't mean it's only 1 unit greater
newZ2 = zindexlt2-2; //just to be safe
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($
(this).css(z-index)));
}
});
}
});
On Nov 14, 11:13 am, CodingCyborg [EMAIL PROTECTED] wrote:
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($(this).css(z-index)));
}
});
}
});
I added a line so I could watch the z-index movements of the draggable
windows. I found that they are all on separate layers but for some
reason instead of each of them above the one you bring to front
dropping one, some will drop two while others don't move. I'm not sure
why this is happening, it's almost as if some windows are run through
the .each() multiple times while others don't move. Or when others go
through it they affect the first one through it.
Help would be highly appreciated!
On Nov 13, 1:08 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I recently have been playing around with a Desktop module that was
on nettuts and made a modification for it that doesn't fully work.
There are many draggable windows, and in order for them to function
like a real desktop they need to have z-index changes such that if
you
close one on top the last one you had on top is right below it.
I believe my error comes in with this or possibly something else,
but when you pull one to the front it causes some or all of the
others
to end up in the same z-index causing them to not stay in order of
recently viewed.
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() +
500;//the + 500 is to
make sure they are above other objects on the page
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);//brings
to front
$('.draggableWindow').each(function(){//supposed to drop others
back one...
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2
[jQuery] Re: this and z-index changes
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($(this).css(z-index)));
}
});
}
});
I added a line so I could watch the z-index movements of the draggable
windows. I found that they are all on separate layers but for some
reason instead of each of them above the one you bring to front
dropping one, some will drop two while others don't move. I'm not sure
why this is happening, it's almost as if some windows are run through
the .each() multiple times while others don't move. Or when others go
through it they affect the first one through it.
Help would be highly appreciated!
On Nov 13, 1:08 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I recently have been playing around with a Desktop module that was
on nettuts and made a modification for it that doesn't fully work.
There are many draggable windows, and in order for them to function
like a real desktop they need to have z-index changes such that if you
close one on top the last one you had on top is right below it.
I believe my error comes in with this or possibly something else,
but when you pull one to the front it causes some or all of the others
to end up in the same z-index causing them to not stay in order of
recently viewed.
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;//the +
500 is to
make sure they are above other objects on the page
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);//brings to front
$('.draggableWindow').each(function(){//supposed to
drop others
back one...
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
}
});
}
});
[jQuery] Re: this and z-index changes
Sorry, I misread the change in code and the comments you added.
Doing: newZ2 = zindexlt2-2;
Would place all windows that were previously above the window you just
brought to front on the same z-index, which I don't want.
The reason for the newZ2--; is that all above it go down one level,
and then the one that was clicked jumps to the very top of all of
them.
This allows for all windows above it to go down one, so they all stay
on separate levels, but in the same order.
On Nov 14, 9:03 am, ricardobeat [EMAIL PROTECTED] wrote:
I haven't looked througly at your code, but I see you're using global
variables, that might be an issue:
$('.draggableWindow').mousedown(function(){
var numWindows=$('.draggableWindow').length + 500;
var zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
var newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){ //being greater
doesn't mean it's only 1 unit greater
newZ2 = zindexlt2-2; //just to be safe
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($
(this).css(z-index)));
}
});
}
});
On Nov 14, 11:13 am, CodingCyborg [EMAIL PROTECTED] wrote:
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($(this).css(z-index)));
}
});
}
});
I added a line so I could watch the z-index movements of the draggable
windows. I found that they are all on separate layers but for some
reason instead of each of them above the one you bring to front
dropping one, some will drop two while others don't move. I'm not sure
why this is happening, it's almost as if some windows are run through
the .each() multiple times while others don't move. Or when others go
through it they affect the first one through it.
Help would be highly appreciated!
On Nov 13, 1:08 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I recently have been playing around with a Desktop module that was
on nettuts and made a modification for it that doesn't fully work.
There are many draggable windows, and in order for them to function
like a real desktop they need to have z-index changes such that if you
close one on top the last one you had on top is right below it.
I believe my error comes in with this or possibly something else,
but when you pull one to the front it causes some or all of the others
to end up in the same z-index causing them to not stay in order of
recently viewed.
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;//the
+ 500 is to
make sure they are above other objects on the page
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);//brings to
front
$('.draggableWindow').each(function(){//supposed
to drop others
back one...
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
}
});
}
});
[jQuery] Re: this and z-index changes
Something else that may help find the problem:
I currently have groups of windows. When you bring a window in one
group to the front it brings all windows in that group to the top
layers overall. Though they stay on separate layers they are being
brought to front together. The other groups are all dropping behind,
but the windows are staying on their separate layers, and in the order
I left them. All draggable windows have two classes. First
is .draggableWindow Next is the class for that group of windows. Each
window has it's own ID. So possibly to avoid identity of this I
should set a variable for the ID of the window that was actually
clicked?
On Nov 14, 9:03 am, ricardobeat [EMAIL PROTECTED] wrote:
I haven't looked througly at your code, but I see you're using global
variables, that might be an issue:
$('.draggableWindow').mousedown(function(){
var numWindows=$('.draggableWindow').length + 500;
var zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
var newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){ //being greater
doesn't mean it's only 1 unit greater
newZ2 = zindexlt2-2; //just to be safe
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($
(this).css(z-index)));
}
});
}
});
On Nov 14, 11:13 am, CodingCyborg [EMAIL PROTECTED] wrote:
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($(this).css(z-index)));
}
});
}
});
I added a line so I could watch the z-index movements of the draggable
windows. I found that they are all on separate layers but for some
reason instead of each of them above the one you bring to front
dropping one, some will drop two while others don't move. I'm not sure
why this is happening, it's almost as if some windows are run through
the .each() multiple times while others don't move. Or when others go
through it they affect the first one through it.
Help would be highly appreciated!
On Nov 13, 1:08 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I recently have been playing around with a Desktop module that was
on nettuts and made a modification for it that doesn't fully work.
There are many draggable windows, and in order for them to function
like a real desktop they need to have z-index changes such that if you
close one on top the last one you had on top is right below it.
I believe my error comes in with this or possibly something else,
but when you pull one to the front it causes some or all of the others
to end up in the same z-index causing them to not stay in order of
recently viewed.
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;//the
+ 500 is to
make sure they are above other objects on the page
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);//brings to
front
$('.draggableWindow').each(function(){//supposed
to drop others
back one...
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
}
});
}
});
[jQuery] Re: this and z-index changes
I have confirmed that when one of a group of windows is clicked, it
runs as if every window in that group was clicked at the same time and
runs the code for each of them.
This causes quite an awkward outcome, but I have no idea why its
happening, nor how to stop it.
On Nov 14, 9:03 am, ricardobeat [EMAIL PROTECTED] wrote:
I haven't looked througly at your code, but I see you're using global
variables, that might be an issue:
$('.draggableWindow').mousedown(function(){
var numWindows=$('.draggableWindow').length + 500;
var zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
var newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){ //being greater
doesn't mean it's only 1 unit greater
newZ2 = zindexlt2-2; //just to be safe
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($
(this).css(z-index)));
}
});
}
});
On Nov 14, 11:13 am, CodingCyborg [EMAIL PROTECTED] wrote:
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($(this).css(z-index)));
}
});
}
});
I added a line so I could watch the z-index movements of the draggable
windows. I found that they are all on separate layers but for some
reason instead of each of them above the one you bring to front
dropping one, some will drop two while others don't move. I'm not sure
why this is happening, it's almost as if some windows are run through
the .each() multiple times while others don't move. Or when others go
through it they affect the first one through it.
Help would be highly appreciated!
On Nov 13, 1:08 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I recently have been playing around with a Desktop module that was
on nettuts and made a modification for it that doesn't fully work.
There are many draggable windows, and in order for them to function
like a real desktop they need to have z-index changes such that if you
close one on top the last one you had on top is right below it.
I believe my error comes in with this or possibly something else,
but when you pull one to the front it causes some or all of the others
to end up in the same z-index causing them to not stay in order of
recently viewed.
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;//the
+ 500 is to
make sure they are above other objects on the page
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);//brings to
front
$('.draggableWindow').each(function(){//supposed
to drop others
back one...
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
}
});
}
});
[jQuery] Re: this and z-index changes
http://arkaydea.com/zIndexTest.php
That is the closest thing I can get to the real thing.
On Nov 14, 12:38 pm, ricardobeat [EMAIL PROTECTED] wrote:
Right. This is getting a bit complex. Judging by your code things
should be going well, could you put up a test page?
the global vars suggestion was a shot in the dark, if you a run loop
they will be overwritten for every iteration unless the assignment
doesn't execute.
On Nov 14, 2:23 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I have confirmed that when one of a group of windows is clicked, it
runs as if every window in that group was clicked at the same time and
runs the code for each of them.
This causes quite an awkward outcome, but I have no idea why its
happening, nor how to stop it.
On Nov 14, 9:03 am, ricardobeat [EMAIL PROTECTED] wrote:
I haven't looked througly at your code, but I see you're using global
variables, that might be an issue:
$('.draggableWindow').mousedown(function(){
var numWindows=$('.draggableWindow').length + 500;
var zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
var newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){ //being greater
doesn't mean it's only 1 unit greater
newZ2 = zindexlt2-2; //just to be safe
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($
(this).css(z-index)));
}
});
}
});
On Nov 14, 11:13 am, CodingCyborg [EMAIL PROTECTED] wrote:
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);
$('.draggableWindow').each(function(){
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
$(this).children('h1').text(parseInt($(this).css(z-index)));
}
});
}
});
I added a line so I could watch the z-index movements of the draggable
windows. I found that they are all on separate layers but for some
reason instead of each of them above the one you bring to front
dropping one, some will drop two while others don't move. I'm not sure
why this is happening, it's almost as if some windows are run through
the .each() multiple times while others don't move. Or when others go
through it they affect the first one through it.
Help would be highly appreciated!
On Nov 13, 1:08 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I recently have been playing around with a Desktop module that was
on nettuts and made a modification for it that doesn't fully work.
There are many draggable windows, and in order for them to function
like a real desktop they need to have z-index changes such that if you
close one on top the last one you had on top is right below it.
I believe my error comes in with this or possibly something else,
but when you pull one to the front it causes some or all of the others
to end up in the same z-index causing them to not stay in order of
recently viewed.
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() +
500;//the + 500 is to
make sure they are above other objects on the page
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);//brings to
front
$('.draggableWindow').each(function(){//supposed to drop others
back one...
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
}
});
}
});
[jQuery] Changing the SRC of an iframe
I currently have this function set up:
function link(win,url){
if(url){
$(win+' iframe').attr(src,url);
}
setFocus(win);
}
And I don't get any errors in the console.
win is a div that contains an iframe hence the child selector.
I've tried a few different things but o no prevail...
Help is appreciated :)
[jQuery] Re: Changing the SRC of an iframe
div class=draggableWindow personalWin id=win10
h1span/spanPersonal Settings/h1
div class=content
iframe src=settings.php/iframe
/div
/div
And then elsewhere i have a link that onclick does link
(#win10,mailbox.php)
The window has the focus changed so I know the code is passing through
the function, but even if I take off the if(url) part it doesn't
change the src...
On Nov 13, 9:26 am, ricardobeat [EMAIL PROTECTED] wrote:
That should work, can you show us some HTML?
On Nov 13, 1:02 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I currently have this function set up:
function link(win,url){
if(url){
$(win+' iframe').attr(src,url);
}
setFocus(win);
}
And I don't get any errors in the console.
win is a div that contains an iframe hence the child selector.
I've tried a few different things but o no prevail...
Help is appreciated :)
[jQuery] Re: Changing the SRC of an iframe
That did the trick! I guess I misread the documentation on the child
selector, though it makes sense now that you point it out. Thank you
very much :)
On Nov 13, 12:55 pm, Hector Virgen [EMAIL PROTECTED] wrote:
It looks like the iframe is not an immediate descendant of the div with id
win10. Remove the from your selector and it should work:
$(win+' iframe').attr(src,url);
-Hector
On Thu, Nov 13, 2008 at 10:51 AM, CodingCyborg [EMAIL PROTECTED]wrote:
div class=draggableWindow personalWin id=win10
h1span/spanPersonal Settings/h1
div class=content
iframe src=settings.php/iframe
/div
/div
And then elsewhere i have a link that onclick does link
(#win10,mailbox.php)
The window has the focus changed so I know the code is passing through
the function, but even if I take off the if(url) part it doesn't
change the src...
On Nov 13, 9:26 am, ricardobeat [EMAIL PROTECTED] wrote:
That should work, can you show us some HTML?
On Nov 13, 1:02 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I currently have this function set up:
function link(win,url){
if(url){
$(win+' iframe').attr(src,url);
}
setFocus(win);
}
And I don't get any errors in the console.
win is a div that contains an iframe hence the child selector.
I've tried a few different things but o no prevail...
Help is appreciated :)
[jQuery] this and z-index changes
I recently have been playing around with a Desktop module that was
on nettuts and made a modification for it that doesn't fully work.
There are many draggable windows, and in order for them to function
like a real desktop they need to have z-index changes such that if you
close one on top the last one you had on top is right below it.
I believe my error comes in with this or possibly something else,
but when you pull one to the front it causes some or all of the others
to end up in the same z-index causing them to not stay in order of
recently viewed.
jQuery('.draggableWindow').mousedown(function(){
numWindows=jQuery('.draggableWindow').size() + 500;//the + 500
is to
make sure they are above other objects on the page
zindexIt2 = parseInt($(this).css(z-index));
if(zindexIt2 numWindows){
$(this).css(z-index,numWindows);//brings to front
$('.draggableWindow').each(function(){//supposed to
drop others
back one...
newZ2=$(this).css(z-index);
if(newZ2 zindexIt2){
newZ2--;
$(this).css(z-index,newZ2);
}
});
}
});
[jQuery] Re: Script to keep draggable windows in the main window not working?
Thank you for your response. Unfortunately that didn't solve the
problem, nor did it bring any errors to error console. I believe both
ways of doing that are valid, unless there is something in the code
stopping it from getting there, in which case they might not work.
Would it be possible that other code in the script is making this not
work? Or is it most likely this script being screwy?
On Nov 11, 11:41 pm, pd [EMAIL PROTECTED] wrote:
I'm completely guessing but i think these lines might be the problem:
newTop= window.height - $(this).outerHeight();
newLeft= window.width - $(this).outerWidth();
maybe try:
newTop= $(window).height() - $
(this).outerHeight();
newLeft= $(window).width() - $(this).outerWidth
();
Good luck
pd
On Nov 12, 1:24 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I have a script to keep the draggable windows from leaving the main
window they are in. When I comment out the code everything else works
perfectly. But if I allow this code to be included, not everything
loads, the windows won't move, but nothing shows up in error console.
jQuery(document).mousemove(function(){
$('.draggableWindow').each(function(){
if(parseInt($(this).css(top)) 0){
$(this).css(top, 0);
}
if(parseInt($(this).css(left)) 0){
$(this).css(left,0);
}
newTop= window.height - $(this).outerHeight();
newLeft= window.width - $(this).outerWidth();
if(parseInt($(this).css(top)) newTop){
$(this).css(top, newTop);
}
if(parseInt($(this).css(left)) newLeft){
$(this).css(left, newLeft);
}
}
});
Not sure whats messing it up. I've tried changing a few parts of it to
no prevail. Help is appreciated.
-CodingCyborg
[jQuery] Re: Script to keep draggable windows in the main window not working?
Well, it turns out I just wasn't paying attention when I ended
the .each function and only had a } when I needed a });
That fixed it all up and it's running fine now :)
On Nov 12, 3:55 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Thank you for your response. Unfortunately that didn't solve the
problem, nor did it bring any errors to error console. I believe both
ways of doing that are valid, unless there is something in the code
stopping it from getting there, in which case they might not work.
Would it be possible that other code in the script is making this not
work? Or is it most likely this script being screwy?
On Nov 11, 11:41 pm, pd [EMAIL PROTECTED] wrote:
I'm completely guessing but i think these lines might be the problem:
newTop= window.height - $(this).outerHeight();
newLeft= window.width - $(this).outerWidth();
maybe try:
newTop= $(window).height() - $
(this).outerHeight();
newLeft= $(window).width() - $(this).outerWidth
();
Good luck
pd
On Nov 12, 1:24 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I have a script to keep the draggable windows from leaving the main
window they are in. When I comment out the code everything else works
perfectly. But if I allow this code to be included, not everything
loads, the windows won't move, but nothing shows up in error console.
jQuery(document).mousemove(function(){
$('.draggableWindow').each(function(){
if(parseInt($(this).css(top)) 0){
$(this).css(top, 0);
}
if(parseInt($(this).css(left)) 0){
$(this).css(left,0);
}
newTop= window.height - $(this).outerHeight();
newLeft= window.width - $(this).outerWidth();
if(parseInt($(this).css(top)) newTop){
$(this).css(top, newTop);
}
if(parseInt($(this).css(left)) newLeft){
$(this).css(left, newLeft);
}
}
});
Not sure whats messing it up. I've tried changing a few parts of it to
no prevail. Help is appreciated.
-CodingCyborg
[jQuery] Script to keep draggable windows in the main window not working?
I have a script to keep the draggable windows from leaving the main
window they are in. When I comment out the code everything else works
perfectly. But if I allow this code to be included, not everything
loads, the windows won't move, but nothing shows up in error console.
jQuery(document).mousemove(function(){
$('.draggableWindow').each(function(){
if(parseInt($(this).css(top)) 0){
$(this).css(top, 0);
}
if(parseInt($(this).css(left)) 0){
$(this).css(left,0);
}
newTop= window.height - $(this).outerHeight();
newLeft= window.width - $(this).outerWidth();
if(parseInt($(this).css(top)) newTop){
$(this).css(top, newTop);
}
if(parseInt($(this).css(left)) newLeft){
$(this).css(left, newLeft);
}
}
});
Not sure whats messing it up. I've tried changing a few parts of it to
no prevail. Help is appreciated.
-CodingCyborg
[jQuery] Delaying a .css until an animation on a different div is done?
Hey,
I have a button set up to fade out and then hide a div within a div.
The parent div has a 1px border, but it looks odd to have the border
float while the inside div fades away. I would like to set it up so
the border goes to none then after the inside div fades and hides
the border goes back to 1px solid black.
$('.miniThis').click(function(){
$(this).parents(.window).css(border,none);
if($(this).parents(h1).siblings(.content).css(opacity) ==
0)
{
$(this).parents(h1).siblings(.content)
.show()
.animate({opacity: 1}, 300);
} else {
$(this).parents(h1).siblings(.content)
.animate({opacity: 0}, 300)
.hide(1);
}
$(this).parents(.draggableWindow).css(border,1px solid
black);
});
I've tried using setTimeout and .animate instead of css, but both
to no prevail.
Help is highly appreciated,
-CodingCyb.org
[jQuery] Preloading WAV file?
I need to preload a WAV file so that it doesn't end up behind the graphics that its supposed to match with... However I can't seem to find a plug-in or simple script to do this. Help is appreciated :) -CodingCyb.org
[jQuery] Re: Jquery Countdown!!!
Since the way this forum is set up the line breaks are changed. This
caused some of your code lines to be off.
The line after layout: with the + at the end should be on the same
line as the layout: line.
Also, I'm not sure if this one matters, but put the 'yODHMS', on the
line above it right after the Format:
That may or may not solve the problem, but give it a try.
On Nov 9, 12:05 pm, [EMAIL PROTECTED] wrote:
http://designbishop.com/4/
On Nov 9, 2008, at 9:43 46 AM, Pixelstuff wrote:
Do you have a test page we can view?
On Nov 8, 11:52 pm, B3 [EMAIL PROTECTED] wrote:
I did exactly what you said, added the top to my head and added the
span to the html and still nothing. Seems the files are being
loaded,
so I don't understand whats going on.. anythin else I can try?
On Nov 8, 4:49 pm, FrenchiINLA [EMAIL PROTECTED] wrote:
Add the following in the header of your page with the correct
liftoffTime value
script type=text/javascript
$(function() {
var liftoffTime = new Date();
liftoffTime.setDate(liftoffTime.getDate() + 5);
$('#listLayout').countdown({ until: liftoffTime, format:
'yODHMS',
layout: 'ul%Yli%n %l/li%Y%Oli%n %l/li%O
%Dli
%n %l/li%D' +
'%Hli%n %l/li%H%Mli%n %l/li%M%Sli%n %l/li%S/ul'
});
});
/script
Then in your page body add a span like span id=listLayout/span
and your code should work
On Nov 8, 3:30 pm, B3 [EMAIL PROTECTED] wrote:
Can someone just give me some instructions to get this to work??? I
don't understand how to implement this into my site... where
would I
put this:
$('#listLayout').countdown({until: liftoffTime, format: 'yODHMS',
layout: 'ul%Yli%n %l/li%Y%Oli%n %l/li%O%Dli%n %l/
li
%D' +
'%Hli%n %l/li%H%Mli%n %l/li%M%Sli%n %l/li%S/
ul'});
??? The countdown.js and jquery.js are loading but I don't get
it...
and also what would I put in the html side? I got this from
herehttp://keith-wood.name/countdown.html#listLayout
thanks
[jQuery] Re: animated robot cartoon with jquery
I have decided that sound is not plausible at this time. It starts
late every time due to having to load, so the sound effects are off.
But the adventure was well worth my time :) I'm thankful that you
started this project and gave me something to test my skills on. If
you happen to create any more animations shoot me an email, even if
you don't want any improvements on them, it's nice to have something
to mess around with :P
On Nov 8, 2:02 pm, CodingCyborg [EMAIL PROTECTED] wrote:
http://codingcyborg.com/jQueryFun/Robot/robotSound.html
Not the best sound file, it's actually a couch sound, but I couldn't
find anything better in the time I had. The timeouts weren't clearing
properly for awhile. When I switched the order they worked better, but
they didn't all clear at the same time like they should have. This one
is a bit rough around the edges, but the sound is a nice addition :)
On Nov 8, 1:46 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I was actually pleased to find that there is a jQuery plug-in for
playing sounds! Now if I could only get these darn timeouts to clear
properly!
On Nov 8, 12:07 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
It's actually workable to use Flash as a basis for the sound. It's easier
with ActionScript 3.0, but it can still be done in earlier versions. You
have to bind a flash method to an external interface (look up
ExternalInterface in the docs).
Then you can find the object by ID, and call the method on it directly.
$('#swffile')[0].playSound();
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of CodingCyborg
Sent: Friday, November 07, 2008 9:04 PM
To: jQuery (English)
Subject: [jQuery] Re: animated robot cartoon with jquery
I am sad to report that finding cross browser audio playing javascript
is pretty tough stuff... I found one plug-in that used flash, but
couldn't get it implemented correctly. I may try again tomorrow, but
don't count on it too much, if somebody else could implement some
squeaky wheel sounds for when it's moving that would be nice :) Best
of luck.
On Nov 7, 10:12 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an
old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different
pieces
of the robot look like they are separated and bouncing
individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice
at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since
you
have
all three pieces of the robot that are bouncing bounce at the
same
time the line of code can be condensed into one. As well as the
two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have
[jQuery] Re: animated robot cartoon with jquery
I was actually pleased to find that there is a jQuery plug-in for
playing sounds! Now if I could only get these darn timeouts to clear
properly!
On Nov 8, 12:07 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
It's actually workable to use Flash as a basis for the sound. It's easier
with ActionScript 3.0, but it can still be done in earlier versions. You
have to bind a flash method to an external interface (look up
ExternalInterface in the docs).
Then you can find the object by ID, and call the method on it directly.
$('#swffile')[0].playSound();
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of CodingCyborg
Sent: Friday, November 07, 2008 9:04 PM
To: jQuery (English)
Subject: [jQuery] Re: animated robot cartoon with jquery
I am sad to report that finding cross browser audio playing javascript
is pretty tough stuff... I found one plug-in that used flash, but
couldn't get it implemented correctly. I may try again tomorrow, but
don't count on it too much, if somebody else could implement some
squeaky wheel sounds for when it's moving that would be nice :) Best
of luck.
On Nov 7, 10:12 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different
pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you
have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the
two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different
amount
or at different rates you would need to set up different
timeouts
with different functions if they couldn't be set with the current
300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code
was
in the function and the numbers associated with it. (If any of
that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and
learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't
keep
bouncing and the sky keep moving when the ground has stopped.
Though I
did the cheap way, in the sense that I just made it a short
clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
[jQuery] Re: animated robot cartoon with jquery
http://codingcyborg.com/jQueryFun/Robot/robotSound.html
Not the best sound file, it's actually a couch sound, but I couldn't
find anything better in the time I had. The timeouts weren't clearing
properly for awhile. When I switched the order they worked better, but
they didn't all clear at the same time like they should have. This one
is a bit rough around the edges, but the sound is a nice addition :)
On Nov 8, 1:46 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I was actually pleased to find that there is a jQuery plug-in for
playing sounds! Now if I could only get these darn timeouts to clear
properly!
On Nov 8, 12:07 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
It's actually workable to use Flash as a basis for the sound. It's easier
with ActionScript 3.0, but it can still be done in earlier versions. You
have to bind a flash method to an external interface (look up
ExternalInterface in the docs).
Then you can find the object by ID, and call the method on it directly.
$('#swffile')[0].playSound();
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of CodingCyborg
Sent: Friday, November 07, 2008 9:04 PM
To: jQuery (English)
Subject: [jQuery] Re: animated robot cartoon with jquery
I am sad to report that finding cross browser audio playing javascript
is pretty tough stuff... I found one plug-in that used flash, but
couldn't get it implemented correctly. I may try again tomorrow, but
don't count on it too much, if somebody else could implement some
squeaky wheel sounds for when it's moving that would be nice :) Best
of luck.
On Nov 7, 10:12 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different
pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you
have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the
two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different
amount
or at different rates you would need to set up different
timeouts
with different functions if they couldn't be set with the current
300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code
was
in the function and the numbers associated with it. (If any of
that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL
[jQuery] Re: Poll sumbit
I'm not sure if this is the only way, and I'm not actually sure of how to do it, but for a registration page I have for a game they use functions that reference PHP pages that interact with the database and return information such that the page doesn't have to reload in order for database interaction to take place. This would allow for entering the vote and then showing the new data. On Nov 8, 2:34 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi all, I want to build something so that when someone submits his poll choise that the poll will change into the results without any refresh. Whats the best way to start of with for building this? So: - user visite the site - user chooses a option on the poll - he presses on vote - then his answer will be added to the database - poll results will show When a person already voted he also has to show the results. Whats the best way to start of with? Erwin
[jQuery] Re: animated robot cartoon with jquery
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped. Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at all.
I'm a designer turned wannabe' web developer :)
I used multiple divs and transparent png's to create the different
parts of the parallax background and the bouncing robot. The code I
was able to piece together to make it work is absolutely horrendous,
even for me. I was hoping maybe some of you jquery masters might be
able to take a looksy and help me out?
The url is: robot.anthonycalzadilla.com
(I would just post the code but its so long it wouldn't be visibly
viable)
Anthony
[EMAIL PROTECTED]
[jQuery] Re: Link in an iFrame changing Parent window elements
Wow, I feel like a complete idiot. It was the selector. Thanks for the
help! I'll try not to make that mistake again .
On Nov 7, 8:21 am, tlphipps [EMAIL PROTECTED] wrote:
If the div is 'printed' via PHP, then jquery will 'see' it when it
runs. If it's not 'printed', then jquery will NOT see it.
But I think your problem may be your selector. Looks like you have a
space between 'div' and '.contacts'. If you are trying to target a
div with a class of 'contacts', then you should use
'div.contacts' (no space there)
Simplest way to test this would be to put an alert() statement in your
click handler so you can see if that event is even being triggered.
Once you're sure the event is firing, then you can work on how to call
the function in the parent page. On that note, if the function DOES
exist in the parent page, my example should work. jquertil's example
was how to interact with the DOM of the parent, not how to call a
function that exists on the parent.
On Nov 6, 10:23 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Hmm, I think I've been attempting to solve a problem that doesn't
exist. Or it just wasn't the only one. Currently the link in the
iFrame is in a PHP page. I've had problems with PHP and jQuery not
seeing each other like I had expected. jQuery isn't recognizing that
the div exists for some reason. I'm not sure if that's because the div
only possibly exists and is printed onto the page if needed, or for
some other reason. Is there a possible fix for helping jQuery
recognize that the div has a function connected to it?
On Nov 6, 9:58 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I can't seem to find documentation on the additional parameters of the
jQuery selectors. I've searched the jQuery site and Google, but can't
find this information. A link to the page would be helpful.
On Nov 6, 6:25 pm, jquertil [EMAIL PROTECTED] wrote:
sorry I dont really understand your question, but inter-frame actions
work something like this:
$('#button').click(function(){
$(#divInParentFrame,top.document).remove();
});
read up on jquery's selectors and additional parameters, its all in
the documentation. notice the comma after the element selector, that's
where you address the frame to which you want to talk to
[jQuery] Re: animated robot cartoon with jquery
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped. Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to
jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at
all.
I'm a designer turned wannabe' web developer
[jQuery] Re: animated robot cartoon with jquery
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped.
Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create
the
repeated bounce, and to make the file smaller, you can simply
replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150
[jQuery] Re: animated robot cartoon with jquery
I am sad to report that finding cross browser audio playing javascript
is pretty tough stuff... I found one plug-in that used flash, but
couldn't get it implemented correctly. I may try again tomorrow, but
don't count on it too much, if somebody else could implement some
squeaky wheel sounds for when it's moving that would be nice :) Best
of luck.
On Nov 7, 10:12 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped.
Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to
create the
repeated bounce, and to make the file smaller, you can simply
replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
[jQuery] Re: Link in an iFrame changing Parent window elements
So I've changed the code for the iFrame to:
jQuery(document).ready(function(){
$('div .contacts').click(function(){
window.top.linkIt();
});
});
But it's still not calling the function in the parent window.
Am I doing it wrong? Or is there possibly a different way?
On Nov 6, 3:54 pm, tlphipps [EMAIL PROTECTED] wrote:
you should be able to call a function on the parent page by doing:
window.top.myFunctionName();
On Nov 6, 2:44 pm, [EMAIL PROTECTED] [EMAIL PROTECTED]
wrote:
I'm currently working on a very interesting interface for a game, in
which I use many iFrames. I have a div set up as a link(using $
('.link').click) in an iFrame and need it to run some jQuery that I
have written out that works correctly for the same link set up on the
parent page. I'm not sure if there is simple change for the elements
in the code to just then include in the iFrame page or possibly a way
to link the iFrame link to a function stored on the parrent page.
Any help is appreciated.
Thank you in advance,
CodingCyborg
[jQuery] Re: Link in an iFrame changing Parent window elements
I can't seem to find documentation on the additional parameters of the
jQuery selectors. I've searched the jQuery site and Google, but can't
find this information. A link to the page would be helpful.
On Nov 6, 6:25 pm, jquertil [EMAIL PROTECTED] wrote:
sorry I dont really understand your question, but inter-frame actions
work something like this:
$('#button').click(function(){
$(#divInParentFrame,top.document).remove();
});
read up on jquery's selectors and additional parameters, its all in
the documentation. notice the comma after the element selector, that's
where you address the frame to which you want to talk to
[jQuery] Re: Link in an iFrame changing Parent window elements
Hmm, I think I've been attempting to solve a problem that doesn't
exist. Or it just wasn't the only one. Currently the link in the
iFrame is in a PHP page. I've had problems with PHP and jQuery not
seeing each other like I had expected. jQuery isn't recognizing that
the div exists for some reason. I'm not sure if that's because the div
only possibly exists and is printed onto the page if needed, or for
some other reason. Is there a possible fix for helping jQuery
recognize that the div has a function connected to it?
On Nov 6, 9:58 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I can't seem to find documentation on the additional parameters of the
jQuery selectors. I've searched the jQuery site and Google, but can't
find this information. A link to the page would be helpful.
On Nov 6, 6:25 pm, jquertil [EMAIL PROTECTED] wrote:
sorry I dont really understand your question, but inter-frame actions
work something like this:
$('#button').click(function(){
$(#divInParentFrame,top.document).remove();
});
read up on jquery's selectors and additional parameters, its all in
the documentation. notice the comma after the element selector, that's
where you address the frame to which you want to talk to
[jQuery] Re: animated robot cartoon with jquery
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at all.
I'm a designer turned wannabe' web developer :)
I used multiple divs and transparent png's to create the different
parts of the parallax background and the bouncing robot. The code I
was able to piece together to make it work is absolutely horrendous,
even for me. I was hoping maybe some of you jquery masters might be
able to take a looksy and help me out?
The url is: robot.anthonycalzadilla.com
(I would just post the code but its so long it wouldn't be visibly
viable)
Anthony
[EMAIL PROTECTED]
[jQuery] Re: animated robot cartoon with jquery
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped. Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at all.
I'm a designer turned wannabe' web developer :)
I used multiple divs and transparent png's to create the different
parts of the parallax background and the bouncing robot. The code I
was able to piece together to make it work is absolutely horrendous,
even for me. I was hoping maybe some of you jquery masters might be
able to take a looksy and help me out?
The url is: robot.anthonycalzadilla.com
(I would just post the code but its so long it wouldn't be visibly
viable)
Anthony
[EMAIL PROTECTED]
