How can i show the element using ng-show which i can control by my controller using boolean value?
(Everything in the controller works fine except this button)
This is my modal html.
<div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal">
<div class="modal-container modal-confirm-pickup-container">
<div class="modal-container-content">
<div class="modal-container-content-header">
<strong>
Login
</strong>
</div>
<div class="modal-container-content-body">
aaaaaaaeoa
</div>
</div>
</div>
</div>
This is my code in the controller
.controller('venderConsole', ['$scope','$http', function ($scope,$http) {
$scope.showPickupModal = false;
$('.close-modal-box-bt').click(function(event) {
/* Act on the event */
$('.modal-box-login').css('display','none');
$.ajax({
url: 'json/multipleOrder.json', //Server script to process data
type: 'get',
beforeSend: function(xhr){
},
success: function(data){
$scope.orders = data.data
// $scope.ordersList = $scope.orders[0].products;
// console.log(orderSize);
$scope.getTotal = function(order){
var total = 0;
for(var i = 0; i < order.products.length; i++){
var subtotal = order.products[i].subtotal;
total += subtotal;
}
return total;
}
$scope.$apply();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
}
});
});
}]);
This is my button html.
<table id="front-table" class="table table-bordered" ng-show="!vendorPageToggle">
<thead>
<tr class="table-head-text-center">
<th></th>
<th>Order</th>
<th>฿ Total</th>
<th>Address</th>
<th>Comment</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<th class="text-center">
<span class="table-order-number">
<strong>{{ order.id }}</strong>
</span>
<br>
<span>{{ order.customer.name }}</span>
<br>
<br>
<span>{{ order.estimated_pickup }}</span>
</th>
<td>
<span ng-repeat="product in order.products">
1 X {{ product.name }} <br>
<span ng-repeat="extra in product.extras">
<span ng-repeat="item in extra.items">
-- ext {{ item }}
<br>
</span>
</span>
<br>
</span>
</td>
<td>{{ getTotal(order) }}</td>
<td>
{{ order.customer.address.address1 }}
<br>
{{ order.customer.address.address2 }}
<br>
{{ order.customer.address.suburb }}
<br>
{{ order.customer.address.city }}
<br>
<br>
<strong>
<i class="icon ion-iphone" style="font-size: 24px;"></i> {{ order.customer.phone }}
</strong>
</td>
<td>aaaa</td>
<td class="text-center">
<button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal">
button-balanced
</button>
</td>
</tr>
</tbody>
</table>
my Css
.modal-box {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
/*display: none;*/
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-container {
position: relative;
width: auto;
margin: 10px;
}
.modal-container-content {
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 20px;
outline: 0;
overflow: hidden;
}
.modal-container-content-header {
background-color: #FF0000;
color: #fff;
text-align: center;
font-size: 32px;
height: 80px;
padding-top: 28px;
}
.modal-container-content-body {
padding: 15px;
background-color: #EEEEEE;
}
But when i click my button nothing happened, my modal still not appear same as the beginning.
How can i fix this.
Thanks!
Here is your code working as expected: JS Fiddle
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.hello = 'Ohh, hello there!';
$scope.showPickupModal = false;
});
</script>
<div ng-app='app' ng-controller='ctrl'>
<button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal">
button-balanced
</button>
<div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal">
<div class="modal-container modal-confirm-pickup-container">
<div class="modal-container-content">
<div class="modal-container-content-header"> <strong>
Login
</strong>
</div>
<div class="modal-container-content-body">{{hello}}</div>
</div>
</div>
</div>
</div>
If this don't solve your problem, post more code so we can see what is wrong that your controller is not working properly.
EDIT with new full code
Working Plunker
Ok, I don't know why your code does not work. But, just to test things up, I like to don't do anything on the view. So, I've removed your code on the html and exchanged by a function. Like this:
ng-click='showPickupModal = !showPickupModal'
This was removed by this:
ng-click='togglePickupModal()'
and, on the controller, I've added this function and, before any console.log to test, it just worked.
$scope.togglePickupModal = function () {
$scope.showPickupModal = !$scope.showPickupModal;
};
You haven't showed your code for '.close-modal-box-bt', so I've used the toggle function to close the modal too. Problem solved.
Related
If possible, I would like javascript to first get an element by an ID that is placed into a table. Then add/place said element into the inline style (width="XX%") of a different div.
Note: I do not have control over the ID's output. Just know that said value will determine the width of the percentage bar.
getelementbyid:
<span *id="per-girls*">**95**</span>
place element into inline css:
<div class="bar bar1" style="width: **95**%;"></div>
$(function(){
$("#dTable").dataTable({
"columns": [
{
"title":"Languages"
},
{
"title":"Votes",
"render": function(data, type, row, meta){
return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
}
},
{
"visible":false
},
{
"title": "Positive/Neutral/Negative",
"sortable":false,
"render": function(data, type, row, meta){
return $("<div></div>", {
"class": "bar-chart-bar"
}).append(function(){
var bars = [];
for(var i = 1; i < Object.keys(row).length; i++){
bars.push($("<div></div>",{
"class": "bar " + "bar" + i
}).css({
"width": row[i] + "%"
}))
}
return bars;
}).prop("outerHTML")
}
}
]
});
});
.bar-chart-bar {
background-color: #e8e8e8;
display: block;
position:relative;
width: 100%;
height: 40px;
}
.bar {
position: absolute;
float: left;
height: 100%;
}
.bar1 {
background-color: #007398;
z-index: 40;
}
.bar2 {
background-color: #00b0b9;
width: 100%;
z-index: 20;
}
<div class="col-sm-12">
<table id="dTable" cellspacing="0" width="100%" role="grid" aria-describedby="dTable_info">
<tbody>
<tr role="row">
<td style="width: 20%;"> % of girl gamers</td>
</td>
<td style="width: 10%;"> <span id="per-girls">95</span>% </td>
<td>
<div class="bar-chart-bar bar-girl">
<div class="bar bar1" style="width: 20%;"></div>
<div class="bar bar2"></div>
</div>
</td>
</tr>
<tr role="row">
<td> % of boy gamers</td>
</td>
<td><span id="per-boy">57</span>% </td>
<td>
<div class="bar-chart-bar bar-boy">
<div class="bar bar1" style="width: ;"></div>
<div class="bar bar2"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Instead of setting the width of a div (which you could also do with this same approach), it seems more elegant to me to use a background gradient to do the fill.
In the snippet below a custom css property is used to inform a linear gradient that fills the bar. By changing the property's value you can set the percentage filled:
function setBar(valueElemId) {
// find the element
const valueElem = document.getElementById(valueElemId);
// get its text as a numeric value
const value = Number(valueElem.textContent);
// find the nearest TR parent and set the css custom property
// that the linear-gradient uses to fill the bar
valueElem.closest('tr').style=`--pct: ${value}`;
}
// invoke setBar for each id
['per-girls', 'per-boy'].forEach(setBar);
:root {
--pct: 0; /* no fill by default */
}
.bar-chart-bar {
min-height: 30px;
background: #00b0b9; /* the background/base color */
background-image: linear-gradient(90deg,
#007398 0 calc(var(--pct) * 1%), /* from 0 to --pct */
transparent calc(var(--pct) * 1%) /* leave the rest transparent */
);
}
<div class="col-sm-12">
<table>
<tbody>
<tr>
<td style="width: 20%;"> % of girl gamers</td>
<td style="width: 10%;"> <span id="per-girls">95</span>% </td>
<td>
<div class="bar-chart-bar"></div>
</td>
</tr>
<tr>
<td> % of boy gamers</td>
<td><span id="per-boy">57</span>% </td>
<td>
<div class="bar-chart-bar"></div>
</td>
</tr>
</tbody>
</table>
</div>
I am trying to close the modal by clicking the cross icon which is in the modal and the modal is rendered inside a td and the whole tr is made clickable. I am using tailwind for my CSS. The problem is the modal does not get closed on click the cross icon.
<tr onclick= "show_modal(this)">
<td><%=device&.name%></td>
<td ><%= render partial: 'edit', locals: {device: device}%></td>
</tr>
Partial file(_edit.html.erb)
<div class="modal-holder js_modal_container modal__hidden">
<div class="modal-header">
<h5>device</h5>
<i class="fas fa-times js_device_modal_close_btn" onclick="close_modal(this)"></i>
</div>
<div class="modal-body">
<!-- modal body -->
</div>
</div>
</div>
js i have tried.
window.show_modal =function(e){
let js_modal_container = $(e).find(".js_modal_container")
if ($(this).is("td:last-child")) {
e.preventDefault();
e.stopPropagation();
$(js_modal_container).addClass("modal__hidden");
$(document.body).removeClass("overlay__handler");
};
$(js_modal_container).removeClass("modal__hidden");
$(document.body).addClass("overlay__handler");
}
window.close_modal = function(e){
let js_modal_container= $(e).closest(".js_modal_container")
a =$(e).closest(".modal_popup")
if ($(a).is("td:last-child")){
// e.preventDefault();
// e.stopPropagation();
$(js_modal_container).addClass("modal__hidden");
$(document.body).removeClass("overlay__handler");
}
// $(js_modal_container).addClass("modal__hidden");
// $(document.body).removeClass("overlay__handler");
}
Consider the following example.
$(function() {
function openModal(e) {
console.log("Open Modal Fired.");
var $this = $(e.target);
console.log($this.text().trim());
var js_modal_container = $(".js_modal_container");
$(".modal-header h5").html($this.prev("td").text().trim());
js_modal_container.removeClass("modal__hidden");
$(document.body).addClass("overlay__handler");
}
function closeModal(e) {
console.log("Close Modal Fired.");
var $this = $(e.target);
var js_modal_container = $this.closest(".js_modal_container");
js_modal_container.addClass("modal__hidden");
$(document.body).removeClass("overlay__handler");
}
$("table tr").on("click", "td:last-child", openModal);
$("i.js_device_modal_close_btn").click(closeModal);
});
table {
width: 340px;
}
td:last-child {
border: 1px solid #222;
border-radius: 6px;
text-align: center;
}
.modal-holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.45);
}
.modal__hidden {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
Device Name 1
</td>
<td>
Edit
</td>
</tr>
<tr>
<td>
Device Name 2
</td>
<td>
Edit
</td>
</tr>
<tr>
<td>
Device Name 3
</td>
<td>
Edit
</td>
</tr>
</table>
<div class="modal-holder js_modal_container modal__hidden">
<div class="modal-header">
<h5>device</h5>
<i class="fas fa-times js_device_modal_close_btn"></i>
</div>
<div class="modal-body">
<!-- modal body -->
</div>
</div>
For ease of use, I have created two functions to use and bound them to click events on various elements in the page. For the Edit item, I used .on() in case they are not available when the page initially loads or if new items are appended.
$(e) is not an element, but an event. We need to look at the Event Target: e.target. This will return an element that can be used as a jQuery Object: $(e.target). I suspect this was the primary issue in your code. The rest is just for clarification of the example.
I have worked out some javascript to use my search bar in order to filter/hide things that don't match the search input. I've got it working about 95% I would say but I have one problem to fix.
So my page displays furniture groups and their containing pieces of furniture. The group name/number and description exists as a heading div and below that there is a table created with the actual pieces of furniture. My current javascript works as long as I'm typing 'sofa' or 'chair' which would be in the table row. However, If I type the name of a furniture group, it just shows the name/number/description and images, but hides the table. The group names/descriptions are in this block:
#foreach ($orderFormData->pgroups as $pgroup)
<div class="group-container">
<h3 style="font-size: 26px; padding: 10px 0;">{{ $pgroup->group_name
}} - {{ $pgroup->group_code }}</h3>
<p class="uk-text-muted" style="font-size: 20px;" >{!!
html_entity_decode($pgroup->group_desc) !!}</p>
So, I need to try and slightly refactor this to add the functionality so that if my input matches the group name or description, it still shows the whole table for that div.
An idea I had was to add something like this
<script type="text/javascript">
if($('.group-container').children('tr:visible').length == 0) {
$('.group-container').hide();
} else {
$('.group-container').show();
}
</script>
Under my first line of html below, right under the foreach loop. But I don't know if that would be the right idea or how to use that exactly the way it should.
HTML:
#foreach ($orderFormData->pgroups as $pgroup)
<div class="group-container">
<h3 style="font-size: 26px; padding: 10px 0;">{{ $pgroup->group_name }} - {{ $pgroup->group_code }}</h3>
<p class="uk-text-muted" style="font-size: 20px;" >{!! html_entity_decode($pgroup->group_desc) !!}</p> <!--Group Description-->
<div class="uk-grid">
<div class="uk-width-2-10">
<ul style="margin: 0; padding: 0; list-style-type: none; float: left; width: 100%;">
#foreach ($pgroup->image_names as $image_name)
<li><a href="/imagelib/Bigthumbs/{{ substr($image_name, 0, strpos($image_name, ',')) }}" target=_blank><img src="/imagelib/Bigthumbs/{{ substr($image_name, 0, strpos($image_name, ',')) }}" style="width: 100%; height: auto;" /></a><span class="uk-text-center" style="padding: 0 0 5px;">{{ substr($image_name, strpos( $image_name, ',') + 1) }}</span></li>
#endforeach
</ul>
</div>
<div class="uk-width-8-10">
<table id="userTbl" class="uk-table" style="width: 100%; min-width: 768px;">
<thead>
<tr>
<th style="width: 10%; font-size: 20px;">Frame</th>
<th style="width: 20%; font-size: 20px;">Description</th>
<th style="width: 15%; font-size: 20px;">Cover/Color</th>
<th style="width: 15%; font-size: 20px;">Cover/Color</th>
<th style="width: 20%; font-size: 20px;">Quantity</th>
<th style="width: 15%; font-size: 20px; text-align: center;"><b>Price</b></th>
</tr>
</thead>
<tbody>
#foreach ($pgroup->pskus as $psku)
<?php $tempdata['sku-' . $i] = $psku ?>
<tr class="#if (isset($psku->quantity) && $psku->quantity > 0) {{ highlight }} #endif">
<td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->frame_fmt }}</td>
<td style="font-weight: 500; line-height: 30px; font-size: 14px;">{!! html_entity_decode($psku->frame_desc) !!}</td>
<td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->cover1_code }}/{{ $psku->color1_code }} {{ $psku->color1_desc }}</td>
<td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->cover2_code }}/{{ $psku->color2_code }} {{ $psku->color2_desc }}</td>
<td style="font-weight: 700; line-height: 30px; font-size: 14px;">
<span style="text-align: center; display: block; width: 100%;">${{ $psku->price }}</span>
</td>
</tr>
<?php $i++; ?>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
#endforeach
JS:
<script>
$(document).ready(function(){
$("#srch-term").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the main container as well as the table body and row that contains the match
$(".group-container, tbody tr").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
});
</script>
You could search the groups first and if the name/description matches, show the whole group and all it's rows. Otherwise do the usual procedure.
<script>
$(document).ready(function(){
$("#srch-term").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
var search_regex = new RegExp(filter, "i")
// Loop through the main container as well as the table body and row that contains the match
$(".group-container").each(function(){
//check if filter matches the group name or description
var group_name = $(this).children('h3').text()
var group_description = $(this).children('.uk-text-muted').text()
if(group_name.search(search_regex)>=0 || group_description.search(search_regex)>=0){ // filter matches
$(this).show() // show group
$(this).find("tbody tr").show() // and all children
return // skip tr filtering
}
var no_matches = true
$(this).find("tbody tr").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(search_regex) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
no_matches = false
}
});
if(no_matches){ // if no tr matched the search either, hide whole group
$(this).fadeOut();
}
});
});
});
</script>
I'm writing a page that has angular in it that responds to ajax requests and loads various data into a table. The angular works as expected when I type in the address, but if I use a link ( link ) to get to the page, the controller fails to load (but the html shows up). There are no page errors in the console except a resource not loaded for an image because the url is not being loaded by the angular. Here is my code:
<h1 style="text-align: center;">Product Search</h1>
<input type="text" class="form-control" placeholder="Search (Ex. ea-004, Christmas)..." id="search" style="margin-left: auto; margin-right: auto; margin-bottom: 15px;">
<div ng-app="search_results" style="text-align: center; margin-left: 0px; margin-right: 0px;">
<div ng-controller="search_results_ctl" style="text-align: center; margin-left: 0px; margin-right: 0px;">
product{{JSON.stringify(product)}}
<style>
.product:hover{
background-color: #DDDDDD;
cursor: pointer;
border:0px solid grey;
border-radius: 5px;
}
.product-selector:hover {
color: black;
}
</style>
<script>
var app = angular.module("search_results", ['angularUtils.directives.dirPagination']);
app.controller("search_results_ctl", ['$scope', function($scope){
console.log("Angular loaded...");
$scope.results = "";
$('#search').keypress(function(ev){
if(ev.which != 13){//do not add enter to search text, just submit query again
s_term = $('#search').val() + String.fromCharCode(ev.which);//append last character typed
}else{
s_term = $('#search').val();
}
$.ajax({
url: "/query",
data: {s_term: s_term},
success: function(data){
//console.log("products: " + data);
$scope.products = JSON.parse(data);
$scope.$apply();
}
});
});
}]);
</script>
<span ng-if="products != null">
<div style="width: 80%; margin: auto !important;
" dir-paginate="product in products | itemsPerPage: 10" class="row product">
<a href="/orders/new?product_id={{product.id}}" class="product-selector">
<div class="col-md-3 col-sm-3">{{product.title}}</div><div class="col-md-6 col-sm-6">{{product.description}}</div><div class="col-md-3 col-sm-3" style="text-align: center"><img src='{{product.image}}' width="50px" height="50px" style="margin-top: auto; margin-bottom: auto;"></div></a>
</div>
</span>
<span ng-if="products == null" >
<div style="background-color: #DDDDDD; border: 0px solid grey; border-radius: 5px;">
<h3 style="text-align: center;">Creating an Order</h3>
<p><strong>To start</strong>, type in the product code from the website or a key word like "christmas" or "sports". Click the product you would like to order, and it will take you to the order page.</p>
</div>
</span>
<dir-pagination-controls></dir-pagination-controls>
</div>
</div>
the link that is directing my to the page uses an href of "/products/search", which is the correct route.
Any help would be most appreciated!
Turns out after some further reading turbolinks was causing the problem. Turbolinks does not allow a full page reload, so angular never got fully bootstrapped. Here is a more thorough post on the issue: Using angularjs with turbolinks
I have but zero appitude to code anything. I am trying to build a small simple website and am almost done but have one little issue left to solve. I know this has been asked here before and I have tried to figure out how to make there circumstance work for me but can't. I have even tried the easy jquery fade in and fade out methods but can't get the id's correct or something?
All I want to do is fade in and out between the divs when the links are clicked.
I have tried and reviewed many examples here and still can't get it to connect at all.
Any help would be appreciated.
I have three links on a page that loads three different divs into a container. Everything is on the same page and everything works great other than I can't get them to fade in and out when the links are clicked. I have no problem loading the jquery library and doing it that way if that works best.
<head>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3 {
display:none;
overflow:hidden;
background-color: #E6E1E6
</style>
</head>
<body style="background-color: #E6E1E6">
<div id="container" style="position: fixed; width: 100%; z-index: 200;" >
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
</div>
</body>
</html>
You mentioned using jQuery, this is a basic idea. Comments in code should explain what is happening. I altered the HTML a little by adding some classes and some data attributes.
$("#linkDiv").on("click", "a", function(evt) { //use event bubbling so there is only one click hanlder
evt.preventDefault(); //stop click event
var anchor = $(this); //get the link that was clicked on
if (anchor.hasClass("active")) { //If has the class, it is already is active, nothing to do
return;
}
anchor.siblings().removeClass("active"); //find previous selectd link and unselect it
anchor.addClass("active"); //add class to current link and select it
var showTab = anchor.data("tab"); //read the data attribute data-tab to get item to show
var visibleContainer = $(".tab-container:visible");
var complete = function() { //function to call when fade out is complete
$(showTab).stop().fadeIn(300);
};
if (visibleContainer.length) { //make sure w have something to hide
$(visibleContainer).stop().fadeOut(100, complete); //if we do, fade out the element, when finished, call complete
} else {
complete(); //if first time, just show it
}
}).find("a").eq(0).trigger("click"); //click on first link to load tab content.
.tab-container {
display: none;
overflow: hidden;
}
#container1 {
background-color: #E60000;
}
#container2 {
background-color: #00E100;
}
#container3 {
background-color: #0000E6;
}
a.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="position: fixed; width: 100%; z-index: 200;">
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
Here's a simple example using jQuery - Not sure what you're end product is meant to look like but this should set you on the right foot.
Here's a sample snippet of the JS:
$(document).ready(function(){ //Wait for DOM to finish loading
$('.navigation a').click(function(){ //When the a link is clicked
var id = $(this).attr('href'); //grab its href as the ID of the target object
$('.hidden-content').fadeOut(500); //Fade out all the divs that are showing
$(id).fadeIn(500); //Fade in the target div
return false; //Prevent the default action of the a link
});
});
Check out the jsFiddle here: http://jsfiddle.net/pavkr/7vc2jj5j/
Here is some quick script to do the fading, but i would suggest you to use jQuery for same since it will be cross-browser.
Just update your script block, and it will work, no need to change any other code
Vanilla JS
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
fadeIn(document.getElementById('container'+idInfo), 20);
}
function fadeIn(element, duration) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, duration);
}
</script>
Using jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv(idInfo) {
$('#divLinks div').hide(200, function(){
//Show the clicked
$('#container'+idInf).fadeIn(200);
});
}
</script>