Assign a supplementary class depending on the conditions set by an if...else statement

I am currently facing a challenge in my view where I need to dynamically add an "active" class based on the page the user is viewing. Here's the code snippet:

<li <%= if current_page?(root_path) then "class='hvr-bottom active'" else "class='hvr-bottom'" end %>><a href=<%= root_path %>>Home</a></li>

However, when I try to execute this code, it triggers an error message:

syntax error, unexpected keyword_class, expecting keyword_then or ';' or '\n' ...

I'm looking for guidance on how to appropriately modify the code so that the additional class is only added when a specific page is being viewed.

htmlcssruby-on-railsrubyruby-on-rails-4

Answer №1

It appears that your ternary statement is lacking a ?. Consider using the following revised version:

<li class=<%= current_page?(root_path) ? "hvr-bottom active" : "hvr-bottom" %>> ... </li>

I hope this solution proves to be useful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add some flair to your list by animating the text within it

My goal is to add animation to the text within the list. Below is the code snippet: <div id="about" class="row section"> <div class="col-sm-8"> <h2 style="color:black;">About me!</h2> <ul> <li > ...

javascripthtml

Issues with Jquery/AJAX function not responding to onChange Event

I am currently working on a project where I need to populate a dropdown menu based on the value selected from another dropdown. However, I am encountering an issue with the function that I am trying to call in the onChange event of the select tag. This is ...

javascriptjqueryhtmlajax

The audio and search capabilities on my device are not working as expected

I'm currently in the process of developing a new website and experimenting with javascript, html, and css. However, I have encountered some issues that I am struggling to resolve. One problem I am facing is that in my dropdown menu with the search ...

javascripthtmljquerycssaudio

Creating a masonry layout with uniform row heights

I am trying to achieve a masonry style layout for these cards in Bootstrap. The current setup has columns with the same height, but I want them to have fluid height and consistent margin spacing like the blue line shown below. I attempted to use .card-colu ...

csstwitter-bootstrap

What is preventing me from sending a POST request to my Node.js Express server?

Currently, my goal is to develop a straightforward user registration system. I simply wish to register through the HTML form and then be able to log it in the server using console.log. However, when attempting to achieve this with fetch, I encountered the ...

javascripthtmlnode.jsexpress

Loading stylesheets from node_modules before rendering in Angular

I have successfully installed Ionicons in Angular 9 by running npm install --save [email protected]. In order to use them, I imported them into my styles.scss file as shown below: $ionicons-font-path: "~ionicons/dist/fonts"; @import "~ionicons/dist/s ...

cssangularsassnode-modulespreload

Unable to back out of side navigation

My side navigation menu is giving me some trouble. It opens up just fine when I click the button, but it won't close back up when I click it again. The button is supposed to toggle between opening and closing the side navigation. I've looked at ...

javascriptcsshtml

Unpacking a container containing interconnected objects

Creating a command line two-player chess game has been an exciting challenge for me. I've structured it with a class for each type of chess piece and a main board class, which is outlined below: class Board attr_accessor :board, :choice def init ...

jsonrubyserializationdeserialization

Automatic Clicks in the Chrome Console

I've come across a website that requires me to click on multiple elements scattered throughout the page Here is the code for one of the elements: <span class="icon icon-arrow-2"></span> Is there a way to provide me with the console comm ...

javascriptjqueryhtmlcssgoogle-chrome

Modify the text within the HTML button's class attribute

I've been attempting to change the text on a button in my aspx file by calling code behind, but so far I haven't had any luck. HTML: <button class="radius button" runat="server" id="buttonUpload" onServerClick="buttonUpload_Click" ...

javascripthtmlasp.net

Strategies for avoiding text selection interference with onMouseMove event

I am in the process of adding a "resize handle" to adjust the width of my left navigation panel. This handle, represented by a div, triggers an onMouseDown() event that calculates the necessary widths and applies them to the relevant elements during subseq ...

javascripthtmlcsspreventdefault

Move the cursor to a specific position within a contentEditable <div> element

I am in search of a reliable solution that works seamlessly across browsers to set the cursor/caret position to the last known location when a contentEditable='on' <div> regains focus. By default, the cursor/caret in a content editable div ...

javascriptjqueryhtmlcontenteditablecursor-position

Modify the background of a div according to the size of the screen. Implement this functionality using JavaScript and

After reviewing a specific post at , I find myself unsure of how to target a particular class for reference. I am certain that I want to implement document.onload = checkWidth(); window.onresize = checkWidth(); However, I am uncertain about the procedur ...

javascripthtmlcss

How can we display the final section of the input text once it loses focus?

When inputting text, the right side of the text is hidden when we focus out or click outside the input field. I want to reverse this so that the left side is hidden and only the right side shows. <input value="abcdefghijklmnopqrstwxyz123456789"> ...

javascripthtmlcss

Preventing scrolling within a jQuery tab using jQuery

Looking to enhance my jqueryUI tabs by incorporating a smooth scroll bar within each tab. I've experimented with various scrollable plugins such as jQuery custom content scroller, TinyScrollbar, and now areaaperta NiceScroll. However, I continue to en ...

javascriptjquerycss

Applying CSS styles exclusively to a div element and not its before pseudo-class

So I'm working on an HTML page with a div that looks like this: <div class="get-this"> blah blah </div> I've added a before pseudo-element to the div and now I want to apply a CSS style specifically to the div, not including the pse ...

htmlcss

Safari-exclusive: Google Maps API dynamically altering page aesthetics post-loading

Recently, I encountered a peculiar problem. Upon loading a page, the text displayed with full opacity. However, upon the Google Maps API loading after 2 seconds, the entire page's styling suddenly changed. It was as if the text on the page became less ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Is Next.js compatible with CSS caching?

I'm currently working on a project with Next.js (version 12.1.0) and SCSS modules. I've noticed that my CSS seems to be caching extremely aggressively, requiring me to restart the server (npm run next dev) in order to clear it. Has anyone else en ...

javascriptcsssassnext.js

Issue with the overall HTML design

The placement of the banner is exactly where I want it to be, however, the boxes using jQuery masonry are overlapping it. I'm not sure what I did wrong here. Any suggestions or insights on how to fix this issue? Example HTML Code: <script type="t ...

jqueryhtmlcsslayout

What is causing the divs to remain stationary instead of floating away with BootStrap?

My divs aren't aligning properly as expected when using the BootStrap Grid System. For example, if I have 4 columns and then another 2 columns, the second div should take up the next 4 columns but instead it's appearing below in the same column r ...

htmlcsstwitter-bootstrap