Jump to content

pass parameter to activate onclick


Tim32
 Share

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>

 

Link to comment
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.

Link to comment
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>

 

Link to comment
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.

Link to comment
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
Link to comment
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>

 

Link to comment
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.

Link to comment
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; }

 

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

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.