the question on the assignment asks to insert a command to write the HTML code
to the webpage where weekday is the text string returned by the weekDay() function.
The iframe should display the daily schedules that are stored in the sunday.htm through saturday.htm file.
The weekDay() function is located in an external .js file that I have already linked to my webpage.
Another thing is there is no weekday.htm file instead there are files sunday.htm through saturday.htm that have the daily schedules to de displayed in the iframe.
I know that I should some link the weekday.htm file to the weekDay() function. This is what I have done so far:
<h2 id="title">Today at the Union</h2>
<p>
<script type="text/javascript">
/*
Dispaly the daily schedule in an inline frame.
Display schedules are stored in the files
sunday.htm through saturday.htm
*/
<iframe src='weekday.htm'>
var weekday = weekDay();
document.write(weekday);
</iframe>
</script>
</p>
Please advice as to how to get this thing working. I am not an expert( I am still learning.) I tried my best (spent several hours breaking my head on this). So any help is much appreciated.
Thank you for your time
Do not put HTML code inside of a <script> tag. Generally only JavaScript code is allowed there.
Also anything inside of an <iframe> tag usually gets ignored by the browser (only displayed when the browser doesn't support iframes). So it doesn't make sense to put important things there.
Instead you should separate those tags. In your case you probably want to place the <iframe> tag previous to the <script> tag so that the iframe already exists when the script runs. Then in the script you need to get a reference to the iframe in order to set its src attribute to the correct url.
Related
Is it possible to manipulate more than one HTML file in the same script?
For example, i have a <div id="div1"> on my index.html, and <div id="div2"> in another HTML file inside of another folder.
What i trying to do is get the content of the second div and replace to my "div1", but the "traditional way" doesnt work:
function replaceDiv(){
let div1 = document.querySelector('#div1')
let div2 = document.querySelector('#div2')
div1.innerHTML = div2
}
I'm new to programming, sorry if this is a dumb/obvious question haha
ps: both files have the link for the same script.
ps²: i know that i can manually write the string with innerHTML, but i wanna know if it's possible to do this
Why this doesn't work
The document object in JavaScript is representative of the currently rendered page's content, it can only exist when the page that loads this script is actively being rendered.
A web browser can only render one HTML file at a time (e.g. either index.html or other.html). Say #div1 is in index.html and #div2 is in other.html; the script can only see that one of these div elements exists since the document is scoped to the current page.
This is the same reason that you can reuse ids across multiple HTML files on the same website with no unexpected behavior.
Alternate Solution
Store this data (InnerHTML/the snippet needs to be shared) in the script itself since that can be requested on each page individually.
While reading the User Guide for Embedding Bokeh content, specifically "Autoload Scripts" here: https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#autoload-scripts
The suggestion is to use the bokeh.embed.autoload_static() function to generate a .js file and a <script> tag to embed it into an HTML document.
As the documentation states,
The script tag should be included in the HTML page wherever you wish to load the plot.
This works as intended. However, there is an additional note that makes no sense to me:
Note: The <script> tag loads a <div> in place, so it must be placed under <head>.
This seems contradictory to the previous instruction which asks you to place the <script> tag where we wish the plot to be loaded, and therefore somewhere under <body>. Placing this tag under <head> does nothing and does not load the plot at all.
Have I misunderstood this note? What is it actually trying to tell me?
It is a typo, it should indeed be <body>. I've created https://github.com/bokeh/bokeh/issues/10484
I am looking to implement a chat script into my site and I need to have the div attribute data-channel changed to a random string before the script loads on my page. I cannot seem to get this to work I think due to browser security. I have tried creating and appending with document.createElement("script") and document.createElement("div") with a random string being passed into the data-channel= attribute. Not sure how to proceed and would appreciate any insight. here is what the script should look like when it runs https://jsfiddle.net/2g71a9pq/1/ and it should initiate a random channel up top. the full script and div code also below. Thanks!
<div id="tlkio" data-channel="randomstringhere" data-theme="theme--night" style="width:100%;height:400px;">
<script async src="https://tlk.io/embed.js" type="text/javascript"></script>
this is probably a very basic question, but my googling resulted in irrelevant results.
I want to be able to provide a 2 lines widget for clients, for example, for every video at Youtube you can get the "embed" line for it, you copy paste it to your web page and as a result you have the video on your page, example:
<iframe width="420" height="315" src="https://www.youtube.com/embed/_6mkqolyvVE" frameborder="0" allowfullscreen</iframe>
another example is the google's + "+1" button :
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
My general question is what is going on behind the scenes when a client has these lines in his page?
My specific question is, if I want to provide a 2 lined widget (a
<script>
line and a
<div>
line) how do I pass my javascript file to the web client in a way that the browser will know to treat it as a file it should evaluate and execute?
Thanks, and sorry for the messy question.
Jimmy.
When you have a <script> tag, then the browser will handle the content as a script. You can define the content inside the start and the end of the script, like this:
<script>
//your code
</script>
Or you can specify the location where the script file can be found with the src attribute, like this:
<script src="http://yourdomain/yourfile.js"></script>
I think you are asking how to create web widgets that dynamically create DOM elements. embedded youtube and google +1 are widgets. an Iframe is just one approach to create a widget.
For moreore information on widgets- http://www.techfounder.net/2010/02/05/creating-embedabble-widgets/
I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
I tried using this but it did not work.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
Thanks
Q1 : I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
-Yes you can load javascript any where you want, if writing inline code then make sure you add script tag around your code.
-also you can request files like in body
Q2: Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
-- no problem in that, thats even better practice.
Q3 Requesting external file
to request external files you write below written fashion
<script src="http://file_name.js" type="text/javascript"></script>
It's not only possible (ref), it's frequently a good idea.
Putting your scripts as late in the page as possible, which frequently means just before the closing </body> tag, means the browser can parse and display your content before stopping to go download your JavaScript file(s) (if external) and fire up the JavaScript interpreter to run the script (inline or external).
Putting scripts "at the bottom" is a fairly standard recommendation for speeding up the apparent load time of your page.
Yes it is possible. Try and see.
For debugging, hardcode the jquery full path.
It is sometime recommended to load it at the end of the of the body, to make the main content of the page load faster.
Is it possible to load it in the section of the HTML.
Yes.
From the spec:
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
SCRIPT is among the elements that may be a child of the BODY elements. Numerous other elements may also have SCRIPT children.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
When I run echo base_url() I get my the hostname of my server. This would result in a URL such as example.comjs/query-1.5.1.min.js. You probably should drop that PHP snippet entirely and just use: src="/js/jquery-1.5.1.min.js" which would resolve to http://example.com/s/query-1.5.1.min.js.
Yahoo engineers recommendation for higher performance is to include your scripts at the end of your HTML, just before </body> tag. Therefore, it's even better.
To see where the problem is, you gotta first make sure that your js file is loading. User Firebug and go to scripts tab. Do you see your script? If not, then something is wrong with your path.
it should work...
Did you try to view the generated source and see if the PHP code indeed generated the right path?
beside that, it is recommended to load jQuery from a CDN such as google's :
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js