Bring to Front - Search Bar HTML - javascript

I know that this probably has something to do with the z-index but I can't seem to figure it out.
The code snippet is:
<form method="get" action="http://www.google.com/search">
<div>
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="15" maxlength="255" value="" />
<input type="submit" value="GO" /></td></tr> <tr><td align="right" style="font-size:75%">
<input type="checkbox" name="sitesearch" value="<website_address>" checked /> SEARCH <br />
</td>
</tr>
</table>
</div>
</form>
I have tried creating a class, but it doesn't seem to affect it:
.search{
z-index:absolute;
}
<form method="get" action="http://www.google.com/search"> <div class="search">
I haven't found too much information in making a search bar bring to the front and have experimented quite a bit. I could try to put the others bring-to-back but I'm really curious if there is a way to do bring-to-front for the search bar.

Z-index works with integers try setting it to different values to see the results

Related

Vue.js closes form tag in a for loop

I use Vue.js to create a table in which every row is form with a submit button, this is the code I use:
<div id="admin-user">
<table class="table">
<tr v-for="(user, index) in users">
<form action="/ajax/submit/admin/user.php">
<td class="spacer"><input type="text" class="form-control" :value="user.id" readonly></td>
<td class="spacer"><input type="text" class="form-control" name="fullname" :value="user.fullname"></td>
<td class="spacer"><input type="text" class="form-control" name="username" :value="user.username"></td>
<td class="spacer"><input type="text" class="form-control" name="email" :value="user.email"></td>
<td class="spacer"><input type="text" class="form-control" name="phone" :value="user.phone"></td>
<td class="spacer"><input type="text" class="form-control" name="company" :value="user.company"></td>
<input type="hidden" name="id" :value="user.id">
<td class="spacer"><button type="submit" class="btn btn-success btn-block btn-lg right"><i class="fa fa-floppy-o" aria-hidden="true"></i></a></td>
</form>
</tr>
</table>
</div>
Of course I also have the Vue.js code in JavaScript but I don't think its necessary to solve this problem and it is quite long so I wont bother anyone with it.
The styling turns out fine but the form doesn't work, so I took a look with the inspector tool and this is what I found
And it turns out the </form> tag got closed prematurely. I don't understand why this happend which also means I don't know how to solve it. I hope someone could explain why this is happening to me.
The problem is not because of Vue.js or even Javascript, the problem is because of HTML itself. HTML does not allow the use of a form tag directly inside a table (row). Take a look at this question which has some working solutions.

Disable Autocomplete feature/Manage password dialogue

Is it possible to remove chrome/safari autocomplete feature , which asks to store password once you logged in to the application?
I have tried adding "autocomplete=off" in both form and input fields
<form id="formforlogin" autocomplete="off">
<input id="usernameforlogin" type="hidden" name="usrnm" autocomplete="off"/>
<input id="passwordforlogin" type="hidden" name="psswrd" autocomplete="off"/>
</form>
<table style="margin-left: auto;margin-right: auto;">
<tr>
<td>Username</td>
<td><input id="usernameforshow" type="text" placeholder="user" autocomplete="off" /></td>
</tr>
<tr>
<td>Password</td>
<td><input id="passwordforshow" type="password" placeholder="password" autocomplete="off'/></td>
</tr>
After adding the above snippet as well i am not able to get rid of autocomplete feature of chrome , which is asking to save password dialogue as soon as you login. My application is built using angular js and the routing is done using angular-ui-router.
It will be very much helpful if somebody helps to solve the above issue.

Div with multiple text color

Please I want to know how this works just like the stackoverflow. When codes are being displayed, the text display in multiple colors just like in a text editor app.
<form action="myForm.php" id="my_form" method="post">
<input type="text" name="user_name" id="user_name" />
<input type="email" name="email" id="email" />
<input type="password" id="password" name="password" />
<input type="submit" name="submit" id="submit" />
</form>
Please I want to know how its been done. Is it an application added to the site or just coding. If it's a bulky process please I will appreciate helpful clues on how it works but if it's a short process please I need a better explanation
Here, I just screenshot this question and you can see what I mean
It's done using javascript. I recommend this one https://highlightjs.org/ in "usage" page there is a quick start guide.
Good luck.
--- UPDATE
Here is a simple example how to use it:
Assuming you already added the dependencies files such as highlighjs.min.js and a code styling css file into your page, the code bellow should work perfectly.
The code block
<pre>
<code class="html">
<form action="myForm.php" id="my_form" method="post">
<input type="text" name="user_name" id="user_name" />
<input type="email" name="email" id="email" />
<input type="password" id="password" name="password" />
<input type="submit" name="submit" id="submit" />
</form>
</code>
</pre>
Javascript to escape and highlight blocks
$(document).ready(function () {
$("pre code").each(function () {
// Escape HTML code
$(this).html($("<p/>").text($(this).html()).html());
// Apply highlighting to the block
hljs.highlightBlock(this);
});
});
The result will be a pretty highlighted code!
JSFiddle: https://jsfiddle.net/evandroprogram/5sgrmsd4/
<div class="container">
<span style="background-color:red">this span is red</span>
<span style="background-color:green">this span is green</span>
<span style="background-color:blue">this span is blue</span>
</div>
You can later set height and width properties of the div, can also make it more attractive using gradient effects.

adding like button next to each list item ajax

I am trying to add a like button next to a list of 'destinations'. however, I'm having a really hard time figuring out how to place a button right next to each list item. any help???
Here is my dashboard.html.erb file:
<div class="destination-list">
<h1>Destinations</h1>
<table id="destTable">
<tr class="table-initial">
<td>Name:</td>
<td>Address:</td>
<span class="likebtn-wrapper" data-white_label="true" data-identifier="item_1" data-show_dislike_label="true" data-popup_disabled="true" data-share_enabled="false"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- <td>Delete:</td> -->
</tr>
</table>
<div class="big create">+</div>
</div>
<div class="submit">
<h1>Create Destination</h1>
<form method="get" action="index.html" class="form">
<input type="text" placeholder="Name" class="name-input" name="name" />
<input type="text" placeholder="Address" class="address-input" name="address" />
<input type="submit" class="submit-input my-button" id="create-button"></input>
</div>
Your source parameter in your javascript function call is missing the http: protocol part.
You should edit the tags in your question, though. Your code shows no Rails or Ruby, and your question is purely about Javascript.
On a side note, you should look up unobtrusive javascript :
Rails guides
RailsCasts episode
and probably jQuery as well.

How to make my eBay search bar specific to my store? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have recently re-designed the look of my company's eBay store, and have put a custom search bar in place. However, when my user's search for a product, it is not searching for products in my store in particular. Instead, it is doing a general eBay search.
I have included my full code in a JSFiddle for you helpful people to check out, and would really appreciate it if anyone can tell me how to make it so it searches only for products in my store in particular.
Thanks in advance:
JS FIDDLE: http://jsfiddle.net/DanCUK89/U6LqJ/
<form name="search" method="get"
action="http://search.stores.ebay.com/search/search.dll?GetResult&">
<input type="text" name="query" maxlength="300" >
<input type="hidden" name="fcd" value="2">
<input type="hidden" name="from" value="R10">
<input type="hidden" name="sasel" value="<Your store number>">
<input name="submit" type="submit" value="Search">
<br />
<input type="checkbox" name="srchdesc" value="y">search titles & descriptions
</form>
or try this
<form name="search" method="get" action="http://search.stores.ebay.com/search/search.dll">
Search Our Store:
<input type="text" name="query" size="7">
<input type="submit" value="Go" width="20" height="16" border="0">
<input type="hidden" name="MfcISAPICommand" value="GetResult">
<input type="hidden" name="sid" value="ENTER STORE ID HERE">
<input type="hidden" name="store" value="ENTER STORE NAME HERE">
<input type="hidden" name="colorid" value="15">
<input type="hidden" name="fp" value="0">
<input type="hidden" name="srchdesc" value="y">
</form>
use:
"/your _store/_i.html
on form acion like this:
<form action="/your_store/_i.html">
your_store is the liunk to your store like this:
stores.ebay.com/your_store

Categories

Resources