When using the jquery fullcalendar plugin (http://arshaw.com/fullcalendar/) with jquery mobile, the prev and next month button icons only show the arrow-up background image, which is the very first icon on the long 256 by 240 .png image file. When I refresh the page in Firefox, the correct arrow east and west show up, yet I lose all other styles including background, themes, etc. Refresh does not work in IE.
I searched high and low for an answer to this relatively minor issue. Here I believe may be the causes:
1. jquery ui and jquery mobile conflict (order of .js and .css files) --I tried all orders to no avail.
2. calling fullcalendar theme on mobile page (inside of page instead of head tags)
3. transition issue from home to specific mobile page
4. pixel size of ui-icon css class (should it be larger than 16px by 16px for mobile?)
5. need of a custom override of jquery ui using the $(document).ready() function.
Please see my included files head code below:
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar/fullcalendar.css'>
<link rel='stylesheet' type='text/css' href='../fullcalendar/demos/cupertino/thememobile.css'>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar/fullcalendar.print.css' media='print'>
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type='text/javascript' src='../fullcalendar/jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/jquery/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/jquery.qtip-1.0.0-rc3.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/calendareventsmobile.js'></script>
Any answer or brainstorming of answers will be very helpful.
Thanks in advance!
Have you tried using the FullCalendar with the theme option set to true? This forces it to use the jQuery UI theme instead of the fullCalendar theme. Maybe the CSS conflicts might go away then.
From the documentation...
A hash must be supplied that maps button names (from the header) to icon strings. The icon strings determine the CSS class that will be used on the button. For example, the string 'circle-triangle-w' will result in the class 'ui-icon-triangle-w'.
I was looking to use ui-icon-carat-1-w and ui-icon-carat-1-e. I found firebug to be very helpful in determining the correct hash value to use to get the proper mapping.
This is an example of what I needed to use.
buttonIcons: {
prev: 'carat-1-w',
next: 'carat-1-e'
},
Related
For the first here for posing a question. I've already learned a lot from the site.
My problem is that i can't get the jQuery UI widget tooltip working on my site.
I'm on joomla 4 with an RSJoomla template (RSJuno).
In my custom.js file i've added this code for diplaying images full size:
//Photos fullscreen
jQuery(document).ready(function(){
jQuery("img").click(function(){
this.requestFullscreen()})});
Works well.
Now i'm trying this code:
//Tooltip on fotos
jQuery(document).ready(function(){
jQuery( "div" ).tooltip({
content: "Awesome title!"
});
});
Not working at all. Content is just a test text! If i use "img" it isn't working either. Nothing shows up.
This code (from internet) as a test is also working well.
(Div and img are both used to test so i'm aware of the difference in the code.
jQuery(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
jQuery( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
jQuery( "div" ).tooltip({
content: "Awesome title!"
//By the way the tooltip is NOT showing the content text//
});
jQuery( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
jQuery( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
jQuery( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
I would like to have a code which integrates this 2 codes into 1 simple one that does the following:
on mouseover displaying tooltip "Click for fullscreen" on tag;
as mouse moves away, hide the tooltip.
Whatever i'm trying in no way i get the tooltip to display, no mather to what i connect it: "img" "div"....etc. And thus combining the 2 leads to nothing.
The big code is working in so far that the css styled tooltip is shown, but at a fixed place (center of the div) and ONLY on a specially created div in the page. NOT on the "img" tag.
If a attach this long code with css to the special created div it's shows only the content of the tag title on the div and not the custom text.
If i delete the title tag from the div nothing shows.
Could it be a conflict with the template code?
I have a RSJoomla template and through custom tags in the template i'm loading the necessary libraries as follows:
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.structure.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.theme.css" rel="stylesheet" />
From inspecting my page i see that this is well loaded:
<link rel="stylesheet" href="/templates/rsjuno/css/custom.css" type="text/css" />
<script src="/templates/rsjuno/js//jquery-ui/jquery-ui.js"></script>
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.structure.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.theme.css" rel="stylesheet" /> </head>
<body class="site">
....
After spending lots of hours i'm out of ideas. Lots of different codes i found on internet for the tooltip didn't work either.
For example (on the youtube video its working well):
jQuery("img").tooltip({
track:true,
content:"Whow"
});
});
I need to use jQuery instead of $ to avoid "$ is not a function" error.
So please help if you can.
Ps i cannot provide a link to the site because its developped on localhost.
Thanks
NEW INFO I've used this working fiddle (https://jsfiddle.net/vinorodrigues/2vnt9a0h/32/) in exact copy on my website and still get a standard layout tooltip. See this screenshot enter image description here
I took a ready-made working example
[working example][1]
and remade it to fit my needs.
[my code][2]
But I do not have the selected item.
[1]: http://jsfiddle.net/tw57m8bx/1/
[2]: http://jsfiddle.net/vipTelnet/m7vx0nuc/2/
If you look at the source of the fiddle, you will notice that the versions of select2 library resource is different.
Version 3.5.2 : http://jsfiddle.net/tw57m8bx/1/
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
Version 4.0.5 : http://jsfiddle.net/vipTelnet/m7vx0nuc/2/
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
Update: Making it work on version 4.0.5
Working fiddle > http://jsfiddle.net/m7vx0nuc/3/
You need to bind data by adding data attribute to select2(). Also added default empty option tag in HTML, else first element is selected by default.
$('#select').select2({
minimumInputLength: 0,
data:lastOptions
});
core-icons contains different iconsets like
icons
av-icons
communication-icons
device-icons
hardware-icons
image-icons
maps-icons
notification-icons
png-icons
social-icons
It's not obvious how to use them.
Here is an overview of the icons contained in paper-elements http://polymer.github.io/core-icons/components/core-icons/demo.html
I created an example that demonstrates how to use them.
<!DOCTYPE html>
<html>
<head>
<title>core-icons</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<!-- choose the name according to the set you want to load - "social-icons" -->
<!-- this is now accessible with a simpler path
<link rel="import" href="packages/core_elements/src/core-icons/iconsets/social-icons.html">
<link rel="import" href="packages/core_elements/core_icons/iconsets/social_icons.html">
this changed again with core-elements 0.2.0+1 -->
<link rel="import" href="packages/core_elements/social_icons.html">
</head>
<body>
<!-- use the icon by setting the `icon` attribute. The value consists of iconsset-id a colon followed by the icon name. -->
<paper-icon-button id="bookmark-button" icon="social:plus-one" style="fill:steelblue;"></paper-icon-button>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
EDIT
You can style the icons from Dart code like
($['bookmark-button'] as dom.Element).querySelector('* /deep/ #icon').style
..setProperty('fill', 'red')
..setProperty('stroke', 'blue')
..setProperty('stroke-with', '3px');
This turned out to be quite a bit tricky because the paper-icon-button has more than one shadowRoot (3 actually) and when I set the style on the <g> element (inside the <core-icon>) it was applied but reverted shortly afterwards for unknown reasons.
I just saw that this doesn't work in Firefox. The polyfill for /deep/ in querySelector() is work in Progress as far as I know. Maybe it will work better as soon as the current Polymer release has been integrated in Polymer.Dart.
This worked in both Dartium and Firefox:
($['bookmark-button'] as dom.Element).shadowRoot.olderShadowRoot.querySelector('#icon').style
..setProperty('fill', 'red')
..setProperty('stroke', 'blue')
..setProperty('stroke-with', '3px');
This solution might break when the implementation of <paper-icon-button> is changed but hopefully in a while the first attempt will work in all browsers soon.
EDIT
Polyfill support for /deep/ in querySelector is included in Polymer.js 0.4.0. Hopefully the next Polymer.dart update includes it as well.
Any object I try to apply the .selectable() I get the following error:
Object doesn't support property or method 'selectable'. Assuming this is happening because the selectable ui feature wasn't downloaded when I made my custom jquery-ui-1.9.2.custom.js script, I opened my jquery-ui-1.9.2.custom.js file and sure enough at the top the selectable feature is not shown
* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.draggable.js, jquery.ui.resizable.js, jquery.ui.button.js, jquery.ui.datepicker.js, jquery.ui.dialog.js, jquery.ui.tooltip.js
I downloaded the full jqueryui (1.9.2) package, opened selectable.js and copied the contentents and pasted them into my custom jquery script. I still get the same error. I tried closing/opening Visual Studio and doing a rebuild.
Here is how I'm attempting to apply the selectable UI property.
$("#myList").selectable(); //apply to <ol> object
Here is how I'm loading the script in my page:
<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.9.2.custom.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Scripts/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
Thank for looking.
I started integrating jquery ui datepicker in my page.
I included the js files:
jquery-1.5.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
and CSS Files:
jquery.ui.datepicker.css
But it resulted out datepicker without the background...
what am i missing on it?
After i manually add :
.ui-datepicker{background-color: silver;}
it shows like:
http://outsourcingnepal.com/general-images/shot1.jpg
Check the datepicker.css if there is style definition for the element with missing background. If not..just check the element in firebug (or similar tool) and add your own style. There probably will be already a class, so just add your style in your stylesheet, or add it into detepicker.css.
Got it solved unpackaing all the files once more... i hope some files were missing
For styling only the DatePicker, these are the necessary stylesheet files:
~/Content/themes/base/jquery.ui.core.css
~/Content/themes/base/jquery.ui.datepicker.css
~/Content/themes/base/jquery.ui.theme.css
or the minified ones:
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.core.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.theme.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.datepicker.min.css" />