We Keep Coding

Link to open tab from menu help. jQuery Tabslet

I'm wanting to link to a certain tab (Portfolio Tab) on a page from the main menu of a website, so when clicked it goes to that page with that portfolio tab open.
So far I've come up with this (using jQuery Tabslet) which works when not on the same page, but doesn't work if the user happens to be on the same page as the tabs, and so does nothing.
The link I use in the main menu is /about/#tab-3 which is doing the job of going to the about page with the portfolio tab open.
I thought I may need to trigger a page refresh when on the same page? And perhaps remove the #tab-3 from the url too.
Not being a jQuery expert, I unfortunately just don't know.
Here is the code so far
Thanks in advance.
jQuery(document).ready(function($){
$('.tabs').tabslet({
active :1,
animation : true,
container: '.tabs-container'
});
var hash = $.trim( window.location.hash );
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
}
};
});

Advise: Always mention a reference to the plugin you use. I assume here you talk about this one.
This plugin acts on tab click only.
So when using a window hash in a link from another page like you do, you have to "simulate" a click on the tab.
So you will use an attribute selector to find the anchor having a href corresponding to the hash...
And click it.
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
$("a[href='"+location.hash+"']").click(); // Add this!
}
};

Javascript/Jquery window.location

I have page the has some data in tabs, Im trying to write a function so that when links are click from another page can load the page with the tabs on and show the correct tab. This is working with the code below, minus the actual changing tabs function. But for some reason using the window.location..... as a variable still scroll the page down to the matching id. Is there another way to get the string in the url after the #. Or can i do it this way but not have to jump to the id? thanks
function loadTab(){
var linkToTab = window.location.hash.substr(1);
var linkClass = '.'+linkToTab
if(window.location.hash != '') {
changeTabs(linkClass);
}else{
$('.companyLink:first').addClass('active');
$('.companyBio:first').addClass('active');
$('.companyBio:first').fadeIn();
};
}

The hash character is for anchors.
Use a question mark instead of a hash.
<a href="index.html?tabname">
and
var linkToTab = window.location.search.substr(1);
var linkClass = '.'+linkToTab
if(window.location.search != '') {

The # part of the URL is traditionally used for anchors. The 'jumping' you see is the original feature.
Modern websites and web-applications use it build a history as HTML5's history feature isn't widely supported yet.
To avoid the jumping add event.preventDefault to your links, like:
Tab1
<script type="text/javascript">
document.getElementById("tab1handle").onclick = function (event) {
event.preventDefault();
}
</script>
You can also make sure the anchor is not defined. In this case the browser will jump to the top of the page. It's up to you whether this is undesirable or not.

Click url (With a parameter on it), New Page Loads and Javascript sets Iframe src on Page load

Page A : Any page.
Page B : Page that has Iframe on it
What I would to do is something like this.
There is a link on Page A to Page B, Something like: "abcd.com/thewall?parameter"
When they click the url to "abcd.com/thewall" the site loads like it always does with a set src for the iframe. But when they click the url with the parameter like "abcd.com/thewall?parameter" the Iframe will automatically load a different src into that iframe.
I've found many references to do stuff LIKE this on here but none of them do exactly what is described above.
Also I don't know if its possible but would it be able to also when that new url is loaded into the src of the iframe via the parameter call have it auto scroll to the iframe?
I basically know 0 about JavaScript, so please keep it simple so i can understand.
Thank you.

Parse the query string like this and set the iframe's src onDOMReady. Since jQuery is what I'm most familiar with, that's what I'll use:
function getQuerystring(key, default_) {
var regex = new RegExp("[\\?&]"+key+"=([^&#]*)"), qs = regex.exec(window.location.href);
if (default_==null) default_="";
key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
if(qs == null) return default_;
return qs[1];
}
$(document).ready( function() {
$('iframe').attr('src', getQuerystring('iframesrc', 'virool'));
});
This uses a modified version of the getQuerystring function from the linked page.

on page load change to anchor

I'm using Jquery.Localscroll to move the window smoothly between anchors. How would you change the URL when the page loads to include an anchor link so it scrolls smoothly to a section when the page loads.
Or is there a better way to scroll to a section when the document loads.
Thanks.

Obviously if you specify the anchor to scroll to in the tradional way:
Link
Then the browser will scroll automatically.
If your intention is for the browser to load the page and then have your code kick in to do a smooth (animated) scroll to a particular anchor then something like this would work:
// on calling page
Link
// on "yourURL" page:
$(document).ready(function() {
// check for "scrollto" parameter and if it exists
// use Localscroll to move to specified anchor
var match = /[?&]scrollto(?:=([^&]*))?/.exec(window.location.search);
if( match != null ){
var anchor = match[1];
// your code to scroll to anchor here
}
});

javascript/jQuery location.href misses mark

I have a page that has a number of elements that are slid up on startup. I want to be able to slide down a particular pane based on the hash in the url my code is
if (window.location.hash.length>0){
var id = window.location.hash;
if (id.length==7){ //expected hash is 7 chars long (inc #)
console.log('Comment hash in url, finding link');
$(id).parents('.details_wrapper').parent().show().find('.details_wrapper').addClass('open').slideDown('slow', function(){ //unhide and slidedown pane
window.location.href = id;
});
}
}
Which sort of works in that the appropriate pane is revealed and slid down, however the window.location.href doesn't seem to be working very well as the window consistently places the page about 800px further down than where the anchor is.
As a possible side note it seems I can't verify the correct href as typing
window.location.href='#c83225';
into the developer console (Safari) gives an error. It works in the Chrome console though.

Another option to do that is
window.location.hash = 'c83225';