I'm working with HTML, CSS, JavaScript and jQuery on a prototype for a web application which shall be used on iPad.
I have programmed a test page, which have two divs: one for input fields and the other for displaying a help file (in my case a PDF).
After the page was started, the first div is displayed and the second collapsed.
Above the div-tags i got a button.
When i start the page for the first time and click on that button, i want to collapse the div with the input fields and show the other div with the help file.
Next time i click on the button i want to show the div with the input fields again and collapse the div with the help file.
But when i click the button after starting my test page, the first div (with id "content") is collapsed and the help-div displayed for the fraction of a second and the the original state of the page is restored.
Can anybody help me please?
Here's the HTML i'm using:
<form style="position:relative; height:100%; width:100%; overflow-x:scroll; overflow-y:scroll;">
<table>
<tr>
<td>
<button id="load_help" style="font-weight:bold; margin:5px; float:right;">i</button>
</td>
</tr>
<tr>
<td>
<div id="content" style="height:300px; width:500px; background-color:yellow; display:block;">
<label style="position:absolute; top:10px; left:10px; font-family:Arial; font-style:normal; font-weight:bold; font-size:16px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Test page</label>
<label style="position:absolute; top:50px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 1</label>
<label style="position:absolute; top:90px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 2</label>
<label style="position:absolute; top:130px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 3</label>
</div>
</td>
</tr>
<tr>
<td>
<div id="help" style="width:500px; height:200px; background-color:aqua; display:none;">
<object type="application/pdf" data="../HelpDocuments/MyPdf.pdf" style="width:500px; height:500px;"></object>
</div>
</td>
</tr>
</table>
<script src="../scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#load_help").click(function () {
var contentElement = document.getElementById("content");
var helpElement = document.getElementById("help");
if (contentElement.style.display == "block") {
contentElement.style.display = "none";
helpElement.style.display = "block";
}
else {
contentElement.style.display = "block";
helpElement.style.display = "none";
}
});
});
</script>
</form>
Your problem is that you are "submitting" the form when you click the button, you need to prevent that event like this:
e.preventDefault()
You can also type your button as a button to prevent submit like this:
<button type="button"></button>
$(document).ready(function() {
$("#load_help").click(function(e) {
var contentElement = document.getElementById("content");
var helpElement = document.getElementById("help");
if (contentElement.style.display == "block") {
contentElement.style.display = "none";
helpElement.style.display = "block";
} else {
contentElement.style.display = "block";
helpElement.style.display = "none";
}
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="position:relative; height:100%; width:100%; overflow-x:scroll; overflow-y:scroll;">
<table>
<tr>
<td>
<button id="load_help" style="font-weight:bold; margin:5px; float:right;">i</button>
</td>
</tr>
<tr>
<td>
<div id="content" style="height:300px; width:500px; background-color:yellow; display:block;">
<label style="position:absolute; top:10px; left:10px; font-family:Arial; font-style:normal; font-weight:bold; font-size:16px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Test page</label>
<label style="position:absolute; top:50px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 1</label>
<label style="position:absolute; top:90px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 2</label>
<label style="position:absolute; top:130px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 3</label>
</div>
</td>
</tr>
<tr>
<td>
<div id="help" style="width:500px; height:200px; background-color:aqua; display:none;">
<object type="application/pdf" data="../HelpDocuments/MyPdf.pdf" width="500px" height="500px"></object>
</div>
</td>
</tr>
</table>
</form>
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;
}
I have been trying to find the best way to style select drop downs and since you can't really at all I have been trying to find the best way to recreate a simple version using other form elements like radio buttons/checks.
My question is does anyone have a better method then mine or knows a workaround to style the normal one, this is what I came up with: http://codepen.io/naniio/pen/RPGNGj
HTML:
<div class="container">
<form action="">
<p>Radio buttons can be hidden by adding "hidden"</p>
<input type="radio" id="item-1" name="item-1" value="drama">
<input type="radio" id="item-2" name="item-1" value="humor" >
<input type="radio" id="item-3" name="item-1" value="ecchi" >
<input type="radio" id="item-4" name="item-1" value="magic" >
<div class="select_box">
<span id="select-op-btn" class="js-option">Select</span>
<ul id="options" class="js-drop">
<li><label for="item-1" class="js-option">Drama</label></li>
<li><label for="item-2" class="js-option">Humor</label></li>
<li><label for="item-3" class="js-option">Ecchi</label></li>
<li><label for="item-4" class="js-option">Magic</label></li>
</ul>
</div>
</form>
CSS:
body{
font-size:18px;
line-height:20px;
font-family: 'Open Sans', sans-serif;
}
p{
line-height:22px;
color:#111111;
}
.container{
width:500px;
padding:15px;
margin:50px auto;
}
#select-op-btn{
border:1px solid #F2F2F2;
display:block;
padding:5px;
cursor:pointer;
background-image:url('http://i.imgur.com/K5gtkay.png');
background-repeat:no-repeat;
background-position:right center;
}
.select_box{
box-sizing: border-box;
margin:30px 0;
}
ul#options{
list-style-type:none;
font-size:0px;
border-color:#F2F2F2;
border-style: solid;
border-width: 0px 1px 1px 1px;
}
ul#options li label{
font-size:18px;
display:block;
padding:5px;
}
ul#options li:hover{
background:#F2F2F2;
}
.js-drop{
display:none;
}
.js-option{
display:inline-block;
}
label{
cursor:pointer;
}
JS:
$('input').on('change', function() {
$('#select-op-btn').html(this.checked ? this.value : '');
});
$('.js-option').on('click', function() {
$( "#options" ).toggleClass( "js-drop" );
});
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.
My website is properly centered and fitted in all browser windows except the Internet Explorer.
What happens in IE is that it removes the margin from left and forces to align the body left, what I don't want. How can I solve this issue so that the IE can display my site exactly as other browsers do?
If you prefer you can look at the live view here though I am going to paste my code.
:HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>7Seas Redovisning</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1><img src="img_akin/7seas.jpeg" id="logo" alt=""/>7Seas Redovisning</h1>
<p><b>
<span class="mob_tele">Mob: 076-9516926 <br />
Tel: 040-133403</span><br />
info#7seasredovisning.se</b>
</p>
</header>
<nav id="top_menu">
<ul>
<li>Intresseanmälan</li>
<li>Öppettider</li>
</ul>
</nav>
<div id="new_div"> <!--only the main content-->
<section id="main_section">
<marquee behavior="alternate">We are coming soon, please check back later.</marquee>
<img src="img_akin/image_1st_body.jpg" id="img1" width="650" height="340" alt=""/>
<ol>
<li>LÖPANDE BÖKFÖRING</li><br />
<li>BOKSLUT & ÅRSREDOVISNING</li><br />
<li>SKATTEDEKLARATION</li><br />
<li>LÖNEADMINISTRATION</li><br />
<li>FAKTURERING</li><br />
<li>INKOMSTDEKLARATION</li><br />
<li>MOMSDEKLARATION</li><br />
<li>BOLAGSBILDNING</li><br />
<li>EKONOMI KONSLUT</li><br />
</ol>
</section>
</div>
<footer id="the_footer">
<ul>
<li>
© 7 seas Redovisning <br />
En del av 7seas Money Transfer KB<br />
F-skatt registrerat <br />
Org, Nr: 969756-4079 <br />
SEB Företagskonto: 5502-1030132<br />
BG: 102-5006
</li>
<li>
Besökadress: Skomakarebyn 8E<br />
218 41 Bunkeflostrand<br />
Malmö, Sweden <br />
Follow us on FB <!-- SMARTADDON BEGIN -->
<br />
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<img alt="Share" src="http://s1.smartaddon.com/s8.png" border="0" />
<br /><i>Design & Development: DH BANGLADESH in SWEDEN</i>
</li>
<li>
Tel: 040-133403<br />
Mob: 076-9516926<br />
e-Mail: info#7seasredovisning.se<br/>
www.7seasredovisning.se<br/>
<span id="webstat">
<script src="http://stats.webstat.se/assets/stat_isp2.php"></script>
<script type="text/javascript">
<!--
document.write("<" + "script src=\"http://stats.webstat.se/statCounter.asp?id=38356&size=" + screen.width + "x" + screen.height + "&depth=" + screen.colorDepth + "&referer=" + escape(document.referrer) + "&isp=" + info2+ "\"></" + "script>");
-->
</script>
</span>
<!-- Slut WEBSTAT.SE kod -->
</li>
</ul>
</footer>
</div>
</body>
</html>
.CSS:
*{
margin:0px;
padding:0px;
}
#top_header h1 {
font:bold 40px Prisoner SF;
margin-top:-20px;
color:#006400;
}
#top_header p {
margin-top:-100px;
color:#A0522D;
float:right;
font-family:Euphemia;
}
.mob_tele{
font-size:12.5px;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-o-box;
display:-moz-box;
display:-ms-box;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
-o-box-pack:center;
background-color:#E6E6FA;
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
display:-webkit-box;
display:-o-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
background-color:white;
}
#top_header{
border:3px soild gray;
padding:20px;
}
#logo{
padding-top:20px;
}
#top_menu{
border: 2px solid #20B2AA;
border-radius:4px;
background:linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-webkit-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-moz-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-ms-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-o-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
/*background:#8FBC8F;*/
color:black;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:7px;
font:bold 18px Euphemia;
float:right;
margin-right:50px;
}
#new_div{
display:block;
display:-moz-box;
display:-o-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
/*
border: 1px solid blue;
*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
/*
float: left;
width: calc(75% - 82px);
*/
}
#main_section li{
margin-left:255px;
font-family:Euphemia;
background-image:url(img/backgrounds.jpg) no-repeat;
font-weight:bold;
}
#main_section marquee{
font-family:Segoe Print;
font-size:40px;
font-weight:bold;
margin-bottom:40px;
color:#B22222;
}
#img1{
float:right;
}
#the_footer{
/*
text-align:center;
*/
background:#F0F8FF;
/*
padding:20px;
*/
border-top:2px solid green;
}
#the_footer li{
list-style:none;
display:inline-block;
padding:40px;
margin-left:35px;
font-family:Euphemia;
font-size:13px;
}
Instead of -ms-box, try this:
body {
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
}
This works for IE10+.