I'm using a Wordpress theme that comes with Owl Carousel v.1.3.3 and the slider goes far too fast. I've already tried all the tips I can find but nothing seems to have any effect on the speed whatsoever! I attach my code here, the autoPlaySpeed and autoPlayTimeout are what I've just added from other answers here, but still no change to the speed. Please help!
$.fn.owlCarousel.options = {
items : 5,
itemsCustom : false,
itemsDesktop : [1199, 4],
itemsDesktopSmall : [979, 3],
itemsTablet : [768, 2],
itemsTabletSmall : false,
itemsMobile : [479, 1],
singleItem : false,
itemsScaleUp : false,
slideSpeed : 300,
paginationSpeed : 500,
rewindSpeed : 1000,
autoPlay :true,
autoPlaySpeed: 5000,
autoPlayTimeout: 5000,
stopOnHover : false,
navigation : false,
navigationText : ["prev", "next"],
rewindNav : true,
scrollPerPage : false,
pagination : true,
paginationNumbers : false,
responsive : true,
responsiveRefreshRate : 200,
responsiveBaseWidth : window,
baseClass : "owl-carousel",
theme : "owl-theme",
lazyLoad : false,
lazyFollow : true,
lazyEffect : "fade",
autoHeight : false,
jsonPath : false,
jsonSuccess : false,
dragBeforeAnimFinish : true,
mouseDrag : true,
touchDrag : true,
addClassActive : false,
transitionStyle : false,
beforeUpdate : false,
afterUpdate : false,
beforeInit : false,
afterInit : false,
beforeMove : false,
afterMove : false,
afterAction : false,
startDragging : false,
afterLazyLoad: false
};
To change the slide speed For Owl Carousel v.1.3.3, replace this
autoPlay :true,
with your slide speed
autoPlay :5000,
hope this help.
Related
is it possible to change direction of a splide slider in responsive? when i want to change the direction of the thumnail slider in responsive the slider crash.
var secondarySlider = new Splide("#splidev2", {
direction: "ttb",
type: "loop",
height: "100%",
fixedWidth: 100,
fixedHeight: 100,
isNavigation: true,
gap: 10,
pagination: false,
arrows: true,
focus: "center",
updateOnMove: true,
rewind: false,
breakpoints:{
1199: {
perPage: 2,
gap : '1.5rem',
height : '24rem',
},
991: {
direction: "ltr",
},
}).mount();
var primarySlider = new Splide("#splide", {
type: "fade",
pagination: false,
cover: true,
arrows: false,
});
primarySlider.sync(secondarySlider).mount();
https://splidejs.com/guides/options/#direction
From the given documentation I got this = "You can update responsive options by breakpoints or by passing an object to Splide#options..."
You can use Slide#options, if breakpoints not working.
I am trying to read following json data into a jqgrid.
var myStr = { "version" : 2,
"query" : "java",
"location" : "suwanee, ga",
"dupefilter" : true,
"highlight" : true,
"radius" : 25,
"start" : 1,
"end" : 10,
"totalResults" : 826,
"pageNumber" : 0,
"results" : [
{
"jobtitle" : "Software Development Team Lead Job",
"company" : "GM",
"city" : "Roswell",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Roswell, GA",
"source" : "General Motors",
"date" : "Tue, 24 Dec 2013 08:21:00 GMT",
"snippet" : "principles, techniques and best practices. - Demonstrated expert knowledge in <b>Java<\/b> and\/or .NET. - Demonstrated expert knowledge in building, debugging and... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=778874434418454d&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 34.021976,
"longitude" : -84.35714,
"jobkey" : "778874434418454d",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Roswell, GA",
"formattedRelativeTime" : "1 day ago"
}
,
{
"jobtitle" : "Software Systems Engineer (Java\/J2EE)",
"company" : "Universal Business Solutions",
"city" : "Alpharetta",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Alpharetta, GA",
"source" : "Universal Business Solutions",
"date" : "Tue, 17 Dec 2013 18:37:25 GMT",
"snippet" : "years experience with <b>Java<\/b> & J2EE Must be motivated... environment. Experienced with <b>Java<\/b>, J2EE, Oracle, UNIX, SQL, Unix Shell script, <b>Java<\/b> Script, MVC Desired... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=7066b95f71004292&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 34.074177,
"longitude" : -84.29121,
"jobkey" : "7066b95f71004292",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Alpharetta, GA",
"formattedRelativeTime" : "8 days ago"
}
,
{
"jobtitle" : "Software Engineer",
"company" : "ACI Worldwide",
"city" : "Norcross",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Norcross, GA",
"source" : "ACI Worldwide",
"date" : "Thu, 19 Dec 2013 11:51:00 GMT",
"snippet" : "\u2022 Experienced <b>Java<\/b> engineer for developing commercial... development experience \u2022 2 years of professional <b>Java<\/b> development with 2+ years of J2EE. \u2022 2 years of... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=7ac5988d9e5f0990&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 33.93956,
"longitude" : -84.20879,
"jobkey" : "7ac5988d9e5f0990",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Norcross, GA",
"formattedRelativeTime" : "6 days ago"
}
]
};
$("#myGrid").jqGrid({
//url: "testData.xml",
dataType:"json",
data : myStr,
jsonReader: {
repeatitems: false,
root: "results"
},
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto",
loadonce: true
});
I tried to read the data using jsonreader, set the data type as "json" and root as "results".
There are no data populated in jqgrid, Could anybody educate me, what I am missing here ?
The error in your code there are because of small misunderstanding about the meaning of the options jqGrid. If you define a variable like myStr in your code
var myStr = {
"version" : 2,
...
"results" : [
{
...
}
]
};
you don't use JSON. It's just usage of object literals to create new object. Such syntax is the most simple and effective way to create and initialize an object in JavaScript. Only if properties have special characters it's required to enclose property names in " or '. So the same code can be rewritten as
var myStr = {
version : 2,
...
results : [
{
...
}
]
};
So I wanted to stress that the above don't use JSON at all. The correct value of datatype parameter (not dataType) should be "local" instead of "json". The options jsonReader or loadonce will be ignored in the case. The input data should be array of items specified by data option of jqGrid.
So the fixed code should be like the following
$("#myGrid").jqGrid({
datatype: "local",
data: myStr.results,
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
(see the demo).
If your real code do load the data from the server it should use url parameter. In the case the options jsonReader or loadonce can be used and the code will be like below
$("#myGrid").jqGrid({
url: "Sri2.json",
datatype: "json",
jsonReader: {
repeatitems: false,
root: "results"
},
loadonce: true,
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
(see another demo).
You code have strange properties like onmousedown. If you need to set onmousedown property on some cell you can use cellattr property in colModel. It allows you to set any additional property to <td> element which represent the cell of the grid. For example one more demo uses the following code
function indeed_clk (obj, id) {
alert("onmousedown with id=" + id);
}
$(function () {
var myStr = {
...
"results" : [
{
...
"onmousedown" : "indeed_clk(this, '1050');",
...
}
]
};
$("#myGrid").jqGrid({
datatype: "local",
data: myStr.results,
colNames: ["Trending Jobs"],
colModel: [
{
name: "url",
title: false,
cellattr: function (rowId, cellValue, rawObject) {
if (rawObject.onmousedown) {
return 'onmousedown="' + rawObject.onmousedown + '"';
}
}
}
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
});
It set onmousedown attribute which calls global function indeed_clk. onmousedown will be set on the cells in the column url using cellattr property.
I have to call the EnhancedGrid filter plugin from a function, but in EnhancedGrid the filter plugin has to be declare in order to work with filter.
grid = new EnhancedGrid({
id : 'grid',
store : yourStore,
structure : layout,
rowSelector : '20px',
plugins : {
search : true,
pagination : {
pageSizes : [ "50", "100"],
description : true,
sizeSwitch : true,
pageStepper : true,
gotoButton : true,
maxPageStep : 2,
position : "bottom"
},
filter : {
closeFilterbarButton : true,
ruleCount : 2
itemsName : "rows"
}
}
});
grid.placeAt("myGrid");
grid.startup();
}
});
How can I achieve this?
You can do it this way:
<div data-dojo-type="dijit.form.Button">
filter movies with the letter "T" at the beginn
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
// Filter the movies from the data store:
grid3.filter({Title: "T*"});
</script>
It's a snippet from a dojo Example : https://dojotoolkit.org/reference-guide/1.9/dojox/grid/example_Filtering_data.html
Regards
I'm using jqplot in my website using the following code
$(document).ready(function(){
var xticks = [ '0', '1', '2', '3', '4','5', '6', '7', '8', '9', '10','11', '13','14','15','16','17','18','19','20','21','22','23'];
var data1 = [2,4,6,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,6,3,1,2,2,0,0,0,0,0,0,2,5,6,6,7,6,6,6,5,7,7,6,1,0,0,0,0];
var plot2 = jQuery.jqplot ('chart1', [data1],
{
animate : true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot : true,
seriesDefaults : {
pointLabels : {
show : true,
hideZeros : true,
location : 's',
ypadding : 12
},
renderer : $.jqplot.BarRenderer,
rendererOptions : {
varyBarColor : true,
barPadding : -20
}
},
axes : {
xaxis : {
label : 'X axis',
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
renderer : $.jqplot.CategoryAxisRenderer,
labelRenderer : $.jqplot.CanvasAxisLabelRenderer,
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
ticks : xticks,
tickOptions : {
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
angle : -90,
fontSize : '10pt'
}
},
yaxis : {
min : 0,
//max : 30,
tickInterval:5,
label : 'Y axis',
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
// labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions : {
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
formatString : '%.2f',
fontSize : '10pt'
}
}
},
cursor : {
show : true,
zoom : false,
showTooltip : true,
followMouse : true,
useAxesFormatters : true
/*
* To show both x and y values showTooltipDataPosition :true,
* showVerticalLine:true, useAxesFormatters:true
*/
},
legend : {
renderer : $.jqplot.EnhancedLegendRenderer,
show : true,
showSwatches : true,
fontFamily : 'OpenSans-Regular',
marginTop : '100px',
textColor : '#414141',
rowSpacing : '14px',
border : 'none',
background : 'transparent',
placement : 'outsideGrid'
},
grid : {
background : 'transparent',
gridLineColor : '#c5c5c5'
},
seriesColors : [ '#F6BD0F' ],
series : [ {
seriesColors : [ "#D85252" ],
//label : 's1',
color : [ '#D85252' ]
}, {
seriesColors : [ "#F6BD0F" ],
label : 's2',
color : [ '#F6BD0F' ]
} ],
highlighter : {
show : false
}
}
);
});
It works fine in Firefox and IE9 without any issues as in figure1. But in IE8 it looks very bad as in figure2.
I have included excanvas.js as follows
<script type="text/javascript" language="javascript" src="jQuery/jQplot/excanvas.min.js"></script>
IE9 and Firefox
IE8
Here is the working jsfiddle
Can anyone tell me how can I resolve this issue? What I'm doing wrong here? Any help will be appreciated..
Finally I got the answer after research for a day
The issue was with the background property used in jqplot options.
grid : {
background : 'transparent',
gridLineColor : '#c5c5c5'
}
I fixed it by replacing 'transparent' using 'rgba(255, 255, 255, 0.1)' in my code and it is working in all browsers including IE8. The same thing can be achieved by using background:url('blank.gif')
I got help from the following links
Highcharts chart option backgroundColor:'transparent' showing black on IE 8
IE CSS bug background color transparent behaves differently to background-color
I'm trying to set up tinyMCE so that it would work with google maps iframe. TinyMCE cleanup procedure strips that iframe out.
So i found a solution here and there, that says i need to insert an extend_valid_elements : "iframe", into tinyMCE.init.
But anyway, it will strip out my iframe. I tried adding iframe or iframe[*] or iframe[src|width|height|name|align], but it will not work. If i, however, change cleanup = false, then it doesn't strip out iframe. But i'd rather do it the right way.
My
tinyMCE.init({
theme : "advanced",
mode : "textareas",
editor_selector : "rte",
convert_urls : false,
content_css : "<?php echo $html->url("/css/rte.css") ?>",
plugins : "table, paste, xhtmlxtras, safari",
file_browser_callback : "tinyBrowser",
theme_advanced_buttons1 : "bold,italic,underline,separator,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,sub,sup,link,unlink,image,pastetext, pasteword, selectall, forecolor, backcolor,acronym,del,formatselect,fontsizeselect",
theme_advanced_buttons2 : "tablecontrols,cleanup,removeformat,code",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
paste_auto_cleanup_on_paste : true,
theme_advanced_resizing : false,
handle_event_callback: function CleanupHTML_callback(e)
{
if (e.ctrlKey && e.keyCode == 86 && e.type != "keyup")
{
setTimeout('tinyMCE.execInstanceCommand("'+e.target.editorId+'", "mceCleanup", true)',1);
//return false;
}
return true;
},
force_p_newlines : false,
force_br_newlines : true,
convert_newlines_to_brs : false,
remove_linebreaks : false,
cleanup_on_startup : false,
extend_valid_elements : "iframe[src|width|height|name|align]",
//invalid_elements : "script,onclick,ondblclick,onkeydown,onkeypress,onkeyup,onmousedown,onmousemove,onmouseout,onmouseover,onmouseup,font",
height: "500"
});
You need to set the configuration parameter correctly using the correct name extended_valid_elements, not extend_valid_elements.