pass parameter to activate onclick

Tim32 · March 20, 2019

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>

requinix · March 20, 2019

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

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

Tim32 · March 20, 2019

http://intranet.me.local/Events.php#Event2

requinix · March 20, 2019

That doesn't answer my question...

Tim32 · March 20, 2019

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

requinix · March 20, 2019

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.

Tim32 · March 20, 2019

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>

requinix · March 20, 2019

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

Tim32 · March 20, 2019

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.

requinix · March 20, 2019

...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.

Tim32 · March 20, 2019

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>

requinix · March 20, 2019

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

Tim32 · March 21, 2019

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.

requinix · March 21, 2019

Works over here.

Does it work from within Events.php?

Tim32 · March 22, 2019

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.

requinix · March 22, 2019

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; }

Tim32 · March 22, 2019

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

Sign In

pass parameter to activate onclick

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information