Set opacity 30% for duration of 0.5s - javascript

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>

Related

Html not rendering chart

I am trying out highcharts using flask. I created two examples. The simpler one is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Title!</title>
</head>
<body>
<div id="chart" style="height: 100px; width: 500px"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(document).ready(function() {
$("#chart").highcharts({
chart: {'renderTo': 'chart', 'type': 'line', 'height': 350},
title: {'text': 'My Title'},
xAxis: {'categories': ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']},
yAxis: {'title': {'text': 'yAxis Label'}},
series: [{'data': [1, 2, 3], 'name': 'Label1'}]
});
});
</script>
</body>
</html>
The second one, which is more complicated, is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type=text/javascript src="/static/js/jquery.js"></script>
<script src="/static/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link href="/static/css/view_doc.css" rel="stylesheet" media="screen">
<script src="/static/js/popover.js"></script>
<script src="/static/js/tooltip.js"></script>
<script src="/static/js/view_doc.js"></script>
<script src="/static/js/plotly-latest.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">Copy Cats</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Detect Plag!</li>
<li>Bulk Analysis!</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<br/>
</p>
</div>
</div>
<!--<br><div id="myDiv" style="width: 1100px; height: 400px;"></div>-->
<br>
<div id='chart' style="height: 100px; width: 500px"></div>
</br>
</div>
<div class="col-md-3">
<div class="panel panel-default" data-spy="affix" id="feature_panel" data-offset-top="400"
data-offset-bottom="200">
<div class="panel-heading">
Passage Details
</div>
<div class="panel-body" id="feature_box" style="font-size:12px">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(document).ready(function() {
$('#chart').highcharts({
chart: {'renderTo': 'chart', 'type': 'line', 'height': 350},
title: {'text': 'My Title'},
xAxis: {'categories': ['0', '264', '720', '1470', '1850', '2057', '3189']},
yAxis: {'title': {'text': 'yAxis Label'}},
series: [{'data': [-372.5, -434.55, -465.33, -334.21, -611.22, -1104.75, -1922.59], 'name': u'coleman_liau_index'}]
});
});
</script>
</body>
</html>
The first one works as expected and the second one doesn't. Can anybody tell me why?

Find Below working code of same Example two given by you
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type=text/javascript src="/static/js/jquery.js"></script>
<script src="/static/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link href="/static/css/view_doc.css" rel="stylesheet" media="screen">
<script src="/static/js/popover.js"></script>
<script src="/static/js/tooltip.js"></script>
<script src="/static/js/view_doc.js"></script>
<script src="/static/js/plotly-latest.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">Copy Cats</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Detect Plag!</li>
<li>Bulk Analysis!</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container">
<h1>Where's the plag?</h1>
<div class="jumbotron">
<small>
<p>Atom Type: paragraph </p>
<p>Cluster Method: kmeans </p>
<p>k: 2 </p>
</small>
<button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#full_table">
Hide/Show Table
</button>
<div class="row collapse in" id="full_table">
<div class="col-md-9">
<div class="table-responsive" style="font-size:12px;">
<table class="table table-condensed table-scrollable table-bordered">
<thead>
<tr>
<th>Start Index</th>
<th>coleman_liau_index</th>
<th>Plag. Conf.</th>
<th>Plag. Span</th>
</tr>
</thead>
<tbody>
<tr class="passage_starting_at_">
<td class="passage_row"> 0</td>
<td class="passage_row"> -372.5000</td>
<td class="passage_row"> 0.0586</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 264</td>
<td class="passage_row"> -434.5500</td>
<td class="passage_row"> 0.0083</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 720</td>
<td class="passage_row"> -465.3300</td>
<td class="passage_row"> 0.0203</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 1470</td>
<td class="passage_row"> -334.2100</td>
<td class="passage_row"> 0.0848</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 1850</td>
<td class="passage_row"> -611.2200</td>
<td class="passage_row"> 0.1567</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 2057</td>
<td class="passage_row"> -1104.7500</td>
<td class="passage_row"> 0.6179</td>
<td class="passage_row"></td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 3189</td>
<td class="passage_row"> -1922.5900</td>
<td class="passage_row"> 0.7834</td>
<td class="passage_row"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
rowling_and_dickens
</div>
<div class="panel-body" id="document_content">
<p>
<div class="passage" features="<p>Span</p><p>0, 262</p><hr size = "10"<p>Plag. conf.</p><p>0.0586207920596</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-372.5000</p><hr size = "10"" style="font-size:14px;display:inline;">
Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say
that they were perfectly normal, thank you very much. They were the last
people you'd expect to be involved in anything strange or mysterious,
because they just didn't hold with such nonsense.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>264, 718</p><hr size = "10"<p>Plag. conf.</p><p>0.0082820834237</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-434.5500</p><hr size = "10"" style="font-size:14px;display:inline;">
Mr. Dursley was the director of a firm called Grunnings, which made
drills. He was a big, beefy man with hardly any neck, although he did
have a very large mustache. Mrs. Dursley was thin and blonde and had
nearly twice the usual amount of neck, which came in very useful as she
spent so much of her time craning over garden fences, spying on the
neighbors. The Dursleys had a small son called Dudley and in their
opinion there was no finer boy anywhere.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>720, 1468</p><hr size = "10"<p>Plag. conf.</p><p>0.0203418720353</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-465.3300</p><hr size = "10"" style="font-size:14px;display:inline;">
The Dursleys had everything they wanted, but they also had a secret, and
their greatest fear was that somebody would discover it. They didn't
think they could bear it if anyone found out about the Potters. Mrs.
Potter was Mrs. Dursley's sister, but they hadn't met for several years;
in fact, Mrs. Dursley pretended she didn't have a sister, because her
sister and her good-for-nothing husband were as unDursleyish as it was
possible to be. The Dursleys shuddered to think what the neighbors would
say if the Potters arrived in the street. The Dursleys knew that the
Potters had a small son, too, but they had never even seen him. This boy
was another good reason for keeping the Potters away; they didn't want
Dudley mixing with a child like that.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>1470, 1847</p><hr size = "10"<p>Plag. conf.</p><p>0.0848471305357</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-334.2100</p><hr size = "10"" style="font-size:14px;display:inline;">
When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story
starts, there was nothing about the cloudy sky outside to suggest that
strange and mysterious things would soon be happening all over the
country. Mr. Dursley hummed as he picked out his most boring tie for
work, and Mrs. Dursley gossiped away happily as she wrestled a screaming
Dudley into his high chair.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>1850, 2055</p><hr size = "10"<p>Plag. conf.</p><p>0.156673905811</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-611.2200</p><hr size = "10"" style="font-size:14px;display:inline;">
My father's family name being Pirrip, and my Christian name Philip, my infant
tongue could make of both names nothing longer or more explicit than Pip. So, I
called myself Pip, and came to be called Pip.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>2057, 3187</p><hr size = "10"<p>Plag. conf.</p><p>0.617870345797</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-1104.7500</p><hr size = "10"" style="font-size:14px;display:inline;">
I give Pirrip as my father's family name, on the authority of his tombstone and my
sister - Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or
my mother, and never saw any likeness of either of them (for their days were long
before the days of photographs), my first fancies regarding what they were like,
were unreasonably derived from their tombstones. The shape of the letters on my
father's, gave me an odd idea that he was a square, stout, dark man, with curly
black hair. From the character and turn of the inscription, "Also Georgiana Wife of
the Above," I drew a childish conclusion that my mother was freckled and sickly. To
five little stone lozenges, each about a foot and a half long, which were arranged
in a neat row beside their grave, and were sacred to the memory of five little
brothers of mine - who gave up trying to get a living, exceedingly early in that
universal struggle - I am indebted for a belief I religiously entertained that they
had all been born on their backs with their hands in their trousers-pockets, and
had never taken them out in this state of existence.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>3189, 4158</p><hr size = "10"<p>Plag. conf.</p><p>0.78340505141</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>coleman_liau_index</p><p>-1922.5900</p><hr size = "10"" style="font-size:14px;display:inline;">
Ours was the marsh country, down by the river, within, as the river wound, twenty
miles of the sea. My first most vivid and broad impression of the identity of
things, seems to me to have been gained on a memorable raw afternoon towards
evening. At such a time I found out for certain, that this bleak place overgrown
with nettles was the churchyard; and that Philip Pirrip, late of this parish, and
also Georgiana wife of the above, were dead and buried; and that Alexander,
Bartholomew, Abraham, Tobias, and Roger, infant children of the aforesaid, were
also dead and buried; and that the dark flat wilderness beyond the churchyard,
intersected with dykes and mounds and gates, with scattered cattle feeding on it,
was the marshes; and that the low leaden line beyond, was the river; and that the
distant savage lair from which the wind was rushing, was the sea; and that the
small bundle of shivers growing afraid of it all and beginning to cry, was Pip.
</div>
<br/>
</p>
</div>
</div>
<!--<br><div id="myDiv" style="width: 1100px; height: 400px;"></div>-->
<br>
<div id='chart' style="height: 100px; width: 500px"></div>
</br>
</div>
<div class="col-md-3">
<div class="panel panel-default" data-spy="affix" id="feature_panel" data-offset-top="400"
data-offset-bottom="200">
<div class="panel-heading">
Passage Details
</div>
<div class="panel-body" id="feature_box" style="font-size:12px">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(document).ready(function() {
$('#chart').highcharts({
chart: {'renderTo': 'chart', 'type': 'line', 'height': 350},
title: {'text': 'My Title'},
xAxis: {'categories': ['0', '264', '720', '1470', '1850', '2057', '3189']},
yAxis: {'title': {'text': 'yAxis Label'}},
series: [{'data': [-372.5, -434.55, -465.33, -334.21, -611.22, -1104.75, -1922.59], 'name': 'u\'coleman_liau_index'}]
});
});
</script>
</body>
</html>
Error is on line no.329 String enclosing is not proper, I have added Escape Sequence \' over there.

How to display row inside a row in angular js

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.

How to show different images using .hover() jQuery

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

how to show and hide inner divs onclick upto 3 levels?

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');
});

change multiple image on hover in different tables

I am trying to link images in one table to another(bigger) images in the other table
Basically I have 2 tables, left and right.
in the left table I have two small images.
in the right table I have nothing.
I want to be able to hover over small image in the left table and see the bigger corresponding image in the right table.
I figured how to swap two image in the same table with html/css, but can't figure out how to achieve the functionality that I've described above.
Any CSS or HTML advice would be great,
Thanks a lot,
anton
P.S. I am the beginner with CSS

Well.. There is a simple way of doing this in javascript. So javascript is simple.
Your html (this is obviously not yours but its a scenario)
<div class='right'>
<div class='img'>
<img id='1' src='img1-small.png'>
</div>
<div class='img'>
<img id='2' src='img2-small.png'>
</div>
<div class='img'>
<img id='3' src='img3-small.png'>
</div>
</div>
<div class='left'>
<div class='img ui-helper-hidden'>
<img id='1' src='img1-large.png'>
</div>
<div class='img ui-helper-hidden'>
<img id='2' src='img2-large.png'>
</div>
<div class='img ui-helper-hidden'>
<img id='3' src='img3-large.png'>
</div>
</div>
Now i am assuming you have jQuery (sorry if you do not, but the idea is similar).
$(function() {
$('.right .img').hover(
//over
function() {
var $this = $(this),
id = $('img', $this).attr("id");
$(".left #" + id).fadeIn(200);
},
//out
function() {
var $this = $(this),
id = $('img', $this).attr("id");
$(".left #" + id).fadeOut(200);
}
)
});

Based on Michael's post
<div class='imgcontainer'>
<img src='img1-small.png' class='swapme'>
<img src='img2-small.png' class='swapme'>
<img src='img3-small.png' class='swapme'>
</div>
<div id='image_here'>
</div>
<!--delete the next line if you've already included jquery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
type="text/javascript"></script>
<script>
//this runs when the document is ready, if you're new to jquery, just ignore this and take it for granted
$(document).ready(function(){
$(".swapme").hover(
function(){ //on mouse over
var newSrc = $(this).attr("src");
newSrc= newSrc.replace('/small/','large');
// this assumes that files are named like so
// small file : img3-small.png
// large file : img3-large.png
$("#image_here").html("<img src='" + newSrc + "' id='deleteMe'/>")
},//end mouse over
function(){//on mouse out
$("#deleteMe").remove(); // show image only on mouse over
}//end mouse out
)//end hover
})//end document.ready
</script>
And yes, this depends on jQuery too, but i think it's the easiest to understand and code way to do it

Try this,Here I have a big image on the left and 3 images right.
On mouse hover sll 3 images they will replace big one. on mouse out old image will come back
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<table width="45%" border="1" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<th height="380" scope="col"><img src="../Pictures/Bigcircle.png" alt="" width="284" height="156" id="bigImage" /></th>
</tr>
</table>
<table width="45%" border="1" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<th scope="col"><div>
<p> <img src="../Pictures/lightcircle1.png" height="79" width="78" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/> </p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p><img src="../Pictures/lightcircle3.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p> </p>
</br>
</div></th>
</tr>
</table>
<p> </p>
</body>
</html>

Categories