We Keep Coding

One page theme smooth-scrolling Bootstrap Navigation Link does not work when trying to open other pages, but it does work for anchors inside the page

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. :)

How to add a href functionality to sidebar menu?

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()

Jquery: Change Menu Item Address when not located on Homepage

I have a homepage that has its main menu.
One of the Menu items called "Contacts" uses Jquery to activate the Smooth Scroll to the "Our Contacts" block located below on that same Homepage.
"Contacts" menu item has its a href="#contact-js" that links it to "Our Contacts" block.
" Our Contacts" block has its assigned id="contact-js"
That smooth scroll work perfectly well!!
My problem is that when I leave the Home Page and open another page or post on my website I see the same menu displayed in the header section of my website.
When I press that "Contacts" menu item nothing happens because it is used to run that smooth scroll action on the Home Page.
My Question is how to assign this "Contact" menu item (it has a class="menu-item-28") a different URL pointing to my Contact Page when the visitor is located on a page or on a post (not on the home page)?
That's what I was struggling to compile:
$("#menu-item-27 a").on("click", function(event) {
if(location.href != "http://www.mynewmedia.dev") {
window.location.href = "http://www.mynewmedia.dev/Contacts-Page/";
}
});
Thanks is advance!!!
Best Regards,
Alexander

Maybe try this if you really want to take them to a full contact page instead of have them go back to the homepage contact section. If you want to take them back to the homepage section follow the advice from "I wrestled a bear once".
<script type="test/javascript">
jQuery(document).ready(function() {
if (!jQuery('body').hasClass('page-id-XX')) {
jQuery('.menu-item-28 a').attr('href', 'http://www.mynewmedia.dev/Contacts-Page/');
}
});
</script>
You'd need to update page-id-XX to use the actual homepage body class that your homepage has if this is indeed WordPress. I hate to speculate, but I believe it is based on your menu item class.
If its not WordPress, this will still work if you add a class to the <body> tag that is only present on the homepage, and then add that class name to if (!jQuery('body').hasClass('classNameHere')) {.

You just need tom change it to the full url of whatever page has the contact info and then add the #contact-js behind it.
<a href='http://www.pageWithContactInfo.com/#contact-js'>contact us</a>
Have a look at this w3c link:
https://www.w3.org/TR/html4/intro/intro.html#fragment-uri
Note the "#fragment-uri" which will scroll to the element on that page with id='fragment-uri'.
Click on that link for more info.

Accordian Menu collapsing automatically

I have a accordian menu in my asp.net page. The menu is working good but some times it's automatically collapsing. If I reload the page it's some times working but most of the time problem exist. Please find my html and jquery code from jfiddle. Here
$('.loc').click(function () {
$('#sidewrapper ul ul').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
}
});
Edit:
my problem is, If I click one list that would be active others should collapse. My code is working fine. But some time(most of the time!) if I click one list that slide is just showing and collapsing automatically without clicking other list.

Thats because your trying to slide up all the unordered list present on your page, if you can just try to slide up the list which your currently clicking on, it will work fine.
JS CODE:
$('.loc').click(function () {
//$('#sidewrapper ul ul').slideUp();
$(this).closest('li').find('ul').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
}
});
Live Demo # JSFiddle

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.