link to automatically expanded treemenu text disables links in the text - javascript

I found this topic: How to link directly to an FAQ option expanded and used this script in my website:
$(window).load(function(){
$('.expand_text').each(function() {
$(this).css("display", "none");
});
$('.treenode').click(function() {
$(this).next('.expand_text').slideToggle("fast")
return false;
});
(function(hash){
if (hash !== undefined && hash.substring(0,1) === "#") {
$(hash).slideToggle("fast");
}
})(window.location.hash);
});
So now I can provide a link to a particular page which opens with one of the menu items automatically expanded. For example: http://drgiannopoulos.com/estheticdentistry.html#bleach It is in Greek, but its obvious that you can land on the page with the first menu item expanded. However, if you scroll down a bit you'll notice two three lettered underlined words (sorry again its Greek!). These are links and they don't work! You can right click and select "open in a new tab / window" which will work fine, but the simple left click has been rendered inactive. I think this has to do with the above mentioned script and since I am totally new to all this I would like your help.
Thanks

Related

Menu with Anchor to another page and ID does not work

i'm facing this strange problem for the first time.
Probably is something really easy but i can't get out.
If you open the menu in this page:
https://danielepinazzi.com/fabric/
and you try to navigate into that page with anchor link, it works perfectly.
If you open the "contact us" page and then try to click on another link in the menu, like "what we do" it will close the menu and do nothing. But if you try to right click and select "open in a new tab", it work.
Edit because i need to explain better:
I've already added the absolute link in the menu, not only the anchor.
The section #whatwedo is linked with https://danielepinazzi.com/fabric/#whatwedo
I'm using Chrome on a Mac.
Can someone explain this to me?
Thank you and have a nice day you all.
I inspected whats going on there, you have a code block as mentioned below;
When i do what you said on the problem, isSamePage returns true because you are splitting anchor tag on href variable
$this.attr("href").split("#")[0]
and it returns https://danielepinazzi.com/fabric/ which is already in url.
That makes isSamePage true according the code and prevents the action.
$(".mk-fullscreen-nav-close, .mk-fullscreen-nav-wrapper, #fullscreen-navigation a").on("click", function(e) {
$(".mk-fullscreen-nav").removeClass("opened"),
$(".mk-dashboard-trigger").removeClass("fullscreen-active"),
$("body").removeClass("fullscreen-nav-opened");
var anchor = MK.utils.detectAnchor(this)
, $this = $(this)
, href = $this.attr("href").split("#")[0]
, url = window.location.href
, isSamePage = -1 !== url.indexOf(href);
anchor.length ? (isSamePage && e.preventDefault(),
MK.utils.scrollToAnchor(anchor)) : "#" === $this.attr("href") && e.preventDefault()
})
You have probably added anchor links via the menu like #link. Those links only work if you are on the page where these anchors are placed. If you want them to work when you are on another page, you should add them as /fabric/#link since the homepage for your project is /fabric/.
Note: it is easiest if you use absolute URL's in your menu (i.e. https://danielepinazzi.com/fabric/#whatwedo instead of just #whatwedo. Don't forget to update those if you migrate to a production environment.

Select the second tab in a section of a page

index.html#section navigates you to a certain section of a page. But I want to select the second tab in a section of a page. I don't know if it can be done without javascript but using Tab Content Script (v 2.2) with the method instance.expandit(tabid_or_position) would seem to work. However, I'm having a hard time figuring out how to select the second tab in a section of a page.
Hope you could help me with this. Thanks!
As mentioned in the comment, you want to navigate to the tab when a button is clicked.
Though not a clean way, but you may simulate a click action on tab once the is button clicked.
var element = document.getElementById('coupon-navigator');
element.addEventListener("click", function(e) {
document.getElementById('tab2').click();
}, false);

Logic for jQuery accordion, only open one item at a time but also close-on-click of open item

I'm building a really basic jQuery accordion (I'm aware of the accordion in UI, I do not want to use it).
I have the whole thing pretty much working, but am stuck on logic for one particular part.
https://jsfiddle.net/sqnfs4kn/
Only one accordion item should ever be open at a time. So when the user clicks, I'm closing down all accordions regardless of the clicked one, and then opening the clicked one.
This works OK except I am missing when the current, open item is clicked, it should close, so that no items are open at all
I cannot figure out the logic for this because when the current item is clicked, it is currently set to open it if it has the data-status="closed but this does not seem to work.
Here is my accordion code:
$(document).ready(function () {
$('.accordian-item').click(function () {
// close everything first
$(".accordian-text").attr('data-status', 'closed');
$("h3").css('background-image', 'url(arrow-down.png)');
$(".accordian-text").css("height", "0").css('border-bottom', 'none');
console.log('clicked!');
var status = $(this).children(".accordian-text").attr('data-status');
if (status == 'closed') {
// open it
$(this).children(".accordian-text").attr('data-status', 'open');
$(this).children("h3").css('background-image', 'url(arrow-up.png)');
$(this).children(".accordian-text").css("height", "auto").css('border-bottom', '1px solid #c7c5c5');
} else {
// close it
$(this).children(".accordian-text").attr('data-status', 'closed');
$(this).children("h3").css('background-image', 'url(arrow-down.png)');
$(this).children(".accordian-text").css("height", "0").css('border-bottom', 'none');
}
});
});
You are closing the open panel before checking the status. Move
var status = $(this).children(".accordian-text").attr('data-status');
to the top of the function so it gets a status of "open" and your if logic will then go to the else.

Show All Slide Jquery

i have this jquery script that i can't get to work like i want, i want a button that shows all the content at the same time and hides the content at the same time.
When pressing a link, i want all the slides to slide out, and show all the content, and pressing it again will hide it. Is this possible?
I've tried to create a link that run
javascript:slideonlyone('newboxes1')
javascript:slideonlyone('newboxes2')
but it doesn't seem to work.
Fiddle
if ($(this).attr("id") == thechosenone) {
$(this).slideToggle(400);
}
Remove the above if condition, which is preventing to slide both elements.
$('.newboxes2').each(function (index) {
$(this).slideToggle(400);
});
JSFiddle
See http://jsfiddle.net/F48AT/5/ You use
$(this).slideToggle(400);
here the this scope refers to the current clicked item. Since you want all slides to open, you need to use a class common for all slides. In your case this is .newboxes2. Therefore this code opens all slides:
if ($(this).attr("id") == thechosenone) {
$('.newboxes2').slideToggle(400);
}

JQuery Tabs and Hyperlinking (help me fix my code, please)

I am using multiple pages that each have jQuery tabs. Lets say I have Page1.html with #tab1 and #tab2 and Page2.html with #tab3 and #tab4. My code has issues with:
1) Within the tab content, Page1.html#tab2 has a hyperlink to Page1.html#tab1. The link does not work - the page just stays on #tab1 when clicking the link. However, a hyperlink in the menu container on Page1 to #tab1 does work. Both hyperlinks use the same a href="#tab1" but for whatever reason, only the link outside of the Page1.html#tab2 content works when linking to Page1.html#tab1. The hyperlinks in the menu container always work.
2) If I send someone a hyperlink to www.Page1.html#tab2, the page URL shows as www.Page1.html with tab 1 showing, meaning I cannot link directly to a tab. However, the menu on the website does correctly link to tabs. If I click the menu link for Page2.html#tab3 while browsing Page1.html, the tab will correctly load and the URL shows Page2.html#tab3 and will remain that way even if I click #tab4 on the page. The URL ONLY changes when clicking menu hyperlinks to different pages, i.e. Page1.html#tab1 to Page2.html#tab3. Clicking Page2.html#tab3 while on Page2.html#tab4, the tab content will correctly change to #tab3 but the URL will remain as Page2.html#tab4.
What I Want:
A) To be able to send someone a link directly to a tab. Sending someone a link to www.Page1.html#tab2 will always load as the URL www.Page1.html with the first tab displaying. However, the menu hyperlinks on the page do work.
B) To be able to link between tabs on the same page if the link is within the tab content. For example, a link in the content of Page1.html#tab1 should be able to link to Page1.html#tab2. Right now, it only works if the link in the content of Page1.html#tab1 is linking to a tab on a separate page like Page2.html#tab3.
C) **EXTRA CREDIT**: When I click directly on a tab, the tab image "pops" out and the previously selected tab "unpops". When I click a menu hyperlink to a tab, the previous tab remains popped out even with the correct content for the newly selected tab showing. Or, if using a menu link to travel to a tab on a new page, no tabs "pop" out but the correct tab content shows. I think fixing the above problems will solve this problem, too.
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
$(function () {
$('a[href^="#"]').click(function(e){
e.preventDefault();
$('html,body').scrollTop($(this.hash).offset().top - 50);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li, .rgtPanelBox ul li"); // Second selector to match left hand sidebar
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
else {
tabs.first().addClass("active").show();
tabContents.first().show();
}
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return;
});
});
</script>
Anyways, I'm a huge noob so the better the code you provide, the easier I can approve your answer as being correct. :)
Thanks!
You need to make your anchor tags hashable, that is, make them 'bookmarkable' for the front-end user. You seem to be on the way to creating your own tab plugin, but jQuery UI will do the hashing part for you. Here is a demonstration setting tabs up as you have mentioned:
http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/
DEMO:
Here's the demo page -> http://muledesign.com/demo/tabs/default-tabs.html
Demo page with hashable link to tab -> http://muledesign.com/demo/tabs/default-tabs.html#movie
Re: point C) - Try using a lightbox plugin and attaching the lightbox plugins open/init function to the activate event on UI tabs -> http://api.jqueryui.com/tabs/#event-activate
I appreciate you may not want to use plugins, but you're already using jquery so meh.

Categories