What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

Question

What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

Demo available at the bottom of the page

Within my code, there is a div called #myDiv that defaults to an opacity of 0.

Upon hovering over #myDiv, the opacity changes to 1. See the CSS snippet below:

#myDiv {
  opacity: 0;
}

#myDiv:hover {
  opacity: 1;
}

Additionally, there is an

tag inside the div with a default width of 0 and transitions to 100% on hover:

hr {
  width: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#myDiv:hover hr {
  width: 100%;
}

A script on the website detects mobile users and sets the opacity to 1 if the div is visible without triggering the hover effect.

I am looking for a way to apply the

effects on mobile devices. While I initially considered using an if statement in CSS, it's not possible. The best solution may involve JavaScript. Here is what I had in mind:

if (#myDiv.opacity == 1) {
  hr {
    width: 100%;
  }
}

Since this cannot be achieved with CSS alone, I'm seeking guidance on how to implement this functionality using JavaScript, as I have limited experience with it.

To see a working demo on desktop, please visit: My Work and hover over the project section. How can I replicate this behavior on mobile?

javascript html css

Answer 1

Answer №1

Sorry, but if statements cannot be used in plain CSS. However, you can achieve basic detection using a media query:

@media screen and (max-width:767px){
  hr {
    width: 100%;
  }
}

This media query targets screens with a maximum width of 767 pixels, which is slightly smaller than an iPad. Feel free to adjust the settings as needed.

Alternatively, you can utilize JavaScript for this task. Look for a script that identifies mobile users and adds the class isMobile to the <body />. With this class added, you can then apply styles like so:

.isMobile hr {
    width: 100%;
}

If you only want to make changes when an element is in view, JavaScript must be used to detect this. There are various snippets available for accomplishing this. You can follow a similar approach by adding a class such as isInView.

In both scenarios, CSS is responsible for the styling while JavaScript serves as a support. CSS handles the visual aspects, so it's best to communicate styling instructions through CSS classes even when using JS.

Answer 2

Sorry, but if statements cannot be used in plain CSS. However, you can achieve basic detection using a media query:

@media screen and (max-width:767px){
  hr {
    width: 100%;
  }
}

This media query targets screens with a maximum width of 767 pixels, which is slightly smaller than an iPad. Feel free to adjust the settings as needed.

Alternatively, you can utilize JavaScript for this task. Look for a script that identifies mobile users and adds the class isMobile to the <body />. With this class added, you can then apply styles like so:

.isMobile hr {
    width: 100%;
}

If you only want to make changes when an element is in view, JavaScript must be used to detect this. There are various snippets available for accomplishing this. You can follow a similar approach by adding a class such as isInView.

In both scenarios, CSS is responsible for the styling while JavaScript serves as a support. CSS handles the visual aspects, so it's best to communicate styling instructions through CSS classes even when using JS.

Answer 3

Answer №2

Consider utilizing media queries to adjust the styling based on screen size, and you may find that removing your JavaScript for opacity is a viable solution ;)

@media screen and (max-width:767px){
  #myDiv {
    opacity: 1;
  }
  #myDiv hr {
    width: 100%;
  }
}

Edit: If you also need to check if an element is in view using JavaScript, instead of setting opacity directly to 1, add a class to #myDiv and update the CSS accordingly:

hr {
  width: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#myDiv {
  opacity: 0;
}

#myDiv:hover, #myDiv.mobile {
  opacity: 1;
}

#myDiv:hover hr, #myDiv.mobile hr {
  width: 100%;
}

This method allows you to manage the style changes in a consistent manner across different devices by simply adding a class ;)

Answer 4

Consider utilizing media queries to adjust the styling based on screen size, and you may find that removing your JavaScript for opacity is a viable solution ;)

@media screen and (max-width:767px){
  #myDiv {
    opacity: 1;
  }
  #myDiv hr {
    width: 100%;
  }
}

Edit: If you also need to check if an element is in view using JavaScript, instead of setting opacity directly to 1, add a class to #myDiv and update the CSS accordingly:

hr {
  width: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#myDiv {
  opacity: 0;
}

#myDiv:hover, #myDiv.mobile {
  opacity: 1;
}

#myDiv:hover hr, #myDiv.mobile hr {
  width: 100%;
}

This method allows you to manage the style changes in a consistent manner across different devices by simply adding a class ;)

Answer 5

Answer №3

If you encounter any issues, feel free to reach out for assistance as I am currently away from my computer desktop.

jQuery can be utilized in this scenario. Check if the opacity of an element with class 'test' is equal to 1, and if so, set the width of the <hr> element to 100%.
if ($('.test').css('opacity') === '1') {
    $("hr").css("width", "100%");
}

Answer 6

If you encounter any issues, feel free to reach out for assistance as I am currently away from my computer desktop.

jQuery can be utilized in this scenario. Check if the opacity of an element with class 'test' is equal to 1, and if so, set the width of the <hr> element to 100%.
if ($('.test').css('opacity') === '1') {
    $("hr").css("width", "100%");
}

What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

What is the operational mechanism behind drag and drop page builders?

Methods for retrieving a file within a nodejs project from another file

Determine whether the elements within an array are present on the webpage. If they are, display an alert. If not, reload the page

Would someone be able to clarify the purpose of this await useState React code?

retrieving the configuration settings from my customized service

The JavaScript date picker is malfunctioning in the HTML editor, but it functions properly in Fiddle

Trouble arises when jquery's "position().top" clashes with the CSS3 property "transform: scale()"

Get the object method within an AJAX success callback

Empty Data Table Search After Refresh While Filter Remains Active

Improving Material UI Responsiveness: A Comprehensive Guide

Refresh database records

What are the steps to resize a YouTube embedded video?

Transform a 2-dimensional array of numbers into an array of objects labeled with a "row" index

What is the best way to incorporate text transitions using jquery?

How to add additional text after a particular line within a string containing multiple lines using JavaScript

Using jQuery, remove any white spaces in a textbox that are copied and pasted

Ways to address time discrepancies when the countdown skips ahead with each button click (or initiate a countdown reset upon each click)

Strategies for preventing the appearance of empty rows associated with unused <tr> elements

Issue with window.localStorage.setItem not functioning properly on mobile devices

Negatives of utilizing two different UI libraries within a single react project?