I have been making some changes to my website except suddenly (this is a new problem) I am unable to click the buttons or anything on the website except for the header part (the grey part at the top of the screen.) This happens quite frequently to other pages of my site and typically after looking at it for a while I figure it out but this time I just cannot get it. The code for this page will be shown below. Any help will be appreciated. Just a little note, I believe it is in the header because I was editing the search. The code is shown below.
<!DOCTYPE html
<html>
<head>
<title>Your Pages</title>
<meta name="viewport" content="initial-scale=1.0">
<style>
div.wrapper{
margin:auto;
text-align:center;
width:100%;
transition:background 2s ease-in-out;
}
div.pages{
text-align:center;
background-color:#FFFFE8;
margin:auto;
width:95%;
padding:5px;
}
button{
margin:5px;
width:95%;
padding:4px;
background-color:skyblue;
border:2px solid skyblue;
}
a.opt{
margin:5px;
}
input[type="text"], input[type="submit"], textarea{
width:50%;
border-radius:10px;
border:1px solid lightblue;
height:30px;
padding:2px;
margin:4px;
text-align:center;
background-color:white;
}
div.newp{
position:relative;
z-index:0;
width:75%;
margin:auto;
padding:10px;
border-radius:10px;
box-shadow:10px 5px 5px black;
background-color:white;
display:none;
}
</style>
</head>
<body>
<style>
span.posts{
font-family:sans-serif;
font-weight:bold;
font-size:28px;
float:left;
}
div.wrapper{
position:absolute;
top:30%;
width:100%;
font-family:sans-serif;
z-index:-1;
}
h3.num{
font-family:sans-serif;
font-weight:normal;
font-size:28px;
}
div.main{
position:fixed;
border:1px solid black;
box-shadow:10px 10px 10px #000000;
background-color:rgba(000, 000, 000, 0.7);
width:100%;
padding:5px;
}
body{
padding:0px;
margin:0px;
}
a.hea{
text-decoration:none;
color:white;
float:left;
font-size:28px;
}
a.mlinks{
float:none;
}
a.menu{
margin:28px;
color:white;
}
div.mmenu{
display:none;
position:absolute;
z-index:0;
transition:all 2s ease-in-out;
}
input[type="text"].se{
margin-top:7%;
visibility:hidden;
width:0%;
transition:all 2s ease-in-out;
float:left;
}
#media (max-width:480px){
a.menu{
display:none;
}
a.menbs{
float:left;
}
div.mmenu{
display:block;
position:absolute;
left:-100%;
width:100%;
top:30%;
height:70%;
text-align:center;
background-color:black;
color:white;
transition:left 2s ease-in-out;
}
}
#media (min-width:481px){
a.menb{
display:none;
}
}
a.menb{
float:right;
margin-right:8px;
}
a.menbs{
float:right;
margin-right:8px;
}
img.menuimage{
width:3em;
height:3em;
}
div.searchField{
width: 100%;
background-color:black;
display:none;
opacity:0;
position:absolute;
top:0%;
left:0%;
color:white;
text-align:center;
padding-top:10%;
transition:all 1s ease-in-out;
}
input[type="text"].headerSearch{
background-color:transparent;
border:2px solid white;
color:white;
text-align:center;
width:75%;
font-size:28px;
padding:4px;
}
</style>
<div class="main" id="main">
<h3 class="num"><span class="posts">Posts</span>101</h3>
<a class="menu hea" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a>
<a class="menu hea" href="http://www.wilsonfamily5.org/posts101/accounts" target="frame">My Account</a>
<input type="text" onclick="submitForm()" placeholder="search" class="se" id="se">
<a class="menb hea" onclick="mmenu()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/menu.png" alt="menu"></a>
<a class="menbs hea" onclick="search()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/search.png" alt="search" onclick="search()"></a>
</div>
<div class="mmenu" id="mmenu">
<a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a><br>
<a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/account" target="frame">My Account</a>
</div>
<div class="searchField" id="searchField" style="height: 100%;">
<form action="results.php" method="GET">
<h1>search anything, then click enter</h1>
<input type="text" name="q" placeholder="search" class="headerSearch"><br><br>
<a onclick="cancelSearch()" style="color:white;">cancel search</a>
</form>
</div>
<script>
var mmop = false;
function mmenu(){
if(mmop == false){
document.getElementById("mmenu").style.display="block";
document.getElementById("mmenu").style.left="0%";
mmop = true;
}else{
document.getElementById("mmenu").style.left="-100%";
mmop = false;
setTimeout(function(){
document.getElementById("mmenu").style.display="none";
}, 2000);
}
}
var sea = false;
function search(){
document.getElementById("searchField").style.display="block";
document.getElementById("searchField").style.opacity="0.7";
}
function cancelSearch(){
document.getElementById("searchField").style.display="none";
}
function submitForm(){
var se = document.getElementById("se").value;
window.location="http://www.wilsonfamily5.org/posts101/results.php?q=" + se;
}
</script>
<div id="wrapper" class="wrapper">
<h1>Your Pages</h1>
<p>Click on "Create page" to create a page. Click on a page, and then select whether you want to open it, edit it, or unsubscribe.</p>
<p style="color:green;"></p>
<p style="color:red;"></p>
<button id="cbutton" onclick="newf()">Create page</button>
<div id="newp" class="newp">
<form id="newpageform" name="newp" action="newPage.php" method="POST">
<h1>New Page</h1>
<input type="text" name="title" placeholder="Title"><br>
<textarea form="newpageform" name="description" placeholder="Description"></textarea><br>
<textarea form="newpageform" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
<input type="text" onkeyup="ajaxRefresh()" style="display:none; margin:auto;" name="rCode" id="rcode" placeholder="rewards code">
<p id="info"></p>
<input type="submit" value="Create Page"><br>
<a onclick="redeemCode()">Redeem rewards code</a>
</form>
<button onclick="closeNewPage()">Close</button>
</div>
<div id="newep" class="newp">
<form id="editpageform" name="newp" action="editPage.php" method="POST">
<h1>Edit Page</h1>
<input type="text" id="title" name="title" placeholder="Title"><br>
<textarea form="editpageform" id="description" name="description" placeholder="Description"></textarea><br>
<textarea form="editpageform" id="keywords" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
<input type="hidden" name="ident" id="ident">
<input type="submit" value="Edit Page">
</form>
<button onclick="closeEditPage()">Close</button>
</div>
<div id="pages" class="pages">
Helicopter<a class='opt' href='page.php?p=45'>Open</a><a class='opt' onclick='edit(45)'>Edit</a><a class='opt' onclick='unsubscribe(45)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=43'>Open</a><a class='opt' onclick='unsubscribe(43)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=42'>Open</a><a class='opt' onclick='unsubscribe(42)'>Unsubscribe</a><br> <p>To get new pages on this list, create or search for a page!</p>
</div>
</div>
<script>
function newf(){
document.getElementById("wrapper").style.background="black";
document.getElementById("newp").style.display="block";
document.getElementById("cbutton").style.display="none";
document.getElementById("pages").style.display="none";
}
function unsubscribe(id){
window.location="../substatus/unsubscribe.php?i=" + id + "&t=1";
}
function edit(id){
document.getElementById("wrapper").style.background="black";
document.getElementById("newep").style.display="block";
document.getElementById("cbutton").style.display="none";
document.getElementById("pages").style.display="none";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
var text = xhttp.responseText;
var parts = text.split("?(105|SpLiTtEr)!");
document.getElementById("title").value = parts[0];
document.getElementById("description").value = parts[1];
document.getElementById("keywords").value = parts[2];
document.getElementById("ident").value = id;
}
xhttp.open("GET", "http://www.wilsonfamily5.org/posts101/pageInfo.php?i=" + id, true);
xhttp.send();
}
function closeEditPage(){
document.getElementById("wrapper").style.background="white";
document.getElementById("newep").style.display="none";
document.getElementById("cbutton").style.display="block";
document.getElementById("pages").style.display="block";
}
function closeNewPage(){
document.getElementById("wrapper").style.background="white";
document.getElementById("newp").style.display="none";
document.getElementById("cbutton").style.display="block";
document.getElementById("pages").style.display="block";
}
function redeemCode(){
document.getElementById("rcode").style.display="block";
}
function ajaxRefresh(){
var input = document.getElementById("rcode").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText == ""){
document.getElementById("rcode").style.border="2px solid red";
document.getElementById("info").innerHTML = xhttp.responseText;
}else{
document.getElementById("rcode").style.border="2px solid green";
document.getElementById("info").innerHTML = xhttp.responseText + " points are available on this card.";
}
}
}
xhttp.open("GET", "../rewards/ajaxCheck.php?c=" + input, true);
xhttp.send();
}
</script>
</body>
</html>
Short answer:
Your links and such aren't clickable because they have a negative z-index, and are falling underneath the body. Line 91:
div.wrapper {
z-index: -1;
}
Related
If you write text, a textarea increases in size, but when you delete this text then nothing happens. Is it possible to dynamically decrease the height of a textarea if you are deleting text?
$('textarea').on('input', function() {
var scrollHeight = parseInt($(this).prop('scrollHeight'));
$(this).height(scrollHeight);
});
.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
bottom:0;
}
.text
{
resize:none;
width:198px;
height:45px;
max-height:145px;
background-color:rgba(90,90,180,1);
font-size:16px;
font-family:Arial;
overflow-y:auto;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
<textarea class="text" placeholder="Write some text..."></textarea>
</div>
Set the height style instead of the property, and use an initial height so as to always start at 45px.
$('textarea').on('input', function() {
$(this).css('height', "45px");
$(this).css('height', this.scrollHeight+"px");
});
.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
bottom:0;
}
.text
{
resize:none;
width:198px;
height:45px;
max-height:145px;
background-color:rgba(90,90,180,1);
font-size:16px;
font-family:Arial;
overflow-y:auto;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
<textarea class="text" placeholder="Write some text..."></textarea>
</div>
You could use a div with contentEditable instead it will auto-resize depending on the contentno need for any script :
.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
bottom:0;
}
.text
{
resize:none;
width:198px;
min-height:45px;
height:auto;
max-height:145px;
background-color:rgba(90,90,180,1);
font-size:16px;
font-family:Arial;
overflow-y:auto;
padding:0;
}
[contenteditable=true]:empty:before{
content: attr(placeholder);
display: block; /* For Firefox */
color: grey;
}
<div class="OuterDiv">
<div class="text" contentEditable="true" placeholder="Write some text..."></div>
</div>
I am having issues coding a chat box program for a school project. I am having 3 problems with the program. First, my chat message does not post properly in my chat box. Secondly, I want to be able to click exit and have it close to window but am not completely sure how to do it. Lastly, I would like the chat to echo the message or to have ahard coded response at the least. I'm researching how to do that I'm not quite sure how to do this. I have a style sheet and html. Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script>
<link rel="stylesheet" type="text/css" href="jQuery.css">
//my issues seem to be in my Javascript between here************************************
<script type="text/javascript">
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val()
var old = $('#chatbox').html()
$('#chatbox').html(old + '<p>' + message + '</p>');
});
});
</script>
<script >
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
//and here*****************************************************************************
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome <b></b></p>
//Possible issue here*******************************************************************
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
</body>
</html>
Here is my css:
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
Some of the css is unnecessary I'm pretty sure but when I tried taking some out it caused issues. Any help is greatly appreciated.
try copying the following - i put the styling into the head, moved the javascript to the end, and swapped the input for a button. This is ties to the onclick and appends the new comment into the chat window. It works, but could be done better, also I have not addressed the issue of closing the window, but this does post the new comment into the chat region.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<style>
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome</p>
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message">
<input name="usermsg" type="text" id="usermsg" size="63" />
<button type="button" id="submitmsg" value="send">Send</button>
</form>
</div>
<script>
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val();
$('#chatbox').append('<p>' + message + '</p>');
$('#usermsg').val('');
});
});
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
</body>
</html>
one problem is that you are using a form that then posts to the same page - reloading it.
I copied your code into a testpage (called chatTest.html) and got the following url after hitting the send button:
chatTest.html?usermsg=test+message&submitmsg=Send
your message does get posted into the chat section but is then removed when the page reloads. and because you are not specifying a method - it is treating it as a get form and posting the message as a querystring appended to the url.
if you are planning on saving the comments to a database, then you should change the action of the form to a different php page, process the results and return the saved content into the chat section- perhaps using Ajax so that you don;t have to reload the page on every chat submission.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay so i made this jquery slider from a video series on youtube and it doesn't seem to be working right... The image fades in at first but then the next image doesn't come in. How can i fix this.. Im using older versions of jquery because of deprecated functions
here is the html.
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript">
</script>
<script src="jquery-ui-1.8.18.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last">
Contact
</li>
<li>
Products
</li>
<li>
About
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>
Here is just a simple title
</h2>
<p>
This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.
</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>
Welcome to
</h3>
<p>
A dummy website!!
</p>
</div>
<div class="latestNews">
<hr>
<h2>
Latest News
</h2>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>
Newsletter sign-up
</h3>
<hr>
<p>
If you would like to sign up for our free NewsLetter please enter your email below
</p>Unsubscribe
</div><input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">
Submit
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css:
*{margin:0;padding:0;}
#font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$("slider #"+count).show("slide", {direction:'right'}, 500);
$("slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and the images zip
https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0
The problem is that your syntax is wrong, the class selector should contain a dot
change $("slider") to $(".slider")
try this
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
console.log(count);
$(".slider #" + count).show("slide", {direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and replace your slider container with
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
and make sure to rename your image slider3.jpg to slide3.jpg
Well, Here are the following problems make it not working, and you can have a try:
In your javascript file, the data type of variable count is int, that's the reason why selector cannot find the DOM pointing to.
You should code like count.toString().
You select dom by Id, so you don't need to code like: $("slider #"+count), and $("#"+ count.toString()) is the proper way.
In the html, the name of image3 is incorrect, should be slider3.jpg.
I think that will help you to resolve the problem of image 2 and 3 not showing.
The other thing you need to think of is, how to slide back.
I am starting up on jquery and was tryin to create a simple div hide and show effect. The effects seem to work fine but i need that when user clicks on any other part of the document(i. except the hide/show box), the box should hide back. This is the jsfiddle :
http://jsfiddle.net/39DzJ/. I have not styled it properly. I wanted the effects to work first.
Can anyone help me out ?
Here's the HTML code :
<style>
#mail_floater
{
background:#fce8bd;
height:88px;
width:342px;
border:1px solid #b7ad02;
border-radius:5px;
position:absolute;
left:200px;
top:50px;
border-top:none;
z-index:100;
padding:0;
}
#subscribe_user
{
width:248px;
height:16px;
border:1px solid #b7ad02;
}
#cust_care_floater
{
background:#fce8bd;
height:12px;
width:108px;
border:1px solid #b7ad02;
border-radius:2px;
border-bottom-left-radius:2px;
position:absolute;
left:450px;
top:30px;
border-top:none;
z-index:100;
clear:both;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
color:#036f05;
box-shadow:1px 1px 3px #ccc inset;
}
#closer
{
float:right;
margin-right:5px;
margin-top:2px;
width:19px;
height:19px;
background:url(../images/close.png) no-repeat;
}
</style>
</head>
<body>
Subscribe
Customer care
<div id="mail_floater">
<h5>Email</h5>
<div id="closer"></div>
<div id="email_input"><form><label>Enter E-mail : </label><span><input type="text" id="subscribe_user" /></span>
<input type="submit" id="subscribe_me" value="Done" /></form></div>
</div>
<div id="cust_care_floater">
<span style="padding:0px 10px 0 10px;">033-993-99920</span>
</div>
</body>
The javascript code :
$(document).ready (
function()
{
var disp_box=$('#mail_floater');
var sub_link=$('#subscribe');
var disp_box_2=$('#cust_care_floater');
var sub_link_2=$('#customer_care');
disp_box.hide();
disp_box_2.hide();
sub_link.click
(
function()
{
disp_box.show();
});
disp_box.find('#closer').click
(
function()
{
disp_box.hide();
});
sub_link_2.click
(
function()
{
disp_box_2.show();
});
});
$(document).on('click', ':not(.hideDiv)', function(e){
if($(e.target).is(':not(.hideDiv)')) { //extra check for good measure
$('.hideDiv').hide();
}
});
Demo: http://jsfiddle.net/maniator/S9fDy/
please help me with this roll up/down side bar menu.
I have made a video clip to demonstrate.
http://www.youtube.com/watch?v=Eegqh1w3eJQ
Here is html code:
<!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>Mode 1</title>
<link href="Style_sheet.css" rel="stylesheet" type="text/css" />
<script src="Display text.js" type="text/javascript"></script>
</head>
<body>
<div class="Body">
<div class="header">
<h1 id="head">Manage Components</h1>
<h3 id="select-system">Select System</h3>
</div>
<div class="side-nav">
57.102 Introductory Spanish<br />
<div id="n1" style="display:none">
Section 1:Introduction to Spanish Culture<br />
<div id="n2" style="display:none">
Topic 1:Getting started<br />
Topic 2:Introduction to Grammar<br /><br /><br />
</div>
Section 2:Getting started with reading and writing<br />
<div id="n3" style="display:none">
Topic 1:Reading Spanish<br />
<div id="nn3" style="display:none">
Mode 1:Spanish Components
<div id="nn4" style="display:none">
Spanish Reading
</div>
</div><br />
Topic 2:Writing in Spanish<br />
</div>
</div><br />
Topic SuperMode<br />
<div id="m1" style="display:none">
Study Guide<br />
Key Words<br />
<div id="m2" style="display:none">
Pragmatics<br />
Manana<br />
Tiempo<br />
Cara<br />
Triste<br />
</div>
Learning Support<br />
Help<br />
Chat<br />
Email<br />
Notes<br />
</div><br />
Pre-defined modes<br />
<div id="p1" style="display:none">
Culture aspects<br />
Reading practice<br />
Writing practice<br />
Listening and speaking<br />
</div>
</div>
<div id="slection">
57.102 Introductory Spanish > Section 1 > Topic 1 > Mode 1
</div>
<div id="content">
<p id="list-component">List of Available Components </p>
<!--<div id="check-box">
<input type="checkbox" value="checkbox1" />
<label id="label">Reading</label>
<label id="label2">15-10-2010</label>
<label id="label">10:52</label>
<label id="label2">Kemp</label><br />
<input type="checkbox" value="checkbox2" />
<label id="label">Listening</label>
<label id="label2">14-10-2010</label>
<label id="label">8:02</label>
<label id="label2">Kemp</label><br />
<input type="checkbox" value="checkbox3" />
<label id="label">Writing</label>
<label id="label2">10-10-2010</label>
<label id="label">7:35</label>
<label id="label2">Kemp</label><br />
<input type="checkbox" value="checkbox4" />
<label id="label">Grammar</label>
<label id="label2">01-10-2010</label>
<label id="label">4:20</label>
<label id="label2">Kemp</label><br />
</div>-->
<table id="tabl">
<tr>
<td><input type="checkbox" value="checkbox1" /></td>
<td>Reading</td>
<td>15-10-2010</td>
<td>10:52</td>
<td>Kemp</td>
</tr>
<tr>
<td><input type="checkbox" value="checkbox2" /></td>
<td>Listening</td>
<td>14-10-2010</td>
<td>08:02</td>
<td>Kemp</td>
</tr>
<tr>
<td><input type="checkbox" value="checkbox3" /></td>
<td>Writing</td>
<td>10-10-2010</td>
<td>07:35</td>
<td>Kemp</td>
</tr>
<tr>
<td><input type="checkbox" value="checkbox4" /></td>
<td>Grammar</td>
<td>01-10-2010</td>
<td>04:20</td>
<td>Kemp</td>
</tr>
</table><br />
<input type="button" name="edit_button" id="save_but" value="Edit" />
<input type="button" name="delete_button" id="cancel_but" value="Delete" />
<input type="button" name="Student Preview" id="cancel_but" value="preview" onclick="window.location.href='student_preview.html'" />
<input type="button" name="back" id="preview-but" value="Back" />
</div>
</div>
</body>
</html>
Here is javascript
function show(id)
{
object=document.getElementById(id);
if(object.style.display=="none")
{
object.style.display="";
}
else
{
object.style.display="none";
}
}
Here is CSS
#charset "utf-8";
/* CSS Document */
html,body{
padding:0;
margin:0;
background-color:#E8E8E8;
}
.Body{
background-color:#FFF;
width:1050px;
height:900px;
margin:auto;
padding:0;
position:relative;
}
.header{
background-color:#FFF;
width:1048px;
height:140px;
float:right;
border:1px #F00 dotted;
position:relative;
}
.header #head{
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:46px;
}
.header #select-system{
position:absolute;
left:20px;
bottom:-18px;
font-family:Verdana, Geneva, sans-serif;
text-decoration:underline;
}
.side-nav{
background-color:#FFF;
width:250px;
height:757px;
position:absolute;
left:auto;
bottom:0px;
border:1px dotted #F00;
}
.side-nav #english{
text-decoration:none;
font-size:18px;
font-weight:bold;
padding:5px;
color:#06F;
}
.side-nav #blue{
color:#03F;
text-decoration:none;
font-weight:bold;
font-size:14px;
}
.side-nav #green{
color:#6F0;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:15px;
}
.side-nav #dark_red{
color:#900;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:30px;
}
.side-nav #light_blue{
color:#0CF;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:45px;
}
.side-nav #red{
color:#F00;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:60px;
}
.Body #content{
position:absolute;
left:260px;
top:180px;
width:780px;
height:700px;
border:1px solid #F00;
}
.Body #content1{
position:absolute;
left:260px;
top:150px;
width:780px;
height:740px;
border:1px solid #F00;
}
.Body #txt{
margin-left:20px;
}
.Body #slection{
position:absolute;
left:260px;
top:150px;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#F00;
font-weight:bold;
}
.Body #boxes{
border:2px solid #000;
margin-left:10px;
margin-top:10px;
height:25px;
}
.Body #text{
font-weight:bold;
font-size:20px;
margin-left:20px;
margin-top:10px;
}
.Body #cont_box{
width:730px;
height:180px;
border:2px solid #000;
margin-left:20px;
font-size:20px;
color:#00F;
padding:5px;
}
.Body #cont_box1{
width:730px;
height:280px;
border:2px solid #F60;
margin-left:13px;
font-size:20px;
color:#06F;
padding:10px;
}
.Body #cont_box2{
width:645px;
height:350px;
border:2px solid #F60;
margin-left:60px;
font-size:20px;
color:#06F;
}
.Body #browse_box{
border:2px solid #000;
margin-left:150px;
margin-bottom:10px;
height:25px;
width:400px;
}
.Body #button{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:10px;
}
.Body #button:hover{
background-color:#09F;
}
.Body #button_more{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:567px;
}
.Body #save_but{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:150px;
}
.Body #cancel_but{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:20px;
}
.Body #preview-but{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:100px;
}
.Body #preview-but:hover{
color:#009;
}
.Body #checkbox{
margin-left:150px;
height:20px;
}
.Body #dropdownbox{
width:180px;
height:30px;
position:absolute;
left:280px;
top:10px;
}
.Body #b1{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:#F00;
}
.Body #icons{
width:130px;
height:140px;
margin-right:10px;
margin-left:60px;
margin-top:50px;
float:left;
}
.Body #text_icons{
width:190px;
height:15px;
float:left;
font-size:14px;
text-decoration:none;
color:#06F;
margin-left:20px;
margin-right:5px;
}
.Body #extra-materials{
font-size:18px;
text-decoration:none;
margin-left:60px;
color:#06F;
}
.Body #extra-materials:hover{
text-decoration:underline;
}
.Body #list-component{
margin-left:40px;
font-size:18px;
font-weight:bold;
}
.Body #check-box{
margin-left:150px;
}
.Body #label{
margin-left:30px;
}
.Body #label2{
margin-left:80px;
}
.Body #tabl{
border:hidden;
width:500px;
height:10px;
margin-left:150px;
margin-top:50px;
}
Please help!!!
Thanks in advance!
It looks to me that your problem lies in the fact that your "Spanish Component" link sends you to a different .html page. When the new page loads, the menu on the left side of the page also reloads to its original state (with everything hidden, or "rolled up" as you say). So, the two solutions I can see are:
(1) Don't let the page reload.
(2) Save the state of the menu, and send that state to the new page (mode 1.html), so when the new page loads, you can load the menu appropriately.
To implement the first solution, I would use AJAX to dynamically get the data from mode 1.html and display it on the page without the page reloading. If you are unfamiliar with AJAX w3schools.com has a pretty good tutorial here.
To implement the second solution, you need a way to save the state, then send it to the next page. This would probably require some server-side scripting, and even then probably wouldn't work as well as the first solution, so I would suggest sticking with the AJAX solution.