Ok, I'm usually pretty good with jQuery but this one is doing my head in.
Basically I have a click event that hides a single DIV (a placeholder), then shows two other DIVs (an input section and control buttons section). Then, when I click on one of the control buttons to change the main DIV being shown (by hiding all the divs then showing the one I want), the hide() does not thing.
This is kind of hard to explain, so I have a jsFiddle that shows the problem at: jsFiddle
In the fiddle, what should happen is when you click the "CLICK ME" text, it should set up the DIVs correctly. Then clicking the boxes (1,2 or 3) it should change the text to "Item 1", "Item 2" or "Item 3". As you can see, the "Item 1" DIV is never hidden because this is the DIV that was shown in the initial layout event. If you comment out line #5 in the JavaScript everything works exactly as it should however the initial layout is incorrect (I'd like "Item 1" to be displayed by default).
Obviously this is a massively simplified version of what I'm actually working.
Has anyone come across this and know what the problem is?
Some code:
HTML:
<div id="newinput">
<div class="inputmode">
<div class="placeholder">CLICK ME</div>
<div class="modeitem item1">Item 1</div>
<div class="modeitem item2">Item 2</div>
<div class="modeitem item3">Item 3</div>
</div>
<div class="controls">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
JavaScript:
$('#newinput').click(function () {
var im = $(this).children('.inputmode');
var ph = im.children('.placeholder').html();
im.children('.placeholder').hide();
im.children('div.item1').show();
$(this).children('.controls').show();
});
$('#newinput .controls .item').click(function () {
var item = 'item' + $(this).html();
var im = $('#newinput').children('.inputmode');
im.children('div').hide();
im.children('.modeitem.' + item).show();
});
It is because of event propagation, when the .item is clicked it triggers the #newinput click handle also.
As a solution register the first handler only to the placeholder element
$('#newinput .inputmode .placeholder').click(function () {
var im = $(this).closest('.inputmode');
var ph = im.children('.placeholder').html();
im.children('.placeholder').hide();
im.children('div.item1').show();
im.next('.controls').show();
});
$('#newinput .controls .item').click(function (e) {
var item = 'item' + $(this).html();
var im = $('#newinput').children('.inputmode');
im.children('div').hide();
im.children('.modeitem.' + item).show();
});
Demo: Fiddle
Related
I am working on a school assessment, where my goal is to be able to select an image and show that image on a grid based on which grid cell is clicked.
I have mostly been trying to fix my issue with different variations on the getElementsByClassName tag to change the source of the image shown in the cell. Currently, I have an array of the source of every different Image, and changing it using a function. Storing the images in html would not be an option for me because I would have to store all 23 images 9 times, but I have not managed to get it to work in CSS either. Previously, I had my images inside divs but I thought that it would work better if I attempted to change the background image tag but that didn't work either.
<div id="crafting-table">
<div class="craft-grid 1" onclick="gridclick(1)"></div>
<div class="craft-grid 2" onclick="gridclick(2)"></div>
<div class="craft-grid 3" onclick="gridclick(3)"></div>
<div class="craft-grid 4" onclick="gridclick(4)"></div>
<div class="craft-grid 5" onclick="gridclick(5)"></div>
<div class="craft-grid 6" onclick="gridclick(6)"></div>
<div class="craft-grid 7" onclick="gridclick(7)"></div>
<div class="craft-grid 8" onclick="gridclick(8)"></div>
<div class="craft-grid 9" onclick="gridclick(9)"></div>
</div>
function clickitem(itemnum) {
"use strict";
selected_item = itemnum;
}
function gridclick(gridpos) {
"use strict";
document.getElementsByClassName("grid-img " + gridpos).style.backgroundImage = images[selected_item];
}
My main issue is that my images just won't show up. No error messages in console just nothing.
document.getElementsByClassName only works for a single class.
If you want to you multiple classes try document.querySelectorAll('.craft-grid,.1')
--
But I recommend you to do this instead:
function gridclick(el) {
el.style.backgroundColor = el.style.backgroundColor == "red" ? "" : "red"; //clicked element style
console.log(el.getAttribute('data-something')); // data attribute
console.log([...el.parentElement.children].indexOf(el)); // index of the element relative to the parent
}
.craft-grid{
cursor:pointer;
}
<div id="crafting-table">
<div class="craft-grid" data-something="first" onclick="gridclick(this)">1</div>
<div class="craft-grid" data-something="second" onclick="gridclick(this)">2</div>
</div>
Use the element as reference is enough. If you want the element to have some data use the data attribute.
I almost give up. Can't find any solution on this so I hope you can help me. I have a script that shows/hides divs and it's working like this. If you click one button a div shows and if you press another button it switches to that div. That's working great. But I want to be able to close all divs with the last button clicked.
This is my HTML
<div class="hidden-divs-buttons">
<a class="show-div btn" target="1">Div 1</a>
<a class="show-div btn" target="2">Div 2</a>
</div>
<div class="hidden-divs">
<div id="div1" class="target-div">Content div 1</div>
<div id="div2" class="target-div">Content div 2</div>
</div>
This script works but has no closing functionality
$('.show-div').click(function() {
$('.target-div').hide();
$('#div' + $(this).attr('target')).fadeIn(1000);
});
And this is the script I want to replace the working script with. I have been trying to change it to work with closing function. I might be totally of but hopefully you guide in the right direction. I get an error that tell me "box.hasClass() isn't a function".
$('.show-div').click(function() {
var box = $('#div' + $(this).attr('target'));
$('.target-div').hide();
if(box.hasCLass('close-div')) {
box.removeClass('close-div');
$('.target-div').fadeOut(1000);
} else {
box.fadeIn(1000);
box.addClass('close-div');
}
});
Edit Id's are updated.
This is how the code became. With this code I can click on a button and show a div, click the next one to show another div. If I click the same button again it will close all divs.
$('.show-div').click(function() {
var box = $('#div' + $(this).attr('target'));
if(box.hasClass('close-div')) {
$('.target-div').removeClass('close-div');
$('.target-div').fadeOut(1000);
} else {
$('.target-div').removeClass('close-div');
$('.target-div').hide();
box.fadeIn(1000);
box.addClass('close-div');
}
});
You have typo in if(box.has[CL]ass('close-div')) {
hasClass not hasCLass
hasClass does not have a capital L - it's hasClass not hasCLass not sure if this is just a typo in the question or your real code.
Also both your divs in the hidden-divs section have the same id of div1, when they should presumably be div1 and div2. In any event it would be better to specify the full id of the div as the target instead of building it.
In addition, you are applying hide to all elements of class target-div before fading them out, which rather defeats the idea of a fadeout
<div class="hidden-divs-buttons">
<a class="show-div btn" target="div1">Div 1</a>
<a class="show-div btn" target="div2">Div 2</a>
</div>
<div class="hidden-divs">
<div id="div1" class="target-div">Content div 1</div>
<div id="div2" class="target-div">Content div 2</div>
</div>
$('.show-div').click(function() {
var box = $('#' + $(this).attr('target'));
// this makes them invisible, so fadeOut is pointless
$('.target-div').hide();
if(box.hasClass('close-div')) {
box.removeClass('close-div');
$('.target-div').fadeOut(1000);
} else {
box.fadeIn(1000);
box.addClass('close-div');
}
});
I am trying to implement onClick function for a div which is getting generated depending on some validations while submitting the page. I am trying to implement the same from an external js file.
HTML design is something like :
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
//dynamically generated
<div>
---
----
</div>
</div>
Now, I am trying to implement the onClick function like below :
$('img.popUpClose.popUpCloseQview').each(function (index) {
$(this).on("click", function (e) {
//DO something
});
});
But the issue is, this $('img.popUpClose.popUpCloseQview') element is not there in the code on the first time. After the submit button click valiations are happening and depending on the condition this pop up message is coming up and this function is not working anytime.
Tried some other options too. But none of these are working.
Please advise.
Thanks,
Aniket
If you are dynamically generating the div in jquery, you can add the click event then. For example:
var div = $("<div>");
div.click(function(){//dostuff});
$("#QViewInfo").append(div);
You could attach the click event to all the div's of element #QViewInfo using event delegation on() like :
$('#QViewInfo').on('click', 'div', function(){
//DO something
})
NOTE : No need for using each() loop.
Hope this helps.
$('#QViewInfo').append('<div>Div 3</div>');
$('#QViewInfo').on('click', 'div', function(){
console.log($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
<div>Div 1</div>
<div>Div 2</div>
</div>
Working snippet with comment code :
var img = '<img src="/Images/...." onclick="alert(\'QView.close();\')" alt="Close Quick View" class="popUpClose popUpCloseQview">';
$('.oosInfo').append(img);
$('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){
alert("A");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo">
<div class="oosInfo">
<div class="alertImgDiv">
<span class="oosAlertImg"></span>
</div>
</div>
</div>
I'm trying to set up a faqs page on the blog and struggling with getting the code right. Here's what I want to do > http://jsfiddle.net/qwL33/
Actually everything is alright but when clicking over the first part (let's suppose this is question 1), its opening up both parts (means both question). HELP.
Here's the code:
$('#slidetoggle')
.on('click', function(e) {
jQuery('.slider').toggle('slideDown');
});
<div id="slidetoggle">HELLO 1</div>
<div class="slider" style="display: none">Hello there!</div>
<div id="slidetoggle">HELLO 2</div>
<div class="slider" style="display: none">Hello there!</div>
by far this is not the best option, but your problem is that you are copying the same ID (slidetoggle), i have added the same function again and replace the id adding a 2, you can see it in this fiddle https://jsfiddle.net/sw5ohfqv/
the best way would be to create a function that closes all the one visibles, and then opens the one clicked.
$('#slidetoggle2')
.on('click', function(e){
var $this = $(this),
$slider = $('.slider'),
isOpened = $slider.is(':visible');
if (isOpened)
{
$slider.slideUp();
$this.text('show fields');
}
else
{
$slider.slideDown();
$this.text('hide fields');
}
});
I wanna like that some plugin just one thing must be different there is have 2 links for 2 div i wanna show there example 10 div but with only one button like "Load More" how i can do this ?
html
Click1
Click2
<div id="outer">
<div id="inner">Initial content</div>
</div>
<div style="display:none" id="hidden1">After click event showing hidden 1</div>
<div style="display:none" id="hidden2">After click event showing hidden 2</div>
Js
$(document).ready(function() {
$('.link').click(function()
{
var id = $(this).attr('href');
$('#inner').fadeOut('slow', function() {
$('#inner').html($(id).html());
$('#inner').fadeIn('slow');
})
})
})
CSS
#hideMsg{
text-align:center;
padding-top:10px;
}
http://jsfiddle.net/G5qGs/2/
You can do it something like this.
Create a load more button
Load More
Use javascript like below
var count = 1;
$('#loadmore').click(function() {
$('#inner').fadeOut('slow', function() {
$('#inner').html($("#hidden" + count).html());
$('#inner').fadeIn('slow');
count++;
})
});
Working example
http://jsfiddle.net/G5qGs/25/
P.S : You might want to display "No more content" at the end. that can be achieved using a simple if else condition