My problem is that tooltips are not hiding after the cursor is moved away from the text with tooltip. You can check this page for an example of this problem:
http://federationgenealogie.qc.ca/nous-contacter (which is an simple com_contacts page)
But the problem persists throughout the website.
I've tried to the a template override of the com_contacts and to change the way tool-tips are handled using: http://docs.joomla.org/How_to_add_tooltips_to_your_Joomla!_website
$toolTipArray = array('className' => 'mytooltipclass', 'showDelay'=>'500',
'hideDelay'=>'500', 'fixed'=>true,
'onShow'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(0,1)}",
'onHide'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(1,0)}");
JHTML::_('behavior.tooltip', '.hasTip', $toolTipArray); ?>
Only the 'fixed'=>true parameter works, so I get a feeling this kind of works. But since all other parameters are not working, this is not a solution.
I've also tried to make my own tooltip.js file containing:
window.addEvent('domready', function(){
//do your tips stuff in here...
var zoomTip = new Tips($$('.hasTip'), {
className: 'mytooltipclass', //this is the prefix for the CSS class
offsets: {
'x': 20, //default is 16
'y': 30 //default is 16
},
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity',
{duration: 1000, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(0,.8);
},
onHide: function(toolTip) {
this.fx.start(.8,0);
}
});
});
But I only get a tooltip that looks like an html alt, and changing my css files with according class names does not work.
Using a tooltip extension is not the solution because I need the default registration and contact page of joomla to work. And they both use class="hasTip"and changing this would require me to do some hacking which I can not do for durability reasons.
Using firebug and chrome, it does not seems like there is a conflict between javascripts.
Any ideas?
Related
I'm using the Bootstrap Carousel feature. On initial load of the page the Carousel next/prev controls work perfectly however when I simpy reload the page these controls no longer respond to clicks even though the interval for "auto" rotating the slides that I've configured continues to work.
I've done alot of research trying to troubleshoot this problems..including reviewing probably 30+ stackoverflow postings on Bootstrap Carousel but none of them offered any solutions for me. After two days of researching this problem I'm still stumped.
Environment/setup:
My browser is Chrome
Libraries included in the following order: a)jQuery 2.1.3, b)Bootstrap CSS 3.3.5, c)Bootsrap JS 3.3.5
Running in Ruby on Rails 4.2 environment
My solution is a pure bootstrap solution (e.g., no special JS other than including variants of $('#carousel-generic-example).carousel() type statement per examples I've seen online..apparently no change in behavior with or without this statement).
I'm a bit puzzled as to why it works properly on initial load but not on subsequent reloads. Perhaps something isn't being loaded properly when I do a re-load of the web page??? Maybe there is some behavior within Rails that is causing this behavior?
If anyone has any theories as to what might be causing this behavior I'd love to hear it (even if you don't have time to dig into the code). Or if you have any specific ideas on what I might be able to do troubleshoot this problem.
There is a lot of relevant code associated with my solution...rather than trying to copy and paste it all in this post I think the most effective and efficient way of "sharing" it with you is to point you to my public Github account where the code is located and provide a map to the relevant files within the project.
First the full set of code can be found on my Github account at: gitHub site
Within this project here is where you can find the relevant sections of code:
app/views/application.html.erb : List of external libraries (e.g., jQuery, bootstrap files, etc.)
app/views/portfolio_items/show.html.erb : HTML for page including Carousel
app/assets/javascripts/jet.js : see what I tried lines 17-20, 199-202. I'm not sure if I really need to include javascript as it didn't really seem to affect the behavior of the solution. So I ultimately commented it out.
app/assets/stylesheets/jet.css.erb : Lines 2332-2354
Note 1: you'll see that in my javascript file I'm using both $(window).load(function ()... and `$(document).ready(function() {' functions. I have to admit that I'm a bit fuzzy on what these two functions do other than generally make sure that the items on the page load before the javascript starts to run. I leveraged parts of my template from a theme and I noticed that they used both of these functions in their theme so I don't think this is the cause of my issues...but thought I would reference it just in case.
Note 2: I'm not sure it is relevant but I'm also using another Carousel solution (caroufredsel) on the same page with the Bootstrap Carousel. I don't think there is any conflict as the theme I borrowed from did the same thing...but I thought I would mention it.
UPDATE: I've continued to try and resolve my issue (i.e., Bootstrap Carousel next/prev buttons don't advance images) and stumbled upon something interesting that could be the key to fixing my issue. Specifically
When I "close" the $(document).ready" statement immediately as follows:
'$(document).ready(function() {});'
in my javascript "app/assets/javascripts/jet.js" the Bootstrap Carousel behaves as I would expect (prev/next controls advance images when clicked on).
Unfortunately making the change breaks the other carousel functionality (caroufredsel) at the bottom of the web page (i.e., instead of only showing 3 elements at a time in caroufredsel it shows all of the items and the controls for caroufredsel then don't work). I really need to wrap other jQuery code in the $(document).ready functionality...but when I do the Bootstrap prev/next controls don't work properly.
Anybody have any suggestions on what is going on here and how I could fix it?
Here is the full version of the jet.js file:
function scroll_to(clicked_link, nav_height) {
var element_class = clicked_link.attr('href').replace('#', '.');
var scroll_to = 0;
if(element_class != '.top-content') {
element_class += '-container';
scroll_to = $(element_class).offset().top - nav_height;
}
if($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({scrollTop: scroll_to}, 1000);
}
}
$(document).ready(function() {
// Bootstrap Carousel -- Tried each of the following lines but neither of them helped
// $('#carousel-generic-example').carousel()
// $('.carousel').carousel()
// $('#carousel-generic-example').carousel()});
// {
// 'prev'
// 'next'
// pause: true,
// interval: false,
// keyboard: true
// }
// jQuery('#carousel-generic-example').carousel();
// Pretty photo script
$("a[data-rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square',
social_tools: false,
hook: 'data-rel'
});
// ------------------------------------------------------------------------------------------
// Code below attempted to dynamically change glyphicons used on web page separator
// to avoid having to distinct CSS code for every separator (e.g., blog-separator, project-separator, etc)
// Unfortunately I couldn't get this to work...this code displays the character string
// for the blog glyphicon (i.e., e043) rather than the actual glyphicon. StackOverflow (http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-such-as-before-and-after-using-jquery?lq=1) from Blazemonger (#3) suggest it may only work for strings (maybe not hex values)
// So I'm assuming i can't dynamically insert glyphicons.
// ------------------------------------------------------------------------------------------
// var regExp = /\#([a-z]+)/;
//
// $(".menu-items a").on('click', function () {
// var href = $(this).attr('href');
// var matches = regExp.exec(href);
// switch(matches[1]) {
// case "home":
// alert(href);
//
// break;
// case "about":
// alert(href);
// break;
// case "projects":
// alert(href);
// break;
// case "blog":
// $('.separator-line').attr('data-content', '\e043');
// // $(this).attr('data-content', '\e043');
// // $(".separator-line::after.content").attr('glyphicon-code',"\e043");
// var separatorCode = $(this).attr('data-content', '\e043').val();
// alert(separatorCode);
// break;
// case "contact":
// alert(href)
// break;
// }
// });
// -------------------------------------------------------------------------------
// Portfolio Javascript to load images
// var $container = $('.container');
//
// $container.imagesLoaded( function() {
// $container.masonry({
// itemSelector : '.post-box',
// columnWidth : '.post-box',
// transitionDuration : 0
// });
// });
$(".truncateIt").dotdotdot({
// configuration goes here
/* The text to add as ellipsis. */
ellipsis : '... ',
/* How to cut off the text/html: 'word'/'letter'/'children' */
wrap : 'word',
/* Wrap-option fallback to 'letter' for long words */
fallbackToLetter: true,
/* jQuery-selector for the element to keep and put after the ellipsis. */
after : 'a.next',
/* Whether to update the ellipsis: true/'window' */
watch : false,
/* Optionally set a max-height, if null, the height will be measured. */
height : 60,
/* Deviation for the height-option. */
tolerance : 0,
/* Callback function that is fired after the ellipsis is added,
receives two parameters: isTruncated(boolean), orgContent(string). */
callback : function( isTruncated, orgContent ) {},
lastCharacter : {
/* Remove these characters from the end of the truncated text. */
remove : [ ' ', ',', ';', '.', '!', '?' ],
/* Don't add an ellipsis if this array contains
the last character of the truncated text. */
noEllipsis : []
}
});
// Scroll location for buttons on banner page
$('a.scroll-link').on('click', function(e) {
e.preventDefault();
scroll_to($(this), $('nav').outerHeight());
});
// Link and activate WOW.js
new WOW().init();
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
// Smooth scrolling logic
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
$(".cnbox").each(function () {
var nheight = $(this).find(".nbox").height();
$(this).find(".cbox").css("height", nheight + 50);
});
}); // /document.ready()
var caroufredsel = function () {
$('#caroufredsel-portfolio-container').carouFredSel({
responsive: true,
scroll: 1,
circular: false,
infinite: false,
items: {
visible: {
min: 1,
max: 3
}
},
prev: '#portfolio-prev',
next: '#portfolio-next',
auto: {
play: false
}
});
$('#caroufredsel-blog-posts-container').carouFredSel({
responsive: true,
scroll: 1,
circular: false,
infinite: false,
items: {
visible: {
min: 1,
max: 3
}
},
prev: '#blog-posts-prev',
next: '#blog-posts-next',
auto: {
play: false
}
});
};
// Isotope Portfolio
var $container = $('.portfolio-container');
var $blogcontainer = $('.posts-wrap');
var $filter = $('.portfolio-filter');
$(window).load(function () {
// Bootstrap Carousel -- Tried each of the following lines but neither of them helped
// jQuery('.carousel').carousel();
// jQuery('#carousel-generic-example').carousel();
caroufredsel();
// Initialize Isotope
$container.isotope({
itemSelector: '.portfolio-item-wrapper'
});
$blogcontainer.isotope({
itemSelector: '.article-wrap'
});
$('.portfolio-filter a').click(function () {
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$filter.find('a').click(function () {
$filter.find('a').parent().removeClass('active');
$(this).parent().addClass('active');
});
});
$(window).smartresize(function () {
$container.isotope('reLayout');
$blogcontainer.isotope('reLayout');
});
$(window).resize(function () {
caroufredsel();
});
Cheers.
After much trial and error I found the solution through trial and error. As it turns out the $(document).ready(function() { had to be closed (i.e., }); immediately before the Smooth Scrolling logic (i.e., code that starts with $('a[href*=#]:not([href=#])').click(function() {).
I'm not completely sure why the "close" has to be placed there and not after the Smooth scrolling logic.
If anyone has an explanation I'd love to hear why...As I mentioned I discovered the solution largely by trial and error.
Bootstrap needs normally a JQuery file to overcome this error. So, better embed it in your file and it works when online.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I created a plugin with a custom dialog window.
CKEDITOR.plugins.add('imggallery',
{
init: function (editor) {
var pluginName = 'imggallery';
editor.ui.addButton('Image',
{
label: 'Add image',
command: 'OpenWindow',
icon: CKEDITOR.plugins.getPath('imggallery') + 'lightbulb.gif'
});
editor.addCommand('OpenWindow', new CKEDITOR.dialogCommand('simpleLinkDialog'));
var html2 = "<h1>This is a heading</h1>";
CKEDITOR.dialog.add('simpleLinkDialog', function (editor) {
return {
title: 'LinkProperties',
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'general',
label: 'Settings',
elements:
[
{
type: 'html',
html: html2
}
]
}
]
};
});
}
});
My question is: Is it possible to somehow display ASP.MVC view in window content?
When I assign html2 to elements property the text is shown without formatting (plain text).
Are you sure it's plain text and not a H1 tag that is formatted to look like plain text? There's a big difference :). The CKE dialogs reset most of the standard browser styles so that elements appear like plain text, even though they are not.
As for the MVC view, I would recommend that you add an iframe within the CKE dialog and display the page normally there. Then you can control or get/set values from the iframe using JavaScript. It will be a bit tricky, but should work.
var html2 = '<iframe id="DialogIframe" src="/MyController/MyView?foo=bar"></iframe>';
The other option is to use something like jQuery to $.get() the HTML and then use it, should be relatively simple if you have worked with ajax before. If not, here's a good chance to start! :)
How to correctly validate option value that uses Select2? I have a problem when some value is set before changing to any other. It looks correctly, but validation error is shown until I'll change value. Thank you for any help.
Try this solution.
How to make jQuery validation engine works well for select2()?
In select2.js file
Find this (Line 341)
if (this.indexOf("select2-") !== 0) {
And replace with
if (this.indexOf("select2-") !== 0 && this !== "validate[required]") {
I had the same problem. So in select2.min.js find this strokes (should be 2 strokes in script):
D(this.container,this.opts.element,this.opts.adaptContainerCssClass)
and add this code right after stroke you've found
,this.container.removeClass("validate[required]")
this should solve your problem.
add this css to your head tag.
.has-error {
border-color: #dd4b39 !important;
}
and this is how i am calling select2 for Jquery validation engine.
$("#form").validate( {
ignore: ".ignore, .select2-input",
rules: {
txtproduct: "required",
txtwarehouse: "required",
//txtdescription: "required",
txtquantity: {required:true,number:true},
txtrate: {required:true,number:true},
txtdiscounttype: "required",
txtdiscount: {required:true,number:true},
txtamount: {required:true,number:true},
},
highlight: function ( element, errorClass, validClass ) {
$(element).addClass("has-error");
if($(element).hasClass('select2-hidden-accessible'))
{
$(element).next().find("[role=combobox]").addClass('has-error');
}
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass("has-error");
if($(element).hasClass('select2-hidden-accessible'))
{
$(element).next().find("[role=combobox]").removeClass('has-error');
}
}
} );
}
Select2 library make the original selector hidden, and validation engine can not work for hidden element, so first is make the visible, then the validation engine can see it. The second is we need to make the selector element hidden for us, there are about 2 ways to do, such as set it’s opacity into “0”, or make it’s height/width as “0px”, actually we need both.
Below is the code example:
$("select").select2();
$.each($(".select2-container"), function (i, n) {
$(n).next().show().fadeTo(0, 0).height("0px").css("left", "auto"); // make the original select visible for validation engine and hidden for us
$(n).prepend($(n).next());
$(n).delay(500).queue(function () {
$(this).removeClass("validate[required]"); //remove the class name from select2 container(div), so that validation engine dose not validate it
$(this).dequeue();
});
});
Reference: http://wangweiqiang.net/how-to-make-jquery-validation-engine-works-well-for-select2/
I'm having a strange problem with the jquery dialog popup that I'm hoping someone here can help. The pop up codes looks like below. It works fine except for one thing. When the pop-up is displayed, it will sometimes push the background content down by about the height of the the dialog window. Is there a way to prevent this from happenning?
$("#searchPopUp").dialog({
modal: true,
bgiframe: false,
autoOpen: false,
resizable: true,
position:{ my: "center", at: "center", of: window },
title: 'Choose one search criteria and<br/>populate the corresponding field below:',
width: 400,
close: function( event, ui ) {},
buttons: {
"Search": function() {
$("#viewDevicesSearchForm\\:searchCommandLink").click();
},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
This is because jquery sets position to relative, and then moves the popup to the right place using top and left. I found two ways to fix the problem:
1) The easier of the two: set margin-bottom of the dialog container to negative its height.
popup.dialog({
...other options...,
open : function() {
popup.css('margin-bottom', 0 - popup.height());
},
});
2) For the dialog container, set the position to absolute and adjust the top and left. To put it in the right place, add the offset position of where it is getting placed to the top value that jquery set. The calculation is similar for left.This should do it, but different parameters to the dialog may require different calculations.
I'm using jQuery UI Select Menu and occasionally have some issues.
This is located at the top left of my users' pages. Using the "dropdown/address" type, sometimes (seemingly random), the dropdown opens UP instead of DOWN, and you can't select any options in it except the first one because it's all "above" the screen.
Anyone know of a setting/option in there to force it to open down? Thanks!
update.... 11/23/11 1:11pm est
Here is some code of the call:
$(function(){
$('select#selectionA').selectmenu({
style:'dropdown',
menuWidth: 220,
positionOptions: {
collision: 'none'
},
format: addressFormatting
});
});
The plugin uses the Position utility of the jQuery UI library. If you look at the default options in the source of the plugin, there is a positionOptions property that is used in the function _refreshPosition():
options: {
transferClasses: true,
typeAhead: 1000,
style: 'dropdown',
positionOptions: {
my: "left top",
at: "left bottom",
offset: null
},
width: null,
menuWidth: null,
handleWidth: 26,
maxHeight: null,
icons: null,
format: null,
bgImage: function() {},
wrapperElement: "<div />"
}
_refreshPosition: function() {
var o = this.options;
// if its a pop-up we need to calculate the position of the selected li
if ( o.style == "popup" && !o.positionOptions.offset ) {
var selected = this._selectedOptionLi();
var _offset = "0 " + ( this.list.offset().top - selected.offset().top - ( this.newelement.outerHeight() + selected.outerHeight() ) / 2);
}
// update zIndex if jQuery UI is able to process
this.listWrap
.zIndex( this.element.zIndex() + 1 )
.position({
// set options for position plugin
of: o.positionOptions.of || this.newelement,
my: o.positionOptions.my,
at: o.positionOptions.at,
offset: o.positionOptions.offset || _offset,
collision: o.positionOptions.collision || 'flip'
});
}
You can see it uses a default value 'flip' if none is provided for the collision option of the position utility which is. According to jQuery UI documentation:
flip: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back.
fit: so the element keeps in the desired direction, but is re-positioned so it fits.
none: not do collision detection.
So i guess you could pass an option when initializing the plugin to define none for the collision option:
$('select').selectmenu({
positionOptions: {
collision: 'none'
}
});
Have not tested yet, this is just by looking at the code.
Edit following comment
I've noticed that the version of the javascript available on github and the one used on the plugin website are not the same. I don't know which one you are using but the one used on the website does not have a positionOptions option actually, so it has no effect to specify it when calling selectmenu().
It seems it's not possible to link directly to the javascript on the site so here's some code to illustrate:
defaults: {
transferClasses: true,
style: 'popup',
width: null,
menuWidth: null,
handleWidth: 26,
maxHeight: null,
icons: null,
format: null
}
_refreshPosition: function(){
//set left value
this.list.css('left', this.newelement.offset().left);
//set top value
var menuTop = this.newelement.offset().top;
var scrolledAmt = this.list[0].scrollTop;
this.list.find('li:lt('+this._selectedIndex()+')').each(function(){
scrolledAmt -= $(this).outerHeight();
});
if(this.newelement.is('.'+this.widgetBaseClass+'-popup')){
menuTop+=scrolledAmt;
this.list.css('top', menuTop);
}
else {
menuTop += this.newelement.height();
this.list.css('top', menuTop);
}
}
I was able to make it work as I first described with the version from github. In my opinion it is a more recent/complete version. Besides it was updated a few days ago.
I have created a small test page with two selects. I've changed for both the position for the dropdown to show above.
The first one does not specify the collision option, thus 'flip' is used and the dropdown displays below because there is not enough space above.
The second has 'none' specified and the dropdown shows above even if there is not enough space.
I've put the small test project on my dropbox.
I'm the maintainer of the Selectmenu plugin. There are currently three versions, please see the wiki for more information: https://github.com/fnagel/jquery-ui/wiki/Selectmenu
I assume you're using my fork. The collision problem could be related to this fix https://github.com/fnagel/jquery-ui/pull/255, please try the latest version.
To force a scrollbar use option maxHeight.