I have a Wordpress website I'm working on that uses jQuery tabs to separate information.
My client has pointed out that when a user uses the internal search and clicks on a result, the link does not take them to the specific tab that the info is on.
For example, if there are posters in tab #3 and the user searches for "posters", the search result link will take them to the correct page, but will have tab #1 open by default.
This makes it difficult for users to find what they're looking for. Is there any solution for this, or will we have to just do away with the tabs?
Here's the barebones code:
<div class="tabs">
<ul>
<li>apps</li>
<li>features</li>
<li>faqs</li>
</ul>
<div id="apps">
</div>
<div id="features">
</div>
<div id="faqs">
</div>
</div>
<script type="text/javascript">jQuery(function() { jQuery(".tabs").tabs() });</script>
If you know which tab the content is in:
// To open the third tab
jQuery('.tabs').tabs('options', 'active', 2);
I'd assume that a tab represents a category, so it should be easy enough to pass that to the results page.
Related
I have navbar like this :
<ul class="dropdown-menu" role="menu">
<li>People</li>
<li>Main Page</li>
</ul>
but when I click on "People" link, it will not position correctly, because I am loading some charts on that page. I have many section with unique id and content is loaded from JavaScript (charts).
<section id="top_something">
<div class= "container">
<h2 class="blue-headings text-center"><b>Top People</b></h2>
<div id="div_something"></div>
</div>
<br>
</section>
The content of a div id="div_something" I am making in JavaScript ...
I have a 10 div's like this on that main_page with unique id. I can see that when I click on a a href="/main_page#top_something" on navbar it will paste me on that section , but as soon as it loads JavaScript it will move me upper
thanks in advance
If your main_page is a directory (which it probably is) then you need to simply include a slash before the anchor name.
People
If you have JavaScript injecting content after the page loads then you will be brought to the appropriate anchor but the page may move because the additional content added by JS will push the anchor down the page. You might consider repositioning the screen to the appropriate anchor using JS after its done injecting content.
I want to display an icon that indicates whether or not a visitor to a homepage with a feed of articles has already seen an item or not. So, for example, if you went to the homepage for the first time, all articles in the feed would have an icon that said "NEW". Then, if you navigated away from the homepage and came back, only the new articles since your last visit would have the icon, and all others would have disappeared.
I'm using Rails 4, but it seems like this should be pretty easy to do on the client side with Jquery/javascript using cookies or localStorage.
What's a good solution for this?
For reference, I have a page that displays a feed of articles, each with a unique id as shown below. I'd like to have a class such as new-item that would be removed from all seen elements when the page unloads and persist (until the user clears the local storage or the cookie expires). So, in the example below, the first two items would have a "new" tag, whereas the second two were previously seen, and the tag has been hidden.
<ol>
<li class="article" id="article-articleA" data-id="articleA">
<p class="article-content new-item"><i class="material-icons">star</i>NEW</p>
...
<li>
<li class="article" id="article-articleB" data-id="articleB">
<p class="article-content new-item"><i class="material-icons">star</i>NEW</p>
...
<li>
<li class="article" id="article-articleC" data-id="articleC">
<p class="article-content" style="display: none;"><i class="material-icons">star</i>NEW</p>
...
<li>
<li class="article" id="article-articleD" data-id="articleD">
<p class="article-content" style="display: none;"><i class="material-icons">star</i>NEW</p>
...
<li>
</ol>
im losing it here. I working on this site and the menu link to differents anchors.. If im on another page the anchor link work properly but if im in the same page (home) do not work more than once.
I double check the urls and i think they are ok.
The live url is greencleansteamwash.com
The anchor links are Benefits, Services and Appointments
My code is something like this
<section id="benefits">
Content of benefits
</section>
<section id="plans">
Content of plans
</section>
<div id="book">
Content of booking
</section>
<ul class="nav-offcanvas">
<li>Benefits</li>
<li>Services</li>
<li>Appointments</li>
</ul>
Delete the whole URL from the links, just leave the # part.
<li>Benefits</li>
<li>Services</li>
<li>Appointments</li>
I have a page index.php with 3 Bootstrap tabs in it, and for each tab I am generating its content after user clicks on it.
For example:
when page is loaded I will execute SQL query that will get data from database only for first tab.
when user clicks on the second tab, I am executing a query that will take data and display it in selected tab.
Is this good approach? Is Google going too see all that data when it index the page containing all this tabs? I do not want to pull all data at once because of performance issues.
Here is my sample code, so please tell me if this is a good approach:
index.php file:
<!DOCTYPE html>
<html>
<head>
<title>Tabs demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<?php $model = [
0 => ['title' => 'First item', 'content' => 'Some first content'],
1 => ['title' => 'Second item', 'content' => 'Some second content']
]; ?>
<?php foreach ($model as $data): ?>
<h3><?= $data['title'] ?></h3>
<p><?= $data['content'] ?></p>
<?php endforeach ?>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
I am afraid that search engines will not see second and third tabs contents. Or at least they will not relate them with index.php page. Am I wrong?
No, we (Google) won't see the content behind tabs iff the content under the tab is dynamically generated (i.e. not just hidden).
You can also see what we "see" using Fetch as Google in Search Console (former Webmaster Tools); read more about the feature in our post titled Rendering pages with Fetch as Google.
The best aproach is to design the website to work without javascript, and just replace all your anchor elements that work with ajax to pass a GET variable to your web controller, so it knows to return just the html to be inserted with javascript.
If you are using JS/AJAX, (I don't really see any, but I can't think of a better alternative) you are going to have a hard time getting Google to index your pages. Google has a good documentation on this that has helped me in the past on projects with similar goals.
https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
Is it really that big of a deal to not load the content until the tab is clicked? Unless you are working with an un-cacheable constantly updating database and massive HTML output that would create a long flash of unstyled content I would say splitting the tabs view code is somewhat trivial.
Maybe this can help:
If your problem is performance, it's maybe because you have strong DB queries or a shared server. If not, please ignore this.
When loading the whole page, put a "fake" HTML code in each tab. Try to build the HTML code shaped as the real code that is loaded when each tab is clicked. Put all of this inside an invisible DIV. Each time the page is loaded, put also some random data (maybe a 16-chars random-generated string). In this way I think Google will spider your data more frequently (this doesn't happen for static content).
Regards.
I'm using Bootstrap's nav-tabs with the following setup:
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
Home
</form>
</div>
</div>
As you can see, I have a link in my profile tab, which links to the first tab. Clicking on the anchor does change the URL in the URL bar, however it doesn't jump to the specific tab.
I then noticed that it is generally not possible to link to a tab directly, so I added the following code from Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
Now I can link to a specific tab from somewhere else, but not, if I'm on the same page where the nav-bar is. Reloading the page would then jump to the wanted tab, so I thought I could just forcefully reload the page, with the solution from Javascript: How to truly reload a site with an anchor tag?:
window.location.reload(true);
This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the home tab, when clicked on the anchor.
Thus, how would I jump to a given id from another tab?
You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascript for this.
First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">.. then add a link to your second tab:
<div class="tab-pane fade" id="profile">
<form id="tab2">
Jump to home tab (this works)
...
and add the following in your document ready:
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
Working example at jsFiddle.
The given answer
$('#myTab a[href="#home"]').tab('show');
can also be used to make a JavaScript software jump to a specific tab.
Assume you want to jump to a specific tab on start by using the url:
http://myDomain/myApp#tabSomewhere
You can imagine that will work (you need to make some additional coding).
Suppose your First page is on the tabHome (you make that active with the 'active' class. When you try to go back to that page using javascript you have to remove the active class from the tabHome using:
$('li').removeClass('active');