I tried including the 'tab.html' and ‘content.html’ into my 'index.html' (using w3school code: how to include HTML, found at: https://www.w3schools.com/howto/howto_html_include.asp), but the javascript and css elements do not work. The buttons don't work as intended. Look at:
https://rads-198409.appspot.com
If you resize (to a smaller size) the browser window, the tab is supposed to change to a drop-down menu, but the button does not work at all. I have checked the individual pages and they seem to work just fine, just not when they are combined.
Am I doing something wrong? Could someone help? All the code I used is from w3school and I have only modified the file names (tab.html and content.html to point to the right files). Below are links to the code:
Code for ‘tab.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Code for ‘content.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol
Code for ‘index.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2
This is why:
The links take you nowhere. #home (or # then whatever) is referring to an element in the page. This means that the link doesn't actually take you anywhere, unless you actually change the link to something else.
You're using a w3schools template. Come on, man!
Explanation on #1:
Say there was a footer at the bottom of a page, named "footer". To jump to that element, all you have to do is put #footer at the end of the url, and your browser will jump your screen to the bottom. Similarly, the #home hash means that it goes to a place where an element called home is. In this case, that's the top. The other buttons though, refer to different elements. The problem is that these elements don't exist in the template. To make them work, you must change the url to a real working url, or create elements with ids such as "news", "contacts", and such.
Related
I have a html document loaded in an iframe on a website.
The document has a table of contents and clicking on any of the links jumps to the appropriate part of the document.
Navigation is supposed to work from a sidebar that is specified by a separate XML.
Adding a link to said XML displays the HTML in the iframe:
href="source_folder/file.html"
Issue is, when I try to add a link to a specific section, like href="source_folder/file.html#_Toc0123" it just jumps back to the top of the HTML.
In the usual use-case, the sections are all separate HTML files, and get linked in the corresponding XML. Issue being I don't want to go through the hassle of separating multiple large files into individual HTMLs.
Any idea on what I'm missing? Or is this simply not possible?
(I didn't build the original site, but if there is an attribute that governs it, feel free to let me know where to look for it)
Thanks!
I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!
I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");
Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.
When I go to the JSFiddle embedded full screen view (<url of fiddle>/embedded/result), there is always a bar at the top with JSFiddle on it, as shown here with where it says result:
Is there a way to remove this bar from the view?
Note:
You can also access this view by going to URL <url of fiddle>/show.
Before you read, please note that jsfiddle is a nice site and they do this so that people can't just use them for hosting and then embed their links.
Consider that before removing all their branding - don't be a jerk.
I don't know if they've changed this since Noel's answer, but it still shows the bar at the top for me.
It can still be done though.
Example:
https://fiddle.jshell.net/vmt32w4d/11/show/
The trick is to find the source of the iframe which is on fiddle.jshell.net as Noel suggests.
They keep this on a separate origin to give you a cross-origin exception if you try to access elements outside of the iframe.
This is no problem, just link to that instead and add the following code:
$("header",window.parent.document).remove();
$("#tabs",window.parent.document).css({
'margin-top':'0px',
'height':'100vh'
});
$("#result",window.parent.document).css({
'margin-top':'0px',
'height':'100vh'
});
I included the jquery library for this to work - otherwise you could just edit the code to alter the css using vanilla JS.
There may be a better way to alter the css or whatever, but now you know how to do so 🙂
The embedded fiddle is just an iframe within another iframe. You can take the source from the child iframe and replace the parent one with it.
Starting from the */embedded/result url like in the image.
Inspect the parent iFrame with Dev Tools.
Copy the child iFrame source link (looks like '/fiddle.jshell.net/blah/blah/show/light/').
Replace the parent embed source link with the copied one.
That should do it. Worked for me.
I have in my webpage, several anchors (i.e. <a name="my-magical-anchor"></a>) scattered along the page. I additionally have several links on my page which point to these anchors (i.e. Go to the Magical Anchor). For when the page is printed, I was wondering if it would be possible to modify the text of the link, using CSS or JavaScript, to read something like Go to the Magical Anchor (page 12) to indicate the page number the reader should flip to in the printed document.
I would like to, if possible, not have to manually assign page breaks, but instead have my content flow across the pages and then update the link text before printing.
Thanks.
Look at this article and go down to the section titled, "Cross-References": http://www.alistapart.com/articles/boom
The suggestion is to use target-counter, targeting the page counter, using the href attribute as the target link.
a.magical::after {
content: "(page" target-counter(attr(href), page) ")"
}
The whole article is recommended too. Hat tip to Nathan Kot who linked to it.
given up tearing my hair out, can anyone help?
I'm trying to get the active page to apply a separate style, in the example same as when you click on test1 ie have the dark background hen on the homepage or about us.
http://www.tait-design.com/devsites/test-nav/index.asp
the main pages don't go anywhere ie test1 but the page test1-1 and test2-1 do as examples
I think the issue will lie in the js
http://www.tait-design.com/devsites/test-nav/js/accordion.js
and maybe the css (can't put the full url in)
/css/black.css
I've made a couple of the classes different colors on the text to help identify
I've picked up someone else's work I suspect it's a template site, which has been altered, the left nav wasn't done as an include so each page had a seperate markup to make the active page ...look active. I've changed this to asp just for the includes to work off my site, it will be php though.
This can be done purely in CSS, no Javascript is required.
First, give unique classes to each of the body tags on your pages.
For instance, on the home page it would be something like <body
class="home">.
Then give the anchor tag of the matching link the same class (ie, - see that I've added a
second class to the link).
Now you can specifically style that link in CSS when it's the active
page:
body.home #menu-1 a.home {
// whatever styling you like
}