I'm trying to code a simple show/hide div using jQuery. Basically, when I click on .artist-ken, I want the artists-home div to disappear and .ken-gallery to replace it.
So far, I have this, but it's not doing anything except jumping to the top of the page:
$('.artist-ken').click(function(){
$('.artists-home').hide().show('ken-gallery');
});
Try this:
$('.artist-ken').click(function(e){
e.preventDefault();
$('.artists-home').hide();
$('.ken-gallery').show();
});
Function preventDefault() will stop from jumping in the page. You need separate show for displaying another div. Also . was missing in the ken-gallery.
jQuery.show() doesn't take a selector as a first parameter, try this instead:
$('.artist-ken').click(function(){
$('.artists-home').hide();
$('.ken-gallery').show();
});
I'm assuming that the element that you want to hide has the class ".ken-gallery" and that the element that you want to show has the class: ".artists-home"
$('.artist-ken').click(function(e){
e.preventDefault();
$(".artists-home").hide( 0, function() {
$('.ken-gallery').show();
});
});
Try this
$('.artist-ken').click(function(e){
e.preventDefault();
$('.artists-home').hide();
$('.ken-gallery').show();
});
What you did was not a real parameter for the show() function. Plus even if it were you didn't specify that it was a class. It can only take a function, duration, nothing, or object refer to the jQuery show reference page You can also create a one way listener to show or hide the other.
$(document).click(function(e){
if( e.target.classList.contains('artists-home') ) {
e.preventDefault();
$(e.target).hide();
$('.ken-gallery').show();
}else if( e.target.classList.contains('ken-gallery') ){
e.preventDefault();
$(e.target).hide();
$('.artists-home').show();
}
});
Also what Chonger was saying, is if you wanted a fade which is the duration parameter for any of the show/hide and other animated properties of jQuery, then we would use a callback. So my single function listener would then become.
$(document).click(function(e){
if( e.target.classList.contains('artists-home') ) {
$(e.target).hide(500,function(){
$('.ken-gallery').show();
});
}else if( e.target.classList.contains('ken-gallery') ){
$(e.target).hide(500,function(){
$('.artists-home').show();
});
}
});
EDIT
Reread your question, these must be links for the page to jump to top so I added to the functions.
Dude show() cant have parameter in () Brackets except Speed Or way of animation like show('slow') OR show('1000') is only valid .
Your syntax is wrong
The following is valid syntax.
It means , hide div with class ".artists-home" and show with class ".ken-gallery".
$('.artist-ken').click(function(){
$('.artists-home').hide();
$('.ken-gallery').show();
});
For more info show
Related
I'm trying to use jQuery to hide and show elements on a button click. I have the following code:
$(function(){
$('#link-form').hide()
$('#link-submit').hide()
$('#main-header-submit').on("click", function() {
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
$(this).on("click", function() {
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
})
})
})
This successfully shows and hides the divs when I click the 'main-header-submit' button, but when I click the button (effectively for a third time) to make the elements show again nothing happens. Any help much appreciated.
If you rewrite your code like this, it should work:
$(function(){
$('#main-header-submit').on("click", function() {
$('#link-form').toggle("fast");
})
})
The toggle function hides the elements if they are shown and shows them if they are hidden. Check here http://api.jquery.com/toggle/
The issue is because you're attaching another click handler on each successive click. The first shows the link-form, while the second hides it. This is why you never see any change.
From what I can see of your code, to achieve what you require you simply need to use toggle() and fadeTo() with a ternary instead. Try this:
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeTo("fast", $('#main-yield').css('opacity') == '1' ? 0.2 : 1);
});
Working example
Essentially, using $("selector").on('click', function() { ... }); will run the ... on the click event for that element.
Inside the ... function definition, you're overwriting the .on('click') by another function.
So in other words, the first time you click, you're telling the code to show your element, then rebind the click to hide. So every subsequent click will hide the already hidden element.
What you need to do is to something like this:
$('#main-header-submit').on("click", function() {
if ($(this).is(":visible")){
$('#link-form').hide()
$('#main-yield').fadeTo("fast", 1)
}
else{
$('#link-form').show();
$('#main-yield').fadeTo("fast", 0.2)
}
});
use toggle() and fadeToggle
$('#main-header-submit').on("click", function() {
$('#link-form').toggle();
$('#main-yield').fadeToggle("fast")
})
I'm not really good at JQUERY, and I just tend to observe things, but here is a code I've been working on. So the goal here is that I want both .people and .people_bg to close when I click anywhere on my screen.
<script>
$(document).ready(function(){
$("#relations").click(function(){
$(".people").slideToggle("fast");
$(".people_bg").slideToggle("fast");
});
});
$('a.close, .people_bg').live('click', function() {
$('.people_bg , .people').fadeOut(function() {
$('.people_bg, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
The problem is: It only works once. The second time around, only '.people' appears, and not '.people_bg'
The remove function that you're using actually deletes elements from the page altogether, so that's your culprit. Replace that with a more appropriate function and you should be just fine.
You can simply just fadeOut without remove. This will hide them without actually removing them from the page: JS FIDDLE
$('a.close, .people_bg').on('click', function () {
$('.people_bg , .people').fadeOut();
});
Additionally, in your first function, you can combine the two class selectors:
$("#relations").click(function () {
$(".people, .people_bg").slideToggle("fast");
});
Also note that you should be using jquery's .on() as of version 1.7 instead of .live().
I want to check if a child-element of a clicked div has a certain class.
So i do this:
$('.panel').on('click', function (event) { if($(".panel input").hasClass('h5_validator_error')) { event.stopPropagation(); } });
The problem: I have more then one .panel class. Since my whole site gets generated by the user and json-files, i need a dynamic environment without ids.
So, actually my if-statement is preventing all .panel-clicks from doing their job.
I want to do something like this:
if($(event.target + ".panel input").hasClass('h5_validator_error')) { event.stopPropagation(); }
So i want to select all input - elements from the clicked div without
having an array and loop through it.
Is this possible? Or what is the most efficient way of selecting child-elements of the clicked one?
You should rather use this to get the targeted element:
$(this).find("input").hasClass('h5_validator_error');
or
$('input',this).hasClass('h5_validator_error');
You shoud make the dom object $(event.target) and then apply the jquery method on it.
Try this:
$('.panel').on('click', function (event) {
if($(event.target).find('input').hasClass('h5_validator_error')){
alert('true');
}
else{
alert('false');
}
});
Working Example
Let's say I have 10 images on a page, and I want to hide an image when clicking on it.
Each image has an id like: figure1, figure2, figure3, figure i++.
Of course I could write this
$('#figure1').on('click', function() {
$(this).hide();
});
$('#figure2').on('click', function() {
$(this).hide();
});
$('#figure3').on('click', function() {
$(this).hide();
});
and so on but obviously that's not good.
The other thing I thought was creating a function and triggering it with onclick="theFunction(id)", so then I could hide the right image within the function as it knows the id of the image, but when the page loads, obviously JS doesn't know which ID I'm going to delete. How could I make this dynamic?
Any suggestions?
Err I was using class instead of ID in my function :/
function deletePhoto(photo_id, photoPosition) {
$('#photoFigure' + photoPosition).fadeOut(2000);
}
Called like:
<div class="deletePhoto" onclick="deletePhoto({$value['id']}, {$i})">delete</div>
You can give all of them a common class name say figure and use that as the selector:
$('.figure').on('click', function() {
$(this).hide();
});
Or with what you have you could go with attribute starts-with selector
$('[id^="figure"]').on('click', function() {
$(this).hide();
});
or just combine all of them and make a long and ugly selector:
$('#figure1, #figure2, #figure3').on('click', function(){
$(this).hide();
});
For the second part of your question, you can remove those inline click attribute and add a data-attribute save the photoid as is there and just use it to delete, if you have a consistent html structure then you dont event need that, you can select the photo relative to the deletePhoto button.
<div class="deletePhoto" data-photoid="#photoFigure{$i}">delete</div>
and
$('.deletePhoto').on('click', function(){
$($(this).data('photoid')).fadeOut(2000);
//<-- fade out won't delete the element from DOM instead if you really want to remove then try as mentioned below.
//$($(this).data('photoid')).fadeOut(2000, function(){$(this).remove();});
});
OR Could use multiple Select them like this:
Also plz note you are missing ) in your JQ code.
Link : http://api.jquery.com/multiple-selector/
Sample code
$('#figure1,#figure2,#figure2').on('click', function() {
$(this).hide();
});
$(body).on('click','img',function() {
var fig = $(this).attr('id');
$('#' + fig).fadeOut();
});
I'm trying to add a fadeOut function which links to another. CLICK HERE At present I have a flashing logo. When the user clicks on the logo, the flashing stops, has a slight delay then slowly fades Out. Is there anyone out there that is able to correct me on the code I have pasted below?
<script>
$(document).ready(function(){
$("#center-gif").click(function(){
$('#center-gif').hide();
$('#center-img').show();
});
$('#center-img').click(function(){
$('#center-img').hide();
$('#center-img-gif').show();
});
$('flash-link').click(function(){
$('center-img').fadeOut(5000);
});
});
</script>
If you want to access element with class/id; you must always define . and # these at the begining, like css.
Some Examples:
$('img').fadeOut();//selects all img elements
$('.img').fadeOut();//selects all elements with class="img"
$('myClass').fadeOut(); //false
$('.myClass').fadeOut(); //true
$('myId').fadeOut(); //false
$('#myId').fadeOut(); //true
Here is working jQuery for your question with less code:
$(document).ready(function(){
$("img").click(function(){
var takeId = $(this).attr('id');//takes clicked element's id
$('img').hide();//hides all content
$('#'+takeId).show();
//matches clicked element's id with element and shows that
});
$('#flash-link').click(function(){//define '#' id declaration here
$('#center-img').fadeOut(5000,//new function after fadeOut complete
function() {
window.open('url','http://iamnatesmithen.com/jukebox/dancers.php');
return false;
});
);
});
});
So I assume your problem is that that image does not fade out, right?
This could solve it:
First of all change your .click()-functions to that:
$().click( function(event) {
// cour code
event.preventDefault();
}
And than change the last one like that:
$('#flash-link').click( function(event) {
$('#center-img').fadeOut( 5000, function() {
window.location.href = 'jukebox/dancers.php';
});
event.preventDefault();
});
I didn't test that, but it should work. What it does is: It fades out the image and calls a function when ready. This functions then redirects to your next page.
The event.preventDefault(); will tell the browser not to delegate the click-event. If you don't put it there, the browser opens the anchor without waiting for any JavaScript to execute.
Note
When you want to select an element with an ID use this selector: $('#[id]')as this selector $('html')works only with HTML-elements.