CODEWITHSUNDEEP
phpjqueryurlhtmlshow
Henrik Petterson
Henrik Petterson

Reputation: 7094

Show a specific div by adding code to URL

I have this code as an example:

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

</head>

<body>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

</body>
</html>

On a different page, I want to have a link that will show Div #2 when the user loads the page by clicking that external link. I would presume that such thing would be possible by some type of adjustment to the URL? For instance: domain.com/page.php?=showdiv2

Any assistance is appreciate, my knowledge of coding is limited (especially with PHP) so please be detailed if you choose to help.

Upvotes: 1

Views: 2343

Answers (5)

gherkins
gherkins

Reputation: 14983

You could do this using Javascript/jQuery only by checking for the hash part of the URL on page load:

http://mydomain.com/some/path#showcontainer1

HTML

<div class="container_one" style="display:none;">Content</div>
<div class="container_two" style="display:none;">Other Content</div>

JS

$(function(){

  switch( window.location.hash ){
    case '#showcontainer1':  //if hash is #showcontainer1
      $('.container_one').fadeIn();   //fadein the container with some class 
      break;
    default:
      $('.container_two').fadeIn()   //else fade container with other class
      break;
  }

});

Upvotes: 0

Lars Knickrehm
Lars Knickrehm

Reputation: 747

There are two steps to do: At first we need to know how to use parameters in our domain and finally the contents need to be switched.

1) You can add parameters to the called files as following:

http://server/path/file?key=value

For this examples let's use the key page. So these would be the urls you'd need to link:

http://server/path/file?page=div-1
http://server/path/file?page=div-2

2) Split your code into one php file containing all that's in there right now and two ones, called whatever you like, e.g. div-1.php and div-2.php . Into the latter ones you copy the specific div-1 and div-2 contents.

3) Finally open your main php file and remove div-1 and div-2. They should both be in the other files now. And enter the following php code:

<?php
if (isset($_REQUEST['page']) === false || in_array($_REQUEST['page'], array('div-1', 'div-2')) === false) {
    $_REQUEST['page'] = 'div-1';
}
include $_REQUEST['page'] . '.php';
?>

That urls will call the php file, that's pushing its content to the browser and while pushing it's executing the script we put in. The script verifies if the url parameter page is set, checks if it is valid and pushes the second file just where we put the script before. The latter check is highly required for security reasons (see below)!

Note: The following code line is used to display the default page, e.g. index or start. It can be changed easily.

$_REQUEST['page'] = 'div-1';

Note: We need to care about security and therefore do not allow pages, that do not exist. In case we don't do so, various php scripts on your server could be executed. Just change, edit or add additional elements to the array inside the if statement above:

array('div-1', 'div-2')

Upvotes: 1

Matt
Matt

Reputation: 7040

There are a number of ways to accomplish what you want to do here. I will explain how you can do it with $_GET.

You can control this with a $_GET variable (at the end of the URL, just add ?varName=value where varName is the name of a variable (this is arbitrary), and value is the value you want to assign it.

Then in your PHP code you can access this variable by a) checking if it exists and b) performing logic based on its value:

<?php
    $divToShow = isset($_GET['div']) ? $_GET['div'] : "";

    //logic here
?>

So for example, if you want <div id="div_2"> to be displayed, you could plug this in to jQuery by writing:

<script language="javascript" type="text/javascript">
    $("div#div_<?= $divToShow ?>").show();
    $("div:not(#div_<?= $divToShow ?>)").hide();
</script>

OR you could simply force PHP to only print out div # 2:

<?php
// set $divId to a value

if ($divId == $divToShow) : ?>
    <div id="<?= $divId ?>">
        <!-- content here -->
    </div>
<?php endif; ?>

Upvotes: 1

Walden Leverich
Walden Leverich

Reputation: 4546

As always there are many solutions, however we have a similar requirement in an application where we want one page to send a message to another to be displayed to the user. For example, after updating a setting return to the main page with the message "Setting Updated" at the top. Our solution was to send the message in the url, and then have a javascript that runs on every page load looking for a message in the url. If it's there it's shown to the user, if it's not there, nothing happens.

In our common pageLoad routine (javascript on every page) we do

if (jQuery.query.get('fadeMessage'))
{
    FadeMessage(jQuery.query.get('fadeMessage'));
}

And then FadeMessage is defined as:

function FadeMessage(message) {
jQuery('#fadeMessage').html(message).animate({ "top": "0" }, 1000).delay(2000).animate({ "top": "-80px" }, 1000);

}

The "fadeMessage" div is on every page as:

<div id="fadeMessage">
</div>

Although as I'm typing this I'm thinking we could just inject that div when it's needed. Hmmm... :-)

Upvotes: 1

JarroVGIT
JarroVGIT

Reputation: 5324

I would code it with PHP, something like this:

page.php?id=idofdiv

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
 $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(200);
      }
      else {
           $(this).hide(600);
      }
 });
}
$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});
</script>
</head>
<body>

         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

What I have done is : 

$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});

When PHP is parsed (which is server side) it will send the id given in the url ($_GET['id']) to parse within your jQuery code. This code will excecute when the document is ready.

if $_GET['id'] is empty, or nonexistence, then nothing will happen (there is no div to show).

Upvotes: 1

Related Questions