Open Forum

 View Only
  • 1.  Custom page navigation

    Posted 05-03-2022 09:34
    We have a custom webpage with a lot of content (it's long!), so trying to format for easier navigation around the page but I'm not finding anything workable in flex. Any ideas are welcome! We've looked at anchor links (not possible in flex), pop up windows like the speaker widget (while we can duplicate this widget onto the page, don't know how to add the content?) and haven't been able to find anything about adding a drop down menu at the top of the page, where people select an option and then it jumps to that section / content. Does anyone have any ideas of a workable solution in flex? Thank you in advance.
    #Flex-Creating/ManagingEvents

    ------------------------------
    Lynda de Koning
    Programs Manager
    Australian Performing Arts Centres Association (APACA)
    ------------------------------


  • 2.  RE: Custom page navigation

    Community MVP
    Posted 05-03-2022 10:56

    @Lynda de Koning

    With Flex you have the option of using the Code widget. You can add custom HTML, CSS, or JavaScript to the widget. You can either do the anchor tags or create some sort of open & close sections found on many FAQ pages. If you don't have the custom code widget reach out to your account rep to turn it on.

    I am adding code I quickly did showing how I have used anchor tags in the past. (don't mind the Lorem Ipsum text).

    <div>
    <ul>
    <li><a href="#story-1">Story 1</a></li>
    <li><a href="#story-2">Story 2</a></li>
    <li><a href="#story-3">Story 3</a></li>
    </ul>

    <div id="story-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan lacus ut ante placerat lobortis. Praesent risus orci, ullamcorper vel magna in, lacinia consectetur nunc. Suspendisse a ipsum enim. Suspendisse cursus finibus lacus.</p>

    <p>Sit amet efficitur neque laoreet suscipit. Aenean vestibulum ligula tristique, sollicitudin neque id, congue nisl. Maecenas eget metus odio. Integer pulvinar neque id neque pulvinar dictum. Aenean urna lorem, facilisis bibendum eros at, pretium lobortis nibh.</p>
    </div>

    <div id="story-2">
    <p>uspendisse vehicula efficitur maximus. Curabitur vel facilisis ligula. Nunc maximus suscipit leo ut mattis. Fusce scelerisque, elit non dictum vestibulum, ante nulla dictum elit, a ullamcorper.</p>

    <p>Sit amet efficitur neque laoreet suscipit. Aenean vestibulum ligula tristique, sollicitudin neque id, congue nisl. Maecenas eget metus odio. Integer pulvinar neque id neque pulvinar dictum. Aenean urna lorem, facilisis bibendum eros at, pretium lobortis nibh.</p>
    </div>

    <div id="story-3">
    <p>uspendisse vehicula efficitur maximus. Curabitur vel facilisis ligula. Nunc maximus suscipit leo ut mattis. Fusce scelerisque, elit non dictum vestibulum, ante nulla dictum elit, a ullamcorper.</p>

    <p>Sit amet efficitur neque laoreet suscipit. Aenean vestibulum ligula tristique, sollicitudin neque id, congue nisl. Maecenas eget metus odio. Integer pulvinar neque id neque pulvinar dictum. Aenean urna lorem, facilisis bibendum eros at, pretium lobortis nibh.</p>
    </div>
    </div>



    ------------------------------
    James Rose | Senior Web Developer and Content Management
    Digital Infrastructure
    Office of University Development | University of Michigan
    ------------------------------



  • 3.  RE: Custom page navigation

    Posted 05-04-2022 01:41

    Dear James,

    Thank you for your assistance, we were not aware of the custom code widget and can see how this could find a solution. Unfortunately, we don't have inhouse coding expertise, thus I'm wondering if there is another solution using an existing widget or similar? 

    Lynda



    ------------------------------
    Lynda de Koning
    Programs Manager
    Australian Performing Arts Centres Association (APACA)
    ------------------------------



  • 4.  RE: Custom page navigation

    User Group Member
    Posted 12-27-2022 13:59
    Lynda,

    I know this was posted months ago, but I came across this discussion while trying to look for a solution to a similar situation. I wanted to fit an image, two page links, and two anchor links, and a register button in a header. 

    I was able to do this by simply using a text widget where the links go. In my case, I wanted to apply CSS, so I used custom data tags in a text widget, but I believe simple links in a text widget would work as well. What I did was:

    1. Create anchor links targeting the location you want on the same page. (So, if this is in a header, the header needs to be created on the same webpage without using the Header/Footer function.) 
    2. Save and Publish it. 
    3. If you test your website and click on the anchor link you created, it will give you the widget ID. Look at the URL and find a portion that starts with "#widget:" at the end of your URL. That's the widget ID. 
    4. In a text widget, create a link. In the link URL, enter the REAL URL (the URL you get when you make the website live) and add the widget ID at the end. 

    This worked in my case. I had to play with spacing between the links so that it looks good on a site. But the look that worked on a computer monitor didn't quite look as nice on mobile devices, so that was, unfortunately, a compromise. 

    Hope this works for you, too!


    ------------------------------
    Etsuko Aoyama
    Geodesic Capital
    ------------------------------