I have been working on Chrome extension and am having problems. What I'm trying to do: when you click on the icon to the right of the search bar, a search bar comes up which you type your query in and hit enter. It will then go to http://dev.bukkit.org/search/?search=(whatever was entered). This is what I have but it is not working.
<scriptLANGUAGE="JavaScript">
function whatURL() {
window.location= 'http://dev.bukkit.org/search/?search=' + document.form1.url.value;
}
</SCRIPT>
<FORM name=form1>
<inputtype="text"id="url">
<inputtype="button"id="btnSearch"value="Search"onClick="return whatURL()"/>
</FORM>
Thank you:) Note: I have the manifest and everything, its just the javascript part thats not working.
EDIT: Rewrote it now it works!!!
<html>
<head>
<script>
function onLoad() {
document.getElementById("mytextfield").focus();
}
function onKeyPress(e) {
if (e.keyCode == 13) {
openResults();
}
}
function openHomePage() {
window.open("http://dev.bukkit.org/");
}
function openResults() {
window.open("http://dev.bukkit.org/search/?search=" + encodeURIComponent(document.getElementById("mytextfield").value));
}
</script>
</head>
<body onload="onLoad();">
<img src="png-3.png" onclick="openHomePage();" style="border-width: 0px; cursor: pointer" /><br>
<div name="myFormDiv" style="center: 6px;">
<br>
<input type="search" id="mytextfield" name="mytextfield" value="Search..." onkeypress="onKeyPress(event);" />
</div>
</div>
</body>
</html>
Try changing...
<inputtype="button"id="btnSearch"value="Search"onClick="return whatURL()"/>
to..
<inputtype="button"id="btnSearch"value="Search"onClick="whatURL()"/>
window.location doesn't need to be returned to anything. You're already making the window point to your given url when you execute window.location = "http://myurl.com"
Related
The title pretty much says it all: I need help in making a button that will only appear 5 seconds after the page loads.
this is the code i'm working with:
<html>
<body onload="setTimeout(showStuff, 5000)">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class=login align=center>
<font size=13 face=helvetica> You're doing that too much. </font><br> <br> <br>
<font size=5 face=helvetica>
You have entered the wrong username/password too many times <br>
<br><br>
<br><br>
Click "OK" to go back to the log-in page <br> <br>
<p id="Button"><input type=submit onclick="myFunction()" id="Button" value="OK"> </p>
<script>
document.getElementById("Button").style.visibility = "hidden";
function showStuff(Button){
document.getElementById("Button").style.display = "inline";}
function myFunction() {
window.location = "project.html"}
</script>
</div> </font>
</body>
</html>
This is probably what you need
<body>
<button id="some-button">button</button>
<script>
document.getElementById("some-button").style.display = "none";
function showStuff() {
document.getElementById("some-button").style.display = "inline";
}
function myFunction() {
window.location = "project.html"
}
setTimeout(showStuff, 5000);
</script>
</body>
</html>
Things you should know
* The html element <font> is deprecated
* Is bad practice to mix Javascript code inline with html.
* Do not duplicate html elements ids, they should be unique (Thanks Calvin Nunes)
How to fix your code
* Close the second <font> element correctly and delete the unnecesary id of the button.
* If you use display = 'inline', then to hide the element use display = 'none'
The working code
<html>
<body onload="setTimeout(showStuff, 5000)">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class=login align=center>
<font size=13 face=helvetica> You're doing that too much. </font><br> <br> <br>
<font size=5 face=helvetica>
You have entered the wrong username/password too many times <br>
<br><br>
<br><br>
Click "OK" to go back to the log-in page <br> <br>
</font>
<p id="Button">
<input type=submit onclick="myFunction()" value="OK"> </p>
<script>
document.getElementById("Button").style.display= "none";
function showStuff(){
document.getElementById("Button").style.display = "inline";
}
function myFunction() {
window.location = "project.html"
}
</script>
</body>
</html>
<script>
function showStuff(){ // no argument needed
document.getElementById("Button").style.display = "inline";
}
</script>
<body onload="javascript:setTimeout(function(){ showStuff(); }, 5000)">
function definition should be before function call
in function showstuff no argument is needed. a use function() inside settimeout to execute correctly . if not it will just execute without delay .
Well using jquery you can have the button within the div, something like
<div id="div_id">Button here</div> and set time out to display it
setTimeout(function(){
$('#div_id').show();// or fade, css display however you'd like.
}, 5000);`
or with Javascript:
function showItbutton() {
document.getElementById("div_id").style.visibility = "visible";
}
setTimeout("showItbutton()", 5000); // after 5 secs
First, use DOMContentLoaded event and then write the code within that handler to handle this logic:
<script>
window.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
// Assuming button has id 'myButton'.
document.querySelector('#myButton').style.display = 'none';
}, 5000);
});
</script>
Remember DOMContentLoaded is the key to detect page load. You can use onload depending on your situation. Refer this to understand the difference between the two.
setTimeout() receives milliseconds, not seconds.
So 5000 it will work for you.
JS:
setTimeout(showStuff, 5000);
console.debug('Start page');
function showStuff(Button){
console.debug('Display');
document.getElementById("Button").style.display = "inline";
}
HTML:
<button id="Button" style="display:none">Button</button>
this is actually a follow up question to this question
that was solved thanks to Rory McCrossan.
I now have this functioning script; a search function that shows a div depending on a searchword.
JS
$('#search').click(function() {
var txt = $('#search-criteria').val();
if (txt)
$('.fruit').hide().filter('#' + txt.toLowerCase()).show();
});
CSS
.fruit {
display: none;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="fruit" id="apple">
<h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
<h3>Some text about oranges</h3>
</div>
What I now wonder is if someone could help me with some kind of error handling to add to this script, preferably that can be smoothly added without rewriting the logic of the script. I.e. I'd like to display another div with a message when the search comes up with no result and/or when the user makes an empty string search.
Since I'm actually an UX designer my technical skills are somewhat limited and I'm therefore very grateful if someone could help me with this...
Thanks in advance!
simple javascipt error handing using try and catch:--
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function adddlert2($a){
alert($a);
}
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
You can use try and catch in this case, but If you want to be informed about all irregularities in your application I prefer to use dedicated services for this job.
I use Sentry.io, this is nice service to handle exceptions and errors in backend and frontend. Is simple to use, you only need to add one additional JS script without modifying existing code. More about installation process here
I guess what you're looking for is this :) I know changing to .keyup() had nothing to do with your question, so change it back if you like
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div id="default" class="fruit">
no fruit found
</div>
<div class="fruit" id="apple">
<h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
<h3>Some text about oranges</h3>
</div>
and
<script>
$(document).ready(function(){
$('#search-criteria').keyup(function() {
var txt = $('#search-criteria').val();
if (txt){
var elements = $('.fruit').hide().filter('#' + txt.toLowerCase());
if(elements.length > 0){
elements.show();
}
else{
$("#default").html("No result found for "+txt);
$("#default").show();
setTimeout(function(){
$("#default").hide();
}, 1000);
}
}
});
});
</script>
Another error handing(javascript example) using javascript SEARCH function:--
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
try {
var str_wrong = "Visit";
var n = str.search("Visit");
document.getElementById("demo").innerHTML = n;
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
I want to configure a hyperlink to close/open its related div in asp.net. Basically, when a user clicks the sign X, the panel should be closed and the sign + should be appeared. When + is clicked, the panel should be showed again. I could not manage this and I believe my main problem is "document.getElementById('<%= lb_closePanel.ClientID %>').value" is coming as undefined. Here is the code until now. I appreciate for your helps!
<!DOCTYPE html>
....
<div class="appheader">
<h1 class="appheaderContent">Search for Client</h1>
<div id="checkBox"></div>
<div id="closePanel"><h2 id="lblClosePanel">Close Panel</h2>
<div id="xButton">
<asp:LinkButton onclientclick="CloseOpenPanel('Search')" runat="server" Text="X" style="text-decoration:none; color:white" ID="lb_closePanel"></asp:LinkButton>
</div>
</div>
</div>
<div class="app" id="Search">
...
<div>
...
</html>
<script type="text/javascript">
function CloseOpenPanel(obj) {
alert(document.getElementById('<%= lb_closePanel.ClientID %>').value); //here it comes undefined!!!!
if (document.getElementById('<%= lb_closePanel.ClientID %>').value == 'X') {
document.getElementById(obj).Visible = false;
lb_closePanel.Text = '+';
}
else {
document.getElementById(obj).Visible = true;
lb_closePanel.Text = 'X';
}
}
</script>
Your code is OK, just instead of the property value use innerHTML
alert(document.getElementById('<%= lb_closePanel.ClientID %>').innerHTML);
Instead of using .value, try using .innerHTML instead to get the text inside of your link button (rendered as an a tag)
I am fairly new to this and I need help making the link "login" to be replaced with logged in after clicking submit with javascript/jquery.
Here is what I have on my index page. Currently I have a pop up login page and I need to stop the function after clicking the word submit and then replace login with logged in.
This is a simple demo site and only needs simple code. Thank you!
<Head>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
<div id= "toggle" class='popbox'>
<a div id=login class='open' href='#'>Login</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form name="myform" action="#" method="post" id="subForm">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'193731474136796', cookie:true,
status:true, xfbml:true
});
</script>
<img src="facebookbutton.png">
<script>
//your fb login function
function fblogin() {
FB.login(function(response) {
//...
}, {scope:'read_stream,publish_stream,offline_access'});
}
</script>
<div class="line-separator"></div>
<div class="input">
<input type="username" name="cm-name" id="name" placeholder="Username" />
</div>
<div class="input">
<input type="password" name="cm-password" id="password" placeholder="Password" />
</div>
<input type="submit" value="login" id="submit" /> Forgot Username or Password?
</form>
And I have a linked javascript page for the popup.
(function(){
$.fn.popbox = function(options){
var settings = $.extend({
selector : this.selector,
open : '.open',
box : '.box',
arrow : '.arrow',
arrow_border : '.arrow-border',
close : '.close'
}, options);
var methods = {
open: function(event){
event.preventDefault();
var pop = $(this);
var box = $(this).parent().find(settings['box']);
box.find(settings['arrow']).css({'left': box.width()/2 - 10});
box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});
if(box.css('display') == 'block'){
methods.close();
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
}
},
close: function(){
$(settings['box']).fadeOut("fast");
}
};
$(document).bind('keyup', function(event){
if(event.keyCode == 27){
methods.close();
}
});
$(document).bind('click', function(event){
if(!$(event.target).closest(settings['selector']).length){
methods.close();
}
});
return this.each(function(){
$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
$(settings['open'], this).bind('click', methods.open);
$(settings['open'], this).parent().find(settings['close']).bind('click', function(event){
event.preventDefault();
methods.close();
});
});
}
}).call(this);
EDIT:
I figured out what was wrong. Thank you guys!
jsfiddle
This is a pretty simple solution. It replaces the login link with a span that contains the text you wanted.
http://jsfiddle.net/gVVcM/
jQuery:
$('button').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
HTML:
<a id='login' href='#'>Log In</a>
<button>Submit</button>
edit: now that you posted the submit id.
$('#submit').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
edit2: Prevent Default?.
$('#submit').on('click',function(e){
e.preventDefault();
$('#login').replaceWith('<span>Logged In</span>');
});
If you're using jQuery you can call the following once you've successfully logged in.
$('a#login.open').text('Logged In');
This is if you're trying to be super specific about the element you're searching for. If you are using chrome or anything other than IE you can try this out in the console debugger window to see that it works.
I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.
The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.
Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.
Here's the existing code that does everything properly (except hide the button after the click)...
<html>
<head>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;">
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button>
</span>
</div>
</body>
</html>
Change the button to :
<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>
FIDDLE
Or even better, use a proper event handler by identifying the button :
<button id="show_button">Check Availability</button>
and a script
<script type="text/javascript">
var button = document.getElementById('show_button')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('hidden-div').style.display = 'block';
this.style.display = 'none'
}
</script>
FIDDLE
This is my solution. I Hide and then confirm check
onclick="return ConfirmSubmit(this);" />
function ConfirmSubmit(sender)
{
sender.disabled = true;
var displayValue = sender.style.
sender.style.display = 'none'
if (confirm('Seguro que desea entregar los paquetes?')) {
sender.disabled = false
return true;
}
sender.disabled = false;
sender.style.display = displayValue;
return false;
}
Here is another solution using Jquery I find it a little easier and neater than inline JS sometimes.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
/* if you prefer to functionize and use onclick= rather then the .on bind
function hide_show(){
$(this).hide();
$("#hidden-div").show();
}
*/
$(function(){
$("#chkbtn").on('click',function() {
$(this).hide();
$("#hidden-div").show();
});
});
</script>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;"><button id="chkbtn">Check Availability</button></span>
</div>
</body>
</html>
CSS code:
.hide{
display:none;
}
.show{
display:block;
}
Html code:
<button onclick="block_none()">Check Availability</button>
Javascript Code:
function block_none(){
document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}
You can use this
Html
<button class="btn-plus" onclick="afficherTexte(<?php echo $u["id"]."2" ?>,event)">+</button>
Java script
function afficherTexte(id,event){
var x = document.getElementById(id);
x.style.display = "block";
event.target.style.display = "none";
}