How can I make a div become a link( or redirect users to another page) at a certain screen size [SOLVED]


#1

Hi,

here is the link to my page here . I am trying to achieve this:

  1. if your screen size is bigger than 901px, you should be able to see the contacts on the left hand side + detailed info about a selected user -> this is fully working
  2. you SHOULD NOT be redirected to another page when selecting users (screen bigger than 901px)
  3. if your screen size is less than 901px, you should be redirected to another page if clicked on a profile. I can’t figure out how to make it working

Edit: I could make a hidden div/link which would only be shown at certain screen sizes, but I doubt this is the best solution, and how people would need to click on the link. I need to make the entire box become a link.


#2

what page are you wanting them to redirect to ?


#3

That’s not really important. I have created an html file called detail.html, and it only shows detailed info about a selected user (it’s pretty much the same what you can see on the right hand side if you screen is bigger than 901px).


#4

Use javascript. Make a conditional statement inside the click event handler that will check the screen size and execute the appropriate action.


#5

I take a look at your page and the best solution from me is -

To make a responsive design use some frameworks like bootstrap, it is ready to use, easy to understand and save you a lot of time than writing your own responsive layout.

Don’t worry about the time to understand, you can start already …


#6

I was hoping I could’ve used HTML/CSS to solve this issue. The use of JS also crrossed my mind.

@mgjean

The issue isn’t here to make a responsive layout. I don’t need to use such a heavy library to make a simple layout, the layout is working just fine, and Bootstrap would NOT have saved my butt anyway.


#7

create your button
<button id="myButton" class="submit-button" >Your Button</button>

user jquery to get the width of the window then execute code.

document.getElementById("myButton").onclick = function () {
     if ($(window).width() < 961) {
                location.href = "www.example.com";
            }
            else {
              <execute code to display details.>
            }
                
};

#8

You are already using javascript ^^.

location.href='selected.html'

The only way to alter HTML based on a condition at runtime is through javascript. That is kind of one of the reasons js came to be. That is besides media queries.


#9

@michaelhenderson

Thanks for your effort. I’m going to test it out.

@nr-mihaylov
Well, the use of JS is quite necessary these days, but I did hope I could’ve used another way. Don’t take me wrong, I like JS,but I still think that if you don’t have to use it, you can do better without it.


#10

@nr-mihaylov @michaelhenderson

Thanks both for help. This chunk of code did the work

contactInfoDiv.on('click', function() {
  if ($(window).width() < 961) {
            location.href = "./selected.html";
         }
  $(this).siblings('.active').removeClass('active');
  $(this).addClass('active');

  updateContactInfo();

});