What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.
Related
I am working on a personal project trying to match the below design:
I am on what I see as the hardest part. When clicking on one of the 6 different colored boxes, there should be further information popping up like below:
I am trying to first implement a background color change when the Facebook Ad Campaign box is clicked. When clicked, the background color of the whole container (which holds the 6 boxes) should change.
I believe jQuery is the right way to go about this but having tried the below it is not working:
$("#fbAdCampaigns").click(function(){
$(#container-parent").backgroundColor = "red";
}
Or, trying this to test if it changes the first out of the 6 boxes:
$("#fbAdCampaigns").click(function(){
$("#fbAdCampaigns").css({ "background-color": "#ffe"});
})
Neither are working as intended as nothing happens.
Please see what I have done so far here:
https://codepen.io/JoyFulCoding/pen/EzWyKv
Many thanks in advance for any assistance.
There are a couple of problems here.
Delete your in-line <script> tags after the imports and move them to the JS section, which would be an external file in a local project.
You only need one document.ready function.
Instead of .click use .on('click', function() ...)
Instead of .css('attribute': 'value') use .css('attribute', 'value')
As a best practice, you should not use inline CSS and Javascript when you already have CSS and JS files.
Here's some working code that doesn't do exactly what you want, but should give you the way forward:
$(document).ready(function() {
$("#menu").on('click', function() {
$("#icon").toggleClass("fa-times");
});
$("#fbAdCampaigns").on('click', function(){
$("#fbAdCampaigns").css("background-color", "#000000");
});
});
You're changing the color of the container, but it isnt visible because of the 6 boxes on top of it. Try something like this, which changes the color of each box when clicked:
https://codepen.io/aprouja1/pen/mYwEeX?editors=0010
function changeBackground(){
const clickedColor = this.style.backgroundColor;
divs.forEach(div=>div.style.backgroundColor=clickedColor)
}
You can add a class to the #fbAdCampaigns element to handle the CSS changes or use .css().
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").addClass("bg-color");
});
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").css("background-color", "#fff");
});
Using .addClass also means you can revert the change easily with .removeClass. Alternatively you could use toggleClass
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").removeClass("bg-color");
});
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").toggleClass("bg-color");
});
To access the entire container you can use the jQuery method .parent()
https://api.jquery.com/parent/
https://codepen.io/anon/pen/arwZZm
I am trying to put a photo view/slideshow on my webpage and I am not getting the results I am looking for. I have created a Fiddle HERE to show you what I am trying to do. What I want it to do is when you click a thumbnail it switches the thumbnail into the main photo spot and the main photo into the thumbnail spot. It works at first but after you start clicking the other thumbnails it starts not switching the correct photo into the main slot. Also if you reclick the thumbnail you just clicked it does nothing. Here is my jquery code but take a look at my fiddle and you will be able to see what I am trying to do.
$('.thumb1').click(function() {
$('.thumb1, .main').fadeIn().toggleClass('thumb1 main');
});
$('.thumb2').click(function() {
$('.thumb2, .main').fadeIn().toggleClass('thumb2 main');
});
$('.thumb3').click(function() {
$('.thumb3, .main').fadeIn().toggleClass('thumb3 main');
});
$('.thumb4').click(function() {
$('.thumb4, .main').fadeIn().toggleClass('thumb4 main');
});
I changed your classes similarly to how Joao did, but my JavaScript is a little different
$('.thumb').click(function () {
var newHTML = this.innerHTML;
this.innerHTML = $('.main')[0].innerHTML
$('.main').html(newHTML);
});
Instead of just changing the src, you will also keep all other attributes of the images, such as the alt attribute, which you should add to your images for accessibility purposes.
I didn't implement the idea of not having clicking the same one do nothing, because then if they want to look at the image they just looked at they can't.
JSFiddle: http://jsfiddle.net/howderek/RfKh4/6/
I was looking at your code, and I wouldn't recommend switching around classes between elements like that since it might throw out a couple of bugs like yours. I played around with your code and simplified a little bit:
$('.thumb').click(function () {
var previousSrc = $('.main').children().attr('src');
$('.main').children().attr('src', $(this).children().attr('src'));
$(this).children().attr('src', previousSrc);
});
Here's the updated fiddle: http://jsfiddle.net/RfKh4/5/
Basically what I did was save the previous src attribute of the .main div image inside previousSrc and then I change the div's image to the one in the thumbnail. And finally change the thumbnail's image to the one that was on the .main div. Hope it helps you!
I've seen answers on here on how to do this, but I just can't get it to work. Maybe another set of eyes will help. I'm trying to get the scrollbar to appear in a div that popups when an image is clicked. Here's the code for that:
('modalcs' is the name of the div that pops up)
And the function:
function update_scroll(theID)
{
document.getElementById(theID).style.display = 'block';
$(".scrollable").mCustomScrollbar("update");
}
In my $(document).ready(function() I have:
$(".scrollable").mCustomScrollbar({
theme:"dark-thick",
scrollButtons:{
enable:true,
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:true
}
}
});
and I understand that on page load since the hidden div isn't seen, the scrollbar is unable to see its content.
TIA for any help!
The problem is that the "update" command does not operate on a collection, so if $(".scrollable") returns more than one element, it will update only the first one. Use $.each
$(".scrollable").each(function(){
$(this).mCustomScrollbar("update");
});
On the other hand, since you are operating on 1 element, you can just change your function:
function update_scroll(theID)
{
$('#' + theID).show().mCustomScrollbar("update");
}
I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.
The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});
NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API
So I'm trying to achieve something seemingly very basic in jQuery. I have a number of "headers," and when I click on a header I want the info beneath that header to slide down, and all other header info to slide up (so that only one header is showing info at a time).
Here's sudo code of what I want to happen:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
[all other ('.game-info-text')].slideUp(fast)
});
For the life of me though, I can't figure out how to code that second line ([all other ('.game-info-text')]). Any help is much appreciated!
(I'm implementing this as a drupal behavior, which is why I have the "jquery-processed" class being added)
Something like:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
$('.more-info-header').not(this).children('.game-info-text').slideUp(fast);
// ^-- removes the clicked element from all `.more-info-header`
});
Reference: .not()
Sounds like you're after the jQuery UI Accordion plugin.
$('.more-info-header:not(.jquery-processed)')
.addClass('jquery-processed').click( function(e) {
var these = $(this).children('.game-info-text').slideToggle("slow");
$('.game-info-text').not(these).slideUp("fast");
});
With the not() function you can exclude the already selected elements.
Like this?
$('.more-info-header').click(function(e){
var target = e.target || e.srcElement;
$(this).children().not(target).find('.game-info-text').slideUp('fast');
$('.game-info-text', target).slideToggle("slow");
});