background with alternating stripes to decorate the border of a div

Is it possible to give a striped effect to a div element's border using jQuery?

Consider the following code snippet:

<style type="text/css">
    #panel {
        padding: 50px text-align: center;
        background-color: #e5eecc;
        border: solid 10px #c3c3c3;
    }
</style>

<div id="panel">Hello world!</div>

In this example, the border of the div has a solid grey color (#c3c3c3). Instead of a solid color, I want to achieve a striped effect (similar to zebra stripes) with preferably using jQuery.

Answer №1

Utilize border images for a unique design:

Learn more about border images here

Implementation example:

border-image:url(images/stripe.png) 15 20 30 30 repeat;
border-width: 15px 20px 30px 30px;

Generate your own stripe image pattern from StripeGenerator that repeats seamlessly.

Note - Border images are not supported in IE versions below 11 (consider this based on your target audience)

An alternative approach is to add a striped background to an element wrapping your div, apply padding to create the effect along with setting the background color of your div to #FFF.

Answer №2

To achieve a striped look, you can use the dashed border style:

border: dashed 10px #c3c3c3;

Alternatively, you can achieve this using jQuery:

$("#panel").css("border","dashed 10px #c3c3c3")

Keep in mind that you have the option to switch out c3c3c3 for black if you prefer a more zebra-like appearance.

Check out the DEMO here

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

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

Steps for adding a delete icon to a text input field and enabling the functionality to delete text

In the code snippet below, I am creating a text input field: <input type="text" class="signup-input text-value" name="" placeholder="e.g. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48554c405d41486d">[email pro ...

an online platform design

I am currently working on building a webpage, but I am facing some issues with the layout. Specifically, I am unable to make the div automatically adjust its size (particularly the height). Here is the code that demonstrates the problem: <!DOCTYPE html ...

Solving relative paths in NodeJS/Express

My website is calling several scripts, images, styles, etc., from different folders both inside and outside the main folder: File Tree - / - website - scripts - data.js - customJquery.js - styles ...

Tips for deleting HTML tags from a database

Whenever I add something to my database, it also includes the html tags. Is there a way to prevent this from happening? public function retrieveDataFromDatabase() { $query = "SELECT * FROM gb ORDER BY id DESC LIMIT 0, 4"; //data output if ...

Using Jquery to find the class that matches the current element

Is it possible to select a specific div by its class when there are multiple divs sharing the same class and triggering the same function on button click? I only want to target the class where $(this) is located. I've experimented with .parent, .chil ...

jQuery .click() only triggering upon page load

I've been searching all over the place and I just can't seem to find a solution to my specific situation. But here's what I'm dealing with: Instead of using inline HTML onclick, I'm trying to use jQuery click() like this $(docume ...

Is $timeout considered a questionable hack in Angular.js development practices?

Here's a question for you: I recently encountered a situation where I needed to edit the DOM on a Leaflet Map in order to manipulate the appearance of the legend. To workaround an issue where the map wasn't generating fast enough to access the n ...

Using an Ajax call with Spring MVC may result in receiving plain text instead of JSON

This is the AJAX call that I am using: $.ajax({ url: 'configuration/activePlatform/', type: 'GET', dataType: 'json', contentType: "application/json", success: function(data){ ...

The process of incorporating JSON data into the database is experiencing difficulties and is not functioning

I am looking to display the doctor's availability in my Laravel project using JSON to show the availability in both morning and afternoon time slots. Initially, it was working fine, but now it only displays the last added time slot like this: Monday_m ...

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

I need to convert HTML content in my React application into a PDF file. My current approach involves taking an HTML container and executing the following code snippet: await htmlToImage .toPng(node) .then((dataUrl) => { ...

Is there a way to repurpose a function to work with both ids and classes?

My current code is affecting all elements instead of just the intended one. I've experimented with classes and ids, ruling out those as potential issues. I'm hoping for my JavaScript to target only the selected element, not all of them. Check ou ...

Tips for keeping my wordpress menu at the forefront

This piece of code is responsible for controlling the main menu on my website. Currently, it's set up so that when I scroll down, the menu disappears, and when scrolling up, it reappears. However, I would like the menu to always remain displayed at t ...

Files on video input are now accepting audio attribute

Currently, I am adding a file upload feature to my application. I have created input fields for various types of media. <label>Images<input type="file" accept="image/*"/></label> <label>Videos<input type="file" accept="video/*"/ ...

Improving Performance of a Large Unordered List using JavaScript

My website currently features a search box that retrieves images and displays them in a list format. Each image has an associated click event that triggers an overlay on the parent li element when clicked. However, with search results exceeding 300 images ...

Safari does not display disabled input fields correctly

I have designed a simple angular-material form with various inputs that are organized using angular flex-layout. The form displays correctly in all browsers except for Safari on iOS devices. The problem in Safari arises when loading a form that contains d ...

Tips for confining a float within a div with fluctuating space

I have a scenario where I have multiple divs ('group') containing text, and there is a floated div ('toggle') in the bottom corner. The current code works well if the text length in 'group' is consistent, but the position of t ...

obtaining the controller output in JavaScript

Scenario: Retrieving id in javascript following an ajax post I'm trying to figure out how to access the id sent from my controller's ActionResult in javascript. I've experimented with both Content Result and JSON Result on the controller, b ...

Change the space character ' ' to '-' when a key is lifted

Hey, I need some help with a coding problem. I have two input fields and I want to automatically mirror the text from the first input into the second input field using a keyup jquery function. However, my current setup adds a space whenever I hit the spac ...

How can I connect the box using the Interactive Picture jQuery tool?

When using the Interactive picture jQuery, I have the following code snippet within my document: jQuery(document).ready(function(){ $( "#iPicture6" ).iPicture({ animation: true, animationBg: "bgblack", animationType: "ltr-slide ...