I am using ajax animation extender in my application. It is working perfectly in almost all browsersexcept IE9. I am using the code as:
<cc1:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="btnAddNewComment"
BehaviorID="OpenAnimationBehavior">
<Animations>
<OnClick>
<Sequence>
<%-- Disable the button so it can't be clicked again --%>
<EnableAction Enabled="false" />
<%-- Position the wire frame and show it --%>
<StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>
<%-- Move the wire frame from the button's bounds to the info panel's bounds --%>
<Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
<Resize Width="850" Height="420" />
<Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
</Parallel>
<%-- Move the panel on top of the wire frame, fade it in, and hide the frame --%>
<StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
<FadeIn AnimationTarget="info" Duration=".2" />
<StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
Corresponding JS function to play the animation is:
// function to open the animation popup
function OpenExtender(tempCommentID)
{
var behaveYourself = $find("OpenAnimationBehavior");
var onClickAnimation = behaveYourself.get_OnClickBehavior();
onClickAnimation.play();
return false;
}
While clicking on button 'btnAddNewComment' a pop up is coming, but the problem is on mouse over the popup div. When i do mouse over over the popup, the popup get disappeared.
Could anybody say what will be the problem?
it seem to me, that IE9 doesn't remember the changes made via Animation Extender. Even the official sample doesn't work. If (for example) the Display: none, and you animated it to Dislay: block, when the animation stops it will revert do Display: none on the next redraw (you need to move mouse over the element, or otherwise invoke refresh). I hope it will be fixed really soon.
I realize the next step:
Remove the following code in the control called from the AnimationExtender:
"opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);"
After that, the problem was fixed.
Related
So I have this logo that I want it to become colored when mouse hovers over. I have the code for switching the pictures on mouse hover but I need the element to change with a time interval. You can find the code I am using attached.
<a href="#page-top" class="Logo"><img id="logo" src="img/logocolored1.png"
alt="Compositions" onmouseover="hover(this);" onmouseout="unhover(this);" />
<script type="text/javascript">
function hover(element) {
element.setAttribute('src', 'img/logocolored.png');
}
function unhover(element) {
element.setAttribute('src', 'img/logocolored1.png');
}
</script></a>
I've total four 4 sections and a footer.
Section one, two , three are normal sections.
On section four I need normal scrolling as its height is more than window height.
Below code works fine with keyboard scrolling and mouse scrolling.
But On mobile I've issue while scrolling upward.
Please open the link on a touch device too see the issue.
Js fiddle here
<div id="fullpage">
<div class="section">One</div>
<div class="section">Two</div>
<div id="three" class="section">Three</div>
<div id="four" class="section fp-normal-height fp-normal-scroll">
<div style="height:1000px;">Four</div>
</div>
</div>
<footer style="height:300px;">Site footer</footer>
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
hybrid:true,
fitToSection: false,
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
if(loadedSection.attr("id") == "four") {
$.fn.fullpage.setAutoScrolling(false);
}
if(loadedSection.attr("id") == "three") {
$.fn.fullpage.setAutoScrolling(true);
}
},
});
when we swipe upward from section 4 (as at this point Autoscrolling has been set to false) the swipe takes user directly to first section.
I think The reason Its happening because, when user swipes, the page gets scrolled to the top as normal scrolling has been triggered. If I do console log I can see autoscrolling is being set back to true when it passes section 3 but still page scrolls till top as swipe has triggered the scrolling when auto scrolling was false .
if you open below link on mobile you will see the issue above described. Works fine for keyboard.
Expect issues.
The hybrid option is not documented which means is might not work as expected in all possible scenarios.
I have an element, #i1, that is below another element, .close_button, and they each have a click event associated with them...the former's is called clickFade() while the latter's event is a anonymous function that is defined within the execution of the aforementioned clickFade().
When clickFade() is called by clicking on #i1, the parent div,#welcome, is fadedTo opacity .1 and #A is fadedIn. Also, unbind() is called for #i1 and the anonymous function mentioned above that is associated with a click event on .close_button is defined. This function just reverses the effects that clickFade() has when a close_button image is clicked.
I don't think the problem is a z-index issue (because I've tried it already and the close_button image is always visible on top). I also don't think it's a binding issue because the button works, but only when there's nothing underneath of it...for example, if the button is half overlapping one of the background images like #i1, the half that isn't on top of #i1 will trigger the event while the other half will not.
What's the problem here and how can I fix it?
Here are the gists for the HTML, CSS, and JS; here's the relevant code:
HTML:
<div id="welcome">
<p id="welcomeText">Welcome</p>
<img src="imgs/img1.jpg" id="i1" alt=null/>
</div>
<div id="A">
<img src='imgs/close_button.gif' class='close_button' alt=null
style="width: 10%; height: 10%"/>
</div>
JS:
function clickFade() {
$('#welcome').fadeTo('slow',.1);
$('#i1').unbind('click',clickFade);
$('#i1').unbind('mouseover',mouseOverFunc);
switch (this.id) {
case "i1":
$('#A').fadeIn('slow');
$('.close_button').click(function() {
$('#A').fadeOut('slow');
$('#welcome').fadeTo('slow',1);
$('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
});
break;
.
.
.
}
}
So you both have to set the z-index AND set position:relative for this to work.
z-index not working with fixed positioning and others. Good luck!
I'm trying to toggle the visible property of a Kendo UI window through the data-bind method using an MVVM pattern but it is not responding as it should according to the Kendo documentation.
<div id="KendoWindow"
data-role="window"
data-bind="visible:WindowVisible"
data-title="Title does not show"
data-width="500"
data-height="300"
>
<div class="span4" >
<label for="Comment">Comments</label>
<textarea id ="Comment" data-bind="value: Comment"></textarea>
</div>
I am initializing it properly but if I set the WinowVisible property to false in the viewModel like so,
this.set("WindowVisible", false);
the window stays visible.
If I set it through jQuery like so :
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:false
});
it will then become invisible. Then I can't make it visible again if I run this code:
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:true
});
Maybe try adding data-visible="false" to the window, then when the ShowWindow becomes true, it should become visible. I have a checkbox bound to the boolean value, as well as a button click function setting the boolean and both seem to work fine.
See sample...
http://jsbin.com/jecih/1/edit
I have/can have only one Jquery dialog box. This dialog box has some advertisement content to the User.
On reading it, a User can avail the offer or ignore it for the time being.
User can avail the offer by clicking on Submit button inside the dialog box.
Or he can ignore it by clicking on "Remind me later" link which will close the dialog box.
Contents inside dialog box are updated through Ajax. So when Submit button is clicked,
a thank you message is shown inside the same dialog box.
When User avails the offer, "Remind me later" link would still be there. If User clicks on that, logically, dialog
box should be shown again. But, User has already availed the offer!
How can I render or not render Close link of Jquery dialog box programatically?
Code for dialog box is below,
$h(document).ready(function() {
$h("#showForm").dialog({
open: function(event, ui) {
jQuery('.ui-dialog-titlebar-close').html('<span>Remind me later</span>');
jQuery('.ui-dialog-content').removeClass("ui-dialog-content").addClass("advertise-upgrade-content");
},
duration: 800,
height: 727,
minWidth: 811,
width: 811,
position: ['middle', 154],
zIndex: 99999999,
modal: true,
show: {
effect: 'puff',
duration: 400
},
hide: {
effect: 'puff',
duration: 400
}
});
});
<div id="showForm" height: 670px;">
<div class="submitClass">
<a4j:commandLink immediate="true" action="#{myBean.clickToAvail}" reRender="renderSuccess" value="Submit">
</a4j:commandLink>
</div>
<h:panelGroup id="renderSuccess">
<h:outputText value="Thank you for availing this offer">
</h:panelGroup>
</div>
Am using jquery.min.js, jquery-1.6.2.js , jquery-ui.min.js.
In the open function, make a logical check whether Thank you message container is visible (assuming that it's visible only if the user has availed the offer) and if it's visible, hide close ('Remind me later' in your case) or else, show it.
Also, you're using a very generic code to manipulate the attributes of dialogue in open. You should make use of the ui variableto make your code specific to only the current dialog
Refer to this thread for both close manipulation and example usage of ui variable
EDIT: making four changes
1) Give an id to the span
NB: This still needs to be specific to this dialog. Please refer to the thread mentioned above.
jQuery('.ui-dialog-titlebar-close').html('<span id=\'reminder\'>Remind me later');
2) Define a boolean variable say availed in your bean and set it in your clickToAvail method
public void clickToAvail(){
// business logic here
this.availed = true;
}
3) Use data and oncomplete
<a4j:commandLink immediate="true" action="#{myBean.clickToAvail}" data="#{myBean.availed}" reRender="renderSuccess" value="Submit" oncomplete="removeReminder(event.data);">
</a4j:commandLink>
4) Define a removeReminder javascript function in the <head> of your page
function removeReminder(availed){
if(availed == 'true' || availed == true)
$('#reminder').hide(); // or remove() decide as per your requirement
}