Working with JQuery UI - Accordion Panels

Two questions related to the above:
How can I edit the "grey" bar that appears (in Live view) at the top of the Content panel?  I am trying to put in a table into the content panel and have to put in at least 2-3 extra lines to make sure the table does not sit on top of the grey area - I would like to either change the grey to white so that it doesn't show, or get rid of it all together.
I have successfully wiped out the Accordion code a few times over the last few days - without planning on doing that.  It appears to happen when I add in a hyperlink in the tables I am working on.  It just simply disappears and I am left with just a plan HTML page with text and tables and no accordions.
Help !
Thanks
Geraldine

Switch to code view.   You can't do much with Design View alone.  That's why your code is getting wiped out.
Nancy O.

Similar Messages

  • Slideshow Image Order of Go AND Problem with Sizing an Accordion Panel

    SLIDESHOW Is there a way to set the start, middle, and end in a slideshow? I have tried arranging the position of the triggers (nothing happened); and moving the targets in the layers panel (again, nothing happened). I would like the slideshow to begin and end with specific slides.
    ACCORDION PANEL Will not allow me to size it smaller than 962 pixels. The content area of the accordion panel is filled with one slide show per panel or tab, and I've checked all of the elements within the slideshow to make sure nothing exceeds 960 pixels. Nothing I can find exceeds 960 pixels, but when I remove all the elements from the content area, BOOM, I can make the panel any width I want.

    Slide show sorting:
    No, Mylenium, you are definitly wrong, You can choose any image order you want within slideshows:
    1. Make thumbnail temporarily visible and drag the thumnail to the position you want.
    or
    2. Identify the slides in layers panel and drag their panel entries to the position you want.
    Accordion panel:
    You can choose whatever size you want – even with a slideshow within:
    You have to make sure, that all element of the slideshow (caption, prev, next, counter) fit within the accordion panel. And – since the single accordeon panels don’t allow individual sizes – you have to make sure, that the content of every(!) accordeon panel does not exceed the size you want.

  • Working with the Spry Accordion widget

    This question was posted in response to the following article: http://help.adobe.com/en_US/dreamweaver/cs/using/WS6689349F-7E48-4bbe-AABA-B0267E5047BAa.h tml

    I added an accordion widget and it works on one site page while same code won't work on another page.
    It works here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now/K-5th-Grades.aspx
    Does not work here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now.aspx
    Yet both pages have identical code (with absolute links to the CSS and JS files).
    Can anyone shed some light on a solution?

  • Outlook 2010 not working with I cloud control panel.

    Using:
    Windows 7 PC
    Outlook 2010
    Problem free use untill now.
    As of a 4 days ago my icloud control panel stopped syncing with my tasks, contacts and calenders to my Icloud account I am using as metioned outlook 2010 , I dont even see the I cloud sycn/refresh button located in the tool bar in outlook 2010. I have been using this plug in for nearly a year with out any problems untill now.
    My Email works just fine.
    I have tried signing in and out of I cloud, uninstalling the icloud conroll panel, using the repair function, uninstalling the Out 2010 non of which have helped.
    ha anyone else had this problem or have an idea on how to resolve it?
    Thanks

    Why are you running Pocket Mirror, do you have a Palm device?
    Uninstall Pocket Mirror, delete the 2 Pocket Mirror calendars, ignore 'My Calendar' the iCloud calendar is the one to use.
    If you do not uninstall Pocket Mirror the calendars will keep recreating themselves

  • Will the new mac mini work with the older Flat panel iMac globe speakers?

    I am thinking it might be time to upgrade my 800mhz FP 17", and since i have an extra 22" monitor laying around being unused, i thought the Mac mini would be a drop in replacement...but then i thought about the imac FP speakers and i would like to keep using them...is anyone using these speakers with the mac mini?

    The Apple 'Pro speakers' that were designed by Apple and Harman Kardon, use a proprietary 2.5mm mini jack connector and they would need an adapter to work.
    Years ago there was a product called the 'iFire' that allowed those speakers to be used with other macs with a firewire port ..... Here's a site that I found that has more information than you'll need to know about the speakers and the adapter: http://maczealots.com/reviews/ifire/
    At the time, the pro speakers technology was pretty cool ... combining power and digital audio into the one cable. I still think they look striking....
    I did a bit of snooping around and couldn't find the adapter for sale (aside from a used one on Amazon for $199 ouch) .... I believe it has been discontinued.
    I think you'll have to follow another route.....

  • AddEventListener don`t work with FlashPlayer on AE panels?

    Hello!
    Example of my script:
    var AEPanel = this;
    var flsMv = File(File($.fileName).parent.parent.absoluteURI + "/transimages/BoxBlurFade3.swf");
    myFLPL = AEPanel.add("FlashPlayer", [10, 10, 80, 66 ], flsMv);
    myFLPL.addEventListener ('click', onScriptButtonClick);
    function onScriptButtonClick()
    var scriptFile = File(File($.fileName).parent.parent.absoluteURI + "/Change Render Locations.jsx");
    scriptFile.open();
    eval(scriptFile.read());
    scriptFile.close();
    So.. Then i click to my swf nothing happens. It`s my mistake in sintax, or in AE this feature don`t work?
    If first. Please tell me correct syntax.
    If second. Could you suggest how else I can implement the interaction integrated into the panel FlashPlayer and AE?
    Thank you very much.

    I found what this script, work correctly in Bridge, Illustrator, ExtendSript Toolkit(ofcause for it i little change the first string). And it dont work in Photoshop x64, and ofcause, as i say it dont work in AE.
    I guess this is due to 64-bit architecture. May be i`m wrong....
    Anyway, i would ask the developers to take these small but very unpleasant shortcomings in future versions. And.. maybe somebody can suggest how else I can implement the interaction between integrated into the panel FlashPlayer and AE?

  • New themes in APEX 4 not working with JQuery tabs

    Hi,
    JQuery tabs only showed on themes 13, 15, 18, 20.
    When I swicth to other themes, its not displayed like tabs

    Hi,
    you can simplify the the usage of jQuery tabs in APEX 4.0. You don't have to create hard coded JavaScript code for each page where you want to use them. Just use the new "Sub Region" feature and a corresponding region template.
    Here is what you have to do:
    1) Create a new template of type "Region" (create one from scratch)
    a) Name: jQuery Tabs
    b) Template Class: Custom 1
    c) Template:
    <div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
    #BODY##SUB_REGION_HEADERS##SUB_REGIONS#
    </div>
    <link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" type="text/css" />
    <script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    apex.jQuery(function() {
      apex.jQuery("##REGION_STATIC_ID#").tabs();
    </script>d) Sub Regions - Header Template:
    <ul>#ENTRIES#</ul>e) Sub Regions - Header Entry Template:
    <li><a href="##REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION_TITLE#</a></li>f) Sub Regions - Template:
    <div id="#REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION#</div>2) On the page where you want to have jQuery tabs, add a new "HTML" region which acts as the container for the "tabs". Set the region template to your new "jQuery tabs" template.
    3) Create as many sub regions (that are the actual tabs). It's just important that you set the "Parent Region" to your container region you just created before. As region template I would pick "No Template" or any other template you want to have.
    That's it. As you can see now from the region structure it's very obvious for any developer developer what regions are part of the jQuery tabs.
    Regards
    Patrick

  • General search form with JQuery not working

    Hi,
    I tried to use jquery to submit a search form because I need some checking before submit. However,  it did not go to search results page, but went to home page instead.
    Here is my html:
    <form name="catsearchform96767" id="generalSearchForm" method="post">
        <p><label style="opacity: 1;" for="f-search">Search</label> <input type="text" name="CAT_Search" id="f-search" /> <button type="submit">GO</button></p>
    </form>
    Javascript:
    $('#generalSearchForm').submit(function(){
         $(this).attr('action', '/Default.aspx?SiteSearchID=1060&amp;ID=/search-results');
         $(this).unbind().submit();
         return false;                                         
    It does not work with JQuery. But when I moved form action url from jquery to html, it worked. Any ideas? Cheers.

    Hi David,
    Below is the complete code I have used to load the current user to the people picker in SharePoint 2013.
    $(document).ready(function(){
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadCurrentUser);
    function LoadCurrentUser() {
    var context = SP.ClientContext.get_current();
    var siteColl = context.get_site();
    var web = siteColl.get_rootWeb();
    this._currentUser = web.get_currentUser();
    context.load(this._currentUser);
    context.executeQueryAsync(Function.createDelegate(this, SetPickersToCurrentUser), Function.createDelegate(this, LoadUserfailed));
    function LoadUserfailed() {
    alert('failed');
    function SetPickersToCurrentUser()
    var loginName = this._currentUser.get_title();
    SetPeoplePicker('Order Team', loginName);
    function SetPeoplePicker(fieldName, userAccountName) {
    var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + fieldName + "']");
    var peoplePickerEditor = peoplePickerDiv.find("[title='" + fieldName + "']");
    var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
    peoplePickerEditor.val(userAccountName);
    spPeoplePicker.AddUnresolvedUserFromEditor(true);
    Let me know if you have any questions. I will help you out!
    -Praveen.
    ASP.NET and SharePoint developer
    Blog: http://praveenbattula.blogspot.com
    Please click "Propose As Answer" if a post solves your problem or "Vote As Helpful" if a post has been useful to you.

  • Strange issue with Spry Accordion Panels

    Hi, I'm having some strange issues with the Spry Accordion
    Panels.
    Here is the page:
    http://www.bellaclientcenter.com/browncollege/aboutus.html
    For some reason when I preview this message it adds extra
    characters to the url above, so just delete those off to see the
    correct url.
    The only browser this does NOT happen in is safari, I'm
    seeing it all of my other browsers. You'll notice when you first
    load up the page, you'll see that the active panel header
    background is green, and the non active is a dark grey. But when
    you click one of the other panels they all turn a strange neon blue
    color. This is very apparent in firefox.
    Any thoughts on this? I've attached the spry css code in case
    the problem is there.
    thanks so much!!
    Jeff

    That is because your page is currently invalid. And renders in IE quirksmode..
    <base href="http://www.industrialwebsearch.com/">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    So make sure your page is valid, and the animations will go smooth in ie

  • Dock Menu With jquery

    Hi,
    i am new with jQuery.How work with Jquery.
    i am using Apex 3.2 Ver.
    if you have any demmy applicatyion with code .please refer me.
    i want to creted an Dock menu Using jquery in apex 3.2.
    How can i do this.
    Thanks
    Edited by: 805629 on Mar 29, 2011 4:40 AM

    Hi Vee,
    Actully today i have see this link .
    http://actionet.homelinux.net/htmldb/f?p=100:52:2145432616736079::NO:::
    So i want to use jquery to improve my applicaion Standard.But i don't use jquery before so i need some tutorials how to use jquery in apex in 3.2 Ver .
    How can i do this.
    Thanks

  • Is the Accordion Panel Capable of Holding a Gallery (with multiple pages)?

    I'm trying to create a website similar to this: http://www.christianschmidt.com/ using the Accordion Panel. Can the panel's content panel hold javascript? I've tried several types of javascript based galleries and nothing seems to work correctly..
    the site I'm working on: www.anhstudio.com/sample
    if you have any suggestions on what javascripts I should use/work, let me know - thanks.

    I have spent a lot of time on this, mainly because the problems crops up every now and again. Unfortunately it goes above my ancient head and I have only managed to come up with a very partial solution. In the following, I have taken all of the links to JS files and moved them down to the bottom of the document.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="../SpryAssets/SpryAccordion.js"></script>
    <script src="../js/jquery.ui.widget.js"></script>
    <script src="../SpryAssets/SpryDOMUtils.js"></script>
    <script src="../js/jquery.smoothDivScroll-1.1-min.js"></script>
    <script>
    var nav = new Spry.Widget.Accordion("nav", {defaultPanel: -1});
    Spry.$$('.AccordionPanelTab').addEventListener('click',function(){
        Spry.$$(".AccordionPanelOpen").forEach(function() {
            $("div#makeMeScrollable").smoothDivScroll({
                autoScroll: "onstart",
                autoScrollDirection: "backandforth",
                autoScrollStep: 1,
                autoScrollInterval: 12,   
                startAtElementId: "startAtMe",
                visibleHotSpots: "always"
    </script>
    If you click the first tab first, you will see it working. Alas, if you happen to click any other tab first, it will not work.
    HELP ARNOUT KAZEMIER!!!
    Apology for the outburst. Getting closer though.
    Gramps

  • Spry accordion panel not lining up with top of viewport in FF3.5

    I have created a new web page using spry accordion for the first time on my site. In IE8 all works perfectly - opening and closing and moving between tabs is smoothly done. My first tab opens a very long panel (way over the web browser's height), and scrolling down through the text brings us to the second tab. I disabled fixed panel heights  - these expand fully when the relevent header is clicked. Clicking the second tab in IE8 closes the first panel smoothly, opens the second panel smoothly and leaves the browser sitting so the 2nd tab is in line with the top of the browser window. Perfect!
    In FF3.5, following the same routine, with the first panel open, and scrolling down to the 2nd tab - click this and it closes/opens the panels, but is very jerky doing this and you are left with the browser window looking at the very bottom of the web page, instead of at the top of the panel.
    I'd appreciate any advice on this before I give up and move to JQuery. Is this a bug?
    **UPDATE** I tried Jquery and the results are worse! It doesnt even line up in IE8.
    Please feel free to check out the code here:
    http://www.pjamedia.com/?page=modeladvice
    Any help would be very much appreciated.
    Thanks, Paul A

    so take an anchor at the begining of the Accordian panle, link the <a> tag to the anchor point.
    <script type="text/javascript">
    function goToAnchor() {
    location.href = "#unilist";
    </script>
    paste this script in <head> tag.
    <a name="unilist" id="unilist"></a> // add an anchor tag before the accordion panel.
                      <div id="Accordion1" class="Accordion">
                        <div class="AccordionPanel">
                          <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, Ohio*</a></div>
                          <div class="AccordionPanelContent">content</div></div>
      <div class="AccordionPanel">
                          <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, oiowa*</a></div>
                          <div class="AccordionPanelContent">content</div></div>
    </div>

  • Anchor links to accordion panels not working properly across browsers

    Hi everyone,
    I need some help to figure out why my anchor links  to specific accordion panels on another page are not working properly  across browsers.
    I have a Map page which has tooltips on  mouseover on the site markers. 15 of the tooltips have "Click here for  information" anchor links (although only 14 are currently linked) which,  in theory, would take you to the Nurseries page where the specified  accordion panel would be opened with the nursery entry appearing at the  top of the new browser window.
    Here are the links to the Map page and Nurseries page, respectively:
    www.alegriadesignstudio.com/RFRI/map_v6.html
    www.alegriadesignstudio.com/RFRI/nurseries_v6.html
    I've  tested the anchor links on IE, Firefox, Google Chrome, and Safari, and  have received varying results. In most cases, the anchor links worked  perfectly on two of the browsers, while on the other browsers, the  correct accordion panel is opened but the nursery entry does not appear  at the top of the new browser window. Anchor links using Safari and  Google Chrome fared better (10 out of 14 links worked properly, and  8/14, respectively), whereas when using Firefox and IE, only 3 anchor  links worked properly. The target audience for this website will be  using IE and Firefox, so I  would appreciate any help to figure out how to tweak the code so that  the most, if not all, anchor links work properly on these two browsers  in particular.
    Here's an anchor link which worked perfectly in  IE, GC, and Safari, but in FF, the entry did not appear at the top of  the new browser window.
    www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem
    http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem [To access the anchor link on the Map page, mouseover the third green  dot from the top of the map (Tooltip--Location: Mangatarem) and then  click on "Click here for information."]
    Here's a sample anchor link in which the entry did not appear at the  top of the new browser window in any of the 4 browsers:
    www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel
    http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel [To access the anchor link on the Map page, go to "Mindanao" at the  bottom of the map and mouseover the fourth green  dot below the word "Mindanao" (Tooltip--LOCATION:        Brgys. Amabel, Bongolanon, Imamaling, & Manobisa; Magpet;        North Cotabato) and then  click on "Click here for information."]
    Here's a sample anchor  link in which the anchor link worked properly in GC and Safari, but the  entry didn't appear at the top of the browser window in IE and FF:
    www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar
    http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar [To access the anchor link on the Map page, go to the small island  north and a bit west of "Mindanao" which is called "Bohol" and mouseover  the fourth green  dot below the word "Mindanao" (Tooltip--LOCATION: Bilar; Bohol) and then   click on the first "Click here for information."]
    Many thanks in  advance for your assistance!
    Joy

    Hi everyone,
    I'm still trying to figure out how to resolve the problem of anchor links to accordion panels not working properly across browsers (see original post for details). I would greatly appreciate any suggestions on how to resolve the problem.
    Many thanks in advance.
    Joy

  • Accordion panel not working correctly in IE6

    Hi,
    I created a page with an accordion panel set that worked fine
    in FireFox. The panels start closed and then open when clicked
    upon.
    This works fine in IE 7 but when I open this page in IE6, the
    panel tabs do not function properly. The top five do not have the
    background color or any delineating lines - there is just the text
    of the panel tab. When the tabs are clicked on, they will open but
    the colors change oddly. Sometimes there is a small horizontal
    section of no color at the bottom of the panel tab color. When the
    cursor is moved around the page, the tabs can change
    colors....sometimes. Other times a tab will lose color completely.
    And yet, it works perfectly in Firefox. What could be causing
    this problem. I was so happy that I had finally completed this page
    since there was a lot of dynamic data to link to the page - and now
    I feel like I am back at square one.
    Please help!
    Thanks

    I atually figured it out - well I got it to work right but
    I'm still not sure why it works. I had the accordion panel in a div
    wrapper. The positioning was set to "relative". When I commented
    out that line, it worked fine in IE6! I'm not sure why - but I'm
    glad it did!

  • Problem with Accordion Panels

    Hi
    I have an issue with Accordion Panels.
    http://characteraday.businesscatalyst.com/guided.html
    You can see in the link above that I have Accordion Panels on the right side that say open/close tip. The first one open and close and displays the tip. All the others do the same but when they open then push the one under it down. The first one does not do this and I like this a lot better. Any ideas how to make them all work the way the first one "Enter the Character's name" works.
    Thanks for your time.

    Modify the following line by adding the mark-up coloured red.
                      <div class="AccordionPanelContent"><span class="CollapsiblePanelContent"><img src="productimages/tinyimages/doorkitseat.jpg" width="50" height="50">The <strong>Door Insert Kit</strong> is a bathtub conversion kit. By   removing a portion of the bathtub wall and inserting a door, an existing bathtub becomes accessible, retaining its use a a bathtub. <em><a href="doorkitandseat.html"><strong>More</strong></a></em></span></div>
    I hope this helps.
    Ben

Maybe you are looking for