A JQuery UI Tab that inherits from a JQuery Theme and redirects (HTTP GET) to a new page is the goal.
I'm 90% there using the following code, but the compromise has been to put the target URL in the anchor TITLE (the Tab widget expects the HREF to be a local page selector).
This works, but for SEO purposes I'd like the HREFs to be actual URLs to ensure search engines will follow and index them.
Thoughts?
<script>
$(function () {
$("#tabs").tabs();
$(".nav-link")
.click(function () {
window.location = this.title;
});
});
</script>
<div id="tabs">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
</div>
If you make sure that you follow certain HTML structure, you can do something like,
<div id="tabs">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
<!-- Make sure that your DIVs are called 'tabs-0', 'tabs-1' etc. 'tabs-0' will be referred by first link, tabs-1 will be referred by second link, so on and so forth. -->
<div id="tabs-0"></div>
<div id="tabs-1"></div>
</div>
If your HTML structure looks like this, you can do:
<script>
$(function() {
var tabId = '#tabs';
$(tabId + ' a').each(
function(index, val)
{
$(this).attr('href', tabId + '-' + index);
}
);
$("#tabs").tabs();
});
</script>
Now, search engine will see those links where as user will see your regular tab behavior.
I'm confused as to why this must be done through jquery. If you just want a Http Get redirect, that's what <a href=""> tages were designed to do.
Related
I have a pop out menu in a div.
I'm controlling the opening and closing of the div using: ng-click="showNavMenu = !showNavMenu".
However for each, link where I use this, i need to duplicate that code so that the menu actually closes, once the new view is loaded.
I'd like to avoid this code duplication - any ideas on what I can do:
<div class="navMenu" ng-show="showNavMenu">
<ul>
<li>About</li>
<li>Privacy</li>
<li>Contact Us</li>
</ul>
</div>
Use function instead
<li>About</li>
And define this function in controller
$scope.toggleMenu = function() {
$scope.showNavMenu = !$scope.showNavMenu;
}
What about putting the ng-click on the parent ul? I'm not super well-versed in angular's event bubbling/propagation rules - there might be some tweaks you need to make to your function or to the ng-click attribute. Or it might just work.
function toggleMenu() {
$scope.showNavMenu = !$scope.showNavMenu
}
-----
<ul ng-click="toggleMenu()">
I would go with moving the navigation logic to the controller code, seems the cleanest solution to me. So your markup would look like:
<div class="navMenu" ng-show="showNavMenu">
<ul>
<li><a href ng-click="navigate('about')">About</a></li>
<li><a href ng-click="navigate('privacy')">Privacy</a></li>
<li><a href ng-click="navigate('contact')">Contact Us</a></li>
</ul>
</div>
And inside your controller:
$scope.navigate = function(path) {
$scope.showNavMenu = false;
window.location.href = '/' + path; //better navigate via router
}
I'd like to load divs that are saved as separate html files into a div of a "main file". This works fine. However, in the div that I am loading into the main file, I have some links again and when I click on those, I'd like those divs to be loaded into the div in the main file.
So the main file has a menu like this:
<ul id="menu_ul">
<li class=" ui-widget-header">
<a class="clickable" href="output/d1e49.html">ONE</a>
</li>
<li class=" ui-widget-header">
<a class="clickable" href="output/d1e670.html">TWO</a>
</li>
</ul>
and a div like this:
<div id="target"></div>
The jquery looks like this:
$("a").click(function() { return false; });
$(".clickable").click(function() {
var url = $(this).attr("href");
$('#target').load(url) + " .content";
});
And the loaded pages look like this:
<div class="content">
<ul>
<li>
<a class="clickable" href="output/d1e100367.html">SUB_ONE</a>
</li>
<li>
<a class="clickable" href="output/d1e101804.html">SUB_TWO</a>
</li>
</ul>
</div>
So the pages ONE and TWO are loaded into the div. However, when I click on the links contained in those files, it doesnt work, the links for SUB_ONE and SUB_TWO replace the current page instead of being loaded into the div as well.
How would I get the links in the loaded pages to work? Is the DOM of the loaded divs not accessible to jquery?
This is wrong syntax $('#target').load(url) + " .content"; but i guess just typo in question. It must be: $('#target').load(url + " .content");
Now regarding your issue, you should delegate event:
$(document).on("click", ".clickable", function (e) {
e.preventDefault();
var url = $(this).attr("href");
$('#target').load(url + " .content");
});
I have a simple jQuery tab working fine. The code for this feature is:
$(document).ready(function() {
var tabHead = $('ul li');
var tabContent = $('.content');
tabContent.not(':first').hide().end();
tabHead.on('click',function() {
tabContent.hide().eq($(this).index()).show();
});
});
And the HTML markup for the tabs is:
<ul>
<li>Head 1</li>
<li>Head 2</li>
</ul>
<div class="content"> Some Content/........</div>
<div class="content"> Some Content/........</div>
However, when I click the "Back" and "Forward" buttons of the browser, only the url changes e.g.
http://some-path/demo-tabs/#tab2
The content of the tab does not show up. How can I make the tab's content also show up on clicking the "Back" or "Forward" buttons?
Listen for the "hashchange" event on the window object, and trigger a click on the relevant anchor link when that's fired.
You can target the correct link using the jQuery attribute-equals selector. That looks something like this: a[href='#tab1']. You can get the link's href from the URL via the window.location.hash property.
$(window).on("hashchange", function() {
$("a[href='" + window.location.hash + "']").click();
});
Take a look at this list of browsers that support the hashchange event.
Use id instead of href
<ul>
<li><a id="#content1">Head 1</a></li>
<li><a id="#content2">Head 2</a></li>
</ul>
<div class="content"> Some Content/........</div>
<div class="content"> Some Content3........</div>
This will prevent change in URL
JSFiddle
I am using Jquery Mobile and I have a big page which consists of two(or more) parts.
I hope to let the user view the second part when displaying my page for some case.
How can I achieve that? Can I do this to provide a special URL with some specific id?
Please note: I only need a URL, since I will post this URL to my user in some client, and the url should determine which part to show.
I use open my html file with :E:path\....\rule.html#zhuaguirule. This does not work to scroll to that desired part, but when I hit enter again from the browser, it works. I do not know why this is happening or how to solve this.
<div data-role="page" id="rule">
<div data-role="content" id="wodirule"> <!--this is one part-->
<h2>PART1</h2>
<ul data-role="listview" data-inset="true">
<li>....</li>
<li>....</li>
</ul>
</div>
<br><br>
<div data-role="content" id="zhuaguirule"><!--this is the other part-->
<h2>PART2</h2>
<ul data-role="listview" data-inset="true">
<li>....</li>
<li>....</li>
</ul>
<ul data-role="listview" data-inset="true">
<li>...</li>
<li>...</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
The default behavior of jQuery Mobile upon loading a page or changing between pages, is that it scrolls/jumps to the top. This is actually a fix for mobile browsers, where address bar hides part of header.
The below solutions overrides jQuery Mobile's default behavior by scrolling to target div when page is fully shown.
jQuery Mobile <= 1.3
You have two solutions. Use them on pagechange event.
Override $.mobile.defaultHomeScroll; by default it returns 0. Retrieve hash from window.location, find .offset().top of the target div and then scroll to it.
$(document).on("pagechange", function () {
var section = location.hash ? location.hash : null;
if (section != null) {
var activePage = $.mobile.activePage;
$.mobile.defaultHomeScroll = activePage.find(section).offset().top;
}
});
Demo
If you want animation, use .animate() instead of override $.mobile.defaultHomeScroll.
$(document).on("pagechange", function () {
var section = location.hash,
activePage = $.mobile.activePage;
if (section) {
var scrollTo = activePage.find(section).offset().top;
setTimeout(function () {
$("body").animate({
scrollTop: scrollTo
}, 500, function () {
subPage = null;
});
}, 500);
}
});
Demo
jQuery Mobile >= 1.4
Replace
pagechange with pagecontainershow or pagecontainertransition.
$.mobile.activePage with $.mobile.pageContainer.pagecontainer("getActivePage");.
Demo: Solution 1 - Solution 2
I have a navigation menu at the top of my webpage with a drop down. For example the service page under nav has a drop down of our other services that go to a service page with a tab structure like so:
<section class="tabs">
<ul class="tab-nav">
<li class="active">First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div class="tab-content">
<p>Here's the first piece of content</p>
</div>
<div class="tab-content active">
<p>My tab is active so I'll show up first! Inb4 tab 3!</p>
</div>
<div class="tab-content">
<p>Don't forget about me! I'm tab 3!</p>
</div>
</section>
and I would like like to make it so that I could use my achor tags on my home page to link directly to tab 3 or 1 or 2 of my choosing as well as when I refresh the page with the tabs the tab doens't jump to the active tab. How can I do this with javascript? I attempted it with this hash check function bit of code:
$(function () {
$(".tab-content").hide().first().show();
$(".tab-nav li:first").addClass("active");
$(".tab-nav a").on('click', function (e) {
e.preventDefault();
$(this).closest('li').addClass("active").siblings().removeClass("active");
$($(this).attr('href')).show().siblings('.tab-content').hide();
});
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
});
The problem is, is that when I click the second tab, it shows the content on the first tab... but tab 3 looks fine. But when I click on tab 3 and then go back to tab 2, no content displays under tab 2. Maybe someone can simply my code for what I'm trying to accomplish?
ps. I'm using the gumby framework for my tabs
First of all, $($(this).attr('href')) isn't going to find anything, so none of the tabs would be working anyway.
Apart from that, the hash linking code seems to be fine.
I've rewritten the code so that it works now below.
Link: http://jsfiddle.net/s8Ttm/2/
Code:
$(".tab-nav a").bind('click', function (e) {
e.preventDefault();
$(this).parents('li').addClass("active").siblings().removeClass("active");
$('.tab-content').removeClass('active').hide();
console.log($('.tab-content:eq('+$(this).index()+')'));
$('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show();
});
$('.tab-nav a').first().click();
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');