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 = []
Related
I am new to CSS and java script coding.
I have created a webpage that displays hotels according to the place selected in dropdown list.
I have a preference section in my web page that has a number of checkbox preferences.
I want it to work as when a user selects a place from the dropdown list then he must select any checkbox preference that he wants and then the new webpage should get displayed.
In my code the input (place selected) in the dropdown list is not connected to the preferences.
How can I achieve this implementation?
Below is my html code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
function is_checked()
{
var Pool= document.getElementById('Pool').checked;
var Gym= document.getElementById('Gym').checked;
var Beach= document.getElementById('Beach').checked;
if(Pool==false && Gym==false && Beach==false)
{
alert('Please check a category')
return false;
}
else if(Pool==true)
{
alert(http://http://localhost/reviews/codeReviews.php)
return true;
}
}
function formaction(checkbox)
{
document.getElementById("myForm").action = checkbox.value;;
}
</script>
</head>
<body background="Tring.jpg">
<div class="wrapper">
<div class="heading">
<h1>Hi</h1>
</div>
<ul class="navigation">
<li>HOME</li>
<li>LOGIN</li>
<li>SIGN UP</li>
</ul>
<div id="container">
<div id="banner">
<img src="mtp.png">
<font color="#00e6ac"</font>
</div>
</div>
<div id="content">
<div id="stay"
<h1>STAY</h1>
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Select a place</option>
<option value="http://localhost/dubai/codeDubai.php">Dubai (UAE)</option>
<option value="http://localhost/canberra/Code.php">CANBERRA (AUS)</option>
<option value="http://localhost/newyork/Code.php">NEWYORK (NEW)</option>
</select>
<br>
<p2>Preferences</p2>
<form action="demo_form.asp" method="get" onsubmit="return is_checked()">
<input type="checkbox" name="hotel" value="Pool" id="pool"> Pool <br>
<input type="checkbox" name="hotel" value="Gym" checked="checked"> Gym <br>
<input type="checkbox" name="hotel" value="Beach" id="Beach"> Beach <br>
<input type="submit" value="Submit">
</div>
</body>
</html>
My css code is:
body{
padding:0;
margin:0;
background-image: url("Tring.jpg");
background-repeat: no-repeat;
}
wrapper{
width:600px;
background:#eee;
margin: 0 auto 0 auto;
}
.navigation{
float:right;
position:relative;
top:-150px;
}
li{
list-style:none;
float:left;
margin-right:50px;
font-size: 14;
font-family: serif;
color:white;
}
.heading{
height:100px;
background:lightblue;
padding:20px;
}
.navigation a{
color:white;
text-decoration: none;
font-size: 14px;
font-family: serif;
}
.navigation a:hover{
color:black;
}
.container{
width:1000px;
height:400px;
}
.banner{
background: url(mtp.png);
background-size: cover;
width: 1000px;
height:400px;
position: fixed;
float:center;
top:300px;
}
.content{
}
.stay{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.dine{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.shop{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.attract{
min-height: 500px;
background:#ddd;
width: 300px;
float: left;
position: relative;
}
.sidebar{
width: 300px;
float:right;
background:#ddd;
min-height: 400px;
}
.footer{
clear:both;
background:black;
height:20px;
color:white;
text-align:center;
padding:10px;
}
I see two problems but I'm not sure whether either of them will get your form to work correctly.
function formaction(checkbox)
{
document.getElementById("myForm").action = checkbox.value;;
}
The formaction function needs a corresponding div with the id "myForm" in your HTML order to work.
<div id="content">
<div id="stay"
<h1>STAY</h1>
The id="stay" div needs to be closed.
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 :)
I am a beginer trying to make a gallery for my site, but I am failing somewhere. What I am trying to do is create a page with menu on the top and then under it boxes of small pictures. When you click on one of them, the picture should be loaded under those boxes. So far I have my menu done, and I have the boxes with the pictures, but the problem is that when you first load the page all of the pictures in the small boxes are loaded under and when you click on any boxes - they disapear and only the selected picture is loaded, as it should be. So my problem is that I can't make the page not load all those pictures when loaded for a first time. I don't mind if it just loads one of them, but not all. I've been trying to fix it for 3 days now, but no luck, so I have no choice, but to ask you for help.
Here's the HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/style.css"/>
<script type="text/javascript" src="JavaScript/Script.js"></script>
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav>
<div id="gallery">
<div id="thumbs">
<img src="Pictures/Photography/image1.jpg" alt="" />
<img src="Pictures/Photography/image2.jpg" alt="" />
<img src="Pictures/Photography/image3.jpg" alt="" />
<img src="Pictures/Photography/image4.jpg" alt="" />
<img src="Pictures/Photography/image5.jpg" alt="" />
</div>
<CENTER>
<div id="bigimages">
<div id="normal1">
<img src="Pictures/Photography/bigimage1.jpg" alt=""/>
</div>
<div id="normal2">
<img src="Pictures/Photography/bigimage2.jpg" alt=""/>
</div>
<div id="normal3">
<img src="Pictures/Photography/bigimage3.jpg" alt=""/>
</div>
<div id="normal4">
<img src="Pictures/Photography/bigimage4.jpg" alt=""/>
</div>
<div id="normal5">
<img src="Pictures/Photography/bigimage5.jpg" alt=""/>
</div>
</div>
</div>
</BODY>
</HTML>
Here's the CSS:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
img {
border: none;
}
#gallery {
margin: 0 auto;
width: 100%;
}
#thumbs {
margin: 10px auto 10px auto;
width: 100%;
}
#bigimages {
width: 100%;
float: left;
}
#thumbs img {
width: 50px;
height: 50px;
}
#bigimages img {
border: 4px solid #555;
margin-top: 5px;
height: 500px;
}
#thumbs a:link, #thumbs a:visited {
width: 50px;
height: 50px;
border: 6px solid #555;
margin: 6px;
float: left;
}
#thumbs a:hover {
border: 6px solid #888;
}
And finally here's my simple JavaScript:
function changeImage(current) {
var imagesNumber = 5;
for (i=1; i<=imagesNumber; i++) {
if (i == current) {
document.getElementById("normal" + current).style.display = "block";
} else {
document.getElementById("normal" + i).style.display = "none";
}
}
}
You could simply hide them via CSS.
#bigimages > div:not(:first-child) { display: none; }
This should display only the first big image.
Could be easier yet if you added a class to the image wrappers. Assuming the class could be big-image-wrap, the css would be:
#bigimages > div.big-image-wrap { display: none; }
#bigimages > div.big-image-wrap:first-child { display: block; }
You can hide those images on load event. Like this:
window.onload = function(){
var thumbs = document.getElementById('thumbs');
var images = thumbs.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}
I am trying to make an iframe fade out then fade in but I can't seem to get the code right. I think I am pretty close but for some reason the code acts as if my jquery isn't there. Can someone identify where I went wrong?
HTML
<body>
<center>
<div class="headbackground">
<h1 class="headfont1"> Kellen's Homepage</h1>
<div id="menubar">
<a id="menulink" href="homepage.html" target="iframe1"> Homepage </a>
<a id="menulink" href="about.html" target="iframe1"> About Me </a>
<a id="menulink" href="projects.html" target="iframe1"> Projects </a>
<a id="menulink" href="resume.html" target="iframe1"> Resume </a>
</div>
</div>
</center>
<div id="iframediv">
<iframe id="iframe1" name="iframe1" src="" frameborder="0"></iframe>
</div>
</body>
CSS
.headbackground {
background-color:RGBa(0,0,0,.75);
z-index:2;
margin-top:0;
}
div#menubar {
padding: 24px;
}
div#menubar > a {
font:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:17px;
background:#333;
padding: 12px 24px;
color: #999;
margin-right: 10px;
text-decoration:none;
border-radius:3px;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar > a:hover {
background:#36F;
color:#FFF;
z-index:2;
}
#iframe1 {
position: absolute;
left: 0px;
top: 215px;
width: 100%;
height: 100%;
z-index:1;
}
body {
background-image:url(images/ronaldo-elche-real-madrid-live-bale-isco-best-team-celebrating-goal.jpg);
background-repeat:repeat-y;
background-position:top center;
background-attachment:fixed;
background-size:cover;
margin:0;
overflow:scroll;
}
jQuery
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(document).ready(function () {
$('div#menubar > a').click(function(){
var iframeSrc = $(this).attr('href');
$('#iframediv').fadeOut(1000,function(){
$('#iframediv iframe').attr('src',iframeSrc);
$('#iframediv').fadeIn(1000);
});
return false;
});
});
</script>
that's because to the browser, your code isn't there. Your code needs to be in a separate script tag.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('div#menubar > a').click(function(){
var iframeSrc = $(this).attr('href');
$('#iframediv').fadeOut(1000,function(){
$('#iframediv iframe').attr('src',iframeSrc);
$('#iframediv').fadeIn(1000);
});
return false;
});
});
</script>
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>