Tim32 Posted March 20, 2019 Share Posted 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">×</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">×</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">×</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">×</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">×</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 More sharing options...
requinix Posted March 20, 2019 Share Posted 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? Link to comment Share on other sites More sharing options...
Tim32 Posted March 20, 2019 Author Share Posted March 20, 2019 http://intranet.me.local/Events.php#Event2 Link to comment Share on other sites More sharing options...
requinix Posted March 20, 2019 Share Posted March 20, 2019 That doesn't answer my question... Link to comment Share on other sites More sharing options...
Tim32 Posted March 20, 2019 Author Share Posted March 20, 2019 I am sorry but I don't understand what you are looking for. Link to comment Share on other sites More sharing options...
requinix Posted March 20, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
Tim32 Posted March 20, 2019 Author Share Posted 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> Link to comment Share on other sites More sharing options...
requinix Posted March 20, 2019 Share Posted March 20, 2019 Well yeah, you didn't include the onclick with those links. You need that. Link to comment Share on other sites More sharing options...
Tim32 Posted March 20, 2019 Author Share Posted 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. Link to comment Share on other sites More sharing options...
requinix Posted March 20, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
Tim32 Posted March 20, 2019 Author Share Posted 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">×</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">×</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">×</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">×</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">×</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 More sharing options...
requinix Posted March 20, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
Tim32 Posted March 21, 2019 Author Share Posted 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. Link to comment Share on other sites More sharing options...
requinix Posted March 21, 2019 Share Posted March 21, 2019 Works over here. Does it work from within Events.php? Link to comment Share on other sites More sharing options...
Tim32 Posted March 22, 2019 Author Share Posted 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. Link to comment Share on other sites More sharing options...
requinix Posted March 22, 2019 Share Posted 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; } Link to comment Share on other sites More sharing options...
Tim32 Posted March 22, 2019 Author Share Posted March 22, 2019 Thank you very much for your help. It works perfectly now. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.