HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="Index.css">
<title>Info</title>
<script type="text/javascript">
function fn(name){
document.getElementById("link").src = name;
}
</script>
</head>
<body>
<div id="contain">
<div id="head">
<h1 align="center">Represent</h1>
</div>
<div id="list">
<a href="NewFile1.html" onclick='fn("NewFile1.html")'>file1</a><br>
<a href="NewFile2.html" onclick='fn("NewFile2.html")'>file2</a><br>
nasdd
</div>
<div id="fr">
<iframe id="link" align="left" src="about:blank" style="width: 78%;>
</iframe>
</div>
</div>
</body>
</html>
When I click on the link say 'file1', the correct html is displayed but not in the iframe and is displayed as a new page. How to display the html only in the frame?
I think I got it working!!
I just did :
<a href="NewFile1.html" onclick='return fn("NewFile1.html")'>file1</a><br>
<a href="NewFile2.html" onclick='return fn("NewFile2.html")'>file2</a><br>
function fn(name){
document.getElementById("link").src = name;
return false;
}
Related
If I wanted a section on my homepage to be devoted as teaser to an article on a different page would the following markup be correct?
<section>
<article>
<a href="">
<img src="" alt="">
<h1></h1>
<p></p>
</a>
</article>
</section>
Lets assume this is your home page index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HOME PAGE</title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#list").addClass('loader');
$("#list").load('article.php', function() {
$("#list").removeClass('loader');
});
});
</script>
<style>
.loader{
background-image:url(loader.gif);
background-repeat:no-repeat;
background-position:center;
height:10px;
}
</style>
<!--and this is where you want the articles to appear-->
<div id="list"></div>
</body>
</html>
And this is your article page: article.php
<section>
<article>
<a href="">
<img src="" alt="">
<h1>Heading</h1>
<p>article</p>
</a>
</article>
</section>
And if the article is on a specific <div> or <article>. then give that <div> or <article> an ID e.g. <div id="divID" > or <article id="divID" >and use this javascript load code instead
<script type="text/javascript">
$(function() {
$("#list").addClass('loader');
$("#list").load('article.php #divID', function() {
$("#list").removeClass('loader');
});
});
</script>
I am a layman in html, but for my personal website, I am trying to add some lightbox (Fancybox).
The problem I am facing is that it is only opening the first link as the lightbox, not the 2nd one. If I interchange the position (i.e. the 2nd link which was not opening became 1st) then the present first link is opening, and not the previous one.
I have tried to make an minimal example:
index.html:
<!DOCTYPE html>
<head>
<title>Learning Fancybox</title>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
</head>
<body>
<div id="content">
<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td>
<h3>Trying Fancybox</h3>
<li><a id="iframe" href="jbn.html" />content1</a></li>
<li><a id="iframe" href="chabi.html" />content2</a></li>
</td>
</tr>
</table>
</div>
</body>
</html>
content1(jbn.html)
<!DOCTYPE html>
<head>
<title>content2</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt for content2
</div>
</div>
</div>
</body>
</html>
and content 2(chabi.html)
<!DOCTYPE html>
<head>
<title>lb content1</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt here
</div>
</div>
</div>
</body>
</html>
As it is now, the jbn.html is opening as lightbox, chabi.html is opening as an independent webpage.
Please help
UPDATE It is possibly not a fancybox problem, as I have just checked, if I add an identical id as #iframe2 and change the id of the 2nd links id to that, it is working properly.
Please help.
Problem is solved by changing the id to class(.iframe)
This is some code I working on but now of JQuery Mobiles elements are working. It been a while since I have coded. Also if it important I am using Sumlime Text 2.
<!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>.......</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div date-role="page" data-theme="a">
<div date-role="header">
<!--Main Nav Bar-->
Home
<h1>HOME</h1>
</div>
<div data-role="content">
hello
</div>
</div>
</body>
</html>
From the looks of it, everything seems to be written correctly. The only thing that could be is that it does not use the correct HTML 5 doc type but html4. Jquery mobile is heavily reliant on HTML5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
</head>
<body>
</body>
</html>
I am trying to change the content of the div which is a part of the parent page using the child page. In order to update the content, I use innerHTML. The contents appear just fine but the onclick event on the images does not work. Here is my code, the code works in Mozilla firefox but does not work in Chrome and Safari. Also, it does not work on iPad safari browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEMP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="scripts/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function() {
//this is the parent element
parent.document.getElementById('hd').innerHTML = document.getElementById('temp').innerHTML;
});
</script>
</head>
<body>
<div id="fakeshare" style="float: left;margin-top: -30px;z-index:1000000;position: absolute;vertical-align: middle">
</div>
<!-- this is the content I try to populate in the parent element -->
<div id = "temp" style="visibility: hidden">
<div style="float:left">
<img id="backbtn2" class="imgtopbutton" src="images/facebook-cancel.png" onclick="javascript:history.go(-1)" align="left" style="margin-left:12px;margin-top:10px"/>
<img class="imgtopbutton" src="images/facebook-post.png" align="right" style="margin-top:-31px;margin-left:545px" onclick="javascript:history.go(-1)">
</div>
</div>
</body>
</html>
Just try:
$("#hd").html($("#temp").html());
Try using $('#hd').parent().html($('#temp').html());
First off I do not consider myself to be anything more than a hack at HTML/CSS. With that said , I am having a problem with the attached code in Chrome and Safari (Firefox and Opera work perfectly fine). The problem is clicking on one of the help icons in the center iframe should send the right iframe to the appropriate anchor, but it does not. I would like the help topics to move from topic to topic without a scroll bar.
index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem ipsum dolor</title>
<link href="apstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Body">
<div class="leftnav"><p>Something</p></div>
<div class="main"><iframe src="Setup.html" name="main" id="main" width="450" height="100%" frameborder="0"></iframe></div>
<div class="right"><iframe src="Help.html" name="help" id="help" width="235" height="100%" frameborder="0" scrolling="no"></iframe></div>
</div>
</body>
</html>
Setup.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="apstyle.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="options">
<p>Get Help #2
<a href="Help.html#help2" target="help">
<img src="helpicon16.png" alt="help2" class="help_icon"/>
</a>
</p>
<p>Get Help #3
<a href="Help.html#help3" target="help">
<img src="helpicon16.png" alt="help3" class="help_icon"/>
</a>
</p>
</div>
</body>
</html>
and the css
#charset "UTF-8";
.Body {
float : left;
clear : both;
width : 100%;
margin-top : 5px;
margin-bottom : 5px;
}
.leftnav {
float : left;
height : 500px;
width : 155px;
margin-left : 25px;
background-color : #eae6e3;
}
.main {
float : left;
height : 500px;
width : 445px;
margin-left : 5px;
}
.right {
clear : right;
float : left;
height : 500px;
width : 185px;
margin-left : 5px;
}
iframe.help {
overflow : hidden;
}
div.spacer {
height: 1000px;
}
Any help would be greatly appreciated
I suppose adding the Help.html might make this easier to replicate
Help.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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>
remove :
scrolling="no"
and it works for Chrome 21 on windows.
Edit
Still remove the scrolling="no" but change the html code for Help.html to this:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
<style>
html {
overflow:hidden;
}
</style>
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>
See here: testing.dpwebdev.co.uk/stackoverflow/anchors