[jQuery] Re: Help with jQuery Suckerfish 2-tier navigation
Many thanks Geuis,
i forgot to post my css too, so here it is :)
/* Nav --- */
#navContainer {background:url(../images/navBk.jpg) repeat-x;width:
680px;height:28px;float:right;position:relative;z-index:
300;margin:-178px 0 0 200px;padding:0;}
#nav , #nav ul{margin:0;padding:0;list-style-type:none;list-style-
position:outside;position:relative;line-height:1.5em;}
#nav {margin-left:46px;font-size:1em;}
#nav a {display:block;padding:5px 13px;color:#fff;text-
decoration:none;font-weight:bold;}
#nav a:hover {background-color:#fff;color:#a9d44c;font-weight:bold;}
#nav li {float:left;margin-left:5px;}
#nav ul {position:absolute;display:none;width:7em;top:1.5em;}
#nav li ul a {background:#fff;color:#ff0084;margin:11px 0 -11px
-5px;margin-bottom:-10px;width:8em;height:auto;float:left;border-left:
1px solid #a9d44c;border-bottom:1px solid #c4c4c4;}
#nav li ul a:hover {color:#6eb8ed;margin:11px 0 -11px -10px;margin-
bottom:-10px;width:9em;height:auto;float:left;border-left:1px solid
#a9d44c;border-bottom:1px solid #a9d44c;}
#nav ul ul {top:auto;}
#nav li ul ul {left:12em;margin:0px 0 0 10px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{display:none;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li
li li li:hover ul {display:block;}
//
Still a little unsure of what i need to do to add this behavior, i was
under the impression i needed a lil jQuery function to enable this?
Thanks in advance
FudgeCat
[jQuery] $(this).next() doesn't work
Hi all. how can i addClass from the clicked element lia to the
next li?
i've tried this
$('.first li a').bind('click',function()
$(this).next('li').addClass('second');
});
but won't work,
the original code :
div class=first
ul
lia href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
/ul
/div
and clicking on the first $('li a') the output code should be :
div class=first
ul
lia href=#img//a/li
li class=seconda href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
/ul
/div
any idea ??
Tnx in advance
Diego
[jQuery] R: [jQuery] $(this).next() doesn't work
I forgot to say that i need to use
$('.first li a').bind('click',function()
'couse with the var pathImg = $(this).attr('href');
i get the href of the clicked element.
Diego
--- Ven 7/11/08, diego [EMAIL PROTECTED] ha scritto:
Da: diego [EMAIL PROTECTED]
Oggetto: [jQuery] $(this).next() doesn't work
A: jQuery (English) jquery-en@googlegroups.com
Data: Venerdì 7 novembre 2008, 10:17
Hi all. how can i addClass from the clicked element lia to the
next li?
i've tried this
$('.first li a').bind('click',function()
$(this).next('li').addClass('second');
});
but won't work,
the original code :
div class=first
ul
lia href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
/ul
/div
and clicking on the first $('li a') the output code should be :
div class=first
ul
lia href=#img//a/li
li class=seconda
href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
/ul
/div
any idea ??
Tnx in advance
Diego
Unisciti alla community di Io fotografo e video, il nuovo corso di
fotografia di Gazzetta dello sport:
http://www.flickr.com/groups/iofotografoevideo
[jQuery] Re: Understanding JQuery/Javascript.
It merges the new function into jQuery, meaning you can then apply all
of the library's methods to it. Try http://docs.jquery.com/Plugins/Authoring
if you haven't yet seen it.
I often write tiny add-ons in basic style, eg
function menutoggle ()
{
do stuff
};
But these only serve one purpose; they can't be 'plugged into' other
jQuery routines.
Steven Holzner's book on OOP has a section on extending; try
http://tinyurl.com/6nv5hh
Cherry.
George wrote:
Hi guys, I need some help with understanding JQuery/Javacript.
I am far away form being a Javascript guru so I am not sure I
understand why something done this (or other) way.
I am looking at tablesorterPager plug-in and it's written following
way
(function($) {
$.extend({
tablesorterPager: new function() {
...blablabla..
}
});
// extend plugin scope
$.fn.extend({
tablesorterPager: $.tablesorterPager.construct
});
})(jQuery);
If I were to write this plug in I would do it like this
(function($)
{
$.fn.tablesorterPager = function()
{
.blabblabla
}
})(jQuery);
Questions:
Any advantages of writing it the way it's written?
Basically what is this $.extend({}) for? What does it achive.
Thanks
George.
[jQuery] Re: Finding id and setting as variable
but this doesn't work.
Care to elaborate?do you get an error? unexpected results?
something else?
On Nov 7, 7:19 am, Liam Potter [EMAIL PROTECTED] wrote:
Hi guys, this should be a quick one
I have a div, which has a unqiue id (pulled from the database) so
something like this.
div class=msg id=msg%#Eval(PrimaryKeyID)%
/div
and I'm trying to get the id number from it like this
var uid = $(.msg).id.replace('msg', );
as I'm running a similar function
$(span.yes).click(function (event) {
event.preventDefault();
var inc = this.id.replace('yes', );
});
I thought I could just replace the this for a selector but this doesn't
work.
Can anyone let me know how I would do this.
Thanks,
Liam
[jQuery] Re: Finding id and setting as variable
ok, this has stopped the error, but it was only returning the id of the
first div.msg it found, I changed it to this
var uid = $(span#yes+
inc).parent().parent().parent().attr(id).replace('msg', );
which is now working.
Thanks for the help guys.
Richard D. Worth wrote:
Change
$(.msg).id
to
$(.msg).attr(id)
- Richard
On Fri, Nov 7, 2008 at 7:27 AM, Liam Potter [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
The error I get in firebug is
$(.msg).id is undefined
basically what I'm trying to do is pass this into an ajax post to
delete the message, so it's vital the id is the same one from the
database.
MorningZ wrote:
but this doesn't work.
Care to elaborate?do you get an error? unexpected results?
something else?
On Nov 7, 7:19 am, Liam Potter [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
Hi guys, this should be a quick one
I have a div, which has a unqiue id (pulled from the
database) so
something like this.
div class=msg id=msg%#Eval(PrimaryKeyID)%
/div
and I'm trying to get the id number from it like this
var uid = $(.msg).id.replace('msg', );
as I'm running a similar function
$(span.yes).click(function (event) {
event.preventDefault();
var inc = this.id.replace('yes', );
});
I thought I could just replace the this for a selector but
this doesn't
work.
Can anyone let me know how I would do this.
Thanks,
Liam
[jQuery] Re: validate : help with required code
In this case you need a custom required-method. Your check makes the
field required, but its still valid to the required method (it has a
value).
Jörn
On Thu, Nov 6, 2008 at 6:45 PM, Chuck Cheeze [EMAIL PROTECTED] wrote:
I have a form field that by default has the value First. When the
user clicks into the field it clears that value, and if they type
nothing, when they blur the field it replaces First. You've all
seen this.
I want the validate plugin to say this field is required if the value
onsubmit is First. Can't seem to make it work.
[code]
// validate signup form on keyup and submit
$(#contactform).validate({
rules: {
name_first: {
required: function(element) {
return $
('#name_first').val() != First;
}
},
name_last: required,
country: required,
otherinfo: required,
email: {
required: true,
email: true
}
}
});
input type=text name=name_first value=First size=15
id=name_first class=inputfield_name swaptextbox greybox
tabindex=1 /
[/code]
Once I do that, I'll use the same code for last name.
[jQuery] Re: slideDown animation jumps - even without padding set.
Hi Jon, This article might help you: http://jqueryfordesigners.com/animation-jump-quick-tip/ Rik 2008/11/7 jonhobbs [EMAIL PROTECTED]: Thaks Liam, Unfortunately it will hold dynamic content from a database so I don't know the height and can't explicitly set it. (although I did try it and that did solve the problem) I'm wondering if it might be possible to get the height using a more reliable method and then set it explicitly before calling slideUp? Anyone else solved this problem? Jon On Nov 7, 1:24 pm, Liam Potter [EMAIL PROTECTED] wrote: does the div have the have no height? if not set a height on the div, if it needs to be expandable then someone who knows more about this will need to help you. Though looking into the dimensions plugin may help.http://brandonaaron.net/docs/dimensions/#sample-2 jonhobbs wrote: I know jquery sometimes has a problem calculating the heights of elements that have padding/margins which can cause jumpy animations when using slideDown. Unfortunately I have now come across the same problem without using margins/padding and I've managed to create a very simple test case which demonstrates that it's happening on even the simplest of unstyled pages. http://83.138.132.232/test.htm Click the heading to make the text slide up and then click it again to make it slide down. You'll see that it gets to the height that it would have been if the width:700px wasn't there and then jumps the rest. Unfortunately, the element I want to slide has to be inside my main template which has widths set so I'm at a loss as to how to get round the problem. Any help would really be appreciated. Jon -- Rik Lomas http://rikrikrik.com
[jQuery] Re: slideDown animation jumps - even without padding set.
Hi Rik,
Thanks for that, but unfortunately as I said I knew about that problem
already and I'm not using any padding/margins.
I have managed to work round the problem by getting and setting the
height of the element usign jquery dimensions before doing the
slideDown
$('#heading').toggle(
function() {
$('#text').slideUp(2000);
},
function() {
var elementHeight = $('#text').height();
- Get the computed height
$('#text').css('height', elementHeight + 'px');
- Set the CSS height
$('#text').slideDown(2000);
}
);
That seems to work but would still like to hear of a neater solution
if anyone has one.
Jon
On Nov 7, 1:51 pm, Rik Lomas [EMAIL PROTECTED] wrote:
Hi Jon,
This article might help
you:http://jqueryfordesigners.com/animation-jump-quick-tip/
Rik
2008/11/7 jonhobbs [EMAIL PROTECTED]:
Thaks Liam,
Unfortunately it will hold dynamic content from a database so I don't
know the height and can't explicitly set it. (although I did try it
and that did solve the problem)
I'm wondering if it might be possible to get the height using a more
reliable method and then set it explicitly before calling slideUp?
Anyone else solved this problem?
Jon
On Nov 7, 1:24 pm, Liam Potter [EMAIL PROTECTED] wrote:
does the div have the have no height?
if not set a height on the div, if it needs to be expandable then
someone who knows more about this will need to help you.
Though looking into the dimensions plugin may
help.http://brandonaaron.net/docs/dimensions/#sample-2
jonhobbs wrote:
I know jquery sometimes has a problem calculating the heights of
elements that have padding/margins which can cause jumpy animations
when using slideDown.
Unfortunately I have now come across the same problem without using
margins/padding and I've managed to create a very simple test case
which demonstrates that it's happening on even the simplest of
unstyled pages.
http://83.138.132.232/test.htm
Click the heading to make the text slide up and then click it again to
make it slide down. You'll see that it gets to the height that it
would have been if the width:700px wasn't there and then jumps the
rest.
Unfortunately, the element I want to slide has to be inside my main
template which has widths set so I'm at a loss as to how to get round
the problem.
Any help would really be appreciated.
Jon
--
Rik Lomashttp://rikrikrik.com
[jQuery] Superfish Click-Problem
Hi all,
I got a little problem with superfish.
The links in the sub menu don't work every time. That means if I click
on a sub menu link it doesn't work some times and some times it works.
I didn't change the superfish.js. But I have another JS-Function that
blurs every link on my page.
It seems to work if I disable that blur-function. Could it be that the
function disrupt the links in the superfish sub menu?
Heres the blur-function:
function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;ilnks.length;i++){
lnks[i].onfocus=new Function(this.blur());
}
}
Thanx for your help.
[jQuery] add child to ul very simple question!
Ok, this probably just needs someone to slap me towards a tutorial,
however I couldn't seem to find one!
I'm trying to use jquery to add a child to part of an unordered list,
so can anyone explain how to make a new sub-child of the id 'test'
appear? (see below)
SCRIPT:
function populateAmounts(){
$('#test').append(document.appendChild(name of new child);
}
HTML:
ul
lispan class=folderSubfolder 2.1/span
ul id=folder21
li id=testFile 2.1.1/li
liFile 2.1.2/li
/ul
/li
lispan class=fileFile 2.2/span/li
/ul
Many thanks!
[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] slideDown animation jumps - even without padding set.
I know jquery sometimes has a problem calculating the heights of elements that have padding/margins which can cause jumpy animations when using slideDown. Unfortunately I have now come across the same problem without using margins/padding and I've managed to create a very simple test case which demonstrates that it's happening on even the simplest of unstyled pages. http://83.138.132.232/test.htm Click the heading to make the text slide up and then click it again to make it slide down. You'll see that it gets to the height that it would have been if the width:700px wasn't there and then jumps the rest. Unfortunately, the element I want to slide has to be inside my main template which has widths set so I'm at a loss as to how to get round the problem. Any help would really be appreciated. Jon
[jQuery] Re: slideDown animation jumps - even without padding set.
Actually, that solution only works in IE anyway as .height() is
reporting the wrong height in safari and chrome.
So I guess now I'm trying to find a solution to get the correct height
of an element in all browsers.
Jon
On Nov 7, 1:58 pm, jonhobbs [EMAIL PROTECTED] wrote:
Hi Rik,
Thanks for that, but unfortunately as I said I knew about that problem
already and I'm not using any padding/margins.
I have managed to work round the problem by getting and setting the
height of the element usign jquery dimensions before doing the
slideDown
$('#heading').toggle(
function() {
$('#text').slideUp(2000);
},
function() {
var elementHeight = $('#text').height();
- Get the computed height
$('#text').css('height', elementHeight + 'px');
- Set the CSS height
$('#text').slideDown(2000);
}
);
That seems to work but would still like to hear of a neater solution
if anyone has one.
Jon
On Nov 7, 1:51 pm, Rik Lomas [EMAIL PROTECTED] wrote:
Hi Jon,
This article might help
you:http://jqueryfordesigners.com/animation-jump-quick-tip/
Rik
2008/11/7 jonhobbs [EMAIL PROTECTED]:
Thaks Liam,
Unfortunately it will hold dynamic content from a database so I don't
know the height and can't explicitly set it. (although I did try it
and that did solve the problem)
I'm wondering if it might be possible to get the height using a more
reliable method and then set it explicitly before calling slideUp?
Anyone else solved this problem?
Jon
On Nov 7, 1:24 pm, Liam Potter [EMAIL PROTECTED] wrote:
does the div have the have no height?
if not set a height on the div, if it needs to be expandable then
someone who knows more about this will need to help you.
Though looking into the dimensions plugin may
help.http://brandonaaron.net/docs/dimensions/#sample-2
jonhobbs wrote:
I know jquery sometimes has a problem calculating the heights of
elements that have padding/margins which can cause jumpy animations
when using slideDown.
Unfortunately I have now come across the same problem without using
margins/padding and I've managed to create a very simple test case
which demonstrates that it's happening on even the simplest of
unstyled pages.
http://83.138.132.232/test.htm
Click the heading to make the text slide up and then click it again to
make it slide down. You'll see that it gets to the height that it
would have been if the width:700px wasn't there and then jumps the
rest.
Unfortunately, the element I want to slide has to be inside my main
template which has widths set so I'm at a loss as to how to get round
the problem.
Any help would really be appreciated.
Jon
--
Rik Lomashttp://rikrikrik.com
[jQuery] Re: Superfish Click-Problem
Hello,
It looks like you have found the problem. Superfish does attach
menu-closing functions to the blur event of the anchors inside the
menu, so when you trigger a blur event upon focus the menu must be
closing before the click action occurs. The solution (aside from
simply not blurring the links) could be to apply your BlurLinks
function to all anchors *except* those within the menu. A jQuery way
of doing this, in addition to replacing your BlurLinks function, is as
follows (although it is untested, and I'm a little rusty):
$(document).ready(function(){
$('a').not('ul.sf-menu a').bind('focus',function(){
this.blur();
});
});
Hope this helps.
Joel Birch.
[jQuery] Re: Link in an iFrame changing Parent window elements
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: traversing with jQuery - complex selector causing brain pain
Hi there,
Try this:
$('#navigation li ul:not(:has(a.selected))').hide();
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Nov 6, 2008, at 12:45 PM, w1ntermut3 wrote:
My nav bar consists of a single UL containing LI elements that each
contain a single A.
Well, most of them do.
Some LI elements contain a further UL as well as the A: these
submenu UL elements follow the same pattern of containing LI
elements that each contain a single A.
So far, so simple.
Currently, I'm hiding all the submenu UL's on load:
$('#navigation li ul').hide();
But what I want is to only hide the submenu UL's that do NOT contain
an LI containing an A with a class of selected.
To rephrase: if any of the A elements (which are all inside an LI
element) in that particular subnav UL, have a class of selected, I
want the UL to remain expanded.
To rephrase even more: I don't want to hide the subnav containing the
current page.
Despite spending far too long examining the expressions and
traversing documentation, I can't figure out how to build a selector
statement that will encompass them.
Can you help?
[jQuery] Re: Can't figure out why click function won't work for lifeimage
Neither works, The problem seems to be in that it is not recognizing the click event. I can replace the action inside the function with anything, including a simple alert, and it won't work, so the problem must be with trouble reading the click event.
[jQuery] Re: add child to ul very simple question!
You can do:
$('#test').after('liHello/li');
or:
$('#test').parent().append('liHello/li');
Rik
2008/11/7 jfk [EMAIL PROTECTED]:
Ok, this probably just needs someone to slap me towards a tutorial,
however I couldn't seem to find one!
I'm trying to use jquery to add a child to part of an unordered list,
so can anyone explain how to make a new sub-child of the id 'test'
appear? (see below)
SCRIPT:
function populateAmounts(){
$('#test').append(document.appendChild(name of new child);
}
HTML:
ul
lispan class=folderSubfolder 2.1/span
ul id=folder21
li id=testFile 2.1.1/li
liFile 2.1.2/li
/ul
/li
lispan class=fileFile 2.2/span/li
/ul
Many thanks!
--
Rik Lomas
http://rikrikrik.com
[jQuery] Re: How to select a group of similar named objects?
$(.class).show();
$(.class).hide();
nmiddleweek wrote:
Hello,
Is there a shorthand way of setting the visiblity to hidden and
display to none?
and a shortcut for the other way round? perhaps .show() that includes
the display:inline;
Cheers,
Nick
On Nov 6, 9:19 pm, jquertil [EMAIL PROTECTED] wrote:
aslo, $('#tag_cWeb_TSW_Day*').css('visibility', 'hidden')
that can just be
$('#tag_cWeb_TSW_Day*').hide()
[jQuery] Re: Select all options on button click
why not have an all option in your select box and do the rest server side?
JQueryProgrammer wrote:
Hi All,
I am trying to write a JQuery function which would select all my
options in the select control with the click of a button. I am able to
do it with the following function:
$(#btnAll).click(function() {
$(#myselect *).attr(selected,selected);
});
But the problem is my select list box has more than 5000 values and
selecting each option with this method takes much time and scrolls the
whole select box.
Can anyone please help me in optimizing this function so that I can
instantly select without the user getting displayed about the
scrolling.
[jQuery] [validate] Triggering Validation using a button instead of submit
Hi There,
I've been using the validation plug in for a while now and I love it,
but I am stuck on something.
I am trying to validate a form using:
input type=button id=submit name=submit value=Submit /
instead of the usual:
input type=submit id=submit name=submit value=Submit /
I tried using:
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.form();
});
to do the validation but that doesn't do anything at all. Has anyone
been able to figure this out?
Thanks,
Justin
[jQuery] Re: How to select a group of similar named objects?
ah, ok, that's what I had but didn't think it was doing the
display:inline/none bit?... will try again.
Thanks,
Nick
On Nov 7, 3:29 pm, Liam Potter [EMAIL PROTECTED] wrote:
$(.class).show();
$(.class).hide();
nmiddleweek wrote:
Hello,
Is there a shorthand way of setting the visiblity to hidden and
display to none?
and a shortcut for the other way round? perhaps .show() that includes
the display:inline;
Cheers,
Nick
On Nov 6, 9:19 pm, jquertil [EMAIL PROTECTED] wrote:
aslo, $('#tag_cWeb_TSW_Day*').css('visibility', 'hidden')
that can just be
$('#tag_cWeb_TSW_Day*').hide()
[jQuery] Re: LiveQuery with Tipsy (tooltip) help
Your very close... Try this instead:
$('a[title]')
.livequery(function() {
$(this).tipsy({ fade: true, gravity: 'w' });
});
No need to return false.
--
Brandon Aaron
On Thu, Nov 6, 2008 at 9:14 PM, idealists [EMAIL PROTECTED]wrote:
Im got a section of my page which updates via ajax pagination.
The jQuery tipsy tooltips work on the initial page load, but when I
click Page 2 and so on, and the ajax containing div updates with new
content the tipsy tooltips do no display.
Solution (I thought) was to use the jQuery LiveQuery plugin. However
I am unable to get that to work.
Im kind of new to jQuery.
This is what I have so far:
script type=text/javascript
$('a[title]')
.livequery(function() {
$('a[title]').tipsy({fade: true, gravity: 'w'});
return false;
});
/script
This seems to work on the initial page load, but doesn't bind any new
a['title'] elements when the page is updated via ajax.
Any help would be appreciated.
Thanks
[jQuery] Re: Triggering Validation using a button instead of submit
Try using the triggerhandler function:
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.triggerHandler('submit');
});
Not tested...
HTH
M
On Nov 7, 3:41 pm, Justin Kozuch [EMAIL PROTECTED] wrote:
Hi There,
I've been using the validation plug in for a while now and I love it,
but I am stuck on something.
I am trying to validate a form using:
input type=button id=submit name=submit value=Submit /
instead of the usual:
input type=submit id=submit name=submit value=Submit /
I tried using:
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.form();
});
to do the validation but that doesn't do anything at all. Has anyone
been able to figure this out?
Thanks,
Justin
[jQuery] Re: How to select a group of similar named objects?
it switches between display:block and none.
nmiddleweek wrote:
ah, ok, that's what I had but didn't think it was doing the
display:inline/none bit?... will try again.
Thanks,
Nick
On Nov 7, 3:29 pm, Liam Potter [EMAIL PROTECTED] wrote:
$(.class).show();
$(.class).hide();
nmiddleweek wrote:
Hello,
Is there a shorthand way of setting the visiblity to hidden and
display to none?
and a shortcut for the other way round? perhaps .show() that includes
the display:inline;
Cheers,
Nick
On Nov 6, 9:19 pm, jquertil [EMAIL PROTECTED] wrote:
aslo, $('#tag_cWeb_TSW_Day*').css('visibility', 'hidden')
that can just be
$('#tag_cWeb_TSW_Day*').hide()
[jQuery] span tag is width:80px but is only showing the width of contents?
Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
Span is an inline element and cannot have a width applied to it, unless you display it as a block, which would sort of defeat the purpose of having it inline. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of nmiddleweek Sent: Friday, November 07, 2008 9:46 AM To: jQuery (English) Subject: [jQuery] span tag is width:80px but is only showing the width of contents? Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
Ah right, ok... Cheers for the replies... I'm guessing applying display:block is the same as just making it a DIV? On Nov 7, 3:48 pm, Andy Matthews [EMAIL PROTECTED] wrote: Span is an inline element and cannot have a width applied to it, unless you display it as a block, which would sort of defeat the purpose of having it inline. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of nmiddleweek Sent: Friday, November 07, 2008 9:46 AM To: jQuery (English) Subject: [jQuery] span tag is width:80px but is only showing the width of contents? Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: Triggering Validation using a button instead of submit
Correction:
validator.triggerHandler('submit');
change to
$('#formid').triggerHandler('submit');
M
On Nov 7, 3:45 pm, mbraybrook [EMAIL PROTECTED] wrote:
Try using the triggerhandler function:
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.triggerHandler('submit');
});
Not tested...
HTH
M
On Nov 7, 3:41 pm, Justin Kozuch [EMAIL PROTECTED] wrote:
Hi There,
I've been using the validation plug in for a while now and I love it,
but I am stuck on something.
I am trying to validate a form using:
input type=button id=submit name=submit value=Submit /
instead of the usual:
input type=submit id=submit name=submit value=Submit /
I tried using:
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.form();
});
to do the validation but that doesn't do anything at all. Has anyone
been able to figure this out?
Thanks,
Justin
[jQuery] Re: LiveQuery with Tipsy (tooltip) help
Hi Brandon
Thanks, so much for your reply I had actually tried that too.
And yes this does work..However, strangely, ONLY when I have mouse
overed ANOTHER link (with title attrible a['title']) that is OUTSIDE
the part of the page that is refreshed when the ajax pagination
occurs.
If I first mouseover a link (with title) in the updated content, then
the tooltip doesn't work (until I mouseover such a link outside the
updated content).
Strange eh.
Any ideas?
On Nov 8, 2:43 am, Brandon Aaron [EMAIL PROTECTED] wrote:
Your very close... Try this instead:
$('a[title]')
.livequery(function() {
$(this).tipsy({ fade: true, gravity: 'w' });
});
No need to return false.
--
Brandon Aaron
On Thu, Nov 6, 2008 at 9:14 PM, idealists [EMAIL PROTECTED]wrote:
Im got a section of my page which updates via ajax pagination.
The jQuery tipsy tooltips work on the initial page load, but when I
click Page 2 and so on, and the ajax containing div updates with new
content the tipsy tooltips do no display.
Solution (I thought) was to use the jQuery LiveQuery plugin. However
I am unable to get that to work.
Im kind of new to jQuery.
This is what I have so far:
script type=text/javascript
$('a[title]')
.livequery(function() {
$('a[title]').tipsy({fade: true, gravity: 'w'});
return false;
});
/script
This seems to work on the initial page load, but doesn't bind any new
a['title'] elements when the page is updated via ajax.
Any help would be appreciated.
Thanks
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: Triggering Validation using a button instead of submit
No joy there...
Here's my code:
// validate signup form on keyup and submit
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.triggerHandler('submit');
rules: {
}, // end rules
messages: {
...
} // end messages
});
});
});
I'm not getting any JS errors, so I'm going to assume that everything
is in order. However, validation still isn't occuring... Oh, how I
love Fridays. ;)
- justin
On Nov 7, 10:47 am, mbraybrook [EMAIL PROTECTED] wrote:
Correction:
validator.triggerHandler('submit');
change to
$('#formid').triggerHandler('submit');
M
On Nov 7, 3:45 pm, mbraybrook [EMAIL PROTECTED] wrote:
Try using the triggerhandler function:
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.triggerHandler('submit');
});
Not tested...
HTH
M
On Nov 7, 3:41 pm, Justin Kozuch [EMAIL PROTECTED] wrote:
Hi There,
I've been using the validation plug in for a while now and I love it,
but I am stuck on something.
I am trying to validate a form using:
input type=button id=submit name=submit value=Submit /
instead of the usual:
input type=submit id=submit name=submit value=Submit /
I tried using:
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.form();
});
to do the validation but that doesn't do anything at all. Has anyone
been able to figure this out?
Thanks,
Justin
[jQuery] Re: Selectors with :has and with variables
I owe you an apology, Hector - I'd been looking at the same lines for
so long, I'd stopped seeing what I'd written ... and was doubling-up
my selector. This DOES work:
$( '#themenu' ).children( 'li[id]' ).hover( function() {
var theID = $(this).attr('id');
$( # + theID + ul ).toggle() ;
});
Thank you very much!
Cherry.
On Nov 7, 12:27 am, Hector Virgen [EMAIL PROTECTED] wrote:
Maybe this:
$( '#cat [ + theID + ] ul' ).toggle() ;
Should be like this?
$( #cat # + theID + ul ).toggle() ;
-Hector
On Thu, Nov 6, 2008 at 4:14 PM, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
I have read the other threads on this topic, but am still getting
nowhere ...
I'm trying to make a simple (haha) show-hide menu.
The first last menu items are static - and don't have IDs. I need to
select them out, otherwise I get a g is undefined error.
Problem 1: The initial selection doesn't work
$( '#themenu' ).children( 'li:has(id)' ).hover( function() {
alert ( 'Got an id!' );
});
What have I done wrong?
Problem 2: Getting the relevant var into my toggle statement.
This works: $( '#cat2 ul' ).toggle() ;
This doesn't work:
$( this.hash ).children( 'ul' ).toggle() ;
This doesn't work, either:
var theID = $(this).attr('id');
$( '#cat [ + theID + ] ul' ).toggle() ;
I'm at my wits' end, and desperate for your insights
[jQuery] Creating an image thumnail rotator help!
Hi Guys
This is my first attempt at doing anything jQuery (that is partly my
own).
So please don't shoot me down :)
I would like your help, improving, my simple thumbnail rotator
script.
It is something I'm sure most jQuery gurus could code in a matter of
minutes, but has taken me the better part of the day, as I head bang
my way thru it.
This uses jQuery Timers (http://jquery.offput.ca/every/).
Also basically this works in Win..FF3 (haven't tested other browsers)
- However it really needs to have added image preloading - if you know
how..please share:)
Any code improvements, corrections, additions (preloading) would be
much appreciated.
script type=text/javascript
var start_image;
var next_image, next_num;
$.fn.thumb_change = function() {
start_image = $(img:first,this).attr(src);
var i=0;
jQuery.timer.add(this, 1s, thumb_counter, function(){
next_num = i + 1;
if (next_num10) next_num = 0 + next_num;
next_image = start_image.replace(01.jpg, next_num+.jpg);
$(img:first,this).attr(src, next_image);
i++;
if (next_num == 20) i=0;
});
};
$.fn.thumb_reset = function() {
jQuery.timer.remove(this, thumb_counter);
$(img:first,this).attr(src, start_image);
};
$(document).ready(function(){
$('a.thumbnail_link').mouseover($.fn.thumb_change)
.mouseout($.fn.thumb_reset);
});
/script
THANK YOU!
[jQuery] multiple toggle classes within one ID
Hi,
I'm trying to implement multiple toggle classes within one ID.
When you toggle 1 class, the intial span 'view details' would hide and
the hidden span 'hide details' would display.
the problem i'm having is i'm unable to specify the text toggling to
happen just to the current class. its happening across all classes.
See code example below...
-
script type=text/javascript
!--
$(document).ready(function() {
var showText = View details;
var hideText = Hide details;
$(.hide).hide();
$(#award_cat .view).click(function() {
$(.hide).show();
$(.view).hide();
$(this).prev(.more).slideDown(slow);
return false;
});
$(#award_cat .hide).click(function() {
$(.view).show();
$(.hide).hide();
$(.more).slideUp(slow);
return false;
});
});
//--
/script
-
body
div id=award_cat
br /
div class=more
blah blah blahbr /
blah blah blahbr /
blah blah blahbr /
/div
span class=viewView details/spanspan class=hideHide
details/span
br /br /
div class=more
blah blah blahbr /
blah blah blahbr /
blah blah blahbr /
/div
span class=viewView details/spanspan class=hideHide
details/span
/div
/body
-
Any advice/help would be deeply appreciated. :)
[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: Scrolling inside a div with mousemove
Ah ok,
So does that mean I need to calctulate how far up or down it can
scroll?
On Nov 7, 7:34 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
Ah,
This part of the code:
// Use the e.clientX and e.clientY vs this.tempPosition
// to determine how much to move the scrollbars according
// to your tastes.
Was intended to be replaced by math that calculated the setTop and setLeft
values.
I didn't do that part.
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Dan
Sent: Thursday, November 06, 2008 8:27 PM
To: jQuery (English)
Subject: [jQuery] Re: Scrolling inside a div with mousemove
Hi Jeffrey,
Thank you for your reply, however I can't seem to get your code to
work.
I'm getting an error that says setTop is not defined
Any idea why this is?
On Nov 6, 1:15 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
Well, you could do something like this (completely untested, sorry).
The hover events bind and unbind the mousemove to prevent resource drain.
$('#thisdiv').hover(startScroll,stopScroll);
function startScroll(e)
{
var div = $(this).bind('mousemove',scrollThis);
var o = div.offset();
this.tempPosition = {
left:o.left,
top:o.top,
right:o.left+div.width(),
bottom:o.top+div.height(),
scrollOffsetX:this.scrollWidth-this.clientWidth,
scrollOffsetY:this.scrollHeight-this.clientHeight,
};
}
function stopScroll(e)
{
$(this).unbind('mousemove').removeAttr('tempPosition');
}
function scrollThis(e)
{
// Use the e.clientX and e.clientY vs this.tempPosition
// to determine how much to move the scrollbars according
// to your tastes.
this.scrollTop = setTop;
this.scrollLeft = setLeft;
}
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Dan
Sent: Wednesday, November 05, 2008 2:56 PM
To: jQuery (English)
Subject: [jQuery] Scrolling inside a div with mousemove
Hello,
I'm trying to move from MooTools over the jQuery as it seems to be a
much reliable and user friendly framework.
However I need to recreate something that I currently have MooTools
doing but am having trouble figuring out how it would work.
I'm trying to replicate the effect seen in the 'mousemove' example of
this MooTools pagehttp://demos111.mootools.net/Scroller.
It doesn't need to scroll left and right but it's fine if it does, I'm
quite comfortable using JavaScript but just to warn you I'm very new
to jQuery :)
Thank you very much for any help.
[jQuery] Re: Triggering Validation using a button instead of submit
It's my understanding that the validation plug-in listens for a form
to be submitted before performing its checks. If this isn't the case
then this won't work, but, in your sample code you've used:
validator.triggerHandler('submit');
which will need to be changed to:
$('#formid').triggerHandler('submit');
Validator is the validate function itself and as far as i know does
not support a triggerHandler method, or a 'submit' event. So this
rules needs to be applied to the form element itself.
JQuery has a nack for failing silently - good for production; bad for
development!
Friday has a nack for being lame - good for.. well.. nothing!
M
On Nov 7, 4:04 pm, Justin Kozuch [EMAIL PROTECTED] wrote:
No joy there...
Here's my code:
// validate signup form on keyup and submit
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.triggerHandler('submit');
rules: {
}, // end rules
messages: {
...
} // end messages
});
});
});
I'm not getting any JS errors, so I'm going to assume that everything
is in order. However, validation still isn't occuring... Oh, how I
love Fridays. ;)
- justin
On Nov 7, 10:47 am, mbraybrook [EMAIL PROTECTED] wrote:
Correction:
validator.triggerHandler('submit');
change to
$('#formid').triggerHandler('submit');
M
On Nov 7, 3:45 pm, mbraybrook [EMAIL PROTECTED] wrote:
Try using the triggerhandler function:
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.triggerHandler('submit');
});
Not tested...
HTH
M
On Nov 7, 3:41 pm, Justin Kozuch [EMAIL PROTECTED] wrote:
Hi There,
I've been using the validation plug in for a while now and I love it,
but I am stuck on something.
I am trying to validate a form using:
input type=button id=submit name=submit value=Submit /
instead of the usual:
input type=submit id=submit name=submit value=Submit /
I tried using:
var validator = $(#sourcing).validate();
$(#submit).click(function() {
validator.form();
});
to do the validation but that doesn't do anything at all. Has anyone
been able to figure this out?
Thanks,
Justin
[jQuery] Anyway to make flexigrid liquid ?
Anyone know a way to make this flexigrid liquid? What I mean is, if it is in a browser window, it resizes with the window? It has grab tabs for this, but then you have to resize twice, first the browser, then the grid. http://www.webplicity.net/flexigrid/
[jQuery] Re: LiveQuery with Tipsy (tooltip) help
Are you using jQuery for the AJAX? Live Query really only works
automagically if you are using jQuery to modify the DOM. If you aren't using
jQuery for the AJAX, there are a few options. Live Query has an API doing
things a little more manual. After you load in the content from the AJAX
call run the following code:
jQuery.livequery.run();
That will invoke Live Query as if you modified the DOM with jQuery.
--
Brandon Aaron
On Fri, Nov 7, 2008 at 10:01 AM, idealists
[EMAIL PROTECTED]wrote:
Hi Brandon
Thanks, so much for your reply I had actually tried that too.
And yes this does work..However, strangely, ONLY when I have mouse
overed ANOTHER link (with title attrible a['title']) that is OUTSIDE
the part of the page that is refreshed when the ajax pagination
occurs.
If I first mouseover a link (with title) in the updated content, then
the tooltip doesn't work (until I mouseover such a link outside the
updated content).
Strange eh.
Any ideas?
On Nov 8, 2:43 am, Brandon Aaron [EMAIL PROTECTED] wrote:
Your very close... Try this instead:
$('a[title]')
.livequery(function() {
$(this).tipsy({ fade: true, gravity: 'w' });
});
No need to return false.
--
Brandon Aaron
On Thu, Nov 6, 2008 at 9:14 PM, idealists
[EMAIL PROTECTED]wrote:
Im got a section of my page which updates via ajax pagination.
The jQuery tipsy tooltips work on the initial page load, but when I
click Page 2 and so on, and the ajax containing div updates with new
content the tipsy tooltips do no display.
Solution (I thought) was to use the jQuery LiveQuery plugin. However
I am unable to get that to work.
Im kind of new to jQuery.
This is what I have so far:
script type=text/javascript
$('a[title]')
.livequery(function() {
$('a[title]').tipsy({fade: true, gravity: 'w'});
return false;
});
/script
This seems to work on the initial page load, but doesn't bind any new
a['title'] elements when the page is updated via ajax.
Any help would be appreciated.
Thanks
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
This works: input type=text style=float:left;/span style=width:80px; background-color:#00FF00;display:block;float:left;A/span However... I feel bad telling you that - this is bad markup - perhaps you could explain why you are trying to do this, or what the bigger picture here is? As stated by Andy, setting span, an inline element, to display:block, defeats the object of using a span tag at all. M On Nov 7, 4:04 pm, nmiddleweek [EMAIL PROTECTED] wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
Wrap the input in a div with and set the div's position to relative. Then, add the span as as a div, set the width, and position it absolutely. Its absolute position will be relative to the container div, not the page. div style=position: relative; input type=text name=name style=width: 100px; / div style=position: absolute; left: 100px; top: 0px; width: 90px;test/div /div -Hector On Fri, Nov 7, 2008 at 8:04 AM, nmiddleweek [EMAIL PROTECTED]wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] urgent please help; if statement not executing
i'm sorry to double post but i'm at my wits end with this. i once had this
code:
if ($('li.panel:not(:only-child)')) {
var $this =
$('li.panel:not(:only-child)').parent().parent();
($this).append('ul class=nav-carousel/ul');
// build links
$('.carousel ol').each(function(i){
var carouselNavDivs = $('ul.nav-carousel');
$(carouselNavDivs[i]).append('liprevious/li');
$(this).children().each(function(j){
var linkNum = 0;
linkNum = j+1;
$(carouselNavDivs[i]).append('li class=indicator'+linkNum+'/li');
});
$(carouselNavDivs[i]).append('linext/li');
});
}
and it was executing correctly, but it caused some bizarre problems...so i
changed to:
if ($('.carousel ol').size() 1) {
$('.carousel').append('ul class=nav-carousel/ul');
// build links
$('.carousel ol').each(function(i){
var carouselNavDivs = $('ul.nav-carousel');
$(carouselNavDivs[i]).append('li # previous
/li');
$(this).children().each(function(j){
linkNum = j+1;
$(carouselNavDivs[i]).append('li class=indicator # '+linkNum+'
/li');
});
$(carouselNavDivs[i]).append('li # next
/li');
});
}
but now it is adding the ul.nav-carousel to every single div.carousel and
building the links for each one instead of only doing it for div.carousel ol
that have more than one li only.
any clue?
--
View this message in context:
http://www.nabble.com/urgent-please-help--if-statement-not-executing-tp20380004s27240p20380004.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Anyway to make flexigrid liquid ?
Someone here may yet come up with an answer, but perhaps this question would be better in http://groups.google.com/group/flexigrid? Sorry i can't be any more use than that. M On Nov 7, 4:21 pm, yabdab [EMAIL PROTECTED] wrote: Anyone know a way to make this flexigrid liquid? What I mean is, if it is in a browser window, it resizes with the window? It has grab tabs for this, but then you have to resize twice, first the browser, then the grid. http://www.webplicity.net/flexigrid/
[jQuery] Re: Scrolling inside a div with mousemove
Yeah. There is some personal tastes too, like do you want it to constantly
move around, or only move when you mouse to the edge, etc.
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Dan
Sent: Friday, November 07, 2008 1:53 AM
To: jQuery (English)
Subject: [jQuery] Re: Scrolling inside a div with mousemove
Ah ok,
So does that mean I need to calctulate how far up or down it can
scroll?
On Nov 7, 7:34 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
Ah,
This part of the code:
// Use the e.clientX and e.clientY vs this.tempPosition
// to determine how much to move the scrollbars according
// to your tastes.
Was intended to be replaced by math that calculated the setTop and setLeft
values.
I didn't do that part.
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Dan
Sent: Thursday, November 06, 2008 8:27 PM
To: jQuery (English)
Subject: [jQuery] Re: Scrolling inside a div with mousemove
Hi Jeffrey,
Thank you for your reply, however I can't seem to get your code to
work.
I'm getting an error that says setTop is not defined
Any idea why this is?
On Nov 6, 1:15 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
Well, you could do something like this (completely untested, sorry).
The hover events bind and unbind the mousemove to prevent resource
drain.
$('#thisdiv').hover(startScroll,stopScroll);
function startScroll(e)
{
var div = $(this).bind('mousemove',scrollThis);
var o = div.offset();
this.tempPosition = {
left:o.left,
top:o.top,
right:o.left+div.width(),
bottom:o.top+div.height(),
scrollOffsetX:this.scrollWidth-this.clientWidth,
scrollOffsetY:this.scrollHeight-this.clientHeight,
};
}
function stopScroll(e)
{
$(this).unbind('mousemove').removeAttr('tempPosition');
}
function scrollThis(e)
{
// Use the e.clientX and e.clientY vs this.tempPosition
// to determine how much to move the scrollbars according
// to your tastes.
this.scrollTop = setTop;
this.scrollLeft = setLeft;
}
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Dan
Sent: Wednesday, November 05, 2008 2:56 PM
To: jQuery (English)
Subject: [jQuery] Scrolling inside a div with mousemove
Hello,
I'm trying to move from MooTools over the jQuery as it seems to be a
much reliable and user friendly framework.
However I need to recreate something that I currently have MooTools
doing but am having trouble figuring out how it would work.
I'm trying to replicate the effect seen in the 'mousemove' example of
this MooTools pagehttp://demos111.mootools.net/Scroller.
It doesn't need to scroll left and right but it's fine if it does, I'm
quite comfortable using JavaScript but just to warn you I'm very new
to jQuery :)
Thank you very much for any help.
[jQuery] Select all options on button click
Hi All,
I am trying to write a JQuery function which would select all my
options in the select control with the click of a button. I am able to
do it with the following function:
$(#btnAll).click(function() {
$(#myselect *).attr(selected,selected);
});
But the problem is my select list box has more than 5000 values and
selecting each option with this method takes much time and scrolls the
whole select box.
Can anyone please help me in optimizing this function so that I can
instantly select without the user getting displayed about the
scrolling.
[jQuery] clueTip plugin mouseOutClose with sticky:true problem
The clueTip plugin mouseOutClose option does not work fully if you hav
sticky set to on.
it only closes the cluetip if you hover over the cluetip itself.
It should also close when the mouse moves out of the element that
fired the cluetip (but not when the mouse is moving into the cluetip).
here are the options I have used:
$('a.popupOptions').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: true,
hoverIntent: false,
sticky: true,
fx: { open: 'fadeIn', openSpeed: 'fast' },
mouseOutClose: true,
closePosition: 'title',
local: true,
hideLocal: true,
topOffset: 5,
leftOffset: 10
});
and the HTML for it is:
div class=optionsPopupWrapper
a title=Menu options. class=popupOptions
rel=#popup1 href=#img src=/.png alt=V. //a
div class=diaryDayEntryOptions
id=popup1
h3Menu options/h3
ul
lia href=#Edit diary
entry/a/li
lia href=#Add entry to
my favourites/a/li
lia href=#Delete entry
from diary/a/li
/ul
/div
/div
do you have any suggestions:
[jQuery] Thank you (for all the fish?)
I just wanted to say: Thank you jQuery, John Reisig (http://ejohn.org/) and all the Team (http://docs.jquery.com/Contributors) behind it! Great work guys. Nokia and M$ ist just the beginning for world Domination ;-) http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/ Thank you Thank you Thank you Thomas - Still a JS/jQuery Beginner
[jQuery] Re: slideDown animation jumps - even without padding set.
Thaks Liam, Unfortunately it will hold dynamic content from a database so I don't know the height and can't explicitly set it. (although I did try it and that did solve the problem) I'm wondering if it might be possible to get the height using a more reliable method and then set it explicitly before calling slideUp? Anyone else solved this problem? Jon On Nov 7, 1:24 pm, Liam Potter [EMAIL PROTECTED] wrote: does the div have the have no height? if not set a height on the div, if it needs to be expandable then someone who knows more about this will need to help you. Though looking into the dimensions plugin may help.http://brandonaaron.net/docs/dimensions/#sample-2 jonhobbs wrote: I know jquery sometimes has a problem calculating the heights of elements that have padding/margins which can cause jumpy animations when using slideDown. Unfortunately I have now come across the same problem without using margins/padding and I've managed to create a very simple test case which demonstrates that it's happening on even the simplest of unstyled pages. http://83.138.132.232/test.htm Click the heading to make the text slide up and then click it again to make it slide down. You'll see that it gets to the height that it would have been if the width:700px wasn't there and then jumps the rest. Unfortunately, the element I want to slide has to be inside my main template which has widths set so I'm at a loss as to how to get round the problem. Any help would really be appreciated. Jon
[jQuery] Help jquery.history!!!
hi everyone
i'm using jquery.history to manage history with ajax page i'm using this
script
script type=text/javascript
src=http://localhost/js/jquery-1.2.6.pack.js;/script
script type=text/javascript
src=http://localhost/js/jquery.history.js;/script
script type=text/javascript
function pageload(hash) {
if(hash) {
scrollTo(0,0);
ActivateRendering('LargeListControl',hash);
} else {
$.historyLoad(1);
}
}
$(document).ready(function(){
$.historyInit(pageload);
$([EMAIL PROTECTED]'history']).click(function(){ //
var hash = this.href;
hash = hash.replace(/^.*#/, '');
$.historyLoad(hash);
return false;
});
});
function ajaxComplete(){
$.historyInit(pageload);
$([EMAIL PROTECTED]'history']).click(function(){
var hash = this.href;
hash = hash.replace(/^.*#/, '');
$.historyLoad(hash);
return false;
});
};
it works on firefox not in IE anyone have an idea why?
i press back button nothing happens on IE although in firefox it navigate
on history browser
Thanks a lot!
--
View this message in context:
http://www.nabble.com/Help-jquery.history%21%21%21-tp20380659s27240p20380659.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: validate : help with required code
I understand that, I am asking for help writing that custom method. I
can't get it to work. So, if name_first = First then its required,
if it is anything else it is valid. Thanks
On Nov 7, 4:48 am, Jörn Zaefferer [EMAIL PROTECTED]
wrote:
In this case you need a custom required-method. Your check makes the
field required, but its still valid to the required method (it has a
value).
Jörn
On Thu, Nov 6, 2008 at 6:45 PM, Chuck Cheeze [EMAIL PROTECTED] wrote:
I have a form field that by default has the value First. When the
user clicks into the field it clears that value, and if they type
nothing, when they blur the field it replaces First. You've all
seen this.
I want the validate plugin to say this field is required if the value
onsubmit is First. Can't seem to make it work.
[code]
// validate signup form on keyup and submit
$(#contactform).validate({
rules: {
name_first: {
required: function(element) {
return $
('#name_first').val() != First;
}
},
name_last: required,
country: required,
otherinfo: required,
email: {
required: true,
email: true
}
}
});
input type=text name=name_first value=First size=15
id=name_first class=inputfield_name swaptextbox greybox
tabindex=1 /
[/code]
Once I do that, I'll use the same code for last name.
[jQuery] Re: Can't figure out why click function won't work for lifeimage
i replace it by an alert, it works fine.if there is any trouble with the click event it would be the same in firefox wich is not the case. 2008/11/7 Warren [EMAIL PROTECTED]: Neither works, The problem seems to be in that it is not recognizing the click event. I can replace the action inside the function with anything, including a simple alert, and it won't work, so the problem must be with trouble reading the click event.
[jQuery] Re: Selectors with :has and with variables
Having - finally! - finished this, I thought I'd post my code. I'm
very sure it could be more compact, but I'm a bit of a Javascript dork
and thought others might benefit from my step-by-step approach ;)
// menu show/hide
$( '#themenu' ).children( 'li[id]' ).hover( function() {
var theID = $( this ).attr( 'id' );
var theSiblings = $( this ).siblings() ;
// second level
var theList = # + theID + ul:first ;
$( theList ).slideToggle( 'slow' );
$( theSiblings ).children( 'ul' ).hide() ;
// third level
var theSub = $( theList ).children( 'li' ) ;
$( theSub ).hover( function() {
var theSubSibs = $( this ).siblings() ;
$( this ).children( 'ul' ).fadeIn( 'slow' ) ;
$( theSubSibs ).children( 'ul' ).fadeOut( 'fast' ) ;
});
},
function() {
$( this ).children( 'ul' ).hide( 'slow' ) ;
});
Cherry.
[jQuery] Re: LiveQuery with Tipsy (tooltip) help
jQuery.livequery.run() worked wonders!
You are right, not using jQuery to do ajax (yet). Will probably port
to it though.
Thanks champ!
On Nov 8, 3:26 am, Brandon Aaron [EMAIL PROTECTED] wrote:
Are you using jQuery for the AJAX? Live Query really only works
automagically if you are using jQuery to modify the DOM. If you aren't using
jQuery for the AJAX, there are a few options. Live Query has an API doing
things a little more manual. After you load in the content from the AJAX
call run the following code:
jQuery.livequery.run();
That will invoke Live Query as if you modified the DOM with jQuery.
--
Brandon Aaron
On Fri, Nov 7, 2008 at 10:01 AM, idealists
[EMAIL PROTECTED]wrote:
Hi Brandon
Thanks, so much for your reply I had actually tried that too.
And yes this does work..However, strangely, ONLY when I have mouse
overed ANOTHER link (with title attrible a['title']) that is OUTSIDE
the part of the page that is refreshed when the ajax pagination
occurs.
If I first mouseover a link (with title) in the updated content, then
the tooltip doesn't work (until I mouseover such a link outside the
updated content).
Strange eh.
Any ideas?
On Nov 8, 2:43 am, Brandon Aaron [EMAIL PROTECTED] wrote:
Your very close... Try this instead:
$('a[title]')
.livequery(function() {
$(this).tipsy({ fade: true, gravity: 'w' });
});
No need to return false.
--
Brandon Aaron
On Thu, Nov 6, 2008 at 9:14 PM, idealists
[EMAIL PROTECTED]wrote:
Im got a section of my page which updates via ajax pagination.
The jQuery tipsy tooltips work on the initial page load, but when I
click Page 2 and so on, and the ajax containing div updates with new
content the tipsy tooltips do no display.
Solution (I thought) was to use the jQuery LiveQuery plugin. However
I am unable to get that to work.
Im kind of new to jQuery.
This is what I have so far:
script type=text/javascript
$('a[title]')
.livequery(function() {
$('a[title]').tipsy({fade: true, gravity: 'w'});
return false;
});
/script
This seems to work on the initial page load, but doesn't bind any new
a['title'] elements when the page is updated via ajax.
Any help would be appreciated.
Thanks
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
That's a LOT of markup. You could actually use an input field if you just want to set a background color an some text. It might look like this: input type=text name=name style=width: 100px; / input type=text name=name value=some text style=width: 80px;background: #ff; border: 0px;height: 20px; / -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Hector Virgen Sent: Friday, November 07, 2008 10:30 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? Wrap the input in a div with and set the div's position to relative. Then, add the span as as a div, set the width, and position it absolutely. Its absolute position will be relative to the container div, not the page. div style=position: relative; input type=text name=name style=width: 100px; / div style=position: absolute; left: 100px; top: 0px; width: 90px;test/div /div -Hector On Fri, Nov 7, 2008 at 8:04 AM, nmiddleweek [EMAIL PROTECTED] wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] jQuery Ajax Data url encoding
Hello,
Im doing a simple ajax request:
$.ajax({
type: 'POST',
data: 'action=linklink=' + v,
url: getLocation('?switch=link'),
dataType: 'json',
success: function(json) {
showMessage(json.msg, json.status);
}
});
v in data is url like http://localhost/pub/file?
a=g=1746p=00s=13;
Server receive POST:
array (
'action' = 'link',
'link' = 'http://localhost/pub/file?a=',
'g' = '1746',
'p' = '00',
's' = '13',
)
escape(v), encodeURI(v), encodeURIComponent(v) doesn't help.
Thanks for any advice.
[jQuery] Jquery Cycle Plugin Problem
There is a problem with pc memmory when the plugin is working ( Tested in a few pcs). At Least you need a 2 core duo for a not problem experiencie, but try in a pentium 4 with 1gb of ram... and you will Khnow. Open the task administrator and test de memmory. Any Solution for this?
[jQuery] Re: jQuery Form Plugin - success callback function isn't called
Hrm, I'm having the same problem. Anybody have any ideas?
On Oct 23, 6:34 am, Sebastian [EMAIL PROTECTED] wrote:
Hey guys,
I'm working with the jQueryFormPlugin and I'm having some trouble
with it.
In my HTML I have a button, which, when clicked, inserts aformvia
jQuery. To then register theform'ssubmitevent, I use the
livequerypluginin my (document).ready function:
(document).ready(function($) {
var options = {
target: '#editable_content', // target element(s) to
be updated with server response
success: function(responseText, statusText)
{ alert(responseText); }, //post-submitcallback
};
$('.edit_contact').livequery('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
});
Theformsubmits as it should, using an AJAX call. When I add a
beforeSubmit callback function to the options array, that gets called
as well, as it should. Only the success callback (the alert) isn't
called and I don't know why.
Can anyone help???
Regards,
Sebastian
[jQuery] Re: Select all options on button click
Thanks for the reply. But this does not resolved my issue. I think
client side code is always faster than server side code. Also I do not
want to do a post back. I have also tried it with server side code but
its even slower than the above code. Any other code would be
appreciated.
On Nov 7, 5:28 pm, Liam Potter [EMAIL PROTECTED] wrote:
why not have an all option in your select box and do the rest server side?
JQueryProgrammer wrote:
Hi All,
I am trying to write a JQuery function which would select all my
options in the select control with the click of a button. I am able to
do it with the following function:
$(#btnAll).click(function() {
$(#myselect *).attr(selected,selected);
});
But the problem is my select list box has more than 5000 values and
selecting each option with this method takes much time and scrolls the
whole select box.
Can anyone please help me in optimizing this function so that I can
instantly select without the user getting displayed about the
scrolling.
[jQuery] Re: $(this).next() doesn't work
You need to do:
$(this).parent().next().addClass('second');
As the element the click is attached to is the a, so you need to
traverse up the DOM tree first
Rik
2008/11/7 diego [EMAIL PROTECTED]:
Hi all. how can i addClass from the clicked element lia to the
next li?
i've tried this
$('.first li a').bind('click',function()
$(this).next('li').addClass('second');
});
but won't work,
the original code :
div class=first
ul
lia href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
/ul
/div
and clicking on the first $('li a') the output code should be :
div class=first
ul
lia href=#img//a/li
li class=seconda href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
/ul
/div
any idea ??
Tnx in advance
Diego
--
Rik Lomas
http://rikrikrik.com
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
the most simple way to do this, is to simply apply display:block on the span. span style=display:block;width:80px;background:#00FF00;A/a that will fix it all. Andy Matthews wrote: That's a LOT of markup. You could actually use an input field if you just want to set a background color an some text. It might look like this: input type=text name=name style=width: 100px; / input type=text name=name value=some text style=width: 80px;background: #ff; border: 0px;height: 20px; / -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Hector Virgen Sent: Friday, November 07, 2008 10:30 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? Wrap the input in a div with and set the div's position to relative. Then, add the span as as a div, set the width, and position it absolutely. Its absolute position will be relative to the container div, not the page. div style=position: relative; input type=text name=name style=width: 100px; / div style=position: absolute; left: 100px; top: 0px; width: 90px;test/div /div -Hector On Fri, Nov 7, 2008 at 8:04 AM, nmiddleweek [EMAIL PROTECTED] wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: Creating an image thumnail rotator help!
Ok..I've tried to have a go at doing the image preload. Updated script
below.
Even though this works, I'm sure it could be coded much neater.
For one, I am not sure I am implementing jQuery Timers (http://
jquery.offput.ca/every/) properly.
Thanks
script type=text/javascript
var start_image;
var next_image, next_num;
jQuery.preloadImage = function() {
jQuery(img).attr(src, arguments[0]);
}
jQuery.thumb_change = function() {
start_image = $(img:first,this).attr(src);
var i=1;
var preload = true;
jQuery.timer.add(this, 1s, thumb_counter, function(){
next_num = i + 1;
if (next_num10) next_num = 0 + next_num;
next_image = start_image.replace(01.jpg, next_num
+.jpg);
if (preload) $.preloadImage(next_image);
$(img:first,this).attr(src, next_image);
i++;
if (next_num == 20) {
i=0;
preload = false;
}
});
};
jQuery.thumb_reset = function() {
jQuery.timer.remove(this, thumb_counter);
$(img:first,this).attr(src, start_image);
};
$(document).ready(function(){
$('a.thumbnail_link').mouseover(jQuery.thumb_change)
.mouseout(jQuery.thumb_reset);
});
/script
THANK YOU!
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
Actually that will NOT fix it all. That makes the span into a block level element which will force it to the next line. andy -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Liam Potter Sent: Friday, November 07, 2008 11:08 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? the most simple way to do this, is to simply apply display:block on the span. span style=display:block;width:80px;background:#00FF00;A/a that will fix it all. Andy Matthews wrote: That's a LOT of markup. You could actually use an input field if you just want to set a background color an some text. It might look like this: input type=text name=name style=width: 100px; / input type=text name=name value=some text style=width: 80px;background: #ff; border: 0px;height: 20px; / -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Hector Virgen Sent: Friday, November 07, 2008 10:30 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? Wrap the input in a div with and set the div's position to relative. Then, add the span as as a div, set the width, and position it absolutely. Its absolute position will be relative to the container div, not the page. div style=position: relative; input type=text name=name style=width: 100px; / div style=position: absolute; left: 100px; top: 0px; width: 90px;test/div /div -Hector On Fri, Nov 7, 2008 at 8:04 AM, nmiddleweek [EMAIL PROTECTED] wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
display:inline-block; Andy Matthews wrote: Actually that will NOT fix it all. That makes the span into a block level element which will force it to the next line. andy -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Liam Potter Sent: Friday, November 07, 2008 11:08 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? the most simple way to do this, is to simply apply display:block on the span. span style=display:block;width:80px;background:#00FF00;A/a that will fix it all. Andy Matthews wrote: That's a LOT of markup. You could actually use an input field if you just want to set a background color an some text. It might look like this: input type=text name=name style=width: 100px; / input type=text name=name value=some text style=width: 80px;background: #ff; border: 0px;height: 20px; / -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Hector Virgen Sent: Friday, November 07, 2008 10:30 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? Wrap the input in a div with and set the div's position to relative. Then, add the span as as a div, set the width, and position it absolutely. Its absolute position will be relative to the container div, not the page. div style=position: relative; input type=text name=name style=width: 100px; / div style=position: absolute; left: 100px; top: 0px; width: 90px;test/div /div -Hector On Fri, Nov 7, 2008 at 8:04 AM, nmiddleweek [EMAIL PROTECTED] wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
no, in IE it works only on things that are natively inline. For Firefox 2 you will need to use |display:-moz-inline-stack; but FF3 supports inline-block, opera, safari and konqueror all support it.| nmiddleweek wrote: Hi Liam, Thanks for your input... Is inline-block IE only? On Nov 7, 5:20 pm, Liam Potter [EMAIL PROTECTED] wrote: display:inline-block; Andy Matthews wrote: Actually that will NOT fix it all. That makes the span into a block level element which will force it to the next line. andy -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Liam Potter Sent: Friday, November 07, 2008 11:08 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? the most simple way to do this, is to simply apply display:block on the span. span style=display:block;width:80px;background:#00FF00;A/a that will fix it all. Andy Matthews wrote: That's a LOT of markup. You could actually use an input field if you just want to set a background color an some text. It might look like this: input type=text name=name style=width: 100px; / input type=text name=name value=some text style=width: 80px;background: #ff; border: 0px;height: 20px; / -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Hector Virgen Sent: Friday, November 07, 2008 10:30 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? Wrap the input in a div with and set the div's position to relative. Then, add the span as as a div, set the width, and position it absolutely. Its absolute position will be relative to the container div, not the page. div style=position: relative; input type=text name=name style=width: 100px; / div style=position: absolute; left: 100px; top: 0px; width: 90px;test/div /div -Hector On Fri, Nov 7, 2008 at 8:04 AM, nmiddleweek [EMAIL PROTECTED] wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] window.onbeforeunload fires in IE when a JQuery UI Dialog is opened
This is very frustrating. I have the following code
$(window).bind(beforeunload, function()
{
// get's instances to all three editors
var edMainT = FCKeditorAPI.GetInstance('edMain');
var edSecondaryT = FCKeditorAPI.GetInstance('edSecondary');
var edAdditionalT = FCKeditorAPI.GetInstance('edAdditional');
// check to see if the editors are dirty (have there been any
changes?)
if (edMainT.IsDirty() || edSecondaryT.IsDirty() ||
edAdditionalT.IsDirty())
{
if (confirm(Changes have been made but not
saved.\n\nWould you
like to Save before exiting?))
{
isExiting = true;
Save(false);
} // save full (not draft)
}
edMainT = null;
edSecondaryT = null;
edAdditionalT = null;
});
Which works awesome in FireFox, but in IE, any time I open a JQuery UI
Dialog or use JQuery to modify the DOM the function runs and a confirm
box pops up.
Below are samples of code that cause this behavior.
$(#divLayoutChooser).dialog({
title: Layout Chooser,
autoOpen: false,
modal: true,
width: 450,
height: 350,
overlay: {
opacity: 0.4,
background: white
}
});
$(#lnkLayout).click(function(event) // will open the dialog to show
the layout chooser
{
$(#divLayoutChooser).dialog(open);
});
or even just modifying the DOM does it, as this code shows.
$(#lnkPreview).click(function(event) // will show preview
{
var edMain = FCKeditorAPI.GetInstance('edMain');
var edSecondary = FCKeditorAPI.GetInstance('edSecondary');
var edAdditional = FCKeditorAPI.GetInstance('edAdditional');
edMainText = edMain.GetXHTML();
edSecondaryText = edSecondary.GetXHTML();
edAdditionalText = edAdditional.GetXHTML();
edMain = null;
edSecondary = null;
edAdditional = null;
$(#pvMain).html(edMainText);
$(#pvSecondary).html(edSecondaryText);
$(#pvAdditional).html(edAdditionalText);
$(#pvPageTitle).html(h1 + $(#tbxPageTitle).val() +
/h1);
$(#fckToolBar).css(display, none);
$(#fckToolBar2).css(display, none);
$(#toolbar).css(visibility, visible);
$(#edMain).css(display, none);
$(#edSecondary).css(display, none);
$(#edAdditional).css(display, none);
$(#tbxPageTitle).css(display, none);
$(#pvMain).css(display, block);
$(#pvSecondary).css(display, block);
$(#pvAdditional).css(display, block);
$(#pvPageTitle).css(display, block);
});
Does anyone have any ideas why this is happening?
Anyone run into this before?
Thanks so much for your time!
[jQuery] Collection of Shekar kammula Movies
http://newmegamovies.blogspot.com/
[jQuery] Re: How to select a group of similar named objects?
Hello,
Is there a shorthand way of setting the visiblity to hidden and
display to none?
and a shortcut for the other way round? perhaps .show() that includes
the display:inline;
Cheers,
Nick
On Nov 6, 9:19 pm, jquertil [EMAIL PROTECTED] wrote:
aslo, $('#tag_cWeb_TSW_Day*').css('visibility', 'hidden')
that can just be
$('#tag_cWeb_TSW_Day*').hide()
[jQuery] Re: jQuery Form Plugin - success callback function isn't called
The form submits as it should, using an AJAX call. When I add a beforeSubmit callback function to the options array, that gets called as well, as it should. Only the success callback (the alert) isn't called and I don't know why. Maybe the call wasn't successful. Can you post a link?
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
Hi Liam, Thanks for your input... Is inline-block IE only? On Nov 7, 5:20 pm, Liam Potter [EMAIL PROTECTED] wrote: display:inline-block; Andy Matthews wrote: Actually that will NOT fix it all. That makes the span into a block level element which will force it to the next line. andy -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Liam Potter Sent: Friday, November 07, 2008 11:08 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? the most simple way to do this, is to simply apply display:block on the span. span style=display:block;width:80px;background:#00FF00;A/a that will fix it all. Andy Matthews wrote: That's a LOT of markup. You could actually use an input field if you just want to set a background color an some text. It might look like this: input type=text name=name style=width: 100px; / input type=text name=name value=some text style=width: 80px;background: #ff; border: 0px;height: 20px; / -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Hector Virgen Sent: Friday, November 07, 2008 10:30 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: span tag is width:80px but is only showing the width of contents? Wrap the input in a div with and set the div's position to relative. Then, add the span as as a div, set the width, and position it absolutely. Its absolute position will be relative to the container div, not the page. div style=position: relative; input type=text name=name style=width: 100px; / div style=position: absolute; left: 100px; top: 0px; width: 90px;test/div /div -Hector On Fri, Nov 7, 2008 at 8:04 AM, nmiddleweek [EMAIL PROTECTED] wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
Why is this bad markup? it works... On Nov 7, 4:27 pm, mbraybrook [EMAIL PROTECTED] wrote: This works: input type=text style=float:left;/span style=width:80px; background-color:#00FF00;display:block;float:left;A/span However... I feel bad telling you that - this is bad markup - perhaps you could explain why you are trying to do this, or what the bigger picture here is? As stated by Andy, setting span, an inline element, to display:block, defeats the object of using a span tag at all. M On Nov 7, 4:04 pm, nmiddleweek [EMAIL PROTECTED] wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: Finding id and setting as variable
Change
$(.msg).id
to
$(.msg).attr(id)
- Richard
On Fri, Nov 7, 2008 at 7:27 AM, Liam Potter [EMAIL PROTECTED] wrote:
The error I get in firebug is
$(.msg).id is undefined
basically what I'm trying to do is pass this into an ajax post to delete
the message, so it's vital the id is the same one from the database.
MorningZ wrote:
but this doesn't work.
Care to elaborate?do you get an error? unexpected results?
something else?
On Nov 7, 7:19 am, Liam Potter [EMAIL PROTECTED] wrote:
Hi guys, this should be a quick one
I have a div, which has a unqiue id (pulled from the database) so
something like this.
div class=msg id=msg%#Eval(PrimaryKeyID)%
/div
and I'm trying to get the id number from it like this
var uid = $(.msg).id.replace('msg', );
as I'm running a similar function
$(span.yes).click(function (event) {
event.preventDefault();
var inc = this.id.replace('yes', );
});
I thought I could just replace the this for a selector but this doesn't
work.
Can anyone let me know how I would do this.
Thanks,
Liam
[jQuery] Re: Finding id and setting as variable
The error I get in firebug is
$(.msg).id is undefined
basically what I'm trying to do is pass this into an ajax post to delete
the message, so it's vital the id is the same one from the database.
MorningZ wrote:
but this doesn't work.
Care to elaborate?do you get an error? unexpected results?
something else?
On Nov 7, 7:19 am, Liam Potter [EMAIL PROTECTED] wrote:
Hi guys, this should be a quick one
I have a div, which has a unqiue id (pulled from the database) so
something like this.
div class=msg id=msg%#Eval(PrimaryKeyID)%
/div
and I'm trying to get the id number from it like this
var uid = $(.msg).id.replace('msg', );
as I'm running a similar function
$(span.yes).click(function (event) {
event.preventDefault();
var inc = this.id.replace('yes', );
});
I thought I could just replace the this for a selector but this doesn't
work.
Can anyone let me know how I would do this.
Thanks,
Liam
[jQuery] Re: validate : help with required code
$.validator.addMethod(customRequired, function(value, element) {
return value.length 0 value != First;
}, $.validator.messages.required);
Jörn
On Fri, Nov 7, 2008 at 4:05 PM, Chuck Cheeze [EMAIL PROTECTED] wrote:
I understand that, I am asking for help writing that custom method. I
can't get it to work. So, if name_first = First then its required,
if it is anything else it is valid. Thanks
On Nov 7, 4:48 am, Jörn Zaefferer [EMAIL PROTECTED]
wrote:
In this case you need a custom required-method. Your check makes the
field required, but its still valid to the required method (it has a
value).
Jörn
On Thu, Nov 6, 2008 at 6:45 PM, Chuck Cheeze [EMAIL PROTECTED] wrote:
I have a form field that by default has the value First. When the
user clicks into the field it clears that value, and if they type
nothing, when they blur the field it replaces First. You've all
seen this.
I want the validate plugin to say this field is required if the value
onsubmit is First. Can't seem to make it work.
[code]
// validate signup form on keyup and submit
$(#contactform).validate({
rules: {
name_first: {
required: function(element) {
return $
('#name_first').val() != First;
}
},
name_last: required,
country: required,
otherinfo: required,
email: {
required: true,
email: true
}
}
});
input type=text name=name_first value=First size=15
id=name_first class=inputfield_name swaptextbox greybox
tabindex=1 /
[/code]
Once I do that, I'll use the same code for last name.
[jQuery] Re: LiveQuery with Tipsy (tooltip) help
Could this one be wrritten any better:
$('a.thumb_link')
.livequery('mouseover', $.thumb_change
) .livequery('mouseout', $.thumb_reset
);
This is in regards to:
http://groups.google.com/group/jquery-en/browse_thread/thread/d057e0311367e1d5
Thanks.
[jQuery] Re: Understanding JQuery/Javascript.
$.fn.extend extends $.fn if you pass only one parameter.
It's useful if you're adding more methods (plugins)
but if you just want to add a single plugin it's the same as
$.fn.tablesorterPager = function(){ ... }
Accordingly $.extend extends $,
which is the same as $.tablesorterPager=function(){ ... }
On Nov 7, 3:40 am, George [EMAIL PROTECTED] wrote:
Hi guys, I need some help with understanding JQuery/Javacript.
I am far away form being a Javascript guru so I am not sure I
understand why something done this (or other) way.
I am looking at tablesorterPager plug-in and it's written following
way
(function($) {
$.extend({
tablesorterPager: new function() {
...blablabla..
}
});
// extend plugin scope
$.fn.extend({
tablesorterPager: $.tablesorterPager.construct
});
})(jQuery);
If I were to write this plug in I would do it like this
(function($)
{
$.fn.tablesorterPager = function()
{
.blabblabla
}
})(jQuery);
Questions:
Any advantages of writing it the way it's written?
Basically what is this $.extend({}) for? What does it achive.
Thanks
George.
[jQuery] Finding id and setting as variable
Hi guys, this should be a quick one
I have a div, which has a unqiue id (pulled from the database) so
something like this.
div class=msg id=msg%#Eval(PrimaryKeyID)%
/div
and I'm trying to get the id number from it like this
var uid = $(.msg).id.replace('msg', );
as I'm running a similar function
$(span.yes).click(function (event) {
event.preventDefault();
var inc = this.id.replace('yes', );
});
I thought I could just replace the this for a selector but this doesn't
work.
Can anyone let me know how I would do this.
Thanks,
Liam
[jQuery] Re: slideDown animation jumps - even without padding set.
does the div have the have no height? if not set a height on the div, if it needs to be expandable then someone who knows more about this will need to help you. Though looking into the dimensions plugin may help. http://brandonaaron.net/docs/dimensions/#sample-2 jonhobbs wrote: I know jquery sometimes has a problem calculating the heights of elements that have padding/margins which can cause jumpy animations when using slideDown. Unfortunately I have now come across the same problem without using margins/padding and I've managed to create a very simple test case which demonstrates that it's happening on even the simplest of unstyled pages. http://83.138.132.232/test.htm Click the heading to make the text slide up and then click it again to make it slide down. You'll see that it gets to the height that it would have been if the width:700px wasn't there and then jumps the rest. Unfortunately, the element I want to slide has to be inside my main template which has widths set so I'm at a loss as to how to get round the problem. Any help would really be appreciated. Jon
[jQuery] Re: animated robot cartoon with jquery
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 :)
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
[jQuery] Re: Jquery Cycle Plugin Problem
There is a problem with pc memmory when the plugin is working ( Tested in a few pcs). At Least you need a 2 core duo for a not problem experiencie, but try in a pentium 4 with 1gb of ram... and you will Khnow. Open the task administrator and test de memmory. It's not clear to me whether you think you're seeing a memory leak or too much CPU usage. Can you clarify? I'm not seeing a leak. I've had the main doc page (http://malsup.com/ jquery/cycle/) open for 15 minutes in IE7 and my memory use is not increasing, even with 6 slideshows running. CPU usage will certainly spike when the transitions are active - there's no way to avoid that; that's just the nature of doing animation in JavaScript. But you can mitigate the problem by using faster transitions (lower 'speed' value) and longer timeouts (larger 'timeout' value). Mike
[jQuery] DIV width:100px; is different to INPUT width:100px;
hello, What is the best way to work out the real width of an object? I'm toggling the display:inline/none of a DIV and an INPUT field so one or the other is displayed but I've just check ed the visual appearance of the two objects and the DIV is not as wide. This will likely cause my interface to shuffle a little. it's a not a massive issue but is there a way of preventing this? I'm guessing that the INPUT field will also be rendered slightly differently on different browsers so not sure the best approach to solve it. Someone whispered the Dimensions plugin to me the other day but I can't remember why :) Cheers, N
[jQuery] Re: animated robot cartoon with jquery
Anthony...
Is the robot supposed to do anything other than drive across the screen? I'm
looking for buttons which might cause him to do things, but not seeing them.
Is this part of what you're working on, and it's just not in place?
This is really well done by the way. I might show this to my daughter once
it's done.
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of anthony.calzadilla
Sent: Friday, November 07, 2008 11:58 AM
To: jQuery (English)
Subject: [jQuery] Re: animated robot cartoon with jquery
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},1
50);
$(#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] Re: animated robot cartoon with jquery
He's only saying that so he can get out of responsibility. :) -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Mike Alsup Sent: Friday, November 07, 2008 12:04 PM To: jQuery (English) Subject: [jQuery] Re: animated robot cartoon with jquery Unfortunately, I'm new to jQuery and Javascript, too, so I'm of no use to you on the code. Say what? Rick, you've been contributing to the mailing list for over two years. I think the honeymoon phase is over for you! :-)
[jQuery] Re: $(this).next() doesn't work
Rik, tnx you gave me the right inputi'm solving it
Diego
2008/11/7 Rik Lomas [EMAIL PROTECTED]
You need to do:
$(this).parent().next().addClass('second');
As the element the click is attached to is the a, so you need to
traverse up the DOM tree first
Rik
2008/11/7 diego [EMAIL PROTECTED]:
Hi all. how can i addClass from the clicked element lia to the
next li?
i've tried this
$('.first li a').bind('click',function()
$(this).next('li').addClass('second');
});
but won't work,
the original code :
div class=first
ul
lia href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
/ul
/div
and clicking on the first $('li a') the output code should be :
div class=first
ul
lia href=#img//a/li
li class=seconda href=#img//a/li
lia href=#img//a/li
lia href=#img//a/li
/ul
/div
any idea ??
Tnx in advance
Diego
--
Rik Lomas
http://rikrikrik.com
[jQuery] Re: jQuery Problem - Animated scrolling for in page links
Thanks for this Ariel. Managed to get this working. On Oct 30, 9:10 pm, Ariel Flesler [EMAIL PROTECTED] wrote: Try this plugin: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html -- Ariel Fleslerhttp://flesler.blogspot.com On Oct 30, 9:01 am, mrleesimpson [EMAIL PROTECTED] wrote: Hi, I'm fairly new to jQuery and having some problems with getting a plugin to work with Wordpress. What I want to do is create a smoothanimatedverticalscrollfor my in page (#contact and #work) links. I've attempted to use bothhttp://plugins.jquery.com/project/scrolltoandhttp://www.learningjquer.. but I can't get either to work. The site in question ishttp://www.mrleesimpson.co.uk/andthe scripts I'm calling in my header are: script type='text/javascript' src='http://www.mrleesimpson.co.uk/wp- includes/js/jquery/jquery.js'/script script type='text/javascript' src='http://www.mrleesimpson.co.uk/wp- includes/js/scroller.js'/script Does anyone have any ideas as to why this might not be working?
[jQuery] Re: DIV width:100px; is different to INPUT width:100px;
Padding and borders are added to the width. Is that the difference you are seeing? -Hector On Fri, Nov 7, 2008 at 10:16 AM, nmiddleweek [EMAIL PROTECTED]wrote: hello, What is the best way to work out the real width of an object? I'm toggling the display:inline/none of a DIV and an INPUT field so one or the other is displayed but I've just check ed the visual appearance of the two objects and the DIV is not as wide. This will likely cause my interface to shuffle a little. it's a not a massive issue but is there a way of preventing this? I'm guessing that the INPUT field will also be rendered slightly differently on different browsers so not sure the best approach to solve it. Someone whispered the Dimensions plugin to me the other day but I can't remember why :) Cheers, N
[jQuery] Re: span tag is width:80px but is only showing the width of contents?
Thanks... I was just playing with float but I set the input to float:left and the span to float:right thinking it was something to do with justification. I kind of got it working but it didn't look right in Chrome. Perhaps your way works better but I'll sack it off if it's bad coding... Thanks though. Here's the big picture: I have a grid of input fields... When I click into an input field I want to display a little side bar that has an expand 'button'. When the expand button is clicked, I want to collapse the input field and/ or show a panel of buttons which when clicked do various things that give the feel that the operations are bound to the input field clicked. I am going down the road at the moment of hiding the input screen and showing the button panel in it's place but I'm open to interface suggestions... I quite ilke the way Google Calender shows an interactive tooltip/ popup when clicking into a Day to create an event. Just though - If I use an image for the expand button, I guess the width issue of the SPAN goes out the window because the image is a fixed width anyway and so it will be whatever width I make it. I like what Hector has provided, that has given me an insight for other bits I'm working on. Cheers guys... On Nov 7, 4:27 pm, mbraybrook [EMAIL PROTECTED] wrote: This works: input type=text style=float:left;/span style=width:80px; background-color:#00FF00;display:block;float:left;A/span However... I feel bad telling you that - this is bad markup - perhaps you could explain why you are trying to do this, or what the bigger picture here is? As stated by Andy, setting span, an inline element, to display:block, defeats the object of using a span tag at all. M On Nov 7, 4:04 pm, nmiddleweek [EMAIL PROTECTED] wrote: Yes that works... What I'm trying to do is display a SPAN atg at the end of an Input text field of a fixed size. If I set the display to block, it is forcing itself to be on the next line. Have you got any idea on how I can do this? Cheers, Nick On Nov 7, 3:48 pm, mbraybrook [EMAIL PROTECTED] wrote: try: span style=width:80px; background-color:#00FF00; display:block;A/ span Does that work? M On Nov 7, 3:45 pm, nmiddleweek [EMAIL PROTECTED] wrote: Hello, I've got a SPAN tag which is set to 80px... span style=width:80px; background-color:#00FF00;A/span The contents of the SPAN is a single character and when rendered on screen, the green SPAN is showing as only approx 15 pixels in width. How can I force the width to be 80px? Thanks, Nick
[jQuery] Re: jquery validation: manually set the form validity state?
Would using resetForm() help me in any way?
On Nov 6, 3:11 pm, kedr [EMAIL PROTECTED] wrote:
I have a form that is split into 3 different tabs. You can only move
to the next tab if the part of the form on the current tab is valid. I
have 3 separate validator code sections each with their own rules and
messages. I attach an onclick handler to the custom button to return
('#myForm').validate().form() and if it returns true to move on to the
next tab. However, on the next tab I can click the next button and
it moves on, even though all the fields should have errors. I assume
that maybe the overall state of the form is valid, so calling .form()
again returns true. I'm wondering what the best solution is to
validating a form split into 3 different tabs. I was thinking that
when a tab opens, you set the form valid state (if it's possible) to
false everytime. But I wonder if then once you call .form() it returns
false no matter what since you manually set it? This seems like a
quick fix and possibly bad idea, anybody have any suggestions?
[jQuery] find expression and removing from the page
So lets say I have this simple HTML structure someonwheres in my document: ul id=bigul li id=placeholder some text /li /ul and I want to remove the place holder. I guess I'm trying something like this: $find(#bigul#placeholder).remove(); Is that some what on the right track?
[jQuery] Re: find expression and removing from the page
There is no $find object (unless you made one) it'd be $(#bigul #placeholder).remove(); On Nov 7, 1:56 pm, Dan B. [EMAIL PROTECTED] wrote: So lets say I have this simple HTML structure someonwheres in my document: ul id=bigul li id=placeholder some text /li /ul and I want to remove the place holder. I guess I'm trying something like this: $find(#bigul#placeholder).remove(); Is that some what on the right track?
[jQuery] Re: animated robot cartoon with jquery
Are you kidding! I'm still so basic in jQuery that I'm just now getting ready to try and implement my first modal dialogue! I'm always behind everyone else! I just moved to ColdFusion 8 from 4.5 a few months ago! :-D Andy Matthews wrote: He's only saying that so he can get out of responsibility. :) -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Mike Alsup Sent: Friday, November 07, 2008 12:04 PM To: jQuery (English) Subject: [jQuery] Re: animated robot cartoon with jquery Unfortunately, I'm new to jQuery and Javascript, too, so I'm of no use to you on the code. Say what? Rick, you've been contributing to the mailing list for over two years. I think the honeymoon phase is over for you! :-) --- Text inserted by Panda IS 2009: This message has NOT been classified as spam. If it is unsolicited mail (spam), click on the following link to reclassify it: http://localhost:6083/Panda?ID=pav_1323SPAM=truepath=C:\Documents%20and%20Settings\Rick%20Faircloth\Local%20Settings\Application%20Data\Panda%20Security\Panda%20Internet%20Security%202009\AntiSpam ---
[jQuery] Re: animated robot cartoon with jquery
Unfortunately, I only get to dabble with jQuery. Just enough to get done what I need for the moment. Too many projects and too much ColdFusion programming to do. So, mostly, I contribute by asking the most basic questions that others are embarrassed to ask! :-) Mike Alsup wrote: Unfortunately, I'm new to jQuery and Javascript, too, so I'm of no use to you on the code. Say what? Rick, you've been contributing to the mailing list for over two years. I think the honeymoon phase is over for you! :-) --- Text inserted by Panda IS 2009: This message has NOT been classified as spam. If it is unsolicited mail (spam), click on the following link to reclassify it: http://localhost:6083/Panda?ID=pav_1309SPAM=truepath=C:\Documents%20and%20Settings\Rick%20Faircloth\Local%20Settings\Application%20Data\Panda%20Security\Panda%20Internet%20Security%202009\AntiSpam ---
[jQuery] [offtopic] [article] domWrite() lazy loading ads: external code using document.write() - execution AFTER the page has rendered
Friend of mine wrote this article that might be of interest to you: Often there is advertizing code to be implemented in a page, and there are 2 problems one may face: (1) the website hangs due to a lag on the code delivering server (2) you normally cannot lazy load the script since document.write() is used inside the foreign code which only works during rendering of the page. This is a snippet that allows the asynchronous loading and delayed execution of JS code that contains document.write() statements in the context of a DIV element: http://blog.phpbuero.de/?p=26
[jQuery] problem with z-index and INPUT objects
Hello again :) I've put together a test page that shows a table grid with INPUT fields in each cell. When you click on a field, it shows a blue tab to the right. Click the tab and it hides the field and shows a green panel. I'm having problems on IE in that the blue tab sits underneath the adjacent INPUT field. On FF and Chrome this is fine and shows on top. Has anyone got any clues with where I've gone wrong? http://www.getdiverted.com/test/test.html Thanks, N
[jQuery] Mutiple slideshows
- http://thisworldover.com/jquerytest/index2.php
Hi, i'm working on developing this great script out so that i can have
the left side load as normal, but then have the 'previous' and 'next'
buttons navigate a slideshow within the slideshow.
Fr'instance, a click on ad1 would load the first image in a series
of 3 images that are a slideshow called ad1. but instead of the
images fading, they would scroll (similar to the Prev/Next demo on
the http://www.malsup.com/jquery/cycle/int2.html page, except using
'scrollLeft' instead of 'fade'.
and if anyone has tried this using php to load images, it'd be doubly
helpful as i'm using the following code to call images... which will
have to be adapted to include multiple calls
-
div id=slideshow style=border:1px solid #f00;
class=pics
?
$dir = opendir(images);
$i=0;
while (($file = readdir($dir)) !== false) {
if (substr($file,0,1)!=.) {
$i++;
echo img class='thumbs' src='images/ . $file
. ';
}
}
closedir($dir);
?
/div
-
has anyone tried this? can the script support two slideshows, perhaps
just by giving unique ids? thanks for your help. i'll be working on it
in the meantime, but i'd still really appreciate any tips you might
have!
Phil
[jQuery] [tooltip] HTML in the tooltip?
I have a problem where Drupal is outputting HTML that is for the tooltip. Any quotes however are ending the title attribute and then just appearing in the page. Is there a way to show html tags in with attributes in the tooltip?
[jQuery] superfish z-index problem
I am using the superfish menu on a page that also has a google map on
it. I have tried to change the z-index of different elements many
different ways. my current code looks like this:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
headtitle
/title
script src=js/MainScripts.js type=text/javascript/script
link rel=stylesheet type=text/css media=screen href=css/
superfish.css /link rel=stylesheet type=text/css media=screen
href=css/superfish-vertical.css /
script src=js/jquery-1.2.6.min.js type=text/javascript/
script
script type=text/javascript src=js/superfish.js/script
script type=text/javascript
$(document).ready(function() {
$(ul.sf-menu).superfish({
animation: { height: 'show' }, // slide-down effect
without fade-in
delay: 1200 // 1.2 second delay on
mouseout
});
});
/script
script src=http://maps.google.com/maps?
file=apiamp;v=2amp;key=ABQI59UKubRwwNbom4chV2XX5BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT-
CT66mJHBl663tMCNavyeNN3W9Q
type=text/javascript/script
script type=text/javascript
//![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(map));
var point = new GLatLng(38.88, -94.81);
map.setCenter(point, 14);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
//]]
window.onload = function() {
load();
}
window.unload = function() {
GUnload();
}
function open() {
var dddiv = document.getElementById('dd');
if (dddiv.style.display == 'none')
dddiv.style.display = 'inline';
else
dddiv.style.display = 'none';
return false;
}
/script
/head
body
form name=aspnetForm method=post action=Location.aspx
id=aspnetForm
div
input type=hidden name=__VIEWSTATE id=__VIEWSTATE value=/
wEPDwUKMTY1NDU2... /
/div
divHeader/div
div style=float:left; z-index:1;
ul class=sf-menu sf-vertical style=z-index:100;
lia href=Default.aspxHome/a/li
lia href=#ScrapBook/a
ul
lia
href=#2004-2005nbsp;Season/a
ul
lia href='ScrapBook.aspx?
Season=2004-2005Show=Buddies'Buddies/a/li
lia href='ScrapBook.aspx?
Season=2004-2005Show=Clue'Clue/a/li
lia href='ScrapBook.aspx?
Season=2004-2005Show=Glen Gary Ross'Glen Gary Ross/a/li
lia href='ScrapBook.aspx?
Season=2004-2005Show=Lonestar'Lonestar/a/li
lia href='ScrapBook.aspx?
Season=2004-2005Show=Perfect Wedding'Perfect Wedding/a/li
lia href='ScrapBook.aspx?
Season=2004-2005Show=Picnic'Picnic/a/li
/ul
/li
lia
href=#2007-2008nbsp;Season/a
ul
lia href='ScrapBook.aspx?
Season=2007-2008Show=Nunsensations'Nunsensations/a/li
lia href='ScrapBook.aspx?
Season=2007-2008Show=The Diary of Ann Frank'The Diary of Ann Frank/
a/li
/ul
/li
/ul
/li
lia href=Location.aspxLocation/a/li
/ul
/div
div style=float:left; z-index:1;
div id=map style=width: 500px; height: 300px; z-index:1/
divbr /
/div
/form
/body
/html
No matter what I try I can't get the menu to display above the google
map in IE, works fine in FF. Thanks in advance for your help
[jQuery] Need help traversing an unordered list
How do I access just the titles (ie 'Title 1', 'Title 2')? Every
method I tried also includes the content.
I tried using: not('[li]) parent()
This is an example list structure. I want to be able to get just
the titles: (ie Title 1, Title 2, Title 3)
ul id=mylist
li Title 1
ul
liContent 1/li
/ul
/li
liTitle 2
ul
liContent 2/li
/ul
/li
liTitle 3
ul
liContent 3/li
/ul
/li
/ul
