I'm trying to customise the Joomla 2.5 Accordion contacts page to add a clickable map to trigger the accordion and I'm struggling. The accordion part works fine, and the map works fine with clickable areas, but I can't link the two.
The mootools accordion script that triggers the accordian is this (pretty standard Joomla contacts page version exept I added 'var OfficeAccordian =' on line 2:
window.addEvent('domready', function(){
var OfficeAccordian = new Fx.Accordion(
$$('div#contact-slider.pane-sliders > .panel > h3.pane-toggler'),
$$('div#contact-slider.pane-sliders > .panel > div.pane-slider'), {
onActive: function(toggler, i) {
toggler.addClass('pane-toggler-down');
toggler.removeClass('pane-toggler');i.addClass('pane-down');
i.removeClass('pane-hide');
Cookie.write('jpanesliders_contact-slider',$$('div#contact-slider.pane-sliders > .panel > h3').indexOf(toggler));
},
onBackground: function(toggler, i) {
toggler.addClass('pane-toggler');
toggler.removeClass('pane-toggler-down');
i.addClass('pane-hide');i.removeClass('pane-down');
if($$('div#contact-slider.pane-sliders > .panel > h3').length==$$('div#contact-slider.pane-sliders > .panel > h3.pane-toggler').length)
Cookie.write('jpanesliders_contact-slider',-1);
},
duration: 300,
opacity: false,
alwaysHide: true
});
});
but the script I need to simulate a click on the accordion trigger when I click a link on the map (standard anchor button in a list) is beyond me. I've had a go at adapting a few examples from various websites, but none have worked. My javascript skills are not good enough yet to know why they aren't working or how to fix them.
(I'm not sure it needs to be mootools as I have mootools & jquery both loaded & working on the site)
The Fx.Accordion has an interface (API of methods the instance exposes so you can control it).
All it takes is reading the manual:
http://mootools.net/docs/more/Fx/Fx.Accordion#Fx-Accordion:display
OfficeAccordian.display(2);
if that is not enough, you read the source code:
https://github.com/mootools/mootools-more/blob/master/Source/Fx/Fx.Accordion.js#L157
this reveals you can pass a second argument to .display as boolean to use fx or not.
p.s. this is not how you spell accordion (OfficeAccordian). :)
Related
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
I am new to JQM and I'm using Phongeap with JQM for a new project.
My javascript is in one single js file and I'm loading the views from multiple html files.
As the transitions of the siede panel are poor, when I change pages via <a href="page2.html"> I tried to to use event listeners for the Menuitems.
function setPanelListeners(){
$('#menu_search').click(function() {
switchPageTo('search.html');
});
$('#menu_schedule').click(function() {
switchPageTo('program.html');
});
$('#menu_news').click(function() {
switchPageTo('news.html');
});
}
I call this function on the pagebeforeshoe event of each page. To fix the transitions to the way I need it, I use this function
// Close Panel then change page
function switchPageTo(url){
$('#menupanel').panel('close');
setTimeout(function() {
$.mobile.changePage( url, { transition: 'fade'} );
},200);
}
So here is the Problem. It actually works fine on the first page. But on the second page the Menuitems won't work, I guess the event listers are not listening for the new panel, because in the html the panel is loaded twice! And the Event listeners only listen for the first panel (from the first page) which is not displayed on the second page.
Any help is appreciated!
Are you adding panel dynamically on the second page? In JQM 1.3 you have to add panel separately to each page, although this restriction will be removed in future versions.
Use event delegation for dynamic panels:
$(document).on('click' ,'#menu_search' function() {
switchPageTo('search.html')
});
Excuse me for asking such a general question. I'm creating a website with Orchard CMS. The website's design and interactivity are critical requirements. I have a navigation menu which has a fixed size(900 px wide), but should be able to adjust as many menu items as possible (I do this manually by modifying the css). I've used a bit of jQuery to create some animations on mouse hovers etc. for the menu. Problem is that the css and jQuery parameters are hard coded. So if a user were to change to add a new menu item, they need to know in advance the number of menu items, and sub items, thus it's not very easy for the average user to customize it which the whole point of a CMS. What is the best way of keeping this menu interactive (with the jQuery animations), and such that the user can be able to add content pages to this menu (as they do with the default navigation menu in orchard) and also user friendly such that the non technical user need to have to mess around with the jQuery and CSS of the menu?
What is the best way of doing this, should I create a module (a navigation menu component?) which will dynamically set the css/jQuery values (width etc.)
UPDATE
Also, right now I have my HTML (my navigation menu, Unorderd List etc.) and its jQuery script reference embedded in my Layout.cshtml, and the style for the navigation menu is in my Site.css in my theme, is this considered bad practice?
I eventually got this done in orchard 1.5 by overriding the Menu.cshtml view, coding some logic to check the number of menu items and then rendering navigation menus with different ID's, based on the number of menu items they contained. I then added different CSS selectors in my Site.css, each with CSS suitable for navigation menus of various sizes. Here is what my Menu.cshtml ended up looking like (this goes in the Views folder of your currently active theme).
#
{
Script.Require("jQuery");
var tag = Tag(Model , "ul");
var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);
}
#{//if the menu contains 3 items, render a nav called 'ThreeItemNav'
if(items.Count == 3){
<nav id="ThreeItemNav">
#tag.StartElement
#* see MenuItem shape template *#
#DisplayChildren(Model)
#tag.EndElement
</nav>
}
else if(items.Count == 4){
<nav id="FourItemNav">
#tag.StartElement
#* see MenuItem shape template *#
#DisplayChildren(Model)
#tag.EndElement
</nav>
}
else if(items.Count == 5){
<nav id="FiveItemNav">
#tag.StartElement
#* see MenuItem shape template *#
#DisplayChildren(Model)
#tag.EndElement
</nav>
}
}
//Include the jQuery to add animations to the navigation menu
#using (Script.Foot())
{
<script type ="text/javascript">
//<![CDATA[
$(document).ready(function () {
//Add your script here
$(" #FiveItemNav li").hover(function () {
//Do something when the sub menu list items are hovered....
});
$(" #FourItemNav li").hover(function () {
//Do something when the sub menu list items are hovered....
});
$(" #ThreeItemNav li").hover(function () {
//Do something when the sub menu list items are hovered....
});
});
//]]>
</script>
}
Note that you need to add CSS selectors in your theme for each nav element (ThreeItemNav, FourItemNav and FiveItemNav), for example in your current themes Site.css:
/*Style the Three Item Navigation menu*/
#ThreeItemNav li
{
background-color:#263A79;
}
#ThreeItemNav a:hover
{
border-right:1px solid #333;
border-left:1px solid #333;
}
#ThreeItemNav > ul li.current
{
background:#5882FA;
}
/*Style the Four Item Navigation menu*/
#FourItemNav li
{
background:#Purple;
}
#FourItemNav a:hover
{
background:Orange;
}
.........more styles
This certainly seems like a long winded approach, but it's the best I could think off so that I can maintain the functionality of the Orchard navigation menu and still style it with CSS and add jQuery animations. I figured an initial development cost was worth adding some powerful capabilities to the navigation menu in the long run. I'd love to hear any suggestions on how to do this in a neater way. Also I would definitely recommend using Orchard 1.5, since it has built in support for creating hierarchical navigation menus.
Checking out the inner workings of Menu.cshtml and MenuItem.cshtml views help a lot in trying to understand how the navigation menus are rendered in Orchard as well as inspecting how the default Theme Machine styles the navigation menu and its various levels/sub menus.
I'm using Magento to build a storefront - I'm not used to Prototype, but that's what they use by default, so I'm trying to play nice. I have used the tabs setup provided in the Modern theme (built by the Magento team), and I've integrated it into my theme and it works great.
Where I need help is in directly linking to a specific tab - I've created a tab to house the product reviews, and that works fine, but there are links higher up on the page that link to reviews - however, they are linking to another page, which I would rather not use. I'm not familiar with the prototype being used, and I don't know what the link would look like to link to the tab - I'd like the experience to be something similar to:
1) Click on the link
2) The reviews tab opens and the page moves you down to it - like a run-of-the-mill anchor.
The href value of the tab is simply:
javascript:void(0);
The javascript that runs the operation is this:
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
}
new Varien.Tabs('.product-tabs');
My guess is that I need to invoke the showContent function and just force it to use the reviews tab, but I'm not quite sure how to do this. If anyone could shed some light on it, I'd appreciate it.
Thanks.
Not entirely the right answer, ie it cheats a bit, but we solved this by using jQuery's 'click()' function to simulate the tab click.
ie
Gave the reviews tab title anchor an id of 'tab-reviews-tab' and in our link at the top of the page added the following JS:
jQuery('#tab-reviews-tab').click();
Obviously it would be silly to include jQuery just for this, but if you're using it for something else already, sticking to what you know can work!
If someone is still interested in a solution, here is a hint to the same question:
souce link http://www.magentocommerce.com/boards/viewthread/59930/#t262411
Hope this can help u.
The answer to your question is on gist and ipaste.
Here's this summary:
You need to save the Varien.Tabs object in a var so replace the new Varien.Tabs('.product-tabs'); with var csTabs = new Varien.Tabs('.product-tabs');
If you are only doing this one time just create link as such:
<a href="#" onclick="javascript:csTabs.showContent($$('#product_tabs_email_or_other_id a')[0]);" >The Link</a>
If you expect to do this often just add a new method to the Varien.Tabs (at line 75)
openTab: function(b) {
var controlledLink = $$("#"+b+" a")[0];
this.showContent(controlledLink);
}
Now your links work like this:
Email
Further Info
I am developing a website that parses rss feeds and displays them based on category. You can view it here: http://vitaminjdesign.com/adrian
I am using tabs to display each category. The tabs use ajax to display a new set of feeds when they are clicked.
I am also using two other scripts- One called equalheights, which re-sizes all of the heights to that of the tallest item. And the other script I am using is called smart columns, which basically resize your columns so it always fills the screen.
The first problem I am having is when you click a new tab (to display feeds within that category). When a new tab is clicked, the console shows a jQuery error:
$(".block").equalHeights is not a function
[Break On This Error] $(".block").equalHeights();
The main problem is that each feed box fills up the entire screen's width (after you click on a tab), even if there are multiple feed boxes in that category.
MY GUESS - although all of the feeds (across all tabs) are loaded on pageload, when a new tab is selected, both jQuery scripts need to be run again. any ideas on how I can make this work properly?
One thing to note - I used the ajaxSuccess method for making equalHeights work on the first page...but it wont work after a tab is clicked.
My jQuery code for the tabs are below:
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
$("#cities li:nth-child(1)").addClass('zebra');
$("#column li ul li:nth-child(6)").addClass('zebra1');
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
$(".block").equalHeights();
return false;
});
Thanks to Macy (see answer below), I have brought my jQuery script to the following: (still does not work)
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
I found some small problems in your code. I am not sure that my suggestions will solve all the problems, but I decide to describe my first results here.
1) You should remove comma before the '}'. Currently the call look like $("#column").sortable({/**/,});
2) The function equalHeight is not jQuery plugin. It is the reason why the call $(".block").equalHeights(); inside your 'click' event handler follows to the error "$(".block").equalHeights is not a function" which you described. You should change the place of the code to equalHeight($(".block")); like you use it on other places.
3) The script http://vitaminjdesign.com/adrian/js/equalHeight.js defines the function equalHeight only and not start any actions. Once be loaded it stay on the page. So you should not load it at the end of every ajax request. So I suggest to reduce the script
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'http://vitaminjdesign.com/adrian/js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
to
$(document).ajaxSuccess(function(){
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
4) I suggest to change the code of http://vitaminjdesign.com/adrian/js/equalHeight.js from
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
to
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
to eliminate the usage of global variables tallest and thisHeight. I recommend you to use JSLint to verify all your JavaScript codes. I find it very helpful.
5) I recommend you to use any XHTML validator to find some small but sometime very important errors in the markup. Try this for example to see some errors. The more you follow the XHTML standards the more is the probability to have the same results of the page in different web browsers. By the way, you can dramatically reduce the number of the errors in your current code if the scripts included in the page will be in the following form
<script type="text/javascript">
//<![CDATA[
/* here is the JavaScript code */
//]]>
</script>
I didn't analysed the full code but I hope that my suggestions will solve at least some of problems which you described in your question.
Essentially, when you add a new element to the document, the equalheights script has not attached its behavior to that new element. So, the "quick fix", is probably to re-embed the equalheights script after an ajax request has completed so that it re-attaches itself to all elements on the page, including the elements you just added.
Before this line: $(".block").equalHeights(); , add a line of script which re-embeds/re-runs your equalheights script.
$.getScript('<the location of your equalHeightsScript>');
$.getScript('<the location of your smartColumnsScript>');
$(".block").equalHeights();
or
var script = document.createElement('script');
script.src = '<the location of your script>';
document.body.appendChild(script);
A better solution would be to upgrade the plugin so it takes advantage of live. However, I'm not up to that at the moment :)
Some Error Here
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
.
.
.
});
Should be re-written like this
$("ul.tabs li").click(function() {
$(this).addClass("active").Siblings("li").removeClass("active");; //Remove any "active" class Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
.
.
.
});
I don't think you need to run the scripts again after the ajax, or at least that's not the "main" problem.
You seem to have some problems in the script smartColumn.js
Right now it seems to only operate on the ul with the id "column" ('#column'), and it is working on the one UL#column you do have, but of course your HTML has many other "columns" all of which have the class "column" ('.column') that you want it to work on as well.
Just to get the beginning of what you are trying to do, change all the selectors in smartColumn.js that say 'ul#column' to say 'ul.column' instead, and then alter the HTML so that the first "column" has a class="column" rather than an id="column".
That should solve the 100% wide columns at least.
That should solve your "Main" Problem. But there are other problems.