My toggle navigation menu is working on a desktop view but when I run this demo on mobile view it does'nt works.
Please find the url : http://dev.genuusdemo.com/msite/index1.html
Please find the code of this :
script :
<script type="text/javascript">
$(function() {
$('#gx-sidemenu').gxSideMenu({
mode: isMobile.any() ? 'tiny' : 'normal', // normal | tiny
interval: 300, // animations' interval
direction: 'left', // left | right
openOnHover: false, // true | false
clickTrigger: true, // true | false
followURLs: true, // true | false
trigger: ".gx-menu-open.list", // class or id of trigger element
startFrom: 60, // start pixel from corner on hover trigger
startClosed: true, // menu opens on document load
scrolling: true, // menu scrollable (iScroll plugin needed!)
urlBase: '/sidemenu/', // document base URL
backText: 'Prev | Back', // Back button text
onOpen: function() { }, // Open callback
onClose: function() { } // Close callback
});
$('pre.snippet').snippet("javascript", { style: 'ide-kdev' });
$('pre.snippet-html').snippet("html", { style: 'ide-kdev' });
});
</script>
Related
I am trying to use method readyCallback() in iFrameResizer, but it does not seem to work. When I add the callback to parent iframe object, it is never called:
iFrameResize({
log : true,
checkOrigin: false,
minHeight : 800,
maxHeight : 4000,
readyCallback: function(){
// (!) never called
console.log('ready parent callback .. ');
},
messageCallback: function(data){
// works OK
console.log('message callback .. ');
console.log(data);
},
initCallback: function(){
// works OK
window.scrollTo(0,0);
alert("OK initiated");
},
resizedCallback : function(info){
// works OK
console.log(info);
scrollTo(0, info.iframe.offsetTop);
},
heightCalculationMethod : 'taggedElement'
}, '#iframe123');
The iframeResizer.contentWindow.js inside iframe element loads and works OK.
Am I missing something? Thank you.
Turns out that method readyCallback was in wrong place. Here is working setup:
Parent page with iframe element:
iFrameResize({
log : true,
checkOrigin: false,
minHeight : 800,
maxHeight : 4000,
messageCallback: function(data){
console.log('message callback .. ');
console.log(data);
// scroll to top edge of iframe element
scrollTo(0, data.iframe.offsetTop);
},
initCallback: function(){
console.log("OK initiated");
window.scrollTo(0,0);
},
resizedCallback : function(info){
console.log(info);
scrollTo(0, info.iframe.offsetTop);
},
heightCalculationMethod : 'taggedElement'
}, '#iframe123');
Inside iframe element with loaded iframeResizer.contentWindow.js:
// solution 1:
window.iFrameResizer = {
readyCallback: function(){
// scroll parent to top edge of iframe element
window.parentIFrame.scrollToOffset(0,0);
}
}
// solution 2:
window.iFrameResizer = {
readyCallback: function(){
if('parentIFrame' in window){
parentIFrame.sendMessage('Loaded iframe ['+window.parentIFrame.getId()+'].');
}
}
}
// load content window at the end
<script src="/js/iframeResizer.contentWindow.js"></script>
i'm using fullcalendar version 3 with external event. and my problem was that wanted to fix dropped point when drag/drop left side item to calendar.
for example, if external "My event 1" drag to "test1 room" (has start:13:00:00/end:17:00:00 time attribute) calendar.
"My event 1" will be on 13:00:00 start and 17:00:00 end time ONLY. never change to another time on "test1 room" row.
$(function() { // document ready
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
now: '2016-01-07',
editable: true, // enable draggable events
droppable: true, // this allows things to be dropped onto the calendar
aspectRatio: 1.8,
scrollTime: '00:00', // undo default 6am scrollTime
header: {
left: 'today prev,next',
center: 'title',
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
},
defaultView: 'timelineDay',
views: {
timelineThreeDays: {
type: 'timeline',
duration: { days: 3 }
}
},
resourceLabelText: 'Rooms',
resources: [
{ id: 'a', title: 'test1 room', start:"2016-01-07T13:00:00",end: '2016-01-07T17:00:00' },
{ id: 'b', title: 'test2 room', eventColor: 'green' },
{ id: 'c', title: 'test3 room', eventColor: 'orange' },
],
events: [
{ id: '1', resourceId: 'b', start: '2016-01-07T02:00:00', end: '2016-01-07T07:00:00', title: 'event 1' }
],
drop: function(date, jsEvent, ui, resourceId) {
console.log('drop', date.format(), resourceId);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventReceive: function(event) { // called when a proper external event is dropped
console.log('eventReceive', event);
},
eventDrop: function(event) { // called when an event (already on the calendar) is moved
console.log('eventDrop', event);
}
});
});
To stop events being dragged around after they're placed on the calendar, you can simply set the editable option:
editable: false
This stops internal dragging/dropping, but doesn't affect external dropping (which is controlled by the "droppable" option).
If you only want this rule to apply to specific events, you can set editable: true in general, but then set editable: false as a property of individual events - this will override the global setting. See https://fullcalendar.io/docs/event_data/Event_Object/ for details of which settings can be over-ridden at the event level.
By default, under the Formatting menu (when the button is clicked), there are these options:
Normal Text
Quote
Code
Header 1
Header ...
Header 5
I would like to only have these options:
Normal Text
Quote
Code
Is there any way to do that? I've been scouring the configuration options and haven't been able to find out how to do it.
Olivérs answer is wrong.
You can easily achieve this by doing the following:
$('#redactor').redactor({
formattingTags: ['p', 'blockquote', 'pre']
});
Demo: http://jsfiddle.net/EkM4A/
Sadly the only way to achieve this is to decorate your redactor instance before init and overwrite the default toolbar setting in redactor.
You can see a working POC here: http://jsfiddle.net/Zmetser/7m3f9/
And the code below:
$(function() {
// Decorate redactor Object before init
$.Redactor.fn = (function () {
var toolbarInitOriginal = this.toolbarInit;
// Create a new toolbarInit method which suits our needs
this.toolbarInit = function (lang) {
// Grab the default toolbar...
var toolbar = toolbarInitOriginal(lang);
// ...and overwrite the formatting dropdown menu
toolbar.formatting.dropdown = {
p: {
title: lang.paragraph,
func: 'formatBlocks'
},
blockquote: {
title: lang.quote,
func: 'formatQuote',
className: 'redactor_format_blockquote'
},
pre: {
title: lang.code,
func: 'formatBlocks',
className: 'redactor_format_pre'
},
};
return toolbar;
};
return this;
}.call($.Redactor.fn));
// Init redactor
$('#redactor').redactor({
buttons: ['link', 'formatting', 'html']
});
});
I am using Twitter Bootstrap v3 to add a 'Invalid login' tooltip to the login button. Here's my code:
$('#login-form').submit(function(event) {
event.preventDefault();
$.post('/user/login', $(this).serialize(), function(data) {
if (data.result == true) {
window.location.replace('/');
} else {
var target = $('#login-form button[type="submit"]');
target.tooltip({
title: 'Invalid login',
placement: 'bottom',
trigger: 'manual',
animation: true
});
target.tooltip('show');
setTimeout(function() {
target.tooltip('destroy');
}, 2000);
}
}, 'json')
});
In particular, I am wondering if there is a better way to close the tooltip. I was hoping that I could configure the tooltip plugin to automatically fade after a few seconds. Alternatively, I tried chaining a .fade(2000) after the call to the 'show' method, but this didn't work.
The above code works, I'm just looking for a more elegant alternative.
You could try put the parameter "delay" when the tooltip initialize
like the following code
target.tooltip({
title: 'Invalid login',
placement: 'bottom',
trigger: 'manual',
animation: true,
delay: { show: 2000, hide: 3000 }
});
I use GMAP3 plugin to render driving direction. And would like to add a clear button so it can be clear but I haven't been able to find the right syntax in GMAP3. Here is the my js code, modified from the sample in gmap3.net. I have markers plotted already and latlng are retreived from plotted markers instead of from clicks position on the map.
function removePath() {
$(mapID).gmap3({
action: 'clear',
name: 'directionRenderer'
// tag: 'path' // works too with tag instead of name
});
function updatePath() {
$(mapID).gmap3({
action: 'getRoute',
options: {
origin: m1.getPosition(),
destination: m2.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function (results) {
if (!results) return;
$(mapID).gmap3({
action: 'setDirections',
directions:results,
});
}
});
};
function updateDirection(mm) { // Directions between m1 and m2
var mmID = $(mm).prop('id');
...
if (mmID == 'clearDirection') {
...
removePath();
return;
};
...
if (m1 && m2) { updatePath(); };
};
function initmap() {
$(mapID).gmap3(
{
action: 'init',
options: defaultMapOptions
},
// add direction renderer to configure options (else, automatically created with default options)
{ action: 'addDirectionsRenderer',
preserveViewport: true,
markerOptions: { visible: false },
options: {draggable:true},
tag: 'path'
},
// add a direction panel
{ action: 'setDirectionsPanel',
id: 'directions'
}
);
};
A is in place in HTML documents as directions panel. It has a a wrapper which is hidden when the route is cleared by using jquery css property change. The wrapper div's display property is changed back to 'block' whenever value is assigned to either m1 or m2.
<body>
...
<div id="direction_container" class="shadowSE">
....
<div id="directions"></div>
....
</div>
</body>
Its absolutely working fine.
$map.gmap3({ action: 'clear', name: 'directionRenderer' });
*Instructions-
If you later draw the route then you must write below code otherwise directions not display.
$map.gmap3({ action: 'addDirectionsRenderer', preserveViewport: true,
markerOptions: { visible: false} },
{ action: 'setDirectionsPanel', id: 'directions' });
Thanks...
Use this:
$(mapID).gmap3({action:"clear", name:"directionRenderer"});
The chosen answer above didn't work for me. I'm unsure if it's version related, but the solution I'm using is more simple:
$(your-selector).gmap3({clear: {}});
Afterwards, you can draw a new route without reconnecting the directions rendered with the map.