I have created a simple .toggle script on one page to toggle a DIV. But when I put this exact same script on another page to toggle another DIV the second page script fails... I have tried multiple fixes but nothing works
Here is the script I am using on both pages The IDs are different but the script is the same
<script>
$(document).bind('pageinit', function() {
$('#slick-toggle').live('tap', function(event) {
$("#menu_box").toggle(400);
});
});
</script>
Any help would be greatly appreciated
Capt. Crunch
You may try the following:
<script>
$( document ).on( 'pageinit',function(event){
$('#slick-toggle').on('tap', function(event) {
$("#menu_box").toggle(400);
});
});
</script>
Hope this helps, let me know about your result.
Related
Note: JS/Jquery noob alert (yes, me)
There seems to be a conflict between the following two plugins:
TableSorter (2.9.1)
bootstrap-popover.js v2.2.1
The plugins work as they should separately, but when together, the popovers don't work. I've tried moving the calls to the popover script (and its initialization) before any other plugins, but no dice. I have a feeling the tablesorter script is somehow removing the titles from the DOM (another subject I know little about) before the popover script can load, but no dice.
In my HTML
<script src="../../js/jquery-1.8.2.min.js"></script>
<script src="../../js/jquery.tablesorter.js"></script>
<script src="../../js/jquery.tablesorter.pager.js"></script>
<script src="../../js/tooltips-popovers.js"></script>
<script>
$(function(){
$("#stats").tablesorter();
});
</script>
<script>
$("a[rel=popover]").popover({html:true,trigger:'hover'});
</script>
<script> /* Initiate pager */
$(function(){
var pagerOptions = {
container: $(".pager"),
};
$("table")
.tablesorterPager(pagerOptions);
});
</script>
Make sure you are initializing the popover script within a document ready event.
$(function(){
$("a[rel=popover]").popover({html:true,trigger:'hover'});
$("#stats")
.tablesorter()
.tablesorterPager({
container: $(".pager")
})
});
If that doesn't work, I can only guess that the popover links are inside the table? If so, they are added and removed dynamically, when sorting the table, so they might need to be added through a delegated event, the code above may not work in that case.
Update: As stated, the popup links are within the th, which I assume are in the thead? If so, try this code:
$(function(){
$("#stats")
.tablesorter({
initialized: function(table){
$("a[rel=popover]").popover({html:true,trigger:'hover'});
}
})
.tablesorterPager({
container: $(".pager")
})
});
I'm new to Plone and jQueryUI, and have not been able to get any jQueryUI working on a Plone page.
I installed Plone 4 (4.1.4 41143) and jQueryUI 1.8.16 (http://plone.org/products/collective.js.jqueryui),
Under Zope Management Interface > portal_javascripts, collective.js.jqueryui.custom.min.js is present and enabled.
To try to implement the example from http://jqueryui.com/demos/button/, I placed in the body text of a Plone page:
<script type="text/javascript">
jQuery({function($) {
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
<DIV class=demo>
<BUTTON type=submit>A button element</BUTTON> <INPUT value="A submit button" type=submit> An anchor
</DIV><!-- End demo -->
but the resulting page does not show the expected result.
I've tried replacing "jQuery" in the code above with "$", "collective.js.jqueryui.custom.min", but nothing has worked yet.
I was able to get some jQueryUI working outside of Plone, but would be interested in knowing how to use it within Plone. Any help appreciated.
The content of your script tags is probably being deleted by Plone's HTML filtering.
You can change that in "Site Setup", "HTML Filtering". (The dialog there is confusing, you have to click two buttons. First remove from 'nasty tags', then 'save' at the bottom of page.)
Be aware though, that there are good security reasons for not allowing users to use script, embed and other tags. It can lead to all kind of trouble, for instance when they are also allowed in comments, or less experienced users copy/paste dangerous code.
If you're just practicing, and not putting your site on the big bad Internet, it can be fine, but if you start deploying a real site it is much better to put script stuff into page templates of your own file-based add-on product.
Your syntax within the script tag is incorrect. Try this:
jQuery(function($) {
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
})($);
Yes, you may need to allow script tags as described above, but the example still did not work for me until I replaced the word jQuery with the $ sign, at least when using collective.js.jqueryui 1.8.16.9 on Plone 4.2.1.1.
<script>
$(function() {
$( "#progressbar1" ).progressbar();
$( "#slider" ).slider();
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
Putting ($) just before the semicolon on the line above also worked but I saw no difference.
The script worked on a file system page template even when script was included in the "nasty tags" list. Also, the script can be inserted into the document's head with the following in a page template:
<metal:slot fill-slot="javascript_head_slot">
<script>
$(function() {
$( "#slider" ).slider();
$( "#progressbar1" ).progressbar();
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
</metal:slot>
(I'd love to hear if there is a more appropriate prefix, but I don't really know javascript.)
I've just had a similar issue trying to get my scripts and jquery UI to work with a plone/zope setup. The solution was to register them in the javascript registry (/portal_javascripts).
The scripts themselves were added to /portal_skins/custom which is also where the homepage I was working on resides.
Script tags are filtered out from the source as already mentioned above, and the scripts from the registry automatically added instead.
Keep in mind also that order is important in the javascript registry.
Hope this is of some help to other users who come across this question,.
I am trying to use quickSearch from http://lomalogue.com/jquery/quicksearch/ website. I don't know how to hook to the table so I hoping someone could be kind enough to help me here. I am using VS 2010 MVC 3, in C#, ADO.NET. Thanks in advance. I had a look at related question on the website, if there is a technical gitch? Is there alternative solution? Thanks in advance.
View file Index.cshtml looks like this...
Edited
<script type="text/javascript">
$(function () {
$("table.tablesorter").tablesorter({ widthFixed: true, widgets: ['zebra'],
sortList: [[0, 0]] })
.tablesorterPager({ container: $("#pager"), size: $(".pagesize
option:selected").val() });
});
</script>
<script type="text/javascript">
$(function ()
{
$('input#search').quicksearch('table tbody tr', {selector:'th'});
}
);
</script>
</p>
<table class="tablesorter">
Also it could solve any code organisation problems if you are to wrap the JQuery statement in this
$(document).ready(function() {
$('input#search').quicksearch('table tbody tr', { selector: 'th' });
});
Also the table quick search plugin i use is JQuery table search plugin, it works well and if you just take a quick look at the demo it is rather easy to implement and does not clash with most other JQuery table plugins.
While I haven't used QuickSearch before, and I'm not sure if it'll solve all of your problems, but as a start it appears that you've put your first script element too early in your document.
You need to put it after the other script elements.
this:
<script type="text/javascript">
$('input#search').quicksearch('table tbody tr', { selector: 'th' });
</script>
should appear after the the jquery script, and the quicksearch script elements. If you include it before, the browser doesn't know what $ and $(selector).quicksearch is.
btw: this:'input#search' selector is not needed.
you can use the #search selector to same effect, becuase searching by id is a one command in JS.
I am using jquery-ui to implement tabs.
However, I need to use it more than one on the same page.
but jquery uses the id "tabs" (as opposed to class or something), so it only works for the first instance.
Could you change the tabs prefix?
$( ".selector" ).tabs({ idPrefix: 'ui-tabs-primary' });
Other than that, it seemed to work for me out of the box.
Another way is:
$(document).ready(function() {
$("#tabs1").tabs();
$("#tabs2").tabs();
});
maybe not the best way, but I worked for two tabs
first tab
$(function(){
var options = {
event:'mouseover',
selected:0
};
$("#tabs").tabs(options);
});
<div id="tabs">.....</div>
second tabs
$(function(){
var options = {
event:'mouseover',
selected:0
};
$(".tabs").tabs(options);
});
<div class="tabs">.....</div>
$(document).ready(function()
$("#tabs1, #tabs2").tabs();
});
$(document).ready(function()
$("#tabs1, #tabs2").tabs();
});
It works perfect! You can add the tabs you want.
$( "#tabs, #tabs1, #tabs2" ).tabs();
Thank you very much user3152277!
I have a page that loads and after it loads, it pulls in a list of LIs to populate a news feed.
<li>quick view</li>
<li>quick view</li>
<li>quick view</li>
I'm trying to get fancy box to trigger when a user clicks on quick view but haven't had any luck. Any Ideas?
$(document).ready(function() {
$('.quickview').fancybox();
});
also tried:
$(document).ready(function() {
$('a.quickview').live('click', function() {
$(this).fancybox();
});
});
http://fancybox.net/
Thanks for any ideas...
Old question, but might be useful for future searchers.
My preferred solution is to fire fancybox manually from within the live event, eg:
$('.lightbox').live('click', function() {
$this = $(this);
$.fancybox({
height: '100%',
href: $this.attr('href'),
type: 'iframe',
width: '100%'
});
return false;
});
EDIT: From jQuery 1.7 live() is deprecated and on() should be used instead. See http://api.jquery.com/live/ for more info.
this should work after every ajax request
$(document).ajaxStop(function() {
$("#whatever").fancybox();
});
The problems is to attach fancybox into AJAX loaded element, right?
I got same problems and I found this solution.
I copy paste it here, see the original bug report for more info:
$.fn.fancybox = function(options) {
$(this)
.die('click.fb')
.live('click.fb', function(e) {
$(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
e.preventDefault();
[...]
Credit goes to jeff.gran.
Since .on is now recommended over .live, and after reading over the documentation on delegated events, here's a solution I came up with (assuming your elements have a class of 'trigger-modal'):
$(document).on('click', '.trigger-modal', function() {
// remove the class to ensure this will only run once
$(this).removeClass('trigger-modal');
// now attach fancybox and click to open it
$(this).fancybox().click();
// prevent default action
return false;
});
From my understanding of Fancybox, the call to fancybox() simple attaches the plugin to the selected element. Calling fancybox on a click event won't open anything.
I think you just need to add
$(li_element_that_you_create).fancybox();
to the code that creates the new LI elements in your list
EDIT
If you're using load, then you would do something like:
$('#ul_id_goes_here').load('source/of/news.feed', function() {
$('.quickview').fancybox();
});