Jump to content
Please Use CODE Tags

Making a div clickable for changing another element

crispybagel
By crispybagel
in Programming
 Share
Posted

So basically what i want to do is, when i click a div, i want another div to show up. Practically it's a Static image of an email icon that moves along with the webpage, when i click that i want a div containing an "Email me" form that i've centered to be visible.

Problem : How do i make a div interactable/clickable without using the <a> tag, the <a> tag requires a href and i do not want to navigate to another html file or external website. I've tried using #EmailQuickAccess:active #emailpopup { visibility: visible; } and it doesn't work.

 

Edit: if you're wondering why there's 2 pictures #EmailIcon and #EmailIcon2, when i hover over it it changes , thats all it does.

 

HTML:  

<body>
	<div id="emailpopup"></div>
	<div id="EmailQuickAccess">
  		<img id="EmailIcon" src="Ikoner/Email.png" alt="HTML5 Icon">
  		<img id="EmailIcon2" src="Ikoner/Email Hover.png" alt="HTML5 Icon">
	</div>
<body>

 

CSS: 

#EmailIcon {
  position: fixed;
  top: 70%;
  width: 9%;
  height: auto;
  left: 5.5%;
  z-index: 100;
}
#EmailIcon2 {
  position: fixed;
  top: 70%;
  width: 9%;
  height: auto;
  left: 5.5%;
  z-index: 99;
  display: none;
}
#EmailQuickAccess:hover #EmailIcon { display:none; }
#EmailQuickAccess:hover #EmailIcon2 { display:block; }
#EmailQuickAccess:active #emailpopup { visibility: visible;}
#emailpopup {
  position: fixed;
  visibility: hidden;
  background: #989898;
  width: 40%;
  height: 500px;
  top: 15%;
  left: 30%;
  z-index: 200;
}

 

 

View my builds here!
https://pcpartpicker.com/user/Crispybagel/builds/

 

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

Not the best with Front end stuff and I probably didn't read your question properly so it might not be 100% but: 

<div onclick='hideDiv' id="emailpopup"></div>
hideDiv(){
var temp = document.getElementById('EmailQuickAccess');
temp.style.visibility = hidden;
}

 

3700x, Asus B450i, 16GB Corsair Vengeance RGB, Gigabyte GTX 970 ITX,  Dan A4-SFX, SX600-G, 120mm AIO.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
42 minutes ago, Crispybagel said:

Problem : How do i make a div interactable/clickable without using the <a> tag, the <a> tag requires a href and i do not want to navigate to another html file or external website.

It doesn't though, <a onClick="jsFunction();"> </a> is valid. Of course you can do the same for a div directly though, so no need for <a> in either case.

 

<div onClick="jsFunction();" style="cursor:pointer;"> (to get the cursor hand icon on hover)

Forum Rules   |   Guide to Display Cables / Adapters

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

Not the best with Front end stuff and I probably didn't read your question properly so it might not be 100% but: 


<div onclick='hideDiv' id="emailpopup"></div>

hideDiv(){
var temp = document.getElementById('EmailQuickAccess');
temp.style.visibility = hidden;
}

 

 

10 minutes ago, Glenwing said:

It doesn't though, <a onClick="jsFunction();"> </a> is valid. Of course you can do the same for a div directly though, so no need for <a> in either case.

 

<div onClick="jsFunction();" style="cursor:pointer;"> (to get the cursor hand icon on hover)

So i tried this, makes sense, but still can't get it to work, is it because the .js external file holds both JQuery and Javascript?

 

.js file: 

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 270) {
    $('#Movingmenu').fadeIn();
  } else {
    $('#Movingmenu').fadeOut();
  }
});

showDiv(){
  var temp = document.getElementById('emailpopup');
  temp.style.visibility = visible
}

html:  

<div onclick="showDiv" id="EmailQuickAccess">
  <img id="EmailIcon" src="Ikoner/Email.png" alt="HTML5 Icon">
  <img id="EmailIcon2" src="Ikoner/Email Hover.png" alt="HTML5 Icon">
</div>

<div id="emailpopup"></div>

 

View my builds here!
https://pcpartpicker.com/user/Crispybagel/builds/

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
15 minutes ago, Crispybagel said:

is it because the .js external file holds both JQuery and Javascript?

Wouldn't know sorry, haven't done all this is for a few months now and I've never used jQuery

3700x, Asus B450i, 16GB Corsair Vengeance RGB, Gigabyte GTX 970 ITX,  Dan A4-SFX, SX600-G, 120mm AIO.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
5 hours ago, Crispybagel said:

 

So i tried this, makes sense, but still can't get it to work, is it because the .js external file holds both JQuery and Javascript?

 

.js file: 


$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 270) {
    $('#Movingmenu').fadeIn();
  } else {
    $('#Movingmenu').fadeOut();
  }
});

showDiv(){
  var temp = document.getElementById('emailpopup');
  temp.style.visibility = visible
}

html:  


<div onclick="showDiv" id="EmailQuickAccess">
  <img id="EmailIcon" src="Ikoner/Email.png" alt="HTML5 Icon">
  <img id="EmailIcon2" src="Ikoner/Email Hover.png" alt="HTML5 Icon">
</div>

<div id="emailpopup"></div>

 

you have it inside the scroll function so you won't be able o access it unless youre scrolling.

 

move it outside and try. 

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

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
On 08/08/2017 at 7:14 AM, Crispybagel said:

 

So i tried this, makes sense, but still can't get it to work, is it because the .js external file holds both JQuery and Javascript?

 

.js file: 


$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 270) {
    $('#Movingmenu').fadeIn();
  } else {
    $('#Movingmenu').fadeOut();
  }
});

showDiv(){
  var temp = document.getElementById('emailpopup');
  temp.style.visibility = visible
}

html:  


<div onclick="showDiv" id="EmailQuickAccess">
  <img id="EmailIcon" src="Ikoner/Email.png" alt="HTML5 Icon">
  <img id="EmailIcon2" src="Ikoner/Email Hover.png" alt="HTML5 Icon">
</div>

<div id="emailpopup"></div>

 

 

You need the parenthesis after the function to actually call it. like onClick="showDiv()"

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
On 2017-08-10 at 3:12 AM, SpaceNugget said:

 

You need the parenthesis after the function to actually call it. like onClick="showDiv()"

Didn't work, ive tried a few new ways but still i cant manage to get it working. Why is this method not working correctly? only difference is that i only want to show it on click and that it's not a button/text its a div containing 2 images with hover effects. 

https://www.w3schools.com/jquery/jquery_hide_show.asp

HTML:  

<div id="EmailQuickAccess">
  <img id="EmailIcon" src="Ikoner/Email.png" alt="HTML5 Icon">
  <img id="EmailIcon2" src="Ikoner/Email Hover.png" alt="HTML5 Icon">
</div>
<div id="emailpopup"></div>

CSS: 

#EmailIcon {
  position: fixed;
  top: 70%;
  width: 9%;
  height: auto;
  left: 5.5%;
  z-index: 100;
}
#EmailIcon2 {
  position: fixed;
  top: 70%;
  width: 9%;
  height: auto;
  left: 5.5%;
  z-index: 99;
  display: none;
}
#EmailQuickAccess:hover #EmailIcon { display:none; }
#EmailQuickAccess:hover #EmailIcon2 { display:block; }
#emailpopup {
  display: none;
  position: fixed;
  background: #989898;
  width: 40%;
  height: 500px;
  top: 15%;
  left: 30%;
  z-index: 200;
}

JQuery: 

$(document).ready(function(){
  $("#EmailQuickAccess").click(function(){
      $("#emailpopup").show();
});

 

View my builds here!
https://pcpartpicker.com/user/Crispybagel/builds/

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 
$(document).ready(function() {
    $("#EmailQuickAccess").click(function() {
        $("#emailpopup").show();
    })
});

works fine for me. You are missing closing parenthesis and brackets for your jquery function. make sure you include the scripts in your html

  

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

 

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

×