Adding a border to an image using JQuery

I have implemented an image slider as shown below:

<div class="bx-wrapper" style="width:516px; position:relative;">
    <div class="bx-window" style="position:relative; overflow:hidden; width:516px;">
        <ul style="width: 999999px; position: relative; left: -516px;">
            <li style="width: 129px; float: left; list-style: none outside none; height:68px; margin-top:3px">
                <a href="javascript:void(0)" id="p_5">
                    <img src="question_pliki/5.png" alt="">
                </a>
            </li>
            <!--... many more <li> elements-->
        </ul>
    </div>
</div>

My goal is to add a border to the active image, for which I used this JQuery script:

$('.bx-window ul li').click(function(){
    $(this).parent().find('li').css('border','none');
    $(this).css('border','5px solid #f28458');
});

However, the border appears outside the image and disrupts my layout.

Is there a way to apply the border inside the image instead?

jquerycss

Answer №1

To achieve the desired effect of placing the border inside the element, one could modify the box-sizing property to be border-box.

.bx-window ul li {
    -webkit-box-sizing: border-box; /* Applies to Safari/Chrome and other WebKit browsers */
    -moz-box-sizing: border-box;    /* Applies to Firefox and other Gecko-based browsers */
    box-sizing: border-box;         /* Applies to Opera and Internet Explorer 8+ */
}

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

`Updating table values using jQuery`

I've designed an app for a virtual bowling game where players can see their scores updated in real-time. However, there's a glitch in the system - the scores won't display on the screen until the page is refreshed. If anyone out there has a ...

javajqueryajaxspring

The menubar does not maintain a uniform appearance in Bootstrap 4

I am currently developing a navigation bar using Bootstrap 4. Here is the code I have so far: <div class="row mx-2"> <div class="dropdown"> <div class="btn btn-info dropdown-toggle" data-toggle='dropdown'> ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to prevent a selected <option> in one <select> from being selected in another <select>, while also making sure this applies to both new and existing &

Currently, I am working with a code snippet that disables select options based on similar fields. The code can be found here. $(document).on('shown.oc.popup', function() { let options = $('.variantPlacementOptions:first select').c ...

javascriptjquery

Switch button for revealing/ hiding div elements

I am currently working on a project that involves two divs placed next to each other. My goal is to implement the toggle function in order to collapse one div (Sidebar) horizontally while simultaneously expanding the other (Map) to occupy the full width ...

jquerycsstoggle

The functionality of item.classList.toggle() in HTML+CSS+JS fails to execute

I have been working on a program that aims to flip a card when it is clicked. The JavaScript code I have written for this functionality is as follows: /* Card flipping onclick */ import "./Stylesheets/FlipCardStyle.css" var cards = document.quer ...

javascripthtmlcssfrontendcard

Error in React: Mixing units is not allowed when using vw and px together in the css calc() function

Is there a way to create fluid font size using the css calc() function in React without running into errors when mixing vw and px units? font-size: calc(14px + (26px - 14px)) * ((100vw - 300px) / (1600 - 300)); I encountered an error where SASS was unabl ...

cssreactjssasstypography

Ways to forward from an ajax-triggered action

I am looking to immediately redirect from the "Login" action to the "Home" action without going through the ajax success callback. Currently, when the "Login" action is triggered via ajax, it redirects to the "Home" action, but the ajax success callback st ...

jqueryajaxasp.net-mvc

Steps for dynamically adding or removing multiple fields in a form

I am looking to create a form with dynamically added and deleted fields based on user requirements. For example, a person may have multiple phone numbers and email addresses. The goal is to allow users to add more than one phone number or email address if ...

javascriptjqueryhtml

Reduce the size of your Javascript files to the earliest possible version

Any suggestions for converting minimized JavaScript to earlier versions? Are there any tools or websites available for this task? Thank you in advance for any hints. ...

javascriptjquery

Customize CSS styling

When it comes to the styling of my first line, I have a specific style in mind: * { text-align:left; } This style works well across most parts of the site as they are predominantly left aligned. However, there are few areas where I need the text alig ...

cssoverriding

Is it possible to convert (HTML and CSS3 generated content for paged media) into a PDF format?

Would it be possible to convert a HTML document styled with CSS3 Generated Content for Paged Media into a PDF format? If such an application does not exist, what alternatives can I consider as the foundation for developing a converter? Thank you ...

htmlcssxhtmlpdf-generationcss-paged-media

Showing text beside an image within a division

In my div, I have an image along with a paragraph and h6 text. My goal is to position the text on the right side of the image without it wrapping underneath. I've experimented with floating both left and right, clearing, setting display to inline-blo ...

htmlcss

The issue lies in the alignment of the navbar at the top

After retrieving this script: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <nav class="navbar bg-light navbar-expand-sm justify-content-center"> <a class="navbar-brand" ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to set the focus on a text box automatically when a page is loaded, even without support for JavaScript?

On my form, I have a few text fields and I am looking to automatically set the cursor (auto focus) on the first text field when the page loads. I aim to accomplish this without relying on javascript. ...

csshtml

Having trouble parsing JSON with Ajax in Pusher using PHP?

I am facing an issue while sending multiple parameters using the Pusher AJAX PHP library. This is the error I encounter: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data Here is my PHP and JS code: <script src="https: ...

javascriptphpjqueryjson

Incorporate JavaScript to include a new class and attribute

Apologies for any language barriers.. I grasp that it involves using addClass and removeClass, but I am uncertain about how to write the terms. I need to ensure that if the screen resolution is less than 768 pixels, then the attributes id="dLabel" type="b ...

javascriptjqueryhtmlcss

Personalize the elastislide slider to advance single items with each movement

I have a thumbnail slider that I would like to customize so it only moves one image at a time. You can take a look at the following link for reference: ElastiSlide. Please advise on how I can achieve this. ...

jqueryslider

Unusual behavior exhibited by MUI Grid in the presence of spacing

I am working on a code snippet that looks like this: <Box sx={{height:'100vh', background: '#f5f7fc', overflow:'auto'}}> <Grid container justifyContent={'center'} padding={2}> <Grid item ...

cssreactjsmaterial-uiflexbox

How can I apply a style to text when I double click on it?

Rephrased: There is an input field on my webpage: <input type="text" id="some_id" /> I type some text into the input field: Here is my text! If I double click on the word "my", am I able to: Retrieve this value? Yes, the answer is provided belo ...

javascriptjquery

Is it possible to style solely the initial <tr> within a table, regardless of the presence of the <tbody> element?

I have a unique scenario with my table setup - it contains multiple tbody elements, some generated by the browser and others added programmatically. I am trying to style only the first tr within my table, typically achieved using table > tr. The challen ...

htmlcss