[jQuery] Re: show/hide
without the corresponding html, it is hard to tell if this answer is
completely correct. however, think about trying this approach, where
these few lines replace ALL of your code:
$(function() {
$('div').click(function() {
$('div').hide(slow); // first, for simplification
hide any
open divs (change specificity for your needs)
$(this).show(slow); // second, open the selected div
});
});
On Jan 12, 8:17 am, tabu ces...@googlemail.com wrote:
Hello,
I'm new to javascript and jquery library, I have script running which
functions fine only problem I have with it is that I want to close
other divs when another is selected, I guess like an accordion style
but using the toggle, slide fade-in functions. The problem I have is
that once each button that controls the relevant div is clicked once,
on subsequent clicks it requires double clicking to show the
containing div, where i want a single.
I imagine it is a very simple solution but I have tried a number of
ways without success, any help would be great, thanks
Here is the script Im using:
$(document).ready(function() {
$('div.me').hide();
$('div.who').toggle(function() {
$(this).siblings('div.me').fadeIn(900);
$('div.view').hide();
$('div.callme').hide();
$('div.imagesview').hide();
}, function() {
$(this).siblings('div.me').fadeOut(500);
return false;
});
});
$(document).ready(function() {
$('div.view').hide();
$('div.slide').toggle(function() {
$(this).siblings('div.view').fadeIn(900);
$('div.me').hide();
$('div.callme').hide();
$('div.imagesview').hide();
}, function() {
$(this).siblings('div.view').fadeOut(500);
return false;
});
});
$(document).ready(function() {
$('div.showwork').hide();
$('div.work').toggle(function() {
$(this).siblings('div.showwork').fadeIn(900);
}, function() {
$(this).siblings('div.showwork').fadeOut(500);
return false;
});
});
$(document).ready(function() {
$('div.callme').hide();
$('div.call').toggle(function() {
$(this).siblings('div.callme').fadeIn(900);
$('div.view').hide();
$('div.me').hide();
$('div.imagesview').hide();
}, function() {
$(this).siblings('div.callme').fadeOut(500);
return false;
});
});
$(document).ready(function() {
$('div.imagesview').hide();
$('div.images').toggle(function() {
$(this).siblings('div.imagesview').fadeIn(900);
$('div.view').hide();
$('div.me').hide();
$('div.callme').hide();
}, function() {
$(this).siblings('div.imagesview').fadeOut(500);
return false;
});
});
[jQuery] Re: show/hide
Thanks for your quick response, but this doesn't seem to work.
I've pasted all the code in bellow, thanks for your help
!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;
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
titlestripy divs/title
style type=text/css
@importcss/stripy_simple.css;
/style
script type=text/javascript src=jquery-1.3.2.min.js
/script
!--script type=text/javascript
$(function() {
$('div').click(function() {
$('div').hide(slow); // first, for
simplification hide any
open divs (change specificity for your needs)
$(this).show(slow); // second, open the
selected div
});
});
/script--
script type=text/javascript
$(document).ready(function() {
$('div.me').hide();
$('div.who').toggle(function() {
$(this).siblings('div.me').fadeIn(900);
$('div.view').hide();
$('div.callme').hide();
$('div.imagesview').hide();
}, function() {
$(this).siblings('div.me').fadeOut(500);
return false;
});
});
$(document).ready(function() {
$('div.view').hide();
$('div.slide').toggle(function() {
$(this).siblings('div.view').fadeIn(900);
$('div.me').hide();
$('div.callme').hide();
$('div.imagesview').hide();
}, function() {
$(this).siblings('div.view').fadeOut(500);
return false;
});
});
$(document).ready(function() {
$('div.showwork').hide();
$('div.work').toggle(function() {
$(this).siblings('div.showwork').fadeIn(900);
}, function() {
$(this).siblings('div.showwork').fadeOut(500);
return false;
});
});
$(document).ready(function() {
$('div.callme').hide();
$('div.call').toggle(function() {
$(this).siblings('div.callme').fadeIn(900);
$('div.view').hide();
$('div.me').hide();
$('div.imagesview').hide();
}, function() {
$(this).siblings('div.callme').fadeOut(500);
return false;
});
});
$(document).ready(function() {
$('div.imagesview').hide();
$('div.images').toggle(function() {
$(this).siblings('div.imagesview').fadeIn(900);
$('div.view').hide();
$('div.me').hide();
$('div.callme').hide();
}, function() {
$(this).siblings('div.imagesview').fadeOut(500);
return false;
});
});
/script
script language=javascriptAC_FL_RunContent = 0;/script
script src=js/AC_RunActiveContent.js language=javascript/
script
/head
body
div id=container
div id=subframe
div id=contentpane
div id=header
script language=javascript
if (AC_FL_RunContent == 0) {
alert(This page requires AC_RunActiveContent.js.);
} else {
AC_FL_RunContent(
'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=9,0,0,0',
'width', '550',
'height', '48',
'src', 'stripy_ident',
'quality', 'high',
'pluginspage',
'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'transparent',
'devicefont', 'false',
'id', 'stripy_ident',
'bgcolor', '#ff',
'name', 'stripy_ident',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'stripy_ident',
'salign', ''
); //end AC code
}
/script
noscript
object classid=clsid:d27cdb6e-ae6d-11cf-96b8-44455354
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=9,0,0,0 width=550 height=48 id=stripy_ident
align=middle
param name=allowScriptAccess value=sameDomain /
param name=allowFullScreen value=false /
param name=movie value=stripy_ident.swf /param name=quality
value=high /param name=wmode value=transparent /param
name=bgcolor value=#ff / embed src=stripy_ident.swf
quality=high bgcolor=#ff width=550 height=48
name=stripy_ident align=middle allowScriptAccess=sameDomain
allowFullScreen=false type=application/x-shockwave-flash
pluginspage=http://www.macromedia.com/go/getflashplayer; /
/object
/noscript
/div
!--div id=stripes
/div--
div id=sidebar
GRAPHIC DESIGN
/div
div id=workhide class=work
/div
!--ABOUT--
div id=about class=who
/div
div id=history class=me divs
h4 class=headingWINK/h4
pSTRIPY EYE is a one person design compendium, Im an individual
working on a freelance basis.
My experience spans roughly ten years working in a variety of
backgrounds from exhibition, print and web based media, to teaching at
FE level and recently working in flash and 3d
[jQuery] Re: show/hide
the jquery:
script type=text/javascript
$(function() {
$('.sectionTitle').click(function() {
$('.sectionBody').hide(slow);
$(this).next(div).show(slow);
});
});
the clickable parts:
it is unclear what you want the visitors to click on to
hide/show your sections, so i created an h1 element and
gave it a class of .sectionBody for the task. you can
certainly use whatever you like.
the content:
i wrapped the content following the h1 class=sectionTitle
elements in 'div class=contentBody/div' so
that you could easily show/hide the content.
the cleanup:
remove all of your jquery code referencing your divs.
the working example:
below is your code with the new code added in:
(please note that i removed some of your flash code as it was
aborting in my environment. you will need to add it back in.)
!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;
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
titlestripy divs/title
style type=text/css
@importcss/stripy_simple.css;
/style
script type=text/javascript src=jquery-1.3.2.min.js/script
script type=text/javascript
$(function() {
$('.sectionTitle').click(function() {
$('.sectionBody').hide(slow);
$(this).next(div).show(slow);
});
});
/script
/head
body
div id=container
div id=subframe
div id=contentpane
div id=header
noscript
object classid=clsid:d27cdb6e-ae6d-11cf-96b8-44455354
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=9,0,0,0 width=550 height=48 id=stripy_ident
align=middle
param name=allowScriptAccess value=sameDomain /
param name=allowFullScreen value=false /
param name=movie value=stripy_ident.swf /param
name=quality
value=high /param name=wmode value=transparent /param
name=bgcolor value=#ff /embed src=stripy_ident.swf
quality=high bgcolor=#ff width=550 height=48
name=stripy_ident align=middle allowScriptAccess=sameDomain
allowFullScreen=false type=application/x-shockwave-flash
pluginspage=http://www.macromedia.com/go/getflashplayer; /
/object
/noscript
/div
!--div id=stripes
/div--
div id=sidebar
GRAPHIC DESIGN
/div
div id=workhide class=work
/div
-
who
h1 class='sectionTitle'WHO/h1
div class='sectionBody'
!--ABOUT--
div id=about class=whothere is something here now/div
/div
-
me
h1 class='sectionTitle'Me/h1
div style='display: none;' class='sectionBody'
div id=history class=me divs
h4 class=headingWINK/h4
pSTRIPY EYE is a one person design compendium, Im an individual
working on a freelance basis.
My experience spans roughly ten years working in a variety of
backgrounds from exhibition, print and web based media, to teaching at
FE level and recently working in flash and 3d rendering.
br /
The site contains a selection of my work, illustrating a broad range
of skills in communication media.
br /
br /
If you wish to talk or simply seek advice about a project please
contact me
br /
t...@stripyeye.com
br /br /
If you would like further information about me, my cv is available as
a download
/p
/div
!--PROCESS--
div id=processbutton class=slide
/div
/div
-
view
h1 class='sectionTitle'VIEW/h1
div style='display: none;' class='sectionBody'
div id=main class=view
h4 class=heading PROCESS/h4
div class=divfloats
bMind/bbr /
Our perceptions of something can be both enlightening and perplexing.
We can present something that will communicate different things to
different people. Unifying the perceptions of an idea is an important
process that requires thought and a guiding hand on how it is
received. It requires someone who can take the idea in hand and enrich
it, so that it resonates in the receivers mind.
/div
div class=divfloats
bEars/bbr /
Listening to what you have to say about your design needs is of utmost
importance.
My approach is about listening to your needs and aspirations for the
design and how best to launch it in the public domain. Without
listening there is no presenting.
/div
div class=divfloats
bMouth/bbr /
Discussion and partnership through the process is equally important.
It's essential to communicate and discuss each stage of the process
and maintain constant correspondence throughout the implementation,
ensuring the project grows in the right way for you.
/div
div class=divfloats
bEyes/bbr /
The work is there for all to see, so if we get the first three right
the eyes will have it.
Help me to help you present your idea to the world.
/div
/div
!--CONTACT--
div id=contact class=call
/div
/div
-
[jQuery] Re: show/hide
Wow, thanks for your work on this.
Sorry but it's a little confusing as to what is happening in the
preview, I have uploaded the pages I've done before just so you can
visualize what I'm going for.
1.
http://www.democraticunionfordesign.com/test/index_refresh.html
2.
http://www.democraticunionfordesign.com/test/index_simple.html
Number 1 is really how I'd like it the content to slide in and out but
as you'll see the process div leaves a latent image for some reason
and also it shifts the menu down too, I figure the shifting menu is a
div positioning problem.
What I'm actually after is simply a single click on and off when each
div is called.
Really appreciate what you've done, I'll try and work through it a
little more see if I can make more sense of it.
Thanks again.
On Jan 12, 7:42 pm, bill ozzi...@gmail.com wrote:
the jquery:
script type=text/javascript
$(function() {
$('.sectionTitle').click(function() {
$('.sectionBody').hide(slow);
$(this).next(div).show(slow);
});
});
the clickable parts:
it is unclear what you want the visitors to click on to
hide/show your sections, so i created an h1 element and
gave it a class of .sectionBody for the task. you can
certainly use whatever you like.
the content:
i wrapped the content following the h1 class=sectionTitle
elements in 'div class=contentBody/div' so
that you could easily show/hide the content.
the cleanup:
remove all of your jquery code referencing your divs.
the working example:
below is your code with the new code added in:
(please note that i removed some of your flash code as it was
aborting in my environment. you will need to add it back in.)
!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;
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
titlestripy divs/title
style type=text/css
@importcss/stripy_simple.css;
/style
script type=text/javascript src=jquery-1.3.2.min.js/script
script type=text/javascript
$(function() {
$('.sectionTitle').click(function() {
$('.sectionBody').hide(slow);
$(this).next(div).show(slow);
});
});
/script
/head
body
div id=container
div id=subframe
div id=contentpane
div id=header
noscript
object classid=clsid:d27cdb6e-ae6d-11cf-96b8-44455354
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=9,0,0,0 width=550 height=48 id=stripy_ident
align=middle
param name=allowScriptAccess value=sameDomain /
param name=allowFullScreen value=false /
param name=movie value=stripy_ident.swf /param
name=quality
value=high /param name=wmode value=transparent /param
name=bgcolor value=#ff / embed src=stripy_ident.swf
quality=high bgcolor=#ff width=550 height=48
name=stripy_ident align=middle allowScriptAccess=sameDomain
allowFullScreen=false type=application/x-shockwave-flash
pluginspage=http://www.macromedia.com/go/getflashplayer; /
/object
/noscript
/div
!--div id=stripes
/div--
div id=sidebar
GRAPHIC DESIGN
/div
div id=workhide class=work
/div
-
who
h1 class='sectionTitle'WHO/h1
div class='sectionBody'
!--ABOUT--
div id=about class=whothere is something here now/div
/div
-
me
h1 class='sectionTitle'Me/h1
div style='display: none;' class='sectionBody'
div id=history class=me divs
h4 class=headingWINK/h4
pSTRIPY EYE is a one person design compendium, Im an individual
working on a freelance basis.
My experience spans roughly ten years working in a variety of
backgrounds from exhibition, print and web based media, to teaching at
FE level and recently working in flash and 3d rendering.
br /
The site contains a selection of my work, illustrating a broad range
of skills in communication media.
br /
br /
If you wish to talk or simply seek advice about a project please
contact me
br /
t...@stripyeye.com
br /br /
If you would like further information about me, my cv is available as
a download
/p
/div
!--PROCESS--
div id=processbutton class=slide
/div
/div
-
view
h1 class='sectionTitle'VIEW/h1
div style='display: none;' class='sectionBody'
div id=main class=view
h4 class=heading PROCESS/h4
div class=divfloats
bMind/bbr /
Our perceptions of something can be both enlightening and perplexing.
We can present something that will communicate different things to
different people. Unifying the perceptions of an idea is an important
process that requires thought and a guiding hand on how it is
received. It requires someone who can take the idea in hand and
[jQuery] Re: show/hide div on select change
also, just as a head's up... even when you store numbers as the
value attribute on an option/ tag, they are interpreted as strings
in javascript. so, from your example above, you might also consider
switching your condition to:
// Compare as string instead
if ($(#id_status).val() === '6'){
$('div.textfield1').show();
}
when you compare the two as strings using the strict equality operator
(===), your results will likely be far more predictable. hope that
helps.
On Nov 18, 2:03 pm, mtuller mitul...@gmail.com wrote:
Thanks.
On Nov 18, 1:50 pm, Charlie Griefer charlie.grie...@gmail.com wrote:
You're missing a $ on this line:
('#id_status').change(function() {
Change to:
$('#id_status').change(function() {
unsolicited word of advice... run firebug :)
On Wed, Nov 18, 2009 at 11:44 AM, mtuller mitul...@gmail.com wrote:
I am trying to have a div show and hide based on the value of a select
list. I have looked at a number of examples, but can't seem to get it
to work. Would appreciate someone taking a look at what I have and
giving me any advice.
script
$(document).ready(function() {
$('div.textfield1').hide();
('#id_status').change(function() {
if ($(#id_status).val() == 6){
$('div.textfield1').show();
}
else{
$('div.textfield1').hide();
}
});
});
/script
plabel for=id_statusStatus:/label
select name=status id=id_status
option value=1New/option
option value=2In Review/option
option value=3Working On/option
option value=4Elevated/option
option value=5Approved/option
option value=6Deferred/option
option value=7Denied/option
option value=8Duplicate/option
option value=9Completed/option
option value=10Needs more information/option
/select/p
div class=textfield1
labeltest
input type=text name=text id=text /
/label
/div
--
Charlie Grieferhttp://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
[jQuery] Re: show/hide div on select change
Thanks.
On Nov 18, 1:50 pm, Charlie Griefer charlie.grie...@gmail.com wrote:
You're missing a $ on this line:
('#id_status').change(function() {
Change to:
$('#id_status').change(function() {
unsolicited word of advice... run firebug :)
On Wed, Nov 18, 2009 at 11:44 AM, mtuller mitul...@gmail.com wrote:
I am trying to have a div show and hide based on the value of a select
list. I have looked at a number of examples, but can't seem to get it
to work. Would appreciate someone taking a look at what I have and
giving me any advice.
script
$(document).ready(function() {
$('div.textfield1').hide();
('#id_status').change(function() {
if ($(#id_status).val() == 6){
$('div.textfield1').show();
}
else{
$('div.textfield1').hide();
}
});
});
/script
plabel for=id_statusStatus:/label
select name=status id=id_status
option value=1New/option
option value=2In Review/option
option value=3Working On/option
option value=4Elevated/option
option value=5Approved/option
option value=6Deferred/option
option value=7Denied/option
option value=8Duplicate/option
option value=9Completed/option
option value=10Needs more information/option
/select/p
div class=textfield1
labeltest
input type=text name=text id=text /
/label
/div
--
Charlie Grieferhttp://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
[jQuery] Re: show/hide ui.tab?
Show/Hide works perfectly fine in this quick example
http://jsbin.com/oyagi/edit
recall that the tabs are actually li items that reference the
tabs, which are div's to hide the tab itself, you need to hide
the li
On Nov 9, 10:23 am, Shawn sgro...@open2space.com wrote:
I have a series of tabs using UI. I need to hide some tabs depending on
the selection in the first tab. Doing $(#tab3).hide(); doesn't work.
This is what I have thus far:
$(#div.jobtype input[name='jobtype']).click( function () {
$(#tabLocations).hide();
$(#tabSegments).hide();
$(#tabWellholes).hide();
switch($(this).val()) {
case other: $(#tabLocations).show(); break;
case pipeline: $(#tabSegments).show(); break;
case wellsite: $(#tabWellholes).show(); break;
}
});
I did try to add the class ui-tabs-hide to the tab, but that didn't
work either. I also did a Google search
I don't want to add/remove tabs - that is not quite what I'm after. I
just need to hide/show the tabs.
Any thoughts/suggestions?
Shawn
Re: [jQuery] Re: show/hide ui.tab?
Thanks. Your message got me looking in the right direction. Turns out
my selector was wrong. Needed #jobtype, not div.jobtype. Once I
changed that everything worked as expected.
Shawn
MorningZ wrote:
Show/Hide works perfectly fine in this quick example
http://jsbin.com/oyagi/edit
recall that the tabs are actually li items that reference the
tabs, which are div's to hide the tab itself, you need to hide
the li
On Nov 9, 10:23 am, Shawn sgro...@open2space.com wrote:
I have a series of tabs using UI. I need to hide some tabs depending on
the selection in the first tab. Doing $(#tab3).hide(); doesn't work.
This is what I have thus far:
$(#div.jobtype input[name='jobtype']).click( function () {
$(#tabLocations).hide();
$(#tabSegments).hide();
$(#tabWellholes).hide();
switch($(this).val()) {
case other: $(#tabLocations).show(); break;
case pipeline: $(#tabSegments).show(); break;
case wellsite: $(#tabWellholes).show(); break;
}
});
I did try to add the class ui-tabs-hide to the tab, but that didn't
work either. I also did a Google search
I don't want to add/remove tabs - that is not quite what I'm after. I
just need to hide/show the tabs.
Any thoughts/suggestions?
Shawn
[jQuery] Re: show/hide problem
If a.more is a child of the div, use this code.
$(document).ready(function() {
$(div.featured-cell-padding).mouseenter(function(){
$(this).find(a.more).show();
});
$(div.featured-cell-padding).mouseleave(function(){
$(this).find(a.more).hide();
});
});
On Oct 25, 1:13 am, Daniel Donaldson d8nieldonald...@gmail.com
wrote:
I am trying to have a image (link button) appear within a div on
mousenter for the div, and disappear on mouseleave.
I have this working in the following code as expected, but I only want
it to apply to the specific div that is being entered/left.
The way I have it right now it applies to the class, so every div with
the class will trigger the function, which is not the desired effect :
(
What I would like to have it do is have the image show/hide only
within the specific div that is being entered/left.
Due to the nature of the project, I cannot simply apply id's to the
divs as a solution.
The code follows, I apologize that I cannot provide a live link, it
isn't online yet, but I have pasted the code below:
//
$('a.more').hide();
//
$('div.featured-cell-padding').mouseenter(function() {
$('a.more').show();
return false;
});
//
$('div.featured-cell-padding').mouseleave(function() {
$('a.more').hide();
return false;
});
});
thanks for any help/insight/words of wisdom :)
[jQuery] Re: show/hide problem
We need more info, the structure of the page, etc. You can target
selectors in many ways.
On Oct 24, 10:13 am, Daniel Donaldson d8nieldonald...@gmail.com
wrote:
I am trying to have a image (link button) appear within a div on
mousenter for the div, and disappear on mouseleave.
I have this working in the following code as expected, but I only want
it to apply to the specific div that is being entered/left.
The way I have it right now it applies to the class, so every div with
the class will trigger the function, which is not the desired effect :
(
What I would like to have it do is have the image show/hide only
within the specific div that is being entered/left.
Due to the nature of the project, I cannot simply apply id's to the
divs as a solution.
The code follows, I apologize that I cannot provide a live link, it
isn't online yet, but I have pasted the code below:
//
$('a.more').hide();
//
$('div.featured-cell-padding').mouseenter(function() {
$('a.more').show();
return false;
});
//
$('div.featured-cell-padding').mouseleave(function() {
$('a.more').hide();
return false;
});
});
thanks for any help/insight/words of wisdom :)
[jQuery] Re: show/hide with embed
Yeah that is what I actually ended up doing. On Oct 17, 6:01 pm, Charlie charlie...@gmail.com wrote: instead of hide(0 which is basically display:none, you could move it off screen. This sort of issue comes up a lot with tabshttp://jqueryui.com/demos/tabs/#Why_does...
[jQuery] Re: show/hide with embed
Anyone at all?
On Oct 16, 6:34 pm, ngreenwood6 ngreenwo...@gmail.com wrote:
I tried adding in return false at the end of my function, however that
did not fix the issue. Any other suggestions?
On Oct 16, 8:37 am, rupak mandal rupakn...@gmail.com wrote:
if the problem is reload then add return false at the end or the function
On Fri, Oct 16, 2009 at 6:02 PM, ngreenwood6 ngreenwo...@gmail.com wrote:
I tried doing that as well and it still does the same thing. It must
be changing the display that makes it reload. To test all you have to
do is create a div with embed code and call show/hide on it and you
will see.
On Oct 16, 3:02 am, Evgeny Bobovik bobo...@gmail.com wrote:
Try to use this method:
script type=text/javascript
function showEmbed(){
if($(#test).css('display') == 'block'){
$(#test).css('display','none');
} else {
$(#test).css('display', 'block');
}}
/script
Gk___
2009/10/16 ngreenwood6 ngreenwo...@gmail.com:
[jQuery] Re: show/hide with embed
instead of hide(0 which is basically display:none, you could move it
off screen. This sort of issue comes up a lot with tabs
http://jqueryui.com/demos/tabs/#Why_does...
ngreenwood6 wrote:
Anyone at all?
On Oct 16, 6:34pm, ngreenwood6 ngreenwo...@gmail.com wrote:
I tried adding in return false at the end of my function, however that
did not fix the issue. Any other suggestions?
On Oct 16, 8:37am, rupak mandal rupakn...@gmail.com wrote:
if the problem is reload then add "return false" at the end or the function
On Fri, Oct 16, 2009 at 6:02 PM, ngreenwood6 ngreenwo...@gmail.com wrote:
I tried doing that as well and it still does the same thing. It must
be changing the display that makes it reload. To test all you have to
do is create a div with embed code and call show/hide on it and you
will see.
On Oct 16, 3:02 am, Evgeny Bobovik bobo...@gmail.com wrote:
Try to use this method:
script type="text/_javascript_"
function showEmbed(){
if($("#test").css('display') == 'block'){
$("#test").css('display','none');
} else {
$("#test").css('display', 'block');
}}
/script
Gk___
2009/10/16 ngreenwood6 ngreenwo...@gmail.com:
[jQuery] Re: show/hide with embed
Try to use this method:
script type=text/javascript
function showEmbed(){
if($(#test).css('display') == 'block'){
$(#test).css('display','none');
} else {
$(#test).css('display', 'block');
}
}
/script
Gk___
2009/10/16 ngreenwood6 ngreenwo...@gmail.com:
[jQuery] Re: show/hide with embed
I tried doing that as well and it still does the same thing. It must
be changing the display that makes it reload. To test all you have to
do is create a div with embed code and call show/hide on it and you
will see.
On Oct 16, 3:02 am, Evgeny Bobovik bobo...@gmail.com wrote:
Try to use this method:
script type=text/javascript
function showEmbed(){
if($(#test).css('display') == 'block'){
$(#test).css('display','none');
} else {
$(#test).css('display', 'block');
}}
/script
Gk___
2009/10/16 ngreenwood6 ngreenwo...@gmail.com:
[jQuery] Re: show/hide with embed
if the problem is reload then add return false at the end or the function
On Fri, Oct 16, 2009 at 6:02 PM, ngreenwood6 ngreenwo...@gmail.com wrote:
I tried doing that as well and it still does the same thing. It must
be changing the display that makes it reload. To test all you have to
do is create a div with embed code and call show/hide on it and you
will see.
On Oct 16, 3:02 am, Evgeny Bobovik bobo...@gmail.com wrote:
Try to use this method:
script type=text/javascript
function showEmbed(){
if($(#test).css('display') == 'block'){
$(#test).css('display','none');
} else {
$(#test).css('display', 'block');
}}
/script
Gk___
2009/10/16 ngreenwood6 ngreenwo...@gmail.com:
[jQuery] Re: show/hide with embed
You should use
*$(#test).is(:visible)*
to confirm whether the div is shown or hidden.
Best,
BeCoDeR.
On Fri, Oct 16, 2009 at 3:02 PM, Evgeny Bobovik bobo...@gmail.com wrote:
Try to use this method:
script type=text/javascript
function showEmbed(){
if($(#test).css('display') == 'block'){
$(#test).css('display','none');
} else {
$(#test).css('display', 'block');
}
}
/script
Gk___
2009/10/16 ngreenwood6 ngreenwo...@gmail.com:
[jQuery] Re: show/hide with embed
So if I add return false it won't reload the data?
On Oct 16, 8:37 am, rupak mandal rupakn...@gmail.com wrote:
if the problem is reload then add return false at the end or the function
On Fri, Oct 16, 2009 at 6:02 PM, ngreenwood6 ngreenwo...@gmail.com wrote:
I tried doing that as well and it still does the same thing. It must
be changing the display that makes it reload. To test all you have to
do is create a div with embed code and call show/hide on it and you
will see.
On Oct 16, 3:02 am, Evgeny Bobovik bobo...@gmail.com wrote:
Try to use this method:
script type=text/javascript
function showEmbed(){
if($(#test).css('display') == 'block'){
$(#test).css('display','none');
} else {
$(#test).css('display', 'block');
}}
/script
Gk___
2009/10/16 ngreenwood6 ngreenwo...@gmail.com:
[jQuery] Re: show/hide with embed
I tried adding in return false at the end of my function, however that
did not fix the issue. Any other suggestions?
On Oct 16, 8:37 am, rupak mandal rupakn...@gmail.com wrote:
if the problem is reload then add return false at the end or the function
On Fri, Oct 16, 2009 at 6:02 PM, ngreenwood6 ngreenwo...@gmail.com wrote:
I tried doing that as well and it still does the same thing. It must
be changing the display that makes it reload. To test all you have to
do is create a div with embed code and call show/hide on it and you
will see.
On Oct 16, 3:02 am, Evgeny Bobovik bobo...@gmail.com wrote:
Try to use this method:
script type=text/javascript
function showEmbed(){
if($(#test).css('display') == 'block'){
$(#test).css('display','none');
} else {
$(#test).css('display', 'block');
}}
/script
Gk___
2009/10/16 ngreenwood6 ngreenwo...@gmail.com:
[jQuery] Re: Show/hide effect div on mouseover
Normally the hover function will cause the menu div to disappear in this scenario, as the mouse moves over the child elements. But if you use the hoverIntent plugin, it'll do the trick for you. Liam Mface wrote: Hi, I have a CSS menu that I created using div that current appears using the hover function in the CSS. What I would like to do is incorporate javascript to utilise the effect of fading in when the mouse moves over the 'menu' text and then with a delay fades out when the mouse moves out of the menu area. Is this possible? Please advise... Thanks No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.5.409 / Virus Database: 270.14.3/2409 - Release Date: 10/02/09 06:46:00
[jQuery] Re: Show/Hide
I have figured this out, I replaced
$('#add_link').click(function(){
$(this).parent().next('div').show('slow');
});
$('#remove_link').click(function(){
$(this).parent().hide('slow');
});
with
$('a[id=add_link]').click(function(){
$(this).parent().next('div').show('slow');
});
$('a[id=remove_link]').click(function(){
$(this).parent().hide('slow');
});
On Sep 15, 8:44 am, Richard Walsh rwa...@datagroup.ca wrote:
I am working on a toolset that shows/hides divs. The divs are named
id-1 to id-6.
div id=id-1
content
/div
div id=id-2
content
/div
And so on. The script I have written is below:
script type=text/javascript
$(function(){
$('#id-2').hide();
$('#id-3').hide();
$('#id-4').hide();
$('#id-5').hide();
$('#id-6').hide();
$('#add_link').click(function(){
$(this).parent().next('div').show('slow');
});
$('#remove_link').click(function(){
$(this).parent().hide('slow');
});
});
/script
The beginning part basically just hides div 2-6 on load. The next part
with #add_link that adds the next div if needed, and then the last,
removes the current div. This all works, but only on first set.
So basically I have a repeated piece; as below:
div id=id-1
label for=reprint_F1Identifer 1/label
select name=reprint_F1 id=reprint_F1
option- Please Select -/option
option value=1Sec/option
option value=2Row/option
option value=3Seat/option
option value=4Ticket Barcode/option
option value=5RecID/option
option value=6Book No./option
option value=7Account No./option
option value=8Other/option
/select
input type=text name=reprint_F1b id=reprint_F1b
a href=# id=add_link class=test ui-state-default ui-corner-
allspan class=ui-icon ui-icon-plus/spanAdd/a
/div
This occurs 6 times, starting on div id=id-2 I add another link
for removing that div.
As I said above, they first set works, but after that it doesn't. How
can I get this working so that it works for all 6. I want to try and
avoid writing a function for all six, as in the future I may have to
add in more items.
[jQuery] Re: Show/hide on radio button click
Hey Jules, thanks much, this works like a champ!
[jQuery] Re: show/hide positioned to its trigger
$('tr td:first-child').attr('align', 'value_here');
Maurício
-Mensagem Original-
De: roxstyle
Para: jQuery (English)
Enviada em: quarta-feira, 24 de junho de 2009 14:17
Assunto: [jQuery] show/hide positioned to its trigger
i am trying to learn how to position a show/hide module to the a
that triggers it, instead of a literal positioning through css
this is a sample of the module i am trying to position.
http://www.roxstyle.com/projects/blssi/cms/de-tool/proj-distribution.html
instead of setting the css margins and paddings to the doc space, i
would like to set the object relative to the cell where the trigger
exists.
can anyone point me in the direction of tutorials or samples of this
behavior?
[jQuery] Re: show hide random rows
Scott, Ricardo, great thoughts and great code. It is an interesting issue
with many attack vectors; I hope the OP is getting something out of all
this...
I will expect at least as much code and analysis for my next posted problem!
;)
SEAN O
_
http://www.sean-o.com
http://twitter.com/seanodotcom
Scott Sauyet-3 wrote:
ricardobeat wrote:
If you need performance, this should be it:
http://jsbin.com/uvuzi/edit
It sorts the rows using the Fisher-Yates shuffling algorithm.
Despite throwing elements around in an array, it's faster than the
pure mathematical solution because you don't need to filter out
duplicate random numbers. An even greater improvement can be made by
using the style.display property directly.
First of all, thanks for your code. I learned something new today. I
never realized that I could reassign the elements of a jQuery collection
in that manner.
I don't know why I brought up performance for a client-side JavaScript
issue! It's probably not at all relevant to the OP's problem. But I
think both your technique and mine should have similar performance. The
key factor in either of ours is the number of calls to Math.random(),
and both of us call that $rows.length times.
Sean O's technique has a worst-case time that is infinite, but it, or a
slight modification of it [1], has an expected time much shorter than
either of ours. In the ten-out-of-fifty case we were working with, our
techniques require 50 iterations, where in his the expected number of
iterations is 11.033. In your ten-out-of-one-thousand example, ours
would be 1000, and his expected number is below 10.05. With the
modification [1], the worst case would be if the number to be selected
were half of the total rows, and then the number of iterations seems to
be about ln(2) * $rows.length, although I haven't attempted to prove this.
This is related to the Coupon Collector's Problem [2]. I'm pretty sure
the exact expected number of iterations of Sean's technique is
sum_{i=1}^{SELECTED} {TOTAL / (TOTAL - i + 1)}
But hey, let's get back to jQuery! :-)
-- Scott
[1] The modification would be, when the requested number of rows is
greater than half the total number of rows, to switch to running the
same algorithm to choose the number of *unselected* rows.
[2] http://www.google.com/search?q=coupon+collector+problem
--
View this message in context:
http://www.nabble.com/show-hide-random-rows-tp22570300s27240p22599424.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: show hide random rows
Bob, Try this: http://jsbin.com/esoba Code: http://jsbin.com/esoba/edit It shouldn't matter how YUI is IDing your table rows, as you can pluck them out by index. HTH, SEAN O http://www.sean-o.com http://twitter.com/seanodotcom Bob O-2 wrote: I was wondering if anyone could point me to a tutorial or blog where i can accomplish this task. Basically i have a YUI datatable and i want to use jQuery to hide all but a user generated number of rows that are random selected so if i had 50 records in the table and the user input 10 in a text field and hit a button.. 10 random records would be left displayed and the other 40 would be hidden.. -- View this message in context: http://www.nabble.com/show-hide-random-rows-tp22570300s27240p22579151.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: show hide random rows
Bob O wrote:
Basically i have a YUI datatable and i want to use jQuery to hide all
but a user generated number of rows that are random selected
Something like this might be what you're looking for:
http://jsbin.com/ozafa/edit
The important part is this:
var $rows = $(#myTable tbody tr);
$(form).submit(function() {
var count = parseInt($(#count).val());
var chosen = 0;
var total = $rows.length;
$rows.each(function(index) {
if (Math.random() (count - chosen) / (total - index)) {
$(this).fadeIn(slow);
chosen++;
} else {
$(this).fadeOut(slow);
}
});
return false;
});
This is different from the previous suggestion, which kept randomly
picking rows and if they weren't already chosen, added them to the list.
This solution iterates through the rows, updating the probability of
each one being chosen according to how many have already been chosen and
how many we still want to choose. It might be a bit less efficient for
10 out of 50, but would probably be much more efficient at 40 out of 50,
and it is entirely predictable, in that it run exactly one random call
for each row in the table.
Cheers,
-- Scott
[jQuery] Re: show hide random rows
Scott,
Nice job. I like the logic, and the fading out of unselected rows.
My solution was, admittedly, a quick one. It certainly wouldn't scale past
1,000 rows or so -- especially with the majority # selected -- but if the
10/50 number is firm, seemed to work OK.
--SEAN O
Scott Sauyet-3 wrote:
Bob O wrote:
Basically i have a YUI datatable and i want to use jQuery to hide all
but a user generated number of rows that are random selected
Something like this might be what you're looking for:
http://jsbin.com/ozafa/edit
The important part is this:
var $rows = $(#myTable tbody tr);
$(form).submit(function() {
var count = parseInt($(#count).val());
var chosen = 0;
var total = $rows.length;
$rows.each(function(index) {
if (Math.random() (count - chosen) / (total - index)) {
$(this).fadeIn(slow);
chosen++;
} else {
$(this).fadeOut(slow);
}
});
return false;
});
This is different from the previous suggestion, which kept randomly
picking rows and if they weren't already chosen, added them to the list.
This solution iterates through the rows, updating the probability of
each one being chosen according to how many have already been chosen and
how many we still want to choose. It might be a bit less efficient for
10 out of 50, but would probably be much more efficient at 40 out of 50,
and it is entirely predictable, in that it run exactly one random call
for each row in the table.
Cheers,
-- Scott
--
View this message in context:
http://www.nabble.com/show-hide-random-rows-tp22570300s27240p22584637.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: show hide random rows
Sean O wrote: Nice job. I like the logic, and the fading out of unselected rows. My solution was, admittedly, a quick one. It certainly wouldn't scale past 1,000 rows or so -- especially with the majority # selected -- but if the 10/50 number is firm, seemed to work OK. Yours is probably more efficient on average than mine, even at higher numbers, except in extreme cases. The advantage of mine is in predictability. It's going to loop through all the rows making one call to random() for each. Mine was actually a quick copy of something I recently had to do in my day job where this predictability was more important (to my boss) than average efficiency, and where the numbers were higher. Although I coded this approach, I argued unsuccessfully for your approach, which is usually faster. In any case, either should work fine for the OP if the numbers are anything like the example given. -- Scott
[jQuery] Re: show hide random rows
If you need performance, this should be it: http://jsbin.com/uvuzi/edit It sorts the rows using the Fisher-Yates shuffling algorithm. Despite throwing elements around in an array, it's faster than the pure mathematical solution because you don't need to filter out duplicate random numbers. An even greater improvement can be made by using the style.display property directly. cheers, - ricardo On Mar 18, 4:20 pm, Scott Sauyet li...@sauyet.com wrote: Sean O wrote: Nice job. I like the logic, and the fading out of unselected rows. My solution was, admittedly, a quick one. It certainly wouldn't scale past 1,000 rows or so -- especially with the majority # selected -- but if the 10/50 number is firm, seemed to work OK. Yours is probably more efficient on average than mine, even at higher numbers, except in extreme cases. The advantage of mine is in predictability. It's going to loop through all the rows making one call to random() for each. Mine was actually a quick copy of something I recently had to do in my day job where this predictability was more important (to my boss) than average efficiency, and where the numbers were higher. Although I coded this approach, I argued unsuccessfully for your approach, which is usually faster. In any case, either should work fine for the OP if the numbers are anything like the example given. -- Scott
[jQuery] Re: show hide random rows
ricardobeat wrote:
If you need performance, this should be it:
http://jsbin.com/uvuzi/edit
It sorts the rows using the Fisher-Yates shuffling algorithm.
Despite throwing elements around in an array, it's faster than the
pure mathematical solution because you don't need to filter out
duplicate random numbers. An even greater improvement can be made by
using the style.display property directly.
First of all, thanks for your code. I learned something new today. I
never realized that I could reassign the elements of a jQuery collection
in that manner.
I don't know why I brought up performance for a client-side JavaScript
issue! It's probably not at all relevant to the OP's problem. But I
think both your technique and mine should have similar performance. The
key factor in either of ours is the number of calls to Math.random(),
and both of us call that $rows.length times.
Sean O's technique has a worst-case time that is infinite, but it, or a
slight modification of it [1], has an expected time much shorter than
either of ours. In the ten-out-of-fifty case we were working with, our
techniques require 50 iterations, where in his the expected number of
iterations is 11.033. In your ten-out-of-one-thousand example, ours
would be 1000, and his expected number is below 10.05. With the
modification [1], the worst case would be if the number to be selected
were half of the total rows, and then the number of iterations seems to
be about ln(2) * $rows.length, although I haven't attempted to prove this.
This is related to the Coupon Collector's Problem [2]. I'm pretty sure
the exact expected number of iterations of Sean's technique is
sum_{i=1}^{SELECTED} {TOTAL / (TOTAL - i + 1)}
But hey, let's get back to jQuery! :-)
-- Scott
[1] The modification would be, when the requested number of rows is
greater than half the total number of rows, to switch to running the
same algorithm to choose the number of *unselected* rows.
[2] http://www.google.com/search?q=coupon+collector+problem
[jQuery] Re: Show/Hide element
Tried something like this?
$(legend).click(function() { $(fieldset ul).toggle(); });
On Mar 15, 2009, at 10:40 AM, shapper wrote:
Hello,
I have a list of fieldsets and each one has a legend.
I am thinking in having something like:
fieldset
legendPersonal Data/legend
ul
lifirst element/li
lisecond element/li
/ul
/fieldset
How can Show/Hide the ul when I click the legend?
I would like to have many fielsets on a form and being able to Show/
Hide the contents of any fieldset.
Thanks,
Miguel
[jQuery] Re: Show/Hide element
Adding to Mat's solution to work for many fieldsets:
$(legend).click(function() { $(this).next(ul).toggle(); });
On Mar 16, 4:05 pm, Mat Schaffer mat.schaf...@gmail.com wrote:
Tried something like this?
$(legend).click(function() { $(fieldset ul).toggle(); });
On Mar 15, 2009, at 10:40 AM, shapper wrote:
Hello,
I have a list of fieldsets and each one has a legend.
I am thinking in having something like:
fieldset
legendPersonal Data/legend
ul
lifirst element/li
lisecond element/li
/ul
/fieldset
How can Show/Hide the ul when I click the legend?
I would like to have many fielsets on a form and being able to Show/
Hide the contents of any fieldset.
Thanks,
Miguel
[jQuery] Re: Show/hide multiple TDs with one function?
I have a table with multiple TDs (with different classes) that I want
to toggle (show/hide) with one function, from checking different
checkboxes that relate to the different TDs.
I'm thinking I should pass a variable to the function (from each
checkbox) which then show/hides the different TDs using their class
names, based on the variable passed. But I'm new to jQuery, so does
anyone have a tip for how this could be done?
I've found that the best way to hide/show table columns is to simply
set/remove a class on the table element and then to define CSS rules
based on the class name.
For example, given this markup:
input id=blah type=checkbox /
table id=myTable
trtd class=onetd class=two/tr
/table
You define a CSS rule like this:
table.blah td.one { display: none }
Then you add a handler for the checkbox:
$('#blah').change(function() {
if (this.checked)
$('#myTable').addClass('blah');
else
$('#myTable').removeClass('blah');
});
[jQuery] Re: Show/hide multiple TDs with one function?
Hi Mike, and thanks for the answer.
The thing is that I want to show/hide the TDs and not the entire table
itself.
I have multiple rows, and want to toggle one TD for each row - not all
the TDs in each row.
On 8 Mar, 14:54, Mike Alsup mal...@gmail.com wrote:
I have a table with multiple TDs (with different classes) that I want
to toggle (show/hide) with one function, from checking different
checkboxes that relate to the different TDs.
I'm thinking I should pass a variable to the function (from each
checkbox) which then show/hides the different TDs using their class
names, based on the variable passed. But I'm new to jQuery, so does
anyone have a tip for how this could be done?
I've found that the best way to hide/show table columns is to simply
set/remove a class on the table element and then to define CSS rules
based on the class name.
For example, given this markup:
input id=blah type=checkbox /
table id=myTable
trtd class=onetd class=two/tr
/table
You define a CSS rule like this:
table.blah td.one { display: none }
Then you add a handler for the checkbox:
$('#blah').change(function() {
if (this.checked)
$('#myTable').addClass('blah');
else
$('#myTable').removeClass('blah');
});
[jQuery] Re: Show/hide multiple TDs with one function?
The thing is that I want to show/hide the TDs and not the entire table itself. I have multiple rows, and want to toggle one TD for each row - not all the TDs in each row. I know. That's exactly what I was showing how to do. You add/remove a class on the table but put a style rule on the td.
[jQuery] Re: Show hide and print
You're best served doing that simply with a CSS print stylesheet.
Just add:
link rel=stylesheet type=text/css media=print href=print.css /
and set all elements you don't want to print to display: none.
Here's an Oldie-but-Goodie guide to creating a nice one:
http://www.alistapart.com/articles/goingtoprint/
HTH,
SEAN O
http://www.sean-o.com
http://twitter.com/seanodotcom
rayfidelity wrote:
Hi,
I have a problem, I have an element which I show (let's say fadein
(slow)) on certain action (it's set on display:none in CSS).
The problem is that i want to print that page without that
element...how can i do that... fadein, show,... all set the element on
display:block which means the element will apper no matter what.
I've tried something like this
$(#gototop).attr(style,@media print{display:none;});
I wan't the element to be seen on screen, but not for printing!
but it doesen't work...
Thank,
BR
--
View this message in context:
http://www.nabble.com/Show-hide-and-print-tp22327863s27240p22330446.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Show hide and print
Jquery show or fadein overrides the print stylesheet that's the whole
problem.
On Mar 4, 2:56 pm, Sean O seanodot...@yahoo.com wrote:
You're best served doing that simply with a CSS print stylesheet.
Just add:
link rel=stylesheet type=text/css media=print href=print.css /
and set all elements you don't want to print to display: none.
Here's an Oldie-but-Goodie guide to creating a nice
one:http://www.alistapart.com/articles/goingtoprint/
HTH,
SEAN Ohttp://www.sean-o.comhttp://twitter.com/seanodotcom
rayfidelity wrote:
Hi,
I have a problem, I have an element which I show (let's say fadein
(slow)) on certain action (it's set on display:none in CSS).
The problem is that i want to print that page without that
element...how can i do that... fadein, show,... all set the element on
display:block which means the element will apper no matter what.
I've tried something like this
$(#gototop).attr(style,@media print{display:none;});
I wan't the element to be seen on screen, but not for printing!
but it doesen't work...
Thank,
BR
--
View this message in
context:http://www.nabble.com/Show-hide-and-print-tp22327863s27240p22330446.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Show hide and print
Have you tried overriding the override?
i.e.
#gototop { display:none !important; }
SEAN O
rayfidelity wrote:
Jquery show or fadein overrides the print stylesheet that's the whole
problem.
On Mar 4, 2:56 pm, Sean O seanodot...@yahoo.com wrote:
You're best served doing that simply with a CSS print stylesheet.
Just add:
link rel=stylesheet type=text/css media=print href=print.css /
and set all elements you don't want to print to display: none.
Here's an Oldie-but-Goodie guide to creating a nice
one:http://www.alistapart.com/articles/goingtoprint/
HTH,
SEAN Ohttp://www.sean-o.comhttp://twitter.com/seanodotcom
rayfidelity wrote:
Hi,
I have a problem, I have an element which I show (let's say fadein
(slow)) on certain action (it's set on display:none in CSS).
The problem is that i want to print that page without that
element...how can i do that... fadein, show,... all set the element on
display:block which means the element will apper no matter what.
I've tried something like this
$(#gototop).attr(style,@media print{display:none;});
I wan't the element to be seen on screen, but not for printing!
but it doesen't work...
Thank,
BR
--
View this message in
context:http://www.nabble.com/Show-hide-and-print-tp22327863s27240p22330446.html
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
--
View this message in context:
http://www.nabble.com/Show-hide-and-print-tp22327863s27240p22332712.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Show/Hide Menu
You might want to try .hover(): http://docs.jquery.com/Events/hover#overout
- Jack
Nic Hubbard wrote:
I have a menu that is activated on mouseover a link. The menu is a
hidden div which appears. My problem now is how to remove/hide that
div when a user move their mouse off of the menu. I have tried adding
a mouseout event to the div, but because there are child divs inside
that div, any mousing over them hides the parent div as well, which I
don't want. I only want it to hide if the mouse is outside the parent
div, not anywhere within it.
// - Show Artists Menu When Link moused over --
$('a#Artists').mouseover(function() {
// Show Our Artists Box
$('#artistsBox').fadeIn('slow');
});//end mouseover
// - Add Stuff When Link moused over --
$('#artistsBox').mouseover(function() {
// Add a mouse out on our box
$('#artistsColumns').mouseout(function() {
// Hide Our Artists Box
$('#artistsBox').fadeOut('slow');
});//end mouseover
});//end mouseover
div id=artistsBox style=display:none;
div id=artistsColumnslinks and stuff in here/div
/div
Because the mouseout event is attatched to artistsBox, mousing over
artistsColumns hides the div as well, which I don't want.
Any ideas?
[jQuery] Re: Show/Hide Menu
Thanks.
This almost seems like it would work. But, since the element that the
hover is added to, and the element that is shown are different, by the
time you move your mouse from the hover element to the element that is
shown, your mouse moves out of the first element, and the shown div
disappears.
Essentially it needs to have the functionality of css dropdowns:
http://www.cssplay.co.uk/menus/final_drop.html
They stay out there until your mouse moves off of them.
On Mar 3, 12:14 am, Jack Killpatrick j...@ihwy.com wrote:
You might want to try .hover():http://docs.jquery.com/Events/hover#overout
- Jack
Nic Hubbard wrote:
I have a menu that is activated on mouseover a link. The menu is a
hidden div which appears. My problem now is how to remove/hide that
div when a user move their mouse off of the menu. I have tried adding
a mouseout event to the div, but because there are child divs inside
that div, any mousing over them hides the parent div as well, which I
don't want. I only want it to hide if the mouse is outside the parent
div, not anywhere within it.
// - Show Artists Menu When Link moused over --
$('a#Artists').mouseover(function() {
// Show Our Artists Box
$('#artistsBox').fadeIn('slow');
});//end mouseover
// - Add Stuff When Link moused over --
$('#artistsBox').mouseover(function() {
// Add a mouse out on our box
$('#artistsColumns').mouseout(function() {
// Hide Our Artists Box
$('#artistsBox').fadeOut('slow');
});//end mouseover
});//end mouseover
div id=artistsBox style=display:none;
div id=artistsColumnslinks and stuff in here/div
/div
Because the mouseout event is attatched to artistsBox, mousing over
artistsColumns hides the div as well, which I don't want.
Any ideas?
[jQuery] Re: Show/Hide Menu
Here's an example of a way to handle that:
http://www.ihwy.com/Labs/demos/Current/image-hover-menu.aspx
- Jack
Nic Hubbard wrote:
Thanks.
This almost seems like it would work. But, since the element that the
hover is added to, and the element that is shown are different, by the
time you move your mouse from the hover element to the element that is
shown, your mouse moves out of the first element, and the shown div
disappears.
Essentially it needs to have the functionality of css dropdowns:
http://www.cssplay.co.uk/menus/final_drop.html
They stay out there until your mouse moves off of them.
On Mar 3, 12:14 am, Jack Killpatrick j...@ihwy.com wrote:
You might want to try .hover():http://docs.jquery.com/Events/hover#overout
- Jack
Nic Hubbard wrote:
I have a menu that is activated on mouseover a link. The menu is a
hidden div which appears. My problem now is how to remove/hide that
div when a user move their mouse off of the menu. I have tried adding
a mouseout event to the div, but because there are child divs inside
that div, any mousing over them hides the parent div as well, which I
don't want. I only want it to hide if the mouse is outside the parent
div, not anywhere within it.
// - Show Artists Menu When Link moused over --
$('a#Artists').mouseover(function() {
// Show Our Artists Box
$('#artistsBox').fadeIn('slow');
});//end mouseover
// - Add Stuff When Link moused over --
$('#artistsBox').mouseover(function() {
// Add a mouse out on our box
$('#artistsColumns').mouseout(function() {
// Hide Our Artists Box
$('#artistsBox').fadeOut('slow');
});//end mouseover
});//end mouseover
div id=artistsBox style=display:none;
div id=artistsColumnslinks and stuff in here/div
/div
Because the mouseout event is attatched to artistsBox, mousing over
artistsColumns hides the div as well, which I don't want.
Any ideas?
[jQuery] Re: Show/Hide Menu
Yes! That is exactly what I was looking for! I have implemented it
and it works perfectly, thank you!
On Mar 3, 9:54 am, Jack Killpatrick j...@ihwy.com wrote:
Here's an example of a way to handle that:
http://www.ihwy.com/Labs/demos/Current/image-hover-menu.aspx
- Jack
Nic Hubbard wrote:
Thanks.
This almost seems like it would work. But, since the element that the
hover is added to, and the element that is shown are different, by the
time you move your mouse from the hover element to the element that is
shown, your mouse moves out of the first element, and the shown div
disappears.
Essentially it needs to have the functionality of css dropdowns:
http://www.cssplay.co.uk/menus/final_drop.html
They stay out there until your mouse moves off of them.
On Mar 3, 12:14 am, Jack Killpatrick j...@ihwy.com wrote:
You might want to try .hover():http://docs.jquery.com/Events/hover#overout
- Jack
Nic Hubbard wrote:
I have a menu that is activated on mouseover a link. The menu is a
hidden div which appears. My problem now is how to remove/hide that
div when a user move their mouse off of the menu. I have tried adding
a mouseout event to the div, but because there are child divs inside
that div, any mousing over them hides the parent div as well, which I
don't want. I only want it to hide if the mouse is outside the parent
div, not anywhere within it.
// - Show Artists Menu When Link moused over --
$('a#Artists').mouseover(function() {
// Show Our Artists Box
$('#artistsBox').fadeIn('slow');
});//end mouseover
// - Add Stuff When Link moused over --
$('#artistsBox').mouseover(function() {
// Add a mouse out on our box
$('#artistsColumns').mouseout(function() {
// Hide Our Artists Box
$('#artistsBox').fadeOut('slow');
});//end mouseover
});//end mouseover
div id=artistsBox style=display:none;
div id=artistsColumnslinks and stuff in here/div
/div
Because the mouseout event is attatched to artistsBox, mousing over
artistsColumns hides the div as well, which I don't want.
Any ideas?
[jQuery] Re: Show/Hide Menu
great! but the important part: is it a nice or a bad puppy? g
- Jack
Nic Hubbard wrote:
Yes! That is exactly what I was looking for! I have implemented it
and it works perfectly, thank you!
On Mar 3, 9:54 am, Jack Killpatrick j...@ihwy.com wrote:
Here's an example of a way to handle that:
http://www.ihwy.com/Labs/demos/Current/image-hover-menu.aspx
- Jack
Nic Hubbard wrote:
Thanks.
This almost seems like it would work. But, since the element that the
hover is added to, and the element that is shown are different, by the
time you move your mouse from the hover element to the element that is
shown, your mouse moves out of the first element, and the shown div
disappears.
Essentially it needs to have the functionality of css dropdowns:
http://www.cssplay.co.uk/menus/final_drop.html
They stay out there until your mouse moves off of them.
On Mar 3, 12:14 am, Jack Killpatrick j...@ihwy.com wrote:
You might want to try .hover():http://docs.jquery.com/Events/hover#overout
- Jack
Nic Hubbard wrote:
I have a menu that is activated on mouseover a link. The menu is a
hidden div which appears. My problem now is how to remove/hide that
div when a user move their mouse off of the menu. I have tried adding
a mouseout event to the div, but because there are child divs inside
that div, any mousing over them hides the parent div as well, which I
don't want. I only want it to hide if the mouse is outside the parent
div, not anywhere within it.
// - Show Artists Menu When Link moused over --
$('a#Artists').mouseover(function() {
// Show Our Artists Box
$('#artistsBox').fadeIn('slow');
});//end mouseover
// - Add Stuff When Link moused over --
$('#artistsBox').mouseover(function() {
// Add a mouse out on our box
$('#artistsColumns').mouseout(function() {
// Hide Our Artists Box
$('#artistsBox').fadeOut('slow');
});//end mouseover
});//end mouseover
div id=artistsBox style=display:none;
div id=artistsColumnslinks and stuff in here/div
/div
Because the mouseout event is attatched to artistsBox, mousing over
artistsColumns hides the div as well, which I don't want.
Any ideas?
[jQuery] Re: Show/Hide Menu
Hmm, it looks nice to me. :)
On Mar 3, 3:20 pm, Jack Killpatrick j...@ihwy.com wrote:
great! but the important part: is it a nice or a bad puppy? g
- Jack
Nic Hubbard wrote:
Yes! That is exactly what I was looking for! I have implemented it
and it works perfectly, thank you!
On Mar 3, 9:54 am, Jack Killpatrick j...@ihwy.com wrote:
Here's an example of a way to handle that:
http://www.ihwy.com/Labs/demos/Current/image-hover-menu.aspx
- Jack
Nic Hubbard wrote:
Thanks.
This almost seems like it would work. But, since the element that the
hover is added to, and the element that is shown are different, by the
time you move your mouse from the hover element to the element that is
shown, your mouse moves out of the first element, and the shown div
disappears.
Essentially it needs to have the functionality of css dropdowns:
http://www.cssplay.co.uk/menus/final_drop.html
They stay out there until your mouse moves off of them.
On Mar 3, 12:14 am, Jack Killpatrick j...@ihwy.com wrote:
You might want to try
.hover():http://docs.jquery.com/Events/hover#overout
- Jack
Nic Hubbard wrote:
I have a menu that is activated on mouseover a link. The menu is a
hidden div which appears. My problem now is how to remove/hide that
div when a user move their mouse off of the menu. I have tried adding
a mouseout event to the div, but because there are child divs inside
that div, any mousing over them hides the parent div as well, which I
don't want. I only want it to hide if the mouse is outside the parent
div, not anywhere within it.
// - Show Artists Menu When Link moused over --
$('a#Artists').mouseover(function() {
// Show Our Artists Box
$('#artistsBox').fadeIn('slow');
});//end mouseover
// - Add Stuff When Link moused over --
$('#artistsBox').mouseover(function() {
// Add a mouse out on our box
$('#artistsColumns').mouseout(function() {
// Hide Our Artists Box
$('#artistsBox').fadeOut('slow');
});//end mouseover
});//end mouseover
div id=artistsBox style=display:none;
div id=artistsColumnslinks and stuff in here/div
/div
Because the mouseout event is attatched to artistsBox, mousing over
artistsColumns hides the div as well, which I don't want.
Any ideas?
[jQuery] Re: show/hide on hover event (newbie question)
Use hover().
$(function() {
$(#mainDiv).hover(
function() { $(#myImage).show(); },
function() { $(#myImage).hide(); }
);
});
div id=mainDiv style=width:100px; height:150px;
img src=image.jpg id=myImage style=display:none /
/div
On Feb 26, 11:33 am, introvert aljaz.faj...@gmail.com wrote:
Hello
I have a simple div inside which I want to show an image on hover
(rollover) and hide on mouseout of the div.
I tried doing it with toggle() but that will only change the
visibility on hover.
How can I do that?
Thanks for help!
[jQuery] Re: show/hide on hover event (newbie question)
you mean this: http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything ? On Feb 26, 11:33 pm, introvert aljaz.faj...@gmail.com wrote: Hello I have a simple div inside which I want to show an image on hover (rollover) and hide on mouseout of the div. I tried doing it with toggle() but that will only change the visibility on hover. How can I do that? Thanks for help!
[jQuery] Re: show/hide opacity gets stuck sometimes
I've never worked with the .stop function before, so I searched for it
in google (jquery .stop) to read up on it to see if that might shed
some light... One of the very first links I found was this:
http://www.pengoworks.com/workshop/jquery/stop_bug.htm
Glancing over it, I think this is what is causing your problem. The
individual who created that page links to a patch they created for the
issue, and has a fairly straightforward demonstration. Hope that
helps.
On Dec 9, 11:11 am, Tijmen Smit [EMAIL PROTECTED] wrote:
I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.
But once you quickly move from the top left to the top right, it get a
bit weird. Sometimes the box with the big photo disappears completely
or it get stuck with the opacity not set to full visibility.
And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have anything
to do with the z-index.
You can see it in action here
-http://www.tijmensmit.com/dev/intranet/test.html
$(#smoelenboek li).hover(function() {
var $list_class = $(this).attr(class);
$(#smoelenboek).find('li.' + $list_class).addClass
(on);
$(this).find(div).stop().animate({opacity: show, top:
30px}, slow);
}, function () {
$(this).find(div).stop().animate({opacity: hide, top:
20px}, fast);
$(#smoelenboek li).removeClass(on);
});
I know I could change the .stop().animate() to a simple .hide()/.show
(), which works fine. But I would like to keep the animate opacity
effect, but then without them sometimes disappearing :)
Any idea's how to fix this problem?
Thanks!
Tijmen
[jQuery] Re: show/hide opacity gets stuck sometimes
Thanks a lot :)
The clearQueue option for the stop() did the trick, for some reason I
completely missed it on docs.jquery.com
On Dec 9, 6:04 pm, Leanan [EMAIL PROTECTED] wrote:
I've never worked with the .stop function before, so I searched for it
in google (jquery .stop) to read up on it to see if that might shed
some light... One of the very first links I found was this:
http://www.pengoworks.com/workshop/jquery/stop_bug.htm
Glancing over it, I think this is what is causing your problem. The
individual who created that page links to a patch they created for the
issue, and has a fairly straightforward demonstration. Hope that
helps.
On Dec 9, 11:11 am, Tijmen Smit [EMAIL PROTECTED] wrote:
I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.
But once you quickly move from the top left to the top right, it get a
bit weird. Sometimes the box with the big photo disappears completely
or it get stuck with the opacity not set to full visibility.
And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have anything
to do with the z-index.
You can see it in action here
-http://www.tijmensmit.com/dev/intranet/test.html
$(#smoelenboek li).hover(function() {
var $list_class = $(this).attr(class);
$(#smoelenboek).find('li.' + $list_class).addClass
(on);
$(this).find(div).stop().animate({opacity: show, top:
30px}, slow);
}, function () {
$(this).find(div).stop().animate({opacity: hide, top:
20px}, fast);
$(#smoelenboek li).removeClass(on);
});
I know I could change the .stop().animate() to a simple .hide()/.show
(), which works fine. But I would like to keep the animate opacity
effect, but then without them sometimes disappearing :)
Any idea's how to fix this problem?
Thanks!
Tijmen
[jQuery] Re: show/hide opacity gets stuck sometimes
You're welcome. Glad it proved useful.
On Dec 9, 1:22 pm, Tijmen Smit [EMAIL PROTECTED] wrote:
Thanks a lot :)
The clearQueue option for the stop() did the trick, for some reason I
completely missed it on docs.jquery.com
On Dec 9, 6:04 pm, Leanan [EMAIL PROTECTED] wrote:
I've never worked with the .stop function before, so I searched for it
in google (jquery .stop) to read up on it to see if that might shed
some light... One of the very first links I found was this:
http://www.pengoworks.com/workshop/jquery/stop_bug.htm
Glancing over it, I think this is what is causing your problem. The
individual who created that page links to a patch they created for the
issue, and has a fairly straightforward demonstration. Hope that
helps.
On Dec 9, 11:11 am, Tijmen Smit [EMAIL PROTECTED] wrote:
I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.
But once you quickly move from the top left to the top right, it get a
bit weird. Sometimes the box with the big photo disappears completely
or it get stuck with the opacity not set to full visibility.
And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have anything
to do with the z-index.
You can see it in action here
-http://www.tijmensmit.com/dev/intranet/test.html
$(#smoelenboek li).hover(function() {
var $list_class = $(this).attr(class);
$(#smoelenboek).find('li.' + $list_class).addClass
(on);
$(this).find(div).stop().animate({opacity: show, top:
30px}, slow);
}, function () {
$(this).find(div).stop().animate({opacity: hide, top:
20px}, fast);
$(#smoelenboek li).removeClass(on);
});
I know I could change the .stop().animate() to a simple .hide()/.show
(), which works fine. But I would like to keep the animate opacity
effect, but then without them sometimes disappearing :)
Any idea's how to fix this problem?
Thanks!
Tijmen
[jQuery] Re: show/hide opacity gets stuck sometimes
On Dec 9, 2008, at 1:22 PM, Tijmen Smit wrote:
The clearQueue option for the stop() did the trick, for some reason I
completely missed it on docs.jquery.com
Not your fault. The note about the .stop() options looked almost like
a footnote. Quite easy to miss. I've just updated the page to place
the options in their proper place.
http://docs.jquery.com/Effects/stop#clearQueuegotoEnd
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Dec 9, 6:04 pm, Leanan [EMAIL PROTECTED] wrote:
I've never worked with the .stop function before, so I searched for
it
in google (jquery .stop) to read up on it to see if that might shed
some light... One of the very first links I found was this:
http://www.pengoworks.com/workshop/jquery/stop_bug.htm
Glancing over it, I think this is what is causing your problem. The
individual who created that page links to a patch they created for
the
issue, and has a fairly straightforward demonstration. Hope that
helps.
On Dec 9, 11:11 am, Tijmen Smit [EMAIL PROTECTED] wrote:
I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.
But once you quickly move from the top left to the top right, it
get a
bit weird. Sometimes the box with the big photo disappears
completely
or it get stuck with the opacity not set to full visibility.
And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have
anything
to do with the z-index.
You can see it in action here -http://www.tijmensmit.com/dev/intranet/test.html
$(#smoelenboek li).hover(function() {
var $list_class = $(this).attr(class);
$(#smoelenboek).find('li.' + $list_class).addClass
(on);
$(this).find(div).stop().animate({opacity: show,
top:
30px}, slow);
}, function () {
$(this).find(div).stop().animate({opacity: hide,
top:
20px}, fast);
$(#smoelenboek li).removeClass(on);
});
I know I could change the .stop().animate() to a
simple .hide()/.show
(), which works fine. But I would like to keep the animate opacity
effect, but then without them sometimes disappearing :)
Any idea's how to fix this problem?
Thanks!
Tijmen
[jQuery] Re: show/hide/toggle: suggestion to reduce show/hide code
I ran into this same problem today and wrote up this quick plugin that
accepts a boolean or function:
$.fn.extend({
showIf: function(fn)
{
var result;
switch (typeof fn) {
case 'function':
result = fn.call(this);
break;
default:
result = fn;
}
if (result) {
$(this.show());
} else {
$(this.hide());
}
return $(this);
}
});
Usage example:
// Show all LI's based on value of condition
var condition = true;
$('ul.tabs li').showIf(condition);
// Show all LI's that contain exactly 3 anchors
$('ul.tabs li').showIf(function()
{
return ($(this).find('a').length == 3);
});
I hope this helps :)
-Hector
On Tue, Nov 18, 2008 at 11:13 PM, Dylan Verheul [EMAIL PROTECTED]wrote:
On Tue, Nov 18, 2008 at 19:58, Karl Swedberg [EMAIL PROTECTED]
wrote:
On Nov 18, 2008, at 9:02 AM, Dylan Verheul wrote:
Hmm, I actually checked the docs for that because that would make
.toggle an unsuitable overloader. The docs said toggle doesn't take
arguments:
Hmmm, indeed. :) Not so much outdated as incomplete. I just went ahead
and
added it to the docs:
http://docs.jquery.com/Effects/toggle#speedcallback
Good :-) Anyway, that means no simple overloading method is available.
Of course it's no problem to code it or even to write a plugin, but I
thought overloading an existing function would make for an interesting
and probably often-used functionality, which was the point of starting
this thread.
[jQuery] Re: show/hide/toggle: suggestion to reduce show/hide code
Oops, fixed a typo:
$.fn.extend({
showIf: function(fn)
{
var result;
switch (typeof fn) {
case 'function':
result = fn.call(this);
break;
default:
result = fn;
}
if (result) {
$(this).show();
} else {
$(this).hide();
}
return $(this);
}
});
-Hector
On Wed, Nov 19, 2008 at 9:29 AM, Hector Virgen [EMAIL PROTECTED] wrote:
I ran into this same problem today and wrote up this quick plugin that
accepts a boolean or function:
$.fn.extend({
showIf: function(fn)
{
var result;
switch (typeof fn) {
case 'function':
result = fn.call(this);
break;
default:
result = fn;
}
if (result) {
$(this.show());
} else {
$(this.hide());
}
return $(this);
}
});
Usage example:
// Show all LI's based on value of condition
var condition = true;
$('ul.tabs li').showIf(condition);
// Show all LI's that contain exactly 3 anchors
$('ul.tabs li').showIf(function()
{
return ($(this).find('a').length == 3);
});
I hope this helps :)
-Hector
On Tue, Nov 18, 2008 at 11:13 PM, Dylan Verheul [EMAIL PROTECTED]wrote:
On Tue, Nov 18, 2008 at 19:58, Karl Swedberg [EMAIL PROTECTED]
wrote:
On Nov 18, 2008, at 9:02 AM, Dylan Verheul wrote:
Hmm, I actually checked the docs for that because that would make
.toggle an unsuitable overloader. The docs said toggle doesn't take
arguments:
Hmmm, indeed. :) Not so much outdated as incomplete. I just went ahead
and
added it to the docs:
http://docs.jquery.com/Effects/toggle#speedcallback
Good :-) Anyway, that means no simple overloading method is available.
Of course it's no problem to code it or even to write a plugin, but I
thought overloading an existing function would make for an interesting
and probably often-used functionality, which was the point of starting
this thread.
[jQuery] Re: show/hide/toggle: suggestion to reduce show/hide code
On Nov 18, 2008, at 1:10 AM, Dylan Verheul wrote:
I'm building a new version of an often used data entry form on our
site Waarneming.nl (int'l version Observado.org).
It struck me that I often have to write something like this:
if (cond) $(this).show() else $(this).hide();
Since jQuery is about reducing and chaining, wouldn't it be nice if I
could write it like this:
$(this).toggle(cond); // shows if cond evaluates to true, else hides
Of course a new function showhide could be made for this, but toggle
seems a likely candidate for overloading.
Hey Dylan,
Of course, you could write it this way, too:
$(this)[cond ? 'show' : 'hide']();
But I grant you that it's still not as elegant as an overloaded
method. Not sure if toggle(cond) is the best choice, though. It's
already pretty overloaded as it is, and it can already take a string
or numeric argument for speed (e.g. 'slow'), which means you'd have to
make sure that cond === true, not just cond == true.
Maybe a simple plugin would be more appropriate here. Something like
this ...
(function($) {
$.fn.toggleIf = function(cond) {
return this.each(function() {
$(this)[cond ? 'show' : 'hide']();
});
};
})(jQuery);
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: show/hide/toggle: suggestion to reduce show/hide code
On Tue, Nov 18, 2008 at 14:56, Karl Swedberg [EMAIL PROTECTED] wrote: It struck me that I often have to write something like this: if (cond) $(this).show() else $(this).hide(); Since jQuery is about reducing and chaining, wouldn't it be nice if I could write it like this: $(this).toggle(cond); // shows if cond evaluates to true, else hides Of course a new function showhide could be made for this, but toggle seems a likely candidate for overloading. Not sure if toggle(cond) is the best choice, though. It's already pretty overloaded as it is, and it can already take a string or numeric argument for speed (e.g. 'slow'), which means you'd have to make sure that cond === true, not just cond == true. Hmm, I actually checked the docs for that because that would make .toggle an unsuitable overloader. The docs said toggle doesn't take arguments: http://docs.jquery.com/Effects Outdated? Maybe a simple plugin would be more appropriate here. Something like this That would be no problem at all of course.
[jQuery] Re: show/hide/toggle: suggestion to reduce show/hide code
How about something like (although i admit the function name could
use some thinking, heh)
(function($) {
$.fn.showorhide = function(bool) {
if (bool) {
$(this).show();
}
else {
$(this).hide();
}
return this;
};
})(jQuery);
On Nov 18, 9:02 am, Dylan Verheul [EMAIL PROTECTED] wrote:
On Tue, Nov 18, 2008 at 14:56, Karl Swedberg [EMAIL PROTECTED] wrote:
It struck me that I often have to write something like this:
if (cond) $(this).show() else $(this).hide();
Since jQuery is about reducing and chaining, wouldn't it be nice if I
could write it like this:
$(this).toggle(cond); // shows if cond evaluates to true, else hides
Of course a new function showhide could be made for this, but toggle
seems a likely candidate for overloading.
Not sure if toggle(cond) is the best choice, though. It's already pretty
overloaded as it is, and it can already take a string or numeric argument
for speed (e.g. 'slow'), which means you'd have to make sure that cond ===
true, not just cond == true.
Hmm, I actually checked the docs for that because that would make
.toggle an unsuitable overloader. The docs said toggle doesn't take
arguments:http://docs.jquery.com/Effects
Outdated?
Maybe a simple plugin would be more appropriate here. Something like this
That would be no problem at all of course.
[jQuery] Re: show/hide/toggle: suggestion to reduce show/hide code
On Nov 18, 2008, at 9:02 AM, Dylan Verheul wrote: On Tue, Nov 18, 2008 at 14:56, Karl Swedberg [EMAIL PROTECTED] wrote: Not sure if toggle(cond) is the best choice, though. It's already pretty overloaded as it is, and it can already take a string or numeric argument for speed (e.g. 'slow'), which means you'd have to make sure that cond === true, not just cond == true. Hmm, I actually checked the docs for that because that would make .toggle an unsuitable overloader. The docs said toggle doesn't take arguments: http://docs.jquery.com/Effects Outdated? Hmmm, indeed. :) Not so much outdated as incomplete. I just went ahead and added it to the docs: http://docs.jquery.com/Effects/toggle#speedcallback --Karl Karl Swedberg www.englishrules.com www.learningjquery.com
[jQuery] Re: show/hide/toggle: suggestion to reduce show/hide code
On Tue, Nov 18, 2008 at 19:58, Karl Swedberg [EMAIL PROTECTED] wrote: On Nov 18, 2008, at 9:02 AM, Dylan Verheul wrote: Hmm, I actually checked the docs for that because that would make .toggle an unsuitable overloader. The docs said toggle doesn't take arguments: Hmmm, indeed. :) Not so much outdated as incomplete. I just went ahead and added it to the docs: http://docs.jquery.com/Effects/toggle#speedcallback Good :-) Anyway, that means no simple overloading method is available. Of course it's no problem to code it or even to write a plugin, but I thought overloading an existing function would make for an interesting and probably often-used functionality, which was the point of starting this thread.
[jQuery] Re: Show/Hide. Could someone, please, help me with this?
Should be pretty simple Miguel.
The first thing I would do is add an ID to each legend and/or image
you want to trigger the show so you can tell which one has been
clicked and add a common class to all the legends and images.
Then put the id as a class of the fieldset you would like to show/
hide.
Finally, I'd use the .toggle function of jquery, so like this
[code]
$('.CLASSNAME').clicke(function(){
var whichOne = $(this).attr('id');
$('.'+whichOne).toggle();
});
[/code]
that should do it.
On Nov 4, 10:47 am, shapper [EMAIL PROTECTED] wrote:
Hello,
I have a form as following:
form id=MyForm
fieldset
legendPersonal Data/legend
/fieldset
fieldset
legendOptions/legend
/fieldset
/form
I would like to hide/show each fieldset when its legend is clicked ...
... or even better, adding a small icon on legend or somewhere in
fieldset to toogle visibility.
How can I do this with JQuery?
Thanks,
Miguel
[jQuery] Re: Show/Hide items in unordered list
This help to get the idea of what could be done? http://paste.pocoo.org/show/86584/ On Sep 30, 1:19 am, Wayne Dyck [EMAIL PROTECTED] wrote: I have a unordered list of, say, ten items. I want to initially show five items and provide the user with a plus and minus key to either increase or decrease the number of viewable items. This is commonly done in expandable content boxes and can be seen on sites such ashttp://www.bbc.co.uk I am sure there is an easy way to do this in jQuery, however, I am probably over thinking it. I can dynamically show / hide the entire list, however, not the individual li items. Does anyone have any sample code or an example they have seen that they could point me towards? Thanks in advance. Wayne
[jQuery] Re: Show/Hide items in unordered list
MorningZ, thank you very much! That is perfect and will do nicely to get me started in the right direction. I wasn't sure if I needed to assign unique ids to the individual li items or not and your example shows me I can do it without them. Very cool. Thanks, again. Wayne On Sep 30, 6:03 am, MorningZ [EMAIL PROTECTED] wrote: This help to get the idea of what could be done? http://paste.pocoo.org/show/86584/ On Sep 30, 1:19 am, Wayne Dyck [EMAIL PROTECTED] wrote: I have a unordered list of, say, ten items. I want to initially show five items and provide the user with a plus and minus key to either increase or decrease the number of viewable items. This is commonly done in expandable content boxes and can be seen on sites such ashttp://www.bbc.co.uk I am sure there is an easy way to do this in jQuery, however, I am probably over thinking it. I can dynamically show / hide the entire list, however, not the individual li items. Does anyone have any sample code or an example they have seen that they could point me towards? Thanks in advance. Wayne
[jQuery] Re: show hide selected on page load (beginner)
I am so proud of me:
$('#schuppen-wrapper,#kirche-wrapper,#openair-wrapper,#andererort-
wrapper').hide();
var showit = $(#form1 #ort_id option:selected).attr(value);
switch(showit)
{
case 1:
$('#schuppen-wrapper').show();
break;
case 2:
$('#kirche-wrapper').show();
break;
case 3:
$('#openair-wrapper').show();
break;
case 4:
$('#andererort-wrapper').show();
break;
}
$('#form1 #ort_id option').click(
function () {
var wrapper = $(this).attr('value');
$('#schuppen-wrapper,#kirche-wrapper,#openair-wrapper,#andererort-
wrapper').hide();
switch(wrapper)
{
case 1:
$('#schuppen-wrapper').show();
break;
case 2:
$('#kirche-wrapper').show();
break;
case 3:
$('#openair-wrapper').show();
break;
case 4:
$('#andererort-wrapper').show();
break;
}
return false;
});
but can be reduced, right?
thx
tlz
On Sep 10, 10:27 pm, tlob [EMAIL PROTECTED] wrote:
the following works pretty well on click:
$('#form1 #ort_id option').click(
function () {
var wrapper = $(this).attr('value');
$('#schuppen-wrapper,#kirche-wrapper,#openair-wrapper,#andererort-
wrapper').hide();
switch(wrapper){
case 1: $('#schuppen-wrapper').show(); break;
case 2: $('#kirche-wrapper').show(); break;
case 3: $('#openair-wrapper').show(); break;
case 4: $('#andererort-wrapper').show(); break;
}
return false;
});
but when the page loads the option value=1-4 selected=selected
should be shown. how can I show the right div, when the page loads?
thank
tom
[jQuery] Re: Show/Hide divs beginning with a specified string
I would use the [attribute^=value] selector. Then use substring to
get the EngineerShortName.
$(div[id^='showhide_']).click(function(){
if(this.idthis.id.length0){
var engName=this.id.substring('showhide_'.length);
$(div#block_+engName+ div).toggle();
}
});
On Jun 24, 10:35 am, Adam [EMAIL PROTECTED] wrote:
Hi,
I have a system where data is placed in a div, using AjaxSubmit to a
php page, in the below format.
{Employee Name1} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
{Employee Name2} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
As more employees are added I would like to be able to collapse the
job information for employees I click on using css.
i.e.
{Employee Name1}[-] {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
{Employee Name2}[+]
etc where [-] is a button to hide employee1's jobs and [+] is a button
to show employee2's jobs.
I could do this by putting different inline javascript functions into
the formatted data that is returned from the php page, however I would
prefer to use jQuery and put everything in the HEAD of the container
page.
The current template for the above data is:
div class=diary_engineer_week
div class=diary_engineer_name{EngineerName}img
id=showhide_{EngineerShortName} src=images/Apr08Design/
plus_button_new.png alt=Show or Hide /br/{NumberJobs} Job(s)/
div
div id=block_{EngineerShortName}
div class=diary_day1div class=diary_header{day1}/
div{job1}/div
div class=diary_day2div class=diary_header{day2}/
div{job2}/div
div class=diary_day1div class=diary_header{day3}/
div{job3}/div
div class=diary_day2div class=diary_header{day4}/
div{job4}/div
div class=diary_day1div class=diary_header{day5}/
div{job5}/div
div
/div
I want to create some jQuery code which when any show/hide button with
an id beginning with showhide is clicked, the corresponding div with
id=block_{EngineerShortName} is shown or hidden using css.
The trouble is how do I select something in jQuery where the id begins
with something?
Also, how do I then hide the corresponding div?
Would this be possible using a parent-child relationship if I used
div id=block_{EngineerShortName} as a child of a engineer_week
div?
Thank you for any help,
Adam Sykes
[jQuery] Re: Show/Hide divs beginning with a specified string
Since you're already using css to show/hide, then why not apply a class
to the shown/hidden rows, and select on that instead?
Thus, for hidden rows apply the class hide_row, which will include the
css required to hide the row, and apply show_row on those rows you
want displayed.
~ ~ Dave
Adam wrote:
Hi,
I have a system where data is placed in a div, using AjaxSubmit to a
php page, in the below format.
{Employee Name1} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
{Employee Name2} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
As more employees are added I would like to be able to collapse the
job information for employees I click on using css.
i.e.
{Employee Name1}[-] {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
{Employee Name2}[+]
etc where [-] is a button to hide employee1's jobs and [+] is a button
to show employee2's jobs.
I could do this by putting different inline javascript functions into
the formatted data that is returned from the php page, however I would
prefer to use jQuery and put everything in the HEAD of the container
page.
The current template for the above data is:
div class=diary_engineer_week
div class=diary_engineer_name{EngineerName}img
id=showhide_{EngineerShortName} src=images/Apr08Design/
plus_button_new.png alt=Show or Hide /br/{NumberJobs} Job(s)/
div
div id=block_{EngineerShortName}
div class=diary_day1div class=diary_header{day1}/
div{job1}/div
div class=diary_day2div class=diary_header{day2}/
div{job2}/div
div class=diary_day1div class=diary_header{day3}/
div{job3}/div
div class=diary_day2div class=diary_header{day4}/
div{job4}/div
div class=diary_day1div class=diary_header{day5}/
div{job5}/div
div
/div
I want to create some jQuery code which when any show/hide button with
an id beginning with showhide is clicked, the corresponding div with
id=block_{EngineerShortName} is shown or hidden using css.
The trouble is how do I select something in jQuery where the id begins
with something?
Also, how do I then hide the corresponding div?
Would this be possible using a parent-child relationship if I used
div id=block_{EngineerShortName} as a child of a engineer_week
div?
Thank you for any help,
Adam Sykes
[jQuery] Re: Show/Hide divs beginning with a specified string
The solution by WoolyNinja works great, with a change of the line:
$(div[id^='showhide_']).click(function(){
to:
$(img[id^='showhide_']).click(function(){
as it is the image that I wanted to capture the click event for.
It could not be done by show/hide classes in a simple way as there
will be more than 2 employees listed.
The problem would still be how to select the particular row related to
the button, selecting by classes would end up hiding multiple rows in
one go, which is not what is required.
Anyway, I have a solution that works well now.
Thank you for your help.
Adam
On Jun 24, 11:46 pm, DaveG [EMAIL PROTECTED] wrote:
Since you're already using css to show/hide, then why not apply a class
to the shown/hidden rows, and select on that instead?
Thus, for hidden rows apply the class hide_row, which will include the
css required to hide the row, and apply show_row on those rows you
want displayed.
~ ~ Dave
Adam wrote:
Hi,
I have a system where data is placed in a div, using AjaxSubmit to a
php page, in the below format.
{Employee Name1} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
{Employee Name2} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
As more employees are added I would like to be able to collapse the
job information for employees I click on using css.
i.e.
{Employee Name1}[-] {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
{Employee Name2}[+]
etc where [-] is a button to hide employee1's jobs and [+] is a button
to show employee2's jobs.
I could do this by putting different inline javascript functions into
the formatted data that is returned from the php page, however I would
prefer to use jQuery and put everything in the HEAD of the container
page.
The current template for the above data is:
div class=diary_engineer_week
div class=diary_engineer_name{EngineerName}img
id=showhide_{EngineerShortName} src=images/Apr08Design/
plus_button_new.png alt=Show or Hide /br/{NumberJobs} Job(s)/
div
div id=block_{EngineerShortName}
div class=diary_day1div class=diary_header{day1}/
div{job1}/div
div class=diary_day2div class=diary_header{day2}/
div{job2}/div
div class=diary_day1div class=diary_header{day3}/
div{job3}/div
div class=diary_day2div class=diary_header{day4}/
div{job4}/div
div class=diary_day1div class=diary_header{day5}/
div{job5}/div
div
/div
I want to create some jQuery code which when any show/hide button with
an id beginning with showhide is clicked, the corresponding div with
id=block_{EngineerShortName} is shown or hidden using css.
The trouble is how do I select something in jQuery where the id begins
with something?
Also, how do I then hide the corresponding div?
Would this be possible using a parent-child relationship if I used
div id=block_{EngineerShortName} as a child of a engineer_week
div?
Thank you for any help,
Adam Sykes- Hide quoted text -
- Show quoted text -
[jQuery] Re: Show/hide toggle hides form too...bah!
Ok.
Couple of things.
I put a 'return false;' at the end of the click handler (sorry - tends
to be a reflex action!) when it doesn't actually need it. Either shift
it up to be within the 'if...' statement block, or remove it
altogether. It prevents focussing on the input element and activating
the link. eg.
$('div#homepage_boxes div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
return false;
}
});
Secondly, you don't have a 'submit' input type : I'm not that clued up
on validator, but I can see that you set a submit handler (to
alert(...)) but without a 'submit' type to attach it to, or a
specified replacement, I can't see what will handle clicking on the Go
apart from the div.col handler.
Basically I can only see one click handler - the div.col one - for
handling *any* click on *any* element within div.col, so if you want
to catch the form submission you probably need to add some other
handler somewhere.
On May 24, 2:17 am, Ridge [EMAIL PROTECTED] wrote:
Oooh SO close Wizzud! Followed your instructions carefully, and set
the height of the form equal to the height of div.col.
The forms now toggle correctly, stay on when the user is inputting
their zip, BUT (taking For Your Home, for example) doesn't submit when
the Go button is clicked. It also doesn't produce a form validation
error message when nothing is clicked. But weirdly, if you enter less
than 5 digits and hit Go, it DOES error check. Also, the Get access
to your account link below doesn't work. Any ideas?
Nearly there, and thank you so much to all of you for your help!
On May 23, 7:00 pm, Wizzud [EMAIL PROTECTED] wrote:
$('div#homepage_boxes div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
}
return false;
});
And you should ensure that your form covers div.col entirely.
On May 23, 5:29 pm, Ridge [EMAIL PROTECTED] wrote:
Karl, thanks.
I modifed your line slightly to give it the same specificity as the
preceding declaration (it wasn't working at all when it was just
'form'), and now the form isn't appearing at all on click!
Here's the whole section:
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if (!$tgt.is('div#homepage_boxes form')) { //don't toggle
when
clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
I may be getting my selectors confused. Oh, honestly I don't know what
I'm doing wrong at this point...!
On May 23, 10:24 am, Karl Swedberg [EMAIL PROTECTED] wrote:
This line:
if ($tgt.not('form')) { //don't toggle when clicking the form!
should be :
if (!$tgt.is('form')) { //don't toggle when clicking the form!
The first always returns the jQuery object, so it's always truthy.
The second returns a boolean. Will be true if the target element is
not a form.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On May 23, 2008, at 10:27 AM, Ridge wrote:
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus [EMAIL PROTECTED] wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache.
When
you click anywhere in the For your home box, the content appears.
There's a form in that div. However, when you try to focus in that
div by clicking, the form hides.
So, what I'd like to know is how to show the div contents by
clicking
[jQuery] Re: Show/hide toggle hides form too...bah!
Wizzud,
Everything seems to work fine! Your fix did the trick, and the form
(the Home one at least - I haven't set the rest up as yet) submits
perfectly.
Thanks so much!
On May 24, 5:32 am, Wizzud [EMAIL PROTECTED] wrote:
Ok.
Couple of things.
I put a 'return false;' at the end of the click handler (sorry - tends
to be a reflex action!) when it doesn't actually need it. Either shift
it up to be within the 'if...' statement block, or remove it
altogether. It prevents focussing on the input element and activating
the link. eg.
$('div#homepage_boxes div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
return false;
}
});
Secondly, you don't have a 'submit' input type : I'm not that clued up
on validator, but I can see that you set a submit handler (to
alert(...)) but without a 'submit' type to attach it to, or a
specified replacement, I can't see what will handle clicking on the Go
apart from the div.col handler.
Basically I can only see one click handler - the div.col one - for
handling *any* click on *any* element within div.col, so if you want
to catch the form submission you probably need to add some other
handler somewhere.
On May 24, 2:17 am, Ridge [EMAIL PROTECTED] wrote:
Oooh SO close Wizzud! Followed your instructions carefully, and set
the height of the form equal to the height of div.col.
The forms now toggle correctly, stay on when the user is inputting
their zip, BUT (taking For Your Home, for example) doesn't submit when
the Go button is clicked. It also doesn't produce a form validation
error message when nothing is clicked. But weirdly, if you enter less
than 5 digits and hit Go, it DOES error check. Also, the Get access
to your account link below doesn't work. Any ideas?
Nearly there, and thank you so much to all of you for your help!
On May 23, 7:00 pm, Wizzud [EMAIL PROTECTED] wrote:
$('div#homepage_boxes div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
}
return false;
});
And you should ensure that your form covers div.col entirely.
On May 23, 5:29 pm, Ridge [EMAIL PROTECTED] wrote:
Karl, thanks.
I modifed your line slightly to give it the same specificity as the
preceding declaration (it wasn't working at all when it was just
'form'), and now the form isn't appearing at all on click!
Here's the whole section:
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if (!$tgt.is('div#homepage_boxes form')) { //don't
toggle when
clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
I may be getting my selectors confused. Oh, honestly I don't know what
I'm doing wrong at this point...!
On May 23, 10:24 am, Karl Swedberg [EMAIL PROTECTED] wrote:
This line:
if ($tgt.not('form')) { //don't toggle when clicking the
form!
should be :
if (!$tgt.is('form')) { //don't toggle when clicking the form!
The first always returns the jQuery object, so it's always truthy.
The second returns a boolean. Will be true if the target element is
not a form.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On May 23, 2008, at 10:27 AM, Ridge wrote:
Hm. Replaced my code with yours, and it's still toggling the form
when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus [EMAIL PROTECTED] wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the
form!
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation,
and
show/hide.
By themselves, everything is working great! But it's the
[jQuery] Re: Show/hide toggle hides form too...bah!
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus [EMAIL PROTECTED] wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache. When
you click anywhere in the For your home box, the content appears.
There's a form in that div. However, when you try to focus in that
div by clicking, the form hides.
So, what I'd like to know is how to show the div contents by
clicking anywhere in the div, but only hide it by clicking on the
header (which I've temporarily given a background color of green to
make it stand out).
For reference, here's the contents of my $(document).ready section
which is linked from the page above. Thanks!:
$(document).ready(function(){
// Add class to shift background images on load
$('#box_home').addClass('pageload');
$('#box_business').addClass('pageload');
$('#box_account').addClass('pageload');
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function() {
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end()
//.next('form').slideToggle('fast')
//.siblings('form:visible').slideUp('fast');
});
// Add homepage box hover effect for IE6
$('div#homepage_boxes .col').hover(function() {
$(this).addClass('ie6boxhover');
}, function() {
$(this).removeClass('ie6boxhover');
});
// Form validation
$.validator.setDefaults({
submitHandler: function() { alert(submitted!); }
});
$(#homeform).validate({
rules: {
txtZipcode: {
required: true,
minlength: 5
}
},
messages: {
txtZipcode: {
required: To continue processing your request, we need a
5-digit zip code. Please re-type the zip code of your service
address.,
minlength: Your zip code must be 5-digits long. Please re-
type the zip code of your service address.
}
}
});
});
[jQuery] Re: Show/hide toggle hides form too...bah!
This line:
if ($tgt.not('form')) { //don't toggle when clicking the form!
should be :
if (!$tgt.is('form')) { //don't toggle when clicking the form!
The first always returns the jQuery object, so it's always truthy.
The second returns a boolean. Will be true if the target element is
not a form.
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On May 23, 2008, at 10:27 AM, Ridge wrote:
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus [EMAIL PROTECTED] wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache.
When
you click anywhere in the For your home box, the content appears.
There's a form in that div. However, when you try to focus in that
div by clicking, the form hides.
So, what I'd like to know is how to show the div contents by
clicking anywhere in the div, but only hide it by clicking on the
header (which I've temporarily given a background color of green to
make it stand out).
For reference, here's the contents of my $(document).ready section
which is linked from the page above. Thanks!:
$(document).ready(function(){
// Add class to shift background images on load
$('#box_home').addClass('pageload');
$('#box_business').addClass('pageload');
$('#box_account').addClass('pageload');
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function() {
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end()
//.next('form').slideToggle('fast')
//.siblings('form:visible').slideUp('fast');
});
// Add homepage box hover effect for IE6
$('div#homepage_boxes .col').hover(function() {
$(this).addClass('ie6boxhover');
}, function() {
$(this).removeClass('ie6boxhover');
});
// Form validation
$.validator.setDefaults({
submitHandler: function() { alert(submitted!); }
});
$(#homeform).validate({
rules: {
txtZipcode: {
required: true,
minlength: 5
}
},
messages: {
txtZipcode: {
required: To continue processing your request, we need a
5-digit zip code. Please re-type the zip code of your service
address.,
minlength: Your zip code must be 5-digits long. Please
re-
type the zip code of your service address.
}
}
});
});
[jQuery] Re: Show/hide toggle hides form too...bah!
Karl, thanks.
I modifed your line slightly to give it the same specificity as the
preceding declaration (it wasn't working at all when it was just
'form'), and now the form isn't appearing at all on click!
Here's the whole section:
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if (!$tgt.is('div#homepage_boxes form')) { //don't toggle when
clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
I may be getting my selectors confused. Oh, honestly I don't know what
I'm doing wrong at this point...!
On May 23, 10:24 am, Karl Swedberg [EMAIL PROTECTED] wrote:
This line:
if ($tgt.not('form')) { //don't toggle when clicking the form!
should be :
if (!$tgt.is('form')) { //don't toggle when clicking the form!
The first always returns the jQuery object, so it's always truthy.
The second returns a boolean. Will be true if the target element is
not a form.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On May 23, 2008, at 10:27 AM, Ridge wrote:
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus [EMAIL PROTECTED] wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache.
When
you click anywhere in the For your home box, the content appears.
There's a form in that div. However, when you try to focus in that
div by clicking, the form hides.
So, what I'd like to know is how to show the div contents by
clicking anywhere in the div, but only hide it by clicking on the
header (which I've temporarily given a background color of green to
make it stand out).
For reference, here's the contents of my $(document).ready section
which is linked from the page above. Thanks!:
$(document).ready(function(){
// Add class to shift background images on load
$('#box_home').addClass('pageload');
$('#box_business').addClass('pageload');
$('#box_account').addClass('pageload');
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function() {
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end()
//.next('form').slideToggle('fast')
//.siblings('form:visible').slideUp('fast');
});
// Add homepage box hover effect for IE6
$('div#homepage_boxes .col').hover(function() {
$(this).addClass('ie6boxhover');
}, function() {
$(this).removeClass('ie6boxhover');
});
// Form validation
$.validator.setDefaults({
submitHandler: function() { alert(submitted!); }
});
$(#homeform).validate({
rules: {
txtZipcode: {
required: true,
minlength: 5
}
},
messages: {
txtZipcode: {
required: To continue processing your request, we need a
5-digit zip code. Please re-type the zip code of your service
address.,
minlength: Your zip code must be 5-digits long. Please
re-
type the zip code of your service address.
}
}
});
});
[jQuery] Re: Show/hide toggle hides form too...bah!
$('div#homepage_boxes div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
}
return false;
});
And you should ensure that your form covers div.col entirely.
On May 23, 5:29 pm, Ridge [EMAIL PROTECTED] wrote:
Karl, thanks.
I modifed your line slightly to give it the same specificity as the
preceding declaration (it wasn't working at all when it was just
'form'), and now the form isn't appearing at all on click!
Here's the whole section:
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if (!$tgt.is('div#homepage_boxes form')) { //don't toggle when
clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
I may be getting my selectors confused. Oh, honestly I don't know what
I'm doing wrong at this point...!
On May 23, 10:24 am, Karl Swedberg [EMAIL PROTECTED] wrote:
This line:
if ($tgt.not('form')) { //don't toggle when clicking the form!
should be :
if (!$tgt.is('form')) { //don't toggle when clicking the form!
The first always returns the jQuery object, so it's always truthy.
The second returns a boolean. Will be true if the target element is
not a form.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On May 23, 2008, at 10:27 AM, Ridge wrote:
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus [EMAIL PROTECTED] wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache.
When
you click anywhere in the For your home box, the content appears.
There's a form in that div. However, when you try to focus in that
div by clicking, the form hides.
So, what I'd like to know is how to show the div contents by
clicking anywhere in the div, but only hide it by clicking on the
header (which I've temporarily given a background color of green to
make it stand out).
For reference, here's the contents of my $(document).ready section
which is linked from the page above. Thanks!:
$(document).ready(function(){
// Add class to shift background images on load
$('#box_home').addClass('pageload');
$('#box_business').addClass('pageload');
$('#box_account').addClass('pageload');
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function() {
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end()
//.next('form').slideToggle('fast')
//.siblings('form:visible').slideUp('fast');
});
// Add homepage box hover effect for IE6
$('div#homepage_boxes .col').hover(function() {
$(this).addClass('ie6boxhover');
}, function() {
$(this).removeClass('ie6boxhover');
});
// Form validation
$.validator.setDefaults({
submitHandler: function() { alert(submitted!); }
});
$(#homeform).validate({
rules: {
txtZipcode: {
required: true,
minlength: 5
}
},
messages: {
txtZipcode: {
required: To continue processing your request, we need a
5-digit zip code. Please re-type the zip code of your service
address.,
minlength: Your zip code must be 5-digits long. Please
re-
type the zip code of your service address.
}
}
});
});
[jQuery] Re: Show/hide toggle hides form too...bah!
Oooh SO close Wizzud! Followed your instructions carefully, and set
the height of the form equal to the height of div.col.
The forms now toggle correctly, stay on when the user is inputting
their zip, BUT (taking For Your Home, for example) doesn't submit when
the Go button is clicked. It also doesn't produce a form validation
error message when nothing is clicked. But weirdly, if you enter less
than 5 digits and hit Go, it DOES error check. Also, the Get access
to your account link below doesn't work. Any ideas?
Nearly there, and thank you so much to all of you for your help!
On May 23, 7:00 pm, Wizzud [EMAIL PROTECTED] wrote:
$('div#homepage_boxes div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
}
return false;
});
And you should ensure that your form covers div.col entirely.
On May 23, 5:29 pm, Ridge [EMAIL PROTECTED] wrote:
Karl, thanks.
I modifed your line slightly to give it the same specificity as the
preceding declaration (it wasn't working at all when it was just
'form'), and now the form isn't appearing at all on click!
Here's the whole section:
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if (!$tgt.is('div#homepage_boxes form')) { //don't toggle
when
clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
I may be getting my selectors confused. Oh, honestly I don't know what
I'm doing wrong at this point...!
On May 23, 10:24 am, Karl Swedberg [EMAIL PROTECTED] wrote:
This line:
if ($tgt.not('form')) { //don't toggle when clicking the form!
should be :
if (!$tgt.is('form')) { //don't toggle when clicking the form!
The first always returns the jQuery object, so it's always truthy.
The second returns a boolean. Will be true if the target element is
not a form.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On May 23, 2008, at 10:27 AM, Ridge wrote:
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus [EMAIL PROTECTED] wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache.
When
you click anywhere in the For your home box, the content appears.
There's a form in that div. However, when you try to focus in that
div by clicking, the form hides.
So, what I'd like to know is how to show the div contents by
clicking anywhere in the div, but only hide it by clicking on the
header (which I've temporarily given a background color of green to
make it stand out).
For reference, here's the contents of my $(document).ready section
which is linked from the page above. Thanks!:
$(document).ready(function(){
// Add class to shift background images on load
$('#box_home').addClass('pageload');
$('#box_business').addClass('pageload');
$('#box_account').addClass('pageload');
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function() {
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end()
//.next('form').slideToggle('fast')
//.siblings('form:visible').slideUp('fast');
});
// Add homepage box hover effect for IE6
$('div#homepage_boxes .col').hover(function() {
$(this).addClass('ie6boxhover');
}, function() {
$(this).removeClass('ie6boxhover');
});
// Form validation
$.validator.setDefaults({
submitHandler: function() { alert(submitted!); }
});
$(#homeform).validate({
rules: {
[jQuery] Re: Show/hide toggle hides form too...bah!
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
See http://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache. When
you click anywhere in the For your home box, the content appears.
There's a form in that div. However, when you try to focus in that
div by clicking, the form hides.
So, what I'd like to know is how to show the div contents by
clicking anywhere in the div, but only hide it by clicking on the
header (which I've temporarily given a background color of green to
make it stand out).
For reference, here's the contents of my $(document).ready section
which is linked from the page above. Thanks!:
$(document).ready(function(){
// Add class to shift background images on load
$('#box_home').addClass('pageload');
$('#box_business').addClass('pageload');
$('#box_account').addClass('pageload');
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function() {
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end()
//.next('form').slideToggle('fast')
//.siblings('form:visible').slideUp('fast');
});
// Add homepage box hover effect for IE6
$('div#homepage_boxes .col').hover(function() {
$(this).addClass('ie6boxhover');
}, function() {
$(this).removeClass('ie6boxhover');
});
// Form validation
$.validator.setDefaults({
submitHandler: function() { alert(submitted!); }
});
$(#homeform).validate({
rules: {
txtZipcode: {
required: true,
minlength: 5
}
},
messages: {
txtZipcode: {
required: To continue processing your request, we need a
5-digit zip code. Please re-type the zip code of your service
address.,
minlength: Your zip code must be 5-digits long. Please re-
type the zip code of your service address.
}
}
});
});
[jQuery] Re: show/hide nested divs?
Thanks Shawn,
still not working though, i presume because .boxcontent is not a
sibling of .closeimage_left but is a sibling of .box
so would i need to find the parent div of .closeimage_left then toggle
that sibling .boxcontent?
If so, any idea how I would do it?
On Apr 24, 2:07 am, Shawn [EMAIL PROTECTED] wrote:
oops.. that should probably be a .toggle() instead of a .hide()
Shawn
Shawn wrote:
$(.closeimage_left).click( function () {
$(this).siblings(.boxcontent).hide();
});
That *should* do the trick.
Shawn
thekman wrote:
Hi all,
I have code something like:
div id=box_1 class=box
div id=close_1_a class=closeimage_left/div
div id=title_1 class=boxtitleBox Title/div
div id=close_1_b class=closeimage_rightBox Title/div
div id=content_1 class=boxcontentbox content.../div
/div
div id=box_2 class=box
div id=close_2_a class=closeimage_left/div
div id=title_2 class=boxtitleBox Title/div
div id=close_2_b class=closeimage_rightBox Title/div
div id=content_2 class=boxcontentbox content.../div
/div
All numbers are dynamically generated from the database.
What is the best way to use jquery to close the correct content div?
I am presuming I would use something like below, but what do I put in
the click function?
$(.closeimage_left).click(function() {
});
[jQuery] Re: show/hide nested divs?
Thanks Shawn,
however it is still not working for me, I presume because .boxcontent
is not a sibling of .closeimage_left but is a sibling of div
id=box_1 class=box
So, should I have to find the parent div then find the
sibling .boxcontent?
any idea how i would do this?
On Apr 24, 2:07 am, Shawn [EMAIL PROTECTED] wrote:
oops.. that should probably be a .toggle() instead of a .hide()
Shawn
Shawn wrote:
$(.closeimage_left).click( function () {
$(this).siblings(.boxcontent).hide();
});
That *should* do the trick.
Shawn
thekman wrote:
Hi all,
I have code something like:
div id=box_1 class=box
div id=close_1_a class=closeimage_left/div
div id=title_1 class=boxtitleBox Title/div
div id=close_1_b class=closeimage_rightBox Title/div
div id=content_1 class=boxcontentbox content.../div
/div
div id=box_2 class=box
div id=close_2_a class=closeimage_left/div
div id=title_2 class=boxtitleBox Title/div
div id=close_2_b class=closeimage_rightBox Title/div
div id=content_2 class=boxcontentbox content.../div
/div
All numbers are dynamically generated from the database.
What is the best way to use jquery to close the correct content div?
I am presuming I would use something like below, but what do I put in
the click function?
$(.closeimage_left).click(function() {
});
[jQuery] Re: show/hide nested divs?
oops.. that should probably be a .toggle() instead of a .hide()
Shawn
Shawn wrote:
$(.closeimage_left).click( function () {
$(this).siblings(.boxcontent).hide();
});
That *should* do the trick.
Shawn
thekman wrote:
Hi all,
I have code something like:
div id=box_1 class=box
div id=close_1_a class=closeimage_left/div
div id=title_1 class=boxtitleBox Title/div
div id=close_1_b class=closeimage_rightBox Title/div
div id=content_1 class=boxcontentbox content.../div
/div
div id=box_2 class=box
div id=close_2_a class=closeimage_left/div
div id=title_2 class=boxtitleBox Title/div
div id=close_2_b class=closeimage_rightBox Title/div
div id=content_2 class=boxcontentbox content.../div
/div
All numbers are dynamically generated from the database.
What is the best way to use jquery to close the correct content div?
I am presuming I would use something like below, but what do I put in
the click function?
$(.closeimage_left).click(function() {
});
[jQuery] Re: Show/Hide Div with checkbox options providing same results
Using the html as in Glen's mock-up ...
var chks = $('input:checkbox').click(function(){
$('#'+this.className)
[chks.filter('.'+this.className).map(function(){
return this.checked ? this : null;
}).length ? 'show' : 'hide']();
});
On Dec 11, 8:22 pm, Ryan [EMAIL PROTECTED] wrote:
Thanks for trying Glen, I really appreciate it. I'm still having the
same difficulty with your solution as with mine. The problem isn't
when selecting Input 1 or Input 2, the problem comes when deselecting
just one of those. I'm looking to have div1 continue to appear when
just one them are deselected, because the equation will still hold
true.
Ryan
On Dec 6, 10:51 pm, Glen Lipka [EMAIL PROTECTED] wrote:
Ok, I updated it. I made it Very jQuery.
$(input[type=checkbox]).click(function(){
divClass = $(this).attr(class);
if ($(this).is(:checked)) {
$(# + divClass).show();
}
else if($(this).not(:checked)) {
$(# + divClass).hide();
}
});
I refactored it three times. I kept thinking, hmm, I think this should be
shorter.
I think there is probably a way to make it even shorter with Toggle.
Anyone?
Glen
On Dec 6, 2007 8:22 PM, Glen Lipka [EMAIL PROTECTED] wrote:
Ahh, I think I get it.
Input 1 and 2 both are controlling the first div.
Input 3 controls div 2
input 4 controls div 3
input 5 controls div 4
Yes? I can modify the demo.
Glen
On Dec 6, 2007 2:46 PM, Ryan [EMAIL PROTECTED] wrote:
This part works:
Select X, get Div 1
or
Select Y, get Div 1
or
Select X and Y, get Div1
This part doesn't:
When X and Y are selected, Div1 is showing
If X is unselected and Y remains selected, Div1 is still showing
Basically, if X and Y are selected and then X is unselected, I want
Div1 to remain showing because Select Y, get Div1 still holds true.
This is where I'm having a problem. When X is unselected, it hides
Div1. Make sense?
On Dec 6, 3:37 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I dont get it. :)
Say it again as a use case:
1. click on X
2. expect results: div Y does something.
Glen
On Dec 6, 2007 11:22 AM, Ryan [EMAIL PROTECTED] wrote:
Actually, what I need it to do is show one instance of Div 4, not
two. I'm using the div for a text field, so I only need to show one
version of it. The checkboxes showing the div are independent of
each
other in value, but have the same corresponding text field which
should be filled out if either or both of these checkboxes are
selected. Does that make sense?
On Dec 6, 12:36 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I whipped a demo. Does this do what you
want?http://www.commadot.com/jquery/checkBoxShow.php
Couple of tips:
1. Try to avoid putting onclick handlers in your html. jQuery
does
this really easily and makes your html easier to read.
2. getElementByID can be expressed as
$(#yourID).dosomething...
Much more concise and jQuery-ish. :)
3. The toggle function will automatically show if hidden and
hide if
shown without the IF shatement.
Hope these help. When I first started jQuery, I had to forget
everything I
knew about JS (which wasn't much). It just did it all without the
muss.
Glen
On Dec 6, 2007 8:30 AM, Ryan [EMAIL PROTECTED] wrote:
I'm completely versed in the show/hide options available, but
have a
problem I haven't been able to figure out. I'm hoping jquery
will have
the answer. I have 5 checkbox input options, the first two
options
providing the same show div. For example,
html
head
script type=text/javascript
!--
function showMe (it, box) {
var vis = (box.checked) ? block : none;
document.getElementById(it).style.display = vis;
}
//--
/script
/head
body
form
input type=checkbox name=modtype value=value1
onclick=showMe('div1', this) /value1
input type=checkbox name=modtype value=value2
onclick=showMe('div1', this) /value2
input type=checkbox name=modtype value=value3
onclick=showMe('div2', this) /value3
input type=checkbox name=modtype value=value4
onclick=showMe('div3', this) /value4
input type=checkbox name=modtype value=value5
onclick=showMe('div4', this) /value5
div class=row id=div1 style=display:noneShow Div 1/div
div class=row id=div2 style=display:noneShow Div 2/div
div class=row id=div3 style=display:noneShow Div 3/div
div class=row id=div4 style=display:noneShow Div 4/div
/form
/body
/html
As you can see, the first two options should
[jQuery] Re: Show/Hide Div with checkbox options providing same results
It is shorter, but it just doesn't seem quite as jQuery-ish. ;) I always figured that there was a good reason for the this object being a bare DOM object in callbacks, events, and .each loops. jQuery doesn't try to hide the DOM, but it's just a $(this) away when you really need it. If you prefer the jQuery methods, you can still get a one-liner: $(#+$(this).attr(class))[$(this).is(:checked)?show:hide]();
[jQuery] Re: Show/Hide Div with checkbox options providing same results
$(#+this.className).[(this.checked?show:hide)](); Belay that, try this: $(#+this.className)[this.checked?show:hide](); I'm always making code longer than it has to be. :)
[jQuery] Re: Show/Hide Div with checkbox options providing same results
I kept thinking, hmm, I think this should be shorter.
Wouldn't this work? (I haven't tried it.)
$(input:checkbox).click(function(){
$(#+this.className).[(this.checked?show:hide)]();
});
I am pretty sure all the browsers support .className and .checked as
properties.
[jQuery] Re: Show/Hide Div with checkbox options providing same results
It is shorter, but it just doesn't seem quite as jQuery-ish. ;) Glen On Dec 7, 2007 1:13 PM, Dave Methvin [EMAIL PROTECTED] wrote: $(#+this.className).[(this.checked?show:hide)](); Belay that, try this: $(#+this.className)[this.checked?show:hide](); I'm always making code longer than it has to be. :)
[jQuery] Re: Show/Hide Div with checkbox options providing same results
I whipped a demo. Does this do what you want?
http://www.commadot.com/jquery/checkBoxShow.php
Couple of tips:
1. Try to avoid putting onclick handlers in your html. jQuery does
this really easily and makes your html easier to read.
2. getElementByID can be expressed as $(#yourID).dosomething...
Much more concise and jQuery-ish. :)
3. The toggle function will automatically show if hidden and hide if
shown without the IF shatement.
Hope these help. When I first started jQuery, I had to forget everything I
knew about JS (which wasn't much). It just did it all without the muss.
Glen
On Dec 6, 2007 8:30 AM, Ryan [EMAIL PROTECTED] wrote:
I'm completely versed in the show/hide options available, but have a
problem I haven't been able to figure out. I'm hoping jquery will have
the answer. I have 5 checkbox input options, the first two options
providing the same show div. For example,
html
head
script type=text/javascript
!--
function showMe (it, box) {
var vis = (box.checked) ? block : none;
document.getElementById(it).style.display = vis;
}
//--
/script
/head
body
form
input type=checkbox name=modtype value=value1
onclick=showMe('div1', this) /value1
input type=checkbox name=modtype value=value2
onclick=showMe('div1', this) /value2
input type=checkbox name=modtype value=value3
onclick=showMe('div2', this) /value3
input type=checkbox name=modtype value=value4
onclick=showMe('div3', this) /value4
input type=checkbox name=modtype value=value5
onclick=showMe('div4', this) /value5
div class=row id=div1 style=display:noneShow Div 1/div
div class=row id=div2 style=display:noneShow Div 2/div
div class=row id=div3 style=display:noneShow Div 3/div
div class=row id=div4 style=display:noneShow Div 4/div
/form
/body
/html
As you can see, the first two options should show the same div.
Selecting one or both isn't a problem, the div appears as should, but
when deselecting one of the checkboxes, the div disappears even though
one of the checkboxes is still selected.
Does anyone have an idea as to how I can get the div to remain
selected when one of the two checkboxes is deselected? Or, if either
of the checkboxes are selected, to provide just one result?
Thanks!
[jQuery] Re: Show/Hide Div with checkbox options providing same results
Actually, what I need it to do is show one instance of Div 4, not
two. I'm using the div for a text field, so I only need to show one
version of it. The checkboxes showing the div are independent of each
other in value, but have the same corresponding text field which
should be filled out if either or both of these checkboxes are
selected. Does that make sense?
On Dec 6, 12:36 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I whipped a demo. Does this do what you
want?http://www.commadot.com/jquery/checkBoxShow.php
Couple of tips:
1. Try to avoid putting onclick handlers in your html. jQuery does
this really easily and makes your html easier to read.
2. getElementByID can be expressed as $(#yourID).dosomething...
Much more concise and jQuery-ish. :)
3. The toggle function will automatically show if hidden and hide if
shown without the IF shatement.
Hope these help. When I first started jQuery, I had to forget everything I
knew about JS (which wasn't much). It just did it all without the muss.
Glen
On Dec 6, 2007 8:30 AM, Ryan [EMAIL PROTECTED] wrote:
I'm completely versed in the show/hide options available, but have a
problem I haven't been able to figure out. I'm hoping jquery will have
the answer. I have 5 checkbox input options, the first two options
providing the same show div. For example,
html
head
script type=text/javascript
!--
function showMe (it, box) {
var vis = (box.checked) ? block : none;
document.getElementById(it).style.display = vis;
}
//--
/script
/head
body
form
input type=checkbox name=modtype value=value1
onclick=showMe('div1', this) /value1
input type=checkbox name=modtype value=value2
onclick=showMe('div1', this) /value2
input type=checkbox name=modtype value=value3
onclick=showMe('div2', this) /value3
input type=checkbox name=modtype value=value4
onclick=showMe('div3', this) /value4
input type=checkbox name=modtype value=value5
onclick=showMe('div4', this) /value5
div class=row id=div1 style=display:noneShow Div 1/div
div class=row id=div2 style=display:noneShow Div 2/div
div class=row id=div3 style=display:noneShow Div 3/div
div class=row id=div4 style=display:noneShow Div 4/div
/form
/body
/html
As you can see, the first two options should show the same div.
Selecting one or both isn't a problem, the div appears as should, but
when deselecting one of the checkboxes, the div disappears even though
one of the checkboxes is still selected.
Does anyone have an idea as to how I can get the div to remain
selected when one of the two checkboxes is deselected? Or, if either
of the checkboxes are selected, to provide just one result?
Thanks!
[jQuery] Re: Show/Hide Div with checkbox options providing same results
I dont get it. :)
Say it again as a use case:
1. click on X
2. expect results: div Y does something.
Glen
On Dec 6, 2007 11:22 AM, Ryan [EMAIL PROTECTED] wrote:
Actually, what I need it to do is show one instance of Div 4, not
two. I'm using the div for a text field, so I only need to show one
version of it. The checkboxes showing the div are independent of each
other in value, but have the same corresponding text field which
should be filled out if either or both of these checkboxes are
selected. Does that make sense?
On Dec 6, 12:36 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I whipped a demo. Does this do what you
want?http://www.commadot.com/jquery/checkBoxShow.php
Couple of tips:
1. Try to avoid putting onclick handlers in your html. jQuery does
this really easily and makes your html easier to read.
2. getElementByID can be expressed as $(#yourID).dosomething...
Much more concise and jQuery-ish. :)
3. The toggle function will automatically show if hidden and hide if
shown without the IF shatement.
Hope these help. When I first started jQuery, I had to forget
everything I
knew about JS (which wasn't much). It just did it all without the muss.
Glen
On Dec 6, 2007 8:30 AM, Ryan [EMAIL PROTECTED] wrote:
I'm completely versed in the show/hide options available, but have a
problem I haven't been able to figure out. I'm hoping jquery will have
the answer. I have 5 checkbox input options, the first two options
providing the same show div. For example,
html
head
script type=text/javascript
!--
function showMe (it, box) {
var vis = (box.checked) ? block : none;
document.getElementById(it).style.display = vis;
}
//--
/script
/head
body
form
input type=checkbox name=modtype value=value1
onclick=showMe('div1', this) /value1
input type=checkbox name=modtype value=value2
onclick=showMe('div1', this) /value2
input type=checkbox name=modtype value=value3
onclick=showMe('div2', this) /value3
input type=checkbox name=modtype value=value4
onclick=showMe('div3', this) /value4
input type=checkbox name=modtype value=value5
onclick=showMe('div4', this) /value5
div class=row id=div1 style=display:noneShow Div 1/div
div class=row id=div2 style=display:noneShow Div 2/div
div class=row id=div3 style=display:noneShow Div 3/div
div class=row id=div4 style=display:noneShow Div 4/div
/form
/body
/html
As you can see, the first two options should show the same div.
Selecting one or both isn't a problem, the div appears as should, but
when deselecting one of the checkboxes, the div disappears even though
one of the checkboxes is still selected.
Does anyone have an idea as to how I can get the div to remain
selected when one of the two checkboxes is deselected? Or, if either
of the checkboxes are selected, to provide just one result?
Thanks!
[jQuery] Re: Show/Hide Div with checkbox options providing same results
This part works:
Select X, get Div 1
or
Select Y, get Div 1
or
Select X and Y, get Div1
This part doesn't:
When X and Y are selected, Div1 is showing
If X is unselected and Y remains selected, Div1 is still showing
Basically, if X and Y are selected and then X is unselected, I want
Div1 to remain showing because Select Y, get Div1 still holds true.
This is where I'm having a problem. When X is unselected, it hides
Div1. Make sense?
On Dec 6, 3:37 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I dont get it. :)
Say it again as a use case:
1. click on X
2. expect results: div Y does something.
Glen
On Dec 6, 2007 11:22 AM, Ryan [EMAIL PROTECTED] wrote:
Actually, what I need it to do is show one instance of Div 4, not
two. I'm using the div for a text field, so I only need to show one
version of it. The checkboxes showing the div are independent of each
other in value, but have the same corresponding text field which
should be filled out if either or both of these checkboxes are
selected. Does that make sense?
On Dec 6, 12:36 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I whipped a demo. Does this do what you
want?http://www.commadot.com/jquery/checkBoxShow.php
Couple of tips:
1. Try to avoid putting onclick handlers in your html. jQuery does
this really easily and makes your html easier to read.
2. getElementByID can be expressed as $(#yourID).dosomething...
Much more concise and jQuery-ish. :)
3. The toggle function will automatically show if hidden and hide if
shown without the IF shatement.
Hope these help. When I first started jQuery, I had to forget
everything I
knew about JS (which wasn't much). It just did it all without the muss.
Glen
On Dec 6, 2007 8:30 AM, Ryan [EMAIL PROTECTED] wrote:
I'm completely versed in the show/hide options available, but have a
problem I haven't been able to figure out. I'm hoping jquery will have
the answer. I have 5 checkbox input options, the first two options
providing the same show div. For example,
html
head
script type=text/javascript
!--
function showMe (it, box) {
var vis = (box.checked) ? block : none;
document.getElementById(it).style.display = vis;
}
//--
/script
/head
body
form
input type=checkbox name=modtype value=value1
onclick=showMe('div1', this) /value1
input type=checkbox name=modtype value=value2
onclick=showMe('div1', this) /value2
input type=checkbox name=modtype value=value3
onclick=showMe('div2', this) /value3
input type=checkbox name=modtype value=value4
onclick=showMe('div3', this) /value4
input type=checkbox name=modtype value=value5
onclick=showMe('div4', this) /value5
div class=row id=div1 style=display:noneShow Div 1/div
div class=row id=div2 style=display:noneShow Div 2/div
div class=row id=div3 style=display:noneShow Div 3/div
div class=row id=div4 style=display:noneShow Div 4/div
/form
/body
/html
As you can see, the first two options should show the same div.
Selecting one or both isn't a problem, the div appears as should, but
when deselecting one of the checkboxes, the div disappears even though
one of the checkboxes is still selected.
Does anyone have an idea as to how I can get the div to remain
selected when one of the two checkboxes is deselected? Or, if either
of the checkboxes are selected, to provide just one result?
Thanks!
[jQuery] Re: Show/Hide Div with checkbox options providing same results
Ahh, I think I get it.
Input 1 and 2 both are controlling the first div.
Input 3 controls div 2
input 4 controls div 3
input 5 controls div 4
Yes? I can modify the demo.
Glen
On Dec 6, 2007 2:46 PM, Ryan [EMAIL PROTECTED] wrote:
This part works:
Select X, get Div 1
or
Select Y, get Div 1
or
Select X and Y, get Div1
This part doesn't:
When X and Y are selected, Div1 is showing
If X is unselected and Y remains selected, Div1 is still showing
Basically, if X and Y are selected and then X is unselected, I want
Div1 to remain showing because Select Y, get Div1 still holds true.
This is where I'm having a problem. When X is unselected, it hides
Div1. Make sense?
On Dec 6, 3:37 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I dont get it. :)
Say it again as a use case:
1. click on X
2. expect results: div Y does something.
Glen
On Dec 6, 2007 11:22 AM, Ryan [EMAIL PROTECTED] wrote:
Actually, what I need it to do is show one instance of Div 4, not
two. I'm using the div for a text field, so I only need to show one
version of it. The checkboxes showing the div are independent of each
other in value, but have the same corresponding text field which
should be filled out if either or both of these checkboxes are
selected. Does that make sense?
On Dec 6, 12:36 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I whipped a demo. Does this do what you
want?http://www.commadot.com/jquery/checkBoxShow.php
Couple of tips:
1. Try to avoid putting onclick handlers in your html. jQuery
does
this really easily and makes your html easier to read.
2. getElementByID can be expressed as $(#yourID).dosomething...
Much more concise and jQuery-ish. :)
3. The toggle function will automatically show if hidden and hide
if
shown without the IF shatement.
Hope these help. When I first started jQuery, I had to forget
everything I
knew about JS (which wasn't much). It just did it all without the
muss.
Glen
On Dec 6, 2007 8:30 AM, Ryan [EMAIL PROTECTED] wrote:
I'm completely versed in the show/hide options available, but have
a
problem I haven't been able to figure out. I'm hoping jquery will
have
the answer. I have 5 checkbox input options, the first two
options
providing the same show div. For example,
html
head
script type=text/javascript
!--
function showMe (it, box) {
var vis = (box.checked) ? block : none;
document.getElementById(it).style.display = vis;
}
//--
/script
/head
body
form
input type=checkbox name=modtype value=value1
onclick=showMe('div1', this) /value1
input type=checkbox name=modtype value=value2
onclick=showMe('div1', this) /value2
input type=checkbox name=modtype value=value3
onclick=showMe('div2', this) /value3
input type=checkbox name=modtype value=value4
onclick=showMe('div3', this) /value4
input type=checkbox name=modtype value=value5
onclick=showMe('div4', this) /value5
div class=row id=div1 style=display:noneShow Div 1/div
div class=row id=div2 style=display:noneShow Div 2/div
div class=row id=div3 style=display:noneShow Div 3/div
div class=row id=div4 style=display:noneShow Div 4/div
/form
/body
/html
As you can see, the first two options should show the same div.
Selecting one or both isn't a problem, the div appears as should,
but
when deselecting one of the checkboxes, the div disappears even
though
one of the checkboxes is still selected.
Does anyone have an idea as to how I can get the div to remain
selected when one of the two checkboxes is deselected? Or, if
either
of the checkboxes are selected, to provide just one result?
Thanks!
[jQuery] Re: Show/Hide Div with checkbox options providing same results
Ok, I updated it. I made it Very jQuery.
$(input[type=checkbox]).click(function(){
divClass = $(this).attr(class);
if ($(this).is(:checked)) {
$(# + divClass).show();
}
else if($(this).not(:checked)) {
$(# + divClass).hide();
}
});
I refactored it three times. I kept thinking, hmm, I think this should be
shorter.
I think there is probably a way to make it even shorter with Toggle.
Anyone?
Glen
On Dec 6, 2007 8:22 PM, Glen Lipka [EMAIL PROTECTED] wrote:
Ahh, I think I get it.
Input 1 and 2 both are controlling the first div.
Input 3 controls div 2
input 4 controls div 3
input 5 controls div 4
Yes? I can modify the demo.
Glen
On Dec 6, 2007 2:46 PM, Ryan [EMAIL PROTECTED] wrote:
This part works:
Select X, get Div 1
or
Select Y, get Div 1
or
Select X and Y, get Div1
This part doesn't:
When X and Y are selected, Div1 is showing
If X is unselected and Y remains selected, Div1 is still showing
Basically, if X and Y are selected and then X is unselected, I want
Div1 to remain showing because Select Y, get Div1 still holds true.
This is where I'm having a problem. When X is unselected, it hides
Div1. Make sense?
On Dec 6, 3:37 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I dont get it. :)
Say it again as a use case:
1. click on X
2. expect results: div Y does something.
Glen
On Dec 6, 2007 11:22 AM, Ryan [EMAIL PROTECTED] wrote:
Actually, what I need it to do is show one instance of Div 4, not
two. I'm using the div for a text field, so I only need to show one
version of it. The checkboxes showing the div are independent of
each
other in value, but have the same corresponding text field which
should be filled out if either or both of these checkboxes are
selected. Does that make sense?
On Dec 6, 12:36 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I whipped a demo. Does this do what you
want?http://www.commadot.com/jquery/checkBoxShow.php
Couple of tips:
1. Try to avoid putting onclick handlers in your html. jQuery
does
this really easily and makes your html easier to read.
2. getElementByID can be expressed as
$(#yourID).dosomething...
Much more concise and jQuery-ish. :)
3. The toggle function will automatically show if hidden and
hide if
shown without the IF shatement.
Hope these help. When I first started jQuery, I had to forget
everything I
knew about JS (which wasn't much). It just did it all without the
muss.
Glen
On Dec 6, 2007 8:30 AM, Ryan [EMAIL PROTECTED] wrote:
I'm completely versed in the show/hide options available, but
have a
problem I haven't been able to figure out. I'm hoping jquery
will have
the answer. I have 5 checkbox input options, the first two
options
providing the same show div. For example,
html
head
script type=text/javascript
!--
function showMe (it, box) {
var vis = (box.checked) ? block : none;
document.getElementById(it).style.display = vis;
}
//--
/script
/head
body
form
input type=checkbox name=modtype value=value1
onclick=showMe('div1', this) /value1
input type=checkbox name=modtype value=value2
onclick=showMe('div1', this) /value2
input type=checkbox name=modtype value=value3
onclick=showMe('div2', this) /value3
input type=checkbox name=modtype value=value4
onclick=showMe('div3', this) /value4
input type=checkbox name=modtype value=value5
onclick=showMe('div4', this) /value5
div class=row id=div1 style=display:noneShow Div 1/div
div class=row id=div2 style=display:noneShow Div 2/div
div class=row id=div3 style=display:noneShow Div 3/div
div class=row id=div4 style=display:noneShow Div 4/div
/form
/body
/html
As you can see, the first two options should show the same div.
Selecting one or both isn't a problem, the div appears as
should, but
when deselecting one of the checkboxes, the div disappears even
though
one of the checkboxes is still selected.
Does anyone have an idea as to how I can get the div to remain
selected when one of the two checkboxes is deselected? Or, if
either
of the checkboxes are selected, to provide just one result?
Thanks!
[jQuery] Re: Show/Hide divs depending on choice made in a select box
Hey ioor, this sort of thing should be fairly straight forward, what
are you having trouble with?
To get you started:
$(function() {
$(#edit-taxonomy-3).change(editTaxonomyChanged);
});
function editTaxonomyChanged() {
var selectedOption = $([EMAIL PROTECTED]);
alert(Do something with this data: + selectedOption.text() + :
+ selectedOption.val());
}
select name=taxonomy[3] class=form-select required id=edit-
taxonomy-3
option value=4OPTION1/option
option value=5OPTION2/option
option value=984OPTION3/option
/select
Adrian
On Oct 25, 2:02 pm, ioor [EMAIL PROTECTED] wrote:
I have a select box with this structure:
select name=taxonomy[3] class=form-select required id=edit-
taxonomy-3
option value=4OPTION1/option
option value=5.OPTION2/option
option value=984.-OPTION3/option
option value=983-OPTION4/option
option value=35OPTION5/option
option value=986-OPTION6/option
option value=25-OPTION7/option
option value=100-OPTION8/option
option value=6. OPTION9t/option
/select
And I'd like a different div containing other forms to show up and
hide the others depending on what choice is made in the select box.
I've tried to get it to work, but couldn't quite get all of it working.
[jQuery] Re: show/hide based on list selection
Thanks Karl and Olaf. I got 2 methods to work so I feel ready to do the
real code now. Just one question, in the tutorials I saw lines like
q([EMAIL PROTECTED]'sweets']) where what works here is
q('select[name=sweets]'). When should the @ and quotes be used and when
shouldn't they?
Belinda
On Wed, 17 Oct 2007, Karl Swedberg wrote:
Belinda, you can also use the .change() method on the select element if you
want (the part you commented out was just fine). Then you can either get the
selected option's value like this ...
q(this).text()
or its text like this ...
q(':selected',this).text()
As Olaf mentioned, the real problem was that you were trying to find
q('input[name=sweets]') when you should have been using
q('select[name=sweets]')
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 17, 2007, at 8:54 PM, Olaf Bosch wrote:
Belinda M. Giardine schrieb:
I have found this question in the archives and set up a test page based on
the responses I have found. But for me it is not working, the section is
hidden and doesn't reappear no matter what is selected. I have tried
several different browsers. The real task is on a more complex page, I am
just trying to get the simple test to work first.
and here the full function:
q(document).ready(function(){
q(div.subSection).hide();
q(option).click (function() {
var opt = q(this).text();
alert (opt); // delete this row
if (opt == Cookie) {
q(div.subSection).show();
} else {
q(div.subSection).hide();
}
});
});
--
Viele Gr??e, Olaf
---
[EMAIL PROTECTED]
http://olaf-bosch.de
www.akitafreund.de
---
[jQuery] Re: show/hide based on list selection
Hi Belinda,
As of jQuery 1.2, the @ symbol is deprecated (unless you're using
the XPath plugin). So, pre-1.2, use the @, and 1.2+, do not use it.
The quotes inside the square brackets are optional.
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 18, 2007, at 10:01 AM, Belinda M. Giardine wrote:
Thanks Karl and Olaf. I got 2 methods to work so I feel ready to
do the
real code now. Just one question, in the tutorials I saw lines like
q([EMAIL PROTECTED]'sweets']) where what works here is
q('select[name=sweets]'). When should the @ and quotes be used and
when
shouldn't they?
Belinda
On Wed, 17 Oct 2007, Karl Swedberg wrote:
Belinda, you can also use the .change() method on the select
element if you
want (the part you commented out was just fine). Then you can
either get the
selected option's value like this ...
q(this).text()
or its text like this ...
q(':selected',this).text()
As Olaf mentioned, the real problem was that you were trying to find
q('input[name=sweets]') when you should have been using
q('select[name=sweets]')
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 17, 2007, at 8:54 PM, Olaf Bosch wrote:
Belinda M. Giardine schrieb:
I have found this question in the archives and set up a test
page based on
the responses I have found. But for me it is not working, the
section is
hidden and doesn't reappear no matter what is selected. I have
tried
several different browsers. The real task is on a more complex
page, I am
just trying to get the simple test to work first.
and here the full function:
q(document).ready(function(){
q(div.subSection).hide();
q(option).click (function() {
var opt = q(this).text();
alert (opt); // delete this row
if (opt == Cookie) {
q(div.subSection).show();
} else {
q(div.subSection).hide();
}
});
});
--
Viele Grüße, Olaf
---
[EMAIL PROTECTED]
http://olaf-bosch.de
www.akitafreund.de
---
[jQuery] Re: show/hide based on list selection
Belinda M. Giardine schrieb:
I have found this question in the archives and set up a test page based on
the responses I have found. But for me it is not working, the section is
hidden and doesn't reappear no matter what is selected. I have tried
several different browsers. The real task is on a more complex page, I am
just trying to get the simple test to work first.
is not changing in the content and you have not INPUT in your page.
Try in this direction:
q(document).ready(function(){
q(div.subSection).hide();
alert(Hello there); //does this
q(option).click (function() {
alert(and woop); //does this
--
Viele Grüße, Olaf
---
[EMAIL PROTECTED]
http://olaf-bosch.de
www.akitafreund.de
---
[jQuery] Re: show/hide based on list selection
Belinda M. Giardine schrieb:
I have found this question in the archives and set up a test page based on
the responses I have found. But for me it is not working, the section is
hidden and doesn't reappear no matter what is selected. I have tried
several different browsers. The real task is on a more complex page, I am
just trying to get the simple test to work first.
and here the full function:
q(document).ready(function(){
q(div.subSection).hide();
q(option).click (function() {
var opt = q(this).text();
alert (opt); // delete this row
if (opt == Cookie) {
q(div.subSection).show();
} else {
q(div.subSection).hide();
}
});
});
--
Viele Grüße, Olaf
---
[EMAIL PROTECTED]
http://olaf-bosch.de
www.akitafreund.de
---
[jQuery] Re: show/hide based on list selection
Belinda, you can also use the .change() method on the select
element if you want (the part you commented out was just fine). Then
you can either get the selected option's value like this ...
q(this).text()
or its text like this ...
q(':selected',this).text()
As Olaf mentioned, the real problem was that you were trying to find q
('input[name=sweets]') when you should have been using q('select
[name=sweets]')
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 17, 2007, at 8:54 PM, Olaf Bosch wrote:
Belinda M. Giardine schrieb:
I have found this question in the archives and set up a test page
based on the responses I have found. But for me it is not
working, the section is hidden and doesn't reappear no matter what
is selected. I have tried several different browsers. The real
task is on a more complex page, I am just trying to get the simple
test to work first.
and here the full function:
q(document).ready(function(){
q(div.subSection).hide();
q(option).click (function() {
var opt = q(this).text();
alert (opt); // delete this row
if (opt == Cookie) {
q(div.subSection).show();
} else {
q(div.subSection).hide();
}
});
});
--
Viele Grüße, Olaf
---
[EMAIL PROTECTED]
http://olaf-bosch.de
www.akitafreund.de
---
[jQuery] Re: show/hide FAQ - simplify my code?
Purely as an example ...
$(document).ready(function(){
// close the offDiv content sections (no javascript = content is all
visible)
$('.offDiv .show-hide').hide();
// showLink/hideLink shows/hides the content; showAll/hideAll shows/hides
all the content
$.each(['.show', '.hide'], function(i,v){
//opt is object of { from:switch div class from, to:switch div
class to, opp:opposite of v }
var opt = v == '.show' ?
{from:'offDiv', to:'onDiv', opp:'.hide'} :
{from:'onDiv', to:'offDiv', opp:'.show'};
$('a' + v + 'Link').click(function(){
$('a' + opt.opp + 'All:hidden').show();
if($('a' + v + 'Link:visible').not(this).size() == 0){
$('a' + v + 'All:visible').hide();
}
$(this).siblings('.show-hide').slideToggle('slow').end()
.parents('.' + opt.from).removeClass().addClass(opt.to).end()
.siblings(opt.opp + 'Link').andSelf().toggle();
return false;
})
// only show if relevant class is set on parent
.filter(function(){ return $(this).parent().hasClass(opt.from);
}).show();
$('a' + v + 'All').click(function(){
$('a' + v + 'Link:visible').click();
$(this).hide();
return false;
})
// only show if relevant, ie don't show showAll if all div are
currently open
.filter(function(){ return ($('a' + v + 'Link:visible').size());
}).show();
});
// title is clickable, and toggles the content, so just click the
relevant link...
$('.faqTitle').click( function() {
$(this).siblings('a:visible').click();
return false;
});
});
Does exactly what yours does, with one extra check on the showAll/hideAll
buttons (only display them if there are actually items to show/hide
respectively). I haven't overloaded on the comments, but see if you can
follow it...
(BTW it's v1.2+ dependent.)
MichaelEvangelista wrote:
http://www.mredesign.com/demos/jquery-show-hide/#thedemo
got it working just the way I wanted (thanks, Glen!)
I wrote out these rules long hand as I went through the creation/learning
process,
but I am sure there are several ways I could compact this to fewer lines.
Anybody want to have a shot at simplifying / combining rules, just for the
sake of example?
The code for my setup is below the demo on that same page
Only a few weeks in and I am really digging the power of jQuery... and the
community that seems to exist around it.
jQuery is just so ... usable!
( If a js-idiot like me can build something like this after just a few
tutorials, the buzz is true, jQuery will be unstoppable. )
--
Michael Evangelista, Evangelista Design
Web : www.mredesign.com
Newsgroups: news://forums.mredesign.com
Blog : www.miuaiga.com
--
--
View this message in context:
http://www.nabble.com/show-hide-FAQ---simplify-my-code--tf4572895s27240.html#a13058588
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: show/hide FAQ - simplify my code?
nice!
the use of js variables must be further back in the book... ;-)
I hadn't even thought of doing it that way - thanks very much.
--
--
Michael Evangelista, Evangelista Design
Web : www.mredesign.com
Newsgroups: news://forums.mredesign.com
Blog : www.miuaiga.com
Wizzud [EMAIL PROTECTED] wrote in message
news:[EMAIL PROTECTED]
Purely as an example ...
$(document).ready(function(){
// close the offDiv content sections (no javascript = content is all
visible)
$('.offDiv .show-hide').hide();
// showLink/hideLink shows/hides the content; showAll/hideAll shows/hides
all the content
$.each(['.show', '.hide'], function(i,v){
//opt is object of { from:switch div class from, to:switch div
class to, opp:opposite of v }
var opt = v == '.show' ?
{from:'offDiv', to:'onDiv', opp:'.hide'} :
{from:'onDiv', to:'offDiv', opp:'.show'};
$('a' + v + 'Link').click(function(){
$('a' + opt.opp + 'All:hidden').show();
if($('a' + v + 'Link:visible').not(this).size() == 0){
$('a' + v + 'All:visible').hide();
}
$(this).siblings('.show-hide').slideToggle('slow').end()
.parents('.' + opt.from).removeClass().addClass(opt.to).end()
.siblings(opt.opp + 'Link').andSelf().toggle();
return false;
})
// only show if relevant class is set on parent
.filter(function(){ return $(this).parent().hasClass(opt.from);
}).show();
$('a' + v + 'All').click(function(){
$('a' + v + 'Link:visible').click();
$(this).hide();
return false;
})
// only show if relevant, ie don't show showAll if all div are
currently open
.filter(function(){ return ($('a' + v + 'Link:visible').size());
}).show();
});
// title is clickable, and toggles the content, so just click the
relevant link...
$('.faqTitle').click( function() {
$(this).siblings('a:visible').click();
return false;
});
});
Does exactly what yours does, with one extra check on the showAll/hideAll
buttons (only display them if there are actually items to show/hide
respectively). I haven't overloaded on the comments, but see if you can
follow it...
(BTW it's v1.2+ dependent.)
MichaelEvangelista wrote:
http://www.mredesign.com/demos/jquery-show-hide/#thedemo
got it working just the way I wanted (thanks, Glen!)
I wrote out these rules long hand as I went through the creation/learning
process,
but I am sure there are several ways I could compact this to fewer lines.
Anybody want to have a shot at simplifying / combining rules, just for
the
sake of example?
The code for my setup is below the demo on that same page
Only a few weeks in and I am really digging the power of jQuery... and
the
community that seems to exist around it.
jQuery is just so ... usable!
( If a js-idiot like me can build something like this after just a few
tutorials, the buzz is true, jQuery will be unstoppable. )
--
Michael Evangelista, Evangelista Design
Web : www.mredesign.com
Newsgroups: news://forums.mredesign.com
Blog : www.miuaiga.com
--
--
View this message in context:
http://www.nabble.com/show-hide-FAQ---simplify-my-code--tf4572895s27240.html#a13058588
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
[jQuery] Re: show hide div with menu
1. tabContent2 : holds the collection of DIVs that are immediate children of
#tabcontent
2. filter(':visible') : reduces the collection from (1) to just those DIVs
that are visible (ie probably the one that had previously had show() run on
it) because it is not necessary to hide those that already hidden!
3. hide() : hides the (reduced) collection from (2), ie sets display:none
4. end() : reverts the last 'destructive' action, which was the filter in
(2), so the collection is now back to as it was in (1)
5. filter(':eq('+(n+1)+')') : reduces the collection down to a single item,
that item being the (n+1)th of the current collection (from (1)). So if you
are adding the handler for the first anchor, n is 0, therefore the selector
is ':eq(1)', which cuts the collection down to just the second DIV in the
initial tabContent2 collection (the first DIV being the one that is only
displayed if no menu option has been clicked?)
6. show() : shows the current collection from (5) - just one item! - ie.
sets display:block
7. end() : reverts the last 'destructive' action, which was the filter in
(5), so the collection is now back to the same as it started out in (1) ...
again!
Make sense?
dogslife wrote:
Thank you very much, that function did exactly what I was looking for. If
you have time, would you mind breaking down how this line works?
tabContent2.filter(':visible').hide().end().filter(':eq('+(n+1)+')').show().end();
I know your comment ( hide any div currently visible, and show the nth+1
div...) explains what, but I was wondering how it works.
Thank's again!
--
View this message in context:
http://www.nabble.com/show-hide-div-with-menu-tf4411247s15494.html#a12598527
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: Show / hide options based on class
Michael Price schrieb:
Hi all,
I've got two select boxes side by side - initially the right hand side
box has ALL options in it - and the left hand box can be used to
filter the options displayed.
Probably not the best way to do it (in fact, defintiely - it doesn't
work in IE) but the left hand list has options whose values correspond
to class names of the options in the right hand list. When an option
in the left hand list is selected, all options in the right hand one
which DON'T have this class are hidden, and all which DO are
displayed. Using $(option . + className).show() and .hide() works in
Firefox but not in IE.
Is there a better approach to this?
perhaps ypou should use the remove()-method instead of hiding them. when
you do this you should be storing all possible options of the right
selectlist prior to removing as otherwise you won't be able to fill the
list again if the the selected option on the left changes...
something like this:
var $possibleOptsRight;
$( document ).ready(function() {
$possibleOptsRight = $('#rightselectlist option');
$( '#leftselectlist' ).bind('change', function() {
$('#rightselectlist')
.children().remove().end()
.append( $possibleOptsRight ).children()
.not('.' + $(this).val() ).hide();
});
});
surely untested ;-)
[jQuery] Re: Show / hide options based on class
Marc Jansen wrote:
var $possibleOptsRight;
$( document ).ready(function() {
$possibleOptsRight = $('#rightselectlist option');
$( '#leftselectlist' ).bind('change', function() {
$('#rightselectlist')
.children().remove().end()
.append( $possibleOptsRight ).children()
.not('.' + $(this).val() ).hide();
});
});
I'll give this a try, thanks. :)
Regards,
Michael Price
[jQuery] Re: Show hide div with cookie for remembering position -- possible solution
Hi! Heres a couple things i might do
$('a.show').hide();
$('a.hide').click(function(){
$('a.show').show();
$('h2.title,.view-header-latest').add(this).hide(); //
Combine multiple
$.cookie('hideShow,hide,{expires:365}); // Only need one
cookie.
return false;
});
var hideShow = $.cookie('hideShow');
if (hideShow==hide) {
$('a.hide,h2.title,.view-header-latest').hide(); // Combine
multiple
$('a.show').show();
};
$('a.show').click(function(){
$(this).hide();
$('a.hide,h2.title,.view-header-latest').show();
$.cookie(hideShow,show);
return false;
});
if (hideShow==show) {
$('h2.title,.view-header-latest').show();
};
On 6/11/07, bsuttis [EMAIL PROTECTED] wrote:
Hi all,
After searching for a solution to my subject and not finding it, I've
put together my own, which while working, feels rather long to me, and
as more of a designer/themer, I'm wondering if this is the optimal
code from a developer's point of view. I'm using the excellent jQuery
cookie plugin for the cookies.
Here's my jQuery code:
code
$('a.show').hide();
$('a.hide').click(function(){
$(this).hide();
$('a.show').show();
$('h2.title').hide();
$('.view-header-latest').hide();
$.cookie('hide', '.view-header-latest', {expires:365});
$.cookie('show', null);
return false;
});
var hide = $.cookie('hide');
if (hide) {
$('a.hide').hide();
$('a.show').show();
$('h2.title').hide();
$('.view-header-latest').hide();
};
$('a.show').click(function(){
$(this).hide();
$('a.hide').show();
$('h2.title').show();
$('.view-header-latest').show();
$.cookie('show', '.view-header-latest', {expires:365});
$.cookie('hide', null);
return false;
});
var show = $.cookie('show');
if (show) {
$('h2.title').show();
$('.view-header-latest').show();
};
/code
What this does is uses a ul of 2 links, a show and a hide, to control
a div below it -- hiding the div as well as the opposite link while
doing so (ie. when you click the Hide li a, it hides too and presents
the Show li a). Any suggestions are appreciated, justr started getting
my hands dirty with jQuery this weekend. Thanks!
[jQuery] Re: show/hide revisited
Schnuck,
On May 18, 2007, at 11:21 AM, Schnuck wrote:
i have this bit of code here (and god knows how old, unstylish and
inefficient the code below might be) and all i am trying is to make
one or two particular divs with set ids/classes to show and hide
triggered by a remote image somewhere else on the page. the image,
let's say a plus icon switches to a minus icon depending on the state
of the toggled divs. the example below at least does toggle between
shwo hide but the div it should hide doesn't do anything. also, in
the example it uses text to display show or hide, this could be done
with images (like plus and minus)?
Maybe you have an answer already, but I didn't see one on the list.
You can make the code simpler. Something like this.
$(document).ready(function() {
$('.commenting').hide();
$('a.show_com').click(function() {
if ( this.className == show_com ) {
$(.commenting).slideDown('slow');
$(this).removeClass(show_com).addClass(hide_com).text(HIDE
COMMENTS);
} else {
$(.commenting).slideUp('fast');
$(this).removeClass(hide_com).addClass(show_com).text(SHOW
COMMENTS);
}
return false;
});
});
If you want a plus or minus you can either do it in test
$(this).removeClass(show_com).addClass(hide_com).text(-);
or you can add a background image in css
a.show_com, a.hide_com {
width: 16px;
height: 16px;
}
a.show_com {
background-image: plus.gif;
}
a.hide_com {
background-image: minus.gif;
}
The code could be even simpler if you use one class.
$('a.show_com').click(function() {
$(this).toggleClass(show_com);
$(.commenting).slideToggle(slow);
return false;
});
then the css would be
a {
width: 16px;
height: 16px;
background-image: minus.gif;
}
a.show_com {
background-image: plus.gif;
}
--
Roger Roelofs
[jQuery] Re: Show()/Hide() Bug?
I ran you code in FireFox and in IE6 and recieved no such error. ~Sean
