9 Replies - 6131 Views - Last Post: 27 September 2011 - 05:54 PM

#1 Djsquid  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 25-September 11

Jquery If & else statement for visible and hidden

Posted 25 September 2011 - 02:28 AM

Hey all,

I'm working on a summer project for university, and I am 99% finished on it, there is just one small thing that I am stuck on;

I have a navigation system with a sub menu within one of the anchors, the sub menu has fadeIn on it when you click on the anchor, and so what I am after is;

When the sub menu is visible, I need the homepage opacity to drop to 25%, and when the sub menu is hidden I need the homepage opacity to come back to 100%

I thought this was possible through an If, else statement but as I am a novice I am unsure of this, and so far got this;

 

$("#cat").click(function(){
 if ($('.sub1').is(':visible') ) {
 $(".homepage").fadeTo(500, .25);}

 else {
 $(".homepage").fadeTo(500, 1);

 }





I have also tried this via .CSS which partially works, when the sub menu is visible the Homepage opacity drops but then when I click #cat and the sub menu is hidden, the homepage won't come back to 100% opacity ;

$("#cat").click(function(){
    if ($('.sub1').css('opacity') == .25 ) {  

        $('.homepage').fadeTo(500, 1);

    } else {

        $('.homepage').fadeTo(500, .25); 
    }
});



Is This A Good Question/Topic? 0
  • +

Replies To: Jquery If & else statement for visible and hidden

#2 X-spert  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 56
  • Joined: 25-August 11

Re: Jquery If & else statement for visible and hidden

Posted 26 September 2011 - 08:56 AM

Hi,

Try this:
$(function () {
	$('.sub1').hide();
	$("#cat").click(function(){
		if ($('.sub1').is(':hidden')) {
			$(".homepage").fadeTo("slow", .25);
			$('.sub1').fadeTo("slow", 1);	
		}
		else {						
			$(".homepage").fadeTo("slow", 1);
			$('.sub1').fadeOut("slow");
		}							
	});		
});


Was This Post Helpful? 0
  • +
  • -

#3 Djsquid  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 25-September 11

Re: Jquery If & else statement for visible and hidden

Posted 26 September 2011 - 09:15 AM

Hey X-spert,

Thanks for the coding, unfortunately this didn't work for me :sad3:

it made the sub1 menu fade in, but then it automatically faded out,

and it didn't change the opacity of the homepage either,

I really appreciate the time in you replying though.

I did forget to mention in my original post that I am solely using Safari 5.1 for this site, as its a concept web site and won't be needing it for any other browser.


If anyone would like the actual site mock up I am working on its here:

Dreambay Site

This post has been edited by Djsquid: 26 September 2011 - 09:18 AM

Was This Post Helpful? 0
  • +
  • -

#4 rajesh.kakawat  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 43
  • Joined: 03-January 11

Re: Jquery If & else statement for visible and hidden

Posted 26 September 2011 - 10:23 AM

Try this, might give you result what you want.
 

$("#cat").click(function(){
   if ($('.sub1').is(":visible") ){
	$('.homepage').css('opacity',0.1);			
    }
    else {
	$('.homepage').css('opacity',100);	
     }
});




reply if it help or not
Was This Post Helpful? 0
  • +
  • -

#5 Djsquid  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 25-September 11

Re: Jquery If & else statement for visible and hidden

Posted 26 September 2011 - 10:31 AM

Hey rajesh.kakawat

thank you for your input,

its on the right lines, but the else part doesn't seem to function, and also this makes the .sub1 snap into place rather than fadeIn, the .sub1 class does have a fadeToggle function also. I'm not sure if this has any effect on the matter, but the .sub1 div is hidden via Jquery .hide rather than the CSS display:none

I can't understand why nothing seems to be working, the problem seems to be the else section on all of the codes I've been given :wacko:
Was This Post Helpful? 0
  • +
  • -

#6 X-spert  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 56
  • Joined: 25-August 11

Re: Jquery If & else statement for visible and hidden

Posted 27 September 2011 - 12:29 AM

Hi,

It doesn't work?! Hmm... I made a simple example yesterday and it worked. May be I didn't understand clear your needs.
Anyway, this is the entire example from yesterday. It works, but if you need other functionality let me know.

<html>
	<head>
		<meta charset="utf-8">
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
			$(function () {
				$('.sub1').hide();
				$("#cat").click(function(){
					if ($('.sub1').is(':hidden')) {
						$(".homepage").fadeTo("slow", .25);
						$('.sub1').fadeTo("slow", 1);	
					}
					else {						
						$(".homepage").fadeTo("slow", 1);
						$('.sub1').fadeOut("slow");
					}							
				});		
			});
		</script>
	</head>
	<body>
	<button id="cat" type="button">Click me!</button>
		<div class="homepage">
				
		<div>

			<!-- Sample page content to illustrate the layering of the dialog -->
			<div style="padding:20px;">
				<p>
					Sed vel diam id libero. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
				</p>
				<form>
					<input value="text input" /><br />
					<input type="checkbox" />checkbox<br />
					<input type="radio" />radio<br />
					<select>
						<option>select</option>
					</select><br /><br />
					<textarea>textarea</textarea><br />
				</form>
			</div><!-- End sample page content -->

		</div><!-- End demo -->
		</div>
		
		<div class="sub1">

			<!-- Sample page content to illustrate the layering of the dialog -->
			<div style="padding:20px;">
				<p>
					Sed vel diam id libero. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
				</p>
				<form>
					<input value="text input" /><br />
					<input type="checkbox" />checkbox<br />
					<input type="radio" />radio<br />
					<select>
						<option>select</option>
					</select><br /><br />
					<textarea>textarea</textarea><br />
				</form>
			</div><!-- End sample page content -->

		</div><!-- End demo -->
		
	</body>
</html>



Good Luck!
Was This Post Helpful? 1
  • +
  • -

#7 X-spert  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 56
  • Joined: 25-August 11

Re: Jquery If & else statement for visible and hidden

Posted 27 September 2011 - 01:01 AM

Hi again...
I saw your project (interesting) and you have allot of jQuery there.
I entered in navbox.js and just commented the "// Click Categories Opens First Sub menu" and it seems to work.
If you have other questions or if you want to change that functionality let me know.
Good luck!
Was This Post Helpful? 0
  • +
  • -

#8 Djsquid  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 25-September 11

Re: Jquery If & else statement for visible and hidden

Posted 27 September 2011 - 05:10 AM

X-spert.....You are an absolute legend!

After weeks of trying to get this thing to work, I have found what the problem is, using the code which you have provided for me, which I really appreciate you doing! I discovered that I had forgotten to delete ;


$('#cat').click(function() {
    $('.sub1').fadeToggle(500);
    return false;
  });




this was causing it problems! I can't believe it actually works now! fantastic, I really do appreciate the time and effort you have put in to help me with this btw,

I know its a bit of an unusual site, this is my first attempt at HTML, CSS & Jquery, I'm a graphic designer and just trying to learn it really and also this brief is for a placement for Landor Design agency so hopefully they will like the concept.

Thanks again X-pert!
Was This Post Helpful? 1
  • +
  • -

#9 X-spert  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 56
  • Joined: 25-August 11

Re: Jquery If & else statement for visible and hidden

Posted 27 September 2011 - 05:39 AM

Hi :)
I give to you 1 reputation point for stimulating you to learn more from now on.
It's a good idea for an web site (I know that for several years), but, you know, depends...
If you need help, for future, you can send me a PM.
Good Luck with your projects!
Was This Post Helpful? 1
  • +
  • -

#10 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6031
  • View blog
  • Posts: 23,414
  • Joined: 23-August 08

Re: Jquery If & else statement for visible and hidden

Posted 27 September 2011 - 05:54 PM

Moved to jQuery
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1