I have a page with multiple <dialog> elements, which I open as modal using their showModal() methods.
I want to detect whether any of them is currently opened from Javascript (since some event handlers shouldn't trigger when a modal is opened). Is it possible to check if modal is currently opened? Maybe through existance of dialog::backdrop or checking someway for inertness of non-modal content?
I'm trying to solve this css problem: I have a list of items contained in a scrolling container (overflow-y: scroll / overflow-x: hidden) each of this items have a child div (popup). I need to display this child element outside the scrolling container but the position must be relative to the item div.
I can't manage to find a way to display those childs elements outside the overflow hidden of the scroll container.
If anyone has a solution, thank you so much.
Simplified exemple :
https://jsfiddle.net/zbvwjq1s/35/
Login
.container{
position: relative;
background-color:black;
width:200px;
margin:0 auto;
}
.scroll-container{
overflow-y:scroll;
height: 250px;
background-color:red;
}
.item{
display:flex;
align-items:center;
margin-top: 10px;
width:100%;
height: 50px;
background-color:green;
}
.popup {
position: absolute;
right:-80px;
width:80px;
height:40px;
background-color:blue;
visibility:hidden;
}
.item:hover .popup {
visibility:visible;
}<div class='container'>
<div class='scroll-container'>
<div class='item'>
<div class='popup'></div>
</div>
<div class='item'>
<div class='popup'></div>
</div>
<div class='item'>
<div class='popup'></div>
</div>
<div class='item'>
<div class='popup'></div>
</div>
<div class='item'>
<div class='popup'></div>
</div>
<div class='item'>
<div class='popup'></div>
</div>
<div class='item'>
<div class='popup'></div>
</div>
</div>
</div>So the context is I'm following a tutorial on codemy.com. Somewhere before Django 5.0 I lost my "magic", the tutorial was written for 3.8 or 4.X maybe. I am showing a function based view although I have tried the class base view as suggested on the codemy youtube. The reason I chose function view is it was easier for me to debug.
views.py
from django.shortcuts import render
from django.views.generic import ListView #DetailView
from django.http import HttpResponse
from .models import Post
class Home(ListView):
model = Post
template_name = "home.html"
def articleDetail(request, pk):
try:
obj = Post.objects.get(pk=pk)
return render(request, "article_detail.html", {object, obj})
except Post.DoesNotExist:
print("Object number: " + str(pk) + " not found")
return HttpResponse("Object number: " + str(pk) + " not found")
the model
from django.db import models
from django.contrib.auth.models import User
class Post(models.Model):
title = models.CharField(max_length=255)
author = models.ForeignKey(User, on_delete=models.CASCADE)
body = models.TextField()
def __str__(self):
return str(self.title) + ' by: ' + str(self.author)
the urls file
from django.urls import path,include
from .views import Home, articleDetail
urlpatterns = [
path('', Home.as_view(), name="home"),
path('article/<int:pk>', articleDetail,name="article-detail"),
]
the template for home, works fine until redirect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing!!!</title>
<h1> Home Pageeeeee</h1>
</head>
<body>
<ul>
<h2>Articles</h2>
{% for article in object_list %}
<li>
<a href="{$ url 'article-detail' article.pk %}">{{article.title}}</a>
<br/>
By: {{article.author}}
<p>
{{article.body}}
</p>
</li>
{% endfor %}
</ul>
</body>
</html>
I think my error is either how I'm passing the primary key to look up the object or how I'm asking the URL file to locate the document
I have this HTML form and JavaScript to add a dinamic form input when I click the + button, how can I give an individual name to each input field? name="name1" name="email1", name="name2" name="email2", name="name3" name="email3" and so on...
<div class="row justify-content-center">
<div class="col-xl-8">
<div class="contact-form__inner">
<form action="form/register.php" method="post">
<div class="input-group">
<div class="input-single">
<label for="contactFirstName">Team Name</label>
<input type="text" name="contact-name" id="contactFirstName" required
placeholder="Enter your team name">
</div>
<div class="input-single">
<label for="contactEmail">Email</label>
<input type="email" name="contact-email" id="contactEmail" required placeholder="Enter your email">
</div>
</div>
<div class="input-group">
<div class="input-single">
<label for="contactEmail">Player Name</label>
</div>
<div class="input-single">
<label for="contactPhone">Player Email</label>
</div>
</div>
<div class="input-group m-3">
<input type="text" name="name1" class="form-control m-input" placeholder="Player name">
<input type="text" name="email1" class="form-control m-input" placeholder="Player email">
<div class="input-group-prepend">
<button class="btn btn-danger"
id="DeleteRow"
type="button">
<i class="bi bi-trash"></i>
Delete
</button>
</div>
</div>
<div id="newinput"></div>
<button id="rowAdder" type="button" class="btn btn-dark">
<span class="bi bi-plus-square-dotted">
</span> ADD
</button>
<div class="section__cta">
<input type="text" class="d-none" name="form-anti-honeypot" value="">
<button type="submit" class="cmn-button">Send Message</button>
</div>
</form>
</div>
<script type="text/javascript">
$("#rowAdder").click(function () {
newRowAdd =
'<div id="row"> <div class="input-group m-3">' +
'<input type="text" name="name2" class="form-control m-input" placeholder="Player name"><input type="text" name="email2" class="form-control m-input" placeholder="Player email">' +
'<div class="input-group-prepend">' +
'<button class="btn btn-danger" id="DeleteRow" type="button">' +
'<i class="bi bi-trash"></i> Delete</button> </div></div> </div>' ;
$('#newinput').append(newRowAdd);
});
$("body").on("click", "#DeleteRow", function () {
$(this).parents("#row").remove();
})
</script>
</div>
</div>
I have tried an auto increment funtion but I cannot make it work
So I'm struggling to vertically center a div element within another div using CSS.
I've tried using various CSS properties like flexbox and vertical-align, which by the way have worked for me before but none of it is working as expected. The element either stays at the top or bottom of the parent container.
PLEASE HELP and thank u in advance :)
javascript code (the error code is placed at addEventListener)
const translations = {
en: {
text1: "testing"
},
no: {
text1: "testing"
},
gm: {
text1: "testen"
}
}
const languageSelectop = document.querySelector("LS");
problem being around here
languageSelectop.addEventListener("change", (event) => {
setLanguage(event.target.value)
})
const setLanguage = (language) => {
if(language == "no"){
console.log(language);
}else if(language == "en"){
console.log(language)
}else if(language == "gm"){
console.log(language)
}
}
html code (no aperent isues as far as i know)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arctic Fox Web - WIP</title>
<script type="text/javascript" src="js/Language.js"></script>
</head>
<body>
<div>
<select name="" id="LS">
<option value="en">English</option>
<option value="no">Norsk</option>
<option value="gm">Deutsch</option>
</select>
</div>
<div>
testing
</div>
<div>
testing
</div>
</body>
</html>
im following a tutorial on yt thus i dont quite know whats wrong if it is needed here is the video Youtube
I'm creating my website in on Wordpress.com and I'm implementing my theme.
I created a folder in wp-content/themes/mytheme and in this folder I created an index.php and a style.css.
Basically my style.css doesn't want to apply to my page. Here is my CSS and PHP code
index.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' ); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>
<div id="content">
<h1>Hello there!</h1>
<p>This is my website</p>
</div>
<?php wp_footer(); ?>
</body>
</html>
style.css:
body {
background-image: url('wp-content/themes/miotema/images/prima.jpg') !important;
min-height: 100vh !important;
background-color: rgba(234,234,234,0.5);
background-attachment: scroll !important;
background-repeat: no-repeat !important;
background-size: cover;
padding-top: 100px;
padding-bottom: 100px;
}
I tried to put all in my php code adding the line:
style="background-image: url('wp-content/themes/miotema/images/prima.jpg') !important; background-size: cover !important; background-position: center !important;">
and in this case the style that I put in phh applies succesfully.
Is there a problem in linking the CSS to the PHP file? Is this a problem of Wordpress that has priority on my style.css?
function triggerDailyUpdate() {
console.log('the Function worked');
setInterval(function(){
const now = new Date();
if (now.getHours() === 0 && now.getMinutes() === 0) {
console.log("Conditions detected, regenerating table for the next day");
predictionsContainer.innerHTML = "";
setupPredictions();
}
}, 60000);
I made a javascript function where it'll trigger a daily update to a table using an inner HTML. When I checked it on the dev mode from my browser it only run the console.log for "The Function Worked" and the rest of the code didn't properly run. I tried to test it by changing the get hours and minutes value and it still didn't trigger. What went wrong? I just wanted it to trigger the setupPrediction function daily based on the getHours and getMinutes value (which is midnight)
I'm new to coding so the answer is probably obvious. I have all the items including the logo under however the logo hides behind the navigation bar no matter what I do. I'm trying to make the navigation bar and the logo move down the page as the user scrolls. As it sits that works but its just getting the logo inline with it all.
HTML
`<nav>`
`<img src="Images/lilac-valley-logo.png" alt="Lilac Valley Logo">`
`<ul id="navItems">`
`<li><a href="default.asp">Home</a></li>`
`<li><a href="About.asp">About</a></li>`
`<li><a href="Gallery.asp">Gallery</a></li>`
`<li><a href="Contact.asp">Contact</a></li>`
` <li><a href="Booking.asp">Booking</a></li>`
` </ul>`
`</nav>`
CSS
img {`
width: 80px;
display: inline-flex;
}
ul{`
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #5c4033;
position: fixed;
top: 0;
width: 100%
}
li {
float: left;
}
`li a {`
display: inline-flex;
padding: 20px;
text-align: center;
padding: 14px 16ox;
color: #ffffff;
` }`
` li a:hover {`
background-color: #c4a484;
` }`
nav { `
display:inline-flex;
z-index:1;
position:fixed;
top:25px;
width:fit-content;
height:44px;
list-style-type:none;
`}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
Half the css probably isn't needed. but basically as it sits this code creates a navigation bar but the logo is hidden behind it. I tried deleting the img portion but that just makes the logo massive. Tried changing width on both images and nav but that either changed the size of the image or shortened the nav bar.
I have to make a chat widget movable. This chat widget is injected by an external script (SFDC Embedded Service, to be specific). Hence, I do not have access to the click handlers of the chat widget.
I am currently using event handlers of the embedded service to attach 'mousedown', 'mouseup' and 'mousemove' event listeners to the chat widget to make it movable.
While the widget is movable by dragging, upon mouseup, the mouseclick event is also triggered and the chat gets activated.
Can I avoid triggering the mouseclick event given the external nature of the widget?
I am also using react if that matters.
The chat widget is also attached directly onto the document body by the salesforce script, so a container is out of the question.
HTML:
<body>
<script async src='salesforce.com/esw.min.js' /> // external script that adds chat widget
</body>
rough representation of esw.min.js:
const chatWidget = <chat-widget />
chatWidget.addEventListener('click', openChat)
document.querySelector('body').append(chatWidget) // adds chat widget into body
my code:
const widgetObserver = new MutationObserver((mutations, observer) => {
const helpButton = document.querySelector('chat-widget');
if (helpButton) {
!helpButton.draggable && enableDragging(helpButton);
observer.disconnect();
}
});
function enableDragging(element) {
var displacedX = 0,
displacedY = 0,
currentX = 0,
currentY = 0;
// otherwise, move the DIV from anywhere inside the DIV:
element.onmousedown = dragMouseDown;
element.style.right = currentX + 'px';
element.style.bottom = currentY + 'px';
element.draggable = true;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
currentX = e.clientX;
currentY = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
// calculate the new cursor position:
displacedX = currentX - e.clientX;
displacedY = currentY - e.clientY;
currentX = e.clientX;
currentY = e.clientY;
// set the element's new position:
element.style.top = element.offsetTop - displacedY + 'px';
element.style.left = element.offsetLeft - displacedX + 'px';
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
So I made a @keyframes to shift the background from bottom left to top right, and it works 100% fine, but Visual Studio Code keeps flagging it as wrong for some reason, I made another @keyframes totally different and unrelated to this one to test, and it flagged it as wrong with the squiggly red lines again. I have no idea on how to solve this, I've tried everything, but nothing works, Help! *Note that the "wrong red lines" only appear on the first element of the "from".
*Note that the "wrong red lines" only appear on the first element of the "from".
Within a python script I have a function which looks as below:
def NotifierFunc(Mail, Ticket_Num, Open_DtTime):
cmd = "/home/path/MyPerlScript.pl --channel 'MyChannel' --userid 'itsme' --message 'Hello \<at\>"+Mail+"\<at\> : The ticket \<a href='`echo 'http://snview/'"+Ticket_Num+">`echo "+Ticket_Num+"\`\</a\> is not closed for more than 72 hours : Open since "+Open_DtTime+" IST. Please close asap.' "
print(cmd)
subprocess.Popen(cmd, shell= True, stout=subprocess.PIPE)
This command does not get executed successfully in the shell primarily because the the message (all that is passed after '--message' is put within single quotes). When I put that under double quotes python script throws syntax error. When I put the whole cmd value in either single quote or doc string quote and message content in double quote that results in syntax error as well. When I run the cmd directly on linux shell with the message content placed within double quotes it works absolutely fine.
Now my question is how can I pass on this whole cmd value to subprocess so that the content of '--message' can be rendered correctly - or how can put the '--message' content within double quotes and make it work. Please note if I pass on the cmd as below - it works fine but it does not have the hyperlink for the ticket number. But I need the hyperlink.
cmd = "/home/path/MyPerlScript.pl --channel 'MyChannel' --userid 'itsme' --message 'Hello \<at\>"+Mail+"\<at\> : The ticket \+Ticket_Num+" is not closed for more than 72 hours : Open since "+Open_DtTime+" IST. Please close asap.' "
I have also tried putting the variables within {} and have tried various quote combinations. Nothing works so far. I am using python 3.10
https://jsfiddle.net/p4d57e8x/3/
const getArcPath = (start, end, innerRadius, outerRadius) => {
const startAngle = start * Math.PI * 2;
const endAngle = end * Math.PI * 2;
const x1 = innerRadius * Math.sin(startAngle);
const y1 = innerRadius * -Math.cos(startAngle);
const x2 = outerRadius * Math.sin(startAngle);
const y2 = outerRadius * -Math.cos(startAngle);
const x3 = outerRadius * Math.sin(endAngle);
const y3 = outerRadius * -Math.cos(endAngle);
const x4 = innerRadius * Math.sin(endAngle);
const y4 = innerRadius * -Math.cos(endAngle);
const bigArc = end - start >= 0.5;
const outerFlags = bigArc ? '1 1 1' : '0 0 1';
const innerFlags = bigArc ? '1 1 0' : '1 0 0';
return `M ${x1},${y1} L ${x2},${y2} A ${outerRadius} ${outerRadius} ${outerFlags} ${x3},${y3}
L ${x4},${y4} A ${innerRadius} ${innerRadius} ${innerFlags} ${x1},${y1} Z`;
};
This is the code for the path itself, and all of the paths they create a circle.
I am not sure how to get the rotation angle for each path in the circle (say there is red, green, blue, purple), I've tried many things but this seems more of a math problem more than anything else.
I tried a bunch of random code I found, this for example
const getRotationAngle = (start, end) => {
const startAngle = start * 360;
const endAngle = end * 360;
return (startAngle + endAngle) / 2;
};
``` but it doesn't work of course because it's just gibberish for me and I have no idea what I even need to calculate to get the angle.
As the title says, I'm trying to edit a template to display a PDF. The original template would display an image in a light box when the link was clicked, but when I change the href to a PDF file it won't load (which I expected, I just don't know how to fix it because I'm relatively new to coding). Here's the code for it:
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<a href="script/Passing Time.pdf" data-lightbox="image-1"><div class="hover-effect">
<div class="hover-content">
<h2>Passing Time</h2>
<p>At the end of Myla's life, she meets the one person to change it forever.</p>
</div>
</div></a>
<div class="image">
<img src="img/first_item.jpg">
</div>
</div>
</div>
</div>
I know I could just delete the "data-lightbox" section to display the pdf, but I'd like to see if anyone knows how I could make it more visually appealing. Any help is greatly appreciated!
In my text area im using onKeydown event to listen to characters typed by user. I need to prevent Alt gr + key combination values (ฤ, rฬฅ, แนญ,...) to avoid accented keys in my text area.
if (event.code === 'AltRight') {
console.log('Prevent Accent letters');
event.preventDefault();
}
(or)
if (event.code === 17 || event.code === 18) {
console.log('Prevent Accent letters');
event.preventDefault();
}
Nothing worked. They are entering these if condition but still the accent text is getting printed in my textarea. How can this be prevented
Want to create a website like Facebook with all its features
I tried html and couldnโt finish but i just want you to devellopnot for me where i can log in and log out and sign up and sign out,comment,like share and post on my profile
I using CKEditor, but recently I have a problem after receiving a new update. When using any HTML tags, CKEditor changes the tags like the following example:
<b> becomes [b]
sample:
hi Ali => hi [b]Ali[/b]
This is what I want it to be: hi <b>Ali</b>
I could not find any documentation about this, Can you help me?
I am working on adding accessibility to a website. Now I know that aria-labels, aria-labelledby, etc are meant to give accessible names to interactive type of elements as clearly mentioned in this blog. Hence, they may not work consistently with elements of type p, span, etc.
I want to do two things:
Currently the screen reader reads it as: "between zero five million"
I want it to be read as: "between zero and five million"
What I tried is the following:
.visually-hidden {
position: 'absolute';
height: '1px';
width: '1px';
padding: '0';
margin: '-1px';
overflow: 'hidden';
border: '0';
}0<span aria-hidden="true">-</span><span class="visually-hidden">and</span>5mNow the screen reader reads it as: "between zero and five m".
Hence, this approach is clearly not working.
Table header is given as CAGR1 and then at the bottom after the table there is 1CAGR - definition of CAGR.
For accessibility I want that initially when table headers are read then table header along with its definition are read out and then as values are read out only the abbreviation is read.
Also, currently the screen reader reads CAGR as a word but instead I want it to be read as "C A G R".
Since above all are text elements using aria-labels will not work and using visually hidden text may cause other problems as shown above. What approach can I use to achieve these things to make the website more accessible?
