I have a problem with IE11 and jQuery's function .slideDown()
When I press a button to call the function .slideDown() it looks like the image below.
If I move the mouse the indentation (or what it could be called) disapperas, but if I collapse and expand there it is again.
Does anyone know if this is a known error, or have any suggestion on how I can solve this?
EDIT: Updated with some code.
html
<div class="small-info">
<div class="expande">
<span id="show-more">read more</span><span class="icon-arrow-down"></span>
</div>
</div>
<div class="extended-info" hidden>
....
</div
js
$('#show-more').on('click', function() {
$('.small-info').slideUp();
$('.extended-info').slideDown();
});
I had the same problem as in this question, jQuery slideToggle and CSS border-radius propery show wired in IE10
And it was fixed by adding following to extended-info & small-info:
display:inline-block;
instead of just display:block;
Related
I'm having The following issue, this code:
<div class="image-container">
<div id="over-1" class="glass" onmouseout="$(this).stop().fadeOut();"></div>
<img src="img.jpg" onmouseover="$('#over-1').stop().fadeIn();" />
</div>
The mouse over and mouse out works fine, however on occasion the overlay image fades back in by itself after fading out, I have searched for a solution, so far being told to use jquerys hover function etc and similar, however so far no solution.
Can anyone help?
Set an additional fadeOut() call on the container "image-container" and it'll solve the issue
$(document).on("mouseover", ".image-container", function(){
$("#over-1").fadeOut();
});
Fiddle
I need some help.
I tried to make a simple project on JSFiddle, but I can't get it to work.
http://jsfiddle.net/reUyp/2/
Here's the code
HTML:
<div id="img0">
<b class="i01">ONE</b> <b class="i02">TWO</b> <b class="i03">THREE</b>
</div>
<div style="width:200px; height:500px; background-color:red;" id="i01"></div>
<br>
<div style="width:200px; height:500px; background-color:blue;" id="i02"></div>
<br>
<div style="width:200px; height:500px; background-color:green;" id="i03"></div>
<br>
JavaScript:
$(function(){
$('#img0 b').click(function(){
CL=$(this).attr('class')
st=$('#'+CL+'').offset().top;
$('body,html').animate({scrollTop: st}, 500);
return false;
});
});
What I want is that when you click on one of the words, the page should scroll to the corresponding colored div. But it doesn't...
What am I missing? I'm sure it's a really stupid thing...
Oh, and is there actually a better way to accomplish this?
Since you are using jQuery, you have to include it into your jsFiddle project. Select it in the top left corner and your sample will work.
Also in your own project you have to include jQuery with eg:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
inside the head part of the html page.
You're trying to use jQuery syntax but haven't loaded jQuery in the Frameworks & Extensions sidebar. Select jQuery 1.9.1 and your code works just fine.
See this, this is your correct answer.
Fiddle here
This would be easier with a jsfiddle, but as god is my witness something is wrong with jsfiddle and none of my js is working, but they work on my localhost though so yeah.
So let me explain
i have a div called topBar.
Its hidden on dom load. I have a div called toggle_bar
When toggle_bar is clicked, jquery hides toggle_bar and shows topBar
But the problem im having is that after i click toggle_bar, topBar is shown but i move my mouse a bit and BAM! topBar is gone.
I dont know why this is happening
here is my code
Jquery
$("#topBar").hide();
$("#toggle_bar").live("click",function (){
$("#toggle_bar").hide();
$("#topBar").show();
});
HTML
<div class='toggle_bar'>
</div>
<div id="topBar" class="topBar" >
<div class="bar_frame">
<div class="plogo">
Page logo bla bla bla
</div>
<div class="controls">
Notifications bla bla bla
</div>
<div class="nav_bar_frame">
<div class="float_left_bar">
</div>
<div class="float_right_bar">
</div>
</div>
</div>
</div>
PS: For the toggle_bar:a , ive used css to setup an image as href. :D
The href on toggle_bar should have # or you should be stopping the event in the click handler.
Is there a reason why you are hiding on load rather than setting to display none in the styles?
OriginalSyn is right, you could write it like this...
$("#toggle_bar").live("click",function () {
$(this).hide();
$("#topBar").show();
return false;
});
I would recommend (if you're using the latest version of jQuery to use the .on() or .delegate() method in in lieu of the .live() method. I would refer you to this article which does a great job of explaining the differences.
Heres a working fiddle. You should also be using
.on
instead of
.live
It was deprecated as of 1.7.
It seems like you need to prevent the link from traveling to the URL. Here is an example of how to change your click event handler to do so.
http://jsfiddle.net/dp3T2/
$("#toggle_bar").live("click",function (e){
$("#toggle_bar").hide();
$("#topBar").show();
e.preventDefault();
});
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});
I am a novice in jQuery, and am trying to create this page. In all browsers I tested, when I click the red button a coupon code appears, except for IE. Why does this happen? And how can I fix it?
I hate this browser, really...
Javascript:
$(".coupon_button").live('click', function (event) {
$(".coupon_button").remove().fadeOut('slow');
$(".coupon_main").after($("<div class='coupon_code'>code:newhgcoupon</div>").fadeIn());
//$(".coupon_main").after().fadeIn('slow').html("<div class='code'>code:newhgcoupon</div>");
});
HTML:
<div class="module">
<div class="coupon_title">Pay <span class="yellow">1 Cent</span> your First Month</div>
<div class="coupon_main">To help save you some time, we created a link that takes you directly to the easily missed area on the official Medifast site that lists all of their latest specials and discounts.</div>
<div class="coupon_button"><img src="button.png" /></div>
<div class="coupon_footer">Expiration: 11-30-2010</div>
</div>
Your script is not executing in IE. To fix it, just change the script type to text/javascript.
IE does not recognize the application/javascript type as being a script at all.
I think you're missing your document.ready function. Add this line right above the first line of your script:
$(document).ready(function() {