I've inherited this site and am looking to fix up some things. It currently uses Hideslide.js to expand the different sections of content (Monday, Tuesday, Wednesday, etc...)
The previous admin tried to have links on the homepage that would go to that page and have a given content area open, depending on which external link was clicked. This doesn't seem to work at all.
So put it succinctly, is there a way I can link directly to one of those content areas and have it be open when the page loads?
Yes. You can write it manually using fragment urls and calling hideslides showHideContent function onload.
The urls for deeplinking must now contains the ID of wanted day "hideslide_name box". For tuesday use
http://kalamazoobicycleclub.org/rides/rides.php#hideslide_q2
include this code on your page
<script>
var divId = window.location.hash.substring(1);
if (divId)
window.onload += showHideContent(null, divId);
</script>
Related
First, let me explain what I am trying to accomplish. I currently have 8 small websites that are identical except for a header image and the href links.
I am looking for a way to minimize maintenance and potential for human error each time these pages need updating.
For example, say I have 2 links that point to State specific login pages.
Student Login
Teacher Login
In the past, I have been making copies of the updated HTML, then search and replace "stateId=WA" for "stateId=MI"
I started to see if I could make the URL using javascript and just append the 2 digit State ID using some function. That way I would only have to update the code, then copy it and replace the 2 digit state ID in one place, in one file.
I made progress by using the following external javascript file
function getParam() {
return 'WA';
}
function getLink() {
document.getElementById('studentLogin').href = 'https://www.mypage.com/studentLogin?stateId=' + getParam();
}
function getLink() {
document.getElementById('teacherLogin').href = 'https://www.mypage.com/teacherLogin?stateId=' + getParam();
and then using this in the HTML
CLICK ME
This worked, until I figured out that I can't have more than one element in the HTML with the same id. For example, one of the pages has a link to the Student Login in the Menu, and also has a link to the same place in the main content of the HTML, and only one of them would work.
So I suppose I could create several functions in the external javascript file each with their own ID, then update the HTML to call the new IDs, but I am in search of a better way.
All I really care about is minimizing maintenance, since I currently have 8 of these landing pages, but we could have more in the near future. Since there are only 4 distinct links off of these pages, it would be fine if I could figure out how to store the entire link in a variable, and just call that variable in the
<a> tag
Thank you for your help.
You can add classes to the relevant links, and then get the elements with document.getElementsByClassName("myclass")
test1test2
And in JS:
var links = document.getElementsByClassName("myclass")
This would make links an array containing all the links over which you could iterate to apply your modifications.
Sounds like a job for a progressive enhancement.
I would suggest you add a attribute the html link; data-state-change. Then any future links you write you just add the attribute.
//keep the base url in the tag
<a href="https://www.mypage.com/studentLogin" data-has-state>Click Me<a>
//now using jquery attach to all links that have that data- element.
$('body').on('click', '[data-has-state]', function(e){
// eat the click
e.preventDefault();
//get the url
var url = $(this).attr('href') + '?stateId=' + getParam();
window.location = url;
);
You could do something similar with a css class also instead of an html data- attribute. Then it would be.
$('body').on('click', '.someCssClass', function(e){
// eat the click
e.preventDefault();
//get the url
var url = $(this).attr('href') + '?stateId=' + getParam();
window.location = url;
);
I am using javascript function to jump to a div section on the current html page(system_details.html):
Processor
RAM
However, I want to directly navigate to system_details.html page's show_ram() function from a different html page (index.html)
Give the links and id RAM. Add this id at the end of the URL using a hash like so index.html#ram.
Then use jQuery to do something like this:
$(document).ready(function(){
if(window.location.hash) $('#' + window.location.hash).click();
});
This will take the last part of the URL after the hash as the id of the link to be clicked on, and then call click() on the link with the specified id.
Use ajax concept. Load data from index.html page
I've got a website and I'd like to make a part of it static. What happens is that the header, the menu bar and the footer are consistent in every page. I'd like to have them always loaded and when I click the menu button, it will only reload what is the body of the site.
Is there a simple chunck of code that can early achieve this? Something in js or ajax? I'm sorry but I don't have enough experience in these languages to accomplish something on my own. I've already tried to check jQuery library but it's still pretty confusing to me.
Thank you.
I think you don't even need Ajax or css!! Just use iFrames!! They are awesome, what happens is that u only design one page as the holder of your static content (Header-Menu ...) and put one iFrame in there as a place holder for any page you want to load in it, u should use proper css code to place the iFrame where you want, now, for every link in your menu, just set the "target" attribute equal to your iFrame's name and all the links will be loaded in that iFrame and your page won't be reloaded with every link click... I'll be back with some code...
Just add in every page a div container with ID for header, menubar and footer and just load it with this:
$(document).ready(function(){
$('#header').load('header.html');
$('#menubar').load('menubar.html');
$('#footer').load('footer.html');
});
Just make sure that the html files don't have html, head or body tags within, only the HTML-Code you would write inside the div. It's just like the include function in PHP.
EDIT:
For easy and simple implementation store the code above inside a .js file (e.g. include.js) and add this inside every head just below the include of all other scripts of your html files:
<script type="text/javascript" src="include.js"></script>
EDIT2:
Another solution ist to load the content of the page instead of the header, menubar, footer.
Here you take the same specifications (no html, body, etc. tags inside your content html files)
Name your content div e.g. <div id="content"></div>
Your navbar for example:
<div id="navbar">
Content1
Content2
</div>
JavaScript Code:
$(document).ready(function() {
//Click on a link that's child of the navbar
$('#navbar > a').click(function() {
//Get the html file (e.g. content1.html)
var file = $(this).attr('href');
//Load this file into the #content
$('#content').load(file);
return false;
});
});
You should consider the use of Server Side Included : http://httpd.apache.org/docs/current/howto/ssi.html
It's not quite easy to understand (as it refer to apache configuration), but this is a really great solution.
In a nutshell, you include parts of html code in you main page :
<!--#include virtual="/footer.html" -->
You won't have to use or understand all JQuery Framewol, user agent won't have to parse (if they are able to !) Javascript.
This is a pretty good replacement of PHP / ASP / Java for this kind of purpose.
You could use ajax to request the body of each page. But this is only one possibility - there are many. An other approach could be to create you page content using a script language (php, perl) serverside and employ a function there which adds footer, header and anything else to each page.
If you have an idea of Jquery then use click event on menu links to load the page in a div like the following syntax may help you.
$(document).ready(function(){
$("a.menu").click(function(){
$("#bodyContent").load("http://abc.com/your-linked-page.html");
});
});
To load the url dynamically use the following code:
In your menu bar the link looks like:
Home
In your Jquery code:
$(document).ready(function(){
$("a.menu").click(function(){
url = $(this).attr("title"); // here url is just a variable
$("#bodyContent").load(url);
});
});
Step 1: Add Jquery file into your html page.
Step 2: Use the above jquery code and change your menu link to the new what i said here.
Step 3: If you done it correctly, It will work for you.
How about a traditional iframe?
In your menu:
<a target="body" href="URL_to_your_Menu1_page">Menu1</a>
and then further in the document:
<iframe name="body" src="URL_to_homepage"></iframe>
You may use frameset and frames and organize you pages accordingly. So, frames containing menus can always be at display and while displaying contents on click of menu u may set target to frame in which you would like to load the contents.
What I would like to do is change the content of a div based on the different links clicked on the same page. Can anyone point me in the correct direction? AFAIK it could be dangerous to insert scripts directly into a page, changing text works okay but it seems I'm not sure about scripts. The content of the scripts are embed codes for video streaming. I realise this may not be the right way to go about it. My attempt won't work because of escaping the '<,>' characters and passing the parameter only seems to accept text with no spaces.
The way I've attempted it is as follows (in pseudocode);
function changeVideo(script){ div.innerhtml=script;}
then links that change the content of the div;
<a href='#' onclick=changeVideo('<iframe src=justin.tv etc..></iframe>')>
<a href='#' onclick=changeVideo('<iframe src=ustream.tv etc..></iframe>')>
You could drop the use of JavaScript and create an iFrame with a specified name to host the content; while giving the links a target tag. Thus making any links with the target tag specified appear within the named iFrame.
However if you insist upon using JavaScript you could consider the use of AJAX.
I suggest you to locate your a elements with unobstrusive Javascript, with getElementById() for example.
Once you have got them in variables like, lets say, a1 and a2, and the iFrame is in variable iframe do a code like this.
// ...a1 and a2 are anchors and iframe is the frame.
var srcSwitch = function(e)
{
e.preventDefault(); // this will prevent the anchor from redirecting you
iframe.src = this.src; // this changes the iFrame‘s source
};
a1.addEventListener('click', srcSwitch, 1);
a2.addEventListener('click', srcSwitch, 1); // and we register event listeners.
With this code, there is no need to insert Javascript within HTML attributes and you must only put the script URL in the anchors SRC attributes.
Tell me how it goes, greetings.
I may have generalised the question too much.
So I want to embed a stream on clicking a link. If the link is something like a proper URL
http://Jimey.tv/mystream
the iframe works, but loads the whole page. But I want to use the stream embed code to get just the player
The embed code looks similar to;
<script type = text/javascript> channel='mychannel' w='620' h='400'</script><script type=text/javascript> src="jimmy.tv/embed.js></script>
My original JavaScript method doesn't work because of escaping the < characters, and passing the embedcode seems to be problamatic. Hopefully I've made this a bit clearer?
<script>
iframe1 = '<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=xenema&popout_chat=true" height="301" width="221"></iframe>'
</script>
link 1
link 2
<div id="videos">diiiiv</div>
I need to be able to open a link to a specific URL that is within an iFrame; the link is generated by php and I can't change the source code, so I need to change the link in the iFrame dynamically, if possible.
What I'm doing is this: on a non-profit organization's site, I have an affiliate store (generated by php) displayed within an iFrame on a page in order to make it more styled with the rest of the site. The php store pulls products from an affiliate service; the link to the store.php is in the same domain as the main non-profit's site.
The problem is the final "Buy Now" link from a product opens the final destination e-commerce store within the iFrame, and as such the page is stuck in the iFrame and looks bad and one must scroll V and H to see it and check out.
The link I need to open in a new window always has the class "av_buy_now" I have access to the CSS file, which I can change. I have access to the PHP files, i.e. shop.php, but it doesn't appear that the final link is generated locally. I'm showing the iframe this way:
<iframe src="http://nonprofit.org/shop/mj/shop.php"></iframe>
Is it possible to use jQuery or Javascript to find the links to mydomain.com with that one class and add a new window attribute to them? Or is there a better way? Thanks
Without some code I don't know the exact structure of your code, but I this could do the job. It requires jQuery to be in the iframe too.
$('iframe')[0].$('.av_buy_now').filter(function() {
return $(this).attr('href').indexOf('mydomain.com') > -1;
}).attr('target', '_blank');
You can change it if some how you can manage to execute this kind of code, changing class is little troublesome, of you got an id on it do something like this.
PAGE.html:
<button onclick="openinnewwin()">Get It</button>
<iframe src="test.html" id="ifrm"></iframe>
<script language="javascript">
function openinnewwin(){
ob=document.getElementById('ifrm');
if ( ob.contentDocument ) {
ob.contentDocument.getElementById('a').target="_blank";
}else if ( ob.contentWindow ){
ob.contentWindow.getElementById('a').target="_blank";
}
}
</script>
test.html:
Hello