I'm using jQuery UI and I want to check if accordion is already applied to some element. In this case I will refresh it, else I will apply it. I want something like this
if (already_applied) {
$('#element').accordion('refresh');
}
else {
$('#element').accordion(
{
header: '> div > h3',
collapsible: true,
active: true,
autoHeight: false
}
);
};
This should work:
if ($('#element').hasClass('ui-accordion')) {
$('#element').accordion('refresh');
}
else {
$('#element').accordion({
header: '> div > h3',
collapsible: true,
active: true,
autoHeight: false
});
};
Related
Using Sencha 6.5.3, how may I configure a panel such that hideOnMaskTap is true and transparent is true?
I found this for a transparent mask:
modal: {
transparent: true
}
This is how I create the panel:
Ext.create({
xtype: 'panel',
cls: 'o-searcher-results',
hideOnMaskTap: true,
modal: {
transparent: true
},
minHeight: '30%',
maxHeight: '500px',
scrollable: true,
hidden: true
}));
but it doesn't work.
This is the sencha fiddle.
I'm using Sencha 6.5.3 modern and Sencha Cmd 6.5.3.6
Here is a way you could do it, first create a class for your mask:
.modal_mask{
background: transparent !important;
}
Then add those listeners to the panel to modify temporarily the mask class
var mymask;
var panel = Ext.create({
xtype: 'panel',
title: 'Floated',
html: 'context panel text',
anchor: true,
modal: true,
hideOnMaskTap: true,
listeners: {
show: function(win) {
//Find the mask
var dom = Ext.dom.Query.select('.x-mask');
//store it (search again on hide event doesn't work, don't know why)
mymask = Ext.get(dom[0]);
//add a new class
mymask.addCls('modal_mask');
},
hide: function(win) {
//Remove the class you just add
mymask.removeCls('modal_mask');
}
}
});
Hope that helps!
Have a look at the site below, will delete it later:-
[Career page][1]
On this page, if I come from other website like Facebook/ Linked in, it should look like this:-
![Image 1][2]
And If I visit from the same site, it should be like below:-
here is my JS code related to that. Please suggest what to do:-
function pageLoad() {
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: false
});
$("a#various15").fancybox({
'width': 720,
'height': 390,
'autoScale': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'type': 'iframe',
'speedIn': 600,
'speedOut': 400,
'overlayShow': true,
'overlayOpacity': 0.8,
'overlayColor': '#000',
'padding': '0px',
'onComplete': function () { $('.closer').click(function () { parent.$.fancybox.close(); }) }
});
}
Please suggest what to do
if (document.referrer.indexOf('facebook.com') > -1) {
// do something for visitors from facebook here
}
You can use document.referrer. Here is a contrived example:
$(document).ready(function() {
var referrer = document.referrer;
if(referrer.match(/stackoverflow.com/i)){ // change this to the name of your site
$('#targetDiv').show(); // change this line as needed for you actual page
}
else{
$('#targetDiv2').show(); // remove this line for you actual page
// $('.ui-accordion-header').eq(0).click(); // uncomment this line for your actual page
}
});
.none{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="targetDiv" class="none">You see this, so you came from SO</div>
<div id="targetDiv2" class="none">You see this, so you came from a site other than SO</div>
You just have to check if referrer is from fb || li and open accordion number 1 I guess:
if( document.referer ){
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: 1
} else {
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: false
});
}
Can you please change the following of your code:
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: false
});
with the following (of which host check taken from here):
if( document.referrer.indexOf(location.protocol + "//" + location.host) === 0){
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: false
});
} else{
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: 0
});
}
which checks if the referrer is you own host and activates the first accordion which has the index 0 (in zero based index). Remember to test it on the server.
I have multiple (completely separate) JQuery uses of accordion in my webpage, and have one Javascript function for each occurrence. Am I over complicating this could I simplify the Javascript to have one function that they all use
<script>
$(function () {
$("#accordion0").accordion({
active: false,
collapsible: true,
heightStyle: "content"
});
});</script>
<script>
$(function () {
$("#accordion1").accordion({
active: false,
collapsible: true,
heightStyle: "content"
});
});</script>
<script>
$(function () {
$("#accordion2").accordion({
active: false,
collapsible: true,
heightStyle: "content"
});
});</script>
.................
You could use a class in common with all your html accordion; example:
$ (function () {
$(".class-my-accordion").accordion({
active: false,
collapsible: true,
heightStyle: "content"
});
});
Well, you can group all your selectors into one function, yes:
$("#accordion0, #accordion1, #accordion2").accordion({
active: false,
collapsible: true,
heightStyle: "content"
});
This is my javascript function to open a jquery dialog.
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
How can I hide the part show: 'slide, from IE ?
var options = {
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
};
if ( ! $.browser.msie){
options ['show'] = 'slide';
}
$('#dialog').append(iframe).appendTo("body").dialog(options);
try this
if ( ! $.browser.msie){
$( "#dialog" ).dialog( "option", "show", "slide" )
}
jquery has removed support for jQuery.browser.msie from version >= 1.9
so
var opts = {
autoOpen : false,
modal : true,
resizable : false,
show : 'slide',
width : 800,
height : 700,
close : function() {
}
};
if (!/msie/.test(window.navigator.userAgent)) {
opts.show = 'slide';
}
('#dialog').append(iframe).appendTo("body").dialog(opts);
$('#dialog_click').click("callback", function() {
$('#dialog').dialog('open');
return false;
});
$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
});
if(!$.browser.msie) {
$( "#dialog" ).dialog( "option", "show", "slide" );
}
There are several workarounds for this (conditional comments for the whole script, altering the property later, etc) but noone has posted a solution that does EXACTLY what you asked: excluding a portion of javascript only in IE.
Then take a look at this:
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
/*#cc_on #*/
/*#if (true)
#else #*/
show: 'slide',
/*#end #*/
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
IE won't include show: 'slide',, while non-IE browsers won't read the Conditional Compilation Statements , so the condition will fall in the (not-commented) else part.
Read more on Conditional Compilation Statements
There is several thing you can do.
First there are conditional comments , ie
<!--[if !IE ]>
<script>
$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
</script>
<![endif]-->
Or you can check jquery browser variable , as other guys are pointing.
Also if you are going this way, and you really want to target old version of IE you can use some functions specific to it ( like attachEvent )
I am using the following code to open a modal box when a button is clicked. Works fine in all browsers but IE7 where I get an error.
This is the code. Have I done something wrong???
<script type="text/javascript">
$(document).ready(function(){
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 550,
width: 550,
draggable: true,
resizeable: true,
title: "Invite a friend",
};
$("#invitebox").dialog(dialogOpts); //end dialog
$('#invitebutton').click(
function() {
$("#invitebox").load("widgets/invite_a_friend/index.php", [], function(){
$("#invitebox").dialog("open");
}
);
return false;
}
);
});
</script>
Remove the , at the end after title:
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 550,
width: 550,
draggable: true,
resizeable: true,
title: "Invite a friend", // <-- REMOVE THIS COMMA
};
Also the .load() function takes an object and not array as second argument:
$("#invitebox").load("widgets/invite_a_friend/index.php", { }, function() {
$("#invitebox").dialog("open");
});
Here is the problem, the comma at the end:
title: "Invite a friend",
};
JSLint can tell you whether your code is correct.