I am working on my portfolio right now and therefore I want to include several slideshows which are controlled via keyboard. I am working with this code right now and the slideshow works fine. My problem is now that both slideshows are selected at the same time and not only the one which is visible on screen.
How do I activate / deactivate the slideshow which the user sees?
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#SS {
position:relative;
margin-left: auto;
margin-right: auto;
top:100px;
width:600px;
height:600px;
}
#SS2 {
position:relative;
margin-left: auto;
margin-right: auto;
top:100px;
width:600px;
height:600px;
}
</style></head>
<body>
<input type="button" name="" value="Back" onmouseup="Slideshow.next('SS',-1);" />
<input type="button" name="" value="Next" onmouseup="Slideshow.next('SS',1);" />
<div id="SS" >
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_01.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_04.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_05.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_06.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_07.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_08.jpg" class="thumb" />
</div>
<input type="button" name="" value="Back" onmouseup="Slideshow.next('SS2',-1);" />
<input type="button" name="" value="Next" onmouseup="Slideshow.next('SS2',1);" />
<div id="SS2" >
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_01.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_04.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_05.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_06.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_07.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_08.jpg" class="thumb" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
var Slideshow={
init:function(id){
var obj=document.getElementById(id),imgs=obj.getElementsByTagName('IMG'),z0=0,clone;
Slideshow[id]={};
Slideshow[id].obj=obj;
Slideshow[id].ary=[];
Slideshow[id].cnt=0;
for (;z0<imgs.length;z0++){
imgs[z0].style.position='absolute';
imgs[z0].style.left=(z0>0?-3000:(obj.offsetWidth-imgs[z0].width)/2)+'px';
imgs[z0].style.top=(obj.offsetHeight-imgs[z0].height)/2+'px';
clone=document.createElement('IMG');
clone.src=imgs[z0].src;
clone.style.position='absolute';
clone.style.zIndex='101';
clone.style.left='-3000px';
document.body.appendChild(clone);
Slideshow[id].ary[z0]=[imgs[z0],clone];
// Slideshow.addevt(imgs[z0],'mouseover','pop',id,z0);
Slideshow.addevt(clone,'mouseout','hide');
}
Slideshow.addevt(document,'keyup','keycode',id);
Slideshow.lst=clone;
},
next:function(id,ud){
Slideshow.hide();
var oop=Slideshow[id],obj=oop.obj,cnt=oop.cnt+ud,lgth=oop.ary.length-1,img;
oop.ary[oop.cnt][0].style.left='-3000px';
cnt=cnt<0?lgth:cnt==lgth?0:cnt;
img=oop.ary[cnt][0];
img.style.left=(obj.offsetWidth-img.width)/2+'px';
img.style.top=(obj.offsetHeight-img.height)/2+'px';
oop.cnt=cnt;
},
keycode:function(id,nu,e){
Slideshow.hide();
var kk;
if (e.which){
kk=e.which;
}
else {
kk=e.keyCode;
}
if (kk==37||kk==39){
Slideshow.next(id,kk==37?-1:1);
}
},
pop:function(id,nu){
Slideshow.hide();
var oop=Slideshow[id],pos=Slideshow.pos(oop.obj),clone=oop.ary[nu][1];
clone.style.left=(oop.obj.offsetWidth-clone.width)/2+pos[0]+'px';
clone.style.top=(oop.obj.offsetHeight-clone.height)/2+pos[1]+'px';
Slideshow.lst=clone;
},
hide:function(){
Slideshow.lst.style.left='-3000px';
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,id,p){
if (o.addEventListener) o.addEventListener(t,function(e){ return Slideshow[f](id,p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return Slideshow[f](id,p,e); });
}
}
Slideshow.init('SS')
Slideshow.init('SS2')
/*]]>*/
</script></body>
</html>
Related
Top.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>
<title>Top Page</title>
</head>
<body bgcolor="yellow">
<table border="0" width="100%">
<tr>
<td align="center" bgcolor="white">
<img src="./Img/Logo.jpg" alt="logo" />
</td>
<td align="center" bgcolor="white">
<h1 style="color: blue">Web Client Development</h1>
</td>
<td bgcolor="white" style="width: 500px; text-align: center">
<p>
<!-- <a href="./Forms/Pages/inputform.html" target="Content_Frame"
>User <br />
Logon</a
> -->
<a href="./Forms/Pages/userLogonForm.html" target=""
>User <br />
Logon</a
>
</p>
</td>
</tr>
</table>
</body>
</html>
In that 'user logon' area I want to open a UserLogon.html which goes like
UserLogon.html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Logon Form</title>
<script type="text/javascript">
function submitCredentials() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert("Username: " + username + "\nPassword: " + password);
}
function resetCredentials() {
document.getElementById("userLogonForm").reset();
}
</script>
</head>
<body>
<form action="" id="userLogonForm">
<label for="username">Username : </label>
<input
type="text"
id="username"
name="username"
placeholder="Enter Username"
/>
<br /><br />
<label for="password">Password : </label>
<input
type="password"
id="password"
name="password"
placeholder="Enter Password"
/><br /><br />
<button type="button" onclick="submitCredentials()">Submit</button>
<button
type="button"
onclick="resetCredentials()"
style="margin-left: 100px"
>
Reset
</button>
</form>
</body>
</html>
My Top.html has three sections of <td> , One has a logo image, second one has a normal heading, the third is where I want to display my form which asks for username and password (UserLogon.html)
The problem is when I click on User Logon area it expands my UserLogon.html page for the entire area (I guess all three <td>), whereas I want to display that UserLogon.html form in my third <td> tag only. How do I keep the size fixed to that particular <td> only
Note: For the whole website I am using framesets
I started with reading Flexbox and vertical scroll in a full-height app using NEWER flexbox api. And the following works pretty well:
html,body{
overflow: hidden;
width: 100%; height: 100%;
max-height: 100%; max-width: 100%;
margin: 0; padding: 0;
}
.site-container {
height: 100%; width: 100%;
display: flex;
flex-direction: column;
}
.site-container .site-header,
.site-container .site-footer{
flex: 0 0 auto;
overflow: visible;
}
.site-container .site-body {
position: relative;
overflow: auto;
min-height: 0px;
flex: 0 1 auto;
}
<div class="site-container">
<div class="site-header">
<div style="height: 40px;background-color:YellowGreen">My Header Test </div>
</div>
<div class="site-body">
blah1<br />
blah2<br />
blah3<br />
blah4<br />
blah5<br />
blah6<br />
blah7<br />
blah8<br />
blah9<br />
blah10<br />
blah11<br />
blah12<br />
blah13<br />
blah14<br />
blah15<br />
blah16<br />
blah17<br />
blah18<br />
blah19<br />
blah20<br />
blah21<br />
blah22<br />
blah23<br />
blah24<br />
blah25<br />
blah26<br />
blah27<br />
blah28<br />
blah29<br />
blah30<br />
blah31<br />
blah32<br />
blah33<br />
blah34<br />
blah35<br />
blah36<br />
blah37<br />
blah38<br />
blah39<br />
blah40<br />
blah41<br />
blah42<br />
blah43<br />
blah44<br />
blah45<br />
blah46<br />
blah47<br />
blah48<br />
blah49<br />
blah50<br />
blah51<br />
blah52<br />
blah53<br />
blah54<br />
blah55<br />
blah56<br />
blah57<br />
blah58<br />
blah59<br />
blah60<br />
blah61<br />
blah62<br />
blah63<br />
blah64<br />
blah65<br />
blah66<br />
blah67<br />
blah68<br />
blah69<br />
</div>
<div class="site-footer">
<div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
</div>
</div>
In the above snippet, the body scrolls quite well.
Now I'm attempting to Flex the Body into Row and create non-scrolling side-bars but keep a the center content scrolling. I have the following, but the content isn't scrolling. What am I missing?
html,body{
overflow: hidden;
width: 100%; height: 100%;
max-height: 100%; max-width: 100%;
margin: 0; padding: 0;
}
.site-container {
height: 100%; width: 100%;
display: flex;
flex-direction: column;
}
.site-container .site-header,
.site-container .site-footer{
flex: 0 0 auto;
overflow: visible;
}
.site-container .site-body {
position: relative;
min-height: 0px;
flex: 0 1 auto;
}
.body-container{
display: flex;
height: 100%;
width: 100%;
flex-direction: row;
}
.body-container .body-left,
.body-container .body-right{
flex: 0 0 auto;
overflow: visible;
}
.body-container .site-content{
position: relative;
overflow: auto;
min-width: 0px;
flex: 1 0 auto;
}
<div class="site-container">
<div class="site-header">
<div style="height: 40px;background-color:YellowGreen">My Header Test </div>
</div>
<div class="site-body">
<div class="body-container">
<div class="site-sidebar-left">
<div style="background-color:lightgray;">
left1<br />
left2<br />
left3<br />
left4<br />
left5<br />
left6<br />
left7<br />
left8<br />
left9<br />
left10<br />
</div>
</div>
<div class="site-content">
blah1<br />
blah2<br />
blah3<br />
blah4<br />
blah5<br />
blah6<br />
blah7<br />
blah8<br />
blah9<br />
blah10<br />
blah11<br />
blah12<br />
blah13<br />
blah14<br />
blah15<br />
blah16<br />
blah17<br />
blah18<br />
blah19<br />
blah20<br />
blah21<br />
blah22<br />
blah23<br />
blah24<br />
blah25<br />
blah26<br />
blah27<br />
blah28<br />
blah29<br />
blah30<br />
blah31<br />
blah32<br />
blah33<br />
blah34<br />
blah35<br />
blah36<br />
blah37<br />
blah38<br />
blah39<br />
blah40<br />
blah41<br />
blah42<br />
blah43<br />
blah44<br />
blah45<br />
blah46<br />
blah47<br />
blah48<br />
blah49<br />
blah50<br />
blah51<br />
blah52<br />
blah53<br />
blah54<br />
blah55<br />
blah56<br />
blah57<br />
blah58<br />
blah59<br />
blah60<br />
blah61<br />
blah62<br />
blah63<br />
blah64<br />
blah65<br />
blah66<br />
blah67<br />
blah68<br />
blah69<br />
</div>
<div class="site-sidebar-right">
<div style="background-color:lightgray;">
right1<br />
right2<br />
right3<br />
right4<br />
right5<br />
right6<br />
right7<br />
right8<br />
right9<br />
right10<br />
</div>
</div>
</div>
</div>
<div class="site-footer">
<div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
</div>
</div>
Eventually it would look like:
Unlike the site-header, which is a flex item of the site-container, the site-footer was nested inside the site-body. Either that was intentional or you were missing a closing div. For the purposes of this answer, I assumed the latter.
Now the site-header, site-body and site-footer are siblings.
Then I added overflow: auto and flex: 1 to .site-content. The first to enable scrollbars and the second to consume free space on the row.
.site-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.site-body {
min-height: 0px;
height: 100%;
}
.body-container {
display: flex;
height: 100%;
}
.site-content {
flex: 1;
overflow: auto;
}
body {
margin: 0;
}
<div class="site-container">
<div class="site-header">
<div style="height: 40px;background-color:YellowGreen">My Header Test </div>
</div>
<div class="site-body">
<div class="body-container">
<div class="site-sidebar-left">
<div style="background-color:lightgray;">
left1
<br /> left2
<br /> left3
<br /> left4
<br /> left5
<br /> left6
<br /> left7
<br /> left8
<br /> left9
<br /> left10
<br />
</div>
</div>
<div class="site-content">
blah1
<br /> blah2
<br /> blah3
<br /> blah4
<br /> blah5
<br /> blah6
<br /> blah7
<br /> blah8
<br /> blah9
<br /> blah10
<br /> blah11
<br /> blah12
<br /> blah13
<br /> blah14
<br /> blah15
<br /> blah16
<br /> blah17
<br /> blah18
<br /> blah19
<br /> blah20
<br /> blah21
<br /> blah22
<br /> blah23
<br /> blah24
<br /> blah25
<br /> blah26
<br /> blah27
<br /> blah28
<br /> blah29
<br /> blah30
<br /> blah31
<br /> blah32
<br /> blah33
<br /> blah34
<br /> blah35
<br /> blah36
<br /> blah37
<br /> blah38
<br /> blah39
<br /> blah40
<br /> blah41
<br /> blah42
<br /> blah43
<br /> blah44
<br /> blah45
<br /> blah46
<br /> blah47
<br /> blah48
<br /> blah49
<br /> blah50
<br /> blah51
<br /> blah52
<br /> blah53
<br /> blah54
<br /> blah55
<br /> blah56
<br /> blah57
<br /> blah58
<br /> blah59
<br /> blah60
<br /> blah61
<br /> blah62
<br /> blah63
<br /> blah64
<br /> blah65
<br /> blah66
<br /> blah67
<br /> blah68
<br /> blah69
<br />
</div>
<div class="site-sidebar-right">
<div style="background-color:lightgray;">
right1
<br /> right2
<br /> right3
<br /> right4
<br /> right5
<br /> right6
<br /> right7
<br /> right8
<br /> right9
<br /> right10
<br />
</div>
</div>
</div>
</div>
<div class="site-footer">
<div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
</div>
</div>
https://jsfiddle.net/9mqxytv4/2/
I can't put a title to the page I tried to use the title tag again with no success.
the relevant code view:
<h2 align="left" class="w3-center">לוח מודעות</h2>
<tr align="left">
<div align="left" class="w3-content" style="max-width:400px">
<img align="left" class="mySlides" src="http://www.sapir.ac.il/files/7a790acebf3213f6928cb60fd488471a//styles/epsa_crop_hp_top_banner/public/030717_OPHW8.jpg?itok=dAGknih9" style="width:100%" height="450">
<img align="left" class="mySlides" src="http://cnd.ash-college.ac.il/.upload/Images/banner_500x251.jpg" style="width:100%" height="450">
<img align="left" class="mySlides" src="http://www.achva.ac.il/sites/default/files/imagecache/carousel_img/carousel/images/s-yom_new.jpg" style="width:100%" height="450">
</div>
</tr>
<br />
<br />
<button id="button1" style="background:#f90;
color:#fff;font-family:Calibri;
padding:6px 30px;border:none;
border-bottom:3px solid #925b08;
border-radius:10px;
font-size:200%;"
type="button"
onclick="location.href='#Url.Action("ShowSearch1","Institution")'">
חפש מוסד לימודים
</button>
<button id="button1" dir="rtl" style="background:#f90;
color:#fff;font-family:Calibri;
padding:6px 30px;border:none;
border-bottom:3px solid #925b08;
border-radius:10px;
font-size:200%;"
type="button"
onclick="location.href='#Url.Action("ShowSearch", "Degree")'">
חפש תואר
I try to create this type of sign in page in bootstrap
http://v4-alpha.getbootstrap.com/examples/signin/
but before this i already create page but this is not bootstrap
code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Mainpage.aspx.cs" Inherits="project.Mainpage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>System</title>
<link href="Styles/login.css" rel="stylesheet" />
<link href="Styles/main.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<!-- Google Web fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,800,700,600' rel='stylesheet' type='text/css'/>
</head>
<body style="background-image:url(images/slide07.jpg);background-repeat:no-repeat">
<img class="logo" alt="LOGO" src="images/logomain.png" />
<br /><br />
<form id="form1" runat="server" class="fordiv">
<div id="box">
<span>
<img src="images/none.png" id="avtar" />
</span>
<div style="margin-left: 190px;margin-top: -170px";>
<span>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
</span>
<span>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox><br /><br />
</span>
<span>
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
</span>
</div>
</div><br /><br />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
<table class="table" style="border: medium groove #FFFFFF; width: 100%; margin-top: 200px; ">
<tr>
<td>
<img style="margin-left: 10px;" src="images/passd.jpg" />
</td>
<td>
<img src="images/1.jpg" />
</td>
<td>
<img src="images/2.jpg" />
</td>
<td>
<img src="images/3.jpg" />
</td>
<td>
<img src="images/4.jpg" />
</td>
</tr>
</table>
<br /><br /><br />
</body>
</html>
now i try to create bootstrap responsive and i tried this
<div class="container">
<img class="logo" alt="LOGO" src="images/logomain.png" /><br /><br />
<form class="form-signin" runat="server" >
<h2 class="form-signin-heading">Please sign in</h2><br /><br />
<label for="inputEmail" class="sr-only">Email address</label>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
<label for="inputPassword" class="sr-only">Password</label>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox>
<br /><br />
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
</div>
but this shows awkward display
any solution?
Well, for responsive design you should be using using bootstraps's grid system.
I think you should read a bit about about responsive design here and the bootstrap grid system here.
I was writing a html code and I wanted to close all the code it into a single div. When I placed it into a single div, it gave me an error that my markup is invalid (showing that the closing div tag is invalid.) Now I am amazed how can it be invalid. Please help me out. Thanks
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<iframe width="350" height="350" src="http://www.youtube.com/embed/P3weDRMemD8" frameborder="0" allowfullscreen></iframe>
<form style="border:3px;text align.center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit= "window.open('http://feedburner.google.com/fb/a/mailverify?uri=financeyoga/UPqT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" style="width:140px;padding:10px;" name="email"/>
<input type="hidden" value="financeyoga/UPqT" name="uri"/>
<input type="hidden" name="loc" value="en_US"/><br>
<input style="padding:10px;" type="submit" value="Submit Email Address" />
<img style="position:relative;top:325px; left:10px;" src="http://financeyoga.com/wp-content/uploads/2012/05/follow.png" width="143" height="64" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="5,18,33,44" href="www.twitter.com" target="_blank" alt="twitter">
<area shape="rect" coords="57,16,87,46" href="www.facebook.com" target="_blank" alt="facebook">
<area shape="rect" coords="107,16,137,46" href="plus.google.com" target="_blank" alt="google plus">
</map>
</div>
</body>
</html>
You haven't closed your form tag.
It seems like it is missing </form> tag.