I am not sure why but after looking at examples I thought were the same from previous questions I decided to post.. I have a button when clicked does the following things...
$('.fa-phone, .bg-darkPink').parent().on('click', function () {
$('#testimonials').fadeTo(0, 0);
$('.submenu-ctn').fadeTo(0, 0);
$("#colorscreen").remove();
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBigCS");
$(".musability-music-therapy-content-space").css({width: "720px",opacity:1}).load("contact-page.html #contact-form");
$(".submenu-ctn").load("contact-page.html .submenu-contact");
$.getScript("js/slider/slider-animations.js");
$(".submenu-ctn").load("contact-page.html .submenu-contact");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
$('#menu').multilevelpushmenu('collapse');
$('.submenu-ctn').fadeTo(3000, 1);
});
the problem is that this bit of the script is not getting executed.
$('#testimonials').fadeTo(0, 0);
where the css and html is as follows
<div id="testimonials">
<div class="box animated seven boxGreen testimonials1">
<p class="fg-white">"".<p class="text-small fg-white">- M
<span class="imagestars">
<img src="images/mthc/stars.png" alt="testimoinal rating 5 star">
</span>
</p>
</div>
<div class="box animated nine boxGreen testimonials2">
<p class="fg-white">" the long term"<p class="text-small fg-white">kool.
<span class="imagestars">
<img src="images/mthc/stars.png" alt="testimoinal rating 5 star">
</span>
</p>
</div>
</div>
#testimonials
{
display:block;
opacity:1;
z-index:1500;
}
Not really sure what's going on so investigating with debug but that isn't telling anything atm. works in all other browsers hmmmm ?
So basically I.E 10 doesn't like classes that have overflow:hidden within a div you are trying to fadeTo ... taking them out of the classes within the div sorted the problem out !
Related
I have a very dumb problem I am sure, but it's keeping me busy for too long know without being able to solve it.
I'm trying to make only one page with hidden divs that will appear on top of the main div when a button is clicked. I have no problem doing so. The problem appears when I try to implement a fade in and fade out effect at the same time on those two divs.
jquery:
$(document).ready(function() {
function goin() {
$("#container").fadeOut(1000, 0);
}
function goin1() {
$("#hidden").fadeIn(1500);
}
function goback() {
$("#hidden").fadeOut(1000, 0);
}
function goback1() {
$("#container").fadeIn(1000);
}
showNextQuote();
$("#playbtn").click(function(){
$.when(goin()).then(goin1());
});
$("#backbtn").click(function(){
$.when(goback()).then(goback1());
});
})();
html:
<div id="container">
<div id="particles-js">
</div>
<div class="mainhover">
<button id="playbtn"></button>
<footer id="footer">
<p>© 2016 whatapage.ch</p>
</footer>
</div>
</div>
<div id="hidden">
<p>Hello</p>
<button id="backbtn">press to fad in again</button>
</div>
the div #hidden just appears and disappears without the fade in fade out effect. Any clue on what is happening here?
Alright I got a working solution:
I placed #hidden in the #container div. All of a sudden everything worked out.
I Wrote this JQuery code but I thought the questions (#question1 and #question2) would be hidden when they are clicked and #answer1 and 2 would be revealed. Hence 'toggle()' Does anyone have a suggestion of the best way I could do this so that neither is visible at the same time - if the question is clicked then the answer is revealed and the question is not displayed. I am not bothered about it going back (e.g when the answer is clicked it swaps again)
$(function(){
$('#question1').live('click',function(){
event.preventDefault();
$('#answer1').toggle();
});
});
$(function(){
$('#question2').live('click',function(){
event.preventDefault();
$('#answer2').toggle();
});
});
You can try this code which will work with any number of questions :
HTML:
<div class="question-container" id="question1">
<p class="question">The question 1 </p>
<p class="answer hide">The anwser 1</p>
</div>
<div class="question-container" id="question2">
<p class="question">The question 2</p>
<p class="answer hide">The anwser 2</p>
</div>
CSS :
.hide {
display: none;
}
JS :
$(function(){
$('.question-container').on('click',function(pEvent){
$(this).children('.answer').toggleClass('hide');
$(this).children('.question').toggleClass('hide');
});
});
Demo : http://jsfiddle.net/kyo9jahw/3/
I have been using the AngularJS ng-mouseenter and mg-mouseleave and it has been almost the cause of my death. A quick explanation:
<div class="characterSum">
<div class="avatarContainer" ng-mouseenter="showButton = true" ng-mouseout="showButton = false">
<img ng-src="{{imagePath}}" class="img-thumbnail">
<div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
<button class="btn-btn-default">
Add Character Image
</button>
</div>
</div>
</div>
The CSS properties:
.avatarContainer {
max-width: 150px;
max-height: 150px;
display:inline-block;
float:left;
margin-right:5px;
position:relative;
}
.characterSum {
border: 1px;
min-height:160px;
position:relative;
}
I'm fairly certain it has something to do with my CSS properties. I followed a few instructions to automatically scale an image into a 150 x 150 size so that might explain my CSS properties for those wizards. Anyway, the reason why I think it has something to do with it is because when I add this:
<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">Hi</div>
And I add it under the parent class "characterSum", when I mouse over Hi, the button shows. As soon as I add this under the class "avatarContainer" the child div, it stops working. If I wrap the ENTIRE avatarContainer class with this div so:
<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">
HI
<div class="avatarContainer"> ......... </div>
</div>
It only shows the button when I go near hi. I added $scope.$watch on showButton to console.log('detected') whenever showButton changes and in every scenario, "detected" is never logged when I go over the img or anything EXCEPT FOR when I go over hi
Does anyone have any ideas on what crazy curse I have been put under? Or if not, I'm willing to use any other way of accomplishing this. (Basically want the button to show whenever the img is moused over). And I have already tried directly applying ng-mouseover to the img element to no avail.
You had a typo, you need to use ng-mouseleaveinstead of ng-mouseout
Markup
<div class="characterSum">
<div class="avatarContainer" ng-mouseenter="showButton = true"
ng-mouseleave="showButton = false">
<img ng-src="{{imagePath}}" class="img-thumbnail">
<div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
<button class="btn-btn-default">
Add Character Image
</button>
</div>
</div>
</div>
am i doing any silly mistake in this ? i tried closest and next but its not supporting in this liberary. and i cant change liberay as well.
i want the function generaic so that i can use this icon multiple times
<span style="position:relative" class="iconblock">
<img class="queicon" src="images/question_icon.gif" alt="icon" />
<span class="helpPopup hidden">test test test</span>
$(".iconblock").mouseover(function()
{
var sachin = $(this).find("hidden");
alert(sachin);
});
$(this).find(".hidden");
You forgot . before hidden.
You can use a short cut too specifying the context $(".hidden",this)
$(".iconblock").mouseover(function()
{
$(".hidden",this).removeClass('hidden');
});
http://jsfiddle.net/cJbVY/
If your intend is to show and hide on mouseover/mouse out you can try this
http://jsfiddle.net/ze6Xy/
$(".iconblock").hover(function()
{
$(".helpPopup",this).toggleClass('hidden');
});
Just trying to help here, Do you really need to use JS/Jquery, for this?
HTML:
<span style="position:relative" class="iconblock">
<img class="queicon" src="images/question_icon.gif" alt="icon" />
<span class="helpPopup hidden">test test test</span>
And in CSS, something like:
.iconblock .hidden {
display:none;
}
.iconblock:hover .hidden {
display:block;
}
Heres my Jquery
$(".sectiontitle").click(function (e) {
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
currBg = el.css('background-image');
if (currBg == "url(http://blah/resources/img/close.gif)") {
currBg = "url(http://blah/resources/img/open.gif)";
console.log('open gif');
}
else {
currBg = "url(http://blah/resources/img/close.gif);"
console.log('close gif');
}
console.log(currBg);
el.css('background-image', currBg);
return false;
});
Heres my HTML panel (of which there are many)
<div class="majorsection">
<div class="sectiontitle">
<h2>Restaurant Bookings</h2>
<div class="toggler">
<a title="click to hide" class="toggle" href="http://blah/index.php/console/index"><span>-</span></a>
</div>
<div class="clear"></div>
</div>
<div class="msectioninner">
<div class="minorsection">
<div class="sectionlist">
<div class="section"></div>
</div>
<div class="sectionoptions">
<div class="clear"></div>
</div>
</div>
</div>
</div>
The image switches on the first click and the panel slides all cool both ways but the image doesn't change back
Why not use two css classes instead.
It will make the code much cleaner and maintainable.
Failing that one thing to try is to change
.css('background-image', currBg)
to
.css('backgroundImage', currBg)
I remember there was an issue with this (but thought it had been fixed). If this does not work have you got a url showing the issue?
Have you tried console.log(currBg); right after you retrieve it? The url() property may be getting rewritten/resolved. Not sure - but a similar problem arises if you are testing the .attr('src') of an image - it might not be what you set it to anymore.
A suggestion though: Rather than hard coding the background-image values, consider doing something like:
$(document).ready(function(){
$('a.toggle').addClass('closed');
$(".sectiontitle").click(function(e){
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
// jQuery 1.3 has this:
// el.toggleClass('.closed');
// otherwise - use this:
if (el.is('.closed'))
{
el.removeClass('closed');
} else {
el.addClass('closed');
}
return false;
});
});
Then your a.toggle picks up the background-image property of the "open" and a.toggle.closed gets the "closed" image in your CSS files.