I have the html structure like this
<div class="first_div">
<ul class="menu">
...
</ul>
</div>
<div class="second_div">
<ul class="menu">
...
</ul>
</div>
By default the tab first goes to the first div menu and then the second div menu.
But I want to change its order. I want the tab should go first to the second div menu and then the first div menu.
I have tried by giving the tabindex="1" to the second div and tabindex="2" to the first div but its not working.
Note: I can't change the html structure.
tabindex seems to do the trick. Even after dynamically adding and re-setting the tabindex is working.
Here is the snippet:
var cnt = 2;
function btnAdd_Clicked() {
cnt++;
document.body.innerHTML += '<div class="div_' + cnt + '"><ul class="menu" tabindex="' + cnt + '">...' + (cnt) + '...</ul></div';
}
function btnReoder_Clicked() {
var uls = document.querySelectorAll("body>div>ul");
for (var i = uls.length - 1; i >= 0; i--) {
uls[i].setAttribute('tabindex', (cnt - i));
}
}
body>div {
border: 1px solid lightgray;
padding: 5px;
}
body>div>ul {
border: 1px solid lightblue;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>
<button onclick="btnAdd_Clicked()">Add</button>
</p>
<p>
<button onclick="btnReoder_Clicked()">Reverse tab</button>
</p>
<div class="first_div">
<ul class="menu" tabindex="2">
....First..
</ul>
</div>
<div class="second_div">
<ul class="menu" tabindex="1">
...Second...
</ul>
</div>
</body>
</html>
Related
new to stack overflow, so apologies if I'm missing something here.
Question 1: I've got this code that positions elements randomly within its parent - its woking great until I resize the screen. How would I do this responsively, so that the elements move within the parent container proportionally?
Question 2: Is there a way I could make sure that the dots don't overlap, and there's a specific amount of space between them - like padding / margins (the dots will all stay the same size if that helps). If I understand correctly this isn't possible with just CSS with my current setup.
All comments and suggestions are greatly appreciated!!
Here's my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
*{
box-sizing: border-box;
}
.container{
margin: auto;
display: block;
width:90VW;
height:90VH;
border:1px solid grey;
position:relative;
}
.random{
position:absolute;
width:8px;
height:8px;
border-radius: 8px;
background-color: antiquewhite;
border: solid grey;
}
</style>
<script>
$( document ).ready(function() {
$( '.random' ).each(function() {
$holder = $(this).parent();
$divWidth = $holder.width();
$divHeight = $holder.height();
$(this).css({
'left': Math.floor( Math.random() * Number( $divWidth ) ),
'top' : Math.floor( Math.random() * Number( $divHeight ) )
});
})
});
</script>
</head>
<body>
<!--- ↓ ↓ M A I N C O N T E N T ↓ ↓ --->
<main>
<div class="container">
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
</div>
</main>
<!-------------------------------------->
</body>
</html>
I am trying to create 1 search menu. With the search history that will appear when I click input search box
When I use class:focus ~ .class2, they work ? Please show me how we work
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.header__search-input:focus .header__search-input-history {
display: block;
}
.header__search-input-history {
display: none;
}
</style>
</head>
<body>
<div class="header__search-input-wrap">
<input type="text" class="header__search-input" placeholder="Search">
<div class="header__search-input-history">
<h3 class="header__search-input-history-title">History Search</h3>
<ul class="header__search-input-history-list">
<li class="header__search-input-history-item">
<a class="header__search-input-history-link" href="">History Item</a>
</li>
<li class="header__search-input-history-item">
<a class="header__search-input-history-link" href="">History Item</a> </li>
</ul>
</div>
</div>
</body>
</html>
Add the following css. This makes use of the + sibling selector
.header__search-input-history{
display: none;
}
.header__search-input:focus + .header__search-input-history
{
display: block;
}
Example here: https://codepen.io/jriches/pen/QWveZqW
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.css">
<style>
#demo{
background-color:purple;
color: white;
width: 100%;
}
#home{
width: 45px;
}
#back{
width: 25px;
}
#header{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="info_table" class="table">
<tr>
<td id="header">
<p align="center"><span style="float: left"><img src="back.png" id="back"></span><b>মন্ত্রণালয়</b><span style="float: right"><img src="home.png" id="home"></span><span style="float: right"><img src="refresh.png" id="refresh"></span></p>
</td>
</tr>
<tr>
<td id="demo" align="center"><td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
var bn_num = new Array('০','১','২','৩','৪','৫','৬','৭','৮','৯');
function bn_num_convert(num){
//console.log(num.length);
var bn_val = '';
for(i=0;i<num.length;i++){
//console.log(num[i] + '/' + bn_num[num[i]]);
bn_val = bn_val + bn_num[num[i]];
}
//console.log(bn_val);
return bn_val;
}
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
document.getElementById("demo").innerHTML ='মোট মন্ত্রণালয় ('+bn_num_convert(count.toString())+')';
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
[This is the corresponding output of the code.][1]
});
$('#info_table').append(info);
});
</script>
Firstly here purple background color doesn't get the full wide.if i inspect the background there shows an empty td which cause the problem.if i delete the empty td then i get perfect result.but there is no empty td in my code.plz see the code and show me the error.
Secondly there is no horizontal line at the end of the output result.why last line doesn't get horizontal line?
You are not closing the td, thats why empty td is appending.
<td id="demo" align="center"></td>
Close the td like in above code
and remove margin and padding as other posts suggested in case if you want full width till ends.
Set body margin paddding to 0px
body {
padding: 0px;
margin: 0px;
}
Just put in demo id td, it will show.
See thishttps://jsfiddle.net/v6mwpz89/3/
Cheers!
I have got the following sample html.
Files variable is a simple array of integers, like [1,2,3,4,5,6]
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<!--<script src="../app.js"></script>
<script src="../Controller/applicationCtrl.js"></script>-->
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
$scope.showAll = false;
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
height: 70px;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" ng-class="{'J1': (files.length > 3) && !showAll}">
<div ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href ng-click="showAll = !showAll;">Show {{ showAll ? 'less':'more'}}</a>
</div>
</body>
</html>
If the length of files array is more than 3 then it adds the overflow css to the div. But I also set the height of the div to a fixed value. What I would like to do is to set the height of div based on the heights of the first 3 divs on the fly without setting a fixed value for it. How can I achieve this?
You may try this. I've added jquery CDN. You can do this with raw javascript though.
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
/* Set the parent div's height */
$(function(){
$('.J1').height($('.each-button').outerHeight() * 3);
});
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" class="J1">
<!-- new class has been added -->
<div class="each-button" ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href>Show more</a>
</div>
</body>
</html>
I have a table of one row with two columns.I want to align content of second column to right...My content is not aligned to right..Can you check that what is wrong there.......
Here is my code....
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css"> <style>
table td{
border:1px solid green;
}
#Paginator ul{ margin:0px;padding:0px;}
#Paginator ul li{ font-family::Arial,Tahoma,helvetica,sans-serif;font-size:9pt;list-style:none;float:left;margin:2px;padding:4px 8px 2px 8px;border:1px solid black;cursor:pointer;}
#Paginator ul li,#PrevPage{display:none;}
</style>
<body>
<table style="border:1px solid red;width:100%"><tr>
<td>
<b style="float:left;">Number of Matching Addresses: 49  Number of pages: 5</b>
</td>
<td align="right">
<script>
var ga_pageId = new Array();
function pageNavigate(){if(document.getElementById("FromPage")){ var fromPage = parseInt( document.getElementById("FromPage").value);} if(document.getElementById("ToPage")){var toPage = parseInt( document.getElementById("ToPage").value);}if(fromPage == 1){document.getElementById("PrevPage").style.display="none";} else{ document.getElementById("PrevPage").style.display="inline"; }if(toPage == 5 || toPage<5){document.getElementById("NextPage").style.display="none";}else{ document.getElementById("NextPage").style.display="inline"; }for(var j=0;j<ga_pageId.length;j++){if(document.getElementById(ga_pageId[j])){document.getElementById(ga_pageId[j]).style.display="none"}}for(var i=fromPage;i<=toPage; i++){ var pageId = 'PAGE_'+i;if(document.getElementById(pageId))document.getElementById(pageId).style.display="inline"; }}
function previousPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) - 1;toPageEle.value = parseInt(toPageEle.value) - 1;pageNavigate();}}
function nextPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) + 1;toPageEle.value = parseInt(toPageEle.value) + 1; pageNavigate();}}
function pageOver(lv_this){if(lv_this.selected!='X')lv_this.style.backgroundColor = "#52CFCF";}
function pageOut(lv_this){if(lv_this.selected!='X')lv_this.style.backgroundColor = "#E6EFFA";}
</script>
<div id="Paginator">
<input type="hidden" id="FromPage" value="1"/>
<input type="hidden" id="ToPage" value="5 "/>
<ul >
<li onClick="previousPage()" id="PrevPage"><span>PREV</span></li>
<script> ga_pageId.push('PAGE_1');</script>
<li id="PAGE_1">1 </span></li>
<script> ga_pageId.push('PAGE_2');</script>
<li id="PAGE_2" >2 </span></li>
<script> ga_pageId.push('PAGE_3');</script>
<li id="PAGE_3" >3 </span></li><script> ga_pageId.push('PAGE_4');</script>
<li id="PAGE_4">4 </span></li>
<script> ga_pageId.push('PAGE_5');</script>
<li id="PAGE_5">5 </span>
</li>
<li onClick="nextPage()" id="NextPage" style="display:none"><span>NEXT</span></li>
</ul> </div>
<script> pageNavigate()</script>
</td>
</tr>
</table>
</body></html>
Add this css:
#Paginator ul{ margin:0px;padding:0px; float:right;}
You already have answer in your previous <TD> Tag style="float:left;".
Why you are not using same for 2nd <TD>?
You can use the Following options
1. <td style="float:right;">
2. <div id="Paginator" style="float:right;" >
3. #Paginator ul{ margin:0px;padding:0px; float:right;}
Because your content is wrapped in a div. The div expands to the size of the td and the content in it is aligned left. Add text-align: right to the Paginator ul li style.