Jump to content
Tim32

pass parameter to activate onclick

Recommended Posts

First let me say that the only php code in the file is an include which has no bearing on my question.  I have a Events.php file which uses onlclick and javascript to show upcoming events that works well.  I now need to be able to call Events.php and have a specific element open from my index.php.  Usually I would just add <a href="Events.php#Event2">Event2</a> but that doesn't activate the onclick which displays the information.  What are my options?

Here is my Events.php file:

<!DOCTYPE html>
<html lang="en">
<title>Special Events</title>
<?php
    include('/website/_style_include.php');
?>
<body ONKEYDOWN="if (event.keyCode == 27){ document.getElementById('Event1').style.display = 'none'; document.getElementById('Event2').style.display = 'none'; document.getElementById('Event3').style.display = 'none'; document.getElementById('Event4').style.display = 'none'; document.getElementById('Event5').style.display = 'none';}">

<div class="w3-container w3-center">
  <div>
    <div class="w3-container">
      <h1 class="tinted-image-white"><b>Special Events</b></h1>
    </div>
    <div class="w3-twothird w3-padding">
      <div class="w3-card w3-padding w3-round-xlarge tinted-image-white">
        <p>The following is a list of Special Events.</p>
      </div>
      <br>
      <div class="w3-card w3-padding w3-round-xlarge tinted-image-white">
        <h5>
          <a href="#" onclick="document.getElementById('Event1').style.display='block'">Event1</a><br>
          <a href="#" onclick="document.getElementById('Event2').style.display='block'">Event2</a><br>
          <a href="#" onclick="document.getElementById('Event3').style.display='block'">Event3</a><br>
          <a href="#" onclick="document.getElementById('Event4').style.display='block'">Event4</a><br>
          <a href="#" onclick="document.getElementById('Event5').style.display='block'">Event5</a>
          </h5>
      </div>
    </div>
    <div class="w3-third w3-center w3-padding">
      <div class="tinted-image-white w3-center w3-padding w3-round-xlarge">
        <h5>Some important</h5>
        <hr>
        <h5>will be posted</h5>
        here later
      </div>
    </div>
  </div>
</div>

<!-- Event1 -->
<div class="w3-container">
  <div id="Event1" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span onclick="document.getElementById('Event1').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <h4>Event1</h4>
        Event information
        <p class="w3-right"><a href="#" onclick="document.getElementById('Event1').style.display='none'">Close</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Event2 -->
<div class="w3-container">
  <div id="Event2" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span onclick="document.getElementById('Event2').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <h4>Event2</h4>
        Event information
        <p class="w3-right"><a href="#" onclick="document.getElementById('Event2').style.display='none'">Close</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Event3 -->
<div class="w3-container">
  <div id="Event3" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span onclick="document.getElementById('Event3').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <h4>Event3</h4>
        Event information
        <p class="w3-right"><a href="#" onclick="document.getElementById('Event3').style.display='none'">Close</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Event4 -->
<div class="w3-container">
  <div id="Event4" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span onclick="document.getElementById('Event4').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <h4>Event4</h4>
        Event information
        <p class="w3-right"><a href="#" onclick="document.getElementById('Event4').style.display='none'">Close</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Event5 -->
<div class="w3-container">
  <div id="Event5" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span onclick="document.getElementById('Event5').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <h4>Event5</h4>
        Event information
        <p class="w3-right"><a href="#" onclick="document.getElementById('Event5').style.display='none'">Close</a></p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

 

Share this post


Link to post
Share on other sites

Linking to an anchor will not stop an onclick from firing.

What does your markup look like when you add the href?

Share this post


Link to post
Share on other sites

That doesn't answer my question...

Share this post


Link to post
Share on other sites

I am sorry but I don't understand what you are looking for.

Share this post


Link to post
Share on other sites

What I'm looking for is what your HTML markup looks like after you do

4 hours ago, Tim32 said:

Usually I would just add <a href="Events.php#Event2">Event2</a>

I'm assuming that when you say that, you mean you're setting the href and keeping the onclick. But I don't know what else. So I'd like you to do what you say you would normally do, then post what you end up with that doesn't work.

Share this post


Link to post
Share on other sites

This is my index.php which is calling the Events.php page.  What I want to happen is when the user clicks on Event1 from the index.php, it opens Events.php and brings up the Event1 information.  The code I have posted does this except for bringing up the Event1 information.  I have to click on Event1 in the Events.php to see the information.

<!DOCTYPE html>
<html lang="en">
<title>Intranet</title>
<div class="w3-container parallax">
	<div class="w3-container">
		<h1 class="tinted-image-white w3-round-xlarge"><b>Important Events you must attend this week!</b></h1>
	</div>
	<div>
		<a href="Events.php#Event1">Event1</a><br>
		<a href="Events.php#Event2">Event2</a><br>
		<a href="Events.php#Event3">Event3</a><br>
		<a href="Events.php#Event4">Event4</a>
	</div>
</div>
</body>
</html>

 

Share this post


Link to post
Share on other sites

Well yeah, you didn't include the onclick with those links. You need that.

Share this post


Link to post
Share on other sites

Thank you for pointing this out.  I was not aware that you could pass the onclick with a href.

I have tried:

<a href="Events.php" onclick="document.getElementById('Event1').style.display='block'">Event1</a><br>
<a href="Events.php" onclick="Event1">Event1</a><br>
<a href="Events.php" onclick="getElementById('Event1').style.display='block'">Event1</a><br>
<a href="Events.php" onclick="document.getElementById('Event1')">Event1</a><br>

along with a dozen other variations but I can't get it work.

Share this post


Link to post
Share on other sites

...oh wait, this code is not located on the page that renders Events.php? Okay, this all makes quite a bit more sense now.

You can do this showing/hiding stuff with pure CSS, which will also make it work automatically with Events.php#Event1 links.

Remove all the Javascript that deals with showing and hiding, including the various onclicks, and add a

<style>
a.w3-modal:not(:target) { display: none; }
</style>

to Events.php. The :target selector is true when you hit anchors like #Event1, so that CSS will hide the w3-modals that are not the current anchor. Which also means going to just Events.php (no anchor) will hide all of them by default.

  • Like 1

Share this post


Link to post
Share on other sites

Yes they are separate files.  Now Clicking on Event1 in Events.php does nothing.  Clicking on Event1 in index.php opens Events.php but does nothing.

<!DOCTYPE html>
<html lang="en">
<title>Special Events</title>
<head>
<link rel="stylesheet" href="/css/w3.css">
<style>
  a.w3-modal:not(:target) { display: all; }
</style>
</head>
<body>

<div class="w3-container w3-center">
  <div>
    <div class="w3-container">
      <h1 class="tinted-image-white"><b>Special Events</b></h1>
    </div>
    <div class="w3-twothird w3-padding">
      <div class="w3-card w3-padding w3-round-xlarge tinted-image-white">
        <p>The following is a list of Special Events.</p>
      </div>
      <br>
      <div class="w3-card w3-padding w3-round-xlarge tinted-image-white">
        <h5>
          <a href="#Event1">Event1</a><br>
          <a href="#Event2">Event2</a><br>
          <a href="#Event3">Event3</a><br>
          <a href="#Event4">Event4</a><br>
          <a href="#Event5">Event5</a>
          </h5>
      </div>
    </div>
    <div class="w3-third w3-center w3-padding">
      <div class="tinted-image-white w3-center w3-padding w3-round-xlarge">
        <h5>Some important</h5>
        <hr>
        <h5>will be posted</h5>
        here later
      </div>
    </div>
  </div>
</div>

<!-- Event1 -->
<div class="w3-container">
  <div id="Event1" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span class="w3-button w3-display-topright">&times;</span>
        <h4>Event1</h4>
        Event information
        <p class="w3-right"><a href="#">Close</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Event2 -->
<div class="w3-container">
  <div id="Event2" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span class="w3-button w3-display-topright">&times;</span>
        <h4>Event2</h4>
        Event information
        <p class="w3-right"><a href="#">Close</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Event3 -->
<div class="w3-container">
  <div id="Event3" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span class="w3-button w3-display-topright">&times;</span>
        <h4>Event3</h4>
        Event information
        <p class="w3-right"><a href="#">Close</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Event4 -->
<div class="w3-container">
  <div id="Event4" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span class="w3-button w3-display-topright">&times;</span>
        <h4>Event4</h4>
        Event information
        <p class="w3-right"><a href="#">Close</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Event5 -->
<div class="w3-container">
  <div id="Event5" class="w3-modal">
    <div class="w3-modal-content w3-animate-zoom">
      <div class="w3-container">
        <span class="w3-button w3-display-topright">&times;</span>
        <h4>Event5</h4>
        Event information
        <p class="w3-right"><a href="#">Close</a></p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

 

Share this post


Link to post
Share on other sites

It should be div.w3-modal (I was looking at other stuff and got confused), and it should be display:none not display:all.

Share this post


Link to post
Share on other sites

I am sorry I didn't get back sooner but I had a different project I had to get today.  The div.w3-modal doesn't work either.  Nothing happens when I click Event1.

Share this post


Link to post
Share on other sites

It only works without the w3.css.  With the w3.css nothing happens, or maybe something is happening but it is covered up?  I even switched to using <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" type="text/css" media="screen"> in case my copy of w3.css was bad.

Share this post


Link to post
Share on other sites

When using someone else's libraries, make sure you know what they do.

.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}

.w3-modal is hidden by default. That means this rule

div.w3-modal:not(:target) { display: none; }

which also makes it hidden isn't going to help, and thus has to be inverted to

div.w3-modal:target { display: block; }

 

Share this post


Link to post
Share on other sites

Thank you very much for your help.  It works perfectly now.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.