Div and Button display as active and open only on certain pages

[Takaya213]

Hi

I have a DIV overlay that I want to show as open only on certain pages but not on others (it is on all pages). The button that is related to the DIV must also display as on when the DIV overlay is open and in the off state when it is closed.

This must happen on page load.

e.g. DIV open, button on.
DIV closed, button off.

I have the click show and activation working so all i need is it to display as open and on, on certain pages and then on others closed and off.

An help would be greatly appreaciated.

Thanks

[Charlie Tomlinson]

what are parameters to determine your "certain pages"? does this require an involved solution like parsing url or would a simple solution like adding class to body like "myOverlay" and use that as selector in code to run overlay functions?

Takaya213 wrote:

Hi

I have a DIV overlay that I want to show as open only on certain pages but
not on others (it is on all pages). The button that is related to the DIV
must also display as on when the DIV overlay is open and in the off state
when it is closed.

This must happen on page load.

e.g. DIV open, button on.
DIV closed, button off.

I have the click show and activation working so all i need is it to display
as open and on, on certain pages and then on others closed and off.

An help would be greatly appreaciated.

Thanks
  

[Takaya213]

The class solution would work fine.

As there is only 1 page that the overlay really needs to be open on and the button active so a class function would be sufficient.

Charlie Tomlinson wrote:

what are parameters to determine your "certain pages"? does this
require an involved solution like parsing url or would a simple
solution like adding class to body like "myOverlay" and use that as
selector in code to run overlay functions?

Takaya213 wrote:

 
Hi

I have a DIV overlay that I want to show as open only on certain pages but
not on others (it is on all pages). The button that is related to the DIV
must also display as on when the DIV overlay is open and in the off state
when it is closed.

This must happen on page load.

e.g. DIV open, button on.
DIV closed, button off.

I have the click show and activation working so all i need is it to display
as open and on, on certain pages and then on others closed and off.

An help would be greatly appreaciated.

Thanks
 

[Takaya213]

Hi Can anybody help me please?

Thanks

[Charlie Tomlinson]

Can you put together a sample page link with your modal and give a better description of what you mean by button="off". Does this mean disabled, or css change? Seeing what you are working with would make finding the solution much easier

Takaya213 wrote:

Hi Can anybody help me please?

Thanks
  

[Takaya213]

The button image has 2 states an on when it is active and an off when it is inactive. I am not too concerned about this one, but more of the showing and hiding of the overlay on page load.

Thanks.

Charlie Tomlinson wrote:

Can you put together a sample page link with your modal and give a
better description of what you mean by button="off". Does this mean
disabled, or css change? Seeing what you are working with would make
finding the solution much easier

Takaya213 wrote:

 
Hi Can anybody help me please?

Thanks
 

[Charlie Tomlinson]

shot in the dark here................ $("#overlay").show(). ??

Takaya213 wrote:

The button image has 2 states an on when it is active and an off when it is
inactive. I am not too concerned about this one, but more of the showing and
hiding of the overlay on page load.

Thanks.


Charlie Tomlinson wrote:
  

Can you put together a sample page link with your modal and give a
better description of what you mean by button="off". Does this mean
disabled, or css change? Seeing what you are working with would make
finding the solution much easier 

Takaya213 wrote:

  
Hi Can anybody help me please?

Thanks
  






    

[Takaya213]

It is the exact same overlay that has to show as open on the homepage and closed on all of the other pages, but you can click on a button to show and hide it as well.
That is the button that must show as selected/active when the overlay is open and as unselected/inactive when closed.

Open Overlay - http://www.njwebdesign.co.za/TestImages/openOverlay.jpg
Closed Overlay - http://www.njwebdesign.co.za/TestImages/closedOverlay.jpg

Now it needs to be open on the homepage and closed on the other pages.

Charlie Tomlinson wrote:

shot in the dark here................ $("#overlay").show(). ??

Takaya213 wrote:

 
The button image has 2 states an on when it is active and an off when it is
inactive. I am not too concerned about this one, but more of the showing and
hiding of the overlay on page load.

Thanks.


Charlie Tomlinson wrote:
 
 
   
Can you put together a sample page link with your modal and give a
better description of what you mean by button="off". Does this mean
disabled, or css change? Seeing what you are working with would make
finding the solution much easier

Takaya213 wrote:

 
Hi Can anybody help me please?

Thanks
 






   
 
 
 

[Charlie Tomlinson]

maybe someone else can help. You said you had code to make it work from button click. Would use similar code on page open also. Now I see 2 images and seems like all you need to do is swap images. Hard to do without seeing markup, exisitng code.



Takaya213 wrote:

It is the exact same overlay that has to show as open on the homepage and
closed on all of the other pages, but you can click on a button to show and
hide it as well.
That is the button that must show as selected/active when the overlay is
open and as unselected/inactive when closed.

Open Overlay -  http://www.njwebdesign.co.za/TestImages/openOverlay.jpg
http://www.njwebdesign.co.za/TestImages/openOverlay.jpg 
Closed Overlay -  http://www.njwebdesign.co.za/TestImages/closedOverlay.jpg
http://www.njwebdesign.co.za/TestImages/closedOverlay.jpg 

Now it needs to be open on the homepage and closed on the other pages.


Charlie Tomlinson wrote:
  

shot in the dark here................ $("#overlay").show(). ?? 

Takaya213 wrote:

  
The button image has 2 states an on when it is active and an off when it
is
inactive. I am not too concerned about this one, but more of the showing
and
hiding of the overlay on page load.

Thanks.


Charlie Tomlinson wrote:
  
  
    
Can you put together a sample page link with your modal and give a
better description of what you mean by button="off". Does this mean
disabled, or css change? Seeing what you are working with would make
finding the solution much easier 

Takaya213 wrote:

  
Hi Can anybody help me please?

Thanks
  






    
  
  
  






    

[Doug Nelson-2]

So it sounds like you'd want to put a class like "hasOverlay" on the
homepage body.

<body class="hasOverlay">

Then, create the function that makes your overlay appear. This
function needs to be standalone, don't attach it to an event just yet
because we'll need to access it two different ways.

So your JS code would look (structurally, at least) like this.

function showOverlay(){
  $('#overlay').fadeIn();
}

$(document).ready(){

if ($("body").hasClass("hasOverlay"))
  showOverlay();

$("#myButton").click(function(){
  showOverlay();
});

}