Using javascript for an off-server page-dynamic links - javascript

I have the HTML and CSS down the pat, but I'm needing some javascript to tie this all together.
I have a page 'static.html' that does not exist on a server, but rather a local filesystem.
This file has a div layout with 2 lists of names/titles/etc. along with a CSS stylesheet to style all the static pages.
The page also uses an inline media player. These pages are designed to be used offline, off-server, and thus have very limited functionality.
I would like to change the lists to a href= links to other static pages, however not all the titles/names in the list have pages currently, or may not need them.
Is there a way that I can use some javascript to check if the href="./linkedpage.html" exists and then turn on/off the link on page load.
I can create one parent page that references 30 other pages, and as I add the new pages, the links can become active within the parent.
Ideally, this script can be loaded on every page to check the links' source to be present or not, and enable/disable the anchor tag.
Thanks a bunch,
-Tim
EDIT: PS. the href links will be images and text.
Edit: Working progress Code:
<html>
<head>
<script>
function checkLink(someLink)
{
var tmp=new Image;
tmp.src=someLink;
if(tmp.complete)
{window.open(someLink,"_self");}
else
{return 0;}
}
</script>
</head>
<body>
Title 1
Title 2
</body>
</html>
I have a page1.html in the same directory, but no page2.html...both links return 0. Debugger returns "Error: Incorrect contents fetched, please reload."
Revised, for testing...
<html>
<head>
<script>
function checkLink(someLink)
{
var tmp=new Image;
tmp.src=someLink;
if(tmp.complete)
{window.open(someLink,"_self");}
else
{return 0;}
}
</script>
</head>
<body>
Title 1
Title 2
</body>
</html>
Now it does nothing.

Related

Have a parent's page title tag be used as the title tag for all children

I'm working on a large website project and we have a default layout, which contains a <title> My Title </title> tag that is used on all other pages.
How can I keep that title until I get to a specific page where I would like it to change to <title> Other Title - My Title </title> for the current page and all children of that page without having to edit each child page manually?
Thank you in advance!
EDIT
I have a layout page that I want to override for a certain subset of pages (which are all children of a particular page)
It's been a while since I've done anything in razor but this might work. In your main layout file, e.g. Index.cshtml you could add a #helper to streamline the formatting, e.g.:
#helper formatTitle(string subtitle) {
#if (!string.IsNullOrEmpty(subtitle)) {
#:<title>subtitle - My Title</title>
} else {
#:<title>My Title</title>
}
}
<html>
<head>
#formatTitle(Model.Subtitle)
...
</head>
...
</html>
Then just make sure you set the Model.Subtitle value for each page where you want the subtitle to display in front of the site title.

Executing an external script via Javascript rather than <script src="external.aspx">

1) Here is what works just fine:
SearchTool.aspx (in the code snippet below) is a 3rd party product that will actually insert an iframe into the page at page load time with the search tool inside of it.
<html>
<head>....</head>
<body>
...
...
<h2>Search Tool</h2>
<script type='' src='http://foo.com/SearchTool.aspx</script>
...
</body>
</html>
2) Here is what I want to do:
I want my page to load quickly without the search tool being loaded at the same time. The user can read through my page and then, if they want, they can click on a button to load the search tool thereby delaying the tool load time to when they want it.
I want to be able to invoke the SearchTool.aspx from the click of a button as below, but I don't know what the code would look like in the showSearch() function below:
<h2>Search Tool</h2>
<script type='text/javascript'>
function showSearch(){
**** What would go here? *****
}
</script>
<input .....="" onclick="showSearch();"></input>
3) I have already explored creating the iframe manually:
In the code snippet #1 above that works just fine, if I do a view source and then create an iframe exactly like they do with all of the same properties, the Search Tool doesn't completely work properly. Weird I know, but true. So this is NOT an option.
Wrap your script tag in a div with the style display:none to hide it:
<h2>Search Tool</h2>
<div id="searchTool" style="display:none">
<script type='' src='http://foo.com/SearchTool.aspx</script>
</div>
...
Then, in your function, just show it :
function showSearch(){
document.getElementById("searchTool").style.display = 'block';
}

Avoid GET of all contents of the HTML DOM

Context
I have a HTML5+CSS+JS slideshow designed to be synchronized between 50 clients in a domestic LAN with one wireless router.
Problem
Since the contents of the slides (mainly pictures) may be too heavy, I want to load them dynamically for each slide (e.g. as the client clicks a "next" button), since currently the site GETs all the files for every slide from the server at the beginning when the page is loaded, overloading the router.
In this question (another approach for the same problem) an user suggested me using AJAX to get only the DOM and then loading its contents dynamically. Nevertheless, his solution doesn't work for me, as the contents are loaded before the moment I want to.
Is this AJAX based approach correct? If so, what may I be doing wrong?
My code
slideshow.html (slideshow structure)
<html>
<head>
<title>My Slideshow</title>
<script src="javascripts/slidesplayer.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div id="slides-containter">
<div class="slide" id="slide_1">
<!--Contents such as images, text, video and audio sources -->
</div>
<div class="slide" id="slide_2">
<!--Contents -->
</div>
<!--A bunch of slides here-->
</div>
<script>
// Here I load the slides calling a function defined in slidesplayer.js
</script>
</body>
</html>
slideshow-placeholder.html (loaded when I enter to the slideshow URL)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/path/to/ajaxSlidesScript.js"></script>
</head>
<body>
<h1>Hello slides!</h1>
</body>
</html>
ajaxSlidesScript.js
$(document).ready(function() {
$.ajax('/path/to/slideshow.html', {
async : false,
complete : function ajaxCallback(slidesDOM) {
// Pull out the individual slides from the slideshow HTML
$slides = $(slidesDOM.responseText).find('.slide');
// For each one ...
$slides.each(function prepareSlide() {
// Store a reference to the slide's contents
var $slideContent = $($(this).html()); // <--- GETs all the files for this slide which I want to avoid.
// Empty the contents and keep only the slide element itself
var $slideWrapper = $(this).empty();
// Attach to focus event handled by the slideware
$slideWrapper.appendTo('body').on('focus', function injectContent() {
// Put the content in — NOW external resources should be downloaded via GET and loaded, not before.
$slideWrapper.append($slideContent);
});
});
}
});
});
Update: This approach won't work, as manipulating DOM object will cause the download of the resources even if you don't insert them in the DOM. You can see what I did in this question.
Ajax is definitive the right technology for your problem but as far as I can see your problem is simple.
<script src="javascripts/slidesplayer.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css">
With this piece of code it doesn't matter if you use ajax or not because you load the CSS file already and all images referenced in this CSS file are load directly at the beginning. In addition you should load all files asynchronous.
You can add <img> tags via JavaScript and load the images asynchronous...

Javascript to rotate between pages within ONE HTML page

I would like some help displaying contents (to different pages) within one HTML page using JavaScript.
This is a sample of what I have found so far: http://www.swan10.nl/stuff/test.htm however instead of displaying "FAQ question #blabla" in the box every time a link is clicked, I would like to display words and images like a normal content. Is there a way to do this?
I tried removing the CreateDiv function and replacing it with HTML codes but it doesn't work.
Thank you in advance :)
Umm, well you would need to use AJAX to pull the data into the page and display it in whatever method you choose. If you want to use a framework look into JQuery. It has nice AJAX functions. Otherwise read HERE
After re-reading your post I think you might just want to choose which div is displayed on a form at one time. This you can achieve by placing all of your divs in the same container. Then toggle their display css property.
Using jQuery it's as simple as
$('#divname').load('/path/to/file.html');
Note that the result should probably not include <html> and <head> tags (although you don't seem like you care about well formed HTML code).
I should probably also mention that you shouldn't make the client load content for you, that's what server side code is for.
Personally I would use the innerHTML property on one of your elements. It will allow you to add markup to that element. Check it out here: http://www.w3schools.com/jsref/prop_html_innerhtml.asp
<html>
<head>
<title>Multiple DIV</title>
<style type="text/css">
DIV#db {
border : 1px solid blue;
width : 400px;
height : 400px;
}
</style>
<script type="text/javascript">
var Content = new Array();
Content[0] = '<i>test1</i>';
Content[1] = '<b>test2</b><br><img src =http://www.w3schools.com/images/w3schoolslogo.gif>';
Content[2] = '<u>test3</u>';
Content[3] = '<s>test4</s>';
function Toggle(IDS) {
document.getElementById('db').innerHTML = Content[IDS];
}
</script>
</head>
<body onLoad="Toggle(0,10)">
FAQ #1
FAQ #2
FAQ #3
FAQ #4
<p />
<div id="db"></div>
</body>
</html>
I updated it to work all javascripty with the innerHTML

Wikipedia-like references without JavaScript?

I have a blog with annotated references like [1] that.
[1]Jake Smith. http://example.com ..............
[2].............
I want it so the [1] in the text is an anchor that links to the [1] in the References. I know I could do this by doing something in the text like [1]and then making every list item in the references have an id, , that is, that is,
<ol>
<li id="ref1"></li>
...
</ol>
But that's a lot of work for me to go through all the blog posts. I'm sure I could make a JavaScript or jQuery function to add this functionality, but then it would not work with JavaScript disabled. So is there some other function I don't know? Like some fancy CSS trick, or should I just use JavaScript to do this?
What are your recommendations?
You could have the links inline so it displays normally when the user has JavaScript disabled. With JavaScript on, just style it as a Wikipedia reference.
Demo: http://jsfiddle.net/6A8nX/
Your options are:
A blog plugin that detects this in the content and forms the link and adds the related id to the appropriate element for you when the HTML is being output
A script that runs and does the same thing after the HTML has loaded.
Manually adding the links by hand.
A blog plugin is your best bet, since surely this is a solved problem (though it would depend on your blogging platform, of course).
CSS is for styling, it can't add links/ids.
In addition, remember that if you are ever going to display multiple blog posts on each page, you will want to add the blog id to the anchor as well. Instead of ref1, you'll want:
ref_[blogid]_[refid]
JavaScript and CSS are the way to go, if you cannot do this on the server side. The following will do what you want:
<html>
<head>
<style type="text/css">
ref {
display:none;
vertical-align:super;
font-size:small;
}
references {
display:block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
window.onload = function(){
$("references").append("<ol>");
$("ref").each(function(index) {
$("references").append("<li><a name=\"ref_"+(index+1)+"\">"+$(this).text()+"</a></li>");
$(this).html("["+(index+1)+"]");
$(this).css("display", "inline"); // hides references unless the script runs
});
$("references").append("</ol>");
}
</script>
</head>
<body>
<p>This is a reference.<ref>http://www.google.com</ref></p>
<p>This is a another reference.<ref>http://www.yahoo.com</ref></p>
<references>
</references>
</body>
</html>
CSS is for presentation, and does not provide logic. Javascript is the best answer in this case, because it provides the tools and logic you need to accomplish the task.

Categories