Below is a jsfiddle link that has got the code in it that needs modifying.
http://jsfiddle.net/N44Ah/
This is HTML code within the above jsfiddle link
<label for="cb">
<div id="clickablediv">
<input name="cb" id="cb" type="checkbox"/>
</div>
</label>
<label for="cb">
<div id="clickablediv">
<input name="cb" id="cb" type="checkbox"/>
</div>
</label>
This is the javascript within the above jsfiddle link
$('#clickablediv').click(function () {
if ($(this).find('#cb').is(':checked')) {
$(this).animate({
opacity: 0.5
}, 250);
} else {
$(this).animate({
opacity: 1
}, 250);
}
});
and this is the basic CSS
#clickablediv {
width: 100px;
height: 100px;
background: blue;
}
Basically I can't changed the div id, class or details as they are created from php after a database query what pulls an array and then fills each div with the required info for that div and then populates the next div until all information has been displayed in different divs.
I understand it is the javascript that needs to be modified here but I am just unsure on how to do it as I am not any good at javascript.
I need the effect to be so what ever div you click is the div that is effected because at the minute what ever div you click it only effects the top div.
once again I can't changed the div's id, class or details.
This maybe un-relevant but I did have the same sort of issue when I was creating buttons and hidden divs in the same way except when clicking the buttons it needed to display the correct div tied to it however in the above question I need to do a dim effect as what you can see in the js above.
below is the jsfiddle link to the code about the buttons and hidden divs using a (elim) function in javascript I am not sure if the same sort of elim method needs to be adopted for my new problem I am having.
http://jsfiddle.net/gpDFc/
I have tried to mess around with the both javascripts but as I am no good I didn't managed to make a working script.
Thank you for your time in reading this and I look forward to yuor help.
ID of an element must be unique.
The ID selector will return the first element with the said id, so your code will attach the click handler only to the first div with id clickablediv not to the second
Since you have repeated at least twice that the id cannot be changed, use an attribute selector to select the div's with the said id.
$('div[id="clickablediv"]').click(function () {
if ($(this).find('[name="cb"]').is(':checked')) {
$(this).animate({
opacity: 0.5
}, 250);
} else {
$(this).animate({
opacity: 1
}, 250);
}
});
Distinct Values required in DOM
See here, modified fiddle:
http://jsfiddle.net/N44Ah/1/
Use class instead of id like below. For entire page you can use single id. If you have multiple id with same name, first id only will be affected.
<label for="cb">
<div class="clickablediv">
<input name="cb" id="cb" type="checkbox"/>
</div>
</label>
<label for="cb">
<div class="clickablediv">
<input name="cb" id="cb" type="checkbox"/>
</div>
</label>
$('.clickablediv').click(function () {
if ($(this).find('#cb').is(':checked')) {
$(this).animate({
opacity: 0.5
}, 250);
} else {
$(this).animate({
opacity: 1
}, 250);
}
});
.clickablediv {
width: 100px;
height: 100px;
background: blue;
}
Related
I'm clicking on a checkbox to add some animation to a div, but when I want this animation to disappear I can only make it happen through $(document) click. Checkbox must add and then remove the class.
JS
$('#inOrder').click(function(e) {
$('.border').addClass('colorsborder');
e.stopPropagation();
$(document).click(function(e) {
$('.border').removeClass('colorsborder');
});
});
$('#inOrder').click(function(e) {
e.stopPropagation();
});
HTML
<input id="inOrder" type="checkbox" />
You may call toggleClass() method on the jQuery object (element) that you want to add or remove the class from. The method toggleClass will either:
add the desired class when the element doesn't have it.
or remove that class when the element has it already.
Here's a basic, live demo to illustrate the functionality:
const checkbox = $('#inOrder'),
relatedDiv = $('#related');
checkbox.on('change', () => relatedDiv.toggleClass('custom'))
/** just for demo purpose */
#related {
margin: 15px 0;
padding: 10px;
border: 1px solid #ccc;
}
#related.custom {
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inOrder" type="checkbox" />
<div id="related">My appearnace will change on checkbox click</div>
The above demo is pnly meant as a showcase of a possible solution that could be applied to your current problem and it WON'T do the exact thing you want to have unless you apply the required changes you need to suit your actual code/structuring.
Then you want to toggle the class not add it when you click on checkbox
$('#inOrder').click(function(e) {
$('.border').toggleClass('colorsborder');
....
I have a question. I have a simple chekcbox that in html looks like
<label class="container__control--checkbox">
<input type="checkbox" checked="checked" id="presentation_full_screen" class="container__control" onchange="_handleMainLayout()" />
<span>CLICK</span>
</label>
So when I click checkbox I fire up this type script:
_handleMainLayout() {
const layoutContainer = <HTMLInputElement>document.getElementById("main_layout");
const hideCommunicationCheckbox <HTMLInputElement>document.getElementById("presentation_full_screen");
if (hideCommunicationCheckbox.checked) {
layoutContainer.removeAttribute("style");
} else {
layoutContainer.style.gridTemplateColumns = "1fr";
}
}
So what id does it sets template on main layout (id: main_layout) from 1 column to 2 columns depends on this if checkbox is selected, and well it works.
But I was wondering, there are those selectors in css :checked and not(). So thing is, element with id main layout is way up DOM tree, and question can I somehow get that element using those selectors or any any other css/scss trick and toggle this grid-template-colum?
something like
.container__control :checked {
//get div with ID and set its grid-template-colum
}
.container__control :not(:checked) {
//get div with ID and set its grid-template-colum
}
Or am I left with only JS solution?
You can absolutely use CSS only to do that. The "trick" is where to insert the <input> element. Thanks to label attribute for you don't need to have <input> and <label> near one from the other. However <input> must be placed before #main_layout and on same DOM "branch" in order to use General (~) or adjacent (+) sibling combinator.
#main_layout {
height: 20px;
background-color: red;
}
:checked + #main_layout {
background-color: blue;
}
<label for="checkox">Click me</label>
<input type="checkbox" name="" id="checkox" hidden>
<div id="main_layout"></div>
no need for :not() in this case
Hello I have a very basic script that moves the child <img> inside its <label> parent when you hover on and off the <label> element.
The issue is if you hover over one label. ALL images under ALL labels move.. This i do not want. I tried to solve this by adding $(this).closest to my function. But when $(this).closest code is added it breaks. If you remove (this).closest from my code it works fine but its affecting all of them instead of the single one being hovered over.
HTML
<div class="checkbox-cover images-true">
<div>
<label> <img></img> </label>
<label> <img></img> </label>
<label> <img></img> </label>
<label> <img></img> </label>
</div>
</div>
jQuery
$(".checkbox-cover.images-true>div>label").hover(
function () {
$(this).closest('img').stop().animate({top: '-200px'});
}, function (){
$(this).closest('img').stop().animate({top: '0'});
});
closest searches the DOM tree going up (ancestors), not down (descendants), what you really want is find instead.
$(".checkbox-cover.images-true > div > label").hover(
function () {
$(this).find('> img').stop().animate({top: '-200px'});
}, function () {
$(this).find('> img').stop().animate({top: '0'})
});
});
Lastly, as the comments suggest, you can shorten $(this).find('> img') with $('img', this), setting the "context" parameter.
Since img is a child of label here and closest is used to get the closest parent that matches the selector. Try this instead:
$(".checkbox-cover.images-true>div>label").hover(
function() {
$('img', this).stop().animate({top: '-200px'});
},
function() {
$('img', this).stop().animate({top: '0'});
}
);
Also, you can achieve this with CSS only like:
.images-true label img {
position: relative;
transition: all 1s ease 0s;
top: 0;
}
.images-true label:hover img {
top: -200px;
}
<div class="checkbox-cover images-true">
<div>
<label> <img src="http://via.placeholder.com/100x100"></img> </label>
<label> <img src="http://via.placeholder.com/100x100"></img> </label>
</div>
</div>
Just wanted to let you know about it and keep all your options open.
I have a parent <div>, #amwcontentwrapper, which has a series of divs within it with their own classes and ids.
I want to use jQuery to select these child divs, and IF they have the class .amwhidden, do nothing, but if not, remove the .amwshown class and add the .amwhidden class.
This is what I have so far, but it is not working. I think it may be my selecting of the child divs within the parent.
Can anybody see any obvious problems? Thanks for your help.
if ($('#amwcontentwrapper > div').hasClass('amwhidden')){
} else {
$('#amwcontentwrapper > div').fadeIn(600, function(){
$('#amwcontentwrapper > div').removeClass('amwshown');
$('#amwcontentwrapper > div').addClass('amwhidden');
});
}
And here is the basic html that I am using:
<div class="amwshown" id="amwintro">
Intro Section, which should have the 'amwshown' class removed, and the
'amwhidden' class added, when the jQuery runs. Currently, this does not happen.
</div>
UPDATE: Using War10ck's solution in the comments below (i.e. $('#amwcontentwrapper > div.amwshown')) I have managed to get the classes changing as I wished. However, those which have had the .amwshown class removed and .amwhidden class added still show on the page, despite the CSS looking like this:
.amwhidden {
display:none;
}
.amwshown {
display:block;
}
Looking at the Dev Tools, it seems that, when the jQuery is run (on a click event) the classes are changing, but any classes which are having the .amwshown class added (thus displaying them on the page) are also having the a <style> tag added to them which makes them display:block;
When I then press another button, which should hide the aformentioned <div> to make way for another one, the class is being changed to .amwhidden, but that <style> tag is not being deleted, so even though it has the .amwhidden class, it is still on the page.
I've created a JSFiddle here, if anybody still wants to help!
`
$(document).ready(function() {
$('#buybutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwbuy').hasClass('amwshown')) {} else {
$('#amwbuy').fadeIn(600, function() {
$('#amwbuy').removeClass('amwhidden');
$('#amwbuy').addClass('amwshown');
});
}
});
$('#phdbutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwphd').hasClass('amwshown')) {} else {
$('#amwphd').fadeIn(600, function() {
$('#amwphd').removeClass('amwhidden');
$('#amwphd').addClass('amwshown');
});
}
});
});
#sidebar {
position: absolute;
left: 1%;
top: 1%;
font-size: 5em;
color: #000000;
width: 10%;
display: block;
background-color: red;
}
#amwcontentwrapper {
position: absolute;
left: 20%;
top: 5%;
}
.amwshown {
display: block;
}
.amwhidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="amwsidebar">
<span class="sidebarbutton" id="phdbutton">PhD Button</span>
<br />
<br />
<span class="sidebarbutton" id="buybutton">Buy Button</span>
</div>
<div id="amwcontentwrapper">
<div class="amwshown" id="amwintro">
<p>An intro section to welcome the visitor. Disappears when one of the other sections is clicked.</p>
<br />
<br />
</div>
<div class="amwhidden" id="amwbuy">
Buy Section
</div>
<div class="amwhidden" id="amwphd">
PhD Section
</div>
</div>
`
You can use not to remove the elements you do not want, like this:
$('#amwcontentwrapper > div').not('.amwhidden')
.removeClass('amwshown')
.addClass('amwhidden');
And work with that.
Try this
$(document).ready(function() {
$("#amwcontentwrapper").children().each(function(elem, x) {
if ($(x).attr("class") == "amwhidden") {
alert($(x).attr("class"));
$(x).removeClass("amwhidden").addClass("amwshow");
alert($(x).attr("class"));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="amwcontentwrapper">
<div class="amwhidden"></div>
<div></div>
<div></div>
</div>
You can try each as follow,
$("#amwcontentwrapper div").each(function(){
if($(this).hasClass('amwhidden'))
//DO something
else
//DO something
});
Thank you for all help, it has prompted some brainstorming which has solved this issue.
Instead of adding the .amwhidden class and removing the .amwhidden class using jQuery, I have just created a .amwsection class, which all the sections belong to which has an initial display value of none. So far, so good; all of the sections are not there when you load up the page.
Then I use the .css jQuery function to change the display:none to display:block when the corresponding button is clicked, and changing all other .amwsections to display:none. This works just fine, but the effect is quite abrupt; there is no fading in, as you would get if you used the .animate function. .animate, however, does not work with the display value.
.fadeOut and .fadeIn to the rescue! By wrapping the .css change in these, I can create a fading in/out effect and can still use the display value.
Here is one example of this code.
The #buybutton is the button to be pressed.
#amwintro is just something which appears when the page loads - it will now be set to display:none if this is the first button pressed.
The .amwsection are all of the hidden sections. This portion of the code just resets all of them. This and the #amwintro section happen very quickly (1/100th of a second) to keep response time good.
The #amwbuy is the specific section that I want to reveal. As you can see, this fades in over a longer period.
Currently only tested in Chrome, but I think I've got it!
$(document).ready(function () {
$('#buybutton').click(function() {
$('#amwintro').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('.amwsection').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('#amwbuy').fadeIn(600, function() {
$(this).css({
display:'block',
});
});
});
});
I made a div which has a background image of a face, I have designed div which contains a paragraph, 2 buttons and an input box.
I know this question has been asked quite often however my situation is different, I'd like for my div with the background image of a face to be clickable so that the div containing everything else slides out from the left.
What is the best method to do this?
HTML
<div id="image"></div>
<div id="container">
<p>I like nutella and croissants</p>
<input id="message" placeholder="type...." required="required" autofocus>
<button type="button" id="send">Send</button>
<button type="button" id="close">Close</button>
</div>
CSS
div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }
JQUERY
$(document).ready(function(){
$( "#image" ).click(function() {
jQuery(this).find("#container").toggle();
});
});
Using the article link posted by Raimov (which I actually came across in a Google search before realize he posted it as well ;), we can use jQuery to animate the width when the toggling element is clicked. Remember that a background does not add size to an element, so the toggle with the background image must have a height attribute set. Also, if you have long lines of text in the form, you'll have to wrap them yourself or use another method from the article.
http://jsfiddle.net/iansan5653/wp23wrem/ is a demo, and here is the code:
$(document).ready(function () {
$("#image").click(function () {
$("#container").animate({width: 'toggle'});
});
});
and this CSS is necessary:
div#image {
background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
height: 36px;
/*height needed to actually show the div (default width is 100%)*/
}
#container {
white-space: nowrap;
overflow: hidden;
}
I created a jsFiddle for you, where after clicking on img, the form hides to the left.
$("#image").click(function() {
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() : 0
});
The resource was taken from:
Tutorial how to slide elements in different directions.