Issue with column-break-before toggle function only operational in Safari

In my website layout, I have arranged li elements in a 2 column design. I am looking to implement a specific functionality where if a div element (inside an li element) is clicked, it should add a class with the following CSS properties:

-webkit-column-break-before:always;
-moz-column-break-before:always;
background-color: fuchsia; /* only for demonstration */

This feature will help me ensure certain elements float onto the second column, especially when printing.

However, I have found that this function only seems to work in Safari and not in Chrome or Firefox (running on the latest versions).

To better understand how this works, please click on the grey element in the provided example: https://jsfiddle.net/nickkkk/9nrtdg6q/3/

javascriptcss

Answer №1

Make sure to include jQuery before your JavaScript file.

1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2. <script src="./main.js" type="text/javascript"></script>

Remember to use the document.ready function.

Ensure that the classes you want to toggle are separated by semicolons.

$(document).ready(function() {

    $('.day').click(function() {
    $(this).toggleClass('toggled', 'day');
  });

})

I hope this information is helpful! :-)

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

Tips for dealing with Uncaught Error: [nuxt] store/index.js must have a function that returns a Vuex instance

In my Nuxt project, I have set up a default store in Nuxt within the store/index.js file as per the guidelines provided in the documentation. However, upon trying to render my app, I encounter the following error: Uncaught Error: [nuxt] store/index.js sh ...

javascriptvue.jsnuxt.jsvuexstore

Incorrectly loading static images in React SSR

I am currently working on a React SSR app and my folder structure looks like this: https://i.sstatic.net/RA2H2.png My static express middleware successfully handles static files and images in the tag on the client side: https://i.sstatic.net/Zhzf2.png ...

javascriptnode.jsreactjsexpressserver-side-rendering

Confirmation checkbox that retains original value if canceled

Imagine a scenario where there is a checkbox value. When the checkbox value changes, the user is asked, "Do you want to SHOW this item on the website?" or "Do you want to HIDE this item on the website?" Everything seems to be working fine, except for one ...

javascripthtmlcheckbox

Checking if a phone number begins with a zero using a regular expression

Is there a way to ensure that numbers entered into a field always start with a 0? Initially, I thought the company wanted to mandate entering 0 first, but I believe there might be a more elegant solution. function validateNumber(dataValues, setErrors) ...

javascriptnode.jsreactjs

Using the mouseleave event to efficiently close a Bootstrap-Vue Tooltip

I've developed a custom color picker component in Vue 2 using a combination of bootstrap-vue's button and tooltip components as shown below: <template> <div> <b-button ref="button" @cli ...

javascriptvue.jsvuejs2mouseeventbootstrap-vue

Leveraging the push method within AngularJS

Hello, I am currently working on setting up an eCommerce shop using Angular. Below is the code snippet I am using: var shopApp = angular.module('shopApp', ["slugifier"], function() {}); controllers.productController = function($scope,FetchFa ...

javascriptangularjspushangularjs-ng-repeat

What is the method for ensuring that the state and component have identical values?

Currently, I am diving into the world of UI design using the React library. However, I seem to be encountering some issues with my code. handleIncrement = () => { this.setState({ ...this.state, quantity: this.state.quantity + 1 }) ...

javascriptreactjs

What is the easiest way to clear browser cache automatically?

Hello, I have implemented an ajax auto complete function in one of my forms. However, I am facing an issue where over time, the suggestions get stored and the browser's suggestion list appears instead of the ajax auto complete list, making it difficul ...

phpjavascriptajax

Instructions for embedding a URL within a div

I'm trying to load an external URL into a div using jQuery's load function. I've included the jQuery JS file with correct syntax and I want to avoid using an iframe. Here's the code snippet: <div id="content"><div> jQuery ...

javascriptjquery

Issue with Flexbox Layout - Flipping Card

As a newcomer to web development, my first project is a fan-page dedicated to Metallica. Here's the link to my project on Github. I'm currently facing an issue with the flex-box layout in the "Discography" section of the page. You can view the ...

htmlcssflexbox

Angular - the art of linking Observables together to merge their outcomes

I need to execute two requests consecutively and merge their results at the end. If the response body of the first request contains isSuccessful = false, then the second request should not be executed. If the first request fails for any reason, the second ...

javascriptangulartypescriptrxjsobservable

Create a dynamic and adaptable "pixelart" DIV using Bootstrap 4

As a newcomer to Bootstrap 4, I have carefully gone through the documentation multiple times, but I have been facing challenges in making my project completely responsive for some time now. This is my HTML: <!DOCTYPE html> <html> <head> ...

htmltwitter-bootstrapcssresponsive-designbootstrap-4

Is there a hierarchy to be followed within the <head> element?

I have been developing websites using HTML for nearly 3 years now, but since I had to teach myself, there are still a few things I am unsure about. One question that has recently become important is whether it is possible to create groups within the <h ...

javascripthtml

Difficulty in packaging JavaScript resources within Laravel Project

Having trouble setting JS functions as global in my project: In the 'resources\js"', I have: numerosALetras.js: /////////////////////////// function unidades_nal(n){ ... } function decenas_nal(n){ ... } function centenas_nal(n){ ...

javascriptphplaravelvite

Ray casting in Three.js used to target specific points

I am currently working on creating a network visualization using Three.js, and I have encountered an issue with my ray casting implementation. It seems that the points being identified by the ray caster are not the correct ones (Here's the full exampl ...

javascriptthree.jsraycasting

Steps for altering the color of an element when it hovers over a different element

I'm curious if it's possible to achieve something similar using CSS and how can I do it? HTML: <h2 id="hi">Hello!!! :) </h2> <h3 id="bye">Bye!! :( </h3> CSS: #hi:hover { #bye { color: green; } } ...

htmlcss

Attempt to import Recharts into React was unsuccessful

I am currently exploring the use of recharts in a React project, but I am facing difficulties when trying to import components from its library. I have added it to my package.json file as follows: "recharts": "^2.0.9", However, I am ...

javascriptreactjsrecharts

Custom JavaScript function throwing an error

function changeElementClass(path, changeClass, duration){ $(path).removeClass(changeClass); $(this).addClass(changeClass); )}; $('.flightDetails .option').changeElementClass('.flightDetails .option','selected',300); ...

jqueryargumentsjavascript

Challenges with CSS on mobile devices

My mobile navigation bar on CSS is not functioning properly. It does not cover 100% width, the dropdown menu text is not centered, and the menu stays on screen after clicking a link. Is there anyone who can help me resolve this issue? To view the code sn ...

htmlcssmobileresponsive

Challenge implementing custom javascript to display categorical/string features on Shiny slider

I'm attempting to design a unique Shiny slider that represents the months of the year. My desired outcome is for the slider to display the names of the months as strings, rather than numeric values where 1 corresponds to January, 2 corresponds to Febr ...

javascriptrloopsshinycategorical-data