$(document).ready(function () {
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'images/contact_tab.gif',
imageHeight: '122px',
imageWidth: '40px',
tabLocation: 'left',
speed: 300,
action: 'click',
topPos: '200px',
fixedPosition: false
});
});
});
tabslideout works perfectly i tried to hide after some time interval when the slide is show i used
setTimeout(function(){---},3000)
it hide, but when i click it again to open it hide again instantly
Any help is greatly appreciated!
Try this:
$('.slide-out-div').delay(3000).slideUp('fast');
Related
I am initializing Fullpage.js on a button click like so:
$('.fullpage-trigger').on('click', function(event) {
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'left',
scrollOverflow: true
});
});
I am trying to build a button that when clicked disables Fullpage.js, essentially toggling it on and off. Is this possible?
Thank you in advance!
You can try destroying and recreating it
$('.fullpage-trigger').on('click', function(event) {
if($('#fullpage').hasClass('fp-destroyed')){
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'left',
scrollOverflow: true
});
} else {
$.fn.fullpage.destroy('all');
}
});
Is there a way to make the jQuery accordion collapse when you click off of it? For example if you have one of the accordions open, if you click anywhere that isn't the accordion, then it closes.
jQuery
$(document).ready(function() {
$( "#accordion" ).accordion({
header: "h3",
collapsible: true,
active: false,
heightStyle: "content",
animate: {
easing: "swing",
duration: 300
}
});
});
How about this:
$(document).click(function (event) {
if(!$(event.target).closest('#accordion').length) {//if you clicked outside of the accordion
$("#accordion").accordion({active: false});//collapse all the panels
}
});
I have a dialogbox that shows the contents of an HTML file.
In this file there is a href link at the bottom.
Now everytime the dialog is shown, it automatically scrolls to that link and sets focus to it.
How can I set the scroll position back to the top after the dialog shows?
Here is the jquery code:
<script type="text/javascript">
$(function()
{
$('#faq1_pnM').dialog(
{
title: 'Frequently asked questions',
autoOpen: false,
modal: true,
show: 'puff',
hide: 'puff',
open: function() {
var e1 = $(this);
var scrollY = this.scrollHeight;
e1.scrollTop(scrollY);
e1.parent().queue(function(next) {
e1.scrollTop(scrollY);
next();
});
},
resizable: false,
closeOnEscape: true,
width: '650',
height: '500',
minWidth: '500',
minHeight: '500'
}).dialog('open');
});
</script>
As you can see, I tried with the open: function... stuff, but that doesn't do the trick.
Did I miss something?
Found the solution:
I removed the scrollY variable and replaced it for 0 (zero).
I have the flowing jquery code for a dialog
$(function () {
$("#WebcamPopup").dialog({
autoOpen: false,
height: 500,
width: '80%',
resizable: false,
position: "center",
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 500
}
});
$(".ui-dialog-titlebar").hide();
$("#OpenWebcamPopup").click(function () {
$("#WebcamPopup").dialog("open");
});
});
and the flowing code for html
<input id="OpenWebcamPopup" value="webcam" type="button" />
<div id="WebcamPopup" title="webcam">
....
</div>
I test this in an empty page and its work, but when I include a jquery file to the page the dialog not work correctly, which mean that there are some conflicts between the jquery file and the above jquery code. I try to edit the jquery file, but the codes in this file is very complex to understand
How can I solve this problem ?
I've HTML tag like this:
<div id="user-detail"></div>
That's for jQuery.dialog container. And the dialog script...
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
When I call a function to show it, I adding .attr() to give the tag new attribute title.
function user_detail(id){
var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html(output)
.dialog('open');
}
and blah.... the .attr() not work. What is the problem??
You can hack it like that:
$("span.ui-dialog-title").text('User Detail');
If User Detail string is common for all,Do not mess up.
use
<div id="user-detail" title="User Details"></div>
Your script is working fine here http://jsfiddle.net/yeyene/GnpQ8/3/
Make sure your variable output has data.
$(document).ready(function(){
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html('HI, I am a dialog.')
.dialog('open');
});