Link to tab from different page - javascript

We are working on a Bootstrap website to present our schoolwork. I have a fair understanding of the used html code, but I am having one problem.
To link to a specific tab/section within a page this link is used:
href="#tab"
I have copied the original index.html and thus created a second webpage. I'm able to link to this page using:
href="page2.html"
But I'm not able to link directly to a tab/section on that second page. I tried using href="page2.html/#tab" or "page2.html#tab" etc. But it doesn't work yet, I think I miss some fundamental knowledge about this coding.
Could anyone explain me how to get this working, in 'normal' language. There are several (older) solutions, but can't get them to work in the javascript files.

This should help...
http://codepen.io/mattsince87/pen/exByn
LINK -> <a id="link1" class="nav-section1" href="#section1">S1. Info</a>
Content -> <h1 id="section1">1. Info</h1>

You can use something like this as i have this thing running in my project. these will check the page if it contains the tabs then it will take the last value from the url of the page2 and will make it visible.
if($("#tabs").length)
{
var id = window.location.hash.substr(1);
$('#tabs a[href="#'+id+'"]').tab('show');
}

Related

How to show content of section and display it when click menu

I write 4 sections pages in index html page and i want link the sections page with the menu.
How can I show the content of section when click at each menu?
I use ready website from bootstrap and edit it and I use atom program.
What i should to write at page html or at javascript?
Below is my code:
I concur with NewtoJS you should post a code snippet instead of an image, and you are asking at least 3 questions any way I will try to help
1.- I want link the sections page with the menu?
you can do so using The HTML < a> tag that defines a hyperlink, which is used to link from one page to another.
2.- how to show content of section when click at each menu?
this can have many different aproaches but since you tagged the question with html I will try to answer acordingly. Each section should have its own html file, or and "ID" if they are in the same page when you click on a < a> tag refering to that page or "ID" it will lead to that section.
3.- what i should to write at page html or at javascript ?
of course a web site can be done without using Javascript it is easy but you need to use CSS as well for styling purposes. Generally you can't choose just one, you have to use both and depending on your needs could be more from one than the other. please refer to this site for a complete documentation on HTML
and you can read about javascript here, if you want to learn CSS please refer to this page.
a side comment:
for a complete documentation on how to use html < a> tags please refer to this >site
I will suget not to use POOPSTRAP, and you should try to work with wordpress or something like that if you dont know how to code, and if you want to learn to code starting in stackoverflow is a bad aproach, you should first take a free course on udemy.

Changing Link URL of existing <a class> using JS or otherwise

I'm using a plugin on my site to enable quiz functionality. When a lesson/quiz has been completed by a user there is a popup that features a button with a link back to another page. The problem I have is that I need to change this link.
This is what console looks like:
View Console
I need to be able to edit the href link shown here so that I can redirect users to the correct page. Firstly I need to know if this is possible and secondly how I could go about implementing this change.
I'm presuming it can be achieved with JS, but my knowledge of JS is limited so I'm unsure about the execution.
You can change attribute href as simple as any other attribute:
$('a.gdlr-lms-button').attr('href', 'new-url');
With jquery you can do it like this.
Where test the classname is so just replace that by gdlr-lms-button
$('a.test').attr('href', 'www.google.be');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='test' href="www.facebook.com">Hello</a>

Putting social buttons on all webpages using 1 single code

jsfidllde
I am trying to get the lazy load effect of social buttons through socialite.js. Everything is fine, but the +1s, likes, tweet counter is for socialite.com and not my website. For example, this code gives socialite.com a "like":
<li>
<a href="http://www.facebook.com/sharer.php?u=http://www.socialitejs.com&t=Socialite.js"
class="socialite facebook-like" data-href="http://socialitejs.com" data-send="false"
data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow"
target="_blank"><span class="vhidden">Share on Facebook</span></a>
</li>
I want it to be for my page. Manually changing http://socialitejs.com to mywebsite.com for each and every different page is too tiresome.
I believe there is a trick to do this with javascript and replacing href with expr:share_url='data:post.url', however this is not working as the code has many other attributes apart from href. Can anyone help me please. Thanks a ton.
When you add the element in which you'll invoke socialite.js:
<a class="socialite twitter-share" href="http://twitter.com/share" data-url="http://socialitejs.com">
Share on Twitter
</a>
You're supposed to replace the value at data-url for your website URL. Then the generated elements will point to your website.
If you, by mistake, already included the wrong URL in many places - and feel it's easier to correct it with JavaScript instead of doing search-and-replace in a bunch of files - then I suggest running this jQuery line before calling Socialite.load():
$('[data-url]').attr('data-url', 'mywebsite.com');

Changing div content via jquery with another html file's content

To begin, I have spent the last few hours browsing stackoverflow on related topics. Many of them seemed very similar to the issue I'm having, there was even a couple that resembled mine almost perfectly. However, the fixes that worked for them do not seem to be working for me. I think it would be best for me to post my code and have others look them over; I will try to be as detailed as possible.
What I'm trying to do:
I have a page setup with links inside li's, and when it is clicked, it is supposed to pull some html content from another page I made. More specifically, it is supposed to pull out the html content from a specific div id in that page. I am having trouble pulling anything out from it, and having it posted to my main pages div.
My HTML part with the navigation menu:
<ul id="nav_main">
<li class="navLink">link here</li>
</ul>
The div that is supposed to change dynamically (on click) is labeled as this:
<div id="main_content">
<p></p>
</div>
The other .html file that I pull data from has a div that looks like this:
<div id="one">blahbalhblahblahlbhalbhlah</div>
The part I am having difficulty with is the javascript code. I have tried using load and get, and neither seem to be working. Here is my skeleton code:
$(document).ready(function(){
$("#nav_main li").on("click", function() {
// here was my first attempt:
$("#main_content p").load("contentholder.html #one");
// my second attempt, using get():
$.get("contentholder.html", function(data) {
$("#main_content p").html(data)
});
});
My problem with this is that the #main_content doesn't seem to be changing. I think the problem is that the load and get attempts aren't working, they don't seem to be pulling the data out as it's supposed to.
All these files are on my local drive. Any help would be greatly appreciated
$(document).ready(function(){
// your code here
});
You are missing the function(){
In addition to your syntax errors pointed out by Brad M, keep in mind that most browsers prevent AJAX calls if they aren't made from a server, so if you aren't running a localhost, you will most likely get an Access-Control-Allow-Origin error when making the AJAX call.
See more info here: Get HTML code of a local HTML file in Javascript

What is the best way to populate container with data from link?

I have not been able to wrap my brain around how to call information from a link (In my domain) to populate a sidebar container that I wish to show other sources for the same information.
It would look much like a "related news", but would not be automated and instead use links that are included in code that calls it from either clicking the link (most likely), or having it loaded after the link is loaded in to an Iframe.
The site is built around CSS, but I assume I will need javascript to accomplish this task. Am I going about this the correct way or should I look at the problem from a different angle?
Here is a basic example. When you click the link the jQuery will load content.html into "xyz" div.
HTML...
<a id="abc" href="#">Load Info</a>
<div id="xyz"></div>
jQuery...
$('#abc').click(function() {
$('#xyz').load('content.html');
});
Here is a demo where I used the html() function instead but it's the same basic idea...
Demo: http://jsfiddle.net/wdm954/JBWxr/1/

Categories