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.
Related
<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.
On my page are repeating triggers, which should open (change the visibility) a specific form on click. On some pages, there are multiple triggers and forms.
The HTML markup is like this:
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form
</div>
</div>
I'm trying to work on a script, where on click on #form-trigger-x the resonating form (#form-x) get's displayed. That's not the problem, but I want to automate this, so if a page has one form it works and also if it has 10 forms it works, without the need to hardcode every number in the script.
I tried an approach with .each and $(this) but it opened all forms at once instead of the form that should be triggered.
First you need to add click event on all the a tag where id starts with form-trigger with
$("a[id^='form-trigger']").click(function(){
And then you just need to get the next of clicked a tag and play with its display property or whatever you want like
$(this).next()
$("a[id^='form-trigger']").click(function(){
$(this).next().slideToggle();
})
$(".btn").click(function(){
$(this).closest("div").slideToggle();
})
#form-2{
display:none;
}
#form-1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form 1
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form 2
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>
</div>
</div>
Here is how I approached this. You don't need to target them with specific ID value, Instead, use classes because the basic structure of each container is same it would work no matter how many different forms you got.
When you click on the anchor tag, my script would look for closest form-container class and find the showform class in that dom element and show it.
I have added the code snippet below as an example.
Hope this helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="form-container-1" class="form-container">
<a onclick="showform(this);" id="form-trigger-1">Open Form</a>
<div id="form-1" class="showform hide">
content of form
</div>
</div>
<div id="form-container-2" class="form-container">
<a onclick="showform(this);" id="form-trigger-3">Open Form</a>
<div id="form-2" class="showform hide">
content of form
</div>
</div>
<script>
function showform(caller){
$(caller).closest(".form-container").find(".showform").removeClass('hide');
}
</script>
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
});
I have added a custom HTML tag which is being triggered by a dataLayer variable. Everything is showing up on the page but for some reason my entire custom html tag code is wrapped in a div that hides everything:
<div style="display: none; visibility: hidden;">
<div id="newsletter" class="animated animatedvisible rubberBand">
<h3>Dynamic Drive Newsletter</h3>
<p>Sign up for our FREE newsletter to get early access to new scripts!</p>
<form action="" method="post">
<input type="email" value="" name="EMAIL">
<input type="submit" value="Subscribe">
</form>
<span class="scrollboxclose" onclick="scrollbox1.hide()">x</span>
</div>
<div id="specialoffer" class="animated">
<b>DDWhois</b> Free Domain Whois and Research Tool. Always free, always anonymous. <button onclick="location='http://ddwhois.com'">Visit</button>
<span class="scrollboxclose" onclick="scrollbox2.hide()">x</span>
</div>
<script>var scrollbox1=new scrollBox({elementid:"newsletter",dir:"down"}),scrollbox2=new scrollBox({elementid:"specialoffer",dir:"up",fxclass:"slideInDown",pctboundary:50});</script></div>
<div style="display: none; visibility: hidden;"> is not part of the code I added to my tag.
There is a JS script that makes the custom html code work but I didn't see anything in it that would insert the extra div
I fixed this by turning off the option: "Support document.write" on the Custom HTML tag configuration.
I am implementing sliding panel element but problem is when i slide out other div element is floating down.
I guess and tried to give z-index to element which i am sliding but it doesn't seems to work.
Let me put code for both div.
<div class="vrcontrol">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
This is div which i am sliding in and out and beneath is code of effective div.
<div class="askform">
<p class="titletext">Ask an Expert Trade Forum</p>
<p class="detailtext">WD-40’s leading source for DIY tips and tricks.</p>
<span>
<form id="askform" name="askform" action="" method="post">
<span class="left"><input name="input" type="text" class="askinputbox"/></span><span class="marginleft"><input type="image" src="images/search_icon.gif" /></span>
</form>
</span>
<div class="followus">
<span class="followtext">Follow us on</span><span class="right"><img src="images/bookmark.jpg" width="121" height="45" alt="Bookmark" /></span>
</div>
</div>
Sliding div is in left portion of the page and effective div is in right portion of the page.
I guess something with z-index, positioning element and overflow properties will do something.
For starters, this block of HTML is malformed:
<div class="vrcontrol">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
Where' the closing </div> for this div?
<div class="slide-out-div">
Also, without the accompanying CSS, it's hard to determine whether that is the problem as well.