I am trying to align some button and a input box with a table. Previous day and next day may or may not be present on the page depending on if a day exists. Below is by start code, current output and desired output.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class = "form-inline" >
<h1>some data</h1>
<br>
<button class="btn" name = "prevDayBtn"><i class="icon-backward"></i> Previous Day</button>
<input type='text' READONLY name = 'pageDate' value = '2013-05-18' />
<button class="btn" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
<br>
<br>
<table class = "table table-striped">
<th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
</table>
</form>
</div> <!-- /container -->
</body>
</html>
Current Output
Desired Output
Edit:
I tried Accipheran answer and got the result below. Also added code to jsFiddle http://jsfiddle.net/Y9SLs/1/
I would give the next-day button a class of pull-right (a bootstrap class) and the date field a class of center (custom class) where center is defined as
.center {
float: none;
display: table;
margin: 0 auto;
}
Think that should work
In addition to Accipheran's answer I used Twitters grid system to get the desired result. Code Below:
HTML
</head>
<body>
<div class="container">
<form class = "form-inline" >
<h1>some data</h1>
<div class = "row">
<div class = "span4">
<button class="btn" name = "prevDayBtn pull-left"><i class="icon-backward"></i> Previous Day</button>
</div>
<div class = "span4">
<input class = "center " type='text' READONLY name = 'pageDate' value = '2013-05-18' >
</div>
<div class = "span4">
<button class="btn pull-right" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
</div>
</div>
<br>
<div class = "row">
<div class = "span12">
<table class = "table table-striped">
<th>col11</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
</table>
</div>
</div>
</form>
</div> <!-- /container -->
</body>
</html>
Additional CSS
input.center {
float: none;
display: table;
margin: 0 auto;
}
Related
I'm extremely new to HTML, CSS and jQuery and I'm trying to make a simple table which accepts user input, stores it in rows of my table in HTML and therefore generates a delete button in each row. Problem is that I cannot get it to work even though I follow the tutorials of my class as well as the YT tutorials step by step. So far my code is:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
jquery #.js:
$document.ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
$("rembtn").click(function(){
$(this).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
$("#myTable tbody").append(blankRow);
}
});
}
else{
alert("Error: Please provide input for all fields")
}
});
});
I'd greatly appreciate any help on this matter.
I got it working.
The problem you have is you used $document instead of $(document)
Also for your delete function, you can use an inline onclick function.
$(document).ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn' onclick='remove(this)'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
}
else{
alert("Error: Please provide input for all fields")
}
});
});
function remove(elem){
$(elem).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
here is my codepen https://codepen.io/syedsadiqali/full/BwaMEW.
I'm trying to make a Wikipedia viewer project by freecodecamp. everything is working good except I the snippets from the Wikipedia API, the html entities can't be decoded and span tags can't be replaced. I tried many things. help needed, please.
HTML
<div class="container">
<div class="row row1">
<div class="col-md-6 text-center">
<div class="text-center">
<h2 class="text-center">Welcome to <h2><h1><br> Wikipedia Viewer Project <br> </h1><h2>Search Something Random<br>or<br> Enter Value below.</h2>
</div>
<input type="text" id="querybox">
<div>
<button class="btn btn-primary" id="querybutton">Search</button>
<div>
<a class="btn btn-primary" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Open Random Page</a>
</div>
<div class="data" id="put"></div>
</div>
</div>
<div class="col-md-6">
<div id="target" class="list-group"></div>
<script type="x-tmpl-mustache" id="template">
{{#search}}<h4 class="list-group-item-heading">{{title}}</h4><p class="list-group-item-text">{{{snippet}}}</p>{{/search}}
</script>
</div>
</div>
<div class="row">
</div>
<footer>
<h3 class='text-center'>Made with love by Syed Source Code would be soon available to you on my Github</h3>
</footer>
</div>
CSS
#import url('https://fonts.googleapis.com/css?family=Pacifico');
.row1{
font-family:"Pacifico",sans-serif;
}
.btn{
margin-top:10px;
padding:20px;
font-size:30px;
}
.row{
margin-top:20px;
}
input{
font-family:sans-serif!important;
}
JavaScript
$("#querybutton").on("click",function(){
data=document.getElementById("put"); query=document.getElementById("querybox").value;
url="https://wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&srsearch=" + query + "&callback=?";
$.getJSON(url,function(json){
var view=json.query;
var template = document.getElementById('template').innerHTML;
Mustache.parse(template);
// render the data into the template
var rendered = Mustache.render(template,view);
//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;
});
});
Result
https://codepen.io/syedsadiqali/full/BwaMEW
as #Paul Abbott commented I needed to use {{{snippet}}} triple mustache to render the data from Object as HTML. thanks for the answer, this answer I'm just writing to close this Question Right Answer was given by #PaulAbbott. thanks again.
I can not seem to style my website... for example the <pre> tags.
Nothing I do works. I am trying to style the whois results, I've tried wrapping it in a div and styling that, styling the pre tags only, styling everything. I just can't seem to get it working. I am hoping I am missing something stupid. You can see from the CSS I have tried numerous combinations (tried deleting them all just having pre ect)
Nav bar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
Main page -
<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');
if (isset($_GET['userInput']))
{
$domainName = $_GET['userInput'];
}
?>
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<?php
##checks if the variable name $domainName is set, before loading everything below
if (isset($domainName)):
?>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'ping'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<?php
###End the "IF" check
endif
?>
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
Ajax return page --
<?php
include 'domainclass.php';
$result = domain::getWhois($domainName);
?>
<pre class="whois"> <?php echo $result ?> </pre>;
Style sheet
.header
{
margin:1%;
}
.domainquery
{
margin-bottom:3%;
padding:40px 50px;
}
.nav-bar-logo
{
margin-right:20px;
padding-right:20px;
}
.table
{
font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}
pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
HTML output of page as requested (ignore style sheeting being above the bootstrap stylesheet, was trying something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'ping'
});
</script>
</div>
<h3>Tracert Result</h3>
<div class="tracecontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".tracecontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'trace'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
to style bootstrap you can over ride bootstrap styles or make your own new styles.
They recommend not editing the bootstrap .CSS directly so updates to bootstrap will not change your design.
You are correct to place your own style sheet call below the bootstrap call, so yours will override.
Even though your styles will over ride you might not be able to over ride a bootstrap rule that has the !important tag. You can either use the bootstrap classes and ID's in your stylesheet and make new rules, using your own !Important to force them through if necessary, or add additional classes for your styles:
a bit of code
was `<div class="col-md-12">`
make `<div class="col-md-12 myCol">`
and then make rules on your stylesheet for
.myCol{
these styles should persist
}
I have this html file am working on with semantic UI,the final product is supposed to look like the one in the pic.However it doesn't render well and the image keeps being pushed to the far left side of the screen.More so the elements are also improperly aligned.Where am i growing wrong ? Here is the current code.
html code
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<meta http-equiv= "X-UA-Compatible" content ="IE=edge,chrome=1"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0,maximum-scale =1.0"/>
<title>SEMANTIC UI</title>
<!--Site properties-->
<!--CSS-->
<link rel = "stylesheet" type ="text/css" href ="dist/semantic.min.css">
<link rel = "stylesheet" type ="text/css" href ="dist/mycss.css">
<script type ="text/javascript" src = "dist/jquery.js"></script>
<!--Javascript-->
<script type ="text/javascript" src = "dist/semantic.min.js"></script>
<script type ="text/javascript" src = "dist/myjs.js"></script>
</head>
<body>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon">Cities</i></a>
<a class ="item" href ="#"><i class="car icon">find a ride</i></a>
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"></div>
<button class = "ui button green">
<i class = "users icon">Sign Up</a>
</button>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui secondary inverted top large pointing menu">
<div class = "left item">
<a class "toc item">
<i class ="sidebar icon"></i>
</a>
</div>
<div class = "right-item">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon">Find a Ride</i></a>
<div class = "item">
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"><div>
<button class = "ui button green"><i class ="users icon"><i class = "users icon">Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container fluid findbg">
<form class ="ui form">
<div class = "field">
<div class = "fields">
<div class = "eleven wide field">
<div class = "ui search location">
<div class = "ui left icon input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code file
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
I'd have to say that you have a few errors in your markup:
unmatched closing tags (<i> is paired to </a>)
Misuse of Semantic UI icon tags. You shouldn't put any text inside <i class="<icon name> icon"></i> as this is
translated by Semantic UI to icons specified in the class attribute.
(As pointed out by #Anirudh) Improperly closed tag (i.e. <div class="or"> <div>)
Kindy check the code below for reference. Not sure if I achieved your desired look but it fixed the broken display in your existing markup.
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon"></i>Cities</a>
<a class ="item" href ="#"><i class="car icon"></i>find a ride</a>
<div class="item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class="or"></div>
<a class = "ui button green">
<i class = "users icon">Sign Up</i>
</a>
</div>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui fluid secondary inverted top large pointing menu">
<a class = "toc item">
<i class ="sidebar icon"></i>
</a>
<div class = "right menu">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon"></i>Find a Ride</a>
<div class = "item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class = "or"></div>
<a class = "ui button green"><i class = "users icon"></i>Sign Up</a>
</div>
</div> <!-- item -->
</div><!-- right menu-->
</div><!-- pointing menu -->
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container findbg">
<form class ="ui form">
<div class = "fields">
<div class = "sixteen wide field">
<div class = "ui search location">
<div class = "ui left icon fluid input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I have two divs that I want to show on the page. The order of the two divs depends on the value of a variable on the scope.
The trivial way of doing this is by repeating the divs code twice in the page, each time in a different order:
<div class="option 1" ng-if="value">
<div class="div 1">
<p>"this is the content for div 1"</p>
</div>
<div class="div 2">
<p>"this is the content for div 2"</p>
</div>
</div>
<div class="option 2" ng-if="!value">
<div class="div 2">
<p>"this is the content for div 2"</p>
</div>
<div class="div 1">
<p>"this is the content for div 1"</p>
</div>
</div>
Is there another way to do this, without repeating the code?
If you do not support IE9 I guess you can use the flexbox order CSS property with a conditional class.
<div class="main">
<div ng-class="{after: !value}">this is the content for div 1</div>
<div class="fixed">this is the content for div 2</div>
</div>
And the CSS:
.main { display: flex; flex-direction: column; }
.fixed { order: 2; }
.after { order: 3; }
See the flexbox order in action: https://jsfiddle.net/a6eaov63/2/
UPDATE: You can move each <div> to external file and include it in proper order depending on value.
<ng-include src="value ? 'div1.html' : 'div2.html'"></ng-include>
<ng-include src="value ? 'div2.html' : 'div1.html'"></ng-include>
(function(angular) {
'use strict';
angular.module('orderDivs', [])
.controller('orderController', ['$scope', function($scope) {
//$scope.variable = true; //uncomment this line to reverse the div ..
$scope.divList = [{'div':'option 1','condition':'true', 'content':'THIS IS DIV 1111'},{'div':'option 2','condition':'false', 'content':'THIS IS DIV 2222'}]
if ($scope.variable){
$scope.divList = $scope.divList.reverse();
}
$scope.changeOrder = function(){
$scope.divList = $scope.divList.reverse();
}
}]);
})(window.angular);
<!-- in views -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="orderDivs">
<div ng-controller="orderController">
<input type="checkbox" ng-click="changeOrder()" ng-model="variable"/>
<div ng-repeat="opt in divList">
<div class="option" ng-model="opt.div" ng-if="opt.condition">
<div>
{{opt.content}}
</div>
</div>
</div>
</div>
</body>
</html>