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");
});
Related
I want my dropdown menu header to both open the related menu and show directly the content of the first element of the submenu which is actually an anchor link in the page.
Here is the HTML code of the Dropdown Menu:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
Menu
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
</ul>
</div>
This is the HTML code of the anchored link:
<div id="myNavbar" class="tab-content">
<div class="tab-pane fade" id="submenu1">
<p>submenu1</p>
</div>
</div>
And this is the JS code I'm trying to use with no success. It works if I write a whole URL like "www.google.com" but not with "#submenu1".
$(document).ready(function() {
$('.dropdown').on('click', function () {
window.location="#submenu1";
});
});
you can try with
location.hash=anchorname
location.hash = "Submenu15";
var x = "The anchor " + location.hash;
document.getElementById("demo").innerHTML = x;
fiddle link http://jsfiddle.net/420rL0h2/
Try using the window.location.hash instead?
window.location.hash=anchorname;
Edit
You're using Twitter bootstrap right? The tabs won't be visible until the active class is added, and since you have a fade class too, I think you'll also need the 'in' class... Try this JS:
$('.dropdown').on('click', function () {
// Remove any active classes from the tabs
$('.tab-pane').removeClass('active in');
// Set the specific #submenu1 to be active
$('#submenu1').addClass('active in');
// Scroll the window down to the tabs that are now visible
window.location.href="#submenu1";
});
I'm not entirely sure what you're trying to achieve though, the links in the dropdown should do the displaying for you... but if you're just trying to force a specific tab to be open when you first click the nav dropdown, then this should do the trick.
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 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');
I have a HTML drop down menu which works fine, but it is completely static.
ie. the items within the menu are manually entered to match the links on the main header page
eg.
<li><a class="tab" href="http://">INTERNAL</a>
<ul>
<li>Internal docs</li>
<li>SQL</li>
<li>Downloadables</li>
</ul>
</li>
The menu is made up of the 3 links for sections which reside within the INTERNAL page.
If I add any sections to the INTERNAL page I have to manually amend my menu to reflect this, but I would like this item to be added automatically if I add a new page
Can this be done?
I hope so!
**EDIT:
To be clearer on this issue; I have the following html:
<div id="category_2232" class="category">
<div class="column" id="forum_259962">
<h3 class="clearfix"><span>Internal KB Documents</span></h3>
</div>
<div class="column" id="forum_20160368">
<h3 class="clearfix"><span>Downloadable Extras</span></h3>
</div>
<div class="column" id="forum_20632406">
<h3 class="clearfix"><span>SQL Scripts</span></h3>
</div>
</div>
which I use as a guide for creating my menu, which takes the form:
<li><a class="tab" href="http://">INTERNAL</a>
<ul>
<li>Internal KB Documents</li>
<li>Downloadable Extras</li>
<li>SQL Scripts</li>
</ul>
</li>
I would like to take the first code, and whenever I add a new <div>, I want a corresponding <li> entry on the menu to be updated automatically.
Please help!
Im sooo sure I could do this!
There has to be some JS somewhere that can generate menu items....
Many thanks to all involved so far
Howie
When the DOM is ready, find your list items and use the text of the anchors to create option elements which you can append to the select. It will make querying the DOM much easier if you add some ID's to your markup.
Working Demo
jQuery
$(function () {
var select = $('#internal-select');
var items = $('#internal-list li a').each(function () {
var text = $(this).text();
select.append('<option value="' + text + '">' + text + '</option>');
});
});
HTML
<li><a class="tab" href="http://">INTERNAL</a>
<ul id="internal-list">
<li> Internal docs</li>
<li>SQL</li>
<li>Downloadables</li>
</ul>
</li>
<select id="internal-select"></select>
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.