<nav>
<div class="nav-wrapper green lighten-2">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
Hello, I have the above materialize html from the website that initializes the visual component of a searchbar, but as of now it is not very functional. How do I make is so that when I type and search, it redirects me to a specific HTML page?
Use the Angular or React or PHP to make it dynamic,
Using only a HTML you canot make it dynamic.
Related
I set daisyUI but not figure out how to control modal by condition
I think similar with flowbite or bootstrap
https://flowbite.com/docs/components/modal/
but daisyUI not implement hidden class yet, and there have
modal-open method in libary
https://daisyui.com/components/modal/
<link href="https://cdn.jsdelivr.net/npm/daisyui#2.13.6/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- The button to open modal -->
<label for="my-modal-4" class="btn modal-button">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-4" class="modal-toggle">
<label for="my-modal-4" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<h3 class="text-lg font-bold">Congratulations random Interner user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
</label>
</label>
so how can we config the modal view present visible?
thanks a lot
Another way of doing this would be by manipulating the input checkbox element inserted before the modal div.
If you console log this element's value you'll notice that it's set to "true" when the model is open and "false" when it's closed.
If you want the modal to be open by default you can use:
document.getElementById('my-modal-4').checked = true;
when the page/component is rendered
I know that this is kinda old question but might help someone in the future,
<input
checked={true}
type="checkbox"
id="add-new-phone-number"
className="modal-toggle"
/>
you can bind the checked attributes of the input to your state if your using react
Just follow modal-id dynamic add/remove attributes '.modal-open' class by javascript
will be done
<label for="my-modal-4" class="btn modal-button modal-open">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-4" class="modal-toggle">
<label for="my-modal-4" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<h3 class="text-lg font-bold">Congratulations random Interner user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
</label>
</label>
https://codepen.io/chris-arin-pine/pen/BaZmboz
Edited to show login form:
https://codepen.io/boudra/pen/YXzLBN
<head>
<title>Login Form Using HTML And CSS Only</title>
</head>
<body class="login">
<div class="container" id="container">
<div class="form-container log-in-container">
<form action="#">
<h1>Login</h1>
<div class="social-container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fab fa fa-twitter fa-2x"></i>
</div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Log In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-right">
<h1>HTML CSS Login Form</h1>
<p>This login form is created using pure HTML and CSS. For social icons, FontAwesome is used.</p>
</div>
</div>
</div>
</div>
Check the codepen. I have been trying to get the Login Form to cooperate with the existing CSS and they all clash.
SOLVED:
Maybe it isn't the best answer but it is working perfectly.
I created the witch page with its own IDs and then IFRAMED the login form ontop of it. Unless I get some other solutions, it's kind of what we're going with.
EDIT: I used the iframe command in HTML to call a separate page, the one containing the LOGIN modal, and positioned it on top of the WITCH Landing Page so that the CSS did not clash. It seemed no matter what else I did the CSS would clash. Whether I wasn't closing } CSS calls correctly or # using selectors or ID correctly I don't know. I am learning. Might seem basic to some but for now I will iframe.
I'm looking to create a search function in CodeIgniter.
My view file has been splitted in two parts:
Header part, that contains the search bar
<?php echo form_open('controller/live_search');?>
<div class="toolbar-icon-bg hidden-xs" id="toolbar-search">
<div class="input-group">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-search"></i></button></span>
<input type="text" name="search" id="search" class="form-control" placeholder="Search...">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-close"></i></button></span>
</div>
</div>
<?php echo form_close();?>
Body part, that contains the result of the search.
<div class="static-content-wrapper">
<div class="static-content">
<div class="page-content">
<ol class="breadcrumb">
<li class="">Home</li>
<li class="active">Search</li>
</ol>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white">
<div class="panel-heading">
<h2><!-- Panel --></h2>
</div>
<div class="panel-body">
<div style="clear:both;"></div>
<div id="update"><!-- search results will be added here --></div>
</div>
<div class="panel-footer">
<span class="text-gray"><em>Footer</em></span>
</div>
</div>
</div>
</div>
</div> <!-- .container-fluid -->
</div> <!-- #page-content -->
</div>
In my controller I've written the following code:
public function live_search()
{
//load page template
$this->load->view('templates/header');
$this->load->view('templates/sidebar');
$this->load->view('templates/live_search');
$this->load->view('templates/footer');
}
I would like to "activate" the "live_search" public function simply selecting the search field. Just to give you an example, you can think to the search function of Netflix. When you select the search bar, a black page is loaded automatically and start typing you see the results of your search.
So, when I select the search text field my script should load the "templates/live_search" page.
How could I do this?
Thanks for your kind support.
DOM manipulation like this isn't done in CodeIgniter on the server, its done client site in JS. You need JS to listen for the search input focus, and then either AJAX in your "live search page" (not exactly clear on what you want there), or load everything on initial page load, and then just show the "live search page" on focus of the search bar.
If you're using jQuery it might look something like this:
$('body').on("focus","#search",function(){
$('.live-search-container').show()
//or do an ajax call
});
The hierarchy of the page is as follows:
<div ng-include="'partials/navbar.html'"></div>
<div ng-view></div>
<div ng-include="'partials/footer.html'" id="footer"></div>
This is the main index.html which also contains all scripts sources.
In ng-view there's another index which uses header partial:
div ng-include="'partials/header_search.html'"></div>
This header_seatch partial contains angular based input-form
<form name="searchLocation" ng-submit="search()">
<div class="input-group">
<input type="text" name="location" ng-model="location" ng-autocomplete ng-change="error = false"/>
<div class="input-group-addon">
<button type="submit">Search</button>
</div>
</div>
<span ng-if="error">No such address</span>
</form>
And here comes the issue I have - the following form does not respond when placed inside the header partial. When I copy/paste it inside the index view everything works perfectly fine. Does angular have any confusion with ng-stuff placed in partials? What should I modify to make it work inside the header partial?
Thanks in advance!
ng-include has it's own scope, which is terribly confusing. I'd recommend replacing the ng-include's with directives.
Otherwise this should work:
<form name="searchLocation" ng-submit="$parent.search()">
<div class="input-group">
<input type="text" name="location" ng-model="$parent.location" ng-autocomplete ng-change="error = false"/>
<div class="input-group-addon">
<button type="submit">Search</button>
</div>
</div>
<span ng-if="$parent.error">No such address</span>
</form>
Please note using $parent is bad practice and should be avoided.
So I have two radio buttons here, and I'm trying to link them up. Due to the fact that they are in two different forms, they don't seem to work as I expected. The forms are required in Bootstrap in order to display the correct style I desire. Here's a snippet of my code:
<ul class="list-group">
<li class="list-group-item list-heading">Notification Display Options</li>
<li class="list-group-item">
<form class="form-inline" role="form">
<div class="radio">
<label>
<input type="radio" id="noti_display_time" name="noti_display"> <span trans="shownotificationfor">Shows for</span>
<div class="form-group">
<input id="show_noti_time" type="number" class="form-control" max="60" min="1" data-requires="noti_display_time">
</div> <span trans="seconds">seconds</span>
</label>
</div>
</form>
</li>
<li class="list-group-item">
<form class="form-inline" role="form">
<div class="radio">
<label>
<input type="radio" name="noti_display">Close manually
</label>
</div>
</form>
</li>
</ul>
http://jsfiddle.net/DerekL/4YfB9/show (Do not view it inside the jsFiddle preview window since the style changes as the window size changes)
Is there a solution to this without messing up the style? Thanks.
JavaScript will be my last resort, if there is no workaround.
Just wrap one form around the <ul>. Using 2 forms just to manage style doesn't make much sense.
<form>
<ul/>
</form>
DEMO