I have one HTML file as shown below:
<html>
<head><title>jQuery beginner</title></head>
<body>
<div id='my_div'>Some random generated value</div>
<button id="submit_button">submit</button>
</body>
</html>
I want to keep <div id="my_div"> element hidden until <button id="submit_button"> is clicked.
So in my Javascript file I wrote following code:
$(document).ready(function() {
$('#my_div').hide();
});
$('#submit_button').click(function() {
$('#my_div').show();
});
This script and HTML is working fine in Google Chrome and surprisingly it works in Internet Explorer 9 also but doesn't work in Firefox.
I read some other questions on SO and tried alternatives like
$('#my_div').css('display','block'),
$('#my_div').css('display','inline-block'),
$('#my_div').css('display','block-table'),
$('#my_div').attr('style','display:block')
but none of the above solution is working in Firefox.
Is there any solution to this problem?
One more thing I observed is, if I keep the div visible at page load time and later using button click event toggle it's display, it works.
Any clue why this is happening only in Firefox?
But you missed to try this :)
That is, wrapping the event binding code into the doc ready handler.
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});
Wrap your code inside ready handler:
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});
Related
I have no idea whats going on with this but I have a website with this html:
<button id="mute"><input type="image" src="img/stop.png" class="stop" onclick="toggleStop(this);"/></button>
<button id="mute2"><input type="image" src="img/sonido.png" class="mute stop" onclick="toggle(this);"/></button>
And I'm trying to toggle the image when ON CLICK with this JS:
<script type="text/javascript">
function toggle(el){
if(el.className!="mute")
{
el.src='img/mute.png';
el.className="mute";
}
else if(el.className=="mute")
{
el.src='img/sonido.png';
el.className="audio";
}
return false;
}
</script>
<script>
function toggleStop(event){
if(el.className!="play")
{
el.src='img/play.png';
el.className="play";
}
else if(el.className=="play")
{
el.src='img/stop.png';
el.className="stop";
}
return false;
}
</script>
It works perfect on Chrome, but it doesnt work on Firefox. I have no clue what's wrong. Sadly I'm no developer, so I do what I can searching on the Internet. Any help would be appreciated.
There is no way this code, as posted, can run under Chrome (or Firefox or any other browser.)
I tried turning it into a snippet but had to make a number of changes to get it usable ... then I stopped trying.
Main issues:
You can't nest an <input> instead of a <button>. Use one or the other.
If you use <button>, it should be <button type="button"> to keep it from acting as a submit button and reloading your form.
Your code is broken.
function toggleStop(event){
if(el.className!="play")
There is no element el and an error is generated.
The first rule of JavaScript work: ALWAYS, ALWAYS check the error console.
So...I took what you said about an INPUT inside an BUTTON and I just delete the button and use an isntead and now it works on both browsers.
Thanks a lot Jeremy!
I tried some old answers from other questions, but none of them resolved my case. The toggle function is not working fro me. Below is the jquery:
jQuery(document).ready(function($) {
$(".team-member").click(
function() {
$(this).children(".description").toggle();
}
);
});
HTML:
<div class="team-member" data-style="meta_below">
<img alt="yes" src="source/to/img.jpg" title="Candice Rauter">
<h4 class="light">Name</h4>
<div class="position">Position Goes Herer</div>
<p class="description">blablabla</p>
</div>
Link for the section of the website(#our-team section).
Any help would be appreciated!
Thanks!
When you inspect your site on mobile, using sdk and Chrome, you get
Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
warnings on your page.
Try using .on('click') rather than .click()
$(".team-member").on('click', function(){
$(this).children(".description").toggle();
});
This should work even for dynamically added elements. And I think your page is using ajax to load its content (from what I can see in the inspector).
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});
Code works across all major browsers, but firing a simple alert on click is not working.
This is in my header
<script type="text/javascript">
function this_function() {
alert("got here mango!");
}
</script>
This is in the body
<button type="button" onclick="this_function()">click me</button>
If I put the "onclick" into the tag then it works fine and dandy.
Any and all suggestions on how to get this to work in IE would be great. Thanks in advance.
Sorry, by "into the tag" i meant putting onclick="alert()" into the tag.
Try: <button type="button" onclick="javascript:this_function();">click me</button>
It's advised to separate JavaScript and markup. Thus regardless you should assign an ID to the button and attach the onclick handler like this:
document.getElementById("button").onclick = function() {
alert("got here mango!");
};
Are you running this sandboxed? If you aren't I would highly suggest trying this all by its self in a single HTML file with no other things going on. It is possible that IE7 is blowing up (quietly) on another script issue that is preventing your "this_function" from loading into the DOM properly.
After you have done this put the in your there is no need for it to be in the head and I have actually seen this cause problems under certain conditions
I have tested this in Chrome and all good, but Firefox is lazy.
Part of HTML in question:
<div id="print" style="display:none;"></div>
And Javascript follows it like:
$('.print').click(function(){
printF($(this));
return false;
});
function printF(dugme){
$('#print').html("<iframe src='http://example.comli.com/index.php/prijava/pogledaj/"+$(dugme).attr('name') +"' onLoad='this.contentWindow.print();'></iframe>");
};
Thank you
Is the problem that the click event is not getting fired or that your IFRAME is not getting loaded?
Anyway, I think I got this working in Firefox. I had to put your click function into the document#ready event though. Like this:
$(function(){
$('.print').click(function(){
printF($(this));
return false;
});
});