Re: [jQuery] Show/hide div based on URL parameter
Thank you Andrei!
Nice and simple, very well!
Andrei Eftimie wrote:
>
>
>$(function(){
>if (document.location.href.indexOf('showdiv=yes') > 0)
> $("#display").show();
>});
>
>
> On Sat, Feb 13, 2010 at 5:37 PM, dikker wrote:
>>
>> Hi guys,
>>
>> Am a beginner with Jquery and what i want is as follows.
>> I have a div that should be hidden on default, but when a certain URL
>> parameter is present, then the div is visible.
>>
>> I am basing the following on this demo :
>> http://sandbox.ajaxcssblog.com/jquery/jquery.url/url-demo.htm
>>
>> I have the following html
>>
>>
>> header
>> test text
>>
>>
>>
>> And i have the following in the head
>>
>>
>> $(function(){
>> $("#display").text($.url.param("loginstatus") || "...
>> nothing yet");
>> });
>>
>>
>>
>> What i basically want is that when the URL parameter shows
>> index.html?showdiv=yes
>> then the div should be displayed.
>>
>> So it would make sense to put an IF statement in the script as well, the
>> only problem is that i cannot or do not understand how i can modify the
>> JS
>> script in such a way that it does just that.
>>
>> I have tried many variations with IF and ELSE statements but nothing ever
>> seems to work as i am probably missing how to close tags properly etc.
>>
>> Would anyone be willing to steer me in the right direction?
>>
>>
>> --
>> View this message in context:
>> http://old.nabble.com/Show-hide-div-based-on-URL-parameter-tp27576002s27240p27576002.html
>> Sent from the jQuery General Discussion mailing list archive at
>> Nabble.com.
>>
>>
>
>
>
> --
> Andrei Eftimie
> http://eftimie.com
> +40 758 833 281
>
> Punct
> http://designpunct.ro
>
>
--
View this message in context:
http://old.nabble.com/Show-hide-div-based-on-URL-parameter-tp27576002s27240p27620977.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] Show/hide div based on URL parameter
$(function(){
if (document.location.href.indexOf('showdiv=yes') > 0)
$("#display").show();
});
On Sat, Feb 13, 2010 at 5:37 PM, dikker wrote:
>
> Hi guys,
>
> Am a beginner with Jquery and what i want is as follows.
> I have a div that should be hidden on default, but when a certain URL
> parameter is present, then the div is visible.
>
> I am basing the following on this demo :
> http://sandbox.ajaxcssblog.com/jquery/jquery.url/url-demo.htm
>
> I have the following html
>
>
> header
> test text
>
>
>
> And i have the following in the head
>
>
> $(function(){
> $("#display").text($.url.param("loginstatus") || "... nothing
> yet");
> });
>
>
>
> What i basically want is that when the URL parameter shows
> index.html?showdiv=yes
> then the div should be displayed.
>
> So it would make sense to put an IF statement in the script as well, the
> only problem is that i cannot or do not understand how i can modify the JS
> script in such a way that it does just that.
>
> I have tried many variations with IF and ELSE statements but nothing ever
> seems to work as i am probably missing how to close tags properly etc.
>
> Would anyone be willing to steer me in the right direction?
>
>
> --
> View this message in context:
> http://old.nabble.com/Show-hide-div-based-on-URL-parameter-tp27576002s27240p27576002.html
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
>
>
--
Andrei Eftimie
http://eftimie.com
+40 758 833 281
Punct
http://designpunct.ro
[jQuery] Show/hide div based on URL parameter
Hi guys,
Am a beginner with Jquery and what i want is as follows.
I have a div that should be hidden on default, but when a certain URL
parameter is present, then the div is visible.
I am basing the following on this demo :
http://sandbox.ajaxcssblog.com/jquery/jquery.url/url-demo.htm
I have the following html
header
test text
And i have the following in the head
$(function(){
$("#display").text($.url.param("loginstatus") || "... nothing
yet");
});
What i basically want is that when the URL parameter shows
index.html?showdiv=yes
then the div should be displayed.
So it would make sense to put an IF statement in the script as well, the
only problem is that i cannot or do not understand how i can modify the JS
script in such a way that it does just that.
I have tried many variations with IF and ELSE statements but nothing ever
seems to work as i am probably missing how to close tags properly etc.
Would anyone be willing to steer me in the right direction?
--
View this message in context:
http://old.nabble.com/Show-hide-div-based-on-URL-parameter-tp27576002s27240p27576002.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Show Hide 'td' on click of a link
I have a table that contains information that is hidden within a 'td'
element. Users can access this information if they wish by clicking on
a link that is held in another 'td' element on the previous row (table
structure below):
Show options
some option info
Show options
some option info
i have given each link a class name: install_toggle
i hav given the hidden 'td' elements a class name: install
on the click of the link with the class name: install_toggle, i want
the next 'td' element with the class name: install to toggle.
this is what i have gotten so far:
$(function() {
$('td.install').addClass('hide');
$('a.install_toggle').toggle(function() {
$(this).html('Hide Options');
$(this).next('.install').removeClass('hide');
},function(){
$(this).html('Show Options');
$(this).next('.install').addClass('hide');
});
});
This does not work. What am i doing wrong?
[jQuery] show/hide
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;
});
});
Re: [jQuery] show/hide div on select change
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 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.
>
>
> $(document).ready(function() {
>$('div.textfield1').hide();
>
>('#id_status').change(function() {
>
>if ($("#id_status").val() == 6){
>$('div.textfield1').show();
>}
>else{
>$('div.textfield1').hide();
>}
> });
> });
>
>
> Status:
>
>New
>In Review
>Working On
>Elevated
>Approved
>Deferred
>Denied
>Duplicate
>Completed
>Needs more information
>
>
>
> test
>
>
>
>
--
Charlie Griefer
http://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] show/hide div on select change
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.
$(document).ready(function() {
$('div.textfield1').hide();
('#id_status').change(function() {
if ($("#id_status").val() == 6){
$('div.textfield1').show();
}
else{
$('div.textfield1').hide();
}
});
});
Status:
New
In Review
Working On
Elevated
Approved
Deferred
Denied
Duplicate
Completed
Needs more information
test
[jQuery] show/hide ui.tab?
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] show/hide problem
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] show/hide with embed
Ok so I found an issue with using embed code and jquery's show()/hide
() method. I am using embed code inside of a div. so it looks
something like this:
whatever here
now on that I want a user to be able to click a button to show/hide
the content. so i create a function like this:
function showEmbed(){
if($("#test").show()){
$("#test").hide();
} else {
$("#test").show();
}
}
I then binded that to just a basic text link:
show/hide
Now that works fine as far as showing/hiding the embed code. However,
there is one issue with this. When I click the link it reloads the
data. I do not want it to reload the data. Say for instance there is a
video playing in there. If you click the link it will stop the video
and when you click it again to show it will start again. Any ideas on
how to get it not to reload the data. Am I missing something?
[jQuery] Show/hide effect div on mouseover
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
[jQuery] Show/Hide
I am working on a toolset that shows/hides divs. The divs are named
id-1 to id-6.
content
content
And so on. The script I have written is below:
$(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');
});
});
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:
Identifer 1
- Please Select -
Sec
Row
Seat
Ticket Barcode
RecID
Book No.
Account No.
Other
Add
This occurs 6 times, starting on 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: Jquery Show/Hide playing up in Safari
can you post a test page with the code you posted above?
On Aug 10, 9:00 am, maffo wrote:
> Note: I have also posted this on jqueryhelp.com but I havent resolved
> this issue.
>
> http://www.jqueryhelp.com/viewtopic.php?p=9713
>
> I have just started a new job and am building my first website for
> them. Im using Jquery to try and impress them but after trying and
> testing the site in Safari, I am stumped as to why such a basic
> function its going wrong. The script works fine in ie and firefox so
> Im pulling my hair out. I have stripped all the non necessary code out
> of this and placed the css and javascript inside the head.
>
> --
> CODE
> --
>
>
>
>
> html {
> font-size:16px;
> margin:0;
> padding:0
> }
> body,div,p {
> margin:0;
> padding:0;
> background: #eee;
> }
>
> div#container {
> width:70.06em;
> height:20em;
> overflow: visible;
> background:#fff
> }
>
> div#blackContainer {
> height:20em;
> background:#000
> }
>
> div#portfolio {
> display:none;
> width:51.75em;
> height:20em;
> background:#fc0;
> }
>
> div#blackPanel {
> width:51.75em;
> height:20em;
> background:#000
> }
>
> div#whitePanel {
> padding-left:4.19em;
> height:20em;
> background:#fff
> }
>
> .panel {
> float:left
> }
>
>
>
> http://ajax.googleapis.com/
> ajax/libs/jquery/1.3/jquery.min.js">
>
>
> $(document).ready(function(){
> // All Jquery fucntions should reside in here
>
> // NEW FUNCTION SHOW PORTFOLIO TAB
> $(".showPortfolio").click(function () {
>
> $("#container").css({'width' : '103.5em',
> 'overflow' : 'hidden'});
> $("#portfolio").show(1000);
> });
>
> // NEW FUNCTION HIDE PORTFOLIO TAB
> $(".hidePortfolio").click(function () {
> $("#portfolio").hide(1000, function(){$
> ("#container").css({'width' : '70.06em', 'overflow' : 'visible'});});
> });
>
> // End Doc Ready
> });
>
>
>
>
>
>
>
>
> class="hidePortfolio" href="#">Hide Portfolio Tab
> class="showPortfolio" href="#">Show Portfolio Tab
>
>
>
>
> style="">White Panel
>
>
>
>
>
>
>
> END CODE
>
>
> If you load that code in firefox you will see that by clicking on
> 'show porfolio', a yellow div slides open and pushes the black div to
> the right. You click 'hide portfolio' and the black div slides back
> and the yellow div hides. You can open and close the portfolio div as
> often as you like and it works a treat.
>
> If you try doing the same in safari, it works the first time but then
> it starts pushing the black div down. I cant for the life of me think
> what it could be and I have spent ages on it. If one of you kind
> experts on here could have a quick look at it for me I would more
> grateful than you can imagine!
>
> Thanks in advance, Maffo
[jQuery] Jquery Show/Hide playing up in Safari
Note: I have also posted this on jqueryhelp.com but I havent resolved
this issue.
http://www.jqueryhelp.com/viewtopic.php?p=9713
I have just started a new job and am building my first website for
them. Im using Jquery to try and impress them but after trying and
testing the site in Safari, I am stumped as to why such a basic
function its going wrong. The script works fine in ie and firefox so
Im pulling my hair out. I have stripped all the non necessary code out
of this and placed the css and javascript inside the head.
--
CODE
--
html {
font-size:16px;
margin:0;
padding:0
}
body,div,p {
margin:0;
padding:0;
background: #eee;
}
div#container {
width:70.06em;
height:20em;
overflow: visible;
background:#fff
}
div#blackContainer {
height:20em;
background:#000
}
div#portfolio {
display:none;
width:51.75em;
height:20em;
background:#fc0;
}
div#blackPanel {
width:51.75em;
height:20em;
background:#000
}
div#whitePanel {
padding-left:4.19em;
height:20em;
background:#fff
}
.panel {
float:left
}
http://ajax.googleapis.com/
ajax/libs/jquery/1.3/jquery.min.js">
$(document).ready(function(){
// All Jquery fucntions should reside in here
// NEW FUNCTION SHOW PORTFOLIO TAB
$(".showPortfolio").click(function () {
$("#container").css({'width' : '103.5em',
'overflow' : 'hidden'});
$("#portfolio").show(1000);
});
// NEW FUNCTION HIDE PORTFOLIO TAB
$(".hidePortfolio").click(function () {
$("#portfolio").hide(1000, function(){$
("#container").css({'width' : '70.06em', 'overflow' : 'visible'});});
});
// End Doc Ready
});
Hide Portfolio Tab
Show Portfolio Tab
White Panel
END CODE
If you load that code in firefox you will see that by clicking on
'show porfolio', a yellow div slides open and pushes the black div to
the right. You click 'hide portfolio' and the black div slides back
and the yellow div hides. You can open and close the portfolio div as
often as you like and it works a treat.
If you try doing the same in safari, it works the first time but then
it starts pushing the black div down. I cant for the life of me think
what it could be and I have spent ages on it. If one of you kind
experts on here could have a quick look at it for me I would more
grateful than you can imagine!
Thanks in advance, Maffo
[jQuery] Show/hide on radio button click
Hi all,
I'm trying to do a show/hide on a radio button click and I do have it
working, but I'd like to make it more...extensible/independent of hard-
coding children elements to show hide. My dummy html structure is:
By Cause:
Please select cause(s) below:
Cause 1
Cause 2
Cause 3
By Foundation:
Foundation 1
Foundation 2
Foundation 3
My jquery code is:
$(function() {
$('#cause_children, #foundation_children').hide(); //hide donation
choice children
$('input[name="donate_by"]').click(function() { //donation choice
radio button click
//$(this).next().css('border', '1px solid blue');
//$(this).next().find('ul:first').css('border', '1px solid
red');
//$(".donation_children").slideToggle('slow');
switch ( $(this).val() ) {
case 'by_cause' : //if by cause, show cause, hide
foundation
$(this).next().css('font-weight', 'bold');
//bold cause
$('#foundation').next().css('font-weight',
'normal')//unbold
foundation
$('#cause_children').slideDown();
$('#foundation_children').slideUp();
break;
case 'by_foundation' : //if by foundation, show
foundation, hide
cause
$(this).next().css('font-weight', 'bold');
//bold foundation
$('#cause').next().css('font-weight',
'normal')//unbold cause
$('#cause_children').slideUp();
$('#foundation_children').slideDown();
break;
}
});
});
I left some commented out stuff at the top of the function, hopefully
to give you an idea of what I tried. In particular:
$(this).next().find('ul:first').css('border', '1px solid red');
I was trying to get the first ul (the children to show/hide) on
"this" (the radio button clicked).
I'd like this to be flexible to where you could add more radio button/
children and as long as the structure stays the same, the show/hide
functionality works.
[jQuery] show hide slideshow
I know this may be simple, nonetheless I am having issues. Below is
the code im working with. Can someone guide me as to a way of getting
my custom slideshow to work properly.
Expectations: Hide all 's except the first one and then loop
through all the images with a settimeout to fadin and fadeout each
sample image...
Solutions and suggestions will be greatly appreciated!!!
-- This is where I am at in the code at the moment and have been
trying different alternatives with the JQuery, to no avail.
//Javascript-
$(function() {
init();
for (var i = 1; i < $("div#show li").size(); i++) {
$("div#show li")[i].hide();
}
for (var i = 0; i < $("div#show li").size(); i++) {
setTimeout(function() {
$("div#show li")[i - 1].fadeOut();
$("div#show li")[i].fadeIn();
}, "8000");
}
});
[jQuery] show() hide()
I have this simple code, slides down and up smoothly in Firefox but is choppy
in IE when I added the hide() and show().
Please what is wrong wih it?
$(document).ready(function() {
$("#open").click(function(){
$("#hideme").hide("fast");
$("div#panel").slideDown("slow");
});
$("#close").click(function(){
$("div#panel").slideUp("slow");
$("#hideme").show("slow");
});
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
--
View this message in context:
http://www.nabble.com/show%28%29-hide%28%29-tp24585009s27240p24585009.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[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] Show/Hide multiple table rows. Pls help
Hi, I have a problem i've been trying to solve for a while. I have a table that is dynamically generated. I need to be able to hide and show certain table rows. for e.g. DATA1 DATA1.2 DATA1.3 - data1 | data1.2|dynamically generated by an array when page loads, data1.3 can be more table data rows and is to be hidden. |To be shown when DATA1 is clicked | | data1 | data1.2| data1.3| -- DATA2 DATA2.2 DATA2.3 - data2 | data2.2|dynamically generated by an array when page loads, data2.3 can be more table data rows and is to be hidden. |To be shown when DATA2 is clicked | | data2 | data2.2| data2.3| -- I'd like to know how i can show/hide the tr's that are dynamically generated. i'm also using tablesorter, so i want the rows to be associsted with their respective DATA, i.e. they are not mixed up. data1 or data1.2 does not come under DATA2. I tried every which way to try the show/hide, the JQuery Table Display plugin doesnt seem to do the job. Pls can someone help!!
[jQuery] Show/hide divs depending on form parameters
Hi all,
I am pretty new to jQuery, and I'm looking for a way to kind of
'filter' divs depending on the parameters supplied by a form.
I have three select boxes that set 'area', 'level', and 'time'
parameters (for courses).
I have given corresponding classes to some example divs, and I want
the ones that match the parameters to be visible, and the rest to be
hidden.
Here is what I have got, but it doesn't work (they all stay no matter
what parameters are supplied). Any help would be greatly appreciated!
http://code.jquery.com/jquery-latest.js";>
$(document).ready(function(){
$(".coursecontent").hide();
var area = $(document).getUrlParam("area");
var level = $(document).getUrlParam("level");
var time = $(document).getUrlParam("time");
$("." + area + "." + level + "." + time).show();
});
Javascript 'search' demo
Find a Course
We have something for everyone!
Select Course
area
Any
Barry
Canton
Cardiff
Bay
Cardiff
Centre
Cowbridge
Creigiau
Ely
Grangetown
Gwaelod y
Garth
Llandaf
Llanishen
Llanrumney
Llantwit
Major
Penarth
Pentwyn
Pontprennau
Rhiwbina
Roath
Rumney
Splott
St Athan
Whitchurch
Wick
Select Course
level
Any
Pre-entry/Taster
Entry
Entry &
Foundation (Wlpan)
Foundation
Intermediate
Higher
Proficiency/Fine-Tuning
Select Course
time
Any
Morning
Lunchtime
Afternoon
Evening
Barry, Entry, Morning
Canton, Entry, Evening
Llanishen, Wlpan, Lunchtime
Penarth, Foundation, Evening
Splott, Higher, Evening
[jQuery] Show/Hide Content won't hide last record?
I have a loop to display all the records in my table and am using the show/hide content function on the record link so the info displays in a box (div) anyways, for some reason the last record on the page always has it's div box open, and the "close" and "toggle" links don't work for that record, all the rest are fine, what can cause this? -- View this message in context: http://www.nabble.com/Show-Hide-Content-won%27t-hide-last-record--tp23197453s27240p23197453.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] show hide random rows
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..
[jQuery] Show/Hide element
Hello, I have a list of fieldsets and each one has a legend. I am thinking in having something like: Personal Data first element second element 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] Show/hide multiple TDs with one function?
Hi. 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?
[jQuery] Show hide and print
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
[jQuery] Show/Hide Menu
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
links and stuff in here
Because the mouseout event is attatched to artistsBox, mousing over
artistsColumns hides the div as well, which I don't want.
Any ideas?
[jQuery] show/hide on hover event (newbie question)
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] show/hide content
Hi, I once saw a jquery script where you can display content based on count 5 | 10 | 20 It defaults on 5 items. When you click on 10 it displays 10 items and so on Can someone please point me to a link? Thank you -- View this message in context: http://www.nabble.com/show-hide-content-tp22025581s27240p22025581.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] show/hide (toggle) dynamic table row
Hello - thank you in advance for your help! I would like to use the toggle function to show hide a table row BELOW a dynamic row, so the table would look like this row from database with data row I want to show hide (defaults to hide) I know how to do this when the table is static but how do I do it when the rows are being built based on the numbers of rows from the database? THANKS!
[jQuery] Show hide layer on hover problem
I have created a login layer that slides down from the top of the
screen and i want it so that if the mouse leaves the layer or you
click outside of the layer it slides back up. I have it working on
mouse out but it is buggy and since i am new to this i am sure there
is probably a much better way to do what i am doing.
Can someone please take a look and let me know how to do this?
$(document).ready(function(){
$("#LoginForm").corner("bottom");
$("#LoginLink").click(function(){
if ($("#LoginForm").is(":hidden")){
$("#LoginForm").slideDown("fast");
}
else{
$("#LoginForm").slideUp("fast");
}
if ($(".FormContainer").is(":hidden")){
$(".FormContainer").show("fast");
}
});
setTimeout('$("#messageReply").hide();$("#LoginForm").slideUp
("fast")', 2);
$("#LoginFormContainer").hover(
function() {
$("#LoginFormContainer").show();
},
function() {
setTimeout('$("#LoginForm").slideUp("fast")', 2000);
}
);
$(".Content input").focus(function() {
$(this).parent().addClass("curFocus")
});
$(".Content input").blur(function() {
$(this).parent().removeClass("curFocus")
});
$("a").mouseover(function() {
$(this).fadeOut(100);
$(this).fadeIn(300);
});
// handle hide/show for text field default
values in only one form
inputDefaults = {};
$("#LoginForm input:text, #LoginForm
input:password").clearDefaultText();
});
function closeForm(){
$("#LoginForm .FormContainer").fadeOut("fast");
setTimeout('$("#messageReply").fadeIn("fast")', 350);
setTimeout('$("#messageReply").hide();$
("#LoginForm").slideUp("fast")', 3500);
}
// handle hide/show for text field default values in
only one form
jQuery.fn.clearDefaultText = function() {
return this.each(function(){
var element = $(this);
inputDefaults[element.attr("id")] =
element.val();
element.focus(function() {
if (element.val() ==
inputDefaults[element.attr("id")]) {
element.val('');
}
});
element.blur(function() {
if (element.val() == '') {
element.val(inputDefaults[element.attr("id")]);
}
});
});
}
The main problem is with
the
$("#LoginFormContainer").hover(
function() {
$("#LoginFormContainer").show();
},
function() {
setTimeout('$("#LoginForm").slideUp("fast")', 2000);
}
It seems to work but sometimes it slides up with the mouse over the
layer and you never left the layer.
Any help would greatly appreciated! :)
[jQuery] Re: jQuery show(), hide() problems
I found the problem, the first time showWindow was called I could see this
error in firebug "jQuery.dequeue is not a function".
I added this code and now it works fine
( function( $ ) {
$.dequeue = function( a , b ){
return $(a).dequeue(b);
};
})( jQuery );
I think this has something to do with the version of jQuery, version 1.1.2
worked out of the box, but 1.3b1 needed the code above to be added.
What function might have replaced TransferTo in 1.3b1?
> Date: Mon, 26 Jan 2009 20:11:32 -0800
> Subject: [jQuery] Re: jQuery show(), hide() problems
> From: mal...@gmail.com
> To: jquery-en@googlegroups.com
>
>
> > > 1) What is "TransferTo"?
>
> Hmm, isn't TransferTo an old "interface" fn?
>
> Another q, what does the event binding code look like? (ie: who is
> calling openWindow and closeWindow)
_
Drag n’ drop—Get easy photo sharing with Windows Live™ Photos.
http://www.microsoft.com/windows/windowslive/photos.aspx
[jQuery] Re: jQuery show(), hide() problems
> > 1) What is "TransferTo"? Hmm, isn't TransferTo an old "interface" fn? Another q, what does the event binding code look like? (ie: who is calling openWindow and closeWindow)
[jQuery] Re: jQuery show(), hide() problems
There is one instance of .show() and once instance of .hide() in his code...
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> Behalf Of MorningZ
> Sent: Monday, January 26, 2009 10:11 PM
> To: jQuery (English)
> Subject: [jQuery] Re: jQuery show(), hide() problems
>
> Few questions that may help others help you
>
> 1) What is "TransferTo"?
> 2) You say in the topic "show(), hide()" problems... there is no "hide
> ()" in that limited code you show
> 3) Why use "$()" in a few places and "jQuery()" in another?
>
>
> On Jan 26, 5:20 pm, viklund_anders wrote:
> > Hi,
> >
> > I would like some help to understand why this code works perfectly
> > fine the first time I open the window and close it, after this I
> > cannot open the window any more, unless I reload the page.
> >
> > Thanks for any ideas!
> >
> > function openWindow(messageText) {
> > $("#appendRow").TransferTo(
> > {
> > to:'window',
> > className:'transferer2',
> > duration: 400,
> > complete: function()
> > {
> > jQuery('#window').show();
> > }
> > }
> > );
> >
> > $('#window').blur();
> > return false;
> > }
> >
> > function closeWindow(){
> > $('#window').TransferTo(
> > {
> > to:'appendRow',
> > className:'transferer2',
> > duration: 400
> > }
> > ).hide();
> > }
[jQuery] Re: jQuery show(), hide() problems
Few questions that may help others help you
1) What is "TransferTo"?
2) You say in the topic "show(), hide()" problems... there is no "hide
()" in that limited code you show
3) Why use "$()" in a few places and "jQuery()" in another?
On Jan 26, 5:20 pm, viklund_anders wrote:
> Hi,
>
> I would like some help to understand why this code works perfectly
> fine the first time I open the window and close it, after this I
> cannot open the window any more, unless I reload the page.
>
> Thanks for any ideas!
>
> function openWindow(messageText) {
> $("#appendRow").TransferTo(
> {
> to:'window',
> className:'transferer2',
> duration: 400,
> complete: function()
> {
> jQuery('#window').show();
> }
> }
> );
>
> $('#window').blur();
> return false;
> }
>
> function closeWindow(){
> $('#window').TransferTo(
> {
> to:'appendRow',
> className:'transferer2',
> duration: 400
> }
> ).hide();
> }
[jQuery] jQuery show(), hide() problems
Hi,
I would like some help to understand why this code works perfectly
fine the first time I open the window and close it, after this I
cannot open the window any more, unless I reload the page.
Thanks for any ideas!
function openWindow(messageText) {
$("#appendRow").TransferTo(
{
to:'window',
className:'transferer2',
duration: 400,
complete: function()
{
jQuery('#window').show();
}
}
);
$('#window').blur();
return false;
}
function closeWindow(){
$('#window').TransferTo(
{
to:'appendRow',
className:'transferer2',
duration: 400
}
).hide();
}
[jQuery] jQuery show(), hide() problems
Hi,
I would like some help to understand why this code works perfectly
fine the first time I open the window and close it, after this I
cannot open the window any more, unless I reload the page.
Thanks for any ideas!
function openWindow(messageText) {
$("#appendRow").TransferTo(
{
to:'window',
className:'transferer2',
duration: 400,
complete: function()
{
jQuery('#window').show();
}
}
);
$('#window').blur();
return false;
}
function closeWindow(){
$('#window').TransferTo(
{
to:'appendRow',
className:'transferer2',
duration: 400
}
).hide();
}
[jQuery] Show/Hide Toggle Table
Hey Guys, I'm new to jquery, and haven't much experience with
javascript. I'm trying to toggle a few rows on a table with a show/
hide. Is this possible with a table or do I need to rewrite my view
using divs?
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('a#slick-toggle').click(function() {
$('#slickbox').toggle(250);
return false;
});
});
Description
Business value
Story points
<% for story in @stories %>
">
[+]
<%=h story.description %>
<%=h story.business_value %>
<%=h story.story_points %>
<%= link_to 'Show', story %>
<%= link_to 'Edit', edit_story_path
(story) %>
<%= link_to 'Destroy', story, :confirm
=> 'Are you sure?', :method => :delete %>
<% if story.tasks.count > 0 %>
Task
Assigned User
Rem. Time
<% for task in story.tasks %>
">
<%=h task.task %>
<%=h task.user_id %>
<%=h humanize_time(
Task.calculate_remaining_time_on_task
( task.id ) ) %>
<% end %>
Remaining:
<%= humanize_time(
Task.calculate_remaining_time_on_story
( story.id ) ) %>
<% end %>
<% end %>
<%= link_to 'New story', new_story_path %>
[jQuery] show/hide opacity gets stuck sometimes
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] show/hide/toggle: suggestion to reduce show/hide code
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. -Dylan
[jQuery] Re: jQuery Show/Hide validation problem
Use the submitHandler-option to run code once the form is valid. Jörn On Wed, Nov 5, 2008 at 12:20 PM, Daniel <[EMAIL PROTECTED]> wrote: > > I am using jQuery show/hide functions on click, so when you click on > the contact link it hides that div and then shows a contact form. Once > you fill in the contact form and click submit it shows the thanks page > div. > > I am using validation from here: > http://bassistance.de/jquery-plugins/jquery-plugin-validation/ > > The problem is, is that I need it so when you click on submit on the > contact form page it doesn't show and hide the div if the validation > has failed as it does now. > > Is there anyway of making it so that I can only click the submit > button or show hide the divs if validation is passed? > > Thanks >
[jQuery] jQuery Show/Hide validation problem
I am using jQuery show/hide functions on click, so when you click on the contact link it hides that div and then shows a contact form. Once you fill in the contact form and click submit it shows the thanks page div. I am using validation from here: http://bassistance.de/jquery-plugins/jquery-plugin-validation/ The problem is, is that I need it so when you click on submit on the contact form page it doesn't show and hide the div if the validation has failed as it does now. Is there anyway of making it so that I can only click the submit button or show hide the divs if validation is passed? Thanks
[jQuery] Show/Hide. Could someone, please, help me with this?
Hello, I have a form as following: Personal Data Options 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] Show/Hide items in unordered list
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 as http://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 items. Does anyone have any sample code or an example they have seen that they could point me towards? Thanks in advance. Wayne
[jQuery] show hide selected on page load (beginner)
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
should be shown. how can I show the right div, when the page loads?
thank
tom
[jQuery] Using jquery show/hide from different URLs
Hi, I working on a project in which I am using Jquery to show/hide content. it is working fine, however I would like to have links on different pages pointing to such content. So, as for now, I can only use show/hide content with links on the same page (e.g. : page1.php). Is there a way to make it work from a different url? Tks, Al
[jQuery] Show/Hide divs beginning with a specified string
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:
{EngineerName}{NumberJobs} Job(s)
{day1}{job1}
{day2}{job2}
{day3}{job3}
{day4}{job4}
{day5}{job5}
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
as a child of a engineer_week
div?
Thank you for any help,
Adam Sykes
[jQuery] Show/hide toggle hides form too...bah!
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 . However, when you try to focus in that
by clicking, the form hides.
So, what I'd like to know is how to show the contents by
clicking anywhere in the , 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] show/hide nested divs?
Hi all,
I have code something like:
Box Title
Box Title
box content...
Box Title
Box Title
box content...
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] show/hide flyout menu panel
Hi all, my first post to this list, having exhausted the tutorials, plugins and documentation. I am building a flyout menu, where each flyout is a scrollable div (using jScrollPane for custom scrollers) containing a heading and unordered list of many items. Each flyout div is triggered from an anchor inside the primary navigation unordered list items. I have the flyout working using show/hide on the primary nav anchor except it disappears before I get to the scrollable div. Q. Are there standard techniques for extending the allowable hover area to the flyout div, and then hiding when mouse outside the flyout div or over the next primary navigation? Most of the tutorials focus on nested unordered lists or show-hide panels used outside of a navigation context. I pseudo code I think I need to : for each anchor in the primary nav list: set up the reveal and hide actions for the associated flyout div id which first hides any shown flyouts, then shows or fadeIns the correct div allows a small delay after leaving the hover area to get to the flyout, hide the flyout when leaving the flyout Am I on the right track? Any pointers gratefully recieved. SeanR
[jQuery] Show/hide table rows from Select needs trim
Basically what I have is a table with two columns: dates & report
names. Within the dates I have four separate views: Week, Month, Three
Months (default selected) and Six Months (hidden). The select shows/
hides the table rows based on their view, showing all the reports up
until the selected view.
I have to add the show/hide class to the Six Month td's as well
because FF2.x has a bug that messes up the td's in hidden rows once
they're shown. I'll work on finding resolution to that separately.
I have the function working, but as you'll see, it's kind of a beast.
My thinking was that I should be able to filter based on an array vs.
multiple if statements. If anyone could help me refactor the code, or
show me a different approach, I'd appreciate it.
Thanks.
$(document).ready(function(){
$("#myTable tbody tr").addClass("group");
$(".3").hide();
});
$(document).ready(function(){
$("select").change(function(){
$(".group, tbody td").hide().filter("."+$
(this).val()).show();
$("."+$(this).val()).parent().show();
if($(this).val() == '3'){
$("tbody tr, tbody td").show();
}
else if($(this).val() == '2'){
$("tbody td.1, tbody td.0").show();
$("tbody td.1, tbody
td.0").parent().show();
}
else if($(this).val() == '1'){
$("tbody td.0").show();
$("tbody td.0").parent().show();
}
});
});
Past week
Past month
Past 3
months
Past 6 months
datename
13-12-2007Report 8
12-12-2007Report 7
14-11-2007Report 6
08-11-2007Report 5
05-10-2007Report 4
02-10-2007Report 3
05-07-2007Report 2
02-07-2007Report 1
[jQuery] Show/Hide Div with checkbox options providing same results
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, value1 value2 value3 value4 value5 Show Div 1 Show Div 2 Show Div 3 Show Div 4 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] show\hide back button
i have a simple hide the search button and replace it with a loading graphic
script, however on firefox if i hit the back button the loading image is
there not the search button. On IE the search button is back as expected
$(document).ready(function(){
$("#search-form").submit( function() {
$("#search-button").hide()
$("#search-loading").show();
});
});
--
View this message in context:
http://www.nabble.com/show%5Chide-back-button-tf4858111s27240.html#a13902135
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] show\hide back button
i have a simple hide the search button and replace it with a loading
graphic script, however on firefox if i hit the back button the
loading image is there not the search button. On IE the search button
is back as expected
$(document).ready(function(){
$("#search-form").submit( function() {
$("#search-button").hide()
$("#search-loading").show();
});
});
[jQuery] Show/Hide divs depending on choice made in a select box
I have a select box with this structure: OPTION1 OPTION2 -OPTION3 -OPTION4 OPTION5 -OPTION6 -OPTION7 -OPTION8 OPTION9t 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] show/hide based on list selection
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. The test page is at http://globin.bx.psu.edu/phencode-test/t.html Thanks, Belinda
[jQuery] show/hide FAQ - simplify my code?
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 --
[jQuery] Re: Display problem with Jquery show & hide - slide in & out functions
Hi thnks for your reply, I am using ie7. The issue is occuring just after a slide out, seems to me that the div is actually reappearing for half a second just afterwards... I have no idea why is so, I have seen other examples using the slide out effect without seeing the same issue that I see on mine. Regards Simon
[jQuery] Re: Display problem with Jquery show & hide - slide in & out functions
I'M on IE7. It seems like the flashing occurs right after the slide up function has been called, after it slides, it flashes very fast, but you should be able to see it... I have seen other examples of sliding effects that are not doing this... So maybe I am doing something wrong... Thanks
[jQuery] Re: Display problem with Jquery show & hide - slide in & out functions
I seen no flashing here. What browser are you on? On 29 sep, 16:28, wizofoz777 <[EMAIL PROTECTED]> wrote: > My website is using slie in & out & hide functions, but I have no idea > why, when I am hiding (slideout) my differents div, the content > flashes the screen before it hides away... I have tried many thing, > but I can get rid of that anoying behavior... I need help please... > could it be a swf conflict ? > > Here is my web page -->http://msaski.s458.sureserver.com/fr/exemple.html > Here is code used in the page > -->http://msaski.s458.sureserver.com/code/skimsa.js > > Thanks all in advance
[jQuery] Display problem with Jquery show & hide - slide in & out functions
My website is using slie in & out & hide functions, but I have no idea why, when I am hiding (slideout) my differents div, the content flashes the screen before it hides away... I have tried many thing, but I can get rid of that anoying behavior... I need help please... could it be a swf conflict ? Here is my web page --> http://msaski.s458.sureserver.com/fr/exemple.html Here is code used in the page --> http://msaski.s458.sureserver.com/code/skimsa.js Thanks all in advance
[jQuery] Show Hide across divs with tabs and menus
This is probably very simple (, but not to me, I'm still learning so
take it easy on me). When a user clicks a menu item while on Tab 2, I
want the default area to hide, and then the relevant area to show.
Here is the file so far with notes on what should happen on clicked
events:
...
//
// jQuery
//
// Since we are using prototype as well, set diff var for
jQuery
(default is $)
var $jQ = jQuery.noConflict();
$jQ(document).ready(function(){
// tabs
$jQ('#container').tabs();
// menu tab 1
$jQ("dd:not(:first)").hide();
$jQ("dt a").click(function(){
$jQ("dd:visible").slideUp("slow");
$jQ(this).parent().next().slideDown("slow");
//alert ("You are here :"+this.val());
return false;
});
});
...
Header
Tab One
Tab Two
Tab 1 Area 1
Tab 1
Menu 1
Tab 1
Menu 2
Tab 1 Area 2
Tab 1
Menu 3
Tab 1
Menu 4
This area is always visible on Tab 1
Tab 2 Area 1
Tab 2 Menu 1
Tab 2 Menu 2
Tab 2 Area 2
Tab 2 Menu 3
Tab 2 Menu 4
This area only shows up if user has not select a Tab 2
Menu item. Please select a menu item.
This area shows up if user selects Tab 2 Menu item 1.
This area shows up if user selects Tab 2 Menu item 2,
etc...
[jQuery] Show Hide across divs with tabs and menus
This is probably very simple (I'm still learning so take it easy on
me). When a user clicks a menu item while on Tab 2, I want the default
area to hide, and then the relevant area to show. Here is the file so
far with notes on what should happen on clicked events:
...
//
// jQuery
//
// Since we are using prototype as well, set diff var for jQuery
(default is $)
var $jQ = jQuery.noConflict();
$jQ(document).ready(function(){
// tabs
$jQ('#container').tabs();
// menu tab 1
$jQ("dd:not(:first)").hide();
$jQ("dt a").click(function(){
$jQ("dd:visible").slideUp("slow");
$jQ(this).parent().next().slideDown("slow");
//alert ("You are here :"+this.val());
return false;
});
});
...
Header
Tab One
Tab Two
Tab 1 Area 1
Tab 1
Menu 1
Tab 1
Menu 2
Tab 1 Area 2
Tab 1
Menu 3
Tab 1
Menu 4
This area is always visible on Tab 1
Tab 2 Area 1
Tab 2 Menu 1
Tab 2 Menu 2
Tab 2 Area 2
Tab 2 Menu 3
Tab 2 Menu 4
This area only shows up if user has not select a Tab 2
Menu item. Please select a menu item.
This area shows up if user selects Tab 2 Menu item 1.
This area shows up if user selects Tab 2 Menu item 2,
etc...
[jQuery] Show / hide options based on class
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?
--
Regards, Michael Price - [EMAIL PROTECTED]
---
Edward Robertson Ltd. - 1 Bondgate, Darlington, DL3 7JA
Direct: 01325 245077 - http://www.edwardrobertson.co.uk
Office: 01325 489333 - http://www.internetwebsitedesign.co.uk
---
Registered Address:
1 Bondgate, Darlington, County Durham, DL3 7JA, UK
Registration Number: 3931089 - Company registered in England
---
This electronic message transmission contains information from
Edward Robertson Limited that may be proprietary, confidential
and/or privileged. The information is intended only for the use
of the individual(s) or entity named above. If you are not the
intended recipient, be aware that any disclosure, copying,
distribution or use of the contents of this information is
prohibited. If you have received this electronic transmission
in error, please notify the sender immediately by replying to
the address listed in the "From:" field.
[jQuery] Show hide div with cookie for remembering position -- possible solution
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:
$('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();
};
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] show/hide revisited
i can imagine that most people here cant see this topic anymore but
however help is needed.
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)?
please bear with me it this has been already asked multiple times, but
i did a search and couldnt find the answer.
http://www.w3.org/1999/xhtml";>
test
$(document).ready(function()
{
$('.commenting').hide();
$('a.show_com').click(function()
{
$(this).toggleClass('show_com').toggleClass('hide_com');
$('a.show_com').text("SHOW COMMENTS");
$('a.hide_com').text("HIDE COMMENTS");
if($(this).attr("class") == 'hide_com') {
$(this).parent().parent().next('div').slideDown('slow');
} else {
$(this).parent().parent().next().slideUp('fast');
}
return false;
});
});
SHOW COMMENTS
test test test
[jQuery] Show()/Hide() Bug?
Source HTML file: --- http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd"> http://www.w3.org/1999/xhtml"; > Show/Hide Test Test text After loading in browser I see: Test text Is it bug? :)
