I am currently using the REDMOND theme in my application and need to use the THEMEROLLER theme for qtip2 tooltips ONLY. Since I have defined the tooltip as a widget, it should use the themeroller them. What I cannot decide is how & where to add the themeroller css file in my javascript file.
Please help.
The css files in the head section are :
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.19.custom.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.min.css" />
<link rel="stylesheet" type="text/css" href="css/wms11.css" />
The javascript files at the end of my js file are :
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.qtip.min.js" type="text/javascript"></script>
<script src="js/wms11.js" type="text/javascript"></script>
My qtip2 statements are :
$(this).qtip({
content: {
text: function(api) {
return(return_array[POPUP_HTML_STR]);
},
title: {
text: function(api) {
return(qtip_title);
}
}
},
position: {
viewport: $(window)
},
style: {
classes: 'ui-widget ui-tooltip-rounded ui-tooltip-shadow ui-tooltip-dark',
widget: true,
tip: 'top center',
width: 220,
height: 200,
padding: 5,
background: 'black',
textAlign: 'left',
border: {
width: 7,
radius: 5,
color: '#A2D959'
},
tip: 'top center',
},
show: {
ready: true
}
});
As stated by P6345uk you should set the style.def = false to remove any custom styling of qTip2. Worked for me.
$('.selector').qtip({
content: 'I won\'t be styled by the pages Themeroller styles',
style: {
widget: true, // Use the jQuery UI widget classes
def: false // Remove the default styling (usually a good idea, see below)
}
})
Related
I implemented this https://fancyproductdesigner.com/jquery/ which works fine. My query is when I the uploaded images on demo site it fix on the product's shape. For example, When I upload a logo on a cap the logo flexibly fixes on the shape of the cap. But in my integration, this is not working.
my code is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Product Designer</title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- The CSS for the plugin itself - required -->
<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner-all.min.css" />
<!-- Include required jQuery files -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- HTML5 canvas library - required -->
<script src="js/fabric.min.js" type="text/javascript"></script>
<!-- The plugin itself - required -->
<script src="js/FancyProductDesigner-all.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var $yourDesigner = $('#clothing-designer'),
pluginOpts = {
productsJSON: 'json/products.json', //see JSON folder for products sorted in categories
designsJSON: 'json/designs.json', //see JSON folder for designs sorted in categories
stageWidth: 1200,
editorMode: false,
smartGuides: true,
fonts: [{
name: 'Helvetica'
}, {
name: 'Times New Roman'
}, {
name: 'Pacifico',
url: 'Enter_URL_To_Pacifico_TTF'
}, {
name: 'Arial'
}, {
name: 'Lobster',
url: 'google'
}],
customTextParameters: {
colors: false,
removable: true,
resizable: true,
draggable: true,
rotatable: true,
autoCenter: true,
boundingBox: "Base"
},
customImageParameters: {
draggable: true,
removable: true,
resizable: true,
rotatable: true,
colors: '#000',
autoCenter: true,
boundingBox: "Base"
},
actions: {
'top': ['download', 'print', 'snap', 'preview-lightbox'],
'right': ['magnify-glass', 'zoom', 'reset-product', 'qr-code', 'ruler'],
'bottom': ['undo', 'redo'],
'left': ['manage-layers', 'info', 'save', 'load']
}
},
yourDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);
});
</script>
</head>
<body>
<div id="main-container">
<h3 id="clothing">Clothing Designer</h3>
<div id="clothing-designer" class="fpd-container fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left"> </div>
<br />
</div>
</body>
</html>
I'm using Dojo Toolkit 1.12. How can I show a dojox/layout/FloatingPane that moves on a dijit/layout/BorderContainer. The problem is that I do not know where srcNodeRef to locate it so that it can move across the screen. Thank you.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>`
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<title>Prueba</title>
<!-- Estilos -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/resources/dojo.css" media="screen">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojox/layout/resources/FloatingPane.css" media="screen">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojox/layout/resources/ResizeHandle.css" media="screen">
<!-- CSS -->
<style>
body, html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;}
</style>
<!-- Libraries -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js">
</script>
<!-- Dojo -->
<script>
require([
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojox/layout/FloatingPane",
"dojo/domReady!"
], function(
registry,
BorderContainer,
TabContainer,
ContentPane,
FloatingPane) {
//........................................................
var border = new BorderContainer({
design: "headline",
style: "width: 100%; height: 100%; background-color: yellow;",
design: "headline",
liveSplitters: true,
gutters: true
}, "divBody");
//........................................................
border.addChild(
new TabContainer({
region: "center",
id: "tabs",
tabPosition: "top"
})
);
var tabs = registry.byId("tabs");
tabs.addChild(
new ContentPane({
content: "content Tab 1",
title: "Tab 1"
})
);
tabs.addChild(
new ContentPane({
content: "content Tab 2",
title: "Tab 2"
})
);
//........................................................
border.addChild(
new ContentPane({
region: "top",
id: "top",
content: "HEADER"
})
);
//........................................................
border.addChild(
new ContentPane({
region: "left",
id: "left",
content: "LEFT",
splitter: true,
})
);
//........................................................
border.addChild(
new ContentPane({
region: "bottom",
id: "footer",
content: "FOOTER",
splitter: false
})
);
//........................................................
border.startup();
//........................................................
var floating = new FloatingPane({
id: "floating",
title: "A floating pane",
resizable: true,
dockable: true,
style: "position:absolute; top:0; left:0;width:100px; height:100px;"
});
floating.addChild(
new ContentPane({
content: "FLOATING"
})
);
floating.startup();
//........................................................
});
</script>
</head>
<body class="claro">
<div id="divBody"></div>
</body>
</html>
take a look at this example
http://jsfiddle.net/icsteveoh/ADPZS/
FloatingPane has a property 'content' to set whatever the content you need. In this example, content is set as part of declaration i.e. while creating the FloatingPane. If you want to set content dynamically, you can use
dijit.byId('yourfloatingpaneid').set('content',"Hello again");
Hope this helps
I have the following code, which work fine locally. Iwas trying to change the bootstrap theme to one of the jqgrid themes. I looked online for theme changing and it didnt seem to work .
Here is my code below and fiddle link:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../js/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../js/jquery.jqGrid.min.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid-bootstrap.css" />
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jLp data </title>
</head>
<body>
<div style="margin-left:20px">
<table id="nplGrid"></table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#nplGrid").jqGrid({
url: 'json/data-bcp.json',
datatype: "json",
colModel: [
{ label: 'Id', name: 'Id', width: 45 },
{ label: 'Symbol', name: 'Symbol', width: 90 },
{ label: 'Quantity', name: 'Quantity', width: 100 },
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{ label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
{ label: 'Value', name: 'Value', width: 80, sorttype: 'integer' },
{ label: 'Pledged', name: 'Pledged', width: 80, sorttype: 'integer' }
],
loadonce: true,
viewrecords: true,
footerrow: true,
caption: "<b>Brokerage Client Portfolio</b>",
hidegrid:false,
userDataOnFooter: true, // use the userData parameter of the JSON response to display data on footer
height: 170,
altRows: true,
rowNum: 150
});
});
</script>
</body>
</html>
I have a very curious bug or error with JQuery with JqGrid. The error is when I try to show the data in JSON in the table, if you show me the data, if the table does not show more than 20 columns and have more than 200 data, the code is presented like this:
The Header is:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/ecmascript" src="jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/ecmascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<!-- Continuacion de JqGrid-->
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid-bootstrap.css" />
The JS is:
<script>
$.jgrid.defaults.width = 780;
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<div style="margin-left:20px">
<table id="jqGrid4"></table>
<div id="jqGridPager4"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid4").jqGrid({
url: 'http://localhost/fileupload/api/Proveedor',
mtype: "GET",
styleUI : 'Bootstrap',
datatype: "JSON",
colModel: [
{ label: 'id', name: 'id', key: true, width: 75 },
{ label: 'Name', name: 'Name', width: 150 },
{ label: 'RFC', name: 'RFC', width: 150 },
{ label: 'Company Name', name: 'CompanyName', width: 150 },
{ label:'DateCreation', name: 'DateCreation', width: 150 }
],
viewrecords: true,
height: 250,
rowNum: 20,
pager: "#jqGridPager4",
sortable: true
});
});
</script>
In the image you can see that the table only shows 20 rows, but I have 207 rows. I need the arrows to move and show more rows, but I can't. Any ideas? I don't want to put rowNum: +20 or more because I don't like that, I need to move with the arrows but I can't.
Do you implemented server-side paging on the server or the server returnes all 207 rows at once and you want to use client-side paging? In the last case you should add loadonce: true option. 207 rows is not much and thus I would recommend you to use loadonce: true option in the scenario. You will don't need to write long code on the server side and can directly use sorting, paging and filtering/searching (see filterToolbar or advanced searching) of local data.
I have the error
Uncaught TypeError: Object # has no method 'fancybox'
in my JS console on this website http://www.e-fashion-awards.com/
As you can see, I include jquery.fancybox.js after jquery.min.js and I include jquery only once (saw in other topics).
Here is the piece of buggy code including the js files includes and the fancybox call :
<link rel='stylesheet' id='fancybox-css' href='http://www.e-fashion-awards.com/wordpress/wp-content/plugins/fancybox-for-wordpress/fancybox/fancybox.css?ver=3.1.2' type='text/css' media='all' />
<script type='text/javascript' src='http://www.e-fashion-awards.com/wordpress/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.1.2'></script>
<script type='text/javascript' src='http://www.e-fashion-awards.com/wordpress/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.4'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.e-fashion-awards.com/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.e-fashion-awards.com/wordpress/wp-includes/wlwmanifest.xml" />
<link rel='index' title='E-Fashion Awards – Concours Jeunes Créateurs' href='http://www.e-fashion-awards.com/' />
<meta name="generator" content="WordPress 3.1.2" />
<!-- Start Of Script Generated By cforms v11.7.3 [Oliver Seidel | www.deliciousdays.com] -->
<link rel="stylesheet" type="text/css" href="http://www.e-fashion-awards.com/wordpress/wp-content/plugins/cforms/styling/cforms.css" />
<script type="text/javascript" src="http://www.e-fashion-awards.com/wordpress/wp-content/plugins/cforms/js/cforms.js"></script>
<!-- End Of Script Generated By cforms -->
<!-- Fancybox for WordPress v3.0.1 -->
<script type="text/javascript">
jQuery(function(){
jQuery.fn.getTitle = function() { // Copy the title of every IMG tag and add it to its parent A so that fancybox can show titles
var arr = jQuery("a.fancybox");
jQuery.each(arr, function() {
var title = jQuery(this).children("img").attr("title");
jQuery(this).attr('title',title);
})
}
// Supported file extensions
var thumbnails = jQuery("a:has(img)").filter( function() { return /(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) });
thumbnails.addClass("fancybox").attr("rel","fancybox").getTitle();
jQuery("a.fancybox").fancybox({
'cyclic': false,
'autoScale': true,
'padding': 1,
'opacity': true,
'speedIn': 500,
'speedOut': 500,
'changeSpeed': 300,
'overlayShow': true,
'overlayOpacity': "0.8",
'overlayColor': "#000000",
'titleShow': true,
'titlePosition': 'inside',
'enableEscapeButton': true,
'showCloseButton': false,
'showNavArrows': true,
'hideOnOverlayClick': true,
'hideOnContentClick': true,
'width': 560,
'height': 340,
'transitionIn': "fade",
'transitionOut': "fade",
'centerOnScroll': true
});
So I really don't know where my error come from...
Any idea ?
try
if (thumbnails.length>0) thumbnails.fancybox(//...
or $(".fancybox") if thumbnails is not good enough for fancybox
since in fact i don't see any links to any image on homepage, it could be the reason
I could't see your js, but this error look like you are calling the fancybox this way:
object.fancybox()
and the correct way is:
$(object).fancybox()