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()
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.
Got a sidebar filter in my site that has accordion headers. I would like to be able to have the 1st item always open (/expanded) with an option to do the same with the 2nd one.
This is the js: (Its a script from a shopify app called Power Tools)
<script type="text/javascript">
$(function(){
$('.filter-menu h4').on('click', function(e){
$(this).closest('.filter-group').not('.has_group_selected, .refine-header').toggleClass('expanded').find('ul,.filter-clear').toggle('fast');
e.preventDefault();
})
});
</script>
Here's a link:
https://www.zoobgear.com/collections/punching-bags
(trying to make the category item always open)
Any suggestions? maybe altering the script would do the trick...?
Thanks a ton for any advice!!!
If you have access to the accordion plugin then you can make modify it to expand any options on page load based on which plugin is used.
In case you need any jQuery script to open the category menu in expanded form this can be done by using following code.
$('.filter-group-category').find('h4').trigger('click');
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) );
});
});
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.
I'm creating a jQuery Mobile web application.
This link, works correctly:
Click Here 1<!--This is working-->
But, these links which have anchors are not working:
Click Here 2<!--This is not working-->
Click Here 3<!--This is not working-->
How to make those links that have # work with ajax navigation?
Edit: The page, which contains these links, contains some links to different articles. And /ThePage/25 contains the full text of that articles. I want each link to go to somewhere inside /ThePage/25. So I've used #. (#3 means the third article in the page)... Do you know any better way?
Edit 2: I'm simply trying to load/show a page and then jump within it...
Edit 3: My jump inside that page isn't a simple jumping. It's a custom handled jumping with hashchange event. But if there is any other method, I can change that page...
add rel="external" to any links that have an anchor # and you don't want to load via ajax.
New Links would be:
Click Here 2<!--This is not working-->
Click Here 3
See http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html for more detail.
You can try using this from JS like this , I had problems with # tags :
<a class='homeSet'>Home</a>
....
$('body').on('click', '.homeSet', function(ev) {
$.mobile.changePage('/home.html#myhome', {
transition : "slide"
});
return false;
});