First off, there's are many questions similar to mine but I haven't found an answer I've been able to use yet. I have a page that shows a login form when you enter. I also have a register form that I want hidden. With a click I want the login form replaced with the register form.
I've tried this code that I found and with a little help this could work, it has a nice smooth transition but it shows both elements from the start.
$(function() {
$('a').click(function() {
div = $(this).attr('href'); //grab #one, #two which correspond to the div id we're targeting
paragraph = $(div); //store each div in a variable for later use
$('#two').hide();
$('div').hide('grey-bg'); //remove any greyed backgrounds
$(paragraph).show('grey-bg'); //add grey background to clicked element
});
});
a {
text-decoration: none;
}
#one {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
#two {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
.grey-bg {
background-color: #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First Link<br />
Second Link
<div id="one">
This is the first paragraph.
</div>
<div id="two">
This is the second paragraph.
</div>
You can see it working here: https://codepen.io/raazxplorer/pen/rVKzNp
All I have done with this is changed removeClass and toggleClass to hide/show.
add display:none; in #two
#two {
margin: 10px;
padding: 20px;
border: 1px solid #000;
display:none;
}
$(function() {
$('a').click(function() {
div = $(this).attr('href'); //grab #one, #two which correspond to the div id we're targeting
paragraph = $(div); //store each div in a variable for later use
$('#two').hide();
$('div').hide('grey-bg'); //remove any greyed backgrounds
$(paragraph).show('grey-bg'); //add grey background to clicked element
});
});
a {
text-decoration: none;
}
#one {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
#two {
margin: 10px;
padding: 20px;
border: 1px solid #000;
display:none;
}
.grey-bg {
background-color: #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First Link<br />
Second Link
<div id="one">
This is the first paragraph.
</div>
<div id="two">
This is the second paragraph.
</div>
Just Hide one of the div on page load.
What you need is:
$(document).ready(function(){
$("#two").hide();
});
Read more about (document).ready()
I made a JSFiddle, i did not put the (document).ready() part in it because its not necessary in JSFiddle.
But you can add it above $("#two").hide(); if you wish. It will also work.
Related
in html, sometimes I have elements that I display only when another one gain focus : you click on a button, to make another one appear.
If then you click on this newly displayed element, it disappears immediately because the focus gets away from the first one.
EDIT : And this is what I want. That could be a drop down menu for example, and I want the list to appears when clicking the title, and I want it to disappear when clicking on an element in the list.
but I also want to capture the click event before the element go away, and I can't do that ! example :
function make_action(element) {
console.log(element);
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
#buttons:focus p {
display: block;
}
#buttons p {
border: 1px solid blue;
display: none;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
I can workaround with the use of opacity and visibility with transition :
opacity to have the ux of the instantaneous hide of the element but it's still present so you can click on it
visibility is being delayed (sort of) with the transition, so for a moment you still have the element because it's still 'visible', but for human eyes it's not visible anymore
like that :
function make_action(element) {
console.log(element);
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
#buttons:focus p {
/*
display: block;
*/
visibility: visible;
opacity: 1;
}
#buttons p {
border: 1px solid blue;
/*
display: none;
*/
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
but, I'm not sure it's a good practice because the element is actually still on the page, so it can impact accessibility and maybe other things.
do you know a way to capture the click on the element, before it disappears ?
what I don't understand, is the following : the buttons disappears because the div lose it's focus. But, it loses it's focus BECAUSE a click occurred on one button, so why isn't this click on the button detected ? or how is it detectable ?
You can replace you :focus with :focus-within which was created specially for this purpose.
And to do so that when clicked the elements loses focus, you can use the blur method to do so :
function make_action(element) {
console.log(element);
element.blur()
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
/* there is the change */
#buttons:focus-within p {
display: block;
}
#buttons p {
border: 1px solid blue;
display: none;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
I want to fire a link if the div around gets clicked.
This is the general logic:
$("div").click(function() {
$("div a").click();
});
div {
background-color: yellow;
padding: 20px;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
Unfortunately, it does not work. I think I would need the different href as variable or something like that. For now, probably all links would be fired at the same time, and not only the belonging one.
How is it possible to do that?
Would be thankful for help! <3
If your code would work, you would end up clicking every link that is in side of a div. It is not going to just click the link in the div you are in. So first thing you need to do is select the link in the div you clicked.
After that, you need to trigger click on the DOM element, not the jQuery object. When you trigger it on the jQuery object, it only triggers the click event listeners you bound to it.
$("div").click(function() {
$(this).find("a").get(0).click();
});
div {
background-color: yellow;
padding: 20px;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
Or just make the anchor take up the whole div so you do not need JavaScript at all.
div {
background-color: yellow;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
padding: 20px;
display :block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
You can select the <a> of the clicked div by selecting the first <a> children of the this clicked element.
$("div").click(function() {
$(this).children('a')[0].click();
});
div {
background-color: yellow;
padding: 20px;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
Add an event listener to the elements you are clicking, and in the "onclick" callback, select the a element and click it.
Array.from(document.getElementsByTagName("div")).forEach(e=>{
e.addEventListener("click",(el)=>{
el.target.querySelector("a").click()
})
})
I'm working on project, and got stuck with JS.
Please before you read text, see the picture.
Picture
I want to make a slider (And I did), and now when I click on a circle, I want to show content-box only with the same color, and others should be hidden.
e.g. when I click on .imgRed, I want only #red to be displayed, others, #blue and #black to be display: none;.
Thank you.
I tried to create a working snippet according to the image, where I used:
A class for the circles, another class for the bars,
The circles got a data-color attribute that will target the bar to be displayed on click.
Here it is:
// When clicking a circle, use the data-colo to display the correct bar
$('.circle').click(function() {
$('.bar').hide();
var color = $(this).data('color');
$('#' + color).show();
});
// Trigger the click event on load:
$('.imgRed').trigger('click');
.circle {
display: inline-block;
margin: 8px 16px;
border: 30px solid;
border-radius: 50%;
height: 0;
width: 0;
}
.bar {
display: none;
margin: 8px 16px;
height: 40px;
width: 250px;
}
.imgRed {
border-color: red;
background-color: red;
}
.imgBlack {
border-color: black;
background-color: black;
}
.imgBlue {
border-color: blue;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle imgRed" data-color="red"></div>
<div class="circle imgBlack" data-color="black"></div>
<div class="circle imgBlue" data-color="blue"></div>
<br><br>
<div class="bar imgRed" id="red"></div>
<div class="bar imgBlack" id="black"></div>
<div class="bar imgBlue" id="blue"></div>
Hope it helps.
You probably know what you should do but you are not confident about it. You should hide others but the one that you want to stay present.
For example for red you should do:
$('.imgRed').click(function() {
$('#red').show();
$('#black').hide();
$('#blue').hide();
}
and repeat for all of the others.
$('.imgRed').click(function(){
$('#red').show();
$('#blue,#black').hide();
});
now when you click on all elements with class .imgRed only those with ID red will be visible.
the same you have to do with your other classes;
I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});
Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}
To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>
Fairly new to programming in general, so this might not be pretty. My problem is when I click the button in the html (Fiddle)
$(document).ready(function() {
$("button").click(function() {
$(".groupcontainer").clone().appendTo(".groupcontainer");
});
});
it will duplicate the first time perfectly. Then, as I keep clicking it, the div will duplicate exponentially and the format gets messy. Also, when it does add to the webpage, the parent div won't expand vertically to allow for the duplicates.
Need one duplicate each time the button is pressed (append to itself, if possible???)
When it's duplicated multiple times, need the parent div to expand with it.
I'm assuming #1 is because I'm using .groupcontainer to clone and appending it to itself - is that an issue? Can someone explain how I would clone .groupcontainer and have it append directly below itself? I've looked around but not seeing the same issue I'm having.
As for #2, does appending this way not allow the parent div to expand?
Am I so far off you want to laugh??
I suggest using a combination of .closest() and .parent() like so (also note my use of the flags for .clone()):
$(document).ready(function() {
$("button").click(function() {
var target = $(this).closest(".groupcontainer");
target.clone(true, true).appendTo(target.parent());
// alternatively you can also use .insertAfter() to
// place the clone after the cloned element rather
// than at the end of all cloned elements
// https://api.jquery.com/insertAfter/
/* target.clone(true, true).insertAfter(target); */
});
});
.groupcontainer {
background-color: white;
height: 225px;
float: left;
margin-top: 10px;
}
.group {
font-family: Arial;
margin-right: 20px;
font-size: 12px;
float: left;
background-color: black;
padding: 2px;
color: white;
clear: both;
display: inline-block;
}
.quantity {
font-family: Arial;
font-size: 12px;
float: left;
background-color: black;
padding: 2px;
display: inline-block;
color: white;
}
.system {
float: left;
background-color: black;
padding: 2px;
display: inline-block;
color: white;
font-family: Arial;
font-size: 12px;
}
.total {
float: left;
background-color: black;
padding: 2px;
display: inline-block;
color: white;
font-family: Arial;
font-size: 12px;
}
.specs {
float: left;
width: 648px;
min-height: 50px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
clear: both;
}
.specs table {
width: 650px !important;
}
.specs table tr {
background-color: white !important;
}
.specs table tr td {
font-family: Arial !important;
font-size: 9px !important;
padding: 0px !important;
margin: 0px !important;
color: black !important;
border-bottom: 1px solid black;
}
.specs table tr td span {
color: black !important;
font-family: Arial !important;
font-size: 9px !important;
padding: 0px !important;
margin: 0px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="groupcontainer">
<div class="group">
<label for="exampleInputText">Group: </label>
<input type="text" name="group_1" id="group_1" onchange="updateDue()" />
</div>
<div class="quantity">
<label for="exampleInputText">Quantity: </label>
<input type="text" name="quantity1" id="quantity1" onchange="updateDue()" />
</div>
<div class="total">
<label for="exampleInputText">System Price:</label>
<input type="text" name="systemprice" id="systemprice" onchange="updateDue()" />
</div>
<div class="system">
<label for="exampleInputText">Group Total:
<script type="text/javascript">
// Library ready to use:
accounting.formatMoney(5318008);
</script>
</label>
<input type="text" name="grouptotal" id="grouptotal" onchange="updateDue()" />
</div>
<!--begin the specs here-->
<div class="specs">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
</div>
</div>
Wanted to update this in case someone else sees it. In the end, the best answer:
$('#clone').click(function() {
var target = $('.groupcontainer:last');
target.clone(true, true).insertAfter(target);
});
$(.groupcontainer:last) instead of $(this).closest(".groupcontainer") worked nicely because there was no restriction on where the button is. I neglected to mention in the question that I planned on moving the button.
You are selecting the whole class .groupcontainer and $(".groupcontainer") will actully return you an array with all elements from this class. Why don't you try selecting an element by it's Id. This way you will select only one element and cloning it shouldn't be a probelm.
The problem is that $('.groupcontainer') grabs all elements with a class of groupcontainer. You can grab the most recent one by using .last() then use .parent() to get the parent of the .groupcontainers and append to that.
var $groupContainer = $('.groupcontainer');
$groupContainer.last().clone().appendTo($groupContainer.parent());
You need to define the first instance of .groupcontainer as the page loads. This will find that single group container and make it a variable.
Then when you click, it will append a new (single instance) group container to your container.
$(document).ready(function(){
var clonedGroupContainer = $('.groupcontainer').clone();
$('.groupcontainer').click(function(){
$(this).append(clonedGroupContainer);
});
});
UPDATE
Because we're using a single instance of a clone, the DOM thinks there's only one instance and basically it's just moving the clone around (even though it's going to the same place).
So what we have to do is create the clone of the first element right off the bat, then append that to wherever (I just appended to the body for ease) and then we hide it. It doesn't matter where it is because the element will be hidden (just don't clone it to itself). Then every time we click, it creates a NEW clone of that object and we can manipulate that new clone every time.
$(document).ready(function(){
var clonedGroupContainer = $('.groupcontainer').clone();
$('body').append(clonedGroupContainer);
clonedGroupContainer.addClass('clone').hide();
$(document).on('click', '.groupcontainer', function(){
var clonedGroupContainer2 = $('.clone').clone();
$(this).append(clonedGroupContainer2);
clonedGroupContainer2.removeClass('clone').show();
});
});
the time you select the container inside the click handler is essential.
On the first click, there's only one container and you clone it and append it to itself.
With the second click you have two containers. You select both, and append both to themselves, leading to an exponential behaviour.
Restrict your selector to only one or store your first container in a reference variable.
$(document).ready(function() {
var $container = $('.groupcontainer');
$container.find('button').click(function() {
$container.clone().appendTo($container);
}
});