i have a Wierd action here, i am using Meteor 0.7 (latest version), and i want to create a layout for my application where i have a menu on the left and content on the right, and i want it to be resizable, so i used Jquery UI and created teh following code.
<template name="layout">
{{> header }}
<div class="container">
<div class="report-tree">
{{> report_tree }}
</div>
<div class="content">
{{{ yield }}}
</div>
</div>
</template>
also i created this function on Meteor Client,
Template.report_tree.rendered = function (){
console.log("report_tree is rendered")
$("li.parent_li i").attr('class','glyphicon glyphicon-plus-sign');
$("li.parent_li ul li").hide();
$(".report-tree").resizable({
handles : 'e',
minWidth: '50',
maxWidth: '350',
resize: function (){
$(".content").width($(this).parent().width() - $(this).width() - 30)
}
});
$("#datepicker").datepicker();
}
the functionality is okay and reveything works fine, however when just click on an link inside my app, i can see that
console.log("report_tree is rendered")
is rendered & the date pickers is working fine, but the resizable function is not called and the div is not aboe to resize, if i clicked on teh refresh button then everything is working back again.
i dont know why this is happening and whether i need to hook my script on a different event or what ?
Problem: When I activate jQueryUI tooltip it prevents another script on the page from working.
Description: I have a floating button on a page:
<div id="buttonTOC">
Table Of Contents
</div><!-- End button <div> -->
This is used by the following script to open a hidden div:
jQuery(document).ready(function($){
$("div#buttonTOC").click(function() {
$("div#table-of-contents").animate({height:'toggle'},500);
});
});
This works correctly but if I add a script to use tooltips then it stops functioning and nothing happens on click. The tooltip does work as expected.
I've tried some experiments to get this working including the following attempt to disable 'tooltip' on the div in question but this doesn't make any difference.
jQuery(function($) {
$( 'a#buttonText' ).tooltip({
track: true
});
$('#buttonTOC *[title]').tooltip('disable');
});
I would suspect a conflict between the scripts but then again I assume that something like a tooltip would be able to work regardless of the presence of other scripts.
I'd appreciate any guidance on how to implement this successfully.
Thanks
Your code has a typo:
$( 'p#buttonText' ).tooltip({
track: true
});
It should be a#buttonText, not p
Aside from that, there seems to be no problem with the script.
I try to make the items of a list draggable, but it doesn't work. jQuery doesn't seem to add the ui-draggable class, or maybe Angular removes it.
Javascript
$('.results_video').draggable({
});
HTML
<div class="results_video" ng-repeat="video in results.list">
{{video.title}}
</div>
Note that if I just write the following html, it works
<div class="results_video"></div>
Any suggestions?
I have found the solution. I need to make these divs draggable after they have been loaded. In my case:
var VideoCtrl = function ($scope){
$scope.$watch('search', function(){
//Some code that updates the divs
$('.results_video').draggable();
});
};
In my mobile app, using jQuery Mobile...
I would like to make a simple button execute a simple javascript function on click. No page transitions, nothing special like that.
I understood I can eliminate the page transitions by doing return false or preventDefault()
But the problem is the button sticks with the "active" state, i.e. highlighted blue if you use the general theme. I'm wondering how I can remove that after click (or tap, etc).
Thanks.
You can disable the 'highlighted blue'-state in the 'mobileinit'-event before loading jQueryMobile-script:
<head>
<script>
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'unused';
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
Now, when you click on a link, no class will be added after the click is performed. You will still have the 'hoover' and 'down' classes.
Update:
This question and the hacks suggested are now a bit outdated. jQuery mobile handles buttons quite a bit differently than 3 years ago and also, jQuery mobile now has several different definitions of "button". If you want to do what the OP was looking for, you might now be able to avoid the issue by using this:
Step 1:
<button class="ui-btn myButton">Button</button>
Alternatively, you could also use jQuery mobile input buttons:
<form>
<input value="Button One" type="button" class="myButton">
<input value="Button Two" type="button" class="myButton2">
</form>
Step 2:
Then your standard jquery on callback:
$(".myButton").on("tap", function(e) {
// do your thing
});
If you are using a button or a tab, or whatever, that has the "active" class applied to it (the default is ui-btn-active), the old answer may still be useful to someone. Also, here is a fiddle demonstrating the code below.
Selectively removing active state:
As demonstrated in another answer, you can disable the active state for all buttons on all pages. If that is acceptable for the project in question, that is the appropriate (and simpler) solution. However, if you want to disable the active state for some buttons while preserving active states for others, you can use this method.
Step 1:
$(document).bind('mobileinit', function() {
$(document).on('tap', function(e) {
$('.activeOnce').removeClass($.mobile.activeBtnClass);
});
});
Step 2:
Then add the activeOnce class (or whatever you want to call it - it's a custom class) to the buttons that you don't want to highlight when clicking.
And as is usual when binding anything to mobileinit, be sure you place your bindings - and perhaps better, all your javascript code - below the jQuery script and above the jQuery-mobile script.
<script src="js/jquery.js"></script>
<script src="js/my_script.js"></script>
<script src="js/jquery.mobile.js"></script>
Do NOT set the activeBtnClass to '' as suggested, this will cause errors when closing dialogs and the pageLoading function.
The method described does work, but cannot be set to null, the activeBtnClass variable is used as a selector, so set it to a non-existent class to get the same effect without the error.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'aBtnSelector';
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
This works well to remove the highlight from the buttons while keeping the active state on other elements.
you can just do it via css instead of java:
eg: (you get the idea)
#cart #item_options .ui-btn-active, #cart #item_options .ui-btn-hover-d, #cart #item_options .ui-btn-up-d, #cart #item_options .ui-link-inherit{
background:inherit;
color:inherit;
text-shadow:inherit;
}
What I do is force the buttons to revert to inactive state before a page changes.
//force menu buttons to revert to inactive state
$( '.menu-btn' ).on('touchend', function() {
$(this).removeClass("ui-btn-active");
});
If you want to support non touch devices you should add timeout.
$('.btn' ).on('touchend click', function() {
var self = this;
setTimeout(function() {
$(self).removeClass("ui-btn-active");
},
0);
});
I have spent the good part of a day and night finding the answer to this problem mainly occurring on an android running phonegap. Instead of the standard JQM buttons I am using custom images with :active state in CSS. After following the link to the next page, then clicking back, the button would just stay in the :active state. I have tried adding classes and removing classes and various other suggestions and nothing has worked.
So I came up with my own little fix which works a treat and may help anyone else that is sitting here stumped. I simply call this snippet of code on 'pagecontainerchange' using data.toPage[0].id to only call it on the page where the active state stuck is occurring. Just make sure to wrap your buttons in a div, in my case called "themenu".
function ResetMenu() {
var menuHtml = $("#themenu").html();
$("#themenu").empty().html(menuHtml).trigger("create");
}
This works for a button in the JqueryMobile headerTab
<style>
.Foo {
color: #FFF !important;
background: #347b68 !important;
}
</style>
<div id="headerTab" data-id="headerTab" data-role="navbar">
<ul id="header_tabs">
<li>name
</li>
</ul>
</div>
I am using the new v3 of the Google Maps API. Basically the issue I have is that I have a Google Map within jQuery UI Tabs. The map is not in the first tab, so you have to click the tab to view the map, but it does not always render correctly. I.e. sometimes the map images are not correctly placed.
I had this problem when I was using v2 of the API, but I managed to resolve the problem by initializing my Map like this:
map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});
Unfortunately that doesn't work in v3. I had a look at the suggestions in this thread: Problems with Google Maps API v3 + jQuery UI Tabs
Nothing really worked for me, but I used one of the workarounds in that I initialize the map function on tab load:
$(function()
{
$("#tabs-container").tabs({show: function(event, ui)
{
if(ui.panel.id == "viewmap")
{
mapiInitialize();
}
}});
});
This is all good but I much rather prefer for the map to be "there" when the user clicks on the tab. It sometimes takes a few seconds for the map to load up and all the user see's in that time is a plain gray background - some sort of loading indicator might have helped.
So does anybody have any suggestions? My markup and CSS is as follows:
<div id="tabs-container">
<ul>
<li><span>Details</span></li>
<li><span>Location Map</span></li>
<li><span>Reviews (<?php echo $numrows; ?>)</span></li>
</ul>
<div id="details"><?php echo $details; ?></div>
<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;">
<div id="map" style="height: 340px;"></div>
</div>
<div id="reviews"><?php echo $reviews; ?></div>
</div><!-- end tab-container -->
Try this when you are initializing your jQuery UI tabs:
$("#tabs-container").tabs({
show: function(event, ui) {
google.maps.event.trigger(map, 'resize');
}
});
Note: You will have to initialize the map before you initialize the tabs.
Once you switch to the tab that has the map call google.maps.events.trigger(map, 'resize'); that should then make it display correctly.
just use
map.setZoom( map.getZoom() );