innerHTML onClick issue - 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());

Related

Fancybox iframe openning only first link

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)

Css style for <ul> with dropdown

i have a page that displays a menu and im trying to make and learn to code a responsive layout using #media screen coding.
so i coded the following page;
<!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>Header Test</title>
<meta name="viewport" content="width=1024">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<link type="text/css" rel="stylesheet" href="font.css" />
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
$(function(){
$(window).resize(function(){
if (window.innerWidth > 850) {
$("#nav").removeClass('vertical');
}
});
$("#menu").click(function(){
$("#nav").toggleClass('vertical');
return false;
});
});
</script>
</head>
<body>
<div id="header">
<div class="wrap">
<div id="logo">
<img src="http://www.real-creative.co.uk/new/img/logo-white.png">
</div>
<span id="menu"><img src="img/menu-icon.png" width="40" height="40" /></span>
<div id="navWrap">
<ul id="nav">
<li><h1>HOME</h1></li>
<li><h1>WORK</h1></li>
<li><h1>SERVICES</h1></li>
<li><h1>ABOUT</h1></li>
<li><h1>CONTACT</h1></li>
</ul>
</div>
</div>
</div><!--header-->
</body>
</html>
what I am trying to achieve is once the page is below 800 pixels wide the button to drop down the navigation appears, I made an image in Photoshop to show what the desired look I wanted, but im unsure on how to style lists to the way i show in the image.
can anyone please help me out.
URL for current site is:
http://www.real-creative.co.uk/new/
and here is the image;
http://www.real-creative.co.uk/new/viewport.png
appreciate if anyone can help me out.
There are many ways to do this, one approach is to use absolute positioning for your div#navWrap, so that it moves when your media query is active.
something like...
#navWrap{position:absolute;top:0;left:500px;}
#media all and (max-width: 800px) {
#navWrap{top:100px;}
#navWrap ul#nav{border:1px solid #f00;border-radius:10px;width:100px;}
#navWrap ul#nav li{display:block;border-radius:10px;margin:4px auto;}
}
example codepen - http://codepen.io/lukeocom/pen/pGjco
hope that helps...

Can't get drop down menu to display in Internet Explorer

I am using pre-built CSS and HTML to display a drop down menu on my site, but the menu does not work in Internet Explorer. I am not sure if it is the doctype or what, I have it linked to a csshover.htc page, as it came with, but it still won't work. I will list the code below for the first section of the menu that contains the doctype and file link, as well as the csshover.htc code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<title>Mega Drop Down Menu</title>
<!--[if IE 6]>
<style>
body {behavior: url("csshover.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->
<body>
<ul id="menu">
<li>Home<!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p></p>
</div>
</div><!-- End 2 columns container -->
And here is the info from the csshover.htc file:
<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)): (hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\- ]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
Change over to <!DOCTYPE HTML>
and add
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
into your head
also add a <html> tag and </head> tag
for example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
</head>
<body>
<!-- Content -->
</body>
</html>
Your missing a lot of tags which are essential add these in and im sure your problem should be fixed
you also aren't closing your <ul> tag and <li> tag

How to display function passed parameters as iframe src

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;
}

HTML and corresponding DOM Tree

I have to create a DOM Tree for class and just wanted to know if I did it correctly before I turn it in. If anyone could confirm for me that it is correct or point out what I did wrong I would appreciate it. Here is the code:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Lab 2</title>
<link href="lab2.css" type="text/css" rel="stylesheet">
<script src="lab2.js"></script>
</head>
<body>
<h1>Images</h1>
<div id="content">
<img id="display" src="images/blank.gif" alt="Blank Image"><br />
<button onclick="change()" id="changeImage">Display Image</button>
<h2 id="description">The image is blank</h2>
</div>
</body>
</html>
The img and the h2 are children of the div, not siblings.
Also, what happened to the button and the br?