I am trying to design travel page using angular js where I am stuck in showing seat layout.
Whenever I click in show details I want to show the seat layout under the clicked row. How do I achieve this?
My code:
<html ng-app="searchResults">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<style>
td{text-align:center;}
.animate.ng-enter, .animate.ng-leave {
transition: 500ms ease-in all;
position: relative;
display: block;
}
.animate.ng-enter.ng-enter-active, .animate.ng-leave {
left: 0;
}
.animate.ng-leave.ng-leave-active, .animate.ng-enter {
left: 500px;
}
</style>
</head>
<body>
<div id="busesDiv" ng-controller="busesController">
<input type="text" ng-model="search"/>
<div style="width:100%;">
<table style="width:100%;" id="myT">
<thead>
<tr>
<th ng-repeat="head in busHeaders">{{ busHeaders[$index]}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bus in buses | filter:search" class="animate">
<td>{{bus.operatorName}}</td>
<td>{{bus.vehicleClass}}</td>
<td>{{bus.amenities}}</td>
<td>{{bus.departureTime}}</td>
<td>{{bus.arrivalTime}}</td>
<td>{{bus.availableSeats}}</td>
<td>{{bus.fare}}</br><button ng-click="showSeatDetails(bus,bus.busServiceId)">Show Details</button></td>
</tr>
</tbody>
</table>
<table class"seatLayoutTable">
<tbody>
<tr ng-repeat="row in totalSeatConfiguration.split(';')">
<td ng-repeat="seat in row.split(',') track by $index">
<span ng-if="bookedSeatsArray.indexOf(seat.split('_')[0].trim())==-1 && ladiesSeatsArray.indexOf(seat.split('_')[0])==-1">
<img src="images/available.png" ng-show="seat.split('_')[0] !='NA'" title="{{seat.split('_')[0]}}"/>
</span>
<span ng-if="bookedSeatsArray.indexOf(seat.split('_')[0])!=-1">
<img src="images/booked.png" ng-show="seat.split('_')[0]!='NA'" title="{{seat.split('_')[0]}}"/>
</span>
<span ng-if="ladiesSeatsArray.indexOf(seat.split('_')[0])!=-1">
<img src="images/ladies.png" ng-show="seat.split('_')[0]!='NA'" title="{{seat.split('_')[0]}}"/>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The second table will display seat layout,but I want to add this layout to clicked row.
First off, skip the tables. There's no reason to use them here. Second, make your seats children of the bus
<h1 ng-repeat="head in busHeaders">{{ busHeaders[$index]}} </h1>
<div ng-repeat="bus in buses | filter:search" class="bus animate">
<span>{{bus.operatorName}}</span>
<span>{{bus.vehicleClass}}</span>
<span>{{bus.amenities}}</span>
<span>{{bus.departureTime}}</span>
<span>{{bus.arrivalTime}}</span>
<span>{{bus.availableSeats}}</span>
<span>{{bus.fare}}</br>
<button ng-click="bus.showSeats = !bus.showSeats">Show Details</button></span>
<div class="seatLayout" ng-repeat="seat in bus.seats" ng-show="bus.showSeats">
<span ng-show="!seat.booked" ng-click="seat.book()">
<span ng-show="!seat.ladies"><img src="images/available.png"/></span>
<span ng-show="seat.ladies"><img src="images/ladies.png"/></span>
</span>
<span ng-show="seat.booked"><img src="images/booked.png"/></span>
</div>
</div>
You'll of course have to refactor your data model and style everything appropriately. But you get the gist of how much you're overcomplicating something that's really relatively simple if you're using a straightforward data model.
Related
My task is to set thumbnail images to opacity 30% for duration of 0.5s upon hoverover. I am very new to this and not sure if i am doing this right. Can anyone advise to my code in js file?
<!DOCTYPE html>
<html>
<body>
<script>
$(document).ready(function(){
// Add the hover handler to the link
$("#imageCS").hover(
function(){ // When mouse pointer is above the link
// Make the image inside link to be transparent
$(this).find("images/boxImage1").animate(
{opacity:"0.3"},
{duration:500}
);
},
function(){ // When mouse pointer move out of the link
// Return image to its previous state
$(this).find("images/boxImage1").animate(
{opacity:"1"},
{duration:300}
$(document).ready(function(){
// Add the hover handler to the link
$("#imageCS").hover(
function(){ // When mouse pointer is above the link
// Make the image inside link to be transparent
$(this).find("images/boxImage2").animate(
{opacity:"0.3"},
{duration:500}
);
},
function(){ // When mouse pointer move out of the link
// Return image to its previous state
$(this).find("images/boxImage1").animate(
{opacity:"1"},
{duration:300}
$(document).ready(function(){
// Add the hover handler to the link
$("#imageCS").hover(
function(){ // When mouse pointer is above the link
// Make the image inside link to be transparent
$(this).find("images/boxImage1").animate(
{opacity:"0.3"},
{duration:500}
);
},
function(){ // When mouse pointer move out of the link
// Return image to its previous state
$(this).find("images/boxImage3").animate(
{opacity:"1"},
{duration:300}
</html>
</body>
</script>
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>TMA</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="main.css" rel="stylesheet" type="text/css"/>
<link href="myStyle.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js"></script>
<script src="myScript.js"></script>
</head>
<body>
<div id="socialmediafloat">
<img src="images/facebook.png" id="facebook_icon" class="media_icons"/>
<img src="images/twitter.png" id="twitter_icon" class="media_icons"/>
<img src="images/youtube.png" id="youtube_icon" class="media_icons"/>
<img src="images/pinterest.png" id="pinterest_icon" class="media_icons"/>
</div>
<div id="myheader">
<div id="header" class="container">
<div id="logo">
<h1><img src="images/UniSIM.JPG"/></h1>
</div>
</div>
<div id="highlights" class="container">
<div class="title">
<h1>Discover The UniSIM Advantage</h1>
<span class="byline">Are you ready to open your mind to more possibilities, give yourself the opportunities that you've always wanted, and quench your thirst for knowledge? No matter what it is, whether to give yourself a second chance in your career or to provide for a better life for yourself and your loved ones, further education with UniSIM will get you there.</span>
</div>
</div>
</div>
<div id="content">
<div id="myCols" class="container">
<div class="col1">
<img src="images/boxImage1.jpg" class="imageCS"/>
<p>Whatever your goals, background or life stage, we believe in you, and we will equip you with the real-world knowledge and practice-oriented skills to excel, both in life and in your chosen career.</p>
<button id="col1btn" class="button">Discover</button>
</div>
<div class="col2">
<img src="images/boxImage2.png" class="imageCS"/>
<p>With a range of more than 50 degree programmes in various disciplines, we focus on equipping our students with a competitive advantage in their industries. Explore the programmes we offer from our five schools and embark on your learning journey now.</p>
<button id="col2btn" class="button">Programmes</button>
</div>
<div class="col3">
<img src="images/boxImage3.jpg" class="imageCS"/>
<p>SIM University (UniSIM) offers government-funded, full-time direct honours programme for school leavers. A full-time degree can normally be completed in 4 years although the maximum period of candidature is 6 years.</p>
<button id="col3btn" class="button">Education</button>
</div>
</div>
</div>
<div id="details">
<div class="container">
<p>BSc Multimedia Technology and Design</p>
<table id="MTDSchedule">
<tr>
<th></th>
<th>Code</th>
<th>Name</th>
<th>Credit Units</th>
<th>Time Table</th>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>ICT271</td>
<td>Introductory Programming Techniques in C++</td>
<td>5</td>
<td>Thursday/Week 1/Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD105e</td>
<td>Digital Photography Techniques</td>
<td>5</td>
<td>Friday / Week 2 / Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD111e</td>
<td>Creative Design Fundamentals</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD113e</td>
<td>History of Media</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 2</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD201e</td>
<td>Fundamentals of Graphics Design</td>
<td>5</td>
<td>Tuesday / Week 1 / Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD203e</td>
<td>Advanced Graphics Design</td>
<td>5</td>
<td>Tuesday / Week 2 / Term 2</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD205e</td>
<td>Audio Technology</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 1</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD207e</td>
<td>Video Technology</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 2</td>
</tr>
<tr>
<td> <input type="checkbox"/></td>
<td>MTD215</td>
<td>Application of C++ in Multimedia</td>
<td>5</td>
<td>Wednesday / Week 1 / Term 2</td>
</tr>
</table>
<button class="button">Reset</button>
</div>
</div>
<div id="footer" class="container">
<p>© All rights reserved. | SIM University</p>
</div>
</body>
</html>
Haven't tested it, but I think you'll want something like this:
$(".imageCS").mouseover(function(){
$(this).animate({
opacity: 0.3
}, 500 );
});
$(".imageCS").mouseout(function(){
$(this).animate({
opacity: 1
}, 300 );
});
Since imageCS is a class, you want to have your JQuery selector set as .imageCS and not #imageCS (which would be used for a div id as opposed to a class). Additionally, since it is a class this means you can access all of the images with that class at once rather than having to do the mouseover events for each one separately. And you don't have to find the image url, just the image tag itself, so just this without doing the .find is fine.
Also, if you have access to the CSS I would actually do these hover events there using CSS3 transitions (as opposed to the JQuery/JS solution proposed above). It would be simpler and cleaner IMO.
Use the effect on the mouseenter event and then restore opacity to 1 with setTimeout.
Example:
$('#so').mouseenter(function() {
$('#so').animate({opacity: 0.3});
setTimeout(function() {
$('#so').animate({opacity: 1})
}, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- sample image -->
<div id="so-img-div">
<img id="so" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded" style="border:1px solid black">
</div>
Why don't you do this effect with CSS?
$imgWrapper = $('.image--wrapper');
$imgWrapper.hover(
//this function will run when you hover your image
function() {
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
}
);
img {
opacity:0;
transition: all 0.5s ease;
}
.active img {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image--wrapper">
<img src= "https://www.w3schools.com/html/pic_mountain.jpg" />
</div>
Here is my Fiddle
How can I make the entire <tr> as clickable.
In the fiddle all the elements like text and images are clickable, but i want to make the entire <tr> clickable. I won't want to make the jQuery query action, as it won't show the href icon while hovering it.
How can I do this ?
I read this question but it still uses jQuery on click event, which won't show the href icon while hovering it
Here is my HTML
<table border=1>
<tbody>
<tr>
<td style="display: none;">
13467.36232877521
</td>
<td style="display: none;">
0
</td>
<td width="5%" >
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
<img src="http://greenhoppingbucket.s3.amazonaws.com/store/profile/1458470633N4IjGniw81.png" alt="image" height="58px" width="58px" style="margin: -8px 0px -9px -7px;" />
</a>
</td>
<td width="25%">
<div class="semibold">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
Juice Generation Demo 1
</a>
</div>
<div class="text-muted"><i class="fa fa-heart yellow"></i> 0</div>
</td>
<td width="35%">
<div class="text-muted">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
Juice Generation, 9th Avenue, New York, NY, United States
</a>
</div>
</td>
<td width="35%" class="text-right">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
<img src="http://greenhoppingbucket.s3.amazonaws.com/tip/1456942351fQoyY8DNZd.png" alt="image" height="36px" width="40px" />
</a>
</td>
</tr>
</tbody>
</table>
A combination of the above should do the trick.
Add recognizable class to your element.
<tr class="clickable" data-href="http://website/your_href"></tr>
Write CSS for the element to appear clickable.
.clickable {
cursor: pointer;
}
Make the thing clickable using Javascript:
var elements = document.getElementsByClassName('clickable');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.addEventListener('click', function() {
var href = this.dataset.href;
if (href) {
window.location.assign(href);
}
});
}
Try putting display as block.
td a {
display: block;
}
Fiddle
Also have a look at answer in this question too.
All you need to do is add cursor: pointer; to have it look like its clickable and then add an ID to it if you want to actually make the entire tr tag clickable. IE:
<tr id="clickable">
CSS
tr { cursor: pointer; }
You can do it by using javascript. Maybe:
$("tr").click(function() {
// what to do
});
I have a working web page, but I would like to generalize the code. When one clicks a link with e.g. anchor #11 or #12, a div called #t11 or #t12 will open (or close) with this piece of script:
Script
$( "#11" ).click(function() {
$( "#t11" ).toggle();
});
$( "#12" ).click(function() {
$( "#t12" ).toggle();
});
Stripped HTML
<div class="a">
<table>
<tr><td><a id="11">Foo</a></td></tr>
<tr><td>Find out more about Foo</td></tr>
</table>
</div>
<div class="a">
<table>
<tr><td><a id="12">Bar</a></td></tr>
<tr><td>Find out more about Bar</td></tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
Relevant CSS
.b {
display: none;
}
This is fine, however, with over 20 divs it's getting complicated and difficult to maintain. Is there a way to reduce the code, so every id in <a> will toggle its <div>? I've been struggling with $this but without the result I hoped for.
You can use a selector that will match all appropriate <a> elements, so that your click function will be applied to all of them. Then, you can get the id attribute from your <a> tag using $(this).attr('id'). You can then form a selector that matches the corresponding id of the content you want to toggle, then call the .toggle() method using that selector.
$('.a table tr td a').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
EDIT
You may also consider adding a class to your actual <a> tags, as mentioned by #Lelio Faieta.
In the above example, if the structure of your html changes, the $('.a table tr td a') selector will break, and the click functionality will be lost.
If, however, you assign a class of, say toggler to each <a> tag, then you can just replace the $('.a table tr td a') selector with $('.toggler') and your click functionality will still work if you change the location of your <a> tags in your html.
$('.toggler').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11" class="toggler">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12" class="toggler">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
You can use classes to group elements in jquery.
A class is referenced like id but with a dot instead of a dash:
$('.someClass')
where you used to write
$('#anID')
Many objects can share the same class so you can both use classes to target an animation to multiple objects at the same time or to use different element on the DOM to fire an animation
The best way to solve this is by adding a common class to all a tag and performing event with that class.
<a class="atag" id="11">
<a class="atag" id="12">
$(".atag").click(function() {
var id=$(this).attr("id");
$(body).find("#"+id).toggle();
});
I'm gonna try to explain my issue:
I have span elements, each span element have text, when the user hovers it, it should displays an image next to the element, each image is different, I was trying to use jQuery .hover() function, but when I hover on the text it shows me the whole images.
How can I solve it?.
My HTML.
<table>
<tbody>
<tr>
<td style="width: 20%;" class="text-center">
<span class="displayImage">Azotea </span>
<span class="displayImage">Nivel 8 </span>>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-5 text-left">
<img class="displayed" src="images/azotea-n9.jpg" alt="">
<img class="displayed" src="images/test2.jpg" alt="">
</div>
My Code.
$(".displayImage").hover(function(){
$(".displayed").show();
}, function () {
$(".displayed").hide();
});
Thanks!.
You could associate the span with a particular image via a data attribute and id.
$(".displayImage").hover(function(){
// $(this).attr('data-img') == 'azotea' or 'nivel8'
// so we end up with $('#azotea').show(), for example.
$('#' + $(this).attr('data-img')).show();
}, function () {
$('#' + $(this).attr('data-img')).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="width: 20%;" class="text-center">
<span class="displayImage" data-img='azotea'>Azotea </span>
<span class="displayImage" data-img='nivel8'>Nivel 8 </span>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-5 text-left">
<img class="displayed" src="images/azotea-n9.jpg" alt="azotea" id="azotea">
<img class="displayed" src="images/test2.jpg" alt="nivel 8" id="nivel8">
</div>
I try don´t change your html
https://jsfiddle.net/luarmr/hjreda3r/
I add a little css as well for hide the elements from the origin
$(".displayImage").hover(
function(el){
var image = $(this).data('ref');
$(".displayed:nth-child(" + image + ")").show();
}, function () {
$(".displayed").hide();
}
);
I would suggest you to better use css3 instead of jquery, cos jquery slows down productivity of your site on mobile gadgets, so maybe you should look here enter link description here
You need to find common ground between your span & image and without adding anything extra in your markup, that would be the index value of each of them. Obviously, this solution that I recommend below is entirely dependant on the order with which you lay out your HTML.
Take a look at this solution I posted for a similar problem.
So basically, your code should become something like this:
$(".displayed").hide();
$(".displayImage").hover(function(){
$(".displayed").eq($(this).index()).show();
},function(){
$(".displayed").eq($(this).index()).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="width: 20%;" class="text-center">
<span class="displayImage">Azotea </span>
<span class="displayImage">Nivel 8 </span>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-5 text-left">
<img class="displayed" src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" alt="">
<img class="displayed" src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" alt="">
</div>
Hope it helps in some way.
T
I have following structure in my page
HTML:
<div style="position:relative; width:200px; height:100px; overflow:hidden;">
<div style="position:absolute;" id="innerDiv">
<table style="width:400px;height:50px;" border="1" id="innerTable">
<tr>
<td>
<div id="td1"class="monthDiv" style="white-space:nowrap;">
2000
</div>
<div id="td2" style="white-space:nowrap;">
<table>
<tr><td id="quarter1">JAN-JUN00</td><td id="quarter2">JUL-DEC00</td></tr>
</table>
</div>
</td>
<td>
<div id="w" style="white-space:nowrap;">
2001
</div>
</td>
</tr>
</table>
</div>
</div>
JAVASCRIPT:
$("#td1").click(function(){
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(){
$("#td2").hide('slow');
$("#td1").show('slow');
});
$("#quarter1").click(function(){
});
$("#quarter2").click(function(){
});
So, when I click on 'td1'(2000) I am showing 'td2'(JAN-JUN00 AND JUL-DEC00)' and viceversa but I need to show another div(JAN00 FEB00 ... JUN00) when click on 'quarter1'. Also I need to find on which div click event was fired, 'quarter1' or 'quarter2' to show (JUL00 AUG00 ... DEC00)
Please help me.
You can simply call a show event on the div you want to display on click of quarter1:
$("#quarter1").click(function(){
alert('quarter1');
$('#quart1').show('slow');
});
$("#quarter2").click(function(){
alert('quarter2');
$('#quart2').show('slow');
});
quart1 and quart2 are the ids of the divs you want to display.
EDIT:
Add this:
$("#td1").click(function(e){
e.stopPropagation();
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(e){
e.stopPropagation();
$("#td2").hide('slow');
$("#td1").show('slow');
});