Asked this question a few weeks ago, but have not been able to find a solution - I'm a code novice, so I'll do my best to be more specific.
I have a page with an accordion - it's built-in as a short code that comes with the site theme. I have links in external pages that have anchor tags that take you to the accordion page - right now when those links are clicked, user is taken to the term but the panel does not open. I would like for the panel of the accordion to also open. As-is, all the panels are closed when you get to the page. Here is the code I have so far to remove the 'closed' class when a link w/an anchor is clicked:
var anchor = window.location.hash.substring(1);
$('.' + anchor).removeClass('su-spoiler-closed');
I have not been able to get it to work, perhaps I don't have it in the right spot? Maybe jquery is not working on the page in general?
You may also use CSS, it's easier for us novices.
/*accordion ids' unhide*/
#id:target{
display:block;
}
/* end css */
link: www.website.com/page.htm#id
I think the answer to your question is here: jquery open accordion from link
You just need to get the hash content from current url and change the accordion.
Assuming jQuerUI's accordion
Basically, you want to listen for the action on load and use the API to set the desired element.
API: http://api.jqueryui.com/accordion/#option-active
you must class a parent wrapper of your accordion (here, as .parent) for this selector syntax to work:
$(function(){
var anchor = window.location.hash.substring(1);
$('.parent a[href$="' + anchor+ '"]').ready(function() {
var index = $(this).parent().children().index(this);
$( ".parent" ).accordion( "option", "active", parseInt(index,10) );
});
});
Related
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.
I need to have some of my navbar buttons redirect for instance back to my start page. It seems the smooth-scroller coding needs the menu items to direct to hashtag anchors for the menu items to function and this does work, but when I try to redirect to another page entirely, nothing happens. There is no error and there is no div covering the button.
A solution I saw on here involved adding a statement to the scroller code to disable the need for hashtags for specific external links, but I don't know how to code this and my template's code is dissimilar to the one mentioned in the thread. I would in other words need a code that states to do the regular actions onclick, as long as the button does not have the class "ext-link". See the link below for more specific details. One page theme Bootstrap Navigation Link does not direct to another page, while it works for anchors inside the page
I'm not entirely sure the below is the right code, but it seems like it. How would I rewrite it to include an "if click and not class=ext-link" case so that I could enable external links from my site-root for my navbar?
jQuery('#scrollToContent').click(function(e){
e.preventDefault();
jQuery.scrollTo("#portfolio", 1000, { offset:-(jQuery('#header .top').height()), axis:'y' });
});
jQuery('.nav > li > a').click(function(e){
e.preventDefault();
jQuery.scrollTo(jQuery(this).attr('href'), 400, { offset:-(jQuery('#header .top').height()), axis:'y' });
})
jQuery(window).scroll( function() {
//setHeaderBackground();
});
If I got this right you can modify the second click even handler with this code and it should work:
jQuery('.nav > li > a').click(function(e){
var $this = jQuery(this);
if (!$this.hasClass('ext-link')) {
e.preventDefault();
jQuery.scrollTo($this.attr('href'), 400, { offset:-(jQuery('#header .top').height()), axis:'y' });
}
})
Hope this helps. :)
I have a sidebar menu Here which built with AdminLte framework.
I want to be able to click on the "parent" links and navigate to their content,
for example - when clicking the "Home" button - i want to navigate to home.html and also open the sub menu. I've tried a lot of possible solutions found here - but i didn't manage to make it work.
First i've tried to load to content by doing something like that :
`
$('.treeview a').on('click',function(){ // the class of the Li
var current_url = $(this).attr('href');
$( ".content" ).load(current_url+ ' .div-cont');
}
);`
The classes above appears in
the dev project - i didn't manage to recreate the whole project here.
Problem with this solution is that the url doesn;t change - and the js file aren't loaded....
Thanks
Roy.
Comment this line from script.js:
e.is(".treeview-menu") && a.preventDefault()
I'm using a bootstrap v3 and want to make a link to an anchor tag within a specific tab. I found a way to link to a specific tab like this way:
http://www.example.com/faq.html#tab2
Below is the code I used to get this work.
<script type="text/javascript">
$(function() {
// Javascript to enable link to tab
var hash = document.location.hash;
if (hash) {
console.log(hash);
$('.nav-tabs a[href='+hash+']').tab('show');
}
// Change hash for page-reload
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
However, I want to jump to an anchor tag within this tab, so I made a link like below but it won't work.
faq.html#tab2#topic2-3
I believe 2 hashtag is making a problem? Is there a way to make a direct link to the anchor tag in a specific tab? Maybe like this way?
faq.html?tab=2#topic2-3
Thank you for the help.
In order to use anchors, the fact that you are using bootstrap doesn't matter. You need to properly give the name to the anchor/title that you want to use. In order to do that you can do
<a name="tab2">Title Text</a>
Now, when you go to
/myPage.html#tab2
you will get to where you want. Read here for more info: http://help.typepad.com/anchor-tags.html
Before you reach the anchor, if you want to go to a specific tab, you should find it by using a get request, which is as you stated, this way you aren't trying to find two anchors, which doesn't make sense to the browser.
I'm sure someone has already done this and posted it online, but I'm having trouble finding such an example or tutorial.
Basically, I want to have a series of links on the page. If you hover your mouse on the link, it should open a drop down DIV box under the link and then load content into the DIV from a remote URL that is pre-defined.
Has anyone seen such an implementation or have any ideas on how to do it with jQuery?
I think you're looking for something similar to:
$(document).ready(function(){
$("a").hover(function(){ //When a given link (<a> tag) is hovered over
$("div").load(this.href).show(); //load the src of that tag into a given div container.
});
});
Here's a simple test in jsFiddle, but I didn't know what to put with the href...so all you'll see is the div appear with the post error...not very pretty, but if anyone has suggestions then I'm definitely open to all.
http://jsfiddle.net/ChaseWest/VEuH9/2/
I would go with something like the following. Note that we target only anchors who don't have the loaded class. The reason why is because we don't want to load the contents for any anchor multiple times. Whenever the user passes over an anchor, its content will be loaded and it will get a special class indicated this. If they pass over it again, nothing happens.
$("body").on("mouseenter", "a:not(.loaded)", function(e){
$(".mydiv").load(e.target.href, function(){
$(e.target).addClass("loaded");
});
});