I'm having some troubles with Javascript. I'm not that advanced when it comes to programming in Javascript, so I'm having a tough time.
What I gotta do is making a calendar from scratch, the problem I have right now, is having my code to only display THIS WEEK, and only this week. then when pressed on the right arrow, it should display the next week, or when pressed on the left arrow, it should display the next before.
Everything is made local.
Everything on the site itself, is in Danish, but I've commented in english, and named the variables in english, so dont worry about all the output text.
here's some code
!! UPDATE !!
JSFIDDLE https://jsfiddle.net/b6n3d36a/
the days wont display at all, please help
** !! UPDATE 2 !!*
I fixed it. I got help from a co-worker. We got it working.
Thanks to everyone looking into this.
THE INDEX FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />
<title>Nikolaj kalender</title>
<script src="js/libs/handlebars/handlebars-v4.0.5.js"></script>
<script src="js/libs/moment/moment-with-locales.js"></script>
<script src="js/libs/jquery-1.12.4.min.js"></script>
<script src="js/core.js"></script>
<!-- RESPONSIVE STYLESHEET -->
<link rel="stylesheet" href="style/responsive/responsive.css">
<!-- STANDARD STYLE SHEET -->
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<script>
$(document).ready(function () {
moment.locale('da'); //danish language
startdate = moment("2016-06-07"); //todays date (yy-mm-dd-h:i:s) not sure if right format thought
var new_date = moment(startdate, "DD").add(5, 'days');
var day = new_date.format('ddd');
// var month = new_date.format('MM');
// var year = new_date.format('YYYY');
var dataSet = {
dates: []
}
var today = moment();
var todayDay = today.format('ddd'); // get TODAY date (ex; 2nd)
function generateDaterange() {
var start = new Date();
var dates = [];
for (var i = 0; i < 7; i++) {
var d = new Date(start.getTime());
d.setDate(d.getDate() + i);
console.log(d);
var date = {
date: d,
date_human: moment(d).format('ddd'),
date_humanDays: moment(d).format('Do')
//date_human_today: moment(d).text("hello")
}
dates.push(date);
}
console.log(dates);
console.log("heroppe ovenover")
dataSet.dates = dates;
}
// var dataSetToday = dataSet[0]; //todays date in our array
// var val_to_replace = ","; //this is what has to be replaced
// var replace_with = "--"; //this is what shall be there instead
// $.each(dataSetToday, function(key, val){
// dataSetToday[key] = val.replace(val_to_replace, replace_with);
// }
// console.log(dataSetToday);
function init() {
generateDaterange();
buildDaterange();
}
init();
function buildDaterange() {
console.log('build')
$.each(dataSet.dates, function (k, v) {
var title = String(v.date_human).substr(0, 1);
if(dateIsToday(new Date(), v.date))
title = 'I DAG';
$('.cal_header thead th').eq(k).text(title)
$('.cal_header tbody td p').eq(k).text(v.date_humanDays)
})
}
var startweek = moment().startOf('isoWeek');
var endweek = moment().endOf('isoWeek');
console.log("herunder er slut for ugen");
console.log(endweek);
function dateIsToday(date_a, date_b){
return (
date_a.getDate() == date_b.getDate() &&
date_a.getMonth() == date_b.getMonth() &&
date_a.getFullYear() == date_b.getFullYear()
)
}
function thisWeek(date_c, date_d){
}
});
</script>
<div class="create_form">
</div>
<div id="wrapper">
<div id="header_for_cal">
<div id="back_btn"><p><span> < </span>Tilbage</p></div>
<div id="cal_header_title"><h3>Kalender</h3></div>
<div><p>+</p></div>
<div class="clear"></div>
</div>
<div class="contentForDate">
<div class="dateHeader">
<img src="images/content/header.jpg">
</div>
<div class="date_content">
<div>
<h3>Svømmehal</h3>
<p>Aarup Svømmehal</p>
</div>
<div>
<p>Tirsdag, 13 Juni, 2016</p>
<p>10:00 - 12:00</p>
</div>
<div>
<p>
ge Lorem Ipsum er, at teksten indeholder mere
eller mindre almindelig tekstopbygning
i modsætning til "Tekst her – og mere tekst her", mens det samtidigt ligner almindelig tekst.
Mange layoutprogrammer og we
</p>
</div>
</div>
</div>
</div>
<div class="cal_header">
<div id="left_arrow">
<p> < </p>
</div>
<div class="calendar">
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
</tr>
</tbody>
</table>
</div>
<div id="right_arrow">
<p> > </p>
</div>
</div>
<div class="activities">
<ul id="swimming">
<li class="activi_time">KL 09:00</li>
<li class="activi_title">Svømmehal
<p class="title_sub">Aarup Svømmehal</p></li>
</ul>
<ul>
<li class="activi_time">KL 10:00<p class="time_sub">KL 10:30</p></li>
<li class="activi_title">Vaske tøj</li>
</ul>
<ul>
<li class="activi_time">KL 13:00</li>
<li class="activi_title">Lav Té</li>
</ul>
<ul>
<li class="activi_time">KL 22:00</li>
<li class="activi_title">Godnat</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<ul>
<li>
<img src="images/icons/calendar.png">
<p>Kalendar</p>
</li>
<li>
<img src="images/icons/walkthrough.png">
<p>Gennemgange</p>
</li>
<li>
<img src="images/icons/food.png">
<p>Mad</p>
</li>
<li>
<img src="images/icons/activities.png">
<p>Aktiviteter</p>
</li>
<li>
<img src="images/icons/more.png">
<p>Mere</p>
</li>
</ul>
</div>
</body>
</html>
HERE'S THE CSS
*{
margin:0;
padding:0;
font-family:helvetica, arial, sans-serif;
}
body{
background-color:lightgrey;
}
.clear{
clear:both;
}
#wrapper{
overflow:hidden;
max-width:100%;
}
.contentForDate{
width:100%;
max-width:100%;
position:absolute;
background-color:white;
right:-100%;
z-index:9999;
}
.date_content{
padding:0px 10px;
}
.contentForDate .dateHeader img{
min-width:100%;
max-width:100%;
}
.contentForDate div{
max-width:100%;
margin-bottom:20px;
}
.contentForcccDate div:nth-of-type(2){
display:flex;
justify-content: space-between;
}
.contentForDate div:nth-of-type(2) p{
max-width:100%;
color:grey;
font-size:14px;
}
.contentForDate div:nth-of-type(3) p{
color:grey;
margin-top:7px;
max-width:90%;
}
.cal_header{
width:100%;
min-height: 10px;
background-color: #efeff4;
display:flex;
justify-content:space-between;
position:relative;
overflow:hidden;
}
.activities ul{
background-color:white;
list-style:none;
border-bottom:2px solid lightgrey;
z-index:8;
}
.activities ul li{
display:inline-block;
font-size:15px;
position:relative;
}
.activities ul li:first-of-type{
margin-left:35px;
padding:10px 10px 25px 0px;
border-right:2px solid #0273b2;
z-index:99;
}
.activities ul li p{
font-size:12px;
position:absolute;
width:100px;
}
.timerange li{
display:block ;
float:left;
}
table {
width: 100%;
border-collapse: collapse;
border:none;
}
/* Zebra striping */
tr:nth-of-type(odd) {
}
th {
background-color: #f6f6f6;
padding:12px;
text-transform: uppercase;
font-weight:lighter;
}
tbody tr{
border-top:1px solid grey;
}
td{
width:20px;
}
td {
padding: 6px;
text-align: center;
font-weight: lighter;
font-size:14px;
}
td.currentDay{
color:gray;
}
td p{
padding:7px;
width:20px;
margin:0 auto;
}
p#selectedDate{
background-color: #0273b2;
color:white;
border-radius: 50%;
}
.calendar{
width: 100%;
}
#left_arrow, #right_arrow{
width:40px;
background-color:darkgrey;
position:relative;
}
#left_arrow p, #right_arrow p{
position:absolute;
top: 35%;
left: 40%;
color:white;
font-weight:lighter;
}
#header_for_cal{
display:flex;
width:100%;
background-color:#0273b2;
color:white;
font-weight:lighter;
padding:20px 0;
z-index:99999;
}
#header_for_cal h3{
font-weight:lighter;
display:inline-block;
font-size:21px;
}
#cal_header_title{
flex-grow: 1;
}
#cal_header_title {
text-align:right;
}
#header_for_cal div:nth-of-type(2){
flex-grow:1;
}
#header_for_cal div:nth-of-type(3){
flex-grow: 1;
}
#header_for_cal div:nth-of-type(3) p{
float:right;
}
#header_for_cal p{
display:inline-block;
font-weight:lighter;
font-size:17px;
}
#swimming{
cursor:pointer;
}
#footer{
width:100%;
position:absolute;
bottom:0;
background-color:white;
border-top:2px solid grey;
}
#footer ul{
text-align:center;
}
#footer ul li{
display: inline-block;
padding:7px 10px;
margin:0px 4px;
color:#0273b2;
}
#footer ul li img{
max-width:35px;
}
HERE'S THE JQUERY CODE FOR SOME ANIMATED STUFF (NOT THAT IMPORTANT AT THIS MOMENT)
$(document).ready(function() {
$(".contentForDate").hide();
$(".cal_header p").click(function(e){
$('.cal_header p#selectedDate').removeAttr('id');
if($(e.target).is('.cal_header td p')){
$(this).attr('id', 'selectedDate');
}
});
$("#back_btn").hide();
$("#swimming").click(function(){
if ( $(".contentForDate" ).is( ":hidden")) {
$(".contentForDate").show(200);
var left = $('.contentForDate').offset().left;
$(".contentForDate").css({left:left}).animate({"left":"0%"}, "fast");
$("#back_btn").show();
}
});
$("#back_btn").click(function(){
if($(".contentForDate").css("display", "block")){
$(".contentForDate" ).hide(200);
$("#back_btn").hide();
}
});
});
Hope you can help me, I've ran out of ideas to what to do, and I've tried searching for it on here, but nothing seems to work. So here goes nothing :)
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I am building a todo app. When I add a todo and then click on the todo item below, its text should be crossed (line-through) but its not happening.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>Todo</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Todo</h1>
<div class="add">
<div class="text">
<input class="data" placeholder="Enter data">
</input>
</div>
<div class="submit">
<div class="submit-text">
Add
</div>
</div>
</div>
</div>
</div>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="script.js" ></script>
</body>
</html>
CSS:
body{
margin:0;
padding:0;
}
.container{
width:600px;
margin:0 auto;
color:#000;
}
.header{
background:#dddddd;
height:200px;
}
.header h1{
color:#FFF;
font-size:50px;
text-align: center;
margin-top:0px;
}
.add{
height:50px;
background:#FFF;
border-left:1px solid #dddddd;
}
.text,.submit{
display:inline-block;
float:left;
}
.text{
width:70%;
height:100%;
}
.submit{
width:30%;
background:green;
height:100%;
font-size: 30px;
}
.data{
font-size: 30px;
/* margin-top: 10px; */
/* padding: 10px 0; */
padding-left: 10px;
width:100%;
border: none;
padding-top: 8px;
padding-bottom: 8px;
}
.submit-text{
/* margin-top: 10px; */
padding: 10px 0;
text-align: center;
color:#FFF;
}
.todorow{
width:100%;
height:50px;
font-size: 30px;
padding-top:10px;
background:#000000;
color:#FFF;
}
.todoitem{
width:95%;
float:left;
display:inline-block;
}
.todoremove{
width:5%;
float:left;
display:inline-block;
}
.strike{
text-decoration: line-through;
}
JS:
console.log("loads");
$(document).ready(function(){
$(".submit").click(function(){
// if (document.getElementsByClassName("data")[0].innerHTML >0)
//{
var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
$(".container").append(value);
//}
});
$(".todoitem").on("click", "#__internal", function(){
$(".todoitem").addClass("strike");
alert("done");
console.log("done");
});
console.log("loads");
});
Fiddle
Your fiddle was not working because $ was not defined, but I've fixed it and managed to find the error. You subscribing to .todoitem selector, when there are no todo items. Years ago we used .live() as a workaround, but now we use even simpler syntax.
$(document).ready(function(){
$(".submit").click(function(){
// if (document.getElementsByClassName("data")[0].innerHTML >0)
//{
var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
$(".container").append(value);
//}
});
$(document).on("click", ".todoitem", function(){
$(this).addClass("strike");
alert("done");
console.log("done");
});
console.log("loads");
});
So basically you add handler to document with delegated event. You can read more using this link http://api.jquery.com/on/
I'm currently working on a project for university where we are to create a website for a company that wants to sell products online. I have been going through some difficulty when it came to the shopping cart but fortunately I was able to get a functioning 'drag and drop' cart to work with the products on my site.
I am now stuck where I attempted to add a clear cart button that does exactly what it says 'clear the cart of all products' but I have had no luck. An addition to this I am struggling to find a good source that could help me with getting JSON storage to work with my cart.
These are the final things I have to get done. Any help or guides are appreciated.
This is the coding:
var data = {"total":0,"rows":[]};
var totalCost = 0;
$(function(){
$('#cartcontent').datagrid({
singleSelect:true
});
$('.item').draggable({
revert:true,
proxy:'clone',
onStartDrag:function(){
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index',10);
},
onStopDrag:function(){
$(this).draggable('options').cursor='move';
}
});
$('.cart').droppable({
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
},
onDrop:function(e,source){
var name = $(source).find('p:eq(0)').html();
var price = $(source).find('p:eq(1)').html();
addProduct(name, parseFloat(price.split('$')[1]));
}
});
});
$("#clear_cart").click(function(event){
clearCart();
displayCart();
});
function addProduct(name,price){
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.total += 1;
data.rows.push({
name:name,
quantity:1,
price:price
});
}
add();
totalCost += price;
$('#cartcontent').datagrid('loadData', data);
$('div.cart .total').html('Total: $'+totalCost);
}
.products{
list-style:none;
margin-right:150px;
padding:0px;
}
.products li{
display:inline;
float:left;
margin:10px;
}
.item{
display:block;
text-decoration:none;
background-color: #edeeef;
}
.item img{
margin: 0 auto;
border:1px solid #333;
display: inline-block;
width: 100%;
height: 135px;
}
.cart th
{
text-align: center;
}
.item p{
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.cart{
position:absolute;
right: 0;
bottom:0;
width:auto;
height:60%;
background:#ccc;
padding:0px 10px;
margin: auto;
}
.cart h1{
text-align:center;
color:#555;
font-size: 30px;
}
.cart img{
padding: 10px;
height: 50px;
width: 50px;
}
h2{
position:absolute;
font-size:20px;
left:10px;
bottom:20px;
color:#555;
}
.total{
margin:0;
text-align:right;
padding-right:20px;
}
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<article>
<h5>Men's Bikes</h5>
<ul class = "products">
<li>
<a href = '#' class="item">
<img src ="Bikes\1.jpg"/>
<div>
<p>Stellar</p>
<p>Price:$1245</p>
</div>
</a>
</li>
<li>
<a href = '#' class="item">
<img src ="Bikes\41.jpg"/>
<div>
<p>Hazdorn</p>
<p>Price:$1100</p>
</div>
</a>
</li>
<li>
<a href = '#' class="item">
<img src ="Bikes\20.jpg"/>
<div>
<p>Drover</p>
<p>Price:$870</p>
</div>
</a>
</li>
<li>
<a href = '#' class="item">
<img src ="Bikes\6.jpg"/>
<div>
<p>Blizzard</p>
<p>Price:$1780</p>
</div>
</a>
</li>
</ul>
</article>
<div class="cart">
<img src="Pictures/basket.png" class="basket"/>
<h1>Shopping Cart</h1>
<div style="background:#fff">
<table id="cartcontent" fitColumns="true" style="width:200px;height:auto;">
<thead>
<tr>
<th field="name" width=200>Name</th>
<th field="quantity" width=150 align="right">Quantity</th>
<th field="price" width=100 align="right">Price</th>
</tr>
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<p><input type="button" class="clearbutton" value="Clear Cart" onclick="clear_cart()"></p>
<h2>Drop here to add to cart</h2>
</div>
P.S. this is my first year studying anything to do with coding.
In this case, you are using the data object as your shopping cart. To clear it, all you need to do is reset the object.
data.total = 0
data.rows = []
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'm trying to make this javascript menu work where, when I hover over AAA its submenu shows and on BBB its submenu shows.
It is implemented as a javascript which toggles the #subnav1 and #subnav2 css visibility where the two overlap one another.
However it seems only BBB mouseover works correctly, I suspect because the subnav2 is on top of the subnav1 however even messing with z-index doesn't solve the quirk..
Any idea?
Below is the code.. I left the css style so to make it look like a menu, hope it's not too long for an sscce
<html>
<head>
<style>
#nav {
float:left;
height:20px;
width:50%;
font-size:.8em;
margin:10px 0 0 20%;
}
#nav li,#subnav1 li,#subnav2 li {
display:inline;
}
#nav ul li a,#subnav1 ul li a,#subnav2 ul li a {
color:#000;
text-decoration:none;
margin:0 10px 0 0;
}
#nav ul,#subnav1 ul,#subnav2 ul {
list-style-type:none;
margin:0;
padding:0;
}
#subnav1,#subnav2 {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
#subnavs {
background:none repeat scroll 0 0 #ccc;
position:relative;
float:left;
height:20px;
width:60%;
font-size:.8em;
margin:0 0 0 20%;
padding:3px 0 0 10px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>Home</li>
<li onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')"><a>AAA</a></li>
<li onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')"><a>BBBB</a></li>
</ul>
</div>
<div id="subnavs">
<div id="subnav1" onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')">
<ul style="display: none; z-index: 10;">
<li><a>AAAAAAAA1</a></li>
<li><a>AAAAAAAA2</a></li>
<li><a>AAAAAAAA3</a></li>
<li><a>AAAAAAAA4</a></li>
</ul>
</div>
<div id="subnav2" onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')">
<ul style="display: none; z-index: -10;">
<li><a>BBBBBBBB1</a></li>
<li><a>BBBBBBBB2</a></li>
<li><a>BBBBBBBB3</a></li>
<li><a>BBBBBBBB4</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
function showAAA(show, subnavid)
{
var subNav1 = document.getElementById(subnavid);
var ull = subNav1.getElementsByTagName("ul");
for (var i = 0, ii = ull.length; i < ii; i++)
{
if(show)
{
ull[i].style.display = "block";
ull[i].style.zIndex = 10;
}
else
{
ull[i].style.display = "none";
ull[i].style.zIndex = -10;
}
}
};
</script>
</html>
Can someone please take a moment to look over this and let me know where I am going wrong in my code?
For some reason, the content div won't change when the buttons are clicked.
It's very simple, and right now I feel very confused for not being able to find my error.
CSS:
#wrapper {
margin: 0 auto;
width:100%;
max-height: 133px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
}
#buttons {
width:340px;
float: left;
height: 133px;
margin: 10px 10px 0 0px;
border-right: 1px solid #666;
}
#button1 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-position: -292px 0px;
background-repeat:no-repeat;
float:left;
margin-right:20px;
}
#button1 a:hover {
background-position: -292 -105px;
}
#button1 a:active {
background-position: -292 -210px;
}
#button2 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-repeat:no-repeat;
background-position: -438px 0;
float:left;
}
#button2 a:hover {
background-position: -438px -105px;
}
#button2 a:active {
background-position: -438px -210px;
}
#content {
font-family: Arial, Helvetica, sans-serif;
float: left;
display:block;
}
a {
text-decoration:none;
}
ul {
overflow:hidden;
margin: 10px 0 0 8px;
padding:0;
}
li{
line-height:1.5em;
display:inline;
}
#content1 {
color:#953735;
}
#content2 {
color:#604a7b;
}
JavaScript:
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
HTML:
<div id="wrapper">
<div id="button">
<div id="button1">
</div>
<div id="button2">
Reporting Administrator
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
</body>
</html>
The selector $('button') is the problem. You don't want to select a button - element but an element within the div #button, am I right?
So you should take $("#button a") as selector, if you want to append the event handler to all links within the #button element.
David Müller had it correct regarding the button selector being an issue.
The switching wasn't occurring with the event on the link because the index of the links will be 0 since both are only children. If the event is instead on the parent div, the switching works. Below is a jsfiddle and the code.
http://jsfiddle.net/VrKsh/2/
<div id="wrapper">
<div id="button">
<div id="button1">
Content1
</div>
<div id="button2">
Content2
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#button div').bind('click', function() {
$('div#content div:visible').hide();
$('div#content' + ($(this).index() + 1)).show();
});
</script>