CODEWITHSUNDEEP
javascripthtmlcss
Jozef Stone
Jozef Stone

Reputation: 23

How to make entire div clickable(into a link)?

I made many changes on this code but it didn't work, what step should I follow? I want to make whole section that include icon and button's text clickable. I have tried this method already but not sure is it true or not: onclick="location.href='http://www.example.com';"

You can make corrections as you want, I'm open to any help, thank you.

#ana_div {
  height: 400px;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
  background-color: #f7f7f7;
}

.ikon {
  margin-left: 30px;
  margin-top: 15px;
  position: absolute;
}

.div {
  display: inline-block;
  float: left;
  height: 80px;
  width: 300px;
  margin: 10px;
}

.btn {
  border: none;
  color: black;
  height: 80px;
  width: 300px;
  font-size: 19px;
  cursor: pointer;
  background-color: #fff;
}

.btn:hover {
  background-color: #4d4d4d;
}
<div id="ana_div">

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button1
            </button>
  </div>

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button2
            </button>
  </div>

</div>

Upvotes: 2

Views: 7085

Answers (7)

Pratham
Pratham

Reputation: 1

OK now I understood. Use this code snippet:

<div id="ana_div">
  <a href="https://example.com">
  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button1
            </button>
  </div>
  </a>
  
  <a href="https://example.com">
  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button2
            </button>
  </div>
  </a>

</div>

Upvotes: 0

Shrujal Goswami
Shrujal Goswami

Reputation: 21

you can write button click like this:

<button onclick=" window.open('http://www.google.com', '_blank'); return false;">Continue</button>

Upvotes: 1

dale landry
dale landry

Reputation: 8600

You need to create an event listener, then you can use a function to run the javascript you wish when the user clicks the div / button.

As for your redirect, you can create a new <a> tag element using JS, then add the appropriate attributes for target, src and lastly, use the click() function on it.

See JS Fiddle

Javascript:

let btn = document.querySelectorAll('.btn')

function redirectHeader(){
  let url = 'https://google.com'
  const a = document.createElement('a')
  a.target = '_blank'
  a.href = url
  a.click()
}

btn.forEach(button => {  
  button.addEventListener('click', redirectHeader)
})

Upvotes: 0

Daniyal Sedighpour
Daniyal Sedighpour

Reputation: 129

if you don't want to use JS in your code, just add a tag before your columns

check this code

#ana_div {
    height: 400px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f7f7f7;
}

.ikon {
    margin-left: 30px;
    margin-top: 15px;
    position: absolute;
}

.div {
    display: inline-block;
    float: left;
    height: 80px;
    width: 300px;
    margin: 10px;
}

.btn {
    border: none;
    color: black;
    height: 80px;
    width: 300px;
    font-size: 19px;
    cursor: pointer;
    background-color: #fff;
}

.btn:hover {
    background-color: #4d4d4d;
}
 <div id="ana_div">
    <a href="https://google.com">
        <div class="div" id="div">
          <div class="ikon">
            <img src="icon.png">
          </div>
          <button class="btn"> button1</button>
        </div>
    </a>

    <a href="https://microsoft.com">
        <div class="div" id="div">
          <div class="ikon">
            <img src="icon.png">
          </div>
          <button class="btn"> button2</button>
        </div>
    </a>
</div>

Upvotes: 0

SenKi
SenKi

Reputation: 53

This is as simple as it gets, a div tag enclosed by an anchor tag.

a {
  text-decoration: none;
}

.big-div {
  height: 100px;
  width: 200px;
  background-color: red;
}
<a href="https://www.facebook.com/">
  <div class="big-div">
    <p>Click anywhere</p>
  </div>
</a>

Upvotes: 2

Pratham
Pratham

Reputation: 1

Add an anchor tag and add the href attribute to it. Then add some style to remove the line and change the color. finally you can add anything you want inside it. Otherwise you can create a anchor tag add the href and id. inside the onclick function of your div call a function redirect(). Inside the redirect() function add this code: document.getElementById("your-tag-id").click()

Upvotes: 0

Yash Chaudhari
Yash Chaudhari

Reputation: 61

Try enclosing div into anchor tag.

<a href= "http://www.example.com">
<div id="ana_div">

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button1
            </button>
  </div>

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button2
            </button>
  </div>

</div>
</a>

Upvotes: 0

Related Questions