CSS Buttons not working in IE, but does in FF - css

I've been looking on the internet for solutions as to why IE7 isn't opening links correctly for example
<button class="class1">Google</button>
Does IE7 not like having ?
I hear I should use jquery for this? But no one linked to any article.

According to the W3C's specifications on anchor (<a>) tags and <button> tags, you should be able to do that fine, but according to a quick Google search, you can't and/or shouldn't do it, and it doesn't work in Internet Explorer.
This article actually recommends adding Javascript, so the link can be opened in IE also:
<button type="button" onclick="window.location('http://www.expertsguide.info/')">Click Me to go to Experts Guide</button>

Although you can, you shouldn't have a button (<button>) inside anchor (<a>).
Add an event handler to the button like this:
<input type="button" value="Google" onClick="javascript:location.href = 'http://google.com';" />
Note: you should considered not doing this, for a variety of reasons. Bottom line you can (and should) style your <a> element to look like a button.

You're better off not using a button inside a hyperlink.
Style the hyperlink to look like a button.
Try these
http://www.webresourcesdepot.com/css3-buttons-10-awesome-ready-to-use-solutions-all-related-tutorials-you-need/

Try this:
<script>
$(document).ready(function() {
$('.class1').click(function() {
window.location = $(this).parent().attr('href');
return false;
}
});
</script>
Or simply remove the button tag and use this:
<script>
$(document).ready(function() {
$('a').click(function() {
window.location = $(this).attr('href');
return false;
}
});
</script>

To be JavaScript independent (so that it also works on browsers with JS disabled, in contrary to many other answers here), I'd suggest to just wrap it in a <form> the usual way and make it a <button type="submit"> (or <input type="submit">) instead.
<form action="http://www.google.com">
<button type="submit" class="class1">Google</button>
</form>
or
<form action="http://www.google.com">
<input type="submit" value="Google" class="class1" />
</form>

Related

How do I make buttons import something?

I would like know how i could add a button that inserts things on html or php.
So here an example
Before I click the button
Before
After I click the button
After
How do I do this?
If you have to do exactly like shown in image then try,
$('#btn').on('click', function(){
var text = "> blockquote";
$('#test2').append(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test2">Hello world</textarea>
<button id="btn">
click me
</button>

Hide/show radio buttons stop working on save

Here's my case: I'm developing a little widget, and I was looking for a way to hide/show different DIVs on selecting a set of radio buttons. I found the proper code and adjusted it to my needs. The only problem is that the hide/show feature stops working after clicking on save while configuring the widget :S
Here's the JS:
jQuery(document).ready(function($) {
$(document).ready(function() {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="link_to_image"){
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page"){
$(".radio-option").hide();
$(".linked-page").show();
}
});
});
});
And the HTML:
<p>
<label>Link:</label><br>
<label>
<input type="radio" name="link_to" value="link_to_image">
Link to image
</label><br>
<label>
<input type="radio" name="link_to" value="link_to_page">
Link to page
</label>
</p>
<div class="linked-image radio-option">
<label for="linked_image">Linked image:</label>
<p>
Content for linked_image DIV
</p>
</div>
<div class="linked-page radio-option">
<label for="linked_page">Linked page:</label>
<p>
Content for linked_page DIV
</p>
</div>
And the [JSFiddle] (http://jsfiddle.net/ccwsy5z4/)
Could you give me a hand with this, guys?
So finally I found out that the problem was that the JS stopped working after the AJAX started by clicking on the Save button.
And the solution for that was to recall the JS function after AJAX finished it job. To do that first I had to give a name to the JS function, called it after that, and then call it again after AJAX stopped. Like this:
jQuery(document).ready(function($) {
function radioButtonShow() {
if($(this).attr("value")=="link_to_image") {
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page") {
$(".radio-option").hide();
$(".linked-page").show();
}
};
$('input[type="radio"]').click(radioButtonShow);
$(document).ajaxStop(function() {
$('input[type="radio"]').click(radioButtonShow);
});
});
Hope this may be useful to somebody :)

Change Background Color of div through submit form?

Was a bit unsure how else to word this, JavaScript is the main thing I NEED to learn but after putting hours and hours in i still can't write javascript code off the top of my head. I understand the syntax of just about everything but when it comes to integrating it with css or html I am clueless!
Heres the code:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker">
<input type="submit" value="Submit">
</div>
JavaScript:
document.getElementById("mydiv").style.backgroundColor="colorpicker.Submit";
bare in mind i've had little experience with forms and inputs in html too.
Any reply would be much appriciated! Thanks!
The value for style.backgroundColor should be a string representing a color value used in CSS, which can be one of:
Color name such as red, green, pink, ...
Color hex code such as #ff0000 (or #f00), #00ff00, #ff00ff ...
rgb() or rgba() function such as rgb(255,0,0), rgb(0,255,0), ...
You also have to set up the click event handler for the button submit. Here are details:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker"/>
<input type="submit" value="Submit"/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[1].onclick = function(){
div.style.backgroundColor = div.children[0].value;
};
Note that you can assign an id for each input field to get access to it in JS code, in the above code I use the children collection to access to them instead. The first input field is the first child of div, the second input field is the second child of div.
Demo
Also note that, since HTML5 (which has been supported by all the major browsers) you can use the color input field which can popup a real color picker dialog for the user to select and then you just need to handle the event onchange to get the selected color (via the value property) like this:
HTML:
<div id="mydiv">
<input type="color" name='colorpicker'/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[0].onchange = function(){
div.style.backgroundColor = div.children[0].value;
};
Updated Demo.
Use the form tag onsubmit method to call your JavaScript function.

CSS Hidden DIV Form Submit

Using CSS, when a link is clicked it brings up a hidden DIV that contains a form. The user will then enter information and then submit the form. I'd like the hidden DIV to remain visible, and a 'success message' to be displayed after submission. Then the user will have the option of closing the DIV. I can't get it to work without reloading the page, which causes the DIV to become hidden again. Any ideas?
<body>
Click Me
<!--POPUP-->
<div id="hideshow" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv()">
<img src="images/icon_close.png" class="cntrl" title="Close" />
</a>
<h3>Remove Camper</h3>
<form method="post" onsubmit="email.php">
<p><input name="Name" type="text" /></p>
<p><input name="Submit" type="submit" value="submit" /></p>
</form>
<div id="status" style="display:none;">success</div>
</div>
</div>
</div>
<!--END POPUP-->
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>
</body>
Forms by default submit content by changing to the specified page in its 'action' attribute. You will need to build additional scripts to prevent it from doing that and submit the data using either AJAX or jQuery then process the result.
Or you could simply use whatever language you're programming in to set the default visibility for the division. If the form data exists, display it by default, otherwise hide it by default.
How about using an AJAX call to post the form instead of posting back the whole page?
Instead of using a "submit" type for your button, you can use a "button" type and use a script called by onclick which will use ajax to submit the form and do whatever is necessary.
This defeats slightly the meaning of a form, but works well. You might also want to think about using a javascript library like prototype or similar (jquery, etc) that gives you the functionality to create a get or post array of your form in order to make it easier.

Animated gif not animating on submit

I have a form where the submit function takes several minutes. I'd like to display an animated gif while the submit is cranking. The code below shows the gif, but it doesn't move. What can I do to get it going?
<script type="text/javascript">
$(function() {
$("#submit").click(function() {
$("#wait").show();
return true;
});
});
</script>
<% Using Html.BeginForm%>
<%-- Various input fields here --%>
<input id="submit" type="submit" value="Submit" />
<img id="wait" src="../../Content/images/ajax-loader.gif" alt="" style="display: none" />
<% End Using%>
This problem is happening only in IE, correct? Rick Strahl discussed this on his blog some time back. Be sure to read the comments.
Animated GIF images in hidden page elements
Followig Josh's link I was able to get it to work using:
setTimeout('document.images["loadimage"].src = "../Images/loading_bar.gif"', 200);
In case anybody is still having this issue in IE (and Edge now), I managed to fix the issue by doing the following
Give the following HTML:
<div id="loader" style="display:none;">
<img src="/loading-spinner.gif" alt="Loading">
</div>
and the following Jquery:
function ShowLoadingScreen {
$("#loading-screen").show();
}
adding in the following line fixes the issue:
$("#loader").html($("#loader").html());
so you're left with
function ShowLoadingScreen {
$("#loader").html($("#loader").html());
$("#loading-screen").show();
}

Resources