Toggle the visibility of a div depending on a value that is loaded on the page

I need help with a functionality that will hide or show the following div based on the value of <%= ItemCount%>. If the number is less than five, I want the div to be hidden. On the other hand, if it is above 5, then the div should be visible. Any assistance would be greatly appreciated.

<div class="slideControl">
    <a id="slidesPrev" onclick="return false" href="#">
        <img src="/_assets/images/Arrowleft.png"
    </a>

    &nbsp;&nbsp;<%= ItemCount%>&nbsp;Total Products&nbsp;&nbsp;

    <a id="slidesNext" onclick="return false" href="#">
        <img src="/_assets/images/ArrowRight.png"
    </a>
</div>
javascriptjqueryhtmlcss

Answer №1

If you suspect that this is an aspx page, one potential solution could be incorporating it into a JavaScript function.

if (<%= ItemCount %> < 5) {
    $('.slideControl').hide();
}

Ensure that this JavaScript code executes after the page has finished loading.

Answer №2

Give this a shot. You don't have to use jquery for this. Feel free to experiment with different approaches as well.

<div class="carouselController" style="<%= ItemCount < 5 ? "Display:None;" : ""%>">

Answer №3

After numerous attempts, this is the final code that got the job done.

<script type="text/javascript">
$(document).ready(function(){
        var totalItems = <%=TotalItems%>;
        if (totalItems < 10) {
            $("#productCarousel").hide();
        }
    });
</script>


<div id="productCarousel" class="carouselControl">
                <a id="prevBtn" onclick="return false" href="#">
                    <img src="/_assets/images/LeftArrow.png" /></a>

                &nbsp;&nbsp;<%= TotalItems%>&nbsp;All Items&nbsp;&nbsp;

                        <a id="nextBtn" onclick="return false" href="#">
                            <img src="/_assets/images/RightArrow.png" /></a>
</div>

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

Ways to perfectly align three images side by side using CSS

I am trying to align 3 pictures horizontally, but they keep ending up on separate lines. Here is the code I have been using: HTML <section class="features"> <figure> <img src="....jpg" alt="..."> ...

htmlcssimageflexboxinline

Adjust the size of the leaflet popup with Vue2Leaflet's l-popup component

I've been working on programming a web application and incorporating leaflet to showcase a map. I've set up markers and popups that show up when the markers are clicked. However, I've noticed that the popups look a bit odd right now – the ...

javascriptvue.jsleafletvue2leaflet

Could the problem with inset box-shadow and large border-radius on one side be related to Chrome?

Have you noticed a discrepancy in the inset box-shadow behavior with large border-radius on one side, particularly in Chrome? I'm curious about which browser is showing accurate results. Here's how it appears in Chrome: https://i.stack.imgur. ...

cssgoogle-chromebox-shadow

Is there a maximum size limit for the Fabric.js Path Array?

Has anyone tried plotting a line graph using Fabric.js and encountered issues with the fabric.Path? I've noticed that it stops drawing after 8 segments even though I have attempted different methods like loops and individually coding each segment. co ...

javascriptsvgfabricjs

Tips for confirming schedule accuracy

Trying to determine if a specific time falls between two others is the task at hand. Allow me to illustrate: Presently, it's Thursday, and the time reads 11:39 PM. Establishment X operates from 12:00 AM to 11:59 PM on Thursdays (a regular occurrence ...

javascriptangularjsangularfirebasemomentjs

Issue with data synchronization in SAPUI5 custom control's two-way binding not resolved

As I work on creating a custom Control and binding data to it, I encounter an issue where upon clicking a button, the data in the Model is changed but not reflected in the DOM. Being new to SAP-UI5, I am struggling to identify the root cause of this proble ...

javascriptmodel-view-controllersapui5

Arranging a 2D array of matchups to ensure an equal distribution of home and away matches for each team

I am in the process of developing a unique UEFA Champions League 24 'Swiss Model' tournament with 36 teams. Each team is set to compete against 8 different opponents, resulting in a total of 144 matches. I already have a list of matchups prepared ...

javascripttypescriptalgorithmsorting

Enhancing Status with JQuery

Currently, I am working on implementing a jQuery script that calls an AJAX function every 2 seconds to fetch data and update the webpage. As someone more experienced in backend programming, I could use some guidance on this. This is the current code snipp ...

phpjqueryajax

Guide to animating camera movement to the top using three.js

Is it possible to tween the camera to a top position with a focus on an object in three.js using tween.js? The camera tweens to the right spot perfectly. Please refer to this codepen: http://codepen.io/anon/pen/ObQxjV?editors=1111 Click here for image re ...

javascriptanimationthree.jstween.js

Is it recommended to utilize a "default" key within an object?

Creating a JavaScript application and looking to establish a config object. Here's what I have so far: var config = { localization: { locales: ['en', ..., 'de'], defaultLocale: 'en' } } Consideri ...

javascriptobjectdefaultconfig

Steps for changing an array of objects from a string into a regular array of objects

I am facing an issue where I have an array of objects in string format that I need to convert into a normal array of objects. I tried using the JSON.parse() method for conversion, but when attempting to access values like: this.contact_data[0].data.value, ...

javascriptvue.js

Struggling to connect to an express route?

I'm currently working on a MERN project and I'm encountering a small issue. When trying to make a POST request to a specific route, Express throws a 404 error and tells me that it can't find the desired route. However, everything works perfe ...

javascriptreactjsexpress

Having trouble accessing my API through localhost with NextJS

I'm currently working on an app that involves fetching data from my own API. The goal is to retrieve user-specific information and use it within the app. However, I've encountered a roadblock with CORS headers and I'm unsure of how to procee ...

javascriptnext.js

Limiting the displayed portion of a table and implementing scrolling instead

I am currently working with a static HTML template that contains the following code: <table> <thead></thead> <tbody></tbody> </table> Using jQuery and AJAX, I am dynamically adding and removing rows and columns ...

javascriptajaxhtml

"Struggling to divide CSS Code with PHP containing nested brackets? Here's how you can tackle it

I'm currently attempting to break down my CSS code stored in variables, but I consistently encounter issues when dealing with media queries or similar elements. While I don't require every single rule to be outlined, I am looking for a solution ...

phpcssparsing

Tips for personalizing the export grid menu in angular-ui-grid?

My grid includes an external "Show Details" option that adds extra columns to the grid when clicked. https://i.sstatic.net/Fu2Qp.png The problem arises with the options for "Export all data" and "Export visible data," which can be confusing in this scena ...

javascriptangularjsexportangular-ui-grid

Utilizing button clicks to send fetch commands and extract data from websites

I need help with my Google Chrome extension. I have some fetch commands for an API, but I'm not sure how to send them when a button is clicked. Can someone guide me on the right approach? Is there a recommended method for a Chrome extension to extrac ...

javascripthtmlcssgoogle-chrome-extension

Is there a way to ensure that the background position remains stable and does not shift or collapse?

Still getting the hang of all this, but I'm making progress by learning on the go and enrolling in courses. Sometimes I face small obstacles like the one I'm encountering now. Everything looks great when the browser is at 100%, but when I minimi ...

htmlcssheaderbackground-imagedivision

What is the best method for assigning real-life units, such as centimeters or millimeters, to a dimension

Is there a way to set the height of an img in millimeters, regardless of the device being used? Currently, setting the CSS rule height: 10mm; actually translates to height: 37.8px, as explained in this link: http://css-tricks.com/the-lengths-of-css/ If p ...

jqueryhtmlcssresponsive-designmedia-queries

Ways to optimize image focus on a webpage

Upon loading the page, I desire for my image to be automatically focused. Unfortunately, setting the tabindex parameter has not produced the desired outcome. This is likely due to the fact that there are multiple angular2 header components with defined t ...

htmlangular