About <div ui-view></div> where to put in the code exactly - javascript

I am developping an application using bootstarap,Html and Angular js 1 for front .. it's an application spring boot indeed . i have a navar : the menu which i put in an index.html in static .. the other html file i put in static/views (divs) . Now when i started by adding "FicheFournisseur" which worked in the database and fine but now when i was structering my project i click on the "fiche fournisseur" in nav bar it don't take me the the div of FicheFournisseur.html .. After searshing i felt that something releated to angular js is not working : i guess cuz whenever i change its position things change and am not understading am not familiar with angular js
i put in the index
i started with last li : Fournisseurs ui-sref="newFournisseur" do not take me to to page newFournisseur.html which came in other menus
<!DOCTYPE html>
<html>
<head>
<body ng-app="MyApp" >
<div id="container">
<!--BEGIN TOPBAR-->
<div id="header-topbar-option-demo" class="page-header-topbar">
<nav id="topbar" role="navigation" style="margin-bottom: 0;" data-step="3" class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<img src="../node_modules/bootstrap/dist/images/logo/logo.png">
</div>
<div class="topbar-main"><a id="menu-toggle" href="#" class="hidden-xs"><!--<i class="fa fa-bars"></i>--></a>
<a id="logo" href="index.html" class="navbar-brand"><span class="logo-text" style="color: #fff; margin-left: 50px;">
SYSTÈME INFORMATISÉ DE SUIVI ET ÉVALUATION DES PROGRAMMES ET DES PROJETS PUBLICS </span></a>
</div>
</nav>
<!--BEGIN MODAL CONFIG PORTLET-->
<div id="modal-config" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
<h4 class="modal-title">modal</h4>
</div>
<div class="modal-body">
<p>
contenu du modal
</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default"> valider</button>
<button type="button" class="btn btn-primary">annuler</button>
</div>
</div>
</div>
</div>
<!--END MODAL CONFIG PORTLET-->
</div>
<!--END TOPBAR-->
<div id="wrapper">
<!--BEGIN SIDEBAR MENU-->
<nav id="sidebar" class="nav navbar-default navbar-static-side" role="navigation" data-step="2"
data-position="right">
<!-- <ul class="nav__list">
<li>
</span> Accueil </label>
</li>
</ul> -->
<ul class="nav__list">
<li>
<input id="group-1" type="checkbox" hidden />
<label for="group-1"><span class="fa fa-angle-right"></span> Suivi des marchés </label>
<ul class="group-list">
<div class="clearfix"></div>
<li>
<input id="sub-group-6" type="checkbox" hidden />
<label for="sub-group-6"><span class="fa fa-angle-right"></span> Consignation des marchés </label>
<ul class="sub-group-list">
<li>
<input id="sub-group-2" type="checkbox" hidden />
<label for="sub-group-2"><span class="fa fa-angle-right"></span> Fiche marché</label>
<ul class="sub-group-list">
<li class="active"><a href="test1.html">Fiche marché</li>
<li><a class="" href="modification.html">Consignation avenant</a></li>
</ul>
</li>
<li class="active">yyy</li>
<!-- insérer plus -->
</ul>
</li>
<li>
<input id="sub-group-20" type="checkbox" hidden />
<label for="sub-group-20"><span class="fa fa-angle-right"></span> Consignation des appels à la concurrence </label>
<ul class="sub-group-list">
<!-- <li class="active">ici</li> -->
<li>
<input id="sub-group-3" type="checkbox" hidden />
<label for="sub-group-3"><span class="fa fa-angle-right"></span> Fiche appel à la concurrence </label>
<ul class="sub-group-list">
<li>
<input id="sub-group-4" type="checkbox" hidden />
<label for="sub-group-4"><span class="fa fa-angle-right"></span> Fiche lot</label>
<ul class="sub-group-list">
<li class="active">Fiche Activité</li>
<li><a class="" href="">xxx</a></li>
<li><a class="" href="">xxxx</a></li>
</ul>
</li>
<!--<li class="active"><a href="#">Fiche lot</li>
<li><a class="" href="">xxx</a></li>
<li><a class="" href="">xxxx</a></li> -->
</ul>
</li>
<!-- insérer plus -->
</ul>
</li>
<li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1"><span class="fa fa-angle-right"></span> Fournisseurs</label>
<ul class="sub-group-list">
<li class="active"><a ui-sref="newFournisseur">Fiche Fournisseur</a></li>
</ul>
</li>
<!--<li>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxx</li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1"><span class="fa fa-angle-right"></span> Financement</label>
<ul class="sub-group-list">
<li class="active">2nd level nav item</li>
<li>2nd level nav item</li>
<li>2nd level nav item</li>
<li>
<input id="sub-sub-group-1" type="checkbox" hidden />
<label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
<ul class="sub-sub-group-list">
<li>3rd level nav item</li>
<li>3rd level nav item</li>
<li>3rd level nav item</li>
</ul>
</li>
</ul>
</li>-->
</ul>
</li>
</ul>
</nav>
<!--END SIDEBAR MENU-->
<!--BEGIN PAGE WRAPPER-->
<div id="page-wrapper">
<!--BEGIN CONTENT-->
<div class="page-content">
<div id="tab-general">
<div class="row mbl">
<div ng-view></div>
</div>
</div>
</div>
<!--END CONTENT-->
</div>
<!--END PAGE WRAPPER-->
</div>
</div>
<!--END PAGE CONTAINER-->
<script src="../node_modules/bootstrap/dist/js/jquery-3.1.1.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../node_modules/bootstrap/dist/js/jquery-3.1.1.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<div ui-view></div>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Related

how to display multiple nav bar tab horizontal on click checkbox

how to display multiple nav bar tab horizontal on click checkbox
what i am trying to do that when i click on checkbox then show navbar and when i click on uncheck box then its hide.
in here below my code what I m try to create functionality its work fine. but its show and hide nav bar in vertically but i want to achieve in one line (horizontal)
but i am not able to achieve i m stuck on that when i click on checkbox1 and checkbox2 its show in one line in horizontal. But its not happen in my code.
My goal when i click on checkbox1 and checkbox2 both then navbar tab display in one line .but in my code when i click both checkbox 1 and 2 then its show vertically.
my expectation result look like this something https://ibb.co/D16nBNH
anybody body help me this issue.
function addDay(e) {
document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
<input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>
<div class="container">
<div class="row mr-2 ml-0" style="display:none;" id="lundi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mardi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</div>
<div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
<div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
<div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
<div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>
its not happen in my code how can we do that
any help its vey thankful

You can change from .container to .container-2 class and a display:flex to it to get all the nav-tabs in horizontal line.
function addDay(e) {
document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
.container-2{
display:flex}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
<input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>
<div class="container-2">
<div class="row mr-2 ml-0" style="display:none;" id="lundi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mardi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</div>
<div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
<div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
<div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
<div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

Can't get all html code by using execute_script in Python for web scraping

I am trying to get html code for web scraping using Python. I chose a website of the real estate agency.
Before doing onclick event of the button that change pages I need to get this element itself.
However buttons that let us go to the next or previous page (designed with symbols ">" and "<") are not displayed inside the code.
Could you please advice something on this issue.
Here is my code
from selenium import webdriver
from bs4 import BeautifulSoup as bs
import requests
browser = webdriver.Chrome()
url = "https://www.centris.ca/en/properties~for-sale?view=Thumbnail"
browser.get(url)
innerHTML = browser.execute_script("return document.body.innerHTML")
print(innerHTML)

You were almost there. You simply need to induce WebDriverWait for the desired elements to be visible and then extract the html / page source as follows:
Code Block:
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
options = Options()
options.add_argument("start-maximized")
options.add_argument("disable-infobars")
options.add_argument("--disable-extensions")
driver = webdriver.Chrome(chrome_options=options, executable_path=r'C:\Utility\BrowserDrivers\chromedriver.exe')
driver.get("https://www.centris.ca/en/properties~for-sale?view=Thumbnail")
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div.wrapper.even.wrapper-results")))
print(driver.execute_script("return document.body.innerHTML"))
Console Output:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-558V6M" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-NC4N8H6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
<div id="site" itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Centris.ca">
<meta content="https://www.facebook.com/centris.ca/" itemprop="sameAs">
<meta content="Centris.ca lists all of the properties for sale or rent by a real estate broker in Québec. Find your house, condo, lot, plex, business..." itemprop="description">
<header id="header">
<div id="header-wrapper" class="wrapper">
<div class="top-nav" role="navigation">
<a class="logo-container" itemprop="url" href="/en">
<img itemprop="logo" src="/master/images/logo-centris-small.gif" alt="Centris.ca">
<strong>The Largest Number of Homes for Sale</strong>
</a>
<nav class="menu-container">
<ul class="main-menu">
<li>
<a class="main-item" href="/en/buy">Buy</a>
<div class="submenu">
<ul class="purchase">
<li class="first"><span class="item-title">Find a property</span></li>
<li class="second"><span class="item-title">Buying with a broker</span></li>
<li class="third"><span class="item-title">Steps involved in buying</span></li>
<li class="fourth"><span class="item-title">Risks of buying without a broker</span></li>
</ul>
</div>
</li>
<li>
<a class="main-item" href="/en/sell">Sell</a>
<div class="submenu">
<ul class="sale">
<li class="first"><span class="item-title">Selling with a broker</span></li>
<li class="second"><span class="item-title">Steps involved in selling</span></li>
<li class="third"><span class="item-title">Risks of selling without a broker</span></li>
</ul>
</div>
</li>
<li>
<a class="main-item" href="/en/my-real-estate-broker">My broker</a>
<div class="submenu">
<ul class="broker">
<li class="first"><span class="item-title">Find a broker</span></li>
<li class="second"><span class="item-title">The role of the broker</span></li>
<li class="third"><span class="item-title">The 10 qualities of a good broker</span></li>
<li class="fifth"><span class="item-title">What clients are saying</span></li>
<li class="last"><span class="item-title">Become a broker</span></li>
</ul>
</div>
</li>
<li>
<a class="main-item" href="/en/tools">Tools</a>
<div class="submenu">
<ul class="infos">
<li class="first"><span class="item-title">Community profile</span></li>
<li class="second"><span class="item-title">Real estate statistics</span></li>
<li class="third"><span class="item-title">Useful links</span></li>
<li class="fourth"><span class="item-title">Real estate blog</span></li>
<li class="last"><span class="item-title">Calculator</span></li>
</ul>
</div>
</li>
<li class="property-search-icon">Search</li>
</ul>
<ul class="right-menu">
<li class="my-position-link"><i></i>Nearby</li>
<li>
My account
</li>
<li>
<a class="lang" href="/fr/propriete~a-vendre?view=Thumbnail"><span class="desktop">FR</span><span class="device">Français</span></a>
</li>
<li class="last-child">
<a class="btn-favorites favorites " href="/en/my-favourites?view=Thumbnail" title="See my favourites">
<span class="icon icon-fav enableHover"></span>
<span class="text">Favourites</span>
<span class="labelCount hidden"></span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="mobile-menu-container">
<li class="border">
My account
</li>
<li>
<div class="m-favorites">
<a class="m-fav-link link-disabled" href="/en/my-favourites?view=Thumbnail" title="See my favourites">
<span class="text">My favourites</span>
<span class="labelCount hidden"></span>
</a>
</div>
</li>
<li class="border">
Nearby
</li>
<li>
<div class="main-item">Buy</div>
<div class="submenu">
<ul>
<li>
Find a property
</li>
<li>
Buying with a broker
</li>
<li>
Steps involved in buying
</li>
<li>
Risks of buying without a broker
</li>
</ul>
</div>
</li>
<li>
<div class="main-item">Sell</div>
<div class="submenu">
<ul>
<li>
Selling with a broker
</li>
<li>
Steps involved in selling
</li>
<li>
Risks of selling without a broker
</li>
</ul>
</div>
</li>
<li>
<div class="main-item">My broker</div>
<div class="submenu">
<ul>
<li>
Find a broker
</li>
<li>
The role of the broker
</li>
<li>
The 10 qualities of a good broker
</li>
<li>
What clients are saying
</li>
<li>
Become a broker
</li>
</ul>
</div>
</li>
<li class="border">
<div class="main-item">Tools</div>
<div class="submenu">
<ul>
<li>
Community profile
</li>
<li>
Real estate statistics
</li>
<li>
Useful links
</li>
<li>
Real estate blog
</li>
<li>
Calculator
</li>
</ul>
</div>
</li>
<li class="border">
<a class="lang" href="/fr/propriete~a-vendre?view=Thumbnail">Français</a>
</li>
<li>
Broker login
</li>
</ul>
</nav>
<div class="mobileMenuButtons">
<a class="searchLink icon-search" href="/en/properties~for-sale?view=Thumbnail&OpenSearchPanel=true" aria-label="Search"></a>
<div class="menuToggle icon-menu " aria-label="Toggle navigation"></div>
</div>
</div>
<div id="search-block" role="search" class="region" style="display: none">
<div id="search-form">
<fieldset>
<fieldset class="search-field">
<div class="ie-search fields-container">
<label id="labelSearch" for="search">Search by City, Neighbourhood, Region, Address or Centris<sup>®</sup> No.</label>
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="search" name="search" id="search" class="focus ui-autocomplete-input" autocomplete="off">
</div>
<button id="submit-search" class="btn btn-search">Search</button>
</fieldset>
<div id="freeform-filters" class="filters-list">
<ul></ul>
</div>
<!-- Price -->
<fieldset id="price" class="fieldset">
<legend class="none">Price</legend>
<div class="control-group slide">
<div class="controls">
<div id="slider" data-min-price="0" data-max-price="999999999" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a></div>
<div id="slider-value"><span id="currentPrixMin" data-value="0" style="position: relative; top: 0px; left: 0px;">$0</span><span id="currentPrixMax" data-value="999999999" style="position: relative; top: 0px; left: 0px;"><span>$20,000,000+</span></span></div>
</div>
</div>
</fieldset>
<!-- Residentiel/Commerciel, Vendre/Louer -->
<fieldset id="property-category" class="fieldset">
<legend class="none">Catégorie</legend>
<div class="control-group">
<div class="control-radio first">
<button id="residentiel" class="btn btn-check active">Residential</button>
<button id="commercial" class="btn btn-check">Commercial</button>
</div>
<div class="control-radio">
<button id="avendre" class="btn btn-check active">For sale</button>
<button id="alouer" class="btn btn-check">For rent</button>
</div>
</div>
</fieldset>
<a id="btn-advanced-criterias" class="link-more-below" href="javascript:;" style="display: none;">ADVANCED CRITERIA<i></i></a>
</fieldset>
<fieldset id="container-advanced-criterias">
<!-- PropertyTypes -->
<fieldset class="fieldset fieldset-border" id="LegendItemProperty">
<legend class="none">Property type<i class="btn-toggle"></i></legend>
<div id="item-property" class="control-select-inline container-fieldset">
<button class="btn-form-choice" data-value="A">Single-family home</button>
<button class="btn-form-choice" data-value="B">Condo</button>
<button class="btn-form-choice" data-value="C">Loft / Studio</button>
<button class="btn-form-choice" data-value="D">Condominium home</button>
<button class="btn-form-choice" data-value="E">Plex</button>
<button class="btn-form-choice" data-value="F">Intergenerational</button>
<button class="btn-form-choice" data-value="G">Mobile home</button>
<button class="btn-form-choice" data-value="H">Hobby farm</button>
<button class="btn-form-choice" data-value="I">Lot</button>
<button class="btn-form-choice" data-value="J" style="display: none;">Multi-Family</button>
<button class="btn-form-choice" data-value="K" style="display: none;">Office</button>
<button class="btn-form-choice" data-value="L" style="display: none;">Industrial</button>
<button class="btn-form-choice" data-value="M" style="display: none;">Commercial</button>
<button class="btn-form-choice" data-value="N" style="display: none;">Accommodation</button>
<button class="btn-form-choice" data-value="O" style="display: none;">Agricultural</button>
<button class="btn-form-choice" data-value="P" style="display: none;">Lot</button>
<button class="btn-form-choice" data-value="Q" style="display: none;">Business</button>
</div>
</fieldset>
<!-- FEATURES SECTION -->
<fieldset class="fieldset-border" id="CharacteristicsSection">
<legend>Features<i class="btn-toggle"></i></legend>
<div class="container-fieldset">
<!-- DROPDOWNS - FEATURES SECTION -->
<fieldset id="fdChambreStat">
<legend></legend>
<div class="control-group caracteristics">
<div class="controls">
<!-- Chambres -->
<div class="control-select" id="select-room" tabindex="-1" data-visiblity-name="Rooms"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of bedrooms</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of bedrooms</li>
<li class="option" data-option-value="1">1 bedroom</li>
<li class="option" data-option-value="1+">1 bedroom or +</li>
<li class="option" data-option-value="2">2 bedrooms</li>
<li class="option" data-option-value="2+">2 bedrooms or +</li>
<li class="option" data-option-value="3">3 bedrooms</li>
<li class="option" data-option-value="3+">3 bedrooms or +</li>
<li class="option" data-option-value="4">4 bedrooms</li>
<li class="option" data-option-value="4+">4 bedrooms or +</li>
<li class="option" data-option-value="5">5 bedrooms</li>
<li class="option" data-option-value="5+">5 bedrooms or +</li>
</ul>
</div>
</div>
<!-- Salle de bain/eau -->
<div class="control-select" id="select-bathroom" tabindex="-1" data-visiblity-name="Bathrooms"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of bath/powder rooms</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of bath/powder rooms</li>
<li class="option" data-option-value="1">1 bath/powder room or +</li>
<li class="option" data-option-value="2">2 bath/powder rooms or +</li>
<li class="option" data-option-value="3">3 bath/powder rooms or +</li>
<li class="option" data-option-value="4">4 bath/powder rooms or +</li>
<li class="option" data-option-value="5">5 bath/powder rooms or +</li>
</ul>
</div>
</div>
<!-- Stationnement -->
<div class="control-select" id="select-stationnement" tabindex="-1" data-visiblity-name="Stationnement"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of parking spaces</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of parking spaces</li>
<li class="option" data-option-value="1">1 parking or +</li>
<li class="option" data-option-value="2">2 parkings or +</li>
<li class="option" data-option-value="3">3 parkings or +</li>
<li class="option" data-option-value="4">4 parkings or +</li>
<li class="option" data-option-value="5">5 parkings or +</li>
</ul>
</div>
</div>
<!-- Garage -->
<div class="control-select" id="select-garage" tabindex="-1" data-visiblity-name="Garage"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of garages</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of garages</li>
<li class="option" data-option-value="1">1 garage or +</li>
<li class="option" data-option-value="2">2 garages or +</li>
<li class="option" data-option-value="3">3 garages or +</li>
<li class="option" data-option-value="4">4 garages or +</li>
<li class="option" data-option-value="5">5 garages or +</li>
</ul>
</div>
</div>
</div>
</div>
</fieldset>
<!-- CHECKBOXS - FEATURES SECTION -->
<fieldset id="fsCaracAutre">
<legend></legend>
<div class="control-group">
<ul class="checkbox-list">
<!-- Specs -->
<li data-visiblity-name="Piscine">
<input type="checkbox" id="chk-piscine"><i></i><label for="chk-piscine" class="checkbox">Pool<span id="spanchk-piscine"></span></label>
</li>
<li data-visiblity-name="Ascenseur">
<input type="checkbox" id="chk-ascenseur"><i></i><label for="chk-ascenseur" class="checkbox">Elevator<span id="spanchk-ascenseur"></span></label>
</li>
<li data-visiblity-name="Apmr">
<input type="checkbox" id="chk-apmr"><i></i><label for="chk-apmr" class="checkbox">Adapted for reduced mobility<span id="spanchk-apmr"></span></label>
</li>
<li data-visiblity-name="BordEau">
<input type="checkbox" id="chk-bordeau"><i></i><label for="chk-bordeau" class="checkbox">Waterfront<span id="spanchk-bordeau"></span></label>
</li>
<li data-visiblity-name="AccesEau">
<input type="checkbox" id="chk-acceseau"><i></i><label for="chk-acceseau" class="checkbox">Access to waterfront<span id="spanchk-acceseau"></span></label>
</li>
<li data-visiblity-name="PlanEauNavigable">
<input type="checkbox" id="chk-planeaunavigable"><i></i><label for="chk-planeaunavigable" class="checkbox">Navigable body of water<span id="spanchk-planeaunavigable"></span></label>
</li>
<li data-visiblity-name="Meuble" style="display: none;">
<input type="checkbox" id="chk-meuble"><i></i><label for="chk-meuble" class="checkbox">Furnished<span id="spanchk-meuble"></span></label>
</li>
<li data-visiblity-name="SemiMeuble" style="display: none;">
<input type="checkbox" id="chk-semimeuble"><i></i><label for="chk-semimeuble" class="checkbox">Semi-furnished<span id="spanchk-semimeuble"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="TypeHebergement" style="display: none;">
<legend></legend>
<div class="control-group">
<ul id="type-hebergement" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="HOTEL" data-value="HOTEL"><i></i><label for="HOTEL" class="checkbox">Hotel<span id="spanTypeHebergementHOTEL"></span></label>
</li>
<li>
<input type="checkbox" id="MOTEL" data-value="MOTEL"><i></i><label for="MOTEL" class="checkbox">Motel<span id="spanTypeHebergementMOTEL"></span></label>
</li>
<li>
<input type="checkbox" id="AUBERGE" data-value="AUBERGE"><i></i><label for="AUBERGE" class="checkbox">Inn<span id="spanTypeHebergementAUBERGE"></span></label>
</li>
<li>
<input type="checkbox" id="MAISONRETR" data-value="MAISONRETR"><i></i><label for="MAISONRETR" class="checkbox">Seniors' residence<span id="spanTypeHebergementMAISONRETR"></span></label>
</li>
<li>
<input type="checkbox" id="AU" data-value="AU"><i></i><label for="AU" class="checkbox">Other<span id="spanTypeHebergementAU"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="TypeExploitation" style="display: none;">
<legend></legend>
<div class="control-group">
<ul id="type-exploitation" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="ELEVAGE" data-value="ELEVAGE"><i></i><label for="ELEVAGE" class="checkbox">Animal husbandry<span id="spanTypeExploitationELEVAGE"></span></label>
</li>
<li>
<input type="checkbox" id="APICULTURE" data-value="APICULTURE"><i></i><label for="APICULTURE" class="checkbox">Beekeeping<span id="spanTypeExploitationAPICULTURE"></span></label>
</li>
<li>
<input type="checkbox" id="FERMELAIT" data-value="FERMELAIT"><i></i><label for="FERMELAIT" class="checkbox">Dairy farm<span id="spanTypeExploitationFERMELAIT"></span></label>
</li>
<li>
<input type="checkbox" id="SERRES" data-value="SERRES"><i></i><label for="SERRES" class="checkbox">Greenhouses<span id="spanTypeExploitationSERRES"></span></label>
</li>
<li>
<input type="checkbox" id="HORTICOLE" data-value="HORTICOLE"><i></i><label for="HORTICOLE" class="checkbox">Horticulture<span id="spanTypeExploitationHORTICOLE"></span></label>
</li>
<li>
<input type="checkbox" id="ERABLIERE" data-value="ERABLIERE"><i></i><label for="ERABLIERE" class="checkbox">Maple forest<span id="spanTypeExploitationERABLIERE"></span></label>
</li>
<li>
<input type="checkbox" id="PEPINIERE" data-value="PEPINIERE"><i></i><label for="PEPINIERE" class="checkbox">Nursery (tree)<span id="spanTypeExploitationPEPINIERE"></span></label>
</li>
<li>
<input type="checkbox" id="VERGER" data-value="VERGER"><i></i><label for="VERGER" class="checkbox">Orchard<span id="spanTypeExploitationVERGER"></span></label>
</li>
<li>
<input type="checkbox" id="EQUESTRE" data-value="EQUESTRE"><i></i><label for="EQUESTRE" class="checkbox">Riding centre<span id="spanTypeExploitationEQUESTRE"></span></label>
</li>
<li>
<input type="checkbox" id="MARAICHERE" data-value="MARAICHERE"><i></i><label for="MARAICHERE" class="checkbox">Vegetable farm<span id="spanTypeExploitationMARAICHERE"></span></label>
</li>
<li>
<input type="checkbox" id="VIGNOBLE" data-value="VIGNOBLE"><i></i><label for="VIGNOBLE" class="checkbox">Winery<span id="spanTypeExploitationVIGNOBLE"></span></label>
</li>
<li>
<input type="checkbox" id="AU" data-value="AU"><i></i><label for="AU" class="checkbox">Other<span id="spanTypeExploitationAU"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="Zonage" style="display: none;">
<div class="control-group">
<ul id="zonage" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="RESI" data-value="RESI"><i></i><label for="RESI" class="checkbox">Residential zoning<span id="spanZonageRESI"></span></label>
</li>
<li>
<input type="checkbox" id="COMM" data-value="COMM"><i></i><label for="COMM" class="checkbox">Commercial zoning<span id="spanZonageCOMM"></span></label>
</li>
<li>
<input type="checkbox" id="INDS" data-value="INDS"><i></i><label for="INDS" class="checkbox">Industrial zoning<span id="spanZonageINDS"></span></label>
</li>
<li>
<input type="checkbox" id="AGR" data-value="AGR"><i></i><label for="AGR" class="checkbox">Agricultural zoning<span id="spanZonageAGR"></span></label>
</li>
<li>
<input type="checkbox" id="FORE" data-value="FORE"><i></i><label for="FORE" class="checkbox">Forest zoning<span id="spanZonageFORE"></span></label>
</li>
<li>
<input type="checkbox" id="VILG" data-value="VILG"><i></i><label for="VILG" class="checkbox">Resort zoning<span id="spanZonageVILG"></span></label>
</li>
<li>
<input type="checkbox" id="RECR" data-value="RECR"><i></i><label for="RECR" class="checkbox">Recreational and tourism zoning<span id="spanZonageRECR"></span></label>
</li>
<li>
<input type="checkbox" id="AUT" data-value="AUT"><i></i><label for="AUT" class="checkbox">Other zoning<span id="spanZonageAUT"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="SecteurActivite" style="display: none;">
<div class="control-group">
<ul id="secteur-activite" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="ALIM" data-value="ALIM"><i></i><label for="ALIM" class="checkbox">Food services<span id="spanSecteurActiviteALIM"></span></label>
</li>
<li>
<input type="checkbox" id="REST" data-value="REST"><i></i><label for="REST" class="checkbox">Restaurant industry<span id="spanSecteurActiviteREST"></span></label>
</li>
<li>
<input type="checkbox" id="HEBERGEMENT" data-value="HEBERGEMENT"><i></i><label for="HEBERGEMENT" class="checkbox">Accomodation<span id="spanSecteurActiviteHEBERGEMENT"></span></label>
</li>
<li>
<input type="checkbox" id="VENDET" data-value="VENDET"><i></i><label for="VENDET" class="checkbox">Retail Sales<span id="spanSecteurActiviteVENDET"></span></label>
</li>
<li>
<input type="checkbox" id="SERVICE" data-value="SERVICE"><i></i><label for="SERVICE" class="checkbox">Service<span id="spanSecteurActiviteSERVICE"></span></label>
</li>
<li>
<input type="checkbox" id="FAB" data-value="FAB"><i></i><label for="FAB" class="checkbox">Manufacturing<span id="spanSecteurActiviteFAB"></span></label>
</li>
<li>
<input type="checkbox" id="AGRICOLE" data-value="AGRICOLE"><i></i><label for="AGRICOLE" class="checkbox">Agricultural<span id="spanSecteurActiviteAGRICOLE"></span></label>
</li>
<li>
<input type="checkbox" id="AU" data-value="AU"><i></i><label for="AU" class="checkbox">Other<span id="spanSecteurActiviteAU"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="GenreCommerce" style="display: none;">
<div class="field-focus">
<label for="genre-commerce">Type of business</label>
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input id="genre-commerce" class="focus dropdown ui-autocomplete-input" autocomplete="off">
<div id="genreCommerce-filters" class="filters-list">
<ul></ul>
</div>
<ul style="display:none"></ul>
</div>
</fieldset>
</div>
</fieldset>

One can click a link without seeing its content simply by using following line of code:
browser.find_element_by_xpath("//li[#class='next']/a").click()

Scrolling page script in asp.net mvc. Using #RenderBody() function

I'm learning bootstrap + asp.net mvc by making portfolio website.
It is based on bootstrap example.
On this example we see one page website. When we click e.g. "about" the site is using javascript and scrolling to about section. I understand that.
but... i want to try this 1 page website, spread on many Controllers (and views), use layout page with RenderBody() in it and keep the same funcionality like before(scrolling).
e.g my views:
About/Index
Portfolio/Index
Contact/Index
and layoutPage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/font-awesome.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/>
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- NAVI -->
<div id="Navigation" class="navbar navbar-default navbar-fixed-top navbar-mm">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navi</span> Menu<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Welcome to Site.com</a>
</div>
<div class="collapse navbar-collapse navbar-select">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Portfolio
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<li class="page-scroll">
Blog
</li>
</ul>
</div>
</div>
</div>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="~/Img/lawl.png" alt="">
<div class="intro-text">
<span class="name">mySite.com</span>
<hr/>
<span class="skills">Developer</span>
</div>
</div>
</div>
</div>
</header>
<div class="container">
#RenderBody()
</div>
<footer class="footer text-center">
<div class="footer-upp">
<div class="container">
<div class="row">
<div class="footer-col col-lg-4 col-md-4 col-sm-4">
<h3>CONTACT</h3>
tel: 000-000-000 <br />
email: example#gmail.com <br />
City
</div>
<div class="footer-col col-lg-8 col-md-8 col-sm-8">
<h3>MEET ME</h3>
<ul class="list-inline">
<li>
<i class="fa fa-fw fa-facebook"></i>
</li>
<li>
<i class="fa fa-fw fa-linkedin"></i>
</li>
<li>
<i class="fa fa-fw fa-github"></i>
</li>
<li>
<i class="fa fa-fw fa-envelope"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-down">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright ©</p>
</div>
</div>
</div>
</div>
</footer>
<script src="~/Scripts/Site.js"></script>
There is anyway to make this?

Is it possible to have a popup when clicking on the menu with AngularJS?

I actually have this menu and I want to add a popup authentication when clicking on the "Dashboard" word... is this possible? Here is the code of the index page and i don't know what to change...
<ng-include src="'views/layout/header.html'"></ng-include>
<nav id="headernav" class="navbar ng-hide" role="navigation" ng-show="getLayoutOption('layoutHorizontal') && !layoutLoading">
<div class="nav">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<i class="fa fa-reorder"></i>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" ng-class="{'large-icons-nav': getLayoutOption('layoutHorizontalLargeIcons')}" id="horizontal-navbar">
<ul ng-controller="NavigationController" id="top-nav" class="nav navbar-nav">
<li ng-repeat="item in menu"
ng-if="!item.hideOnHorizontal"
ng-class="{ hasChild: (item.children!==undefined),
active: item.selected,
open: (item.children!==undefined) && item.open,
'nav-separator': item.separator==true }"
ng-include="'templates/nav_renderer_horizontal.html'"
></li>
</ul>
</div>
</nav>
<div id="wrapper">
<div id="layout-static">
<div class="static-sidebar-wrapper" ng-show="!layoutLoading">
<nav class="static-sidebar" role="navigation">
<ul ng-controller="NavigationController" id="sidebar" sticky-scroll="50">
<li id="search" ng-cloak>
<a href="">
<i class="fa fa-binoculars opacity-control"></i>
</a>
<form
ng-click="$event.stopPropagation()"
ng-submit="goToSearch()">
<input type="text" ng-model="searchQuery" class="search-query" placeholder="Type to filter..." />
<button type="submit" ng-click="goToSearch()"><i class="fa fa-binoculars"></i></button>
</form>
</li>
<li ng-repeat="item in menu"
ng-class="{ hasChild: (item.children!==undefined),
active: item.selected,
open: (item.children!==undefined) && item.open,
'nav-separator': item.separator==true,
'search-focus': (searchQuery.length>0 && item.selected) }"
ng-show="!(searchQuery.length && !item.selected)"
ng-include="'templates/nav_renderer.html'"
></li>
</ul>
</nav> <!-- #sidebar-->
</div>
<div class="static-content-wrapper">
<div class="static-content">
<div id="wrap" ng-view="" class="mainview-animation animated">
</div> <!--wrap -->
</div>
<footer role="contentinfo" ng-show="!layoutLoading" ng-cloak>
<div class="clearfix">
<ul class="list-unstyled list-inline pull-left">
<li></li>
</ul>
<button class="pull-right btn btn-default btn-sm hidden-print" back-to-top style="padding: 1px 10px;"><i class="fa fa-angle-up"></i></button>
</div>
</footer>
</div>
</div>
</div>
Here is a Picture

Here is a Demo for Dialogs in AngularJS.
I think, the custom Dialog is what you search for.

Navbar dropdown button does not work in twitter bootstrap

I am preety new to twitter-bootstrap, my website working fine on big screens like desktop but when I resize the browser to get an affect of mobile screen it does not show me that icon (dropdown one) which allows us to select navbar.
HTML
<div class="row nav-menu">
<a href="/">
<div class="col-md-2 col-sm-3 columns">
<img class="logo logo-light logo-wide" alt="Logo" src="img/logo_t.png">
<img class="logo logo-dark logo-wide" alt="Logo" src="img/logo_t.png">
</div>
</a>
<div class="nav-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="icon-bar">About</span>
<span class="icon-bar">Technology</span>
<span class="icon-bar has-dropdown">API</span>
<span class="icon-bar">News</span>
<span class="icon-bar">Jobs</span>
<span class="icon-bar">Contacts</span>
</button>
</div>
<div class="col-md-10 col-sm-9 columns ">
<ul class="menu navigationbar">
<li>About</li>
<li>Technology</li>
<li class="has-dropdown">
API <span class="glyphicon glyphicon-chevron-down"></span>
<ul class="subnav">
<li>Plans</li>
<li>Documentation</li>
<li>Login</li>
</ul>
</li>
<li>News</li>
<li>Jobs</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="mobile-toggle">
</div>
</div>
</nav>
</div> <!-- navbar end -->
Please help, thanks.

Categories