How to create a drop down list using bootstrap to include it in the form?
There has to be 3 fields but 1 of them has to be hidden depending of what a User selected in first field.
Example:
First field options: Book/Movie
2nd field options if book is selected (after selecting in first field this field should appear 1field should stay visible and 3rd field should stay invisible): Action/Horror/Drama
3rd field oprions if movie is selected: DVD/Cinema/VoD (now 1st field is visible, 2nd is not.
Code which i've tried.
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Books
</button>
<div class="dropdown-menu_1-always-visible">
<a class="dropdown-item" href="#">Books</a>
<a class="dropdown-item" href="#">Movies</a>
</div>
<div class="dropdown-menu-2-hidden-if-movies-selected-in-field-1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Horror</a>
<a class="dropdown-item" href="#">Drama</a>
</div>
<div class="dropdown-menu-3-hidden-if-books-selected-in-1">
<a class="dropdown-item" href="#">DVD</a>
<a class="dropdown-item" href="#">Cinema</a>
<a class="dropdown-item" href="#">Vod</a>
</div>
</div>
Thank you for all the help! I need to implement it with PHP/HTML and Bootstrap to Laravel :)
<a class="dropdown-item" onclick="showMySection()" href="#">Books</a>
<a class="dropdown-item" onclick="showMySection1()" href="#">Movies</a>
<script type="text/javascript">
function showMySection(){
document.getElementsByClassName("dropdown-menu-2-hidden-if-movies-selected-in-field-1").style.display = 'block';
document.getElementsByClassName("dropdown-menu-3-hidden-if-books-selected-in-1").style.display = 'none';
}
function showMySection1(){
document.getElementsByClassName("dropdown-menu-2-hidden-if-movies-selected-in-field-1").style.display = 'none';
document.getElementsByClassName("dropdown-menu-3-hidden-if-books-selected-in-1").style.display = 'block';
}
</script>
Related
Specifically:
I have managed to apply the if/else statement into the drop-down no problem. However, when I go to use the drop-down on the website, the item created by the if/else statement in this case, log in or logout, is set to the left-hand side, whereas everything else above in the drop-down is centre aligned. I have tried applying style in the various ways I know, but I am new to PHP, so I don't know how to apply styling to this particular item.
Thank you in advance for any help!
Code below:
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="pots.php">POTS</a>
<a class="dropdown-item" href="pans.php">PANS</a>
<a class="dropdown-item" href="bowls.php">BOWLS</a>
<a class="dropdown-item" href="cups.php">CUPS</a>
<a class="dropdown-item" href="mugs">MUGS</a>
<?php
if (isset($_SESSION['userId'])) {
echo 'LOGOUT';
} else {
echo 'LOGIN';
}
?>
</div>
Try this. The class missing should be the issue
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="pots.php">POTS</a>
<a class="dropdown-item" href="pans.php">PANS</a>
<a class="dropdown-item" href="bowls.php">BOWLS</a>
<a class="dropdown-item" href="cups.php">CUPS</a>
<a class="dropdown-item" href="mugs">MUGS</a>
<?php
if (isset($_SESSION['userId'])) {
echo '<a class="dropdown-item" href="includes/logout.inc.php">LOGOUT</a>';
} else {
echo '<a class="dropdown-item" href="login.php">LOGIN</a>';
}
?>
</div>
i am new to laravel. currently i am working on laravel 7. i made a navigation bar a seperate file which i extends on all the front end file. i just know that when i need a data from the database in front end
then i do like this
$cat = modelname::all();
return view('addproducts')->with('cat',$cat);
but that code works on that condition when i have to go to that front end blade file. but on navigation bar senario i dont need to go to the nav file i just go to another blade file and nav file is extended on it.
i just want to know how to access the data from the databse on navigation bar
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
#yield('content')
</body>
</html>
this is the code of my nav file where i want to get the data from the database and then want to show in a dropdown menu
#extends('layouts.nav');
#section('content')
//code for the front end of the page
#endsection
this is how i extend the nav file on another page
#Fahad Munir would something like this work in your case? Using 'include' instead of 'extends'?
#include('layouts.nav', ['cat' => $cat = App\modelname::all();])
If this does not work for your purposes, you may also consider using a View Composer.
See the Laravel documentation about View Composers here: https://laravel.com/docs/7.x/views#view-composers.
Utilizing a View Composer would allow you to add something like the following to the boot() method in your appServiceProvider or after creating a new service provider using artisan and adding to the boot() method after doing that like so:
view()->composer('layouts.nav', function($view) {
$view->with('cat', App\modelname::all());
});
Read more about that in the Laravel documentation here, if need be:
https://laravel.com/docs/7.x/providers#the-boot-method
If your on Laravel 7 then you really need to use the new component feature added to Laravel 7, to do that run php artisan make:component NavigationComponent, this will generate a NavigationComponent class and a navigation-component blade file.
navigation-component.blade.php
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
NavigationComponent.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class NavigationComponent extends Component
{
public $cat;
/**
* Create a new component instance.
*
* #return void
*/
public function __construct()
{
$this->cat = CatModel::all();
}
/**
* Get the view / contents that represent the component.
*
* #return \Illuminate\View\View|string
*/
public function render()
{
return view('components.navigation-component');
}
}
For more visit Laravel Component docs
I have a one-page site with 3 other sites href="other.html" you can see it in the navbar. In the dropdown from the navbar, you can see that there are "extern" sites.
When I'm on one of that "extern" site and I want to go back to "index.php#about" how can I make that. So the thing is, that when the user on the "extern" site clicks on about that it jump to index.php#about and not only to index.php
Thx
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" id="navspy">
<a class="navbar-brand" href="#page-top" data-scroll>AR PhotoArt</a>
<button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon1"><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link" href="#about" data-scroll>LebensArt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#studio" data-scroll>ArbeitsArt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio" data-scroll>LichtArt</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-scroll-ignore>
Mehr
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="other1.html">Anleitung</a>
<a class="dropdown-item" href="other2.html">Wettbewerb</a>
<a class="dropdown-item" href="other3.html">Kurs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#kontakt" data-scroll>Kontakt</a>
</div>
</li>
</ul>
</div>
</nav>
I assume you are talking about back, forward, and refresh functionality in the browser.
I have included one possible solution in jQuery (not sure if you are using jQuery tho)
Also, took the javascript solution from the SO answer below ....
https://stackoverflow.com/a/27046922/791600
UPDATE
So with the jQuery code that you said needs to be offset by 49, here is what you want to do with that:
$(window).on('hashchange', function ()
{
var top = $(window.location.hash).offset().top;
top += 49;
$(window).scrollTop(top);
});
jQuery
$(window).on('hashchange', function ()
{
var top = $(window.location.hash).offset().top;
$(window).scrollTop(top);
});
Javascript
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for(var i=0; i < links.length; i++) {
if(!links[i].hash) continue;
if(links[i].origin + links[i].pathname != self.location.href) continue;
(function(anchorPoint) {
links[i].addEventListener("click", function(e) {
anchorPoint.scrollIntoView(true);
e.preventDefault();
}, false);
})(document.getElementById(links[i].hash.replace(/#/, "")));
}
}, false);
Add slash /index.php in url before you filename.
<a class="nav-link" href="/index.php#about" data-scroll>LebensArt</a>
And this link edit like this
<a class="dropdown-item" href="/other1.html">Anleitung</a>
<a class="dropdown-item" href="/other2.html">Wettbewerb</a>
<a class="dropdown-item" href="/other3.html">Kurs</a>
i have following :
<button id="not" class="notification btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<i class="fa fa-bell"></i>
<span class="badge badge-success" style="background-color:#f3b760">
10 </span>
</button>
<div id="show"></div>
I want div id "show" to load job-notification.php on clicking the button above, so i got this:
<script>
$(document).ready(function(){
$("#not").click(function(){
$("#show").load("job-notification.php");
});
});
</script>
FYI, Button is a DROPDOWN & job-notification.php contains results like this:
<ul class="dropdown-menu dropdown-menu-right">
<li>
EXAMPLE 1
</li>
<li>
EXAMPLE 2
</li>
</ul>
Why is this not working?
You can also try this one: $(document).on("click","#not",function() {});
For loading css, you can use this: $('head').append('');
Add the following in append function in less than and greater than brackets :
link rel="stylesheet" href="cssname.css" type="text/css"
I currently have multiple drop down buttons for several table rows that need to be tied to an onClick event. The problem I'm having is capturing the information from each button. Here is what my test code looks like:
<table class="table table-bordered">
<tbody>
<tr>
<td><img src="/photos/files/5/m/131309a4fb918110ed1061e90a715eca.jpeg"/></td><td><div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Edit</li>
<li><i class="icon-trash"></i> Delete</li>
</ul>
</div>
</tr>
<tr>
<td><img src="/photos/files/5/m/b19102d8ba1158e2a139ffa84e8e8540.jpeg"/></td><td><div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Edit</li>
<li><i class="icon-trash"></i> Delete</li>
</ul>
</div></tr>
</tbody>
</table>
current javascript:
$('.btn').click(function(e) {
e.preventDefault();
???
});
How do I capture and process each click event from multiple buttons? I'm assuming I need to add a unique ID to each button but how can I capture an onclick event for each button item?
inside the function you can use this to reffer to the object in cause.
$(".btn").click(function () {
//here you can check which button did it
if ($(this).attr('class')=='icon-pencil')
//do sth
else
//do sth else
});
Check the jquery docs.