Java Script Slideshow - javascript

I'm following a tutorial to create a slideshow with JavaScript and HTML.
The first image and the "Next" and "Previous" buttons are on the page however when I click on next or previous it says this webpage can not be found. Can someone help me please?
The tutorial can be found here and I have also included the HTML and JavaScript code below.
The html code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Slideshow</title>
<script type="text/javascript"
src="script09.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<h1>Welcome, Robot Overlords!</h1>
<img src="images/robot1.jpg"
id="myPicture" width="200"
height="400" alt="Slideshow" />
<h2><a href="previous.html"
id="prevLink"><<
Previous</a> <a
href="next.html" id="nextLink">Next
>></a></h2>
</div>
</body>
</html>
and The JavaScript code is
window.onload = initLinks;
var myPix = new Array("images/robot1.jpg",
"images/robot2.jpg","images/robot3.jpg");
var thisPic = 0;
function initLinks() {
document.getElementById("prevLink").
onclick = processPrevious;
document.getElementById("nextLink").
onclick = processNext;
}
function processPrevious() {
if (thisPic == 0) {
thisPic = myPix.length;
}
thisPic--;
document.getElementById("myPicture").src =
myPix[thisPic];
return false;
}
function processNext() {
thisPic++;
if (thisPic == myPix.length) {
thisPic = 0;
}
document.getElementById("myPicture").src =
myPix[thisPic];
return false;
}

Rather than bind your function in a onload init function, try:
<a href="previous.html" id="prevLink" onclick="processPrevious();return false;">
Chances are your have a js error on the page so the functions are ignored and the a tags just follow the link you have used. Open up the console of your browser and check for syntax errors.

You have given HTML page url in href of both the links.
But I think you just need to change the image src attribute...
Use href="javascript:" in both the links. So there is no need of event.preventDefault() in this case...
(href="#" scrolls the page to the top).... :)

Related

Trying to hide a frame with jquery when menu is hovered over

I have a page with a frameset that consists of two frames; a top frame and a bottom frame. The top frame has a menu with submenus. The problem I am having is that the bottom frame does not allow the submenus to drop down as they should. I could expand the size of the top frame but management does not want this. Since it appears to not be possible to have the dropdown menu flow over the bottom menu, the best way I can think of to make it work is to hide the bottom frame while expanding the top frame. This is theory only though. I have never worked with asp.net or frames before so, to be honest, I'm not sure if it will work or not.
There is a separate page for the frameset and frames and it looks like this:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="dhss.mohsaic.webapplication.mohsaic.DefaultFrameset" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>MOHSAIC</title>
<link rel="shortcut icon" href="/Images/bavicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0" />
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0" />
<meta name="vs_defaultClientScript" content="JavaScript" />
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />
</head>
<frameset border="0" framespacing="0" rows="95,*" name="frameset" class="frameset" id="frameset">
<frame src="<%=HeaderFrameURL%>" scrolling="no" frameborder="0" noresize="noresize" name="fraHeader" />
<frame src="<%=EntireBodyURL%>" scrolling="auto" frameborder="0" noresize="noresize" name="fraEntireBody" id="bottomFrame" />
</frameset>
</html>
The the html of the menu, which in a separate file is:
<div>
<table id="tblAreaTabs" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px; padding-top: 0px" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td class="DarkHeader" width="100%" bgcolor="#000000">
<asp:Menu ID="mainMenu" Runat="server" Orientation="Horizontal"
DynamicMenuItemStyle-CssClass="ChildLink" StaticMenuItemStyle-Font-Underline="true" StaticMenuItemStyle-CssClass="ParentLink" StaticEnableDefaultPopOutImage="false"
style="text-align:center;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='black', Positive='true');">
</asp:Menu>
</td>
<td valign="middle" class="DarkHeader">
<asp:HyperLink ID="hlError" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
ImageUrl="/images/error.gif" BorderWidth="0px" Height="15px">The connection to DSS is not available.</asp:HyperLink><asp:HyperLink
ID="hlWarn" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
ImageUrl="/images/warn.gif" BorderWidth="0px" Height="15px">The connection to DSS is partially available. </asp:HyperLink>
</td>
</tr>
</tbody>
</table>
</div>
the submenus are created dynamically depending upon the login credentials of the user
I have tried several ways to do what I want to do. The first was to add onmouseover="whileHovering()" to the asp:menu tag and add the following javascript:
var origCols = null;
function whileHovering() {
//alert("Yes, I'm working");
if (origCols !== null)
showFrame();
else
hideFrame();
};
function hideFrame() {
var frameset = parent.document.getElementById("frameset");
origCols = frameset.rows;
frameset.rows = "120, 0";
};
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
};
However, this did not work. I receive the error 'cannot read property 'rows' of null. After investigating, the frameset is null and nothing I did would change that. So I gave up on that route and tried:
(function() {
alert("I have entered the function")
$('#mainMenu').hover(function () {
alert('hidden function working')
$(this).parent.document.getElementById('bottomFrame').style.visibility = "hidden"
}), function () {
alert('visible function working')
$(this).parent.document.getElementById('bottomFrame').style.visibility = "visible"
}
});
I get no errors from this but nothing happens. It doesn't even hit the anonymous function.
I would appreciate it if someone could tell me what I am doing wrong.
If you use frameset and frames you will have such problems. Writing JS/Jquery code is just a workaround and frankly not so good.
Any specific reason why you are using it?
Have you tried using ASP.NET master pages to have common menu and using it on different pages?
If that's not a feasible option, have you tried using iframe? In the main html file, create your menu and below the div/table tag of your menu, add an iframe. This iframe will show different pages that you are currently showing in #bottomFrame.
Do you put $ before (function() in your code? $(function() {}) fires when the document has been parsed and is ready, without it your function won't work. Also you don't need to use getElementById('bottomFrame').style.visibility in jQuery, there are quite short and elegant way to edit css rules, using css(property, value). Also don't forget to put ; in the end of your statements. The whole code looks like this:
$(function () {
alert("I have entered the function");
$('#mainMenu').hover(function() {
alert('hidden function working');
$(this).parent().css("visibility", "hidden");
}, function() {
alert('visible function working');
$(this).parent().css("visibility", "visible");
});
});
UPDATE:
If I understood you correctly you want to hide bottomFrame when hover on MainMenu, then use this code:
$(function () {
alert("I have entered the function");
$('#mainMenu').hover(function() {
alert('hidden function working');
$('#bottomFrame').css("visibility", "hidden");
}, function() {
alert('visible function working');
$('#bottomFrame').css("visibility", "visible");
});
});

Javascript - Changing an image with variables

I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>

call on function when all images are clicken on

I want to call a function that opens a new link. I want to do this after all my images have been clicked on. How can i achieve this?
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows-1252">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
<title>Date med mig - version b
</title>
<script type="text/javascript">
function newWindow()
{
window.location = window.location = "http://www.tv3.se/datemedmig"
}
</script>
</head>
<body>
<h1>Del 2: Date med mig</h1>
<img src="1_c.jpg" id="image1" onclick="this.src='1_o.jpg';" alt="image" />
<img src="2_c.jpg" id="image1" onclick="this.src='2_o.jpg';" alt="image" />
<img src="3_c.jpg" id="image1" onclick="this.src='3_o.jpg';" alt="image" />
<img src="4_c.jpg" id="image1" onclick="this.src='4_o.jpg';" alt="image" />
</body>
</html>
If you are trying to just load a new window as soon as any image is clicked, I think the way that #runfaj said to do it is probably the best, It is my understanding that you want to do it only after ALL images have been clicked on?
If this is the case, here's one option (which is probably not the most efficient)
//Assuming there are 4 images
var hasBeenClicked = [false,false,false,false]
//To be called when each image is clicked
function imageClicked(whichImage){
this.src = "'"+whichImage+"_o.jpg'"
//set this position in the array equal to true
hasBeenClicked[whichImage] = true
// if the array is completely true (every image has been clicked)
// call the newWindow function
if(hasBeenClicked == [true,true,true,true]){
newWindow();
}
}
Then when you create an image:
<img src="1_c.jpg" id="image1" onclick="imageClicked(1);" alt="image" />
you could do it three ways:
jquery:
$('img').click(newWindow);
inline:
<img src=..... onclick="newWindow()" />
regular javascript:
get all the tags with:
var imgs = document.getElementByTagName('img');
then add an event listener to each one (google it for lots of different examples)
Have an onclick function that triggers for each image which sets a new attribute on the image tag. Then run a loop over all images to check that they all have the tag. If so, open new windows. For example:
$('img').click(function() {
$(this).data('was-clicked', true);
var all_clicked = true;
$('img').each(function() {
if($(this).data('was-clicked') != true) {
all_clicked = false;
break;
}
});
if(all_clicked == true) newWindow();
});
Note, this code is not tested and may have syntax/semantic errors. Also, you may not really want the user to click ALL image tags (e.g. banners, backgrounds, etc), so you should modify the jquery selectors to filter only the 'img' tags you're interested in, e.g. $('#my-gallery img')...

Displaying a part of DIV in iframe

I am using HTML object in below manner
<object id="foo" name="foo" type="text/html" data="mypage.aspx">
</object>
Now, I don't want to display complete data in mypage.aspx in HTML object/iframe. I just want to display a DIV layer from mypage.aspx in current page (default.aspx). I tried using data="mypage.aspx#div1" but didn't work.
For testing purpose mypage.aspx consists of
<body>
<div id="div1">This has to be displayed</div>
<div id="div2">This should not be displayed</div>
This portion also should not be displayed
</body>
How can I display only DIV1 part of mypage.aspx in HTML object?
If you can get rid of using object or iframe you can use jQuery load method to just get the required mark up from mypage.aspx. Keep a container in your parent page which will hold the required content from mypage.aspx and try this.
$(function(){
//Here container is a div in which #div1 from mypage.aspx will be loaded.
$('#container').load('mypage.aspx #div1');
});
If you want to read about Loading Page Fragments using jQuery take a look at this link
I don't have an aspx capable server. So I tested using plain html, but the principle is the same really.
I recreated test.html:
<body>
<div id="div1">This has to be displayed</div>
<div id="div2">This should not be displayed</div>
This portion also should not be displayed
</body>
Then I made test2.html and for simplicity I embedded the JavaScript in test2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Test</title>
<script language="javascript"type="text/javascript">
function init() {
var obj = document.getElementById("foo"); // Grab the frame element
var kids = obj.contentDocument.body.childNodes; // Grab all child nodes of the body node of fram element
for( var i = 0; i < kids.length; i++ ) { // iterate through all child nodes
if( kids[i].id == "div1" ) { // if child node's id is "div1"
alert(kids[i].firstChild.nodeValue); // alert the first child of the div, e.g. text node, value
}
}
}
window.onload = init;
</script>
</head>
<body>
<object id="foo" name="foo" type="text/html" data="test.html"> </object>
</body>
</html>
This approach seemed the most cross-browser compatible naked javascript I could create. I'm not claiming that it's the best possible solution, though.
Here's some additional things you can do, I wrote comments for each. I commented one of the lines out because it makes a dramatic change I'm not sure you'd like. You can try it, though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Test</title>
<script language="javascript"type="text/javascript">
function init() {
var myDiv = document.createElement("div"); //create a new div
myDiv.innerHTML = "<strong>Testing!</strong>"; // add some HTML to myDiv
var obj = document.getElementById("foo"); // Grab the frame element
var kids = obj.contentDocument.body.childNodes; // Grab all child nodes of the body node of fram element
for( var i = 0; i < kids.length; i++ ) { // iterate through all child nodes
if( kids[i].id == "div1" ) { // if child node's id is "div1"
kids[i].firstChild.nodeValue = "sts"; // change first text node to sts
kids[i].appendChild( myDiv ); //append myDiv to Div1
document.getElementById("container").innerHTML = kids[i].firstChild.nodeValue; // add text to container
//document.getElementById("container").appendChild(kids[i]); // actually append, or insert div1 into container2, this should move the div1 out of the frame and into the document
}
}
}
window.onload = init;
</script>
</head>
<body>
<object id="foo" name="foo" type="text/html" data="test.html"> </object>
<div id="container"></div>
<div id="container2"></div>
</body>
</html>

open a new window from another pop up javascript window

I'm trying to open a new window from another pop up java script window via writing html code in this pop up window, but it doesn't work, please help me as soon as possible.
<html>
<head>
<style>
.larger{ width:750px;}
.standard{ width:600px;}
.orginal{ width:10px;}
</style>
<script type="text/javascript">
function larger()
{
OpenWindow=window.open("", "larger","width=1000,scrollbars=yes");
OpenWindow.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"'+
'http://www.w3.org/TR/html4/strict.dtd">'+
'<html><head><title>Test page</title>'+
'<style type="text/css">'+
'.larger{ width:750px;}'+
'</style></head><body>');
OpenWindow.document.write('high');
OpenWindow.document.write("<img id='img1' src='webfonts.jpg'>");
OpenWindow.document.write('</body></html>');
OpenWindow.document.close();
OpenWindow.document.getElementById("img1").className = "larger";
}
function standard()
{
OpenWindow=window.open("", "newwin",'width=600,scrollbars=yes');
OpenWindow.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"'+
'"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
'<html><head><title>Test page</title>'+
'<style type="text/css">'+
'.standard{ width:600px;}'+
'</style></head><body>');
OpenWindow.document.write("<img id='img1' src='webfonts.jpg'>");
OpenWindow.document.write('</body></html>');
OpenWindow.document.close();
OpenWindow.document.getElementById("img1").className = "standard";
}
</script>
</head>
<body>
<img class="orginal"id="img1" src="webfonts.jpg" border="0" />
<span onclick="larger()">fig1</span>
</body>
</html>
You have created the standard function in the first parent script and you are trying to call it from the child pop-up window, which would offcourse not find this function defined within it.

Categories

Resources