I made a master page and added a button to it and some js code to the button, but when i clicked the button it reloads the page due to which the js file stop working.
The button code is :
<button id="database" onclick="myFunction()" style="background-color:transparent; color: #FFFFFF; border:none;"">
<img class="image" id="database_" src="images/database.png" style="width: 81px" /><br />
DataBase</button>
The Js code is :
function myFunction() {
$("#database_").removeClass("image");
}
image code is :
.image{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
so can anyone help to stop page refresh and js code running
You have to set the button type, like this:
<button type="button" id="database" onclick="myFunction()" style="background-color:transparent; color: #FFFFFF; border:none;"">
<img class="image" id="database_" src="images/database.png" style="width: 81px" /><br />
DataBase</button>
The default, is submit, that submits the form when you click.
Related
I want to turn buttons like the following to be clickable by the middle mouse button so it will be possible to open them in new tabs.
These buttons are on Aliexpress' orders page:
<button button_action="confirmOrderReceived" orderid="87428853391079" type="button" data-order-status="WAIT_BUYER_ACCEPT_GOODS" data-order-biztype="AE_COMMON" class="ui-button ui-button-normal button-confirmOrderReceived">
Confirm Goods Received
</button>
I tried to turn them into a but then they don't work.
These don't work either: Fiddle (note that the buttons on AE don't have a link).
Is there another way to inject a script that will turn all the buttons on a page to be tab clickable?
Try following code might help
Reference
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
var whichButton = function (e) {
// Handle different event models
var e = e || window.event;
var btnCode = e.button;
if (btnCode === 1) {
console.log('Middle button');
}
}
<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click With
Middle Button</button>
You can wrap your button in an anchor tag and add the target="_blank" to force the window to open in new tab.
<a href="link" target="_blank"><button button_action="confirmOrderReceived" orderid="87428853391079" type="button" data-order-status="WAIT_BUYER_ACCEPT_GOODS" data-order-biztype="AE_COMMON" class="ui-button ui-button-normal button-confirmOrderReceived">
Confirm Goods Received
</button></a>
You can simply write mousedown event instead of onclick like this
check updated fiddle : https://jsfiddle.net/1gd8m9y4/3/
<form action="http://google.com">
<input type="submit" value="Go to Google" href="google.com" onmousedown="window.open('http://www.gooogle.com/')" />
</form>
<input type="button" onmousedown="window.open('http://www.gooogle.com/')" value="Go to Google" />
Simple solution for detection of mouse middle click event
$('.test').mousedown(function(event) {
if(event.which == "2")
alert("middle click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://google.com">
<input type="submit" value="Go to Google" href="google.com" />
</form>
<input type="button" class="test" value="Go to Google" />
If you are using anchor tag use attribute target="_blank" to open a new tab and use href to add the link
I suppose that code snippet should solve your problem
.btn {
background-color: grey;
padding: 5px;
margin: 5px;
height: 15px;
width: 90px;
}
.btn-link {
text-decoration: none;
font-weight: normal;
display: inline-block;
color: #000000;
}
<a class="btn btn-link" rel="details" href="http://google.com" target="_blank">Go to Google</a>
I have an HTML page with two buttons: a light theme button and a dark theme button. When I click the light theme button the background will turn light gray and text is black, when I click the dark theme button the background will turn black and text is white.
When I reopen my page the last theme selected should be generated.
so here is my html:
<html>
<head>
<script type="text/javascript" src="js/index.js"></script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<div class="MyPage">
<body>
<h1>choose a theme:</h1>
<input id="b1" type="button" value="light theme">
<input id="b2" type="button" value="darck theme">
<p>this a sample for using API local storage in HTML5 </p>
</body>
</div>
</html>
css:
.MyLightPage
{
background-color: gray;
text-decoration-color: black;
}
.MyDarkPage
{
background-color: black;
color: white;
}
My problem is how to connect the 3 diverse types of my project (HTML, CSS and JavaScript) and what functions should be existing in my JavaScript file to make this happen.
This can be easily done using JavaScript.
The buttons call different functions where the background and text color is being set.
#MyPage {
background-color: black;
color: white;
}
<div id="MyPage">
<h1>choose a theme:</h1>
<input id="b1" onclick="lightTheme()" type="button" value="light theme">
<input id="b2" onclick="darkTheme()" type="button" value="dark theme">
<p>this a sample for using API local storage in HTML5 </p>
<script>
function darkTheme() {
document.getElementById('MyPage').style.backgroundColor = "black";
document.getElementById('MyPage').style.color = "white";
}
function lightTheme() {
document.getElementById('MyPage').style.backgroundColor = "white";
document.getElementById('MyPage').style.color = "black";
}
</script>
</div>
This snippet shows how to set the relevant CSS classes upon the click of a button. Saving the selecting theme can be added to the JS part easily - please refer to the very simple Localstorage API for details.
$('#b1').click(function() {
$('body').attr("class","MyLightPage");
});
$('#b2').click(function() {
$('body').attr("class","MyDarkPage");
});
.MyLightPage
{
background-color: gray;
text-decoration-color: black;
}
.MyDarkPage
{
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="MyPage">
<h1>choose a theme:</h1>
<input id="b1" type="button" value="light theme">
<input id="b2" type="button" value="dark theme">
<p>this a sample for using API local storage in HTML5 </p>
</div>
</body>
As a side note, please also have a look at how a basic HTML document is structured. The body tag should not be the child of any divs, it has to be the direct child of the html tag.
If you want to maintain the state of the last color that is clicked you need to hold some data on the server. The DOM will refresh every time you do a hard page reload. Database data, however, maintains the data that you can fetch on every page load. You can update this database data when one of the buttons is clicked. You have different ways to implement this. An example could be:
.theme-styling{
<?php echo getDarkOrLightThemeCode(); ?>
}
Then in the DOM, you can assign theme styling to specific elements that have a light and dark element styling:
<button class="btn btn-large theme-styling">Hello</button>
<button class="btn btn-large theme-styling">Goodbye</button>
You can add an id to specific elements if you want additional styling apart from your dark and light theme styles.
And then specifically, when the user clicks a dark theme button or light theme button, you should create an AJAX request to update the variable property on the server.
try this:
var element = document.querySelector('body'),
button = document.querySelector('#myButton');
button.addEventListener('click',function(){
if(element.className == 'MyLightPage'){
element.className = 'MyDarkPage';
}else{
element.className = 'MyLightPage';
}
});
My issue is that I am using custom images for my radio buttons, so I have them set to display:none; but doing this means they are no longer being called out as required.
Is there a simple solution for this? The radio buttons MUST be images.
-Thanks
<label for="topsides">Top Sides</label>
<form action="" id="TopSideYearCubics_id">
<input class="radio" id="topsidescubicsides" type="radio" name="properties[Top Sides]" value="Cubic Sides" required="required">
<a id="topsidescubicsides_button" href="javascript:set_radio('topsidescubicsides');" class="radio-picture-150x150" style="background: url(http://www.xxxx.com/_Store/_images2015/customring_buttons/button_CA01test_topsides_cubics.gif) no-repeat scroll 0 0;"> </a>
<input class="radio" id="topsidesyearsides" type="radio" name="properties[Top Sides]" value="Year Sides">
<a id="topsidesyearsides_button" href="javascript:set_radio('topsidesyearsides');" class="radio-picture-150x150" style="background: url(http://www.xxxx.com/_Store/_images2015/customring_buttons/button_CA01test_topsides_years.gif) no-repeat scroll 0 0;"> </a>
</form>
<br />
<script>
<!-- //## Sets the Image to the Radio Button ##//-->
function set_radio($inputid) {
$("input#" + $inputid).click();
}
$(document).ready(function() {
$("a.radio-picture-150x150").click(function(){
var $id = $(this).attr('id');
$("a.radio-picture-150x150").removeClass('selected-border');
$("a#" + $id).addClass('selected-border');
});
});
</script>
<style>
input[type=radio], input[type=checkbox] {
display:none;
}
</style>
In my CSS, I just gave the input[type="radio"] a style of opacity:0; to get rid of the stock button, but still show the browser's "Please select one of these options" validation tool-tip when one of my custom radio images wasn't chosen.
I built a checkout page and there's a form to get user data.
The form goes like this:
<form method="post" action="purchase" name="checkout"></form
When user clicks on "confirm order", they are being directed to the confirmation.jsp as supposed.
Inside of that form I added buttons to be used as toggling effect to hide and show a given section of the form.
The problem:
When I click on > + < the given section shows and when I click on > - < the given section hides but then the confirmation.jsp page loads up as if the buttons acted as link to that page, just like the "confirmation order button". I tried to add normal buttons, same event happens. Every button put on that form seems to automatically be formatted to act as a "confirm order button", no matter what I try.
The buttons go like this:
<button id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button>
And the scripts in the header:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
Thanks for your help!
try this:
<input type="button" id="show" class="toggle_button" onclick="doAction('show')" value="+" />
<input type="button" id="hide" class="toggle_button" onclick="doAction('hide')" value="-" />
<script>
$("#show").click(function( event ) {
event.preventDefault();
});
$("#hide").click(function( event ) {
event.preventDefault();
});
function doAction(action) {
if(action=="hide") {
$("p").hide();
} else {
$("p").show();
}
}
</script>
The default type for a button in a form is type="submit".
Try to add 'type="button"' on each of them.
<button type="button" id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button type="button" id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button>
hope this helps.
Try this CSS:
.btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family: Arial;
color: #000;
font-size: 60px;
background: #ffffff;
padding: 0px 0px 0px 0px;
text-decoration: none;
}
And the HTML:
<button id="show" class="toggle_button btn" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button btn" value=$("#hide").click action=$("#hide").click>-</button>
The issue is that when you put a button in a form it's default type is submit unless you explicitly set it to button.
You are therefore submitting the form unintentionally
Change to
<button type="button"></button>
Alternatively in javascript you can also use event.preventDefault() within click handlers
I have 2 jQuery mobile buttons inside a fieldset and would like to change the font-size of one of the buttons. I have tried adding an inline style but that did not work.
I have also tried this but that did not work as-well:
.myButton
{
word-wrap: break-word !important;
white-space: normal !important;
}
This is what is happening: (only on the iPhone)
Because the screen size of the iPhone, the "Request Change" button is being cut-off.
Is there a way for me to change the font-size of the button text so that it shows the complete text without getting cut-off?
HTML:
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input data-mini="true" type="submit" value="Cancel" name="Submitbutton" class="button button-link"/>
</div>
<div class="ui-block-b">
<input data-mini="true" data-theme="b" type="submit" value="Request Change" name="Submitbutton" class="button button-link" />
</div>
</fieldset>
I have tried:
jquery mobile button text auto line break
Change font size of a jQuery Mobile button at runtime
Play with the following to find what's best on the iPhone screen
.ui-btn-inner{
text-overflow: initial; /* Get rid of the ellipsis */
padding-left: 5px; /* Play with padding to make max use of available button width */
}
.ui-btn-text {
font-size: 15px; /* Play with font size of the text */
}
Live Example:
http://jsfiddle.net/Pjvvx/ (Width)
http://jsfiddle.net/3DSGT/ (Height)
JS:
// For all buttons use something like this
$('.ui-btn').css('width','50%');
// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');
// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');
// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');
// This changes the height for a single element
$('#hrefButton3').children().children().css('font-size','30px');
I think you're looking to do something like this:
$('#hrefButton3').children().children().css('font-size','10px');
HTML:
<div data-role="page" id="home">
<div data-role="content">
<input type="button" id="theButton1" value="Press Me 1" />
<input type="button" id="theButton2" value="Press Me 2" />
<input type="button" id="theButton3" value="Press Me 3" />
<input type="button" id="theButton4" value="Press Me 4" />
<br />
HREF Me 1
HREF Me 2
HREF Me 3
HREF Me 4
</div>
</div>
Related:
resizing a BUTTON through CSS