Jump to content
Please Use CODE Tags

HTML/JS show div on link press

Flanelman
By Flanelman
in Programming
 Share
Posted

Hey guys, so i have a div which i have set the display to none in the css, and when i press a link I want this div to display. here is the link/div in my html:
  

<a href="#" id="results">Results</a>

<div class = "Hidden">
  //class contains a semi transparent background color I want to go over the main page
</div>

Then here is the JS i have (I'm not good with JS so this is mainly what I could figure out from reading other people questions online)

  

<script type="text/javascript"> 
   $(function() {
       $('#results').click(function() {
           $('.Hidden').show();
           return false;
       });        
   });

I'm not sure if this is meant to be in a seperate JS file or in the HTML but i have it in a JS file, but when I click the link nothing happens, except a "#" appears on the end of the URL.

Any help would be greatly appreciated :)
 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You can put it wherever you like. 

  

<!DOCTYPE html>
<html>
<head>
<style>
#hidden {
    display: none;
}
</style>
</head>
<body>

<h1>Hello World</h1>

<p ID="hidden">This is so hidden</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var div = document.getElementById('hidden');
    div.style.display = 'block';
}
</script>

</body>
</html>

You can put the script inside a JS file then add this to the head 

<script src="myScript.js"></script>

 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
50 minutes ago, vorticalbox said:

You can put it wherever you like. 

  


<!DOCTYPE html>
<html>
<head>
<style>
#hidden {
    display: none;
}
</style>
</head>
<body>

<h1>Hello World</h1>

<p ID="hidden">This is so hidden</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var div = document.getElementById('hidden');
    div.style.display = 'block';
}
</script>

</body>
</html>

You can put the script inside a JS file then add this to the head 


<script src="myScript.js"></script>

 

Is there anyway to do this on a link rather than a button? :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, Flanelman said:

Is there anyway to do this on a link rather than a button? :)

<a href='#' onclick="myFunction()">Show Results</a>

The onclick part is the important bit.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
5 minutes ago, vorticalbox said: 

<a href='#' onclick="myFunction()">Show Results</a>

The onclick part is the important bit.

Cool thanks man! I'll give this a go in the morning! 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

post back if you need any more help.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
On 8/27/2016 at 11:58 PM, vorticalbox said:

post back if you need any more help.

Thanks man appreciate the help! Here is the code in my html (in the order it appears in the file in case that matters) but it doesn't seem to work, just adds a '#" to the end of the URL still.

  

<body>

function myFunction()
    {
      var div = document.getElementById('hidden');
      div.style.display = 'block';
    }

<div class = "Links">
	<a href="Index.html">Home</a>
	<a href="#" onclick="myFunction()">Results</a>
	<a href="url">Events</a>
	<a href="url">Other</a>
</div> <!-- Links div ends here -->

...
<unrelated code>
...

<div ID="hidden">
	<!-- this will drop down when they press the results button -->
		
</div> <!-- Hidden div ends here -->
</body>

Can you see anything wrong with what I've done? cheers :)

edit: (the hidden div has a background colour in the CSS just so you don't think i'm trying to call an empty div)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

the function is not in script tags and I would move it into the <head> just for neatness.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Do you have to use JS? I do the same thing with just HTML and CSS.

-KuJoe

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
8 hours ago, Flanelman said:

Thanks man appreciate the help! Here is the code in my html (in the order it appears in the file in case that matters) but it doesn't seem to work, just adds a '#" to the end of the URL still.

Can you see anything wrong with what I've done? cheers :)
edit: (the hidden div has a background colour in the CSS just so you don't think i'm trying to call an empty div)

The function should be added to a script. The script be be inline or outline, meaning you can have it in the HTML file or its own separate javascript file. If you want it inline, you have to do it like this: 

<html>
  <head>
  //You have to put the script here like this (HTML will automatically assume this is Javascript, if you wanted to add Jquery or something different you have to actually say what kind of language it is in the script tag):
  <script>
  //function here
  </script>
  </head>
  
  <body>
    //etc. etc.
  </body>
</html>

 

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
18 hours ago, vorticalbox said:

the function is not in script tags and I would move it into the <head> just for neatness.

oh sorry I forgot to copy and paste it, it is in the file. I moved it to the head like yopu said but it just wont work, pretty confused. :)

 

18 hours ago, KuJoe said:

Do you have to use JS? I do the same thing with just HTML and CSS.

Nah I just thought it would be easier, but how do you do it in html/css? :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
20 hours ago, KuJoe said:

Do you have to use JS? I do the same thing with just HTML and CSS.

problem is cross browser and platform support for css3 and html 5.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
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
 Share
Go to topic listing Programming

×