Check out this jsFiddle before I ask my question: http://jsfiddle.net/AxGHA/3/
I am looking for a way to remove the float: left; styling from the H2 and P tags if there is no image in the div using jQuery. Any suggestions on how to achieve this?
Appreciate your help!
If you want to exclude certain elements using :not and :has, here is an example code snippet:
$(".section:not(:has(>img))").addClass("no-image");
Here's the corresponding CSS:
.no-image h2, .no-image p {
float: none;
width: auto;
}
Check out this example for a live demonstration: http://jsfiddle.net/voigtan/AxGHA/5/
You can also use ">img" instead of ":has" at: http://jsfiddle.net/voigtan/AxGHA/6/
This code snippet adds a CSS class to the .section element and styles it according to your preferences.
Check if there are no images inside the 'div.section' element:
if(!$('div.section img').length) {
have paragraphs and headings within 'div.section' float freely.
}
You have the capability to achieve this
$(".category").each(function() {
var hasPic = $(this).children("img").length != 0;
if (!hasPic) {
$(this).find("h3,span").css("float", "none");
}
});
View the latest jsFiddle update
$(document).on("load", function(){
if ($("div.container").find("img").length == 0){
$("h3.section, p.section").css("float", "none");
}
});
!$('.section img').length && $('.section h2, .section p').css('float', 'none');
Here is a suggestion for achieving your goal (please note that I have not tested this code):
$('h2, p').parent('div').each(function(index, $element) {
if (!$element.has('img'))
$element.css('float', 'none');
});
Unfortunately, I am unable to access the jsfiddle at the moment, so my response is based solely on the information you provided.
I often find myself struggling with data manipulation before using D3 for existing models. My current challenge is figuring out the most efficient way to manipulate data in order to create a basic D3 area chart with a time-based x-axis. Initially, I have a ...
I'm looking to add a style to an element with either angular or jquery, but I've noticed that the style gets lost when I change views. Would it be best to use $window and local.storage for this purpose, or are there simpler methods available? ...
I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...
Utilizing the mean.js framework, I have the bodyParser middleware configured as shown below: app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use(methodOverride()); Additionally, I am using formidable to upload imag ...
I am experimenting with different effects on various breakpoints. My main goal is to achieve the following behavior: when a category is clicked from the list within 720px, the category list should fade out while the data is revealed in its place. However, ...
Currently, I am facing caching issues with socket io where I need to update values quickly (20 simultaneous requests). However, when I make a get request to check the updated values, the response I receive is not accurate. For example, I expect a result of ...
Beginner embarking on my inaugural project here. I have developed 2 Mongoose schematics and models for managing categories and products. The products are nested within the corresponding categories model. Using Node and Express, I successfully sent all ca ...
Last week, I updated the design of my website and tested it across various browsers and devices. It's a portfolio site built with Bootstrap, and everything looked good. However, this morning when I viewed my website on my widescreen monitor using Chro ...
I am facing an issue with my code where sometimes I get strange messages and responses when calling an asp.net method due to session expiration. Instead of returning data, the code returns an aspx page. How can I implement a check in this method to detect ...
I am currently working on a code snippet for smooth navigation scroll to different sections. var lastId; var topMenu = $(".community-nav"); var topMenuHeight = topMenu.outerHeight() - 19; if(window.matchMedia("(max-width: 768px)").matches) ...
Suppose you have the following JavaScript code snippet: var string = "A111B222C333D444E555"; var arr = string .match(/.{1,4}/g); This piece of code splits the string into an array every 4 characters and formats it correctly as: 0 => A111 1 => B222 ...
I've been working on a mini URL shortener project using JavaScript, Express, and MongoDB, but I've encountered some errors when trying to launch my local server and connect to MongoDB! Here's a snippet of my code: const express = require(&ap ...
I'm working on a HTML/CSS table and I want the header row to have a specific background color. Below is my code: <table class="contentTable"> <tr class="contentTableHeader"> <th>No.< ...
When tinymce is loaded in the head and before dom, everything works fine. However, if I attempt to load the JavaScript with ajax using jquery.getScript(), it doesn't work. I initialize tinymce when the user clicks the content area, so the dom must be ...
I have a question regarding organizing bulk code in an AngularJs controller. I currently have a controller named userDashboard.js with numerous methods for making API calls to retrieve data, such as: 1) Charts - Chart 1, Chart 2, Chart 3, etc. 2) Tables ...
I am struggling to keep two divs side-by-side within a parent div. Initially, I was able to position the image in the right div successfully, but when resizing the elements, everything became disorganized and I can't seem to fix it. As a beginner, I w ...
In order to have control over carousel slides using custom buttons, I managed to achieve this with reference to this Example. Below is the code implementation: import React, { useState } from "react"; import { Carousel, Button, Container, Row } ...
I recently wrote the code below in my React application (file name: SearchBox.jsx): import React from 'react' import ReactDOM from 'react-dom' import $ from 'jquery' export default class SearchBox extends React.Component { ...
i have a collection of objects that I need to sort based on their id. here is the information: { 1918: { id: "1544596802835", item_id: "1918", label: "Soft Touch Salt Free Mint 500 ml (000001400045)", combo_items: false } 6325: { ...
I am aiming to replicate the layout of this particular page: https://i.sstatic.net/HxOhC.png Struggling to utilize css3 for designing, how can I achieve a form similar to this? Facing difficulty in creating the outer red border and inserting spacing betw ...