When I click "contact" then "about" the animations work correctly, however, if I then click "contact" again, the animation won't work. The page appears blank.
$(".contact-link").click(function() {
if ($("#contact-page-wrap").is(":hidden")) {
$("#contact-page-wrap").slideDown(400).queue(function() {
$(".contact-block").slideDown(400);
});;
} else {
$(".about-block").slideUp(400).queue(function() {
$(".contact-block").slideDown(400);
});;
}
});
$(".about-link").click(function() {
if ($("#contact-page-wrap").is(":hidden")) {
$("#contact-page-wrap").slideDown(400).queue(function() {
$(".about-block").slideDown(400);
});;
} else {
$(".contact-block").slideUp(400).queue(function() {
$(".about-block").slideDown(400);
});;
}
});
How can I make it run once per click for as long as the page is open?
I'm not sure that I understood completely your intentions, but have tou considered using .slideToggle()?
http://api.jquery.com/slideToggle/
It is a simpler way (if I understand correctly what you're trying to do)
PS: Java is a wrong tag! You should switch it to "Javascript".
Related
I'm trying to make a button that takes the user back two pages, but I've noticed something odd about Safari. Here is my working function:
jQuery(function(){
jQuery('.go-back').click(function(e) {
if(jQuery.browser.safari) {
window.history.go(-3);
} else {
window.history.go(-2);
}
});
});
Does anyone have an explanation for why the indexing is off by 1 in Safari?
I have two buttons: menu_icon and exit_icon. When I click on the menu_icon, the menu shows (I just do an animation with CSS3). It goes away when I click exit_icon, but it will only work once. I have to reload the page if I want to re-open the menu.
Here is my JS code:
$(function(){
$('#menu_icon').click(function() {
$('nav').addClass('in');
});
$('#exit_icon').click(function() {
$('nav').addClass('out');
});
});
You need to remove the previous classes:
$('#menu_icon').click(function() {
$('nav').removeClass('out').addClass('in');
});
$('#exit_icon').click(function() {
$('nav').removeClass('in').addClass('out');
});
Let us say i have a page http://www.abc.com/xyz.html and i am going to access this page in two ways
simple as it is
I will append some stuff to the url e.g. http://www.abc.com/xyz.html?nohome by just putting the value ?nohome manually in the code.
Now i will add some javascript code something like this
$(document).ready(function () {
if (location.search=="?value=nohome") {
// wanna hide a button in this current page
}
else {
// just show the original page.
}
});
Any help will be appreciated.
As you are using jQuery to catch the DOM-ready event, I guess a jQuery solution to your problem would be fine, even though the question isn't tagged jQuery:
You can use .hide() to hide and element:
$(document).ready(function () {
if (location.search=="?value=nohome")
{
$("#idOfElementToHide").hide();
}
// Got rid of the else statement, since you didn't want to do anything on else
});
I want to make a video appear when flipping to a certain page of this application: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html Here is some of my amateur code:
$(document).ready(function(){
if (page === 2)
{
$("iframe").show();
}
else
{
$("iframe").hide();
}
});
It connects to an iframe tag that is absolutely positioned. Is that the right approach?
Thanks for your help :-)
Your code will only check the page once - when it's initially loaded.
You will want to put that if statement inside a click handler...
$('#elementYouClicked').live('click', function() {
if (page === 2) {
//show
} else {
//hide
}
});
If this is not what you are asking, can you elaborate on your question please?
So the code below is called when a user selects Save on an ExtJS popup modal window. This window ONLY contains a combobox. Now, sometimes when a user saves this, and then re-opens it later on, the combobox will appear BEHIND the window all grayed out, unable to get to. Other times, it will be fine and work, and no difference in events happening either time, just complete utter inconsistency.
Does anyone know what this could be?
var changeProductOK = function() {
var win = getChangeProductWindow();
if (win.subProductId.getValue() == '') {
Global.alert('Choose a product');
return;
}
win.hide();
PropertiesWin.hide();
Global.confirm('You sure?', 'Confirm', function(result) {
if (result) {
Global.mask('Changing the product', workspacePanel.getEl());
WorkspaceController.ChangeProduct(applicationId, win.subProductId.getValue(), function(response) {
Global.unmask(workspacePanel.getEl());
if (!response) {
showWorkflowMessages([{ Type: 0, Text: 'A timeout occurred while changing the product. Please try again.'}]);
return;
}
if (response.Data.Result == false) {
showWorkflowMessages(response.Data.Messages);
} else {
Global.mask('Reloading the application');
reloadWorkspace();
}
});
}
win.subProductId.setValue('');
});
}
The problem has to do with some kind of bug involving the z-indexes. I just fixed it by making sure the z-index was a bit higher than the window by adding:
<style>
.x-combo-list {z-index: 10000 !important} /* A hack to fix superboxselect dropdowns showing up behind window */
</style>
Not beautiful, but it works.
I'm answering for how I get around this, but feel free to post other answers before it lets me accept this one if you know of a common way to prevent this from happening.
I placed
win.close();
right after
win.subProductId.setValue('');
That way it destroys the modal everytime a successful save completes and therefore it will always load up as the initial window (which worked everytime)