Link to open tab from menu help. jQuery Tabslet - javascript

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!
}
};

Related

Check URL when page is loading

I need to change website pages with hashtag when site is loading.
For example when in browser address bar type:
http://example.com/#about
about page open in browser.
I use this:
$(window).bind('hashchange', function(e){
var anchor = document.location.hash;
nextPage(anchor);
});
for change page when user press on menu button and it works well, but I need this check happen in first of load website too.
If you want to trigger an event immediately, use trigger():
$('selector').on('event', function(e) { ... }).trigger('event');
So you would do:
$(window).bind('hashchange', function(e){
var anchor = document.location.hash;
nextPage(anchor);
}).trigger('hashchange');

How to create a link without showing the url?

Could someone please share how to create a link and not letting the users know the url of the link?
For example in the following website, when you hover over the practice groups the mouse shows that its a hyperlink but the url doesn't get dsplayed.
verbling.com/community
I am developing a similar page. Kindly share how to create a link and not letting the users know the url of the link.
Following this simple example with jquery
Click Here
$(function(){
$('.do_action').click(function(e) {
e.preventDefault();
// Open link on same page
document.location.href = 'http://example.com';
// Open link in tab or other window
// window.open();
});
});
For new tab window.open()
you can add a click function and set the location throgh javascript like:-
$( document ).ready(function() {
$( "#target" ).click(function() {
location.href = 'http://address.com';
});
});
for this thing to work you have to include jquery, either from your server or from CDN like
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Always open a html page in fancyBox iframe

I use Fancybox to display external html pages in fancybox, for example : In page1 I set a link, which opens page2 in fancybox iframe mode, and that works fine.
The question is :
Is it possible that if somebody tries to enter the URL of page2, make page2 to always open in fancybox from within page1 instead of the browser window like a normal page?
Yes, it's possible.
So page one (parent.html), will open page two (iframed.html) in fancybox from a link like
<a id="openIframe" class="fancybox" href="iframed.html">Open page inside fancybox iframe</a>
Notice that I set an ID and a class to the link that will open the iframed page.
Then the script for each page:
parent.html
parent page should have two specific codes :
a code to initialize fancybox
a code to detect when a hash is present in the URL so it can fire fancybox
so :
// initialize fancybox
$(".fancybox").fancybox({
// API options
type: "iframe" //<== at least this one
});
if (window.location.hash) {
// detect if URL has hash and trigger fancybox
$(window.location.hash + ".fancybox").trigger("click");
// remove hash after fancybox was opened
// two methods to cover most browsers
if (navigator.userAgent.match(/msie/i)) {
var loc = window.location.href;
index = loc.indexOf('#');
if (index > 0) {
window.location = loc.substring(0, index);
}
} else {
history.pushState("", document.title, window.location.pathname);
};
};
Then the second page (iframed.html) should have a code that detects if itself has been opened inside an iframe or not (the fancybox iframe in our case).
If not, it should redirect to the parent page, targeting the ID of the link that opens fancybox so :
iframed.html
if (self == top) {
window.location.href = "parent.html#openIframe";
};
Notice that self == top will return true if the page wasn't opened inside an iframe so it redirects to parent.
See JSFIDDLE (and try also opening the link in a new window/tab)

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
}
});

Direct link to the content

I have a page http://bartle96.narod2.ru/demo.html there are 4 links to the hidden content
Is it possible to make a direct link to the content such as "dolphin".
So that when you click on a link http://bartle96.narod2.ru/demo.html#delfin immediately opened a photo with a dolphin
Yes, you can define and open needed content on onload event.
Check this post where you can find the same behaviour:
jQuery when pointed to a link should show a div that's hidden by default
You can get the hash value using window.location.hash. Then set the pic you want based on the value.
window.onload = function() {
var pic = window.location.hash;
if ( pic === "#delfin" ) {
// Show picture of dolphin
}
}

Categories