I have a situation where I need to apply Styles on a POPUP based on if "Opener window" of that POP has a style class defined on it.
<html>
<body class="myClass">
<input type="button" onClick="Open('xyz.html')"/>
</body>
</html>
Now on xyz.html I want to have a CSS selector which can toggle some style based on if parent.html has class="myClass".
Is it possible without Jquery?
If not: what alternatives I have for this including Jquery and Javascript?
Please note: parent.html is opening xyz.html they are both separate windows.
You don't need to use jQuery to check it. You can make use of simple CSS for it. Check the code below. Here, if container has the class my-class. The property of background-color will be applied to the popup. Otherwise, it won't. Check the code and try using the same with and without the my-class in the container.
$('button').on('click', function() {
$('.popup').toggleClass('active')
})
.popup {
padding: 10px;
border: 1px solid #ddd;
opacity: 0;
transition: all 0.8s ease;
}
.popup.active {
opacity: 1;
}
.container.my-class .popup {
background-color: red;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container my-class">
<button>Click</button>
<div class="popup"> HAI </div>
</div>
Related
I want to be able to add hover to the classList of an element to force trigger hovering styles.
In JS, how can I detect all :hover styles and add a hover class to have those same styles?
For example, if the class is:
a:hover {
}
I want to add:
a:hover, a.hover {
}
I want to write a JS script that makes the conversion I mentioned above, adding the a.hover class styles for ALL :hover. How can I do this?
NOTE: I don't have access to the CSS. It's loaded in externally so I can't just add to it. This is why I want to make a script that runs on start to do this.
As said in comment you could use a sass/scss mixins
SCSS
#mixin addHover {
&.hover {
background-color: red;
}
&:hover {
background-color: red;
}
}
div {
width: 100px;
height: 100px;
#include addHover;
}
HTML
<div class="hover"></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
I'm working with WordPress site where I want to show elements on button click.
I found this script, but it works the opposite how I want - it hides, instead of shows content. How can I invert it?
I want it to be hidden when pages loads and appear when clicked on button
Preview: https://www.w3schools.com/code/tryit.asp?filename=GGXM3P219FCN
$(document).ready(function () {
var togBtn = $('.tog');
var allergerns = $('.allergerns');
togBtn.one('click', hideAllergerns);
function hideAllergerns() {
allergerns.fadeOut();
togBtn.one('click', showAllergerns);
}
function showAllergerns() {
allergerns.fadeIn();
togBtn.one('click', hideAllergerns);
}
});
.allergerns {
width: 100px;
height: 100px;
background-color: #4aa3df
}
.tog {
width: 60px;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<button class="tog">toggle</button>
<div class="allergerns"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Set the initial CSS styles.
Use JavaScript to toggle a specific class that shows your elements:
References should be stored inside a data-* Attribute, not by copy pasting code in case you need multiple toggling buttons or pane elements
Animations should be done using CSS, not jQuery. Preferably use GPU accelerable CSS properties like opacity, transform etc.
Finally, use jQuery's .toggleClass() to trigger a desired style-state
jQuery(function ($) { // DOM ready and $ alias in scope
$("[data-toggle]").on("click", function() {
$(this.dataset.toggle).toggleClass("is-active");
});
});
.pane {
overflow: auto;
background-color: #4aa3df;
width: 100px;
height: 100px;
transition: 0.3s;
max-height: 0;
opacity: 0;
}
.pane.is-active {
max-height: initial;
opacity: 1;
}
<button class="tog" data-toggle="#pane-1">Toggle 1</button>
<div id="pane-1" class="pane">Pane 1</div>
<button class="tog" data-toggle="#pane-2">Toggle 2</button>
<div id="pane-2" class="pane">Pane 2</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I am trying to replicate the css transition here.
Similar to the example, I have created:
<span onclick="document.getElementById('box').classList.toggle('grow');">Go</span>
<div class="box"></div>
.box {
width: 150px;
height: 150px;
background-color: red;
border: 1px solid #000;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.grow {
width: 350px;
}
https://jsfiddle.net/swrhho41/15/
However, this doesnt seem to work. The grow class isn't being added to the div.
Is there more JS that is needed?
box is not an id. It's a class.
Therefore, your document.getElementById selects nothing. Simply change it to,
document.getElementsByClassName('box')[0].classList.toggle('grow');
Here's the fiddle
The problem is your onclick code is looking for an id : getElementById
Yet your div has a class not an id, change it to
<div id="box"></div>
<span onclick="document.getElementById('box').classList.toggle('grow');">Go</span>
make sure to also update your css if you update it to id:
#box {
width: 150px;
/* etc */
Also if you want it to grow, make the width on the .grow !important.
Fiddle: https://jsfiddle.net/swrhho41/18/
Since 'box' is a className, you need to either set the element's ID to be "box":
<div id="box"></div>
Or update your selector to be:
document.querySelector('.box').classList.toggle('grow')
<div id="box" class="box">
</div>
you are retrieving the item by Id, so Id should be box
I have a div which is a container of various things. Sometimes it contains some simply tables, and other layout stuff. But sometimes it contains buttons and forms.
This container div can show another div modally. Which I achieved by simply making its position: absolute, and have its top/bottom/left/right 0.
It looks nice but when I press the tab button focus can go to the elements on the div behind. How can I prevent this?
I know I can disable focus on one element by setting tabIndex=-1 so I could iterate however when the modal disappears I would need to restore all this elements. Which means extra work. I wonder if there is a general way of doing this with jQuery or maybe jqueryui or vanilla js?
EDIT:
Working example in jsbin:
https://jsbin.com/veciju/1/edit?html,css,js,output
I am not sure what is the exact issue without the fiddle, and did not check the code. But here is my solution (pure javascript) hope it helps
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<p id="filler">
Hello World.
</p>
<form id="myForm">
<input type="text" />
<input type="submit" value="submit"/>
</form><br>
<button id="openModal" onclick="openModal();"> Open Modal</button>
<div id="modal" class="hidden">
<p id="modelP"> This is a modal DIV. You cannot escape me</p>
<button id="closeModal" onclick="closeModal();">Close Me</button>
</div>
</div>
</body>
<style>
#container{
margin: 50px auto;
padding: 100px;
color: white;
width: 50%;
height:400px;
background-color: black;
text-align: center;
}
.hidden{
display: none;
}
#modal{
background-color: green;
border: 5px solid red;
z-index: 100;
width:80%;
height: 80%;
left: auto;
}
</style>
<script>
function openModal(){
var modalElement = document.getElementById('modal');
var others = document.querySelectorAll('* :not(#closeModal) ');
modalElement.removeAttribute('class');
for (i=0; i<others.length;i++){
console.log(others[i]);
others[i].setAttribute('disabled','disabled');
}
}
function closeModal(){
var modalElement = document.getElementById('modal');
var others = document.querySelectorAll('* :not(#closeModal) ');
modalElement.className='hidden';
for (i=0; i<others.length;i++){
console.log(others[i]);
others[i].removeAttribute('disabled');
}
}
</script>
Here is the css code :
.big-square {
position:relative;
height:768px;
width:768px;
border:1px solid black;
background-color:#007da9;
text-align:center;
display:table-cell;
-webkit-transition:all 0.3s linear;
}
and here the html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script>
function showmenu() {
$(document).ready(function() {
$("#big-square").removeClass("big-square");
});
}
</script>
</head>
<body>
<div id="big-square" onclick="showmenu();" class="big-square">1</div>
<div id="big-square" onclick="showmenu();" class="big-square">2</div>
The problem is when I click on anyone of square, just the first dissapear and I want to make it dissapear separately. For example, if I click on the 2nd square, just the second squuare dissapear.
id must be unique in the whole DOM. (and the relevant functions return only the first one)
What you want is
$(document).ready(function() {
$(".big-square").on('click', function() {
$(this).removeClass("big-square");
});
});
.big-square {
position: relative;
height: 768px;
width: 768px;
border: 1px solid black;
background-color: #007da9;
text-align: center;
display: table-cell;
-webkit-transition: all 0.3s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-square">1</div>
<div class="big-square">2</div>
It is illegal HTML to have id's not be unique. Use a class instead if you plan to have 2 or more elements of similar 'stuff'. Then, you shouldn't nest the ready statement in a function. Next, you shouldn't use onclick, instead opting to listen to the event click. Additionally, the css .class does not match an id of your html. Finally to target 1 item only, I would use the jQuery object $(this).
So, all that said, I would re-write your code as:
<script>
$(document).ready(function() {
$(".big-square").click(function() {
$(this).removeClass("big-square");
});
});
</script>
</head>
<body>
<div class="big-square" id="square1">1</div>
<div class="big-square" id="square2">2</div>
That's newbie coding. Let's try to fix it:
1 - Different id's for each element (as user Vic pointed out already)
2 - $(document).ready doesn't need to be nested
3 - onclick="showmenu();" is completely unnecesary and including scripts in the html is bad practice in modern web development
I won't post any code because I see you already have answers with code :)