I have two html pages, when you click on something on the first html, it will go to the second one. What I want to do is to show text according to what you clicked on the first html. different texts are wrapped with different ids. Here's how I wrote:
I'm expecting to see two.html load the text with id "one", but it doesn't work, does anyone know what I did wrong?
Here's the code on second page:
<ul id="menu" class="aaa">
<li><a id="one" href="#">one</a></li>
<li><a id="two" href="#">two</a></li>
<li><a id="three" href="#">three</a></li>
</ul>
And I have a JS file to modify each id:
$("one").observe('click', function() {
$('Pic').writeAttribute('src',"picone.jpg");
$('Bio').update("texthere!");
});
Same for two and three.
Right now if I click on a button on the first page, it will always show
the text and pic for "one", no matter which button I click.
But I want to see the pic and text for "two" if i click on it.
What you want to do is simulate a click on your anchor when the page loads. Since you're using jQuery, the simplest approach (but far form best) would be the following:
$(window).observe('domready', function () {
$(location.hash).click();
});
attach ondomready-event to window. Fetch element with id=one (with jQuery this would be '#one', same as your location.hash would be, very handy in this case), trigger a click on it.
You might need to replace $(location.hash).click(); with $(location.hash).get(0).click() since jQuery tend to return arrays of jQuery-objects.
But a better solution in your case would be to have an event-handler that you can trigger manually, thus circumvent the need of firing events, aswell as drop the anchors and put onclick directly on your li's.
And furthermore, why do you load a second page when all you seem to want to do is to show/hide content dynamically? Do it on the same page...
the #blastuffbla is not an ID but the location hash.
You can acces it by using:
self.document.location.hash
which would return #hash, if you would only want hash you would use:
self.document.location.hash.substring(1)
Hope this helps
tags do not have id's but names to handle the anchors in Urls, you will still need the ID to manage them in JS though.
So your list should be:
<ul id="menu" class="aaa">
<li><a id="one" name="one" href="#">one</a></li>
<li><a id="two" name="two" href="#">two</a></li>
<li><a id="three" name="three" href="#">three</a></li></ul>
Your javascript seemed correct though.
When you say "different ids" how are you setting up your anchors on the 2nd page? The anchor on the 2nd page should look like this:
<a name='one'></a>
Put this right above the text that you want to mark on the 2nd page.
Do you want to scroll the page to the positon of the id "one"? Maybe the content of the page is too small that you cant scroll there. I mean sometimes the browser cant move the element marked with the id to the top of the canvas and looks like it doenst scrolled there. Try to include enough space after the element to make it scrollable to the top of the browser.
Hope that helps.
Related
I am trying to populate a textInput spacer with a text file's contents. The said text file needs to be selected via a hover menu, which I am using for the first time. The interface is easy enough to set up, but the mechanics of populating the text box are trickier than I expected. I am probably missing something really simple because I am a rookie in this area.
Here is an example:-
<li><a>Jul 15, 2018</a></li>
<script>
var currentBaseValue;
$("#selectedBaseRelease").load("location_of_some_file", function() {
loadbaseText(currentBaseValue);
});
</script>
A bigger picture is here, which includes the loadbaseText function, among other things:-
https://jsfiddle.net/kehliah/z6y87x35/10/
Notice in the JS Fiddle example how two menu options under SP1-T simply point to remote web pages of pure text. (This is for example purposes only.) If I can get the two different loads to work, I can make appropriate edits on my end to point to files within my company's firewall/domain.
What am I missing? How can I get the contents of either SP1-T option to appear in the text box?
Looking at your jsfiddle, I could not find where you were actually calling any of your functions when clicking the <li> elements, this is made harder by the fact that all of your CSS, HTML, and JQuery are all together.
Anyway, here is one way of doing what you requested using JQuery. At the moment, which ever <li> element you click on replaces the textarea text with the text of that <li> element.
function populateTextArea(element) {
$("#baseText").text($(element).text());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a onclick="populateTextArea(this);">Aug 30, 2018</a></li>
<li><a onclick="populateTextArea(this);">Jul 15, 2018</a></li>
</ul>
<textarea id="baseText"></textarea>
Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
About
Questions
Tutorials
Social
I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?
EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});
which did nothing at all.
also, I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for
This is jQuery so make sure you have a script tag linked to jQuery!
HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
// Onclick function
$('.Navigation').click(function () {
// this.id = to the ID of the element being clicked
$('#PageData').load(this.id+".html");
});
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.
Example a button with the id of cars will try load cars.html
I hope this helps. Happy coding! :)
WORKING DEMO!
I have a set of DIVs, which I am displaying via Colorbox.
It works fine as below
$(".my_group").colorbox({rel:'my_group', inline:true, href:$(this).attr('href')});
Now I want to kick off colorbox as soon as the page is open, so I tried
$.fn.colorbox({rel:'my_group', inline:true, href:$('.my_group').attr('href')});
Which doesn't work. I also tried
$.fn.colorbox({rel:'my_group', inline:true, href:'#box1'});
Where #box1 is the first div of the group. However, it actually ADDS box1 as another inline slide in the group.
So what's the best way to start the group transition colorbox automatically?
To open colorbox automatically (on page load), just add open:true to your settings. Also, the grouping with the 'rel' doesn't necessarily need to be in the options. If you leave it out, it will allow you to put all your colorbox groups in one call. Also, if your target elements already have an href attribute, you don't need to put that in the options (colorbox looks for this attribute automatically, even on divs and whatnot). So, your colorbox call could look like this:
$(".cbox").colorbox({inline:true, open:true});
And then this html:
<a class="cbox" href="#C" rel="my_2group">C</a>
<a class="cbox" href="#D" rel="my_2group">D</a>
<a class="cbox" href="#A" rel="my_group">A</a>
<a class="cbox" href="#B" rel="my_group">B</a>
Will give you 2 seperate colorboxes each with 2 images, and the first group will open when the page is loaded.
Note that combining them all in one colorbox call only works when you can ensure that the group you want to open is the highest up in the dom (which is usually not a problem, as inline content is usually hidden). If that's not the case, then you will have to split it into a couple calls.
Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?
You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!
Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.
The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.
I've created a dynamic page that, depending on the view type, will sometimes utilize the anchor tags and other times not. Essentially, I want to be able to control if on click the page jumps to the anchor. Is it possible to hide anchor tags using jQUery, so they are essentially removed? I need to be able to re-enable the anchors when necessary, and always show the current anchor in the browser's address bar. It seems to work in FireFox, but not in Internet Explorer.
I have three sections: the 'table of contents', the content, and the javascript (jQuery) code
Table of Contents
<a id="expandLink0" class="expandLinksList" href="#green">What is green purchasing</a><br>
<a id="expandLink1" class="expandLinksList" href="#before">Before you buy</a><br>
Contents
<ul id="makeIntoSlideshowUL">'
<li id="slideNumber0" class="slideShowSlide">
<a name="green"></a>
<div>Green Purchasing refers to the procurement of products and service...Back to Top</div>
</li>
<li id="slideNumber1" class="slideShowSlide">
<a name="before"></a>
<div>We easily accomplish the first four bullet points under...Back to Top</div>
</li>
</ul>
jQuery On Page Load
$(".slideShowSlide").each(function() {
$(this).children(":first-child").hide();
});
jQuery to re-enable links
$(".slideShowSlide").each(function() {
$(this).children(":first-child").show();
});
I've also tried prepending an extra character to all anchor names to 'disable' them, but IE won't change the names using attr("name"). The only real manipulation it's letting me do is remove().
Try doing it this way:
$(".slideShowSlide").each(function() {
$(this).children().first().hide();
});
Or even this way:
$(".slideShowSlide").each(function() {
$(this).children(':first').hide();
});