This is not really a BSS question, but I have been searching for the past 2 days to find the answer to this, and I'm sure there is one, but I couldn't find one so I'm hoping someone here has more information about these things than I do.
I'm trying to setup some links on the menu for my client that will take them to the page that the Tab element is on, and will open the specific tab that they are wanting to see when they click the specific link on the menu in the Ministry Teams area. You can see the page here (there is no direct link to this page on the menu): http://eiwd.work/fpcbm-bss-test/ministry-teams.html The menu is not fully complete yet, but should work fairly well for the most part. This is the Yamm 3 Menu I've been working with since I started with this app, and getting some of the external scripts/elements to work has been a challenge, but they are working!
There are 10 tabs on this element, and I have them all listed in the menu under the Ministry Teams. I have them set as anchor links to the ID's on the Tab Content areas on the Ministry Teams page, but I've tried setting it to the tabs themselves (and it changed to that tab, but the content didn't change to that tab's content lol). I'm sure there's something I probably have to do extra to get this to work, but linking to the ID's surely doesn't seem to. Just takes me to the page and always on the first tab no matter what link you click in that drop down.
I am not a programmer with javascript/jQuery or PHP or any of that, just HTML and CSS, but I can usually get scripts in to work without too many hassles so if anyone has any suggestions I would surely appreciate it. Thanks!
Thanks so much for attempting to help (attempts are on my end not yours lol, you most likely have a lot bigger clue than I do haha)
Well I am obviously not doing something right lol. It's still not working, the only thing that changes is the URL in the browser address bar.
I have this script as well as a few others inside a myscripts.js file since we can't add them to the bottom of the page like we usually would. I've tried rearranging them a little bit, but so far no love. Can you take a look and see if maybe I added something wrong?
Oh the other thing that's going on when I add this script (doesn't seem to matter what position in the file it's in), is it breaks my "back to top" script, and breaks the menu script that keeps the menu from closing when you click on anything at all even if it's not a link. The menu script helps for something I don't have on the menu at the moment as well, and that's for accordions so that they don't close the menu when you click the accordion links.
It's located above the spot that has id="copyright", you should remove it. You already have it in myscripts.js and that loads after jquery so it doesn't give an error there.
Thanks Saj, I've removed it from the Design, but not the uploaded pages yet, I'll do that shortly. Didn't even catch that I forgot to remove those lol. I did that pretty much in the beginning when I first started things and was trying to deal with how to add the scripts to the footer area and was playing with doing it with the custom code or with a separate .js file and decided the .js file was easier since I could update it once and it would update all pages at the same time lol. Taking the easier softer way around it! Thanks for catching that!
If that still doesn't work for you, you can try adding the following function to your myscripts.js
function ministryTeams(){
var hash = location.hash,
hashPieces = hash.split('?'),
activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
}
Add the class "ministry-teams" to your body element.
Then add this snippet of code in your $(function(){ section
$(function(){
if($("body").hasClass(".ministry-teams")){
ministryTeams();
}
.....// other script stuff
});
This should run the function ministryTeams() when the page loads from a page that is not the ministry teams page. So for instance your on the home page and click on the dropdown and select "Christian Education" the ministry teams page loads, which the script senses it has the class ministry-teams it will trigger the ministryTeams() function which will parse the URL grab the hash and trigger the tab function. Well figuratively anyways. This will revert back to whatever tab you had clicked on from the dropdown on a refresh.
This can also be expanded to work on the ministry teams page as will by using an onclick to trigger the function to run again from the dropdown.
I did correct that code and still no joy. Took that section of code that was left on the pages off too and uploaded, no luck there either.
I'll take a better look at that tomorrow Saj, much of it is lost on me, not sure what you mean by my $(function(){ section, I am probably not understanding the way the scripts need to be setup if there is supposed to be a section lol. I just copy what someone gives me to the bottom or somewhere in the middle to see if it works. Sounds like I may have been doing this wrong for a long time. I keep the scripts separate of course, but I guess I wasn't aware there were script sections and function sections so if that's the case can you be more specific please?
Also, am I supposed to leave that script I have in there now there or are the examples you give supposed to replace that one? And one other thing (sorry I'm not good at figuring these scripts out, only adding them usually as is lol), am I supposed to add that class to the body tag of all pages or just the ministry-teams page?
Other than that I'll check tomorrow and see what I can work out. Thanks again!
Looking at your myscripts.js file [I am by no means a Javascript Pro, just have been working with it for a little while I'm still pretty new too].
To explain a little
// This snippet should be removed, your already calling in below and in the proper place.
// BEGIN Yamm 3 Menu scripts
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
$(function() {
// This is the same as other parts of your script that looks like this "$(document).ready(function(){"
// it's just a short way of saying "$(document).ready(function(){" and there should only be one occurance
// nearly everything that you do script wise should come after "$(function() {"
// primarily scripts that start as "function functionName(){" should normally come before "$(function() {"
// "$(function() {" tells the browser to run/initialize/monitor the following code found within this section when the page is done loading
window.prettyPrint && prettyPrint()
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
})
// BEGIN Back to Top script for bottom right arrow button
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
});
I'll rewrite your myscripts.js file so you can match it.
function ministryTeams(){
var hash = location.hash,
hashPieces = hash.split('?'),
activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
}
$(function() { // when the document is ready, do the following
window.prettyPrint && prettyPrint();
// you need to add to the body element this class "ministry-teams" only on the ministry teams page
// on each page load check if body has the class "ministry-teams"
if($("body").hasClass("ministry-teams")){ // if test to check that the class exists if it does
ministryTeams(); // run this function
} // complete test and nothing else to do if the body doesn't have the class
// continue processing the rest of the scripts
// BEGIN Yamm 3 Menu scripts
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation();
});
// BEGIN Back to Top script for bottom right arrow button
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
}); //end document ready check
I know it might be a little much but it does help to understand where code should be even if you don't know how to write JS. jQuery makes it alot easier for me.
I need to "NOT" read this stuff in the email that gets sent and go to the forums instead. I was definitely not doing it correctly until I did that. Phew!
Now to fix the accordions that were working at one point and broke yesterday too LOL. So many scripts, so little time!
I can't thank you enough for taking the time to walk me through that, thank you so much Saj, and thanks to you too Simon for trying to help. Trust me when I say it was definitely user error on my end lol.
I have some online courses through Udemy for both Javascript and JQuery, but I really have no idea what is necessary for what. Would you suggest I do the Javascript course first or will JQuery take me through all of it? No guarantees I'll learn it all of course (old brain you know lol), but getting the knack of at least some of it would definitely be helpful I'm sure.
jQuery is just a JavaScript framework. It is JavaScript but what it does it enhances what is called native JavaScript and in my case makes it simpler to work with. But it is a good idea to get a handle on native JavaScript first so you understand the methods and meanings of JavaScript scripting.