I want to load an svg file in a html5, but it use this script can you help me.
So i can load this svg image to a html. it does not working but it takes time to load the svg format because. is little difficult also, to load the file svg in a format.
↧
How to load a svg file in HTML5 [closed]
↧
Which characters need to be escaped in HTML?
Are they the same as XML, perhaps plus the space one ( )?
I've found some huge lists of HTML escape characters but I don't think they must be escaped. I want to know what needs to be escaped.
↧
↧
How to Transform Coordinate Grid in JSXGraph
I am trying to transform the coordinate grid, whilst keeping the original grid in the background using the slider and grid.
So far I have managed to do this, but for some reason, when I move the slider, the grid does not move until I click the navigation buttons in the bottom-left corner, however point B does move smoothly and automatically. Is there any way to fix this?
<div id="jxgbox3" class="jxgbox" style="width:500px; height:400px;"></div><script> var board = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-12, 7, 12, -7], axis: true}); //boundbox var gr = board.create('grid', [], {strokeColor:'red'}); var s = board.create('slider',[[-2,-2],[4,-2],[0,0,0.785398]],{name:'Angle of Rotation'}); //sliders var or = board.create('point',[0,0], {name:'A',size:1}); // rotation rot = board.create('transform', [function(){return s.Value();},or], {type:'rotate'}); var a = board.create('point',[2,2], {name:'B',size:2}); rot.bindTo([a,gr]); </script>↧
Responsive image sizing: Can max-width be coded for a percentage value that scales as viewport width changes?
I am a first-time poster, and I am very unsure of where to post this question.
I would like to utilize responsive design on images, where the max-width scale continuously varies as the viewport width varies, but not in a stepping-stone fashion.
In other words, instead of using several iterations, such as
@media screen and (min-width: 2000px), { .img-photos { max-width: 70%; }}@media screen and (min-width: 1200px), { .img-photos { max-width: 80%; }}@media screen and (min-width: 500px), { .img-photos { max-width: 90%; }}where the abovementioned implementation results in abrupt and jerky image resizing as the viewport width crosses the threshold values, I want the images' max-width value to gradually scale from 90% to 70% as the viewport width grows and or 70% to 90% as the viewport width shrinks.
The idea is that I want to use a greater percentage of viewport width on small displays and a lesser percentage of viewport width on larger displays, and I want to avoid the abrupt change when the display width crosses the threshold values.
Is that possible with CSS and HTML?
Has the functionality been worked out with more advanced scripting?
I searched for answers or other instances where a similar question was asked but could not craft a search query that brought up any pertinent info.
Thank you for any advice you may share.
↧
Add content above viewport and scroll up
Im trying to make an animation where I add content that is supposed to be located above the page. When the content is added I want it to appear above the page and then scroll upwards. However when I add my content everything else is instead pushed down. Here is where I get stuck:
const el = (sel, par = document) => par.querySelector(sel);const els = (sel, par = document) => par.querySelectorAll(sel);const elBody = el("body");const elTop = el("#top");const toggleContact = () => { elBody.classList.toggle("is-show-contact"); if (elBody.classList.contains("is-show-contact")) { elTop.scrollIntoView({ behavior: "smooth", block: "start" }); }};els(".btn-contact").forEach((elBtn) => { elBtn.addEventListener("click", toggleContact);});* { margin: 0; box-sizing: border-box;}.box { height: 100dvh;}#top { position: relative; overflow: auto; background: #ddd; transition: height 1s; height: 0dvh; .is-show-contact & { height: 100dvh; }}img{ width:100%;}<div id="top"><h2>CONTACT FORM</h2><img src = "https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=256"><button class="btn-contact" type="button">Close</button></div><div class="box"><p>Scroll down as well...</p><button class="btn-contact" type="button">Contact</button></div><div class="box"><button class="btn-contact" type="button">Contact</button></div><div class="box"><button class="btn-contact" type="button">Contact</button></div><div class="box"><button class="btn-contact" type="button">Contact</button></div>I got the idea from a page called yearofmoo, a website that contains codingguides and videos. If you want to check it out the animation happens when you press contact in the menu. Have anyone acheived something simiular? I think I can manage the scroll myself, my question is how I can the content above the viewpoint.
↧
↧
displaytag table column totals
I'm using the displaytag JSP tag library to generate tables that show column totals. For example in the JSP code below, only those columns with the attribute total="true" will have totals generated.
<display:table name="myTable" id="myTable" decorator="org.displaytag.decorator.TotalTableDecorator"><display:column property="name" title="Name" /><display:column property="description" title="Description" /><display:column property="openCount" title="Opened" total="true"/><display:column property="revenueTotal" title="Commission" total="true"/></display:table>The problem is that displaytag places these totals in the final <tr> in the table body, but I need them to be inside the table footer <tfoot> instead. Is this possible without post-processing the generated HTML in JavaScript?
↧
HTMX afterSwap and afterRequest events not raised on swapped content
A list of items with a "load more" button; the response will contain more items and a new button:
<div>Item 1</div><div>Item 2</div><div>Item 3</div><!-- ... --><div id="more"><button hx-get="/load-items?page=2" hx-on:htmx:after-swap="alert('swapped!')" hx-target="#more" hx-swap="outerHTML">Load more<button></div>The afterSwap and afterRequest events are not raised / handled. I assume that's because it removes the original content?
How can I raise and handle the event despite the swap?
↧
iFrame unmute and autoplay
I am trying to embed a short video in a website.
I can either get it to autoplay or get it to have volume...but not both:
to autoplay:
<div style="position: relative; overflow: hidden; aspect-ratio: 1920/1080;"><p><iframe id="vidFrame" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0; overflow: hidden;" title="The Conclusion People" src="https://share.synthesia.io/embeds/videos/7b183a6b-3920-4c9d-9e3a-949339411f28?autoplay=1" allowfullscreen="allowfullscreen"></p><p></iframe></p></div>to unmute:
<div style="position: relative; overflow: hidden; aspect-ratio: 1920/1080;"><p><iframe id="vidFrame" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0; overflow: hidden;" title="The Conclusion People" src="https://share.synthesia.io/embeds/videos/7b183a6b-3920-4c9d-9e3a-949339411f28?mute=0" allowfullscreen="allowfullscreen"></p><p></iframe></p></div>I have tried several things including;
<div style="position: relative; overflow: hidden; aspect-ratio: 1920/1080;"><p><iframe id="vidFrame" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0; overflow: hidden;" title="The Conclusion People" src="https://share.synthesia.io/embeds/videos/7b183a6b-3920-4c9d-9e3a-949339411f28?autoplay=1&mute=0" allowfullscreen="allowfullscreen"></p><p></iframe></p></div>can only get it to do either 1 or the other thing (not both).
Help!
↧
Margin Reset to 0 in 1 Second
When you click the button once the transition is 300 seconds.
What i'm trying to do is when you click the button twice Reset it in 1 second
So what is happening is when you click the button once Margin-Left goes -20000px in 300 seconds ..what i want is when you click it twice it resets Margin-Left to 0 in 1 second not 300.
var clicked1 = 0;const btn = document.getElementById("blast")function screen() { if (clicked1 == 0) { $(".box").toggleClass("boxxy", 0); btn.textContent = btn.textContent === "RETURN HOME" ? "FLY AWAY" : "RETURN HOME"; clicked1 = 1; } else if (clicked1 == 1) { $(".box").toggleClass("boxxy", 0); btn.textContent = btn.textContent === "RETURN HOME" ? "FLY AWAY" : "RETURN HOME"; clicked1 = 0; }}body { background-color: #6A6A6A;}html,body { height: 100%;}.boxxy { margin-left: -20000px; transition-duration: 1s;}.box { position: fixed; top: 0px; left: 0px; width: 20000px; height: calc(100% - 100px); overflow: hidden; transition-timing-function: linear; transition-duration: 300s; z-index: 5;}.box img { height: 100%; width: 100%;}.linksbox { position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100px; text-align: center; background-color: #000000; font-size: 25px; color: #AEBC1F;}<div id="box" class="box"><img src="https://tim-school.com/codepen/2dgame/wall.png" alt="" /></div><div class="linksbox"><button onClick="screen()" id="blast">FLY AWAY</button></div><script src="https://code.jquery.com/jquery-3.7.1.js"></script>↧
↧
Getting 302 error on redirection, unable to redirect to next page while deploying on Railway
Im using Flask along with bits of HTML and JS
In my HTML file I have a redirect using
window.location.href = window.location.origin +"/menu";and another using:
window.location.href = window.location.origin +"/order_summary";but it doesn't go to the next page (this does work locally though)Thanks in advance!
It gets stuck on / page and doesn't get redirected
↧
Why is my content out of scrollable area when window size gets reduced?
In my page layout with a fixed header area and main content (split between a sidebar and main content area) everything lines up and if I add dummy content to force a scroll then my header stays at the top. The content will be restricted to 80% or min 800px width centered in the window if it is bigger.
When window size is reduced below 800px width, although a scrollbar appears, the logo/sidebar area is off screen to the left. If shrunk enough even some of the main area which is scrollable is hidden off to the left. How do I force the content to remain on screen?
body { padding: 0; margin: 0; font-family: sans-serif; display: flex; flex-direction: column;}#wrapHead { width: 100%; position: fixed; display: flex; justify-content: center; height: 80px; margin: 0; top: 0px; background-color: #333399; color: #ffffff;}.header { display: flex; width: 80%; min-width: 800px;}#wrapMain { width: 100%; /* position: fixed; */ display: flex; justify-content: center; height: 100%; margin: 0; margin-top: 80px;}.main { display: flex; width: 80%; min-width: 800px;}.sideCol { width: 150px; min-width: 150px; background-color: #6666cc;}.mainCol { width: 100%; min-width: 650px; background-color: #9999ee;}<div id="wrapHead"><div class="header"><div class="sideCol"> [LOGO]</div><div class="mainCol"> header/title --> [user/login]</div></div></div><div id="wrapMain"><div class="main"><div class="sideCol"> side nav</div><div class="mainCol"> main content</div></div></div>↧
How do I vertically align text in a div?
I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.
.testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0;}<div class="testimonialText"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>↧
How can I vertically center a div element for all browsers using CSS?
I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
<body><div>Div to be aligned vertically</div></body>How can I center a div vertically in all major browsers, including Internet Explorer 6?
↧
↧
How to center image horizontally within a div element?
How can I center align (horizontally) an image inside its container div?
Here's the HTML and CSS. I have also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.
#thumbnailwrapper { color: #2A2A2A; margin-right: 5px; border-radius: 0.2em; margin-bottom: 5px; background-color: #E9F7FE; padding: 5px; border: thin solid #DADADA; font-size: 15px}#artiststhumbnail { width: 120px; height: 108px; overflow: hidden; border: thin solid #DADADA; background-color: white;}#artiststhumbnail:hover { left: 50px}<!--link here--><a href="NotByDesign"><div id="thumbnailwrapper"><a href="NotByDesign"><!--name here--><b>Not By Design</b><br><div id="artiststhumbnail"><a href="NotByDesign"><!--image here--><img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" /></a></div><div id="genre">Punk</div></div>Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that's normally where the focus is.
↧
How does `#:~:text=` in URL work to highlight text?
TL;DR
How/why are some browsers able to search and highlight text in the HTML body which is followed by #:~:text= in the URL?
Explanation
One day I was searching for something on Google, which lead me to Quora's result. I observed that 2 sentences were highlighted in yellow, which were part of URL after the aforementioned parameter. I thought this would be Quora's feature for SEO or something, however, also found this on Linkedin, and Medium, and so on.
I'd like to know:
- What is this highlighting called? Why/how does it work?
- This seems to be browser-specific. What kind of browsers support this?
It seems to work on Chrome and Edge; but not on Firefox, Safari, and IE. - Does a frontend programmer need to incorporate something in the code to have search engines highlight content on their web-pages? (Based on the assumption that search engines actually appends the relevant string predicted by user's query)
↧
Change HTML Select2 pulldown list Width
As I learned and tested that below code will set Select2 pull down list width. It applies to all Select2 on a HTML page.
.select2-container { width: 200px !important; }I have couple Select2 and I want to change below #company width only to 500px.
<div class="field-container" style="width: 600px !important"><label>Company:</label><select id="company" style="width: 500px !important"><option value=""></option></select></div>The style="width: 600px !important" does set my Select2 container width to 600px.
style="width: 500px !important" does not work.
I tried to use below to override pulldown selection width for #company. It does not work.
#select2-company-container { width: 500px !important;}How to change #company pulldown list width?
↧
modal window showing within a section when it should show on entire window
Issue:
As seen in image 
dark portion of modal window is covering only services.
Result:
I need that it cover entire window as similar to image below. 
LATEST UPDATEIn css, change from
width: 100%; height: 100%;to
width: 100vw; /* Full viewport width */ height: 100vh; /* Full viewport height */gives below output which is still not like the image above ( required )
EDIT:
I know that html, js css code can be tested on jsfiddle but I don't know how to recreate this exact problem with so many divs, as I tried but failed. While, I will try it again, if you have already some idea please throw some light on what changes to bring in to achieve the Result
If i may ask, How does the code work. i.e, is the modal dialog limited by the div's it is being called from or is it limited by the css that renders it ?
CONTEXT:In jekyll , index.html -> home.html -> base.html -> body-wrapper.html -> (buying.html, selling.html, leasing.html etc ...)
body-wrapper.html
..<section class="lui-section lui-gradient-bottom" id="services-section">..<div class="v-line v-line-right"><div class="container"><div class="swiper-container js-services scrolla-element-anim-1 scroll-animate" data-animate="active"><div class="swiper-wrapper"><div class="swiper-slide"> {% include buying.html %}</div><div class="swiper-slide"> {% include selling.html %}</div> . .</div><div class="swiper-pagination"></div></div><div class="lui-bgtitle"><span> Services </span></div></div></div></section>buying.html
<div class="modal-body"><a href="#buyModal" class="open-modal" data-modal="buyModal"><div class="services-item"><div class="lui-subtitle"><span>Buying</span></div><div class="lui-text"><div><p>First, I will help you obtain a pre-approval document from a reliable, re....sive l...w ...click here</p></div></div><div class="image" style="background-image: url(assets/images/pat-2.png);"></div></div></a></div>{% include modal.html modal-name='buyModal' modal-data='This is a simple modal popup example in Jekyll' %}modal.html
<!-- The Modal--><div id="{{ include.modal-name }}" class="modal"><!-- Modal content --><div class="modal-content"><span class="close" data-modal="{{ include.modal-name }}">×</span><h2>Modal Header</h2><p>{{ include.modal-data }}</p></div></div>modal-videos.css
/* Modal styles *//* Modal background */.modal { display: none; /* Hidden by default */ position: fixed; z-index: 9990 !important; /* Sit on top */ left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); animation: fadeIn 0.5s;}/* Modal Content */.modal-content { background: white !important; /* Ensures modal is white */ z-index: 9999 !important; /* Sit on top */ border-radius: 8px; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; animation: slideIn 0.5s;}/* Close button */.close { color: #aaa; float: right; font-size: 28px; font-weight: bold;}.close:hover,close:focus { color: black; text-decoration: none; cursor: pointer;}/* Fade in animation */@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}/* Slide in animation */@keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; }}modal-videos.js
// Open modal functionalitydocument.querySelectorAll('.open-modal').forEach((button) => { button.addEventListener('click', (event) => { event.preventDefault(); // Prevent default link behavior const modalId = button.getAttribute('data-modal'); const modal = document.getElementById(modalId); modal.style.display = 'block'; });});// Close modal functionalitydocument.querySelectorAll('.close').forEach((button) => { button.addEventListener('click', () => { const modalId = button.getAttribute('data-modal'); const modal = document.getElementById(modalId); modal.style.display = 'none'; });});// Close modal when clicking outside of itwindow.addEventListener('click', (event) => { document.querySelectorAll('.modal').forEach((modal) => { if (event.target === modal) { modal.style.display = 'none'; } });});↧
↧
How to retain the selected dates in datepicker after submit in PHP
I have 2 datepickers From and To, one submit button in PHP.When selected the dates in two datepickers and click the submit button, the datepicker's values return to default. Here is the code I used.
<div class="col-md-8"><form autocomplete="off" class="form-inline" method="POST" action=""><?php $firstday = date('Y-m-01'); $lastday = date('Y-m-t'); ?><label>Date:</label><input type="date" id="myDate1" name="date1" value="<?php echo $firstday;?>"><label>To</label><input type="date" id="myDate2" name="date2" value="<?php echo $lastday;?>"><button class="btn btn-primary" name="search"><span class="glyphicon glyphicon-search"></span></button></form>
What i need is to retain the selected values after submit.Thank you!
↧
Proper web.config for removing .html in url on godaddy site
I am using a web.config file to remove the .html from the url on my godaddy site I set up for a non-profit org. I am rather new to this and was given this code from a friend to help and got nothing but errors and crashed pages.
I uploaded the file to the public/html folder, renamed the files for each page to just the name (index, services, etc..) and nothing would load.
I previously tried an .htaccess file but was told it would not work with Godaddy sites for some reason, I still have the file for that also if anyone knows if that way would be better.
<configuration><system.webServer><rewrite><rules><rule name="RewriteHTML"><match url=”(.*)” /><conditions logicalGrouping=”MatchAll”><add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” /><add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” /></conditions><action type=”Rewrite” url=”{R:1}.html” /></rule></rules></rewrite></system.webServer></configuration>This was saved as web.config and placed within the public/html folder and my pages were renamed without the .html but it did not work.
↧
What is a Less file?
I've started working newly on the React library. In the entire codebase that I've to work upon, I see *.less files which contain classes related to styles just as we used to have in CSS files for HTML/JavaScript pages.
How is a .less file any different from the conventional CSS style sheets? Can we also use *.css files with *.JSX files for styling purposes?
↧
How to apply Photoshop-style color curves filters to an HTML tag?
I'm trying to replicate the following Photoshop color curves filter in an HTML video tag.
The closest answer I've found so far is how to add Photoshop-like color levels with CSS and SVG Filters but it's not quite what I need.
Any approach using CSS, SVG Filters, or even a third-party library is welcome!
↧
↧
JLabel: how to get space between two span tags
Have following program
import java.awt.BorderLayout;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.SwingUtilities;import javax.swing.WindowConstants;public class HTMLabelTryout { private static final String TEXT ="<html><span style=\"font-size:24px; margin-right:16px; color:#007f9c\">This is a paragraph.</span>"+"<span style=\"font-size:16px\">This is another paragraph.</span></html>"; private static final String TEXT2 ="<html><p style=\"font-size:24px; margin-bottom:16px; color:#007f9c\">This is a paragraph.</p>"+"<p style=\"font-size:16px;\">This is another paragraph.</p></html>"; public static void main(String[] args) { SwingUtilities.invokeLater(new HTMLabelTryout()::showFrame); } private void showFrame() { JFrame frm = new JFrame(); frm.add(new JLabel(TEXT), BorderLayout.PAGE_START); frm.add(new JLabel(TEXT2), BorderLayout.PAGE_END); frm.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE); frm.setSize(900, 400); frm.setLocationRelativeTo(null); frm.setVisible(true); }}Second text looks OK, but in first I get no space between two spans (margin-right/margin-left instructions are ignored). Any ideas, how to get 16px gap between two spans in Swing?
P.S. I know, I can add some non-breaking space tags between spans to get a space, but it's not exact and looks ugly.
P.P.S. For some reasons I must use HTML here and cannot switch to a JPanel with 2 JLabel solution.
↧
Fixing Sticky Table Header with Horizontal Scroll in a Scrollable Container
Problem description:
I have a layout where a fixed menu occupies the left side of the viewport, taking up the full height. On the right side, I have a table that dynamically loads data as you scroll. The table includes both a header and a footer.
The issue arises with the table header:
The header stays sticky at the top when scrolling vertically.However, when I set overflow-x: auto on the .content container to allow horizontal scrolling, the sticky behavior of the header breaks, and it no longer remains fixed at the top.
What I tried:
I applied position: sticky; top: 0; to the thead to keep it fixed. I wrapped the table inside a div with overflow-x: auto, but this causes the sticky behavior to stop working. I also tried setting position: sticky directly on the th element, but that didn’t help. I attempted to use display: block; on the table header, but it affected the column alignment.
What I expected:
I want the table header to remain sticky at the top of the viewport when scrolling vertically, while also allowing horizontal scrolling within the .content div.
let rowCount = 20;const tbody = document.querySelector('#dataTable tbody');// Function to generate a table row (simulate fetched data)function generateRow(index) { return `<tr><td>Row ${index} - Fixed</td><td>Row ${index} - Col2</td><td>Row ${index} - Col3</td><td>Row ${index} - Col4</td><td>Row ${index} - Col5</td><td>Row ${index} - Col6</td><td>Row ${index} - Col7</td><td>Row ${index} - Col8</td><td>Row ${index} - Col9</td><td>Row ${index} - Col10</td></tr> `;}// Insert initial rowsfor (let i = 1; i <= rowCount; i++) { tbody.insertAdjacentHTML('beforeend', generateRow(i));}// Auto-load more rows when scrolling near the bottom of the pagelet loading = false;window.addEventListener('scroll', function() { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100 && !loading) { loading = true; // Simulate API call delay (replace with your actual API call) setTimeout(() => { for (let i = rowCount + 1; i <= rowCount + 10; i++) { tbody.insertAdjacentHTML('beforeend', generateRow(i)); } rowCount += 10; loading = false; }, 300); }});.container { max-width: 1350px; padding: 0; @media (max-width: 1350px) { padding: 0 15px; } @media (max-width: 991.98px) { padding: 0 15px; }}.d-flex { display: flex !important;}.align-items-start { align-items: flex-start !important;}.gap-30 { gap: 30px;}.menu-main-wrapper { background: linear-gradient(93.39deg, rgba(113, 113, 113, 0.62) 0.08%, rgba(113, 113, 113, 0) 79.29%); padding: 0 1px; height: 100svh; width: 25.25%; position: -webkit-sticky; position: sticky; z-index: 10; top: 0;}@media screen and (max-width: 1133.98px) { .menu-main-wrapper { display: none; }}.page-main-wrapper { width: 74.75%;}@media screen and (max-width: 1133px) { .page-main-wrapper { width: 100%; }}.content { width: 100%;}.table-wrapper { width: 100%;}/* Table styling */table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 100px; margin-bottom: 20px;}th,td { padding: 10px; white-space: nowrap; border-bottom: 1px solid green;}thead th { position: sticky; top: 0; background: #686161; z-index: 2;}th:first-child,td:first-child { position: sticky; left: 0; background: #7e4545; z-index: 1; border-right: 1px solid blue;}thead th:first-child { z-index: 3; border-top-left-radius: 10px; border-top: 1px solid red;}.header,.footer { height: 100px; background: blue; text-align: center; margin: 30px 0;}<div class="container"><div class="d-flex align-items-start gap-30"><div class="menu-main-wrapper"></div><div class="page-main-wrapper"><div class="header">header</div><div class="content"><div class="table-wrapper"><table id="dataTable"><thead><tr><th>Fixed Column</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th><th>Column 6</th><th>Column 7</th><th>Column 8</th><th>Column 9</th><th>Column 10</th></tr></thead><tbody></tbody></table></div></div><div class="footer"></div></div></div>↧
Add an arrow under the active menu item in HTML+CSS
I am trying to generate a menu like the following:
There are several items in the menu and the active one has an arrow after it.The menu items are tags like the following code:
<div class="menuCenter"><div class="linksWrapper"><a href="#">Home</a><a class="menuCenterLinkLeft" href="#">Plans & Pricing</a><a class="menuCenterLinkLeft" href="#">Sign In</a><a class="menuCenterLinkLeft active" href="#">Sign Up</a><a class="menuCenterLinkLeft" href="#">Contact</a></div></div>I tryied two options: 1- Absolutely positioning the arrow image with javascript. I have problems when resizing the page.2- Using the :after pseudo element, like this:
.linksWrapper a.active:after{ content: url("images/arrowImg.png"); position: relative; left: -40px; top: 30px; }The problem with this approach was the horizontal alignment of the arrow. It should be below the center of the link and I could not achive that.I can use HTML5 or CSS 3.
Any help?
↧
Round Star Fully Corners&Edges CSS?
So recently I had a request+curiosity to a design , I need to do inverted round borders but I also have to do round edges in CSS the final shape would be like a " +" with a lot of curbes.
CSS Generators I tried this for corners and yes it does the job but then what do I do with the edges ? I attached something that I drew quickly on phone At the top is what css generator would do but then at the bottom is what I would like to achieve
↧
↧
I created a table in html but rowspan not working as excepted
table { border-collapse: collapse }td, th { border: solid thin black }<table><tr><td rowspan="2">first</td><td rowspan="4" colspan="9">second</td><td colspan="3">third</td></tr><tr><td colspan="2">four</td><td>five</td></tr><tr><td rowspan="2"> six</td><td colspan="3" rowspan="2"> seven</td></tr></table>In this six and first both taking 2 rowspan still six is only taking one row and seven also taking only one row despite I've written rowspan 2, due to this first and six is differing because first working fine while six not.
↧
How to add a gap between column without moving to another row in bootstrap 5?
I'm working on a testimonial section that has a structure like this :
<div class="container"><div class="row"> (row of the testimonial card)<div class="col"> (content/testimonial card)<div class="col"> (content/testimonial card)</div></div>there are more row and column inside of each column (testimonial card) for layout purpose
The problem is when i try to add a gap on "row of the testimonial card" the testimonial card would stack into 1 columns instead of 2 (what it supposed to be) even if the gap is the lowest
- first i tried using row-cols-2 and it doesn't work
- second i tried to decrease both of the card's size by adding : w-50 & col-6 (and lower) and still doesn't work
- the last step is i tried removing the "container" class that holds the row and column (cards) and then again, still doesn't work
What it should look like :
The result :
↧
Make a div to fill the 100% of parent div
I have two columns divs, the left one is used for navigation, while the right one contains the desired page to be loaded.
The left one has two blocks, a first one with the navigation links assigned to user, and a second one with only two fixed links.
Due the right column may vary on height, tryied to make that the left column is always 100% of the height, but it does not work. Tryied with height, min-height, flex, display contents, fill-contents, and so on with out result.
Any idea to make the left column same size of the right (100% height of parent div), independtly of right content?
.row { margin: 0; padding: 0; width: 100%;}.col { min-height: 100%; float: left; height: 100%}#coll { border: 1px blue solid; width: 30%; display: flex; flex-direction: column;}#block1 { background-color: #FFE; flex: 1 1 auto;}#block2 { background-color: #FEF; flex: 0 1 auto;}#colr { border: 1px #EFF solid; width: 60%;}#block3 { background-color: #EEF; height: 300px;}<div class="row"><div id="coll" class="col "><div id="block1"> dinamic height </div><div id="block2"> static height </div></div><div id="colr" class="col"><div id="block3"> Lorem ipsum with a lot of text </div></div></div>↧
Open DIV/SPAN on right side (with content) on link Click
I'm displaying the results in a HTML table for right and wrong answers.
Each question has an "Explain Link" as the last colum of the table.If clicked, I want a new DIV or SPAN open adjacent to it on the right side (expand as needed). It will show the detailed explanation for that particular question. It will include text which can be HTML formatted with h2, h3, p tags, and may also include images ("<img src" kind).Clicking again on the same or different question "Explain Link" should close that open DIV or SPAN.
This is what I've tried:
Javascript:
<script> $(function () { $('#button-1').click(function(){ $('#popup-1').animate({height:'500px'}, 500); }); });</script>HTML:
<tr><td>Q.2<td>C<td>C<td>✅<td><a href='#' id="button-1">Explain</a><span id='popup-1'>Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>CSS:
#popup-1{ height: 0px; width: 100%; float: right; overflow: hidden; background: #efefef;}Any inputs on what is going wrong and amends to make?
↧
↧
Add dot dot dot without using ellipsis in css [duplicate]
I am working in an app using Japanese and the ellipsis is awkward when using a specific font-family and text-overflow: ellipsis. I do not want to change the language or the font family, but I need to add '...' at the end when overflow hidden occurs.
As you can see in the next picture, text-overflow: ellipsis gives a strange ellipsis when using lang='ja' and a font-family: 'Meiryo', 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;.
I tried:
text-overflow: '...'; overflow: hidden;but it only works in Firefox and not in Chrome.
I also triedstyle.less
.myClass { overflow: hidden;&::after { content: '...'; } }But I cannot see the dots at the end. Also I think this approach will not work because it will still show when I the overflow does not occur.
Is there a way to solve this problem and show '...' without using text-overflow: ellipsis property?
Thank you.
↧